@covalent/core 0.0.0-COVALENT

package/layout/navigation-drawer/navigation-drawer.component.d.ts

@@ -0,0 +1,120 @@
+import { OnInit, OnDestroy, QueryList } from '@angular/core';
+import { Router } from '@angular/router';
+import { SafeStyle, DomSanitizer } from '@angular/platform-browser';
+import { MatDrawerToggleResult } from '@angular/material/sidenav';
+import { TdLayoutComponent } from '../layout.component';
+import * as i0 from "@angular/core";
+export declare class TdNavigationDrawerMenuDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdNavigationDrawerMenuDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdNavigationDrawerMenuDirective, "[tdNavigationDrawerMenu]", never, {}, {}, never>;
+}
+export declare class TdNavigationDrawerToolbarDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdNavigationDrawerToolbarDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdNavigationDrawerToolbarDirective, "[tdNavigationDrawerToolbar]", never, {}, {}, never>;
+}
+export declare class TdNavigationDrawerComponent implements OnInit, OnDestroy {
+    private _layout;
+    private _router;
+    private _sanitize;
+    private _closeSubscription?;
+    private _menuToggled;
+    private _backgroundImage;
+    get menuToggled(): boolean;
+    _drawerMenu: QueryList<TdNavigationDrawerMenuDirective>;
+    _toolbar: QueryList<TdNavigationDrawerToolbarDirective>;
+    /**
+     * Checks if there is a [TdNavigationDrawerMenuDirective] has content.
+     */
+    get isMenuAvailable(): boolean;
+    /**
+     * Checks if there is a [TdNavigationDrawerToolbarDirective] has content.
+     */
+    get isCustomToolbar(): boolean;
+    /**
+     * Checks if there is a background image for the toolbar.
+     */
+    get isBackgroundAvailable(): boolean;
+    /**
+     * sidenavTitle?: string
+     * Title set in sideNav.
+     */
+    sidenavTitle?: string;
+    /**
+     * icon?: string
+     *
+     * icon name to be displayed before the title
+     */
+    icon?: string;
+    /**
+     * logo?: string
+     *
+     * logo icon name to be displayed before the title.
+     * If [icon] is set, then this will not be shown.
+     */
+    logo?: string;
+    /**
+     * avatar?: string
+     *
+     * avatar url to be displayed before the title
+     * If [icon] or [logo] are set, then this will not be shown.
+     */
+    avatar?: string;
+    /**
+     * color?: 'accent' | 'primary' | 'warn'
+     *
+     * toolbar color option: primary | accent | warn.
+     * If [color] is not set, default is used.
+     */
+    color?: 'accent' | 'primary' | 'warn';
+    /**
+     * navigationRoute?: string
+     *
+     * option to set the combined route for the icon, logo, and sidenavTitle.
+     */
+    navigationRoute?: string;
+    /**
+     * 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.
+     */
+    set backgroundUrl(backgroundUrl: any);
+    get backgroundImage(): SafeStyle | null;
+    /**
+     * 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.
+     */
+    name?: string;
+    /**
+     * 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.
+     */
+    email?: string;
+    /**
+     * Checks if router was injected.
+     */
+    get routerEnabled(): boolean;
+    constructor(_layout: TdLayoutComponent, _router: Router, _sanitize: DomSanitizer);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    toggleMenu(): void;
+    handleNavigationClick(): void;
+    /**
+     * Proxy toggle method to access sidenav from outside (from td-layout template).
+     */
+    toggle(): Promise<MatDrawerToggleResult>;
+    /**
+     * Proxy open method to access sidenav from outside (from td-layout template).
+     */
+    open(): Promise<MatDrawerToggleResult>;
+    /**
+     * Proxy close method to access sidenav from outside (from td-layout template).
+     */
+    close(): Promise<MatDrawerToggleResult>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdNavigationDrawerComponent, [null, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdNavigationDrawerComponent, "td-navigation-drawer", never, { "sidenavTitle": "sidenavTitle"; "icon": "icon"; "logo": "logo"; "avatar": "avatar"; "color": "color"; "navigationRoute": "navigationRoute"; "backgroundUrl": "backgroundUrl"; "name": "name"; "email": "email"; }, {}, ["_drawerMenu", "_toolbar"], ["[td-navigation-drawer-toolbar]", "*", "[td-navigation-drawer-menu]"]>;
+}

package/layout/package.json

@@ -0,0 +1,10 @@
+{
+  "module": "../fesm2015/covalent-core-layout.mjs",
+  "es2020": "../fesm2020/covalent-core-layout.mjs",
+  "esm2020": "../esm2020/layout/covalent-core-layout.mjs",
+  "fesm2020": "../fesm2020/covalent-core-layout.mjs",
+  "fesm2015": "../fesm2015/covalent-core-layout.mjs",
+  "typings": "covalent-core-layout.d.ts",
+  "sideEffects": false,
+  "name": "@covalent/core/layout"
+}

package/layout/public_api.d.ts

@@ -0,0 +1,12 @@
+export * from './layout.module';
+export * from './layout.component';
+export * from './layout.directives';
+export * from './layout-toggle.class';
+export * from './layout-card-over/layout-card-over.component';
+export * from './layout-footer/layout-footer.component';
+export * from './layout-manage-list/layout-manage-list.component';
+export * from './layout-manage-list/layout-manage-list.directives';
+export * from './layout-nav/layout-nav.component';
+export * from './layout-nav-list/layout-nav-list.component';
+export * from './layout-nav-list/layout-nav-list.directives';
+export * from './navigation-drawer/navigation-drawer.component';

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

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

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

@@ -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/src/layout-nav-list/README.md

@@ -0,0 +1,105 @@
+## 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/menu/covalent-core-menu.d.ts

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

package/menu/menu.component.d.ts

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

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

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

package/menu/public_api.d.ts

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

package/message/README.md

@@ -0,0 +1,67 @@
+# td-message
+
+`td-message` element generates an inline message with an icon, color, label and sublabel.
+
+`color` can be either with any theme color (`primary`, `accent` or `warn`)
+But you can also set a `color` from our lib and it can be applied in the component to get any material color not in the theme. (`blue`, `red`, etc)
+
+## API Summary
+
+#### 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'.
+
+#### 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.
+
+## Setup
+
+Import the [CovalentMessageModule] in your NgModule:
+
+```typescript
+import { CovalentMessageModule } from '@covalent/core/message';
+@NgModule({
+  imports: [
+    CovalentMessageModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+## Usage
+
+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>
+<button mat-button color="accent" (click)="messageDemo.toggle()">
+  Toggle Visibility
+</button>
+```

package/message/_message-theme.scss

@@ -0,0 +1,44 @@
+@import '../common/styles/theme-functions';
+@import '../common/styles/typography-functions';
+
+@mixin td-message-typography($config) {
+  .td-message-label {
+    font: {
+      family: td-font-family($config);
+      size: td-font-size($config, body-2);
+      weight: 600;
+    }
+
+    line-height: td-line-height($config, body-2);
+  }
+
+  .td-message-sublabel {
+    font: {
+      family: td-font-family($config);
+      size: td-font-size($config, body-1);
+    }
+  }
+}
+
+@mixin td-message-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+
+  .td-message {
+    &.mat-primary {
+      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

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