@covalent/core 4.0.0-beta.1 → 4.1.1-beta.3

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.1",
-  "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.1-beta.3",
   "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,26 @@
       "default": "./fesm2020/covalent-core-user-profile.mjs"
     }
   },
-  "sideEffects": false,
+  "peerDependencies": {
+    "@angular/common": "^13.2.0",
+    "@angular/core": "^13.2.0",
+    "@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"
   },
-  "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>;
 }

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

@@ -1,17 +1,17 @@
 import { OnInit, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
 import { Dir } from '@angular/cdk/bidi';
 import { MatInput } from '@angular/material/input';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
-import { IControlValueAccessor } from '@covalent/core/common';
 import * as i0 from "@angular/core";
 export declare class TdSearchInputBase {
     _changeDetectorRef: ChangeDetectorRef;
     constructor(_changeDetectorRef: ChangeDetectorRef);
 }
-export declare const _TdSearchInputMixinBase: (new (...args: any[]) => IControlValueAccessor) & typeof TdSearchInputBase;
-export declare class TdSearchInputComponent extends _TdSearchInputMixinBase implements IControlValueAccessor, OnInit {
+export declare class TdSearchInputComponent implements ControlValueAccessor, OnInit {
     private _dir;
-    _input: MatInput;
+    private _changeDetectorRef;
+    _input?: MatInput;
     /**
      * appearance?: MatFormFieldAppearance
      * Appearance style for the underlying input component.
@@ -38,6 +38,7 @@ export declare class TdSearchInputComponent extends _TdSearchInputMixinBase impl
      * Defaults to 'cancel' icon.
      */
     clearIcon: string;
+    value?: unknown;
     /**
      * searchDebounce: function($event)
      * Event emitted after the [debounce] timeout.
@@ -57,10 +58,13 @@ export declare class TdSearchInputComponent extends _TdSearchInputMixinBase impl
      * blur: function()
      * Event emitted after the blur event has been called in underlying input.
      */
-    blur: EventEmitter<void>;
+    blurSearch: EventEmitter<void>;
     get isRTL(): boolean;
     constructor(_dir: Dir, _changeDetectorRef: ChangeDetectorRef);
     ngOnInit(): void;
+    writeValue(value: unknown): void;
+    registerOnChange(): void;
+    registerOnTouched(): void;
     /**
      * Method to focus to underlying input.
      */
@@ -74,5 +78,5 @@ export declare class TdSearchInputComponent extends _TdSearchInputMixinBase impl
     clearSearch(): void;
     private _searchTermChanged;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdSearchInputComponent, [{ optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TdSearchInputComponent, "td-search-input", never, { "value": "value"; "appearance": "appearance"; "showUnderline": "showUnderline"; "debounce": "debounce"; "placeholder": "placeholder"; "clearIcon": "clearIcon"; }, { "searchDebounce": "searchDebounce"; "search": "search"; "clear": "clear"; "blur": "blur"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdSearchInputComponent, "td-search-input", never, { "appearance": "appearance"; "showUnderline": "showUnderline"; "debounce": "debounce"; "placeholder": "placeholder"; "clearIcon": "clearIcon"; "value": "value"; }, { "searchDebounce": "searchDebounce"; "search": "search"; "clear": "clear"; "blurSearch": "blurSearch"; }, never, never>;
 }

package/search/src/search-box/README.md

@@ -0,0 +1,73 @@
+# TdSearchBoxComponent: td-search-box
+
+`td-search-box` element to generate a search box with animations.
+
+## API Summary
+
+#### 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.
+
+#### 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].
+
+## Setup
+
+Import the [CovalentSearchModule] in your NgModule:
+
+```typescript
+import { CovalentSearchModule } from '@covalent/core/search';
+@NgModule({
+  imports: [
+    CovalentSearchModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+## 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>
+```