Skip to content

Latest commit

 

History

History
2180 lines (1698 loc) · 162 KB

CHANGELOG.md

File metadata and controls

2180 lines (1698 loc) · 162 KB
Raw

2.0.0-beta.3 (2018-08-23)

Highlights:

  • Experimental Module and Nightly Build
  • Tab Select and Breadcrumbs experimental modules!
  • Bugfixes for data-table and dynamic forms
  • Enhancements for dynamic forms like custom types and new properties.

We are pleased to annouce our experimental area where we test all our new components before we move them into the a production package.

You can start using these components at any point by installing our nightly experimental build:

npm install --save https://github.com/Teradata/covalent-experimental-nightly.git

NOTE: Beware breaking changes since this particular area will typically change as we encounter bugs or add features to suit the use cases we encounter.

Initial experimental components:

  • Breadcrumbs
  • Tab Select

Please try and use our components and help us improve them even more!

Bug Fixes

  • breadcrumbs: clean up imports of observable creation methods (#1209) (3197c50), closes #1208
  • datatable: change detection error on datatable demo with pagination (#1198) (419396b)
  • datatable: row selection checkbox incorrectly fires row click event in firefox (#1195) (1db63f6)
  • datatable: selectAllRows doesn't trigger ngModelChange (#1194) (59055f4)
  • docs: Add documentation about clickable input on datatable (#1224) (95425ef)
  • docs: Add documentation about custom sort on datatable (#1225) (be754dd) closes #674, closes #461, closes #521
  • docs: github deployment docs out of date (#1196) (61686f2)
  • dynamic-forms: make sure hints and errors dont overlap (#1222) (cf0439d)
  • paging: Fix paging demo with search to jump to page 1 after searching (#1203) (44f2212)

Features

  • breadcrumbs: initial implementation experimental (#1183) (256491e)
  • install covalent tools as dependency (#1199) (2c74ee6)
  • setup of the experimental primary entry point (#1173) (09756b5)
  • dynamic-forms: add support for Materials multiselect form field (closes #820) (95c773d)
  • dynamic-forms: adds hints to elements that allow mat-hints (#1221) (955e598)
  • dynamic-forms: allow elements to be disabled via configuration (#1219) (2e2b8a0)
  • tab-select: add stretchTabs input to stretch tabs on mat-tab-group (#1191) (d0f5fa5)
  • tab-select: initial implementation for tab select experimental (#1187) (66503a9)
  • test-bed: add test-bed project to test experimental components or new features (#1186) (6f8a3bf)

2.0.0-beta.2 (2018-05-28)

Bug Fixes

Features

BREAKING CHANGES

  • typography: fully remove deprecated covalent typography (#1146) (9301848)
  • typography: removal of _typography.scss

1.0.1 (2018-05-28)

Bug Fixes

2.0.0-beta.1 (2018-04-16)

Highlights:

  • Added support for angular@6!

Features

Internal

1.0.0 Covalently Bond (2018-02-11)

We are pleased to announce [email protected] stable!

Thanks to the community for helping us improve Covalent more as each day passes by.

Now that we are stable, the team will focus on improving our components and adding more and more features going forward.

1.0.0-rc.5 Compiled Typewritter (2018-02-07)

We were going to release stable, but we wanted to do one final thing before that.. and that is bump ng-packagr to its stable release and make sure Covalent can be used with fullTemplateTypeCheck in apps.

Bug Fixes

  • lib: fix covalent build in case typeCheck is used in apps (#1117) (71c79a7)
  • search-input: make sure initializing ngModel doesnt trigger a debounce (#1109) (0bc5be6)

1.0.0-rc.4 Recursive Fedora (2018-01-26)

The focus of this release is fixing an introduced issue with AoT when we changed our build process to use ng-packagr.

We also updated our Design Patterns to use stackblitz and added a few more.

Bug Fixes

Features

1.0.0-rc.3 Cranberry Zombie (2018-01-19)

Almost stable! This release centered around adding list support for our documentation renderer and making sure Covalent has the proper Angular build format leveraging ng-packagr.

This means you can now import directly from our secondary entry points, so you can minimize your build size by cherry picking what you need.

e.g.

import { CovalentLoadingModule } from '@covalent/core/loading';
import { CovalentSearchModule } from '@covalent/core/search';

In addition, following the Angular build format allows for SSR builds.

So start testing and let us know your issues!

Features

  • build: change to Covalent Angular package format build w/ ng-packagr (#1065) (cb2fd30)
  • dependencies: upgrade covalent dependencies @angular@5.1 (#1096) (bffb143)
  • docs: change data-table API from tables to lists in README (#1076) (9322d9e)
  • docs: add README for loading docs (#1092) (a6d3de6)
  • docs: change file-input API from tables to lists in README (#1082) (c492976)
  • docs: change file-upload API from tables to lists in README (#1085) (308b626)
  • docs: change layout API from tables to lists in README (#1086) (14d0e7a)
  • docs: change markdown API from tables to lists in README (#1081) (d9a0c03)
  • docs: change messages API from tables to lists in README (#1091) (d86d5cf)
  • docs: change notifications API from tables to lists in README (#1090) (b82fed7)
  • docs: change paging API from data-table to list in README (#1089) (08fb421)
  • docs: properly load README into http docs (#1088) (8bcfdf4)
  • docs: replace dynamic-forms API with list API in README (#1084) (1041d1f)
  • docs: search and virtual scroll README refactor (#1093) (0b4cb6d)
  • docs: support list in pretty markdown to showcase API's better (#1073) (ac260e3)
  • expansion-panel: change API from table to lists in README (#1078) (44cd9a9)
  • highlight: change component API from tables to lists in README (#1080) (5b29a0a)
  • json-formatter: render README in docs (#1079) (a75c61f)

1.0.0-rc.2 Transpiled Suspenders (2018-01-05)

Kicking off the year with our RC.2 release!

The Covalent team wishes everybody a Happy New Year and we want to thank everybody for their support. We will continue delivering new features and improvements this 2018.

More information of our roadmap here. Note: This is subject to change depending on the Material Repo's roadmap.

Highlights

  • Datepicker support for dynamic-forms.
  • inputPosition input for chips.
  • Simple Dialogs are more flexible and you can pass any MatDialogConfig.
  • More RTL and OnPush support.
  • More bug fixes and improvements!

Breaking Changes

Bug Fixes

  • docs: close sidenav properly when clicking on it in any scenario (#1030) (ba2b5ed)
  • expansion-panel: let label flex without sublabel and follow MD spec better (#1068) (251abb8)
  • loading: update circle height incase loader is rendered hidden (#1066) (f26bd4e)
  • notifications: fix menu header margin in demo (#1060) (55cb101)

Features

1.0.0-rc.1 Obfuscated Mustache (2017-12-12)

Highlights

  • @angular/[email protected] upgrade
  • Use material secondary entry points to load only required material modules
  • New logo to celebrate the march to 1.0 Stable
  • Moving to the @angular/material typography and deprecating Covalent typography
  • Bugfixes and improvements

Breaking Changes

Typography

Covalent typography will be deprecated in favor of the angular/material typography. Click here for more information.

Migration steps

  1. Replace md- with mat- in the typography classes with the exception of md-subhead
  2. Replace md-subhead with mat-subheading-1
  3. Import the Roboto font in index.html <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  4. Customized the typography for proper font weights by replacing
@include mat-core();

with

// Custom typography
$custom-typography: mat-typography-config(
  $button: mat-typography-level(14px, 14px, 400)
);
$custom-toolbar-typography: mat-typography-config(
  $title: mat-typography-level(20px, 32px, 400)
);

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include mat-core($custom-typography);

// Setting the toolbar to the proper spec weight
@include mat-toolbar-typography($custom-toolbar-typography);

Bug Fixes

Features

Internal

1.0.0-rc.0 Responsive Skinnyjeans (2017-11-14)

The main focus of this release is support both @[email protected] and @angular/[email protected], also making our modules really stand alone so they dont depend on the platform.scss styles and configurable typography following the angular material usage.

Highlights

  • @[email protected] support
  • @angular/[email protected] support
  • Real stand alone modules with no dependency to external css styles
  • Create style mixins to pick and choose which utility classes you want
  • Configurable typography for all Covalent components
  • More templates and migration to StackBlitz
  • Bugfixes and improvements

Bug Fixes

Features

Internal

1.0.0-beta.8-1 (2017-10-06)

Small patch release to support @angular/[email protected]

Material Breaking Changes

The most important breaking change with this latest material release is that mat-select will need to be inside a mat-form-field if you want the placeholder and underline.

This does give an advantage that now matInput and mat-select will follow the same API's around hints, errors, prefix, suffix and placeholders.

Read more in the @angular/material changelog

Highlights

Features

1.0.0-beta.8 Free Fallin (2017-10-05)

The main focus of this release is support for @angular/[email protected] and rename all md references from our selectors and inputs to mat for future support since the md prefixes are gonna be removed on @angular/material's following release.

The material team created a tool to update it automatically if you want to give it a test. angular-material-prefix-updater

Material Breaking Changes

The material team decided to change their prefix from md to mat. Read more on the reasons in the @angular/material changelog

Steps to rename md to mat

We structured our commits in this PR with the specific steps needed for the md/mat conversion.

Highlights

Bug Fixes

Features

Refactor

Internal

1.0.0-beta.7 One Step Closer (2017-09-11)

This release will make sure Covalent works properly with @angular/[email protected].

We are also pleased to announce the release of the covalent/text-editor module which wraps the SimpleMDE lib for Angular use.

Highlights

  • Virtual scroll module
  • Text Editor module
  • Dynamic forms features and bug fixes
  • Data table sticky headers, configurable column widths and virtual scroll
  • Pre-canned animations!
  • Initial IE11 support (there may be issues, so please create an issue if you find one)

Breaking Changes

Please check the Angular Material beta.10 changelog for breaking changes and deprecations, since those will be breaking changes in future material releases.

CovalentDynamicFormsModule

In order to ensure proper i18n support, all error messages must be provided by the developer.

e.g.

<td-dynamic-forms #dynamicForm [elements]="dynamicElements">
  <ng-template let-element ngFor [ngForOf]="dynamicElements">
    <ng-template let-control="control" [tdDynamicFormsError]="element.name">
      <span *ngIf="control.touched || !control.pristine">
        <span *ngIf="control.hasError('required')">Required</span>
        <span *ngIf="control.hasError('min')">Min value: {{element.min}}</span>
        <span *ngIf="control.hasError('max')">Max value: {{element.max}}</span>
      </span>
    </ng-template>
  </ng-template>
</td-dynamic-forms>

CovalentPagingModule

The md-select component has been abstracted from the paging bar, so that it could be easily added by devs.

The following inputs are:

  • [pageSizes], [pageSizeAll], [pageSizeAllText].

Before:

<td-paging-bar #pagingBar
                       [pageSizes]="[50,100,200,500,1000]"
                       [pageSize]="pageSize"
                       [total]="1345"
                       (change)="change($event)">
  <span td-paging-bar-label hide-xs>Rows per page:</span>
  <span>{{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span></span>
</td-paging-bar>

After:

<td-paging-bar #pagingBar
                       [pageSize]="pageSize"
                       [total]="1345"
                       (change)="change($event)">
  <span hide-xs>Rows per page:</span>
  <md-select [(ngModel)]="pageSize">
    <md-option *ngFor="let size of [50,100,200,500,1000]" [value]="size">
      {{size}}
    </md-option>
  </md-select>
  <span>{{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span></span>
</td-paging-bar>

More information in https://github.com/Teradata/covalent/pull/772

Bug Fixes

Features

Refactor

Performance

Internal

1.0.0-beta.6 Midnight Rider (2017-07-07)

This release will make sure we work properly with @angular/[email protected] + usage of the cdk module + some layout structure changes to add more flexibility and better examples for each layout.

Please check the angular material beta.7 and beta.8 changelog

We are also pleased to announce the release of the covalent/code-editor module which makes the Monaco editor (used by vscode) simple to use in the browser or electron.

Breaking Changes

@angular/cdk

Material introduced the component toolkit module and covalent has been using it for quite a while (directly from @angular/material).

So this dependency is needed to be able to use covalent and soon material since they are deprecating the cdk imports from the @angular/material package.

So just npm install @angular/cdk and you will be good to go!

td-chips

We will deprecate the readOnly input in favor of a disabled input to keep consistency across components and reuse the newly disabled mixin.

CovalentLayoutModule

We abstracted the menu button from td-layout-nav and td-layout-nav-list, the arrow_back button from td-layout-nav-list and td-layout-manage-list and the md-toolbar from td-layout-manage-list and introduced layout directives that toggle/close/open their immediate parent.

The following directives are:

  • [tdLayoutToggle], [tdLayoutOpen], [tdLayoutClose] for the td-layout sidenav.
  • [tdLayoutNavListToggle], [tdLayoutNavListOpen], [tdLayoutNavListClose] for the td-layout-nav-list sidenav.
  • [tdLayoutManageListToggle], [tdLayoutManageListOpen], [tdLayoutManageListClose] for the td-layout-manage-list sidenav.

Every directive has a [hideWhenOpened] input that hides the host element when the bound sidenav is opened if set to true, also every directive can take a boolean to allow or block the click action.

e.g. td-layout-nav

Before:

<td-layout>
  <div td-sidenav-content>
    Sidenav content
  </div>
  <td-layout-nav toolbarTitle="Title">
    Content
  <td-layout-nav>
</td-layout>

After:

<td-layout>
  <div td-sidenav-content>
    Sidenav content
  </div>
  <td-layout-nav toolbarTitle="Title">
    <button md-icon-button td-menu-button tdLayoutToggle>
      <md-icon>menu</md-icon>
    </button>
    Content
  <td-layout-nav>
</div>

OR

<td-layout-nav toolbarTitle="Title">
  <button md-icon-button td-menu-button (click)="somethingElse()">
    <md-icon>menu</md-icon>
  </button>
  Content
<td-layout-nav>

e.g. td-layout-nav-list

Before:

<td-layout-nav-list #navList toolbarTitle="Title">
  <div td-sidenav-content (click)="!media.query('gt-sm') && navList.close()">
    Sidenav Content
  </div>
  <div td-toolbar-content>
    Toolbar content
  </div>
  Content
 <td-layout-nav-list>

After:

<td-layout-nav-list toolbarTitle="Title">
  <button md-icon-button td-menu-button tdLayoutToggle>
    <md-icon>menu</md-icon>
  </button>
  <div td-sidenav-content [tdLayoutNavListClose]="!media.query('gt-sm')">
    Sidenav Content
  </div>
  <div td-toolbar-content>
    <button md-icon-button tdLayoutNavListOpen [hideWhenOpened]="true">
      <md-icon>arrow_back</md-icon>
    </button>
  </div>
  Content
 <td-layout-nav-list>

e.g. td-layout-manage-list

Before:

<td-layout-manage-list #manageList>
  <md-toolbar td-sidenav-content></md-toolbar>
  <div td-sidenav-content (click)="!media.query('gt-sm') && manageList.close()">
    Sidenav Content
  </div>
  <div td-toolbar-content>
    Toolbar content
  </div>
  Content
 <td-layout-manage-list>

After:

<td-layout-manage-list>
  <md-toolbar td-sidenav-content></md-toolbar>
  <div td-sidenav-content [tdLayoutManageListClose]="!media.query('gt-sm')">
    Sidenav Content
  </div>
  <md-toolbar>
    <button md-icon-button tdLayoutManageListOpen [hideWhenOpened]="true">
      <md-icon>arrow_back</md-icon>
    </button>
  </md-toolbar>
  Content
 <td-layout-manage-list>

All these changes will allow the developers to toggle parent sidenavs with any clickable element + able to toggle/open/close parent sidenavs from child routes + allow mixing and matching different layouts.

e.g.

<td-layout>
  <div td-sidenav-content>
    Main Sidenav content
  </div>
  <td-layout-nav toolbarTitle="Title">
    <!-- [tdLayoutToggle] makes this button's click toggle the td-layout sidenav -->
    <!-- [td-menu-button] is used to position this button before the logo and title -->
    <button md-icon-button td-menu-button tdLayoutToggle>
      <md-icon>menu</md-icon>
    </button>
    <td-layout-manage-list>
      <md-toolbar td-sidenav-content>
        Section Title
      </md-toolbar>
      <!-- [tdLayoutManageListClose] makes this button's click close the td-layout-manage-list sidenav -->
      <div td-sidenav-content tdLayoutManageListClose>
        Manage List Sidenav Content
      </div>
      <td-layout-nav toolbarTitle="Page Title">
        <!-- [tdLayoutManageListOpen] makes this button's click close the td-layout-manage-list sidenav -->
        <!-- [hideWhenOpened] is used to hide the button when the sidenav is opened -->
        <button md-icon-button td-menu-button tdLayoutManageListOpen [hideWhenOpened]="true">
          <md-icon>arrow_back</md-icon>
        </button>
        Content
      </td-layout-nav>
    </td-layout-manage-list>
  </td-layout-nav>
</td-layout>

OR

<td-layout-nav toolbarTitle="Title">
  <!-- [td-menu-button] is used to position this button before the logo and title -->
  <!-- now we use it to toggle the manage-list sidenav for small/mid apps -->
  <button md-icon-button td-menu-button (click)="manageList.toggle()">
    <md-icon>menu</md-icon>
  </button>
  <td-layout-manage-list #manageList>
    <div td-sidenav-content>
      Manage List Sidenav Content
    </div>
    Content
  </td-layout-manage-list>
</td-layout-nav>

Bug Fixes

Features

Refactor

Performance

Internal

1.0.0-beta.5-1 (2017-06-12)

Small patch release to address a loading component issue and documentation updates with [email protected] change detection since creating components or changing inputs on component life hooks cycles need to explicitly call a change detection cycle by developers.

Bug Fixes

Internal

1.0.0-beta.5 Blackhole Sun (2017-06-09)

Breaking Change

td-chips

Now that chips have async support and we've abstracted the internal filtering mechanism, the developer needs to provide their own filter.

This will also allow the developer to create custom filters both locally and server-side.

e.g.

<td-chips [items]="filteredStrings"
          [(ngModel)]="stringsModel"
          placeholder="Enter autocomplete strings"
          (inputChange)="filterStrings($event)"
          requireMatch>
</td-chips>
strings: string[] = [
  'stepper',
  'expansion-panel',
  'markdown',
  'highlight',
  'loading',
  'media',
  'chips',
  'http',
  'json-formatter',
  'pipes',
  'need more?',
];

filteredStrings: string[];

stringsModel: string[] = this.strings.slice(0, 6);

ngOnInit(): void {
  this.filterStrings('');
}

filterStrings(value: string): void {
  if (value) {
    this.filteredStrings = this.strings.filter((item: any) => {
      return item.toLowerCase().indexOf(value.toLowerCase()) > -1;
    }).filter((filteredItem: any) => {
      return this.stringsModel ? this.stringsModel.indexOf(filteredItem) < 0 : true;
    });
  }
}

td-expansion-panel

With the introduction of td-expansion-panel-group, the td-expansion-panel expanded margin animation will not be applied unless the td-expansion-panel is grouped inside of a td-expansion-panel-group.

e.g.

<!-- not applied -->
<td-expansion-panel></td-expansion-panel>

<!-- applied -->
<td-expansion-panel-group>
  <td-expansion-panel></td-expansion-panel>
  <td-expansion-panel></td-expansion-panel>
  <td-expansion-panel></td-expansion-panel>
</td-expansion-panel-group>

Bug Fixes

Features

Performance

Internal

1.0.0-beta.4 Johnny B Goode (2017-05-16)

Breaking Change

This was announced as deprecated in beta.3, so now you only need to import the module and it will work the same way.

e.g.

import: [
  CovalentStepsModule // instead of CovalentStepsModule.forRoot()
]

This was announced as deprecated in beta.3 to make developer import only what they need to reduce bundle size.

Since CovalentCoreModule has been removed, there is really no use for @angular/flex-layout inernally. we will leave it to the developer to include it on demand.

To not force npm install to get a specific material version, @angular/material was moved as peerDependency. This means you will need to add it into your package.json explicitly.

These selectors were deprecated a few releases back so it should be ok to remove them now. See #535 for more information.

Bug Fixes

Features

Internal

1.0.0-beta.3-1 (2017-04-10)

External Breaking Changes

  • theming: update theming to point to the correct path

    Before:

      @import '~@angular/material/core/theming/all-theme';

    After:

      @import '~@angular/material/theming';

Breaking Changes

Bug Fixes

Features

Performance

1.0.0-beta.3 Electric Relaxation (2017-04-05)

Breaking Change

Bug Fixes

Features

Refactor

Internal

1.0.0-beta.2-1 (2017-02-27)

Bug Fixes

Internal

1.0.0-beta.2 Hotel California (2017-02-23)

Breaking Change

  • material: breaking changes from @material.

  • file-upload: add way to set its labels for easier i18n usage (c91d3cdd61358a1af2ad459cd67f56d62070c3c7), closes #286

    Usage:

    <td-file-upload #singleFileUpload (upload)="uploadEvent($event)" [disabled]="disabled">
  <md-icon>file_upload</md-icon><span>{{ singleFileUpload.files?.name }}</span>
  <template td-file-input-label>
    <md-icon>attach_file</md-icon><span>Choose a file...</span>
  </template>
</td-file-upload>

  • paging-bar: add way to set its labels for easier i18n usage. (e454b985fdbbaed6dce2040830177f47118a5be3) closes #356 and 214

    Usage:

    <td-paging-bar #pagingBar pageSizeAllText="All" [pageSizeAll]="true">
  <span td-paging-bar-label hide-xs>Row per page:</span>
  {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
</td-paging-bar>

Bug Fixes

Features

Refactor

Internal

1.0.0-beta.1-1 (2017-01-31)

Bug Fixes

  • loading: Fixed edge case that tried to create the same tdLoading twice a component that uses [routerLinkActive] when navigating into it.

1.0.0-beta.1 Purple Rain (2017-01-30)

Breaking Changes

td-layout

Before (deprecated):

<td-layout>
  <md-nav-list menu-items></md-nav-list>
  // content
</td-layout>

After:

<td-layout>
  <md-nav-list td-sidenav-content></md-nav-list>
  // content
</td-layout>

td-layout-nav

Before (deprecated):

<td-layout-nav>
  <div toolbar-content></div>
  // content
</td-layout-nav>

After:

<td-layout-nav>
  <div td-toolbar-content></div>
  // content
</td-layout-nav>

td-layout-card-over

Before (deprecated):

<td-layout-card-over>
  // content
  <div after-card></div>
</td-layout-card-over>

After:

<td-layout-card-over>
  // content
  <div td-after-card></div>
</td-layout-card-over>

td-layout-nav-list

Before (deprecated):

<td-layout-nav-list>
  <div list-toolbar-content></div>
  <md-nav-list list-items></md-nav-list>
  <div nav-toolbar-content></div>
  // content
</td-layout-nav-list>

After:

<td-layout-nav-list>
  <div td-sidenav-toolbar-content></div>
  <md-nav-list td-sidenav-content></md-nav-list>
  <div td-toolbar-content></div>
  // content
</td-layout-nav-list>

td-layout-manage-list

Before (deprecated):

<td-layout-manage-list>
  <md-toolbar list-items></md-toolbar>
  <md-nav-list list-items></md-nav-list>
  <div toolbar-buttons></div>
  // content
</td-layout-manage-list>

After:

<td-layout-manage-list>
  <md-toolbar td-sidenav-content></md-toolbar>
  <md-nav-list td-sidenav-content></md-nav-list>
  <div td-toolbar-content></div>
  // content
</td-layout-manage-list>

Bug Fixes

Features

Usage:

<td-layout>
  <td-navigation-drawer sidenavTitle="title" logo="logoName" name="User Name" email="[email protected]" backgroundUrl="safeUrl/to/background" color="none">
     Main Content
    <div td-navigation-drawer-menu>
      Menu Content
    </div>
  </td-navigation-drawer>
  .. rest of the app
</td-layout>

Usage:

<td-layout-manage-list #manageList
                        [opened]="media.registerQuery('gt-sm') | async"
                        [mode]="(media.registerQuery('gt-sm') | async) ? 'side' : 'push'"
                        [sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '257px' : '100%'">
  <md-nav-list td-sidenav-content (click)="!media.query('gt-sm') && manageList.close()">
<td-layout-nav-list #navList
                    logo="assets:teradata"
                    toolbarTitle="Covalent"
                    [opened]="media.registerQuery('gt-sm') | async"
                    [mode]="(media.registerQuery('gt-sm') | async) ? 'side' : 'push'"
                    [sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '350px' : '100%'">
  <md-nav-list td-sidenav-content (click)="!media.query('gt-sm') && navList.close()">
constructor(public media: TdMediaService) {}

ngAfterViewInit(): void {
  // broadcast to all listener observables when loading the page
  this.media.broadcast();
}

Internal

0.10.2 (2017-1-3)

Bug Fixes

  • http: interceptors instead of inteceptors typo in HttpConfig. closes #233

0.10.1 (2017-1-2)

Bug Fixes

0.10.0 Bedlington Cummerbund (2016-12-30)

Breaking Changes

  • deploy: Single core package. (81901b23eca8e02330260b5831c64da3005a39fd), closes #166 and #93

    • Created submodules of all core modules which are wrapped by one parent module CovalentCoreModule (@covalent/core)

      • CovalentCommonModule
      • CovalentChipsModule
      • CovalentDataTableModule
      • CovalentDialogsModule
      • CovalentExpansionPanelModule
      • CovalentFileModule
      • CovalentJsonFormatterModule
      • CovalentLayoutModule
      • CovalentLoadingModule
      • CovalentMediaModule
      • CovalentMenuModule
      • CovalentNofiticationsModule
      • CovalentPagingModule
      • CovalentSearchModule
      • CovalentStepsModule

    • Stand alone modules:

      • CovalentHttpModule (@covalent/http)
      • CovalentDynamicFormsModule (@covalent/dynamic-forms)
      • CovalentHighlightModule (@covalent/highlight)
      • CovalentMarkdownModule (@covalent/markdown)

    • markdown is a separate module and its theme needs to be imported separatly @import ~@covalent/markdown/markdown-theme' and included @include covalent-markdown-theme($theme);

    • highlight is a separate module and its theme needs to be imported separatly @import ~@covalent/highlight/highlight-theme' and included @include covalent-highlight-theme();

    • all-theme and platform.css changed directories.

      Before:

      `~@covalent/core/styles/platform.css`
`~@covalent/core/styles/theming/all-theme';`

      After:

      `@covalent/core/common/platform.css`
`~@covalent/core/theming/all-theme';`

  • http: Path interceptors configuration. (7db377e62254f6add6995065f09f4b5528bd0c16), closes #194

    Before:

    CovalentHttpModule.forRoot([Interceptor1, Interceptor2]),

    After:

    const httpInterceptorProviders: Type<IHttpInterceptor>[] = [
  Interceptor1,
  Interceptor2,
  ...
];
...
imports: [
  CovalentHttpModule.forRoot({
    interceptors: [{
      interceptor: Interceptor1, paths: ['**'],
    }, {
      interceptor: Interceptor2, paths: ['**'],
    }],
  }),
  ...
],
providers: [
  httpInterceptorProviders,
  ...
],

  • steps: (stepChange) event now returns the step objects instead of the step number. (6486eb527ae845224a170b8c7dda2dc92a089c3a)

    Before:

    export interface IStepChangeEvent {
  newStep: number;
  prevStep: number;
}

    After:

    export interface IStepChangeEvent {
  newStep: TdStepComponent;
  prevStep: TdStepComponent;
}

  • layouts: logo expects an svgIcon value now from an MdIconRegistry svg. (breaking change from @angular/material). (6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15)

    Before:

    <td-layout logo="/assets/route/to/icon1.svg">

    After (once at any toplevel component):

    import { DomSanitizer } from '@angular/platform-browser';
import { MdIconRegistry } from '@angular/material';
...
...
constructor(iconRegistry: MdIconRegistry, domSanitizer: DomSanitizer) {
  iconRegistry.addSvgIconInNamespace('assets', 'icon1', domSanitizer.bypassSecurityTrustResourceUrl('/assets/route/to/icon1.svg'));
}
    <td-layout logo="assets:icon1">

  • charts (deprecated): CovalentChartModule is being deprecated in favor of ngx-charts @swimlane/ngx-charts.

Bug Fixes

Features

Internal

Code Health

0.9.0 Pallettown Cummerbund (2016-11-21)

Breaking Changes

Before (deprecated):

<td-layout title="Covalent">
<td-layout-nav-list title="Covalent">
<td-layout-nav title="Covalent">
<td-layout-card-over title="Title" subtitle="Subtitle">

After:

<td-layout sidenavTitle="Title">
<td-layout-nav-list toolbarTitle="Title">
<td-layout-nav toolbarTitle="Title">
<td-layout-card-over cardTitle="Title" cardSubtitle="Subtitle">

Example:

@import '~@angular/material/core/theming/all-theme';
@import '~@covalent/core/styles/theming/all-theme';

@include md-core();

$primary: md-palette($md-orange, 800);
$accent:  md-palette($md-light-blue, 600, A100, A400);

$warn:    md-palette($md-red);

$theme: md-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);
@include covalent-theme($theme);

Before:

<td-data-table
  [data]="data"
  [columns]="columns"
  sortBy="age"
  title="title"
  sortOrder="DESC"
  pagination="true"
  pageSize="5"
  sorting="true"
  search="true"
  rowSelection="true"
  multiple="true"
  search="true">
</td-data-table>

After:

<td-data-table
  [data]="filteredData"
  [columns]="columns"
  [selectable]="selectable"
  [multiple]="multiple"
  [sortable]="true"
  [sortBy]="sortBy"
  [(ngModel)]="selectedRows"
  [sortOrder]="sortOrder"
  (sortChange)="sort($event)">
</td-data-table>

Before:

<td-step>
  <template td-step-content>
    ... add content that will be shown when the step is "active"
  </template>
</td-step>

After:

<td-step>
  ... add content that will be shown when the step is "active"
</td-step>

Bug Fixes

Features

Usage:

<table td-data-table>
  <th td-data-table-column
        [name]="colName"
        [numeric]="numeric"
        [active]="true|false"
        [sortable]="true|false"
        [sortOrder]="colName"
        (sortChange)="handleSort($event)">
    ...
  </th>
  <tr td-data-table-row>
    <td td-data-table-cell
        [numeric]="column.numeric">
      ...
    </td>
  </tr>
</table>

Usage:

 <td-data-table
  [data]="{'type': 'test'}"
  [columns]="['type']">
  <template tdDataTableTemplate="type" let-value="value" let-row="row" let-column="column">
    ...
  </template>
</td-data-table>

Usage:

<td-expansion-panel label="label" sublabel="sublabel">
  <template td-expansion-panel-header>
    ... add header content (overrides label and sublabel)
  </template>
  <template td-expansion-panel-label>
    ... add label content (if not used, falls back to [label] input)
  </template>
  <template td-expansion-panel-sublabel>
    ... add sublabel content (if not used, falls back to [sublabel] input)
  </template>
  ...
</td-expansion-panel>
  • steps: Support for label template template[td-step-label] as an alternative while keeping the easy API [label] input for normal (simple) use cases in td-step (5d87249e9a13561ff2bb14fd3ebf41393f902230)

Usage:

<td-step label="Label">
  <template td-step-label>
    ... add label content (if not used, falls back to [label] input)
  </template>
  ... add content that will be shown when the step is "active"
</td-step>

Internal

0.8.0 Pixel Raichu (2016-10-14)

Breaking Changes

theme.scss content:

@import '~@angular/material/core/theming/all-theme';
// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include md-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$primary: md-palette($md-orange, 800);
$accent:  md-palette($md-light-blue, 600, A100, A400);

// The warn palette is optional (defaults to red).
$warn:    md-palette($md-red, 600);

// Create the theme object (a Sass map containing all of the palettes).
$theme: md-light-theme($primary, $accent, $warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($theme);

Before:

<td-step-summary>
  // summary here
</td-step-summary>

<td-step-actions>
  // actions here
</td-step-actions>

After:

<template td-step-summary>
  // summary here
</template >

<template td-step-actions>
  // actions here
</template >

Before:

<td-step>
  // content here
</td-step>

After:

<td-step>
  <template td-step-content>
    // content here
  </template >
</td-step>

Bug Fixes

Features

Internal

0.7.0 Beetlejuice Charizard (2016-09-14)

Bug Fixes

Code Refactoring

Features

Internal

Breaking Changes

  • release: Upgraded to RC7. (78f813c412ea42124e399edd7960b58d56139768), closes #36

  • release: Upgrade material to alpha.8-1. (6104b554376bb70d013e80d7b39d78a04dc4aa62)

  • release: Updated rxjs to 5.0.0-beta.12 (@angular dependency). (78f813c412ea42124e399edd7960b58d56139768)

  • release: Updated zone.js to 0.6.21 (@angular dependency). (78f813c412ea42124e399edd7960b58d56139768)

  • release: Added hammerjs dependency (@angular2-material dependency). (6104b554376bb70d013e80d7b39d78a04dc4aa62)

  • release: Removed bootstrap and implemented everything with NgModule decorator. (6104b554376bb70d013e80d7b39d78a04dc4aa62)

  • loading: Removed tdLoadingDirective class from API. (2bbe223982df4deb2d3eca15cad9b4a230f66713)

  • highlight: Removed static lib file and added npm dependency for highlight.js (see docs for more info on how to setup). (e555bc438ab898c48a24f507204205db95c4dcbc)

  • all: Covalent now depends on TypeScript 2.0.

  • all: Updated packaging to match angular/angular2-material's packaging creating a [module].umd.js file per module.

    Example SystemJS config with UMD bundles:

    '@covalent/core': {
    format: 'cjs',
    main: 'core.umd.js'
  }

  • all: Covalent modules must be included with forRoot() when bootstrapping. See the ngModules guide for more information.

    @NgModule({
    imports: [
        CovalentCoreModule.forRoot(),
        CovalentHttpModule.forRoot()
    ]
...
});

  • http: Use CovalentHttpModule.forRoot() to register interceptors. (provideInterceptors() is deprecated and removed) (91050c51fa32b6e57d711199997829d0f4fc4c62), closes #58

    Before:

      bootstrap(AppComponent,[
    provideInterceptors([ CustomInterceptor ]),
    ...
  ])

    After:

      imports: [
    CovalentHttpModule.forRoot([ CustomInterceptor ]),
    ...
  ]

  • layouts: Changed placeholders to accept attributes since angular2 complains if the element doesnt exist, and turned md-content into a class since angular2-material never intended for it to be a component. (ab67c403d0aad3022e2e0112dfd62a89295c4f4b)

    Before(elements):

      <toolbar-content>
    ...
  </toolbar-content>

  <list-toolbar-content>
    ...
  </list-toolbar-content>

  <toolbar-buttons>
    ...
  </toolbar-buttons>

  <nav-toolbar-content>
    ...
  </nav-toolbar-content>

  <md-content>
    ...
  </md-content>

    After(attributes):

      <div toolbar-content>
    ...
  </div>

  <div list-toolbar-content>
    ...
  </div>

  <div toolbar-buttons>
    ...
  </div>

  <div nav-toolbar-content>
    ...
  </div>

  <div class="md-content">
    ...
  </div>

0.6.0 Butterfree Cumbersome (2016-08-19)

Bug Fixes

Code Refactoring

Features

Internal

Breaking Changes

  • loading: There is a need to add TD_LOADING_ENTRY_COMPONENTS in the precompile array of your main component, so the TdLoadingComponent can be resolved by the ComponentFactoryResolver.

    e.g.

    import { TD_LOADING_ENTRY_COMPONENTS } from '@covalent/core';
...
  precompile: [ TD_LOADING_ENTRY_COMPONENTS ],
})
export class YourMainComponent {}

  • td-layout: <menu-items> will need to change to <md-nav-list menu-items>

    Before:

    <td-layout>
  <menu-items>
    ...
  </menu-items>
</td-layout>

    After:

    <td-layout>
  <md-nav-list menu-items>
    ...
  </md-nav-list>
</td-layout>

  • td-layout-nav-list: <list-items> will need to change to <md-nav-list list-items>

    Before:

    <td-layout-nav-list>
  <list-items>
    ...
  </list-items>
</td-layout-nav-list>

    After:

    <td-layout-nav-list>
  <md-nav-list list-items>
    ...
  </md-nav-list>
</td-layout-nav-list>

  • td-layout-manage-list: <list-items> will need to change to <md-nav-list list-items>

    Before:

    <td-layout-manage-list>
  <list-items>
    ...
  </list-items>
</td-layout-manage-list>

    After:

    <td-layout-manage-list>
  <md-nav-list list-items>
    ...
  </md-nav-list>
</td-layout-manage-list>