@covalent/core 4.0.0-beta.4 → 4.1.0-develop.4

package/README.md

@@ -4,7 +4,6 @@ Core Teradata UI Platform for layouts, icons, custom components and themes. This
 
 The core will have custom components that enforce standards and best practices through built-in design patterns.
 
-
 ## Installation
 
 This component can be installed as npm package.
@@ -13,7 +12,6 @@ This component can be installed as npm package.
 npm i -save @covalent/core
 ```
 
-
 ## Setup
 
 Import the modules from `@covalent/core` as needed in your NgModule:
@@ -33,9 +31,12 @@ import { CovalentStepsModule  } from '@covalent/core/steps';
 export class MyModule {}
 ```
 
-
 ## Styles, Icons and Theming
 
 See [theming](https://teradata.github.io/covalent/#/docs/theme) in the covalent docs for more info
 
-Core Teradata UI Platform comes with a base CSS file `@covalent/core/common/platform.css` (includes icons). 
+Core Teradata UI Platform comes with a base CSS file `@covalent/core/common/platform.css` (includes icons).
+
+## Running unit tests
+
+Run `nx test angular` to execute the unit tests.

package/breadcrumbs/README.md

@@ -1,23 +1,23 @@
 # td-breadcrumbs
 
-`td-breadcrumbs` element generates breadcrumbs for navigation.  Handles Responsive by removing breadcrumbs from the beginning of the list as allowable space decreases.
+`td-breadcrumbs` element generates breadcrumbs for navigation. Handles Responsive by removing breadcrumbs from the beginning of the list as allowable space decreases.
 
 ## API Summary
 
 #### Inputs
 
-+ separatorIcon?: string
-  + Sets the icon url shown between breadcrumbs. Defaults to 'chevron_right'.
+- separatorIcon?: string
+  - Sets the icon url shown between breadcrumbs. Defaults to 'chevron_right'.
 
 #### Methods
 
-+ count: number
-  + The total count of individual breadcrumbs (read only)
+- count: number
+  - The total count of individual breadcrumbs (read only)
 
 #### Attributes
 
-+ hiddenBreadcrumbs: TdBreadcrumbComponent[]
-  + Array of currently hidden breadcrumbs (responsive)
+- hiddenBreadcrumbs: TdBreadcrumbComponent[]
+  - Array of currently hidden breadcrumbs (responsive)
 
 # td-breadcrumb
 
@@ -27,10 +27,10 @@
 
 #### Methods
 
-+ displayCrumb: boolean 
-  + Whether to display the individual breadcrumb or not
-+ width: number 
-  + The current width of the individual breadcrumb (read only)
+- displayCrumb: boolean
+  - Whether to display the individual breadcrumb or not
+- width: number
+  - The current width of the individual breadcrumb (read only)
 
 ## Setup
 
@@ -62,7 +62,7 @@ Basic Example:
 </td-breadcrumbs>
 ```
 
-Example with all inputs/outputs: 
+Example with all inputs/outputs:
 
 ```html
 <td-breadcrumbs #breadcrumbs separatorIcon="motorcycle">
@@ -73,13 +73,17 @@ Example with all inputs/outputs:
   <td-breadcrumb>Manage List</td-breadcrumb>
 </td-breadcrumbs>
 <mat-divider></mat-divider>
+<div>Total Breadcrumbs Count: {{breadcrumbs.count}}</div>
 <div>
-  Total Breadcrumbs Count: {{breadcrumbs.count}}
+  Hidden Breadcrumbs Count (shrink window to see):
+  {{breadcrumbs.hiddenBreadcrumbs.length}}
 </div>
-<div>
-  Hidden Breadcrumbs Count (shrink window to see): {{breadcrumbs.hiddenBreadcrumbs.length}}
-</div>
-<ng-template let-breadcrumb let-index="index" ngFor [ngForOf]="breadcrumbs.hiddenBreadcrumbs">
+<ng-template
+  let-breadcrumb
+  let-index="index"
+  ngFor
+  [ngForOf]="breadcrumbs.hiddenBreadcrumbs"
+>
   <div>
     <p>Breadcrumb Number: {{index}}</p>
     <p>Breadcrumb Width: {{breadcrumb?.width}}</p>

package/breadcrumbs/breadcrumb/breadcrumb.component.d.ts

@@ -7,6 +7,8 @@ export declare class TdBreadcrumbComponent implements AfterViewInit {
     private _width;
     private _displayIcon;
     private _separatorIcon;
+    matButtonClass: boolean;
+    tdBreadCrumbClass: boolean;
     get separatorIcon(): string;
     set separatorIcon(separatorIcon: string);
     get displayIcon(): boolean;
@@ -23,7 +25,7 @@ export declare class TdBreadcrumbComponent implements AfterViewInit {
     /**
      * Gets the display style of the crumb
      */
-    get displayBinding(): string;
+    get displayBinding(): string | undefined;
     constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef);
     ngAfterViewInit(): void;
     /**

package/breadcrumbs/breadcrumbs.component.d.ts

@@ -9,6 +9,7 @@ export declare class TdBreadcrumbsComponent implements OnInit, DoCheck, AfterCon
     private _contentChildrenSub;
     private _resizing;
     private _separatorIcon;
+    tdBreadCrumbsClass: boolean;
     _breadcrumbs: QueryList<TdBreadcrumbComponent>;
     hiddenBreadcrumbs: TdBreadcrumbComponent[];
     /**

package/breadcrumbs/covalent-core-breadcrumbs.d.ts

@@ -2,4 +2,4 @@
  * Generated bundle index. Do not edit.
  */
 /// <amd-module name="@covalent/core/breadcrumbs" />
-export * from './index';
+export * from './public_api';

package/common/README.md

@@ -0,0 +1,3 @@
+# @covalent/core/common
+
+Secondary entry point of `@covalent/core`. It can be used by importing from `@covalent/core/common`.

package/common/_common-theme.scss

@@ -1,4 +1,4 @@
-@import './styles/theme-functions';
+@import 'styles/theme-functions';
 
 @mixin td-common-theme($theme) {
   $warn: map-get($theme, warn);

package/common/behaviors/disable-ripple.mixin.d.ts

@@ -5,5 +5,5 @@ export interface ICanDisableRipple {
     onDisableRippleChange(v: boolean): void;
 }
 /** Mixin to augment a component or directive with a `disabled` property. */
-export declare function mixinDisableRipple<T extends Constructor<{}>>(base: T): Constructor<ICanDisableRipple> & T;
+export declare function mixinDisableRipple<T extends Constructor<Record<string, unknown>>>(base: T): Constructor<ICanDisableRipple> & T;
 export {};

package/common/behaviors/disabled.mixin.d.ts

@@ -5,5 +5,5 @@ export interface ICanDisable {
     onDisabledChange(v: boolean): void;
 }
 /** Mixin to augment a component or directive with a `disabled` property. */
-export declare function mixinDisabled<T extends Constructor<{}>>(base: T): Constructor<ICanDisable> & T;
+export declare function mixinDisabled<T extends Constructor<any>>(base: T): Constructor<ICanDisable> & T;
 export {};

package/common/covalent-core-common.d.ts

@@ -2,4 +2,4 @@
  * Generated bundle index. Do not edit.
  */
 /// <amd-module name="@covalent/core/common" />
-export * from './index';
+export * from './public_api';

package/common/pipes/truncate/truncate.pipe.d.ts

@@ -1,7 +1,7 @@
 import { PipeTransform } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class TdTruncatePipe implements PipeTransform {
-    transform(text: any, length: number): string;
+    transform(text: any, length?: number): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdTruncatePipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<TdTruncatePipe, "truncate">;
 }

package/common/styles/_elevation.scss

@@ -137,7 +137,11 @@ $mat-elevation-opacity: 1 !default;
 
 // Applies the correct css rules to an element to give it the elevation specified by $zValue.
 // The $zValue must be between 0 and 24.
-@mixin mat-elevation($zValue, $color: $mat-elevation-color, $opacity: $mat-elevation-opacity) {
+@mixin mat-elevation(
+  $zValue,
+  $color: $mat-elevation-color,
+  $opacity: $mat-elevation-opacity
+) {
   @if type-of($zValue) != number or not unitless($zValue) {
     @error '$zValue must be a unitless number';
   }
@@ -146,7 +150,8 @@ $mat-elevation-opacity: 1 !default;
   }
 
   box-shadow: #{map-get(_get-umbra-map($color, $opacity), $zValue)},
-    #{map-get(_get-penumbra-map($color, $opacity), $zValue)}, #{map-get(_get-ambient-map($color, $opacity), $zValue)};
+    #{map-get(_get-penumbra-map($color, $opacity), $zValue)},
+    #{map-get(_get-ambient-map($color, $opacity), $zValue)};
 }
 
 // Returns a string that can be used as the value for a transition property for elevation.

package/common/styles/_typography-functions.scss

@@ -30,6 +30,14 @@
 }
 
 // Represents a typography level from the Material design spec.
-@function td-typography-level($font-size, $line-height: $font-size, $font-weight: 400) {
-  @return (font-size: $font-size, line-height: $line-height, font-weight: $font-weight);
+@function td-typography-level(
+  $font-size,
+  $line-height: $font-size,
+  $font-weight: 400
+) {
+  @return (
+    font-size: $font-size,
+    line-height: $line-height,
+    font-weight: $font-weight
+  );
 }

package/common/styles/_variables.scss

@@ -91,7 +91,8 @@ $swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !defa
 
 $swift-ease-in-out-duration: 0.5s !default;
 $swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
-$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
+$swift-ease-in-out: all $swift-ease-in-out-duration
+  $swift-ease-in-out-timing-function !default;
 
 $swift-linear-duration: 0.08s !default;
 $swift-linear-timing-function: linear !default;

package/common/styles/core/_button.scss

@@ -23,7 +23,13 @@ $mat-icon-button-margin: rem(0.6) !default;
 $mat-icon-border-radius: $mat-fab-border-radius;
 
 /** Mixin to create distinct classes for fab positions, e.g. ".mat-fab-position-bottom-right". */
-@mixin mat-fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
+@mixin mat-fab-position(
+  $spot,
+  $top: auto,
+  $right: auto,
+  $bottom: auto,
+  $left: auto
+) {
   [mat-fab].mat-fab-position-#{$spot},
   .mat-fab.mat-fab-position-#{$spot},
   [mat-fab].mat-fab-#{$spot},
@@ -43,10 +49,34 @@ $mat-icon-border-radius: $mat-fab-border-radius;
 
 @mixin td-button-utilities() {
   $mat-fab-pos-offset: calc(($mat-fab-size - $mat-fab-padding) / 2);
-  @include mat-fab-position(bottom-right, auto, $mat-fab-pos-offset, $mat-fab-pos-offset, auto);
-  @include mat-fab-position(bottom-left, auto, auto, $mat-fab-pos-offset, $mat-fab-pos-offset);
-  @include mat-fab-position(top-right, $mat-fab-pos-offset, $mat-fab-pos-offset, auto, auto);
-  @include mat-fab-position(top-left, $mat-fab-pos-offset, auto, auto, $mat-fab-pos-offset);
+  @include mat-fab-position(
+    bottom-right,
+    auto,
+    $mat-fab-pos-offset,
+    $mat-fab-pos-offset,
+    auto
+  );
+  @include mat-fab-position(
+    bottom-left,
+    auto,
+    auto,
+    $mat-fab-pos-offset,
+    $mat-fab-pos-offset
+  );
+  @include mat-fab-position(
+    top-right,
+    $mat-fab-pos-offset,
+    $mat-fab-pos-offset,
+    auto,
+    auto
+  );
+  @include mat-fab-position(
+    top-left,
+    $mat-fab-pos-offset,
+    auto,
+    auto,
+    $mat-fab-pos-offset
+  );
 
   button {
     &[mat-icon-button] {

package/common/styles/core/_card.scss

@@ -146,12 +146,13 @@ $color: rgba(0, 0, 0, 1%);
     &[ng-reflect-href] {
       &:hover {
         cursor: pointer;
-        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 20%), 0 4px 5px 0 rgba(0, 0, 0, 14%), 0 1px 10px 0 rgba(0, 0, 0, 12%);
+        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 20%),
+          0 4px 5px 0 rgba(0, 0, 0, 14%), 0 1px 10px 0 rgba(0, 0, 0, 12%);
       }
 
       &:active {
-        box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 20%), 0 10px 14px 1px rgba(0, 0, 0, 14%),
-          0 4px 18px 3px rgba(0, 0, 0, 12%);
+        box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 20%),
+          0 10px 14px 1px rgba(0, 0, 0, 14%), 0 4px 18px 3px rgba(0, 0, 0, 12%);
 
         & mat-toolbar {
           background-color: rgba(255, 255, 255, 20%);
@@ -161,9 +162,13 @@ $color: rgba(0, 0, 0, 1%);
 
       & mat-toolbar {
         background-size: 200% 100%;
-        background-image: linear-gradient(to right, transparent 50%, rgba(255, 255, 255, 20%) 50%);
-        transition: background-position 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.1s, color 0.5s ease 0s,
-          background-color 0.5s ease;
+        background-image: linear-gradient(
+          to right,
+          transparent 50%,
+          rgba(255, 255, 255, 20%) 50%
+        );
+        transition: background-position 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.1s,
+          color 0.5s ease 0s, background-color 0.5s ease;
       }
     }
 

package/common/styles/core/_whiteframe.scss

@@ -13,21 +13,29 @@ $shadow-ambient-shadow-opacity: 0.12;
 // NOTE(shyndman): gulp-sass seems to be failing if I split the shadow defs across
 //    multiple lines. Ugly. Sorry.
 $whiteframe-shadow-1dp: 0 1px 3px 0 rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 1px 1px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 2px 1px -1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+  0 1px 1px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 2px 1px -1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
 $whiteframe-shadow-2dp: 0 1px 5px 0 rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 3px 1px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+  0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 3px 1px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
 $whiteframe-shadow-3dp: 0 1px 8px 0 rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 3px 3px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+  0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 3px 3px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
 $whiteframe-shadow-4dp: 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 1px 10 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+  0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 1px 10 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
 $whiteframe-shadow-5dp: 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 5px 8px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 1px 14px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+  0 5px 8px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 1px 14px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
 $whiteframe-shadow-6dp: 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 6px 10 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+  0 6px 10 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
 $whiteframe-shadow-7dp: 0 4px 5px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 7px 10 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 2px 16px 1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+  0 7px 10 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 2px 16px 1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
 $whiteframe-shadow-8dp: 0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-  0 8px 10 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+  0 8px 10 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+  0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
 $whiteframe-shadow-9dp: 0 5px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity),
   0 9px 12px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
   0 3px 16px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;

package/common/styles/font/README.md

@@ -1,8 +1,10 @@
 The recommended way to use the Material Icons font is by linking to the web font hosted on Google Fonts:
 
 ```html
-<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet">
+<link
+  href="https://fonts.googleapis.com/icon?family=Material+Icons"
+  rel="stylesheet"
+/>
 ```
 
 Read more in our full usage guide:

package/covalent-core.d.ts

@@ -2,4 +2,4 @@
  * Generated bundle index. Do not edit.
  */
 /// <amd-module name="@covalent/core" />
-export * from './index';
+export * from './public_api';

package/dialogs/README.md

@@ -10,18 +10,18 @@ Note: if no [ViewContainerRef] is provided, [TdDialogService] will throw an erro
 
 #### Methods
 
-+ openAlert: function(IAlertConfig): MatDialogRef<TdAlertDialogComponent>
-  + Opens an alert dialog with the provided config.
-+ openConfirm: function(IConfirmConfig): MatDialogRef<TdConfirmDialogComponent>
-  + Opens a confirm dialog with the provided config.
-+ openPrompt: function(IPromptConfig): MatDialogRef<TdPromptDialogComponent>
-  + Opens a prompt dialog with the provided config.
-+ open: function<T>(component: ComponentType<T>, config: MatDialogConfig): MatDialogRef<T>
-  + Wrapper function over the open() method in MatDialog. Opens a modal dialog containing the given component.
-+ openDraggable: function<T>(IDraggableConfig<T>): MatDialogRef<T>
-  + Opens a draggable dialog containing the given component
-+ closeAll: function()
-  + Wrapper function over the closeAll() method in MatDialog. Closes all of the currently-open dialogs.
+- openAlert: function(IAlertConfig): MatDialogRef<TdAlertDialogComponent>
+  - Opens an alert dialog with the provided config.
+- openConfirm: function(IConfirmConfig): MatDialogRef<TdConfirmDialogComponent>
+  - Opens a confirm dialog with the provided config.
+- openPrompt: function(IPromptConfig): MatDialogRef<TdPromptDialogComponent>
+  - Opens a prompt dialog with the provided config.
+- open: function<T>(component: ComponentType<T>, config: MatDialogConfig): MatDialogRef<T>
+  - Wrapper function over the open() method in MatDialog. Opens a modal dialog containing the given component.
+- openDraggable: function<T>(IDraggableConfig<T>): MatDialogRef<T>
+  - Opens a draggable dialog containing the given component
+- closeAll: function()
+  - Wrapper function over the closeAll() method in MatDialog. Closes all of the currently-open dialogs.
 
 ## Usage
 
@@ -132,14 +132,15 @@ import { CovalentDialogsModule } from '@covalent/core/dialogs';
 })
 export class MyModule {}
 ```
-After that, just inject [TdDialogService] and use it for your dialogs.
 
+After that, just inject [TdDialogService] and use it for your dialogs.
 
 # ResizableDraggableDialog
 
 A utility to make a draggable dialog resizable.
 
 ## Usage
+
 ```ts
  constructor(
     private _dialogService: TdDialogService,
@@ -152,15 +153,22 @@ A utility to make a draggable dialog resizable.
 const {
   matDialogRef,
   dragRefSubject,
-}: IDraggableRefs<DraggableResizableDialogComponent> = this._dialogService.openDraggable({
-  component: DraggableResizableDialogComponent,
-  // CSS selectors of element(s) inside the component meant to be drag handle(s)
-  dragHandleSelectors: ['.drag-handle'],
-});
+}: IDraggableRefs<DraggableResizableDialogComponent> = this._dialogService.openDraggable(
+  {
+    component: DraggableResizableDialogComponent,
+    // CSS selectors of element(s) inside the component meant to be drag handle(s)
+    dragHandleSelectors: ['.drag-handle'],
+  }
+);
 
 let resizableDraggableDialog: ResizableDraggableDialog;
 dragRefSubject.subscribe((dragRf: DragRef) => {
-  resizableDraggableDialog = new ResizableDraggableDialog(this._document, this._renderer2, matDialogRef, dragRf);
+  resizableDraggableDialog = new ResizableDraggableDialog(
+    this._document,
+    this._renderer2,
+    matDialogRef,
+    dragRf
+  );
 });
 
 // Detach resize-ability event listeners after dialog closes
@@ -175,16 +183,17 @@ A component that can be utilized to create a dialog with a toolbar
 
 #### Inputs
 
-+ title: string
-  + Title that appears in toolbar
-+ closeLabel: string
-  + Label to be used on close button
-+ toolbarColor: ThemePalette
-  + Toolbar color
+- title: string
+  - Title that appears in toolbar
+- closeLabel: string
+  - Label to be used on close button
+- toolbarColor: ThemePalette
+  - Toolbar color
 
 #### Outputs
-+ closed: string
-  + Emitted when close button is clicked
+
+- closed: string
+  - Emitted when close button is clicked
 
 ## Usage
 
@@ -207,9 +216,8 @@ export class DraggableResizableWindowDialogComponent {
 ```
 
 ```ts
-const matDialogRef: MatDialogRef<DraggableResizableWindowDialogComponent> = this._dialogService.open(
-  DraggableResizableWindowDialogComponent,
-);
+const matDialogRef: MatDialogRef<DraggableResizableWindowDialogComponent> =
+  this._dialogService.open(DraggableResizableWindowDialogComponent);
 // listen to close event
 matDialogRef.componentInstance.closed.subscribe(() => matDialogRef.close());
 ```

package/dialogs/alert-dialog/alert-dialog.component.d.ts

@@ -2,9 +2,9 @@ import { MatDialogRef } from '@angular/material/dialog';
 import * as i0 from "@angular/core";
 export declare class TdAlertDialogComponent {
     private _dialogRef;
-    title: string;
-    message: string;
-    closeButton: string;
+    title?: string;
+    message?: string;
+    closeButton?: string;
     constructor(_dialogRef: MatDialogRef<TdAlertDialogComponent>);
     close(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdAlertDialogComponent, never>;

package/dialogs/confirm-dialog/confirm-dialog.component.d.ts

@@ -2,8 +2,8 @@ import { MatDialogRef } from '@angular/material/dialog';
 import * as i0 from "@angular/core";
 export declare class TdConfirmDialogComponent {
     private _dialogRef;
-    title: string;
-    message: string;
+    title?: string;
+    message?: string;
     cancelButton: string;
     acceptButton: string;
     isDestructive: boolean;

package/dialogs/covalent-core-dialogs.d.ts

@@ -2,4 +2,4 @@
  * Generated bundle index. Do not edit.
  */
 /// <amd-module name="@covalent/core/dialogs" />
-export * from './index';
+export * from './public_api';

package/dialogs/dialog.component.d.ts

@@ -2,15 +2,15 @@ import { QueryList, AfterContentInit } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class TdDialogTitleDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<TdDialogTitleDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TdDialogTitleDirective, "td-dialog-title", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdDialogTitleDirective, "[tdDialogTitle]", never, {}, {}, never>;
 }
 export declare class TdDialogContentDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<TdDialogContentDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TdDialogContentDirective, "td-dialog-content", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdDialogContentDirective, "[tdDialogContent]", never, {}, {}, never>;
 }
 export declare class TdDialogActionsDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<TdDialogActionsDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TdDialogActionsDirective, "td-dialog-actions", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdDialogActionsDirective, "[tdDialogActions]", never, {}, {}, never>;
 }
 export declare class TdDialogComponent implements AfterContentInit {
     dialogTitle: QueryList<TdDialogTitleDirective>;
@@ -18,5 +18,5 @@ export declare class TdDialogComponent implements AfterContentInit {
     dialogActions: QueryList<TdDialogActionsDirective>;
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdDialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TdDialogComponent, "td-dialog", never, {}, {}, ["dialogTitle", "dialogContent", "dialogActions"], ["td-dialog-title", "td-dialog-content", "td-dialog-actions"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdDialogComponent, "td-dialog", never, {}, {}, ["dialogTitle", "dialogContent", "dialogActions"], ["[tdDialogTitle]", "[tdDialogContent]", "[tdDialogActions]"]>;
 }

package/dialogs/dialogs.module.d.ts

@@ -14,6 +14,6 @@ import * as i12 from "@angular/material/tooltip";
 import * as i13 from "@angular/material/icon";
 export declare class CovalentDialogsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<CovalentDialogsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentDialogsModule, [typeof i1.TdAlertDialogComponent, typeof i2.TdConfirmDialogComponent, typeof i3.TdPromptDialogComponent, typeof i4.TdDialogComponent, typeof i4.TdDialogTitleDirective, typeof i4.TdDialogActionsDirective, typeof i4.TdDialogContentDirective, typeof i5.TdWindowDialogComponent], [typeof i6.FormsModule, typeof i7.CommonModule, typeof i8.MatDialogModule, typeof i9.MatInputModule, typeof i10.MatButtonModule, typeof i11.MatToolbarModule, typeof i12.MatTooltipModule, typeof i13.MatIconModule], [typeof i1.TdAlertDialogComponent, typeof i2.TdConfirmDialogComponent, typeof i3.TdPromptDialogComponent, typeof i4.TdDialogComponent, typeof i4.TdDialogTitleDirective, typeof i4.TdDialogActionsDirective, typeof i4.TdDialogContentDirective, typeof i5.TdWindowDialogComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentDialogsModule, [typeof i1.TdAlertDialogComponent, typeof i2.TdConfirmDialogComponent, typeof i3.TdPromptDialogComponent, typeof i4.TdDialogComponent, typeof i4.TdDialogTitleDirective, typeof i4.TdDialogActionsDirective, typeof i4.TdDialogContentDirective, typeof i5.TdWindowDialogComponent, typeof i1.TdAlertDialogComponent, typeof i2.TdConfirmDialogComponent, typeof i3.TdPromptDialogComponent], [typeof i6.FormsModule, typeof i7.CommonModule, typeof i8.MatDialogModule, typeof i9.MatInputModule, typeof i10.MatButtonModule, typeof i11.MatToolbarModule, typeof i12.MatTooltipModule, typeof i13.MatIconModule], [typeof i1.TdAlertDialogComponent, typeof i2.TdConfirmDialogComponent, typeof i3.TdPromptDialogComponent, typeof i4.TdDialogComponent, typeof i4.TdDialogTitleDirective, typeof i4.TdDialogActionsDirective, typeof i4.TdDialogContentDirective, typeof i5.TdWindowDialogComponent, typeof i1.TdAlertDialogComponent, typeof i2.TdConfirmDialogComponent, typeof i3.TdPromptDialogComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<CovalentDialogsModule>;
 }

package/dialogs/prompt-dialog/prompt-dialog.component.d.ts

@@ -3,9 +3,9 @@ import { MatDialogRef } from '@angular/material/dialog';
 import * as i0 from "@angular/core";
 export declare class TdPromptDialogComponent implements AfterViewInit {
     private _dialogRef;
-    title: string;
-    message: string;
-    value: string;
+    title?: string;
+    message?: string;
+    value?: string;
     cancelButton: string;
     acceptButton: string;
     _input: ElementRef;