@covalent/core 0.0.0-COVALENT

package/search/src/search-box/README.md

@@ -0,0 +1,73 @@
+# 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/src/search-input/README.md

@@ -0,0 +1,74 @@
+# 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/side-sheet/README.md

@@ -0,0 +1,64 @@
+# CovalentSideSheet
+
+Main injectable to import and call the `open` method with any TemplateRef or Component
+
+## td-side-sheet-title
+
+`td-side-sheet-title` adds title styling to an element (optional)
+
+## td-side-sheet-close
+
+`td-side-sheet-close` will close the open side sheet on click, enter, etc.
+
+## td-side-sheet-content
+
+`td-side-sheet-content` creates an element to hold the content with margins that follow Material spec and also scroll when the content is larger than the view port
+
+## td-side-sheet-actions
+
+`td-side-sheet-actions` creates a sticky footer that can hold multiple actions (optional)
+
+## Setup
+
+Import the [CovalentSideSheetModule] in your NgModule:
+
+```typescript
+import { CovalentSideSheetModule } from '@covalent/core/side-sheet';
+@NgModule({
+  imports: [
+    CovalentSideSheetModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+## Usage
+
+Basic Example:
+
+```typescript
+import { ExampleSideSheetComponent } from './example.sidebar/example.sidesheet.component';
+import { CovalentSideSheet } from '.@covalent/core/side-sheet';
+
+export class AppComponent {
+  constructor(private sideSheet: CovalentSideSheet) {
+    this.sideSheet.open(ExampleSidebarComponent);
+  }
+}
+```
+
+Example component html content with optional directives to support styling:
+
+```html
+<span td-sidesheet-title>
+  Side Sheet Title
+  <button mat-icon-button td-sidesheet-close>close</button>
+</span>
+<td-side-sheet-content> Sidesheet Content </td-side-sheet-content>
+<td-sidesheet-actions>
+  <button mat-icon-button td-sidesheet-close>close</button>
+  <button mat-icon-button td-sidesheet-close>save</button>
+</td-sidesheet-actions>
+```

package/side-sheet/_side-sheet.theme.scss

@@ -0,0 +1,8 @@
+@mixin td-side-sheet-theme($theme) {
+  $background: map-get($theme, background);
+  $dialog: map-get($background, dialog);
+
+  .td-side-sheet-container {
+    background-color: $dialog;
+  }
+}

package/side-sheet/covalent-core-side-sheet.d.ts

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

package/side-sheet/package.json

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

package/side-sheet/public_api.d.ts

@@ -0,0 +1,5 @@
+export * from './side-sheet.module';
+export * from './side-sheet.config';
+export * from './side-sheet.content-directives';
+export * from './side-sheet-ref';
+export * from './side-sheet';

package/side-sheet/side-sheet-container.d.ts

@@ -0,0 +1,110 @@
+import { AnimationEvent } from '@angular/animations';
+import { ConfigurableFocusTrapFactory, FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
+import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, DomPortal, TemplatePortal } from '@angular/cdk/portal';
+import { ChangeDetectorRef, ComponentRef, ElementRef, EmbeddedViewRef, EventEmitter } from '@angular/core';
+import { CovalentSideSheetConfig } from './side-sheet.config';
+import * as i0 from "@angular/core";
+export declare function _getFocusedElementPierceShadowDom(): HTMLElement | null;
+/**
+ * Base class for the `CovalentSideSheetContainer`. The base class does not implement
+ * animations as these are left to implementers of the side-sheet container.
+ */
+export declare abstract class _CovalentSideSheetContainerBase extends BasePortalOutlet {
+    protected _elementRef: ElementRef;
+    protected _focusTrapFactory: ConfigurableFocusTrapFactory;
+    protected _changeDetectorRef: ChangeDetectorRef;
+    /** The side-sheet configuration. */
+    _config: CovalentSideSheetConfig;
+    private _focusMonitor?;
+    protected _document: Document;
+    /** The portal outlet inside of this container into which the side-sheet content will be loaded. */
+    _portalOutlet: CdkPortalOutlet;
+    /** The class that traps and manages focus within the side-sheet. */
+    private _focusTrap;
+    /** Emits when an animation state changes. */
+    _animationStateChanged: EventEmitter<{
+        state: 'opened' | 'opening' | 'closing' | 'closed';
+        totalTime: number;
+    }>;
+    /** Element that was focused before the side-sheet was opened. Save this to restore upon close. */
+    private _elementFocusedBeforeSideSheetWasOpened;
+    /**
+     * Type of interaction that led to the side-sheet being closed. This is used to determine
+     * whether the focus style will be applied when returning focus to its original location
+     * after the side-sheet is closed.
+     */
+    _closeInteractionType: FocusOrigin | null;
+    /** ID of the element that should be considered as the side-sheet's label. */
+    _ariaLabelledBy: string | null;
+    /** ID for the container DOM element. */
+    _id: string;
+    constructor(_elementRef: ElementRef, _focusTrapFactory: ConfigurableFocusTrapFactory, _changeDetectorRef: ChangeDetectorRef, _document: any, 
+    /** The side-sheet configuration. */
+    _config: CovalentSideSheetConfig, _focusMonitor?: FocusMonitor | undefined);
+    /** Starts the side-sheet exit animation. */
+    abstract _startExitAnimation(): void;
+    /** Initializes the side-sheet container with the attached content. */
+    _initializeWithAttachedContent(): void;
+    /**
+     * Attach a ComponentPortal as content to this side-sheet container.
+     * @param portal Portal to be attached as the side-sheet content.
+     */
+    attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
+    /**
+     * Attach a TemplatePortal as content to this side-sheet container.
+     * @param portal Portal to be attached as the side-sheet content.
+     */
+    attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C>;
+    /**
+     * Attaches a DOM portal to the side-sheet container.
+     * @param portal Portal to be attached.
+     * @deprecated To be turned into a method.
+     */
+    attachDomPortal: (portal: DomPortal) => void;
+    /** Moves focus back into the side-sheet if it was moved out. */
+    _recaptureFocus(): void;
+    /**
+     * Moves the focus inside the focus trap. When autoFocus is not set to 'side-sheet', if focus
+     * cannot be moved then focus will go to the side-sheet container.
+     */
+    protected _trapFocus(): void;
+    /** Restores focus to the element that was focused before the side-sheet opened. */
+    protected _restoreFocus(): void;
+    /** Sets up the focus trap. */
+    private _setupFocusTrap;
+    /** Captures the element that was focused before the side-sheet was opened. */
+    private _capturePreviouslyFocusedElement;
+    /** Focuses the side-sheet container. */
+    private _focusSideSheetContainer;
+    /** Returns whether focus is inside the side-sheet. */
+    private _containsFocus;
+    static ɵfac: i0.ɵɵFactoryDeclaration<_CovalentSideSheetContainerBase, [null, null, null, { optional: true; }, null, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_CovalentSideSheetContainerBase, never, never, {}, {}, never>;
+}
+/**
+ * Internal component that wraps the generated side-sheet content.
+ * This animation below is the only reason for duplicating most of the Material dialog code
+ */
+export declare class CovalentSideSheetContainerComponent extends _CovalentSideSheetContainerBase {
+    /** State of the side-sheet animation. */
+    _state: 'void' | 'enter' | 'exit';
+    tdSideSheetContainerClass: boolean;
+    tabIndex: number;
+    arialModal: boolean;
+    idAttr: string;
+    roleAttr: import("@angular/material/dialog").DialogRole | undefined;
+    arialLabelByAttr: string | null;
+    arialDescribeByAttr: string | null;
+    arialLabelAttr: string | null | undefined;
+    get sideSheetAnimationState(): "enter" | "void" | "exit";
+    onAnimateStart($event: AnimationEvent): void;
+    onAnimateDone($event: AnimationEvent): void;
+    /** Callback, invoked whenever an animation on the host completes. */
+    _onAnimationDone({ toState, totalTime }: AnimationEvent): void;
+    /** Callback, invoked when an animation on the host starts. */
+    _onAnimationStart({ toState, totalTime }: AnimationEvent): void;
+    /** Starts the side-sheet exit animation. */
+    _startExitAnimation(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentSideSheetContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CovalentSideSheetContainerComponent, "td-side-sheet-container", never, {}, {}, never, never>;
+}

package/side-sheet/side-sheet-ref.d.ts

@@ -0,0 +1,10 @@
+import { FocusOrigin } from '@angular/cdk/a11y';
+import { OverlayRef } from '@angular/cdk/overlay';
+import { MatDialogRef, _MatDialogContainerBase } from '@angular/material/dialog';
+export declare class CovalentSideSheetRef<T, R = any> extends MatDialogRef<T, R> {
+    overlayRef: OverlayRef;
+    _containerInstance: _MatDialogContainerBase;
+    readonly id: string;
+    constructor(overlayRef: OverlayRef, _containerInstance: _MatDialogContainerBase, id?: string);
+}
+export declare function _closeSideSheetVia<R>(ref: CovalentSideSheetRef<R>, interactionType: FocusOrigin, result?: R): void;

package/side-sheet/side-sheet.animation.d.ts

@@ -0,0 +1,4 @@
+import { AnimationTriggerMetadata } from '@angular/animations';
+export declare const tdSideSheetAnimations: {
+    readonly sideSheetContainer: AnimationTriggerMetadata;
+};

package/side-sheet/side-sheet.config.d.ts

@@ -0,0 +1,3 @@
+import { MatDialogConfig } from '@angular/material/dialog';
+export declare class CovalentSideSheetConfig<D = any> extends MatDialogConfig<D> {
+}

package/side-sheet/side-sheet.content-directives.d.ts

@@ -0,0 +1,67 @@
+import { OnChanges, OnInit, SimpleChanges, ElementRef } from '@angular/core';
+import { CovalentSideSheet } from './side-sheet';
+import { CovalentSideSheetRef } from './side-sheet-ref';
+import * as i0 from "@angular/core";
+/**
+ * Button that will close the current dialog.
+ */
+export declare class CovalentSideSheetCloseDirective implements OnInit, OnChanges {
+    dialogRef: CovalentSideSheetRef<any>;
+    private _elementRef;
+    private _dialog;
+    /** Screenreader label for the button. */
+    ariaLabel?: string;
+    /** Default to "button" to prevents accidental form submits. */
+    type: 'submit' | 'button' | 'reset';
+    /** Dialog close input. */
+    dialogResult: any;
+    _CovalentSideSheetClose: any;
+    onClick($event: MouseEvent): void;
+    constructor(dialogRef: CovalentSideSheetRef<any>, _elementRef: ElementRef<HTMLElement>, _dialog: CovalentSideSheet);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    _onButtonClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentSideSheetCloseDirective, [{ optional: true; }, null, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CovalentSideSheetCloseDirective, "[td-side-sheet-close], [CovalentSideSheetClose]", ["CovalentSideSheetClose"], { "ariaLabel": "aria-label"; "type": "type"; "dialogResult": "td-side-sheet-close"; "_CovalentSideSheetClose": "CovalentSideSheetClose"; }, {}, never>;
+}
+/**
+ * Title of a side sheet element. Stays fixed to the top of the side sheet when scrolling.
+ */
+export declare class CovalentSideSheetTitleDirective implements OnInit {
+    private _dialogRef;
+    private _elementRef;
+    private _dialog;
+    /** Unique id for the dialog title. If none is supplied, it will be auto-generated. */
+    id: string;
+    tdSideSheetTitle: boolean;
+    idAttr: string;
+    constructor(_dialogRef: CovalentSideSheetRef<any>, _elementRef: ElementRef<HTMLElement>, _dialog: CovalentSideSheet);
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentSideSheetTitleDirective, [{ optional: true; }, null, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CovalentSideSheetTitleDirective, "[td-side-sheet-title], [CovalentSideSheetTitle]", ["CovalentSideSheetTitle"], { "id": "id"; }, {}, never>;
+}
+/**
+ * Scrollable content container of a dialog.
+ */
+export declare class CovalentSideSheetContentDirective {
+    tdSideSheetContent: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentSideSheetContentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CovalentSideSheetContentDirective, "[td-side-sheet-content], td-side-sheet-content, [CovalentSideSheetContent]", never, {}, {}, never>;
+}
+/**
+ * Container for the bottom action buttons in a dialog.
+ * Stays fixed to the bottom when scrolling.
+ */
+export declare class CovalentSideSheetActionsDirective {
+    tdSideSheetActions: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentSideSheetActionsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CovalentSideSheetActionsDirective, "[td-side-sheet-actions], td-side-sheet-actions, [CovalentSideSheetActions]", never, {}, {}, never>;
+}
+/**
+ * Container for the wrapper part of the dialog
+ */
+export declare class CovalentSideSheetWrapperDirective {
+    tdSideSheetWrapper: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentSideSheetWrapperDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CovalentSideSheetWrapperDirective, "[td-side-sheet-wrapper], td-side-sheet-wrapper, [CovalentSideSheetWrapper]", never, {}, {}, never>;
+}

package/side-sheet/side-sheet.d.ts

@@ -0,0 +1,66 @@
+import { InjectionToken, Injector, OnDestroy, TemplateRef, Type } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentType } from '@angular/cdk/portal';
+import { CovalentSideSheetContainerComponent, _CovalentSideSheetContainerBase } from './side-sheet-container';
+import { CovalentSideSheetRef } from './side-sheet-ref';
+import { CovalentSideSheetConfig } from './side-sheet.config';
+import * as i0 from "@angular/core";
+export declare class _CovalentSideSheetBase<C extends _CovalentSideSheetContainerBase> implements OnDestroy {
+    private _overlay;
+    private _injector;
+    private _defaultOptions;
+    private _parentSideSheet;
+    private _sideSheetRefConstructor;
+    private _sideSheetContainerType;
+    private _sideSheetDataToken;
+    private _openSideSheetsAtThisLevel;
+    private readonly _afterAllClosedAtThisLevel;
+    private readonly _afterOpenedAtThisLevel;
+    private _animationStateSubscriptions;
+    private defaultSidebarConfig;
+    constructor(_overlay: Overlay, _injector: Injector, _defaultOptions: CovalentSideSheetConfig | undefined, _parentSideSheet: _CovalentSideSheetBase<C> | undefined, _sideSheetRefConstructor: Type<CovalentSideSheetRef<any>>, _sideSheetContainerType: Type<C>, _sideSheetDataToken: InjectionToken<unknown>);
+    /** Keeps track of the currently-open side-sheets. */
+    get openSideSheets(): CovalentSideSheetRef<unknown>[];
+    open<T, D = unknown, R = unknown>(componentOrTemplateRef: ComponentType<T> | TemplateRef<T>, config?: CovalentSideSheetConfig<D>): CovalentSideSheetRef<T, R>;
+    ngOnDestroy(): void;
+    /**
+     * Closes all of the currently-open side-sheets.
+     */
+    closeAll(): void;
+    private _createOverlay;
+    /**
+     * Attaches a container to a side-sheets's already-created overlay.
+     * @param overlay Reference to the side-sheet's underlying overlay.
+     * @param config The side-sheet configuration.
+     * @returns A promise resolving to a ComponentRef for the attached container.
+     */
+    private _attachSideSheetContainer;
+    /**
+     * Attaches the user-provided component to the already-created side sheet container.
+     * @param componentOrTemplateRef The type of component being loaded into the side-sheet,
+     *     or a TemplateRef to instantiate as the content.
+     * @param dialogContainer Reference to the wrapping side-sheet container.
+     * @param overlayRef Reference to the overlay in which the side-sheet resides.
+     * @param config The side-sheet configuration.
+     * @returns A promise resolving to the CovalentSideSheetRef that should be returned to the user.
+     */
+    private _attachSideSheetContent;
+    private _createInjector;
+    /**
+     * Removes a side sheet from the array of open side sheets.
+     * @param sideSheetRef Side Sheet to be removed.
+     */
+    private _removeOpenSideSheet;
+    /** Closes all of the side-sheet in an array. */
+    private _closeSideSheets;
+    static ɵfac: i0.ɵɵFactoryDeclaration<_CovalentSideSheetBase<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_CovalentSideSheetBase<any>, never, never, {}, {}, never>;
+}
+/**
+ * Service to open Covalent Design side-sheet.
+ */
+export declare class CovalentSideSheet extends _CovalentSideSheetBase<CovalentSideSheetContainerComponent> {
+    constructor(overlay: Overlay, injector: Injector, defaultOptions: CovalentSideSheetConfig, parentSideSheet: CovalentSideSheet);
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentSideSheet, [null, null, { optional: true; }, { optional: true; skipSelf: true; }]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<CovalentSideSheet>;
+}

package/side-sheet/side-sheet.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./side-sheet-container";
+import * as i2 from "./side-sheet.content-directives";
+import * as i3 from "@angular/cdk/portal";
+import * as i4 from "@angular/material/dialog";
+import * as i5 from "@angular/material/core";
+export declare class CovalentSideSheetModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentSideSheetModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentSideSheetModule, [typeof i1.CovalentSideSheetContainerComponent, typeof i2.CovalentSideSheetActionsDirective, typeof i2.CovalentSideSheetCloseDirective, typeof i2.CovalentSideSheetContentDirective, typeof i2.CovalentSideSheetTitleDirective, typeof i2.CovalentSideSheetWrapperDirective], [typeof i3.PortalModule, typeof i4.MatDialogModule, typeof i5.MatCommonModule], [typeof i2.CovalentSideSheetActionsDirective, typeof i2.CovalentSideSheetCloseDirective, typeof i2.CovalentSideSheetContentDirective, typeof i2.CovalentSideSheetTitleDirective, typeof i2.CovalentSideSheetWrapperDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CovalentSideSheetModule>;
+}

package/theming/_all-theme.scss

@@ -0,0 +1,24 @@
+@import '../breadcrumbs/breadcrumbs-theme';
+@import '../common/common-theme';
+@import '../layout/layout-theme';
+@import '../file/file-theme';
+@import '../dialogs/dialog-theme';
+@import '../json-formatter/json-formatter-theme';
+@import '../message/message-theme';
+@import '../side-sheet/side-sheet.theme';
+// import the covalent mixins
+@import '../common/styles/styles';
+@import '../typography/all-typography';
+
+// Create a theme.
+@mixin covalent-theme($theme, $config: null) {
+  @include td-typography($config);
+  @include td-breadcrumbs-theme($theme);
+  @include td-common-theme($theme);
+  @include td-layout-theme($theme);
+  @include td-file-theme($theme);
+  @include td-dialog-theme($theme);
+  @include td-json-formatter-theme($theme);
+  @include td-message-theme($theme);
+  @include td-side-sheet-theme($theme);
+}

package/typography/_all-typography.scss

@@ -0,0 +1,39 @@
+@import '../dialogs/dialog-theme';
+@import '../json-formatter/json-formatter-theme';
+@import '../message/message-theme';
+
+@function td-typography-config(
+  $font-family: '"Roboto", "Helvetica Neue", sans-serif',
+  $headline: td-typography-level(24px, 32px, 400),
+  $title: td-typography-level(20px, 32px, 500),
+  $subheading-2: td-typography-level(16px, 28px, 400),
+  $subheading-1: td-typography-level(15px, 24px, 400),
+  $body-2: td-typography-level(14px, 24px, 500),
+  $body-1: td-typography-level(14px, 20px, 400),
+  $caption: td-typography-level(12px, 20px, 400)
+) {
+  @return (
+    font-family: $font-family,
+    headline: $headline,
+    title: $title,
+    subheading-2: $subheading-2,
+    subheading-1: $subheading-1,
+    body-2: $body-2,
+    body-1: $body-1,
+    caption: $caption
+  );
+}
+
+@mixin td-typography($config: null) {
+  @if $config == null {
+    $config: td-typography-config();
+  }
+
+  body {
+    font-family: td-font-family($config);
+  }
+  @include td-dialog-typography($config);
+  @include td-json-formatter-typography($config);
+  @include td-message-typography($config);
+  @include td-layout-typography($config);
+}

package/user-profile/README.md

@@ -0,0 +1,60 @@
+# td-user-profile
+
+`td-user-profile` element generates user-profile menu to display user information and actions using `mat-list-item` component/directive.
+
+## API Summary
+
+#### Inputs
+
+- name?: string
+  - name of the user.
+- email?: string
+  - email of the user.
+
+## Setup
+
+Import the **[CovalentUserProfileModule]** in your NgModule:
+
+```typescript
+import { CovalentUserProfileModule } from '@covalent/core/user-profile';
+@NgModule({
+  imports: [
+    CovalentUserProfileModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+## Usage
+
+Basic Example:
+
+```html
+<td-user-profile name="daffy duck" email="daffy.duck@teradata.com">
+</td-user-profile>
+```
+
+Example with all inputs and projected content:
+
+`[td-user-info-list]` is used to project content in the mat-list.
+`[td-user-action-list]` is used to project content in the mat-action-list.
+
+```html
+<td-user-profile name="daffy duck" email="daffy.duck@teradata.com">
+  <ng-container td-user-info-list>
+    <mat-list-item>
+      <mat-icon matListAvatar>account_balance</mat-icon>
+      <span matLine>default</span>
+      <span matLine>organization</span>
+    </mat-list-item>
+  </ng-container>
+  <ng-container td-user-action-list>
+    <button mat-list-item>
+      <span matListAvatar></span>
+      <span matLine>Sign out</span>
+    </button>
+  </ng-container>
+</td-user-profile>
+```