@covalent/core 4.0.0 → 4.1.0-develop.2

package/layout/{layout-manage-list → src/layout-manage-list}/README.md

@@ -2,23 +2,22 @@
 
 `<td-layout-manage-list>` is a layout component which lets you customize a `management` view with toolbar items, item selections and footers.
 
-
 ## API Summary
 
 #### Inputs
 
-+ mode: 'over' | 'side' | 'push'
-  + The mode or styling of the sidenav. Defaults to 'side'.
-+ opened: boolean 
-  + Whether or not the sidenav is opened. 
-  + Use this binding to open/close the sidenav. 
-  + Defaults to 'true'.
-+ sidenavWidth: string 
-  + Sets the 'width' of the sidenav in either 'px' or '%'. 
-  + Defaults to '257px'.
-+ containerAutosize: boolean
-  + Sets 'autosize' of the sidenav-container.
-  + Defaults to 'false'.
+- mode: 'over' | 'side' | 'push'
+  - The mode or styling of the sidenav. Defaults to 'side'.
+- opened: boolean
+  - Whether or not the sidenav is opened.
+  - Use this binding to open/close the sidenav.
+  - Defaults to 'true'.
+- sidenavWidth: string
+  - Sets the 'width' of the sidenav in either 'px' or '%'.
+  - Defaults to '257px'.
+- containerAutosize: boolean
+  - Sets 'autosize' of the sidenav-container.
+  - Defaults to 'false'.
 
 ## Usage
 
@@ -27,7 +26,12 @@ To toggle/close/open the manage list sidenav from child layouts/components, you
 Example:
 
 ```html
-<button mat-icon-button [tdLayoutManageListToggle]="true" [hideWhenOpened]="true"> // or tdLayoutManageListOpen / tdLayoutManageListClose
+<button
+  mat-icon-button
+  [tdLayoutManageListToggle]="true"
+  [hideWhenOpened]="true"
+>
+  // or tdLayoutManageListOpen / tdLayoutManageListClose
   <mat-icon>menu</mat-icon>
 </button>
 ```
@@ -56,16 +60,10 @@ Example for Manage List Layout / Nav Layout combo:
 
 ```html
 <td-layout-nav sidenavTitle="title" logo="logo" icon="icon" color="primary">
-  <div td-toolbar-content>
-    .. main toolbar content
-  </div>
+  <div td-toolbar-content>.. main toolbar content</div>
   <td-layout-manage-list opened="true" mode="side" sidenavWidth="257px">
-    <mat-toolbar td-sidenav-content>
-      ... toolbar in sidenav
-    </mat-toolbar>
-    <mat-nav-list td-sidenav-content>
-      ... sidenav content
-    </mat-nav-list>
+    <mat-toolbar td-sidenav-content> ... toolbar in sidenav </mat-toolbar>
+    <mat-nav-list td-sidenav-content> ... sidenav content </mat-nav-list>
     <mat-toolbar>
       <button mat-icon-button tdLayoutManageListOpen [hideWhenOpened]="true">
         <mat-icon>arrow_back</mat-icon>
@@ -73,12 +71,10 @@ Example for Manage List Layout / Nav Layout combo:
       ... sub toolbar content
     </mat-toolbar>
     ... main content
-    <td-layout-footer-inner>
-      ... sub footer content
-    </td-layout-footer-inner>
+    <td-layout-footer-inner> ... sub footer content </td-layout-footer-inner>
   </td-layout-manage-list>
-  <td-layout-footer color="primary"> // color is optional
-    ... main footer content
+  <td-layout-footer color="primary">
+    // color is optional ... main footer content
   </td-layout-footer>
 </td-layout-nav>
 ```

package/layout/src/layout-nav/README.md

@@ -0,0 +1,50 @@
+## TdLayoutNavComponent: td-layout-nav
+
+`<td-layout-nav>` is a layout component which lets you customize a `navigation` view with toolbar items and footers.
+
+## API Summary
+
+#### Inputs
+
+- toolbarTitle: 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.
+- color: string
+  - Optional toolbar color.
+  - Defaults to primary.
+- navigationRoute: string
+  - Option to set the combined route for the icon, logo, and toolbarTitle.
+
+## Usage
+
+`[td-menu-button]` is used to include a menu button before the logo and title.
+
+`[td-toolbar-content]` is used to include items in the toolbar.
+
+`td-layout-footer` is used to include items in the footer.
+
+Example for Nav Layout:
+
+```html
+<td-layout-nav
+  toolbarTitle="title"
+  logo="logo"
+  icon="icon"
+  color="primary"
+  navigationRoute="/"
+>
+  <button mat-icon-button td-menu-button>
+    // can use `[tdLayoutToggle]` to toggle main sidenav
+    <mat-icon>menu</mat-icon>
+  </button>
+  <div td-toolbar-content>.. main toolbar content</div>
+  ... main content
+  <td-layout-footer color="primary">
+    // color is optional ... main footer content
+  </td-layout-footer>
+</td-layout-nav>
+```

package/layout/{layout-nav-list → src/layout-nav-list}/README.md

@@ -2,36 +2,35 @@
 
 `<td-layout-nav-list>` is a layout component which lets you customize a `navigation` list view with toolbar items, item selections and footers.
 
-
 ## API Summary
 
 #### Inputs
 
-+ toolbarTitle: 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.
-+ color:  string
-  + optional toolbar color. 
-  + Defaults to primary.
-+ navigationRoute: string
-  + option to set the combined route for the icon, logo, and toolbarTitle.
-+ mode: 'over' | 'side' | 'push'
-  + The mode or styling of the sidenav. 
-  + Defaults to 'side'.
-+ opened: boolean
-  + Whether or not the sidenav is opened. 
-  + Use this binding to open/close the sidenav. 
-  + Defaults to 'true'.
-+ sidenavWidth: string
-  + Sets the 'width' of the sidenav in either 'px' or '%'. 
-  + Defaults to '257px'.
-+ containerAutosize: boolean
-  + Sets 'autosize' of the sidenav-container.
-  + Defaults to 'false'.
+- toolbarTitle: 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.
+- color: string
+  - optional toolbar color.
+  - Defaults to primary.
+- navigationRoute: string
+  - option to set the combined route for the icon, logo, and toolbarTitle.
+- mode: 'over' | 'side' | 'push'
+  - The mode or styling of the sidenav.
+  - Defaults to 'side'.
+- opened: boolean
+  - Whether or not the sidenav is opened.
+  - Use this binding to open/close the sidenav.
+  - Defaults to 'true'.
+- sidenavWidth: string
+  - Sets the 'width' of the sidenav in either 'px' or '%'.
+  - Defaults to '257px'.
+- containerAutosize: boolean
+  - Sets 'autosize' of the sidenav-container.
+  - Defaults to 'false'.
 
 ## Usage
 
@@ -40,7 +39,8 @@ To toggle/close/open the nav list sidenav from child layouts/components, you can
 Example:
 
 ```html
-<button mat-icon-button [tdLayoutNavListToggle]="true" [hideWhenOpened]="true"> // or tdLayoutNavListOpen / tdLayoutNavListClose
+<button mat-icon-button [tdLayoutNavListToggle]="true" [hideWhenOpened]="true">
+  // or tdLayoutNavListOpen / tdLayoutNavListClose
   <mat-icon>menu</mat-icon>
 </button>
 ```
@@ -74,28 +74,32 @@ To disable the sidenav action, just set the input to false.
 Example for Nav List Layout:
 
 ```html
-<td-layout-nav-list sidenavTitle="title" logo="logo" icon="icon" opened="true" mode="side" sidenavWidth="350px" color="primary" navigationRoute="/">
-  <button mat-icon-button td-menu-button> // can use `[tdLayoutToggle]` to toggle main sidenav
+<td-layout-nav-list
+  sidenavTitle="title"
+  logo="logo"
+  icon="icon"
+  opened="true"
+  mode="side"
+  sidenavWidth="350px"
+  color="primary"
+  navigationRoute="/"
+>
+  <button mat-icon-button td-menu-button>
+    // can use `[tdLayoutToggle]` to toggle main sidenav
     <mat-icon>menu</mat-icon>
   </button>
-  <div td-sidenav-toolbar-content>
-    ... left toolbar content
-  </div>
+  <div td-sidenav-toolbar-content>... left toolbar content</div>
   <mat-nav-list td-sidenav-content>
     <button mat-icon-button tdLayoutNavListOpen [hideWhenOpened]="true">
       <mat-icon>arrow_back</mat-icon>
     </button>
     ... sidenav content
   </mat-nav-list>
-  <div td-toolbar-content>
-    ... right toolbar content
-  </div>
+  <div td-toolbar-content>... right toolbar content</div>
   ... main content
-  <td-layout-footer-inner>
-    ... sub footer content
-  </td-layout-footer-inner>
-  <td-layout-footer color="primary"> // color is optional
-    ... main footer content
+  <td-layout-footer-inner> ... sub footer content </td-layout-footer-inner>
+  <td-layout-footer color="primary">
+    // color is optional ... main footer content
   </td-layout-footer>
 </td-layout-nav-list>
 ```

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

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

package/menu/menu.component.d.ts

@@ -1,2 +1,5 @@
+import * as i0 from "@angular/core";
 export declare class TdMenuComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdMenuComponent, "td-menu", never, {}, {}, never, ["[td-menu-header]", "*", "[td-menu-footer]"]>;
 }

package/menu/menu.module.d.ts

@@ -1,2 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./menu.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/menu";
+import * as i4 from "@angular/material/divider";
 export declare class CovalentMenuModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentMenuModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentMenuModule, [typeof i1.TdMenuComponent], [typeof i2.CommonModule, typeof i3.MatMenuModule, typeof i4.MatDividerModule], [typeof i1.TdMenuComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CovalentMenuModule>;
 }

package/menu/package.json

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

package/message/README.md

@@ -9,25 +9,25 @@ But you can also set a `color` from our lib and it can be applied in the compone
 
 #### Inputs
 
-+ label?: string
-  + Sets the label of the message.
-+ sublabel?: string
-  + Sets the sublabel of the message.
-+ icon?: string
-  + The icon to be displayed before the title. Defaults to `info_outline` icon.
-+ color?: 'primary' | 'accent' | 'warn'
-  + Sets the color of the message. Can also use any material color: `purple`, `light-blue`, etc.
-+ opened?: boolean
-  + Shows or hides the message depending on its value. Defaults to 'true'.
+- label?: string
+  - Sets the label of the message.
+- sublabel?: string
+  - Sets the sublabel of the message.
+- icon?: string
+  - The icon to be displayed before the title. Defaults to `info_outline` icon.
+- color?: 'primary' | 'accent' | 'warn'
+  - Sets the color of the message. Can also use any material color: `purple`, `light-blue`, etc.
+- opened?: boolean
+  - Shows or hides the message depending on its value. Defaults to 'true'.
 
 #### Methods
 
-+ open: function 
-  + Renders the message on screen.
-+ close: function
-  +  Removes the message content from screen.
-+ toggle: function
-  +  Toggles between open and close depending on state.
+- open: function
+  - Renders the message on screen.
+- close: function
+  - Removes the message content from screen.
+- toggle: function
+  - Toggles between open and close depending on state.
 
 ## Setup
 
@@ -50,8 +50,16 @@ export class MyModule {}
 Example for HTML usage:
 
 ```html
-<td-message #messageDemo color="primary" class="pad-sm" label="Hide me!" sublabel="You can toggle my visibility & add a class!">
-  <button td-message-actions mat-icon-button (click)="messageDemo.close()"><mat-icon>cancel</mat-icon></button>
+<td-message
+  #messageDemo
+  color="primary"
+  class="pad-sm"
+  label="Hide me!"
+  sublabel="You can toggle my visibility & add a class!"
+>
+  <button td-message-actions mat-icon-button (click)="messageDemo.close()">
+    <mat-icon>cancel</mat-icon>
+  </button>
 </td-message>
 <button mat-button color="accent" (click)="messageDemo.toggle()">
   Toggle Visibility

package/message/_message-theme.scss

@@ -11,6 +11,7 @@
 
     line-height: td-line-height($config, body-2);
   }
+
   .td-message-sublabel {
     font: {
       family: td-font-family($config);
@@ -29,10 +30,12 @@
       color: mat-color($primary);
       background-color: mat-color($primary, 0.15);
     }
+
     &.mat-accent {
       color: mat-color($accent);
       background-color: mat-color($accent, 0.15);
     }
+
     &.mat-warn {
       color: mat-color($warn);
       background-color: mat-color($warn, 0.15);

package/message/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/message/covalent-core-message.d.ts

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

package/message/message.component.d.ts

@@ -1,7 +1,10 @@
 import { Renderer2, ElementRef, AfterViewInit, ViewContainerRef, TemplateRef, ChangeDetectorRef } from '@angular/core';
+import * as i0 from "@angular/core";
 export declare class TdMessageContainerDirective {
     viewContainer: ViewContainerRef;
     constructor(viewContainer: ViewContainerRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdMessageContainerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdMessageContainerDirective, "[tdMessageContainer]", never, {}, {}, never>;
 }
 export declare class TdMessageComponent implements AfterViewInit {
     private _renderer;
@@ -12,7 +15,7 @@ export declare class TdMessageComponent implements AfterViewInit {
     private _hidden;
     private _animating;
     private _initialized;
-    _childElement: TdMessageContainerDirective;
+    _childElement?: TdMessageContainerDirective;
     _template: TemplateRef<any>;
     /**
      * Binding host to tdCollapse animation
@@ -27,20 +30,20 @@ export declare class TdMessageComponent implements AfterViewInit {
      *
      * Sets the label of the message.
      */
-    label: string;
+    label?: string;
     /**
      * sublabel?: string
      *
      * Sets the sublabel of the message.
      */
-    sublabel: string;
+    sublabel?: string;
     /**
      * icon?: string
      *
      * The icon to be displayed before the title.
      * Defaults to `info_outline` icon
      */
-    icon: string;
+    icon?: string;
     /**
      * color?: primary | accent | warn
      *
@@ -93,4 +96,6 @@ export declare class TdMessageComponent implements AfterViewInit {
      * Method to detach template from DOM
      */
     private _detach;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdMessageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdMessageComponent, "td-message", never, { "label": "label"; "sublabel": "sublabel"; "icon": "icon"; "color": "color"; "opened": "opened"; }, {}, never, ["[td-message-actions]"]>;
 }

package/message/message.module.d.ts

@@ -1,2 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./message.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/icon";
 export declare class CovalentMessageModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentMessageModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentMessageModule, [typeof i1.TdMessageComponent, typeof i1.TdMessageContainerDirective], [typeof i2.CommonModule, typeof i3.MatIconModule], [typeof i1.TdMessageComponent, typeof i1.TdMessageContainerDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CovalentMessageModule>;
 }

package/message/package.json

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