@covalent/core 4.0.0 → 4.1.0-develop.5

package/file/{file-input → src/file-input}/README.md

@@ -9,12 +9,18 @@ Can also drop a file(s) into the component to bind the file(s) to it.
 Example for usage:
 
 ```html
-<td-file-input [(ngModel)]="files" color="primary" (select)="selectEvent($event)"
-               accept=".ext,.anotherExt" [disabled]="disabled" multiple>
+<td-file-input
+  [(ngModel)]="files"
+  color="primary"
+  (select)="selectEvent($event)"
+  accept=".ext,.anotherExt"
+  [disabled]="disabled"
+  multiple
+>
   <mat-icon>attach_file</mat-icon><span>Choose a file...</span>
 </td-file-input>
 ```
- 
+
 ```typescript
 export class Demo {
 
@@ -28,32 +34,32 @@ export class Demo {
       ...
     }
   };
-} 
+}
 ```
 
 ## API Summary
 
 #### Inputs
 
-+ color: string
-  + Sets button color. Uses same color palette accepted as [MatButton].
-+ multiple: boolean
-  + Sets if multiple files can be dropped/selected at once in [TdFileUploadComponent].
-+ accept: string
-  + Sets files accepted when opening the file browser dialog. Same as "accept" attribute in `<input/>` element.
-+ disabled: boolean
-  + Disables [TdFileUploadComponent] and clears selected/dropped files.
+- color: string
+  - Sets button color. Uses same color palette accepted as [MatButton].
+- multiple: boolean
+  - Sets if multiple files can be dropped/selected at once in [TdFileUploadComponent].
+- accept: string
+  - Sets files accepted when opening the file browser dialog. Same as "accept" attribute in `<input/>` element.
+- disabled: boolean
+  - Disables [TdFileUploadComponent] and clears selected/dropped files.
 
 #### Events
 
-+ select: function($event)
-  + Event emitted when a file is selected. 
-  + Emits a [File or FileList] object.
+- select: function($event)
+  - Event emitted when a file is selected.
+  - Emits a [File or FileList] object.
 
 #### Methods
 
-+ clear: function
-  + Used to clear the selected files from the [TdFileInputComponent].
+- clear: function
+  - Used to clear the selected files from the [TdFileInputComponent].
 
 ## Setup
 
@@ -79,27 +85,27 @@ export class MyModule {}
 
 Add the directive wherever you want to bind a [File | FileList] into a class model to an existing <input type="file"/> element.
 
-Uses optional [(ngModel)] directive to bind file. (if [(ngModel]) exists, [fileSelect] is omitted)   
+Uses optional [(ngModel)] directive to bind file. (if [(ngModel]) exists, [fileSelect] is omitted)
 
 Example for usage:
 
 ```html
-<input type="file" tdFileSelect (fileSelect)="files = $event" multiple>
+<input type="file" tdFileSelect (fileSelect)="files = $event" multiple />
 ```
 
 ## API Summary
 
 #### Inputs
 
-+ multiple: boolean
-  + Sets whether multiple files can be selected at once in host element, or just a single file. 
-  + Can also be "multiple" native attribute.
+- multiple: boolean
+  - Sets whether multiple files can be selected at once in host element, or just a single file.
+  - Can also be "multiple" native attribute.
 
 #### Events
 
-+ fileSelect: function($event)
-  + Event emitted when a file or files are selected in host [HTMLInputElement]. 
-  + Emits a [FileList or File] object. Alternative to not use [(ngModel)].
+- fileSelect: function($event)
+  - Event emitted when a file or files are selected in host [HTMLInputElement].
+  - Emits a [FileList or File] object. Alternative to not use [(ngModel)].
 
 ## TdFileDropDirective: tdFileDrop
 
@@ -109,30 +115,33 @@ Add the directive wherever you want to add drop support to an element to bind a
 
 To add effect when <code>ondragenter</code> event is executed, override <code>.drop-zone</code> class in the context you are using it.
 
-Note: if element has child elements, add <code>* { pointer-events: none; }</code> to avoid event being thrown again while navigating in child elements.
+Note: if element has child elements, add <code>\* { pointer-events: none; }</code> to avoid event being thrown again while navigating in child elements.
 
 Example for usage:
 
 ```html
-<div tdFileDrop (fileDrop)="files = $event" multiple [disabled]="disabled">
-</div> 
+<div
+  tdFileDrop
+  (fileDrop)="files = $event"
+  multiple
+  [disabled]="disabled"
+></div>
 ```
 
-
 ## API Summary
 
 #### Inputs
 
-+ multiple: boolean
-  + Sets whether multiple files can be dropped at once in host element, or just a single file. 
-  + Can also be "multiple" native attribute.
-+ disabled: boolean
-  + Disabled drop events for host element.
+- multiple: boolean
+  - Sets whether multiple files can be dropped at once in host element, or just a single file.
+  - Can also be "multiple" native attribute.
+- disabled: boolean
+  - Disabled drop events for host element.
 
 #### Events
 
-+ fileDrop: function($event)
-  + Event emitted when a file or files are dropped in host element after being validated.  
-  + Emits a [FileList or File] object.
+- fileDrop: function($event)
+  - Event emitted when a file or files are dropped in host element after being validated.
+  - Emits a [FileList or File] object.
 
 &nbsp;

package/file/{file-upload → src/file-upload}/README.md

@@ -7,14 +7,23 @@ Perfect component for file selection and upload in simple flows. Uses `TdFileInp
 Example for usage:
 
 ```html
-<td-file-upload #fileUpload [(ngModel)]="files" defaultColor="accent" activeColor="warn" cancelColor="primary" (select)="selectEvent($event)"
-  (upload)="uploadEvent($event)" (cancel)="cancelEvent()" accept=".ext,.anotherExt" [disabled]="disabled" multiple>
+<td-file-upload
+  #fileUpload
+  [(ngModel)]="files"
+  defaultColor="accent"
+  activeColor="warn"
+  cancelColor="primary"
+  (select)="selectEvent($event)"
+  (upload)="uploadEvent($event)"
+  (cancel)="cancelEvent()"
+  accept=".ext,.anotherExt"
+  [disabled]="disabled"
+  multiple
+>
   <mat-icon>file_upload</mat-icon><span>{{ files?.name }}</span>
   <ng-template td-file-input-label>
     <mat-icon>attach_file</mat-icon>
-    <span>
-      Choose a file...
-    </span>
+    <span> Choose a file... </span>
   </ng-template>
 </td-file-upload>
 ```
@@ -51,32 +60,32 @@ export class Demo {
 
 #### Inputs
 
-+ defaultColor: string
-  + Sets browse button color. Uses same color palette accepted as [MatButton] and defaults to 'primary'.
-+ activeColor: string
-  + Sets upload button color. Uses same color palette accepted as [MatButton] and defaults to 'accent'.
-+ cancelColor: string
-  + Sets cancel button color. Uses same color palette accepted as [MatButton] and defaults to 'warn'.
-+ multiple: boolean
-  + Sets if multiple files can be dropped/selected at once in [TdFileUploadComponent].
-+ accept: string
-  + Sets files accepted when opening the file browser dialog. Same as "accept" attribute in `<input/>` element.
-+ disabled: boolean
-  + Disables [TdFileUploadComponent] and clears selected/dropped files.
+- defaultColor: string
+  - Sets browse button color. Uses same color palette accepted as [MatButton] and defaults to 'primary'.
+- activeColor: string
+  - Sets upload button color. Uses same color palette accepted as [MatButton] and defaults to 'accent'.
+- cancelColor: string
+  - Sets cancel button color. Uses same color palette accepted as [MatButton] and defaults to 'warn'.
+- multiple: boolean
+  - Sets if multiple files can be dropped/selected at once in [TdFileUploadComponent].
+- accept: string
+  - Sets files accepted when opening the file browser dialog. Same as "accept" attribute in `<input/>` element.
+- disabled: boolean
+  - Disables [TdFileUploadComponent] and clears selected/dropped files.
 
 #### Events
 
-+ upload: function($event)
-  + Event emitted when upload button is clicked. Emits a [File or FileList] object.
-+ select: function($event)
-  + Event emitted when a file is selected. Emits a [File or FileList] object.
-+ cancel: function
-  + Event emitted when cancel button is clicked.
+- upload: function($event)
+  - Event emitted when upload button is clicked. Emits a [File or FileList] object.
+- select: function($event)
+  - Event emitted when a file is selected. Emits a [File or FileList] object.
+- cancel: function
+  - Event emitted when cancel button is clicked.
 
 #### Methods
 
-+ cancel: function
-  + Method used to clear the files selected.
+- cancel: function
+  - Method used to clear the files selected.
 
 ## Setup
 
@@ -102,8 +111,8 @@ Service provided with methods that wrap complexity for as easier file upload exp
 
 #### Methods
 
-+ send: function(url: string, method: string, body: File | FormData, uploadExtras: IUploadExtras)
-  + Uploads a file to a URL.
+- send: function(url: string, method: string, body: File | FormData, uploadExtras: IUploadExtras)
+  - Uploads a file to a URL.
 
 ## Usage
 

package/json-formatter/README.md

@@ -10,17 +10,17 @@ The tree is collapsable/expandable so you can navigate through its nodes.
 
 #### Inputs
 
-+ key?: string
-  + Tag to be displayed as root of formatted object.
-+ data: any
-  + JS object to be formatted.
-+ levelsOpen?: number
-  + Levels opened by default when JS object is formatted and rendered.
+- key?: string
+  - Tag to be displayed as root of formatted object.
+- data: any
+  - JS object to be formatted.
+- levelsOpen?: number
+  - Levels opened by default when JS object is formatted and rendered.
 
 #### Methods
 
-+ refresh: function
-  + Refreshes json-formatter and rerenders [data]
+- refresh: function
+  - Refreshes json-formatter and rerenders [data]
 
 ## Setup
 

package/json-formatter/_json-formatter-theme.scss

@@ -16,6 +16,7 @@
   $warn: map-get($theme, warn);
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
+
   .td-json-formatter-wrapper {
     .function::after,
     .date::after,
@@ -23,37 +24,46 @@
     .td-array-length::after {
       content: '\200E';
     }
+
     .td-key {
       &.td-key-node {
         &:focus,
         &:hover {
           background-color: mat-color($background, hover);
         }
+
         .td-node-icon {
           color: mat-color($foreground, secondary-text);
         }
       }
     }
+
     .key {
       color: mat-color($primary);
     }
+
     .value {
       .string {
         color: mat-color($warn);
       }
+
       .number {
         color: mat-color($accent);
       }
+
       .boolean {
         color: mat-color($accent);
       }
+
       .null,
       .undefined {
         color: mat-color($foreground, disabled-text);
       }
+
       .function {
         color: mat-color($primary);
       }
+
       .date {
         color: mat-color($foreground, text);
       }

package/json-formatter/collapse.animation.d.ts

@@ -0,0 +1,24 @@
+import { AnimationTriggerMetadata } from '@angular/animations';
+export interface IAnimationOptions {
+    anchor?: string;
+    duration?: number;
+    delay?: number;
+}
+export interface ICollapseAnimation extends IAnimationOptions {
+    easeOnClose?: string;
+    easeOnOpen?: string;
+}
+/**
+ * const tdCollapseAnimation
+ *
+ * Parameter Options:
+ * * duration: Duration the animation will run in milliseconds. Defaults to 150 ms.
+ * * delay: Delay before the animation will run in milliseconds. Defaults to 0 ms.
+ * * easeOnClose: Animation accelerates and decelerates when closing. Defaults to ease-in.
+ * * easeOnOpen: Animation accelerates and decelerates when opening. Defaults to ease-out.
+ *
+ * Returns an [AnimationTriggerMetadata] object with boolean states for a collapse/expand animation.
+ *
+ * usage: [@tdCollapse]="{ value: true | false, params: { duration: 500 }}"
+ */
+export declare const tdCollapseAnimation: AnimationTriggerMetadata;

package/json-formatter/covalent-core-json-formatter.d.ts

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

package/json-formatter/json-formatter.component.d.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectorRef } from '@angular/core';
 import { Dir } from '@angular/cdk/bidi';
+import * as i0 from "@angular/core";
 export declare class TdJsonFormatterComponent {
     private _changeDetectorRef;
     private _dir;
@@ -15,9 +16,9 @@ export declare class TdJsonFormatterComponent {
      * Max tooltip preview elements.
      */
     private static PREVIEW_LIMIT;
-    private _key;
+    private _key?;
     private _data;
-    private _children;
+    private _children?;
     private _open;
     private _levelsOpen;
     /**
@@ -37,8 +38,8 @@ export declare class TdJsonFormatterComponent {
      * data: any
      * JS object to be formatted.
      */
-    set data(data: any);
-    get data(): any;
+    set data(data: Record<string, any>);
+    get data(): Record<string, any>;
     get children(): string[];
     get isRTL(): boolean;
     constructor(_changeDetectorRef: ChangeDetectorRef, _dir: Dir);
@@ -72,4 +73,6 @@ export declare class TdJsonFormatterComponent {
      */
     getPreview(): string;
     private parseChildren;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdJsonFormatterComponent, [null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdJsonFormatterComponent, "td-json-formatter", never, { "levelsOpen": "levelsOpen"; "key": "key"; "data": "data"; }, {}, never, never>;
 }

package/json-formatter/json-formatter.module.d.ts

@@ -1,2 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./json-formatter.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/tooltip";
+import * as i4 from "@angular/material/icon";
 export declare class CovalentJsonFormatterModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentJsonFormatterModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentJsonFormatterModule, [typeof i1.TdJsonFormatterComponent], [typeof i2.CommonModule, typeof i3.MatTooltipModule, typeof i4.MatIconModule], [typeof i1.TdJsonFormatterComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CovalentJsonFormatterModule>;
 }

package/json-formatter/package.json

@@ -1,11 +1,10 @@
 {
-  "main": "../bundles/covalent-core-json-formatter.umd.js",
-  "module": "../fesm2015/covalent-core-json-formatter.js",
-  "es2015": "../fesm2015/covalent-core-json-formatter.js",
-  "esm2015": "../esm2015/json-formatter/covalent-core-json-formatter.js",
-  "fesm2015": "../fesm2015/covalent-core-json-formatter.js",
+  "module": "../fesm2015/covalent-core-json-formatter.mjs",
+  "es2020": "../fesm2020/covalent-core-json-formatter.mjs",
+  "esm2020": "../esm2020/json-formatter/covalent-core-json-formatter.mjs",
+  "fesm2020": "../fesm2020/covalent-core-json-formatter.mjs",
+  "fesm2015": "../fesm2015/covalent-core-json-formatter.mjs",
   "typings": "covalent-core-json-formatter.d.ts",
-  "metadata": "covalent-core-json-formatter.metadata.json",
   "sideEffects": false,
   "name": "@covalent/core/json-formatter"
-}
+}

package/layout/README.md

@@ -2,22 +2,21 @@
 
 `<td-layout>` is a blank main sidenav component that gets hooked as parent of all the other layouts. (triggered by their menu buttons)
 
-
 ## API Summary
 
 #### Inputs
 
-+ mode: 'over' | 'side' | 'push'
-  + The mode or styling of the sidenav. Defaults to 'over'.
-+ opened: boolean
-  + Whether or not the sidenav is opened. Use this binding to open/close the sidenav. 
-  + Defaults to 'false'.
-+ sidenavWidth: string
-  + Sets the 'width' of the sidenav in either 'px' or '%'. 
-  + Defaults to '320px'.
-+ containerAutosize: boolean
-  + Sets 'autosize' of the sidenav-container.
-  + Defaults to 'false'.
+- mode: 'over' | 'side' | 'push'
+  - The mode or styling of the sidenav. Defaults to 'over'.
+- opened: boolean
+  - Whether or not the sidenav is opened. Use this binding to open/close the sidenav.
+  - Defaults to 'false'.
+- sidenavWidth: string
+  - Sets the 'width' of the sidenav in either 'px' or '%'.
+  - Defaults to '320px'.
+- containerAutosize: boolean
+  - Sets 'autosize' of the sidenav-container.
+  - Defaults to 'false'.
 
 ## Usage
 
@@ -27,9 +26,7 @@ Example for Main Layout:
 
 ```html
 <td-layout [mode]="'side'" [opened]="true" [sidenavWidth]="'257px'">
-  <div td-sidenav-content>
-   .. more sidenav content
-  </div>
+  <div td-sidenav-content>.. more sidenav content</div>
   .. main content
 </td-layout>
 ```
@@ -39,7 +36,8 @@ To toggle/close/open the main sidenav from child layouts/components, you can use
 Example:
 
 ```html
-<button mat-icon-button [tdLayoutToggle]="true"> // or tdLayoutOpen / tdLayoutClose
+<button mat-icon-button [tdLayoutToggle]="true">
+  // or tdLayoutOpen / tdLayoutClose
   <mat-icon>menu</mat-icon>
 </button>
 ```
@@ -60,7 +58,6 @@ This component can be installed as npm package.
 npm i -save @covalent/core
 ```
 
-
 ## Setup
 
 Import the **[CovalentLayoutModule]** in your NgModule:
@@ -77,44 +74,41 @@ import { CovalentLayoutModule } from '@covalent/core/layout';
 export class MyModule {}
 ```
 
-
 ### Theming
 
 See [theming](https://teradata.github.io/covalent/#/docs/theme) in the covalent docs for more info.
 
-
 ## TdNavigationDrawerComponent - td-navigation-drawer
 
 `<td-navigation-drawer>` is a component that follows the [material design spec](https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-specs) is used as an addon component for `td-layout`.
 
-
 ## API Summary
 
 #### Inputs
 
-+ sidenavTitle: string
-  + Title set in toolbar.
-+ icon: string
-  + Icon name to be displayed before the title.
-+ logo: string
-  + Logo icon name to be displayed before the title. 
-  + If [icon] is set, then this will not be shown.
-+ avatar: string
-  + Avatar url to be displayed before the title.
-  + If [icon] or [logo] are set, then this will not be shown.
-+ color: string
-  + Optional sidenav toolbar color.
-+ navigationRoute: string
-  + Option to set the combined route for the icon, logo, and sidenavTitle.
-+ backgroundUrl: SafeResourceUrl
-  + Image to be displayed as the background of the toolbar. 
-  + URL used will be sanitized, but it should be always from a trusted source to avoid XSS.
-+ name: string
-  + String to be displayed as part of the navigation drawer sublabel.
-  + If [email] is not set, then [name] will be the toggle menu text.
-+ email: string
-  + String to be displayed as part of the navigation drawer sublabel in the [toggle] menu text. 
-  + If [email] and [name] are not set, then the toggle menu is not rendered.
+- sidenavTitle: string
+  - Title set in toolbar.
+- icon: string
+  - Icon name to be displayed before the title.
+- logo: string
+  - Logo icon name to be displayed before the title.
+  - If [icon] is set, then this will not be shown.
+- avatar: string
+  - Avatar url to be displayed before the title.
+  - If [icon] or [logo] are set, then this will not be shown.
+- color: string
+  - Optional sidenav toolbar color.
+- navigationRoute: string
+  - Option to set the combined route for the icon, logo, and sidenavTitle.
+- backgroundUrl: SafeResourceUrl
+  - Image to be displayed as the background of the toolbar.
+  - URL used will be sanitized, but it should be always from a trusted source to avoid XSS.
+- name: string
+  - String to be displayed as part of the navigation drawer sublabel.
+  - If [email] is not set, then [name] will be the toggle menu text.
+- email: string
+  - String to be displayed as part of the navigation drawer sublabel in the [toggle] menu text.
+  - If [email] and [name] are not set, then the toggle menu is not rendered.
 
 ## Usage
 
@@ -126,15 +120,19 @@ Example for Main Layout / Navigation Drawer Combo:
 
 ```html
 <td-layout>
-  <td-navigation-drawer sidenavTitle="title" logo="logo" icon="icon" name="name" password="password" color="color" navigationRoute="/">
+  <td-navigation-drawer
+    sidenavTitle="title"
+    logo="logo"
+    icon="icon"
+    name="name"
+    password="password"
+    color="color"
+    navigationRoute="/"
+  >
     .. main drawer content
-    <div td-navigation-drawer-menu>
-      .. menu drawer content
-    </div>
+    <div tdNavigationDrawerMenu>.. menu drawer content</div>
   </td-navigation-drawer>
-  <div td-sidenav-content>
-   .. more sidenav content
-  </div>
+  <div td-sidenav-content>.. more sidenav content</div>
   .. main content
 </td-layout>
 ```

package/layout/_layout-theme.scss

@@ -10,6 +10,7 @@
         size: td-font-size($config, subheading-2);
       }
     }
+
     .td-navigation-drawer-name {
       font: {
         family: td-font-family($config);
@@ -19,6 +20,7 @@
 
       line-height: td-line-height($config, body-1);
     }
+
     .td-navigation-drawer-menu-toggle {
       font: {
         family: td-font-family($config);
@@ -44,6 +46,7 @@
 
   [mat-icon-button].td-layout-menu-button {
     margin-left: 0;
+
     ::ng-deep [dir='rtl'] & {
       margin-right: 0;
       margin-left: 6px;
@@ -76,6 +79,7 @@
       }
     }
   }
+
   body[dense] td-layout-card-over,
   td-layout-card-over[dense] {
     .td-layout-card-over-wrapper {
@@ -84,29 +88,37 @@
       margin-right: 0;
     }
   }
+
   .mat-drawer-side.td-layout-sidenav {
     @include mat-elevation(2);
   }
+
   .td-layout-footer {
     background: mat-color($background, app-bar);
     color: mat-color($foreground, text);
     @include mat-elevation(2);
+
     &.mat-primary {
       background: mat-color($primary);
+
       &,
       mat-icon {
         color: mat-color($primary, default-contrast);
       }
     }
+
     &.mat-accent {
       background: mat-color($accent);
+
       &,
       mat-icon {
         color: mat-color($accent, default-contrast);
       }
     }
+
     &.mat-warn {
       background: mat-color($warn);
+
       &,
       mat-icon {
         color: mat-color($warn, default-contrast);

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

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