@covalent/core 6.3.0 → 7.0.0

package/file/src/file-input/README.md

@@ -1,147 +0,0 @@
-## TdFileInputComponent: td-file-input
-
-## Usage
-
-Add the element wherever you want to bind a [File | FileList] into a class model without additional elements.
-
-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"
-  (selectFile)="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 {
-
-  files: File | FileList;
-  disabled: boolean = false;
-
-  selectEvent(files: FileList | File): void {
-    if (files instanceof FileList) {
-      ...
-    } else {
-      ...
-    }
-  };
-}
-```
-
-## 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.
-
-#### Events
-
-- selectFile: 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].
-
-## Setup
-
-Import the [CovalentFileModule] in your NgModule:
-
-```typescript
-import { CovalentFileModule } from '@covalent/core/file';
-@NgModule({
-  imports: [
-    CovalentFileModule,
-    ...
-  ],
-  ...
-})
-export class MyModule {}
-```
-
----
-
-## TdFileSelectDirective: tdFileSelect
-
-## Usage
-
-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)
-
-Example for usage:
-
-```html
-<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.
-
-#### 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)].
-
-## TdFileDropDirective: tdFileDrop
-
-## Usage
-
-Add the directive wherever you want to add drop support to an element to bind a [File | FileList] into a class model.
-
-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.
-
-Example for usage:
-
-```html
-<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.
-
-#### 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.
-
-&nbsp;

package/file/src/file-upload/README.md

@@ -1,136 +0,0 @@
-## TdFileUploadComponent: td-file-upload
-
-## Usage
-
-Perfect component for file selection and upload in simple flows. Uses `TdFileInputComponent` internally.
-
-Example for usage:
-
-```html
-<td-file-upload
-  #fileUpload
-  [(ngModel)]="files"
-  defaultColor="accent"
-  activeColor="warn"
-  cancelColor="primary"
-  (selectFile)="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>
-  </ng-template>
-</td-file-upload>
-```
-
-```typescript
-export class Demo {
-
-  files: File | FileList;
-  disabled: boolean = false;
-
-  selectEvent(files: FileList | File): void {
-    if (files instanceof FileList) {
-      ...
-    } else {
-      ...
-    }
-  }
-
-  uploadEvent(files: FileList | File): void {
-    if (files instanceof FileList) {
-      ...
-    } else {
-      ...
-    }
-  }
-
-  cancelEvent(): void {
-    ...
-  }
-}
-```
-
-## API Summary
-
-#### 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.
-
-#### Events
-
-- upload: function($event)
-  - Event emitted when upload button is clicked. Emits a [File or FileList] object.
-- selectFile: 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.
-
-## Setup
-
-Import the [CovalentFileModule] in your NgModule:
-
-```typescript
-import { CovalentFileModule } from '@covalent/core/file';
-@NgModule({
-  imports: [
-    CovalentFileModule,
-    ...
-  ],
-  ...
-})
-export class MyModule {}
-```
-
-## tdFileService
-
-Service provided with methods that wrap complexity for as easier file upload experience.
-
-## API Summary
-
-#### Methods
-
-- send: function(url: string, method: string, body: File | FormData, uploadExtras: IUploadExtras)
-  - Uploads a file to a URL.
-
-## Usage
-
-```typescript
-import { TdFileService } from '@covalent/core/file';
-
-export class Demo {
-
-  file: File;
-
-  constructor(private fileUploadService: TdFileService) {
-  };
-
-  uploadEvent1(file: File) {
-    this.fileService.send('https://url.to/API', 'post', file).subscribe((response) => {
-      ...
-    });
-  };
-
-}
-```

package/layout/src/layout-card-over/README.md

@@ -1,43 +0,0 @@
-## TdLayoutCardOverComponent: td-layout-card-over
-
-`<td-layout-card-over>` is a layout component which lets you customize a `card over` view.
-
-## API Summary
-
-#### Inputs
-
-- cardTitle: string
-  - Title set in card.
-- cardSubtitle: string
-  - Subtitle set in card.
-- cardWidth: string
-  - Card flex width in %.
-  - Defaults to 70.
-- color: string
-  - Optional toolbar color.
-  - Defaults to primary.
-
-## Usage
-
-`[td-after-card]` is used to include content after the main card over content.
-
-`td-layout-footer` is used to include items in the footer.
-
-Example for Card Over Layout / Nav Layout combo:
-
-```html
-<td-layout-nav toolbarTitle="title" logo="logo" icon="icon" color="primary">
-  <td-layout-card-over
-    cardTitle="title"
-    cardSubtitle="subtitle"
-    cardWidth="widthIn%"
-    color="primary"
-  >
-    .. main content
-    <div td-after-card>.. content after card</div>
-  </td-layout-card-over>
-  <td-layout-footer color="primary">
-    // color is optional ... main footer content
-  </td-layout-footer>
-</td-layout-nav>
-```

package/layout/src/layout-manage-list/README.md

@@ -1,80 +0,0 @@
-## TdLayoutManageListComponent: td-layout-manage-list
-
-`<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'.
-
-## Usage
-
-To toggle/close/open the manage list sidenav from child layouts/components, you can use the `[tdLayoutManageListToggle]`, `[tdLayoutManageListClose]` or `[tdLayoutManageListOpen]` directives on any element and its click event will trigger the sidenav action.
-
-Example:
-
-```html
-<button
-  mat-icon-button
-  [tdLayoutManageListToggle]="true"
-  [hideWhenOpened]="true"
->
-  // or tdLayoutManageListOpen / tdLayoutManageListClose
-  <mat-icon>menu</mat-icon>
-</button>
-```
-
-To disable the sidenav action, just set the input to false.
-
-```html
-<button mat-icon-button [tdLayoutManageListToggle]="false">
-  <mat-icon>menu</mat-icon>
-</button>
-```
-
-`[td-sidenav-content]` is used to include items in the left side list.
-
-`[td-toolbar-content]` is used to include items in the toolbar.
-
-`td-layout-footer-inner` is used to include items in the inner footer.
-
-`[tdLayoutManageListToggle]` is used to add the sidenav toggle behavior to any clickable element.
-
-`[tdLayoutManageListClose]` is used to add the sidenav close behavior to any clickable element.
-
-`[tdLayoutManageListOpen]` is used to add the sidenav open behavior to any clickable element.
-
-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>
-  <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>
-      <button mat-icon-button tdLayoutManageListOpen [hideWhenOpened]="true">
-        <mat-icon>arrow_back</mat-icon>
-      </button>
-      ... sub toolbar content
-    </mat-toolbar>
-    ... main content
-    <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>
-</td-layout-nav>
-```

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

@@ -1,50 +0,0 @@
-## 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/src/layout-nav-list/README.md

@@ -1,105 +0,0 @@
-## TdLayoutNavListComponent: td-layout-nav-list
-
-`<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'.
-
-## Usage
-
-To toggle/close/open the nav list sidenav from child layouts/components, you can use the `[tdLayoutNavListToggle]`, `[tdLayoutNavListClose]` or `[tdLayoutNavListOpen]` directives on any element and its click event will trigger the sidenav action.
-
-Example:
-
-```html
-<button mat-icon-button [tdLayoutNavListToggle]="true" [hideWhenOpened]="true">
-  // or tdLayoutNavListOpen / tdLayoutNavListClose
-  <mat-icon>menu</mat-icon>
-</button>
-```
-
-To disable the sidenav action, just set the input to false.
-
-```html
-<button mat-icon-button [tdLayoutNavListToggle]="false">
-  <mat-icon>menu</mat-icon>
-</button>
-```
-
-`[td-menu-button]` is used to include a menu button before the logo and title.
-
-`[td-sidenav-content]` is used to include items in the left side list.
-
-`[td-sidenav-toolbar-content]` is used to include items in the left toolbar.
-
-`[td-toolbar-content]` is used to include items in the right toolbar.
-
-`td-layout-footer-inner` is used to include items in the inner footer.
-
-`td-layout-footer` is used to include items in the main footer.
-
-`[tdLayoutNavListToggle]` is used to add the sidenav toggle behavior to any clickable element.
-
-`[tdLayoutNavListClose]` is used to add the sidenav close behavior to any clickable element.
-
-`[tdLayoutNavListOpen]` is used to add the sidenav open behavior to any clickable element.
-
-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
-    <mat-icon>menu</mat-icon>
-  </button>
-  <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>
-  ... 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>
-</td-layout-nav-list>
-```

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

@@ -1,73 +0,0 @@
-# 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>
-```

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

@@ -1,74 +0,0 @@
-# TdSearchInputComponent: td-search-input
-
-`td-search-input` element to generate a search input with its animated cancel button.
-
-## API Summary
-
-#### 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.
-
-#### 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].
-
-#### Methods
-
-- focus: function
-  - Method to focus to underlying input.
-- clearSearch: function
-  - Method to clear the underlying input.
-
-## 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-input
-  appearance="fill|outline"
-  placeholder="Search here"
-  [(ngModel)]="searchInputTerm"
-  [showUnderline]="false|true"
-  [debounce]="500"
-  (searchDebounce)="searchInputTerm = $event"
-  (search)="searchInputTerm = $event"
-  (clear)="searchInputTerm = ''"
->
-</td-search-input>
-```