@covalent/core 4.0.0-beta.2 → 4.1.0-develop.10

package/layout/layout-manage-list/layout-manage-list.component.scss

@@ -1,82 +0,0 @@
-@import '../../common/styles/core/whiteframe';
-
-:host {
-  display: flex;
-  margin: 0;
-  width: 100%;
-  min-height: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  mat-sidenav-container.td-layout-manage-list {
-    // [flex]
-    flex: 1;
-
-    & > .mat-drawer > .mat-drawer-inner-container {
-      &.mat-drawer-opened,
-      &.mat-drawer-opening,
-      &.mat-drawer-closed,
-      &.mat-drawer-closing {
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 20%);
-      }
-    }
-  }
-
-  .td-layout-manage-list-sidenav {
-    text-align: start;
-    // [flex]
-    flex: 1;
-    // [md-content]
-    display: block;
-    position: relative;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .td-layout-manage-list-main {
-    margin: 0;
-    width: 100%;
-    min-height: 100%;
-    height: 100%;
-    position: relative;
-    overflow: auto;
-    // [layout="column"]
-    flex-direction: column;
-    box-sizing: border-box;
-    display: flex;
-
-    .td-layout-manage-list-content {
-      // [md-content]
-      display: block;
-      position: relative;
-      overflow: auto;
-      -webkit-overflow-scrolling: touch;
-      // [flex]
-      flex: 1;
-    }
-  }
-}
-
-:host ::ng-deep {
-  mat-sidenav-container.td-layout-manage-list {
-    & > .mat-drawer-content {
-      flex-grow: 1;
-    }
-
-    /* Ensure the left sidenav is a flex column & 100% height */
-    & > .mat-drawer > .mat-drawer-inner-container {
-      box-shadow: $whiteframe-shadow-1dp;
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
-    }
-  }
-
-  mat-nav-list a[mat-list-item] .mat-list-item-content {
-    font-size: 14px;
-  }
-
-  .mat-toolbar {
-    font-weight: 400;
-  }
-}

package/layout/layout-nav/README.md

@@ -1,46 +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/layout-nav/layout-nav.component.scss

@@ -1,54 +0,0 @@
-.td-menu-button {
-  margin-left: 0;
-
-  ::ng-deep [dir='rtl'] & {
-    margin-right: 0;
-    margin-left: 6px;
-  }
-}
-
-:host {
-  display: flex;
-  margin: 0;
-  width: 100%;
-  min-height: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  .td-layout-nav-wrapper {
-    // [layout="column"]
-    flex-direction: column;
-    box-sizing: border-box;
-    display: flex;
-    // [layout-fill]
-    margin: 0;
-    width: 100%;
-    min-height: 100%;
-    height: 100%;
-
-    .td-layout-nav-toolbar-content {
-      // [layout="row"]
-      flex-direction: row;
-      box-sizing: border-box;
-      display: flex;
-      // [layout-align="start center"]
-      align-items: center;
-      align-content: center;
-      max-width: 100%;
-      justify-content: flex-start;
-    }
-
-    .td-layout-nav-content {
-      // [layout="column"]
-      flex-direction: column;
-      box-sizing: border-box;
-      display: flex;
-      // [flex]
-      flex: 1;
-      // [md-content]
-      position: relative;
-      overflow: auto;
-      -webkit-overflow-scrolling: touch;
-    }
-  }
-}

package/layout/layout-nav-list/layout-nav-list.component.scss

@@ -1,115 +0,0 @@
-@import '../../common/styles/core/whiteframe';
-
-:host {
-  .td-layout-nav-list-wrapper > .mat-sidenav-container {
-    > mat-sidenav.mat-drawer-side {
-      border-right: 0;
-
-      [dir='rtl'] & {
-        border-left: 0;
-      }
-    }
-  }
-  // [layout-fill]
-  margin: 0;
-  width: 100%;
-  min-height: 100%;
-  height: 100%;
-  overflow: hidden;
-  // [layout="column"]
-  flex-direction: column;
-  box-sizing: border-box;
-  display: flex;
-  // [flex]
-  flex: 1;
-
-  .td-layout-nav-list-wrapper {
-    // [layout="column"]
-    flex-direction: column;
-    box-sizing: border-box;
-    display: flex;
-    // [flex]
-    flex: 1;
-    // [md-content]
-    position: relative;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-
-    .td-layout-nav-list-toolbar-content {
-      // [layout="row"]
-      flex-direction: row;
-      box-sizing: border-box;
-      display: flex;
-      // [layout-align="start center"]
-      align-items: center;
-      align-content: center;
-      max-width: 100%;
-      justify-content: flex-start;
-    }
-
-    .td-layout-nav-list-content {
-      text-align: start;
-      // [flex]
-      flex: 1;
-      // [md-content]
-      display: block;
-      position: relative;
-      overflow: auto;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    .td-layout-nav-list-main {
-      // [layout="column"]
-      flex-direction: column;
-      box-sizing: border-box;
-      display: flex;
-      // [layout-fill]
-      margin: 0;
-      width: 100%;
-      min-height: 100%;
-      height: 100%;
-      position: relative;
-      overflow: auto;
-
-      .td-layout-nav-list-content {
-        // [md-content]
-        display: block;
-        position: relative;
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-        // [flex]
-        flex: 1;
-      }
-    }
-
-    mat-sidenav-container.td-layout-nav-list {
-      // [flex]
-      flex: 1;
-
-      & > mat-sidenav {
-        &.mat-drawer-opened,
-        &.mat-drawer-opening,
-        &.mat-drawer-closed,
-        &.mat-drawer-closing {
-          box-shadow: none;
-        }
-      }
-    }
-  }
-}
-
-:host ::ng-deep {
-  mat-sidenav-container.td-layout-nav-list {
-    & > .mat-drawer-content {
-      flex-grow: 1;
-    }
-
-    /* Ensure the left sidenav is a flex column & 100% height */
-    & > .mat-drawer > .mat-drawer-inner-container {
-      box-shadow: $whiteframe-shadow-1dp;
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}

package/layout/layout.component.scss

@@ -1,16 +0,0 @@
-:host {
-  display: flex;
-  margin: 0;
-  width: 100%;
-  min-height: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  ::ng-deep {
-    // Ensuring sidenav content has flex column properties
-    & > mat-sidenav-container .mat-drawer > .mat-drawer-inner-container {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}

package/layout/navigation-drawer/navigation-drawer.component.scss

@@ -1,81 +0,0 @@
-:host {
-  width: 100%;
-
-  .td-navigation-drawer-content,
-  .td-navigation-drawer-menu-content {
-    &.ng-animating {
-      overflow: hidden;
-    }
-  }
-
-  mat-toolbar {
-    padding: 16px;
-
-    &.td-toolbar-background {
-      background-repeat: no-repeat;
-      background-size: cover;
-    }
-
-    &.td-nagivation-drawer-toolbar {
-      flex-direction: column;
-      height: auto !important;
-      display: block !important;
-    }
-
-    .td-navigation-drawer-toolbar-content {
-      // [layout="row"]
-      flex-direction: row;
-      box-sizing: border-box;
-      display: flex;
-      // [layout-align="start center"]
-      align-items: center;
-      align-content: center;
-      max-width: 100%;
-      justify-content: flex-start;
-
-      .td-nagivation-drawer-toolbar-avatar {
-        border-radius: 50%;
-        height: 60px;
-        width: 60px;
-        margin: 0 12px 12px 0;
-      }
-
-      .td-navigation-drawer-title {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-
-    .td-navigation-drawer-name {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .td-navigation-drawer-menu-toggle {
-      // [layout="row"]
-      flex-direction: row;
-      box-sizing: border-box;
-      display: flex;
-
-      .td-navigation-drawer-label {
-        // [flex]
-        flex: 1;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .td-navigation-drawer-menu-button {
-        height: 24px;
-        line-height: 24px;
-        width: 24px;
-      }
-    }
-  }
-
-  > div {
-    overflow: hidden;
-  }
-}

package/menu/index.d.ts

@@ -1 +0,0 @@
-export * from './public-api';

package/menu/menu.component.scss

@@ -1,51 +0,0 @@
-$td-menu-spacing: 8px !default;
-
-:host {
-  margin-top: -$td-menu-spacing;
-  margin-bottom: -$td-menu-spacing;
-  // [layout]
-  box-sizing: border-box;
-  display: flex;
-  // [layout="column"]
-  flex-direction: column;
-}
-
-:host ::ng-deep {
-  [td-menu-header] {
-    padding: $td-menu-spacing;
-    text-align: center;
-  }
-
-  mat-list,
-  mat-list[dense],
-  mat-nav-list,
-  mat-nav-list[dense] {
-    a[mat-list-item].mat-2-line,
-    mat-list-item.mat-2-line {
-      height: auto;
-
-      & .mat-list-item-content {
-        height: auto;
-        padding: $td-menu-spacing;
-
-        .mat-list-text {
-          padding-right: 0;
-
-          [dir='rtl'] & {
-            padding-left: 0;
-            padding-right: 16px;
-          }
-        }
-
-        [matLine] + [matLine] {
-          margin-top: calc($td-menu-spacing / 2);
-        }
-      }
-    }
-  }
-}
-
-.td-menu-content {
-  max-height: calc(50vh);
-  overflow-y: auto;
-}

package/message/index.d.ts

@@ -1 +0,0 @@
-export * from './public-api';

package/message/message.component.scss

@@ -1,32 +0,0 @@
-:host {
-  display: block;
-
-  .td-message-wrapper {
-    padding: 8px 16px;
-    min-height: 52px;
-    // [layout]
-    box-sizing: border-box;
-    display: flex;
-    // [layout="row"]
-    flex-direction: row;
-    // [layout-align="start center"]
-    align-items: center;
-    align-content: center;
-    max-width: 100%;
-    justify-content: flex-start;
-
-    .td-message-labels {
-      // [flex]
-      flex: 1;
-    }
-  }
-}
-
-.td-message-icon {
-  margin-right: 16px;
-
-  ::ng-deep [dir='rtl'] & {
-    margin-left: 16px;
-    margin-right: 0;
-  }
-}

package/schematics/README.md

@@ -1,66 +0,0 @@
-# Covalent schematics
-Utilizes the Angular Schematics workflow tool to create Covalent applications
-
-## Prerequisites
-
-Prerequisites to run Covalent schematics in your project:
-
-```
-Node : v8.15.0
-Npm : 6.7.0
-Typescript : 3.1.3
-Tslint : 5.12.1
-Angular CLI : 7.2.2
-```
-
-## Install Covalent core schematics
-The following will:
-- Ensure project dependencies are placed in package.json
-- Install all core components
-- Optionally install dynamic forms, http service, code highlight, markdown parser, flavored markdown parser
-- Add Covalent theme file to your src folder
-- Include theme.scss in angular config
-
-### Build locally
-To run Covalent core schematic locally, run the following commands:
-
-(alternatively run `./precommit-schematics.sh` from scripts folder that includes the same commands)
-
-#### Run test and linter
-```
-npm run test-schematics
-npm run tslint
-```
-
-#### Link project
-```
-cd ../src/platform/experimental
-npm link
-```
-
-#### Create Angular base project
-```
-cd /tmp
-rm -rf testxyz
-ng new testxyz
-```
-
-#### Run Covalent schematics
-```
-cd testxyz
-npm link @covalent/experimental
-ng g @covalent/experimental:ng-add
-```
-
-#### Check generated files
-```
-git status
-npm ci
-ng serve
-```
-
-### Covalent core `ng add` schematic
-*NOTE: This command does not work yet and will not work until after Covalent schematics is published to npm.  Most likely once it is out of the Covalent experimental area.  See above on how to build locally instead.*
-```
-ng add @covalent/core
-```

package/schematics/ng-add/files/theme.scss

@@ -1,64 +0,0 @@
-@import '~@angular/material/theming';
-@import '~@covalent/core/theming/all-theme';
-<% if (markdown) { %>@import '~@covalent/markdown/markdown-theme';<% } %>
-<% if (highlight) { %>@import '~@covalent/highlight/highlight-theme';<% } %>
-<% if (flavoredMarkdown) { %>@import '~@covalent/flavored-markdown/flavored-markdown-theme';<% } %>
-// Plus imports for other components in your app.
-
-// Custom typography
-$custom-typography: mat-typography-config(
-  $button: mat-typography-level(14px, 14px, 400)
-);
-$custom-toolbar-typography: mat-typography-config(
-  $title: mat-typography-level(20px, 32px, 400)
-);
-
-// Include the base styles for Angular Material core. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-@include mat-core($custom-typography);
-
-// Setting the toolbar to the proper spec weight
-@include mat-toolbar-typography($custom-toolbar-typography);
-
-// Include the core styles for Covalent
-@include covalent-core();
-
-// Include material icons
-$mat-font-url: './';
-@include covalent-material-icons();
-
-<% if (styleSheetUtilities) { %>
-// Include covalent utility classes
-@include covalent-utilities();
-<% } %>
-<% if (styleSheetFlexLayout) { %>
-// Include flex layout classes
-@include covalent-layout();
-<% } %>
-<% if (styleSheetColors) { %>
-// Include covalent color classes
-@include covalent-colors();
-<% } %>
-
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue.
-$primary: mat-palette($mat-indigo, 700, 300, 900);
-$accent:  mat-palette($mat-light-blue);
-
-// The warn palette is optional (defaults to red).
-$warn:    mat-palette($mat-red, 600, 200, 900);
-
-// Create the theme object (a Sass map containing all of the palettes).
-$theme: mat-light-theme($primary, $accent, $warn);
-
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include angular-material-theme($theme);
-@include covalent-theme($theme);
-<% if (markdown) { %>@include covalent-markdown-theme($theme);<% } %>
-<% if (highlight) { %>
-@include covalent-highlight-theme(); // OR @import '~highlight.js/styles/vs.css';
-<% } %>
-<% if (flavoredMarkdown) { %>@include covalent-flavored-markdown-theme($theme);<% } %>

package/search/index.d.ts

@@ -1 +0,0 @@
-export * from './public-api';

package/search/search-box/README.md

@@ -1,62 +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>
-```