@messaia/cdk 12.3.5-rc21 → 13.0.0-rc02

package/src/lib/layout/README.md

@@ -0,0 +1,119 @@
+## VdLayoutComponent - vd-layout
+
+`<vd-layout>` is a blank main sidenav component that gets hooked as parent of all the other layouts. (triggered by their menu buttons)
+
+
+## API Summary
+
+| Name | Type | Description |
+| --- | --- | 650--- |
+| mode | 'over', 'side' or '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'.
+
+
+## Usage
+
+`[vd-sidenav-content]` is used to include content in the main sidenav.
+
+Example for Main Layout:
+
+```html
+<vd-layout [mode]="side" [opened]="true" [sidenavWidth]="257px">
+  <div vd-sidenav-content>
+   .. more sidenav content
+  </div>
+  .. main content
+</vd-layout>
+```
+
+To toggle/close/open the main sidenav from child layouts/components, you can use the `[vdLayoutToggle]`, `[vdLayoutClose]` or `[tdLayoutOpen]` directives on any element and its click event will trigger the sidenav action.
+
+Example:
+
+```html
+<button mat-icon-button [vdLayoutToggle]="true"> // or vdLayoutOpen / tdLayoutClose
+  <mat-icon>menu</mat-icon>
+</button>
+```
+
+To disable the sidenav action, just set the input to false.
+
+```html
+<button mat-icon-button [vdLayoutToggle]="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';
+@NgModule({
+  imports: [
+    CovalentLayoutModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+
+### Theming
+
+See [theming](https://teradata.github.io/covalent/#/docs/theme) in the covalent docs for more info.
+
+
+## VdNavigationDrawerComponent - vd-navigation-drawer
+
+`<vd-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 `vd-layout`.
+
+
+## API Summary
+
+| Name | Type | Description |
+| --- | --- | 650--- |
+| 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.
+| 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
+
+`[vd-sidenav-content]` is used to include content in the main sidenav.
+
+`[vd-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
+<vd-layout>
+  <vd-navigation-drawer sidenavTitle="title" logo="logo" icon="icon" name="name" password="password" color="color" navigationRoute="/">
+    .. main drawer content
+    <div vd-navigation-drawer-menu>
+      .. menu drawer content
+    </div>
+  </vd-navigation-drawer>
+  <div vd-sidenav-content>
+   .. more sidenav content
+  </div>
+  .. main content
+</vd-layout>
+```

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

@@ -0,0 +1,36 @@
+## VdLayoutCardOverComponent: vd-layout-card-over
+
+`<vd-layout-card-over>` is a layout component which lets you customize a `card over` view.
+
+
+## API Summary
+
+| Name | Type | Description |
+| --- | --- | 650--- |
+| 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
+
+`[vd-after-card]` is used to include content after the main card over content.
+
+`vd-layout-footer` is used to include items in the footer.
+
+Example for Card Over Layout / Nav Layout combo:
+
+```html
+<vd-layout-nav toolbarTitle="title" logo="logo" icon="icon" color="primary">
+  <vd-layout-card-over cardTitle="title" cardSubtitle="subtitle" cardWidth="widthIn%" color="primary">
+    .. main content
+    <div vd-after-card>
+      .. content after card
+    </div>
+  </vd-layout-card-over>
+  <vd-layout-footer color="primary"> // color is optional
+    ... main footer content
+  </vd-layout-footer>
+</vd-layout-nav>
+```

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

@@ -0,0 +1,76 @@
+## VdLayoutManageListComponent: vd-layout-manage-list
+
+`<vd-layout-manage-list>` is a layout component which lets you customize a `management` view with toolbar items, item selections and footers.
+
+
+## API Summary
+
+| Name | Type | Description |
+| --- | --- | 650--- |
+| mode | 'over', 'side' or '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'.
+
+
+## Usage
+
+To toggle/close/open the manage list sidenav from child layouts/components, you can use the `[vdLayoutManageListToggle]`, `[vdLayoutManageListClose]` or `[tdLayoutManageListOpen]` directives on any element and its click event will trigger the sidenav action.
+
+Example:
+
+```html
+<button mat-icon-button [vdLayoutManageListToggle]="true" [hideWhenOpened]="true"> // or vdLayoutManageListOpen / tdLayoutManageListClose
+  <mat-icon>menu</mat-icon>
+</button>
+```
+
+To disable the sidenav action, just set the input to false.
+
+```html
+<button mat-icon-button [vdLayoutManageListToggle]="false">
+  <mat-icon>menu</mat-icon>
+</button>
+```
+
+`[vd-sidenav-content]` is used to include items in the left side list.
+
+`[vd-toolbar-content]` is used to include items in the toolbar.
+
+`vd-layout-footer-inner` is used to include items in the inner footer.
+
+`[vdLayoutManageListToggle]` is used to add the sidenav toggle behavior to any clickable element.
+
+`[vdLayoutManageListClose]` is used to add the sidenav close behavior to any clickable element.
+
+`[vdLayoutManageListOpen]` is used to add the sidenav open behavior to any clickable element.
+
+Example for Manage List Layout / Nav Layout combo:
+
+```html
+<vd-layout-nav sidenavTitle="title" logo="logo" icon="icon" color="primary">
+  <div vd-toolbar-content>
+    .. main toolbar content
+  </div>
+  <vd-layout-manage-list opened="true" mode="side" sidenavWidth="257px">
+    <mat-toolbar vd-sidenav-content>
+      ... toolbar in sidenav
+    </mat-toolbar>
+    <mat-nav-list vd-sidenav-content>
+      ... sidenav content
+    </mat-nav-list>
+    <mat-toolbar>
+      <button mat-icon-button vdLayoutManageListOpen [hideWhenOpened]="true">
+        <mat-icon>arrow_back</mat-icon>
+      </button>
+      ... sub toolbar content
+    </mat-toolbar>
+    ... main content
+    <vd-layout-footer-inner>
+      ... sub footer content
+    </vd-layout-footer-inner>
+  </vd-layout-manage-list>
+  <vd-layout-footer color="primary"> // color is optional
+    ... main footer content
+  </vd-layout-footer>
+</vd-layout-nav>
+```

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

@@ -0,0 +1,40 @@
+## VdLayoutNavComponent: vd-layout-nav
+
+`<vd-layout-nav>` is a layout component which lets you customize a `navigation` view with toolbar items and footers.
+
+
+## API Summary
+
+| Name | Type | Description |
+| --- | --- | 650--- |
+| 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
+
+`[vd-menu-button]` is used to include a menu button before the logo and title.
+
+`[vd-toolbar-content]` is used to include items in the toolbar.
+
+`vd-layout-footer` is used to include items in the footer.
+
+Example for Nav Layout:
+
+```html
+<vd-layout-nav toolbarTitle="title" logo="logo" icon="icon" color="primary" navigationRoute="/">
+  <button mat-icon-button vd-menu-button> // can use `[vdLayoutToggle]` to toggle main sidenav
+    <mat-icon>menu</mat-icon>
+  </button>
+  <div vd-toolbar-content>
+    .. main toolbar content
+  </div>
+  ... main content
+  <vd-layout-footer color="primary"> // color is optional
+    ... main footer content
+  </vd-layout-footer>
+</vd-layout-nav>
+```

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

@@ -0,0 +1,85 @@
+## VdLayoutNavListComponent: vd-layout-nav-list
+
+`<vd-layout-nav-list>` is a layout component which lets you customize a `navigation` list view with toolbar items, item selections and footers.
+
+
+## API Summary
+
+| Name | Type | Description |
+| --- | --- | 650--- |
+| 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' or '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'.
+
+
+## Usage
+
+To toggle/close/open the nav list sidenav from child layouts/components, you can use the `[vdLayoutNavListToggle]`, `[vdLayoutNavListClose]` or `[tdLayoutNavListOpen]` directives on any element and its click event will trigger the sidenav action.
+
+Example:
+
+```html
+<button mat-icon-button [vdLayoutNavListToggle]="true" [hideWhenOpened]="true"> // or vdLayoutNavListOpen / tdLayoutNavListClose
+  <mat-icon>menu</mat-icon>
+</button>
+```
+
+To disable the sidenav action, just set the input to false.
+
+```html
+<button mat-icon-button [vdLayoutNavListToggle]="false">
+  <mat-icon>menu</mat-icon>
+</button>
+```
+
+`[vd-menu-button]` is used to include a menu button before the logo and title.
+
+`[vd-sidenav-content]` is used to include items in the left side list.
+
+`[vd-sidenav-toolbar-content]` is used to include items in the left toolbar.
+
+`[vd-toolbar-content]` is used to include items in the right toolbar.
+
+`vd-layout-footer-inner` is used to include items in the inner footer.
+
+`vd-layout-footer` is used to include items in the main footer.
+
+`[vdLayoutNavListToggle]` is used to add the sidenav toggle behavior to any clickable element.
+
+`[vdLayoutNavListClose]` is used to add the sidenav close behavior to any clickable element.
+
+`[vdLayoutNavListOpen]` is used to add the sidenav open behavior to any clickable element.
+
+Example for Nav List Layout:
+
+```html
+<vd-layout-nav-list sidenavTitle="title" logo="logo" icon="icon" opened="true" mode="side" sidenavWidth="350px" color="primary" navigationRoute="/">
+  <button mat-icon-button vd-menu-button> // can use `[vdLayoutToggle]` to toggle main sidenav
+    <mat-icon>menu</mat-icon>
+  </button>
+  <div vd-sidenav-toolbar-content>
+    ... left toolbar content
+  </div>
+  <mat-nav-list vd-sidenav-content>
+    <button mat-icon-button vdLayoutNavListOpen [hideWhenOpened]="true">
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+    ... sidenav content
+  </mat-nav-list>
+  <div vd-toolbar-content>
+    ... right toolbar content
+  </div>
+  ... main content
+  <vd-layout-footer-inner>
+    ... sub footer content
+  </vd-layout-footer-inner>
+  <vd-layout-footer color="primary"> // color is optional
+    ... main footer content
+  </vd-layout-footer>
+</vd-layout-nav-list>
+```