@covalent/core 3.1.2-beta.4 → 4.0.0

package/paging/paging-bar.component.d.ts

@@ -1,115 +0,0 @@
-import { EventEmitter, OnInit, ChangeDetectorRef } from '@angular/core';
-import { Dir } from '@angular/cdk/bidi';
-export interface IPageChangeEvent {
-    page: number;
-    maxPage: number;
-    pageSize: number;
-    total: number;
-    fromRow: number;
-    toRow: number;
-}
-export declare class TdPagingBarComponent implements OnInit {
-    private _dir;
-    private _changeDetectorRef;
-    private _pageSize;
-    private _total;
-    private _page;
-    private _fromRow;
-    private _toRow;
-    private _initialized;
-    private _pageLinks;
-    private _pageLinkCount;
-    private _hitEnd;
-    private _hitStart;
-    /**
-     * firstLast?: boolean
-     * Shows or hides the first and last page buttons of the paging bar. Defaults to 'false'
-     */
-    firstLast: boolean;
-    /**
-     * initialPage?: number
-     * Sets starting page for the paging bar. Defaults to '1'
-     */
-    initialPage: number;
-    /**
-     * pageLinkCount?: number
-     * Amount of page navigation links for the paging bar. Defaults to '0'
-     */
-    set pageLinkCount(pageLinkCount: number);
-    get pageLinkCount(): number;
-    /**
-     * pageSize?: number
-     * Selected page size for the pagination. Defaults 50.
-     */
-    set pageSize(pageSize: number);
-    get pageSize(): number;
-    /**
-     * total: number
-     * Total rows for the pagination.
-     */
-    set total(total: number);
-    get total(): number;
-    /**
-     * pageLinks: number[]
-     * Returns the pageLinks in an array
-     */
-    get pageLinks(): number[];
-    /**
-     * range: string
-     * Returns the range of the rows.
-     */
-    get range(): string;
-    /**
-     * page: number
-     * Returns the current page.
-     */
-    get page(): number;
-    /**
-     * page: number
-     * Returns the max page for the current pageSize and total.
-     */
-    get maxPage(): number;
-    /**
-     * change?: function
-     * Method to be executed when page size changes or any button is clicked in the paging bar.
-     * Emits an [IPageChangeEvent] implemented object.
-     */
-    change: EventEmitter<IPageChangeEvent>;
-    get isRTL(): boolean;
-    constructor(_dir: Dir, _changeDetectorRef: ChangeDetectorRef);
-    ngOnInit(): void;
-    /**
-     * navigateToPage?: function
-     * Navigates to a specific valid page. Returns 'true' if page is valid, else 'false'.
-     */
-    navigateToPage(page: number): boolean;
-    /**
-     * firstPage?: function
-     * Navigates to the first page. Returns 'true' if page is valid, else 'false'.
-     */
-    firstPage(): boolean;
-    /**
-     * prevPage?: function
-     * Navigates to the previous page. Returns 'true' if page is valid, else 'false'.
-     */
-    prevPage(): boolean;
-    /**
-     * nextPage?: function
-     * Navigates to the next page. Returns 'true' if page is valid, else 'false'.
-     */
-    nextPage(): boolean;
-    /**
-     * lastPage?: function
-     * Navigates to the last page. Returns 'true' if page is valid, else 'false'.
-     */
-    lastPage(): boolean;
-    isMinPage(): boolean;
-    isMaxPage(): boolean;
-    private _calculateRows;
-    /**
-     * _calculatePageLinks?: function
-     * Calculates the page links that should be shown to the user based on the current state of the paginator
-     */
-    private _calculatePageLinks;
-    private _handleOnChange;
-}

package/paging/paging-bar.component.scss

@@ -1,23 +0,0 @@
-:host {
-  display: block;
-  .td-paging-bar {
-    height: 48px;
-    // [layout]
-    box-sizing: border-box;
-    display: flex;
-    // [layout="row"]
-    flex-direction: row;
-    // [layout-align="end center"]
-    align-items: center;
-    align-content: center;
-    max-width: 100%;
-    justify-content: flex-end;
-    ::ng-deep > * {
-      margin: 0 10px;
-    }
-    [mat-icon-button] {
-      font-size: 12px;
-      font-weight: normal;
-    }
-  }
-}

package/paging/paging.module.d.ts

@@ -1,2 +0,0 @@
-export declare class CovalentPagingModule {
-}

package/paging/public-api.d.ts

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

package/sidesheet/README.md

@@ -1,68 +0,0 @@
-# td-sidesheet
-
-Wrap the sidesheet elements you need in a `td-sidesheet` element.
-
-## td-sidesheet-header
-
-`td-sidesheet-header` creates a header that can hold a title and an action (optional)
-
-## td-sidesheet-title
-
-`td-sidesheet-title` adds a title to the header (optional)
-
-## td-sidesheet-header-action
-
-`td-sidesheet-header-action` creates an action in the header (optional)
-
-## td-sidesheet-content
-
-`td-sidesheet-content` creates an element to hold the content with margins that follow Material spec
-
-## td-sidesheet-actions
-
-`td-sidesheet-actions` creates a sticky footer that can hold multiple actions (optional)
-
-## Setup
-
-Import the [CovalentSidesheetModule] in your NgModule:
-
-```typescript
-import { CovalentSidesheetModule } from '@covalent/core/sidesheet';
-@NgModule({
-  imports: [
-    CovalentSidesheetModule,
-    ...
-  ],
-  ...
-})
-export class MyModule {}
-```
-
-## Usage
-
-Basic Example:
-
-```html
-<td-sidesheet>
-  Sidesheet Content
-</td-sidesheet>
-```
-
-Example with optional components:
-
-```html
-<td-sidesheet>
-  <td-sidesheet-header>
-    <td-sidesheet-title>Sidesheet Title</td-sidesheet-title>
-    <button mat-icon-button td-sidesheet-header-action>
-      ... add button for sidesheet action
-    </button>
-  </td-sidesheet-header>
-  <td-sidesheet-content>
-    Sidesheet Content
-  </td-sidesheet-content>
-  <td-sidesheet-actions>
-    ... add button elements
-  </td-sidesheet-actions>
-</td-sidesheet>  
-```

package/sidesheet/covalent-core-sidesheet.d.ts

@@ -1,4 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './index';

package/sidesheet/covalent-core-sidesheet.metadata.json

@@ -1 +0,0 @@
-{"__symbolic":"module","version":4,"metadata":{"CovalentSidesheetModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":21,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":22,"character":12},{"__symbolic":"reference","module":"@angular/material/divider","name":"MatDividerModule","line":22,"character":26}],"declarations":[[{"__symbolic":"reference","name":"TdSidesheetComponent"},{"__symbolic":"reference","name":"TdSidesheetHeaderComponent"},{"__symbolic":"reference","name":"TdSidesheetContentDirective"},{"__symbolic":"reference","name":"TdSidesheetTitleDirective"},{"__symbolic":"reference","name":"TdSidesheetActionsDirective"}]],"exports":[[{"__symbolic":"reference","name":"TdSidesheetComponent"},{"__symbolic":"reference","name":"TdSidesheetHeaderComponent"},{"__symbolic":"reference","name":"TdSidesheetContentDirective"},{"__symbolic":"reference","name":"TdSidesheetTitleDirective"},{"__symbolic":"reference","name":"TdSidesheetActionsDirective"}]]}]}],"members":{}},"TdSidesheetContentDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"td-sidesheet-content"}]}],"members":{}},"TdSidesheetTitleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":7,"character":1},"arguments":[{"selector":"td-sidesheet-title"}]}],"members":{}},"TdSidesheetActionsDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":12,"character":1},"arguments":[{"selector":"td-sidesheet-actions","host":{"[class.align-end]":"align === \"end\"","[class.align-start]":"align === \"start\"","$quoted$":["[class.align-end]","[class.align-start]"]}}]}],"members":{"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}]}},"TdSidesheetHeaderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"selector":"td-sidesheet-header","template":"<ng-content select=\"td-sidesheet-title\"></ng-content>\n<ng-content select=\"[mat-icon-button][td-sidesheet-header-action]\"></ng-content>\n"}]}],"members":{}},"TdSidesheetComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":30,"character":1},"arguments":[{"selector":"td-sidesheet","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":35,"character":17},"member":"None"},"template":"<ng-content select=\"td-sidesheet-header\"></ng-content>\n<ng-template [ngIf]=\"headerExists\">\n  <mat-divider></mat-divider>\n</ng-template>\n<div class=\"td-sidesheet-content-wrapper\">\n  <ng-content></ng-content>\n</div>\n<ng-template [ngIf]=\"actionsExist\">\n  <mat-divider></mat-divider>\n</ng-template>\n<ng-content select=\"td-sidesheet-actions\"></ng-content>\n","styles":["td-sidesheet,td-sidesheet td-sidesheet-header{box-sizing:border-box;display:-ms-flexbox;display:flex}td-sidesheet{-ms-flex-direction:column;flex-direction:column}td-sidesheet td-sidesheet-header{-ms-flex-direction:row;flex-direction:row}td-sidesheet{height:100%;margin:0;min-height:100%;width:100%}td-sidesheet td-sidesheet-header{-ms-flex-align:center;-ms-flex-line-pack:center;-ms-flex-pack:start;align-content:center;align-items:center;justify-content:flex-start;max-width:100%}td-sidesheet .mat-divider-horizontal{position:static!important}td-sidesheet td-sidesheet-title{-ms-flex:1;flex:1}td-sidesheet td-sidesheet-header{font-size:18px;padding:20px 16px;width:100%}td-sidesheet td-sidesheet-header .mat-button-focus-overlay{background-color:rgba(0,0,0,0)!important}td-sidesheet td-sidesheet-header .mat-icon-button{height:24px;line-height:21px;width:24px}td-sidesheet td-sidesheet-actions{display:block;padding:8px}td-sidesheet .td-sidesheet-content-wrapper{-ms-flex:1;flex:1;overflow-y:auto;position:relative}td-sidesheet td-sidesheet-content{display:block;padding:16px}td-sidesheet-content>:first-child,td-sidesheet>:first-child{margin-top:0}td-sidesheet-content>:last-child,td-sidesheet>:last-child{margin-bottom:0}"]}]}],"members":{"headerExists":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":38,"character":3},"arguments":[{"__symbolic":"reference","name":"TdSidesheetHeaderComponent"}]}]}],"actionsExist":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":39,"character":3},"arguments":[{"__symbolic":"reference","name":"TdSidesheetActionsDirective"}]}]}]}}},"origins":{"CovalentSidesheetModule":"./sidesheet.module","TdSidesheetContentDirective":"./sidesheet.component","TdSidesheetTitleDirective":"./sidesheet.component","TdSidesheetActionsDirective":"./sidesheet.component","TdSidesheetHeaderComponent":"./sidesheet.component","TdSidesheetComponent":"./sidesheet.component"},"importAs":"@covalent/core/sidesheet"}

package/sidesheet/index.d.ts

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

package/sidesheet/package.json

@@ -1,11 +0,0 @@
-{
-  "main": "../bundles/covalent-core-sidesheet.umd.js",
-  "module": "../fesm2015/covalent-core-sidesheet.js",
-  "es2015": "../fesm2015/covalent-core-sidesheet.js",
-  "esm2015": "../esm2015/sidesheet/covalent-core-sidesheet.js",
-  "fesm2015": "../fesm2015/covalent-core-sidesheet.js",
-  "typings": "covalent-core-sidesheet.d.ts",
-  "metadata": "covalent-core-sidesheet.metadata.json",
-  "sideEffects": false,
-  "name": "@covalent/core/sidesheet"
-}

package/sidesheet/public-api.d.ts

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

package/sidesheet/sidesheet.component.d.ts

@@ -1,13 +0,0 @@
-export declare class TdSidesheetContentDirective {
-}
-export declare class TdSidesheetTitleDirective {
-}
-export declare class TdSidesheetActionsDirective {
-    align: 'start' | 'end';
-}
-export declare class TdSidesheetHeaderComponent {
-}
-export declare class TdSidesheetComponent {
-    headerExists: TdSidesheetHeaderComponent;
-    actionsExist: TdSidesheetActionsDirective;
-}

package/sidesheet/sidesheet.component.scss

@@ -1,101 +0,0 @@
-$td-sidesheet-side-padding: 16px !default;
-$td-sidesheet-top-padding: 20px !default;
-
-// base style for [layout]
-%layout {
-  box-sizing: border-box;
-  display: flex;
-}
-
-// base stle for [layout="column"]
-%layout-column {
-  @extend %layout;
-
-  flex-direction: column;
-}
-
-// base stle for [layout="column"]
-%layout-row {
-  @extend %layout;
-
-  flex-direction: row;
-}
-
-// base style for [layout-fill]
-%layout-fill {
-  margin: 0;
-  width: 100%;
-  min-height: 100%;
-  height: 100%;
-}
-
-// base style for [layout-align="start center"]
-%layout-align-start-center {
-  align-items: center;
-  align-content: center;
-  max-width: 100%;
-  justify-content: flex-start;
-}
-
-td-sidesheet {
-  @extend %layout-column, %layout-fill;
-
-  .mat-divider-horizontal {
-    position: static !important;
-  }
-
-  td-sidesheet-title {
-    flex: 1;
-  }
-
-  // HEADER STYLES
-  td-sidesheet-header {
-    @extend %layout-row, %layout-align-start-center;
-
-    width: 100%;
-    padding: $td-sidesheet-top-padding $td-sidesheet-side-padding;
-    font-size: 18px;
-
-    .mat-button-focus-overlay {
-      background-color: transparent !important;
-    }
-    .mat-icon-button {
-      width: 24px;
-      height: 24px;
-      line-height: 21px;
-    }
-  }
-
-  // ACTION STYLES
-  td-sidesheet-actions {
-    padding: ($td-sidesheet-side-padding / 2);
-    display: block;
-  }
-
-  // CONTENT STYLES
-  .td-sidesheet-content-wrapper {
-    flex: 1;
-    // [.mat-content]
-    position: relative;
-    overflow-y: auto;
-  }
-  td-sidesheet-content {
-    display: block;
-    padding: $td-sidesheet-side-padding;
-  }
-}
-
-// FIRST/LAST CHILD ADJUSTMENTS
-// top els in td-sidesheet-content and td-sidesheet can't have their default margin-tops (e.g. <p> tags)
-// or they'll incorrectly add to card's top padding
-td-sidesheet > :first-child,
-td-sidesheet-content > :first-child {
-  margin-top: 0;
-}
-
-// last els in td-sidesheet-content and td-sidesheet can't have their default margin-bottoms (e.g. <p> tags)
-// or they'll incorrectly add to card's bottom padding
-td-sidesheet > :last-child,
-td-sidesheet-content > :last-child {
-  margin-bottom: 0;
-}

package/sidesheet/sidesheet.module.d.ts

@@ -1,2 +0,0 @@
-export declare class CovalentSidesheetModule {
-}

package/steps/README.md

@@ -1,159 +0,0 @@
-# td-steps (horizontal and vertical)
-
-selector : `td-steps` 
-
-Element generates a stepper to be used in a wizard flow.
-
-Simply wrap the `<td-step>` elements you need with a `<td-steps>` element.
-
-<br/>
-
-## API Summary
-
-#### Inputs
-
-+ mode?: StepMode or ["vertical" | "horizontal"]
-  + Defines if the mode of the [TdStepsComponent]. Defaults to [StepMode.Vertical | "vertical"]
-
-#### Outputs
-
-+ stepChange?: function($event)
-  + Method to be executed when [onStepChange] event is emitted. Emits an [IStepChangeEvent] implemented object.
-
-## Usage
-
-Example
-
-HTML
-```html
-<td-steps (stepChange)="change($event)" mode="'vertical'|'horizontal'">
-  <td-step>
-    ...
-  </td-step>
-  ...
-</td-steps>
-```
-
-TypeScript
-
-```typescript
-import { IStepChangeEvent } from '@covalent/core/steps';
-...
-})
-export class Demo {
-  change(event: IStepChangeEvent): void {
-    ...
-  };
-}
-```
-
-# td-step
-
-Selector: `td-step` 
-
-Add as many `<td-step>` elements you need wrapped by a `<td-steps>` element for control.
-
-Uses StepState enum to define step state value [StepState.None, StepState.Required and StepState.Complete].
-
-Enum values can be replaced with strings ["none", "required" and "complete"].
-
-Note: Components in Angular do not have 2-way binding, so the active variable might be off sync with its [TdStepComponent] sometimes.
-
-You can keep it in sync with the (activated/deactivated) events if there is a need to do it.
-
-## API Summary
-
-#### Inputs
-
-+ label?: string
-  + Sets label of [TdStepComponent] header. Defaults to "Step #"
-+ sublabel?: string
-  + Sets sublabel of [TdStepComponent] header.
-+ label?: string
-  + Sets label of [TdStepComponent] header. Defaults to "Step #"
-+ active?: boolean
-  + Toggles [TdStepComponent] between active/deactive.
-+ disabled?: boolean
-  + Disables icon and header, blocks click event and sets [TdStepComponent] to deactive if "true".
-+ state?: StepState or ["none" | "required" | "complete"]
-  + Sets state of [TdStepComponent] depending on value. Defaults to [StepState.None | "none"]
-+ disableRipple?: boolean
-  + Whether the ripple effect for this component is disabled
-
-#### Outputs
-
-+ activated?: function()
-  + Event emitted when [TdStepComponent] is activated.
-+ deactivated?: function()
-  + Event emitted when [TdStepComponent] is deactivated.
-
-#### Methods
-
-+ toggle?: function()
-  + Toggle active state of [TdStepComponent]. Retuns "true" if successful, else "false". Can be accessed by referencing element in local variable.
-+ open?: function()
-  + Opens [TdStepComponent]. Retuns "true" if successful, else "false". Can be accessed by referencing element in local variable.
-+ close?: function()
-  + Closes [TdStepComponent]. Retuns "true" if successful, else "false". Can be accessed by referencing element in local variable.
-
-## Usage
-
-Example
-
-HTML
-```html
-<td-step #step label="Label" sublabel="Sublabel" [active]="active" [disabled]="disabled" [state]="state" (activated)="activeEvent()" (deactivated)="deactiveEvent()" [disableRipple]="false">
-  <ng-template td-step-label>
-    ... add label content (if not used, falls back to [label] input)
-  </ng-template>
-  ... add content that will be shown when the step is "active"
-  <ng-template td-step-actions>
-    <button (click)="step.close()">Close</button>
-    ... add button elements for the step content (optional)
-  </ng-template>
-  <ng-template td-step-summary>
-    ... add summary that will be shown when step in is "complete" state (optional)
-  </ng-template>
-</td-step>
-```
-
-TypeScript
-
-```typescript
-import { StepState } from '@covalent/core/steps';
-...
-})
-export class Demo {
-
-  active: boolean = false;
-  disabled: boolean = false;
-  state: StepState = StepState.Required; // or state: string = "required";
-
-  activeEvent(): void {
-    ...
-  };
-
-  deactiveEvent(): void {
-    ...
-  };
-}
-```
-
-
-## Setup
-
-Import the [CovalentStepsModule] in your NgModule:
-
-```typescript
-import { CovalentStepsModule } from '@covalent/core/steps';
-@NgModule({
-  imports: [
-    CovalentStepsModule,
-    ...
-  ],
-  ...
-})
-export class MyModule {}
-```
-
-

package/steps/_steps-theme.scss

@@ -1,108 +0,0 @@
-@import '../common/styles/variables';
-@import '../common/styles/theme-functions';
-@import '../common/styles/typography-functions';
-
-@mixin td-steps-typography($config) {
-  .td-step-label {
-    font: {
-      family: td-font-family($config);
-      size: td-font-size($config, body-2);
-      weight: td-font-weight($config, body-2);
-    }
-  }
-  .td-step-sublabel {
-    font: {
-      family: td-font-family($config);
-      size: td-font-size($config, body-1);
-    }
-
-    line-height: td-line-height($config, body-1);
-  }
-}
-
-@mixin td-steps-theme($theme) {
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $foreground: map-get($theme, foreground);
-  $background: map-get($theme, background);
-  .td-steps {
-    .td-step-content,
-    .td-step-summary,
-    .td-step-actions {
-      margin: $margin;
-    }
-    // steps
-    .td-horizontal-line {
-      border-bottom-color: mat-color($foreground, divider);
-    }
-    .td-vertical-line {
-      border-left-color: mat-color($foreground, divider);
-    }
-    // header
-    .td-step-link {
-      &:focus:not(.mat-disabled),
-      &:hover:not(.mat-disabled) {
-        .td-step-header {
-          background: mat-color($background, 'hover');
-        }
-      }
-    }
-    .td-step-header {
-      &.mat-disabled {
-        cursor: default;
-      }
-      &:focus:not(.mat-disabled),
-      &:hover:not(.mat-disabled) {
-        background: mat-color($background, 'hover');
-      }
-      .td-step-label-wrapper {
-        .td-step-label {
-          color: mat-color($foreground, text);
-        }
-        .td-step-sublabel {
-          color: mat-color($foreground, secondary-text);
-        }
-        &.mat-inactive {
-          &,
-          & * {
-            color: mat-color($foreground, disabled);
-          }
-        }
-        &.mat-warn {
-          &,
-          & * {
-            color: mat-color($warn);
-          }
-        }
-      }
-      .mat-complete {
-        color: mat-color($accent);
-      }
-    }
-    .td-circle {
-      color: mat-color($background, card);
-      &.mat-active {
-        background-color: mat-color($accent);
-      }
-      &.mat-inactive {
-        background-color: mat-color($foreground, disabled);
-      }
-      & mat-icon {
-        fill: mat-color($foreground, text);
-      }
-    }
-    .td-triangle {
-      color: mat-color($warn);
-    }
-    .td-edit-icon {
-      color: mat-color($foreground, icon);
-    }
-
-    .td-step-header-pagination-chevron {
-      border-color: mat-color($foreground, text);
-    }
-    .td-step-header-pagination-disabled .td-step-header-pagination-chevron {
-      border-color: mat-color($foreground, disabled-text);
-    }
-  }
-}

package/steps/covalent-core-steps.d.ts

@@ -1,4 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './index';