@covalent/core 0.0.0-COVALENT

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

@@ -0,0 +1,147 @@
+## 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"
+  (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 {
+
+  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
+
+- 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].
+
+## 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

@@ -0,0 +1,136 @@
+## 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"
+  (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>
+  </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.
+- 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.
+
+## 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/json-formatter/README.md

@@ -0,0 +1,50 @@
+# td-json-formatter
+
+`td-json-formatter` renders a javascript object in JSON format the same way the chrome/firefox console would render it using `console.log()`.
+
+Hovering on nodes will bring out a preview tooltip of the first 5 objects/properties of the node.
+
+The tree is collapsable/expandable so you can navigate through its nodes.
+
+## API Summary
+
+#### 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.
+
+#### Methods
+
+- refresh: function
+  - Refreshes json-formatter and rerenders [data]
+
+## Setup
+
+Import the [CovalentJsonFormatterModule] in your NgModule:
+
+```typescript
+import { CovalentJsonFormatterModule } from '@covalent/core/json-formatter';
+@NgModule({
+  imports: [
+    CovalentJsonFormatterModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+## Usage
+
+Simply add the component and pass the object to be formatted as a [data] input.
+
+Example for HTML usage:
+
+```html
+<td-json-formatter [data]="object" key="root" [levelsOpen]="1">
+</td-json-formatter>
+```

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

@@ -0,0 +1,72 @@
+@import '../common/styles/theme-functions';
+@import '../common/styles/typography-functions';
+
+@mixin td-json-formatter-typography($config) {
+  .td-key {
+    font: {
+      family: td-font-family($config);
+      size: td-font-size($config, body-1);
+    }
+  }
+}
+
+@mixin td-json-formatter-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  .td-json-formatter-wrapper {
+    .function::after,
+    .date::after,
+    .td-object-name::after,
+    .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

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

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

@@ -0,0 +1,78 @@
+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;
+    /**
+     * Max length for property names. Any names bigger than this get trunctated.
+     */
+    private static KEY_MAX_LENGTH;
+    /**
+     * Max length for preview string. Any names bigger than this get trunctated.
+     */
+    private static PREVIEW_STRING_MAX_LENGTH;
+    /**
+     * Max tooltip preview elements.
+     */
+    private static PREVIEW_LIMIT;
+    private _key?;
+    private _data;
+    private _children?;
+    private _open;
+    private _levelsOpen;
+    /**
+     * levelsOpen?: number
+     * Levels opened by default when JS object is formatted and rendered.
+     */
+    set levelsOpen(levelsOpen: number);
+    get levelsOpen(): number;
+    get open(): boolean;
+    /**
+     * key?: string
+     * Tag to be displayed next to formatted object.
+     */
+    set key(key: string);
+    get key(): string;
+    /**
+     * data: any
+     * JS object to be formatted.
+     */
+    set data(data: Record<string, any>);
+    get data(): Record<string, any>;
+    get children(): string[];
+    get isRTL(): boolean;
+    constructor(_changeDetectorRef: ChangeDetectorRef, _dir: Dir);
+    /**
+     * Refreshes json-formatter and rerenders [data]
+     */
+    refresh(): void;
+    /**
+     * Toggles collapse/expanded state of component.
+     */
+    toggle(): void;
+    isObject(): boolean;
+    isArray(): boolean;
+    hasChildren(): boolean;
+    /**
+     * Gets parsed value depending on value type.
+     */
+    getValue(value: any): string;
+    /**
+     * Gets type of object.
+     * returns 'null' if object is null and 'date' if value is object and can be parsed to a date.
+     */
+    getType(object: any): string;
+    /**
+     * Generates string representation depending if its an object or function.
+     * see: http://stackoverflow.com/a/332429
+     */
+    getObjectName(): string;
+    /**
+     * Creates preview of nodes children to render in tooltip depending if its an array or an object.
+     */
+    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

@@ -0,0 +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

@@ -0,0 +1,10 @@
+{
+  "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",
+  "sideEffects": false,
+  "name": "@covalent/core/json-formatter"
+}

package/json-formatter/public_api.d.ts

@@ -0,0 +1,2 @@
+export * from './json-formatter.module';
+export * from './json-formatter.component';

package/layout/README.md

@@ -0,0 +1,138 @@
+## TdLayoutComponent - td-layout
+
+`<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'.
+
+## Usage
+
+`[td-sidenav-content]` is used to include content in the main sidenav.
+
+Example for Main Layout:
+
+```html
+<td-layout [mode]="'side'" [opened]="true" [sidenavWidth]="'257px'">
+  <div td-sidenav-content>.. more sidenav content</div>
+  .. main content
+</td-layout>
+```
+
+To toggle/close/open the main sidenav from child layouts/components, you can use the `[tdLayoutToggle]`, `[tdLayoutClose]` or `[tdLayoutOpen]` directives on any element and its click event will trigger the sidenav action.
+
+Example:
+
+```html
+<button mat-icon-button [tdLayoutToggle]="true">
+  // or tdLayoutOpen / tdLayoutClose
+  <mat-icon>menu</mat-icon>
+</button>
+```
+
+To disable the sidenav action, just set the input to false.
+
+```html
+<button mat-icon-button [tdLayoutToggle]="false">
+  <mat-icon>menu</mat-icon>
+</button>
+```
+
+## Installation
+
+This component can be installed as npm package.
+
+```bash
+npm i -save @covalent/core
+```
+
+## Setup
+
+Import the **[CovalentLayoutModule]** in your NgModule:
+
+```typescript
+import { CovalentLayoutModule } from '@covalent/core/layout';
+@NgModule({
+  imports: [
+    CovalentLayoutModule,
+    ...
+  ],
+  ...
+})
+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.
+
+## Usage
+
+`[td-sidenav-content]` is used to include content in the main sidenav.
+
+`[td-navigation-drawer-menu]` is used to include content to the `toggle` user menu. if no tag is used, then the toggle button dissapears.
+
+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="/"
+  >
+    .. main drawer content
+    <div tdNavigationDrawerMenu>.. menu drawer content</div>
+  </td-navigation-drawer>
+  <div td-sidenav-content>.. more sidenav content</div>
+  .. main content
+</td-layout>
+```