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

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>
-```

package/search/search-box/search-box.component.scss

@@ -1,37 +0,0 @@
-:host {
-  display: block;
-}
-
-.td-search-box {
-  // [layout]
-  box-sizing: border-box;
-  display: flex;
-  // [layout="row"]
-  flex-direction: row;
-  // [layout-align="end center"]
-  align-items: baseline;
-  align-content: center;
-  max-width: 100%;
-  justify-content: flex-end;
-
-  .td-search-icon {
-    // [flex="none"]
-    flex: 0 0 auto;
-    align-self: center;
-  }
-
-  td-search-input {
-    margin-left: 12px;
-
-    ::ng-deep [dir='rtl'] & {
-      margin-right: 12px;
-      margin-left: 0 !important;
-    }
-
-    ::ng-deep .mat-form.field.mat-form-field-appearance-legacy {
-      .mat-form-field-wrapper {
-        padding-bottom: 1em;
-      }
-    }
-  }
-}

package/search/search-input/README.md

@@ -1,65 +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="legacy|standard|fill|outline" placeholder="Search here" [(ngModel)]="searchInputTerm" [showUnderline]="false|true" [debounce]="500" (searchDebounce)="searchInputTerm = $event" (search)="searchInputTerm = $event" (clear)="searchInputTerm = ''">
-    </td-search-input>
-```

package/search/search-input/search-input.component.scss

@@ -1,75 +0,0 @@
-:host {
-  .td-search-input {
-    overflow-x: hidden;
-    // [layout]
-    box-sizing: border-box;
-    display: flex;
-    // [layout="row"]
-    flex-direction: row;
-    // [layout-align="end center"]
-    align-items: baseline;
-    align-content: center;
-    max-width: 100%;
-    justify-content: flex-end;
-
-    .td-search-input-field {
-      flex: 1;
-    }
-
-    ::ng-deep mat-form-field {
-      &.mat-form-field-appearance-outline {
-        .mat-form-field-wrapper {
-          padding-bottom: 0;
-        }
-      }
-
-      &.mat-form-field-appearance-fill {
-        .mat-form-field-wrapper {
-          padding-bottom: 0;
-
-          .mat-form-field-flex {
-            height: 52px;
-          }
-
-          .mat-form-field-underline {
-            bottom: 0;
-          }
-        }
-      }
-
-      &.mat-form-field-appearance-standard {
-        .mat-form-field-wrapper {
-          padding-bottom: 0;
-
-          .mat-form-field-infix {
-            bottom: 0.4em;
-          }
-
-          .mat-form-field-underline {
-            bottom: 0;
-          }
-        }
-      }
-
-      &.mat-form-field-appearance-legacy {
-        .mat-form-field-infix {
-          align-self: center;
-        }
-      }
-
-      .mat-input-element {
-        caret-color: currentColor;
-      }
-
-      &.mat-hide-underline .mat-form-field-underline {
-        display: none;
-      }
-    }
-
-    .td-search-input-clear {
-      // [flex="none"]
-      flex: 0 0 auto;
-      align-self: center;
-    }
-  }
-}

package/side-sheet/index.d.ts

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

package/side-sheet/side-sheet.scss

@@ -1,68 +0,0 @@
-$padding: 24px !default;
-$max-height: 65vh !default;
-$button-margin: 8px !default;
-
-.td-side-sheet-container {
-  background-color: white;
-  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 20%), 0 16px 24px 2px rgba(0, 0, 0, 14%), 0 6px 30px 5px rgba(0, 0, 0, 12%);
-  display: block;
-  padding: $padding;
-  box-sizing: border-box;
-  overflow: auto;
-  outline: 0;
-  width: 100%;
-  height: 100%;
-  min-height: inherit;
-  max-height: inherit;
-}
-
-.td-side-sheet-wrapper {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.td-side-sheet-content {
-  margin: 0 $padding * -1;
-  padding: 0 $padding;
-  overflow: auto;
-  flex: 1;
-  -webkit-overflow-scrolling: touch;
-}
-
-.td-side-sheet-title {
-  margin: -16px 0 20px;
-  display: flex;
-  align-items: center;
-}
-
-.td-side-sheet-actions {
-  padding: 8px 0;
-  margin: 0 -16px;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  align-items: center;
-  box-sizing: content-box;
-
-  // Pull the actions down to avoid their padding stacking with the dialog's padding.
-  margin-bottom: -$padding;
-
-  &[align='end'] {
-    justify-content: flex-end;
-  }
-
-  &[align='center'] {
-    justify-content: center;
-  }
-
-  .mat-button-base + .mat-button-base,
-  .mat-mdc-button-base + .mat-mdc-button-base {
-    margin-left: $button-margin;
-
-    [dir='rtl'] & {
-      margin-left: 0;
-      margin-right: $button-margin;
-    }
-  }
-}