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

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

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

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/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

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

package/message/message.component.d.ts

@@ -15,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
@@ -30,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
      *

package/package.json

@@ -1,56 +1,9 @@
 {
   "name": "@covalent/core",
-  "version": "4.0.0-beta.2",
-  "description": "Teradata UI Platform built on Angular Material",
-  "keywords": [
-    "angular",
-    "material",
-    "material design",
-    "components",
-    "covalent",
-    "reusable"
-  ],
-  "schematics": "./schematics/collection.json",
-  "ng-update": {
-    "migrations": "./schematics/migration.json"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/teradata/covalent.git"
-  },
-  "bugs": {
-    "url": "https://github.com/teradata/covalent/issues"
-  },
-  "license": "MIT",
-  "author": "Teradata UX",
-  "contributors": [
-    "Kyle Ledbetter <kyle.ledbetter@teradata.com>",
-    "Richa Vyas <richa.vyas@teradata.com>",
-    "Ed Morales <eduardo.morales@teradata.com>",
-    "Jason Weaver <jason.weaver@teradata.com>",
-    "Jeremy Wilken <jeremy.wilken@teradata.com>",
-    "Jeremy Smartt <jeremy.smartt@teradata.com>",
-    "Steven Ov <steven.ov@teradata.com>"
-  ],
-  "peerDependencies": {
-    "@angular/common": "^12.0.0-0 || ^13.0.0-0",
-    "@angular/core": "^12.0.0-0 || ^13.0.0-0",
-    "@angular/forms": "^12.0.0-0 || ^13.0.0-0",
-    "@angular/router": "^12.0.0-0 || ^13.0.0-0",
-    "@angular/cdk": "^12.0.0-0 || ^13.0.0-0",
-    "@angular/material": "^12.0.0-0 || ^13.0.0-0"
-  },
-  "module": "fesm2015/covalent-core.mjs",
-  "es2020": "fesm2020/covalent-core.mjs",
-  "esm2020": "esm2020/covalent-core.mjs",
-  "fesm2020": "fesm2020/covalent-core.mjs",
-  "fesm2015": "fesm2015/covalent-core.mjs",
-  "typings": "covalent-core.d.ts",
+  "version": "4.1.0-develop.2",
   "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
     ".": {
+      "sass": "./theming/_all-theme.scss",
       "types": "./covalent-core.d.ts",
       "esm2020": "./esm2020/covalent-core.mjs",
       "es2020": "./fesm2020/covalent-core.mjs",
@@ -58,6 +11,9 @@
       "node": "./fesm2015/covalent-core.mjs",
       "default": "./fesm2020/covalent-core.mjs"
     },
+    "./package.json": {
+      "default": "./package.json"
+    },
     "./breadcrumbs": {
       "types": "./breadcrumbs/covalent-core-breadcrumbs.d.ts",
       "esm2020": "./esm2020/breadcrumbs/covalent-core-breadcrumbs.mjs",
@@ -155,11 +111,36 @@
       "default": "./fesm2020/covalent-core-user-profile.mjs"
     }
   },
-  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/teradata/covalent.git"
+  },
+  "bugs": {
+    "url": "https://github.com/teradata/covalent/issues"
+  },
+  "license": "MIT",
+  "author": "Teradata UX",
+  "peerDependencies": {
+    "@angular/common": "^13.2.0",
+    "@angular/core": "^13.2.0",
+    "@covalent/core": "4.1.0-develop.2",
+    "@angular/router": "^13.2.0",
+    "@angular/platform-browser": "^13.2.0",
+    "@angular/material": "^13.2.1",
+    "rxjs": "~7.4.0",
+    "@angular/animations": "^13.2.0",
+    "@angular/forms": "^13.2.0",
+    "@angular/cdk": "^13.2.1",
+    "@angular/platform-browser-dynamic": "^13.2.0"
+  },
   "dependencies": {
-    "tslib": "^2.3.0"
+    "tslib": "^2.0.0"
   },
-  "scripts": {
-    "prepublishOnly": "node --eval \"console.error('ERROR: Trying to publish a package that has been compiled by Ivy in full compilation mode. This is not allowed.\\nPlease delete and rebuild the package with Ivy partial compilation mode, before attempting to publish.\\n')\" && exit 1"
-  }
-}
+  "module": "fesm2015/covalent-core.mjs",
+  "es2020": "fesm2020/covalent-core.mjs",
+  "esm2020": "esm2020/covalent-core.mjs",
+  "fesm2020": "fesm2020/covalent-core.mjs",
+  "fesm2015": "fesm2015/covalent-core.mjs",
+  "typings": "covalent-core.d.ts",
+  "sideEffects": false
+}

package/search/README.md

@@ -6,56 +6,56 @@
 
 #### Inputs
 
-+ backIcon?: string
-  + The icon used to close the search toggle, only shown when [alwaysVisible] is false. Defaults to 'search' icon.
-+ searchIcon?: string
-  + The icon used to open/focus the search toggle. Defaults to 'search' icon.
-+ clearIcon?: string
-  + The icon used to clear the search input. Defaults to 'cancel' icon.
-+ showUnderline?: boolean
-  + Sets if the input underline should be visible. Defaults to 'false'.
-+ debounce?: number
-  + Debounce timeout between keypresses. Defaults to 400.
-+ alwaysVisible?: boolean
-  + Sets if the input should always be visible. Defaults to 'false'.
-+ placeholder?: string
-  + Placeholder for the underlying input component.
+- backIcon?: string
+  - The icon used to close the search toggle, only shown when [alwaysVisible] is false. Defaults to 'search' icon.
+- searchIcon?: string
+  - The icon used to open/focus the search toggle. Defaults to 'search' icon.
+- clearIcon?: string
+  - The icon used to clear the search input. Defaults to 'cancel' icon.
+- showUnderline?: boolean
+  - Sets if the input underline should be visible. Defaults to 'false'.
+- debounce?: number
+  - Debounce timeout between keypresses. Defaults to 400.
+- alwaysVisible?: boolean
+  - Sets if the input should always be visible. Defaults to 'false'.
+- placeholder?: string
+  - Placeholder for the underlying input component.
 
 #### Events
 
-+ searchDebounce?: string
-  + Event emitted after the [debounce] timeout.
-  + Emits a [string].
-+ search?: string
-  + Event emitted after the key enter has been pressed.
-  + Emits a [string].
-+ clear?: string
-  + Event emitted after the clear icon has been clicked.
-  + Emits [void].
-+ blur: function
-  + Event emitted after the blur event has been called in underlying input.
-  + Emits [void].
+- searchDebounce?: string
+  - Event emitted after the [debounce] timeout.
+  - Emits a [string].
+- search?: string
+  - Event emitted after the key enter has been pressed.
+  - Emits a [string].
+- clear?: string
+  - Event emitted after the clear icon has been clicked.
+  - Emits [void].
+- blur: function
+  - Event emitted after the blur event has been called in underlying input.
+  - Emits [void].
 
 ## Usage
 
 Example for HTML usage:
 
 ```html
-<td-search-box 
-    backIcon="arrow_back" 
-    placeholder="Search here" 
-    [(ngModel)]="searchInputTerm" 
-    [showUnderline]="false|true" 
-    [debounce]="500" 
-    [alwaysVisible]="false|true" 
-    (searchDebounce)="searchInputTerm = $event" 
-    (search)="searchInputTerm = $event" 
-    (clear)="searchInputTerm = ''" 
-    (blur)="onBlurEvent()">
+<td-search-box
+  backIcon="arrow_back"
+  placeholder="Search here"
+  [(ngModel)]="searchInputTerm"
+  [showUnderline]="false|true"
+  [debounce]="500"
+  [alwaysVisible]="false|true"
+  (searchDebounce)="searchInputTerm = $event"
+  (search)="searchInputTerm = $event"
+  (clear)="searchInputTerm = ''"
+  (blur)="onBlurEvent()"
+>
 </td-search-box>
 ```
 
-
 # TdSearchInputComponent: td-search-input
 
 `td-search-input` element to generate a search input with its animated cancel button.
@@ -64,53 +64,54 @@ Example for HTML usage:
 
 #### Inputs
 
-+ debounce?: number
-  + Debounce timeout between keypresses. Defaults to 400.
-+ placeholder?: string
-  + Placeholder for the underlying input component.
-+ showUnderline?: boolean
-  + Sets if the input underline should be visible. Defaults to 'false'.
-+ clearIcon?: string
-  + The icon used to clear the search input. Defaults to 'cancel' icon.
-+ appearance?: MatFormFieldAppearance
-  + Appearance style for the underlying input component.
+- debounce?: number
+  - Debounce timeout between keypresses. Defaults to 400.
+- placeholder?: string
+  - Placeholder for the underlying input component.
+- showUnderline?: boolean
+  - Sets if the input underline should be visible. Defaults to 'false'.
+- clearIcon?: string
+  - The icon used to clear the search input. Defaults to 'cancel' icon.
+- appearance?: MatFormFieldAppearance
+  - Appearance style for the underlying input component.
 
 #### Events
 
-+ searchDebounce: function
-  + Event emitted after the [debounce] timeout.
-  + Emits a [string].
-+ search: function
-  + Event emitted after the key enter has been pressed.
-  + Emits a [string].
-+ clear: function
-  + Event emitted after the clear icon has been clicked.
-  + Emits [void].
-+ blur: function
-  + Event emitted after the blur event has been called in underlying input.
-  + Emits [void].
+- searchDebounce: function
+  - Event emitted after the [debounce] timeout.
+  - Emits a [string].
+- search: function
+  - Event emitted after the key enter has been pressed.
+  - Emits a [string].
+- clear: function
+  - Event emitted after the clear icon has been clicked.
+  - Emits [void].
+- blur: function
+  - Event emitted after the blur event has been called in underlying input.
+  - Emits [void].
 
 #### Methods
 
-+ focus: function
-  + Method to focus to underlying input.
-+ clearSearch: function
-  + Method to clear the underlying input. 
+- focus: function
+  - Method to focus to underlying input.
+- clearSearch: function
+  - Method to clear the underlying input.
 
 ## Usage
 
 Example for HTML usage:
 
 ```html
-<td-search-input 
-    appearance="legacy|standard|fill|outline"
-    placeholder="Search here" 
-    [(ngModel)]="searchInputTerm" 
-    [showUnderline]="false|true" 
-    [debounce]="500" 
-    (searchDebounce)="searchInputTerm = $event" 
-    (search)="searchInputTerm = $event" 
-    (clear)="searchInputTerm = ''">
+<td-search-input
+  appearance="legacy|standard|fill|outline"
+  placeholder="Search here"
+  [(ngModel)]="searchInputTerm"
+  [showUnderline]="false|true"
+  [debounce]="500"
+  (searchDebounce)="searchInputTerm = $event"
+  (search)="searchInputTerm = $event"
+  (clear)="searchInputTerm = ''"
+>
 </td-search-input>
 ```
 

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

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

package/search/search-box/search-box.component.d.ts

@@ -1,15 +1,15 @@
 import { EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
 import { TdSearchInputComponent } from '../search-input/search-input.component';
-import { IControlValueAccessor } from '@covalent/core/common';
 import * as i0 from "@angular/core";
 export declare class TdSearchBoxBase {
     _changeDetectorRef: ChangeDetectorRef;
     constructor(_changeDetectorRef: ChangeDetectorRef);
 }
-export declare const _TdSearchBoxMixinBase: (new (...args: any[]) => IControlValueAccessor) & typeof TdSearchBoxBase;
-export declare class TdSearchBoxComponent extends _TdSearchBoxMixinBase implements IControlValueAccessor {
+export declare class TdSearchBoxComponent implements ControlValueAccessor {
+    private _changeDetectorRef;
     private _searchVisible;
-    _searchInput: TdSearchInputComponent;
+    _searchInput?: TdSearchInputComponent;
     get searchVisible(): boolean;
     /**
      * backIcon?: string
@@ -49,6 +49,7 @@ export declare class TdSearchBoxComponent extends _TdSearchBoxMixinBase implemen
      * Placeholder for the underlying input component.
      */
     placeholder: string;
+    value: unknown;
     /**
      * searchDebounce: function($event)
      * Event emitted after the [debounce] timeout.
@@ -68,8 +69,11 @@ export declare class TdSearchBoxComponent extends _TdSearchBoxMixinBase implemen
      * blur: function()
      * Event emitted after the blur event has been called in underlying input.
      */
-    blur: EventEmitter<void>;
+    blurSearch: EventEmitter<void>;
     constructor(_changeDetectorRef: ChangeDetectorRef);
+    writeValue(value: unknown): void;
+    registerOnChange(): void;
+    registerOnTouched(): void;
     /**
      * Method executed when the search icon is clicked.
      */
@@ -80,5 +84,5 @@ export declare class TdSearchBoxComponent extends _TdSearchBoxMixinBase implemen
     handleClear(): void;
     handleBlur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdSearchBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TdSearchBoxComponent, "td-search-box", never, { "value": "value"; "backIcon": "backIcon"; "searchIcon": "searchIcon"; "clearIcon": "clearIcon"; "showUnderline": "showUnderline"; "debounce": "debounce"; "alwaysVisible": "alwaysVisible"; "placeholder": "placeholder"; }, { "searchDebounce": "searchDebounce"; "search": "search"; "clear": "clear"; "blur": "blur"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdSearchBoxComponent, "td-search-box", never, { "backIcon": "backIcon"; "searchIcon": "searchIcon"; "clearIcon": "clearIcon"; "showUnderline": "showUnderline"; "debounce": "debounce"; "alwaysVisible": "alwaysVisible"; "placeholder": "placeholder"; "value": "value"; }, { "searchDebounce": "searchDebounce"; "search": "search"; "clear": "clear"; "blurSearch": "blurSearch"; }, never, never>;
 }