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

package/search/search-input/search-input.component.d.ts

@@ -1,17 +1,17 @@
 import { OnInit, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
 import { Dir } from '@angular/cdk/bidi';
 import { MatInput } from '@angular/material/input';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
-import { IControlValueAccessor } from '@covalent/core/common';
 import * as i0 from "@angular/core";
 export declare class TdSearchInputBase {
     _changeDetectorRef: ChangeDetectorRef;
     constructor(_changeDetectorRef: ChangeDetectorRef);
 }
-export declare const _TdSearchInputMixinBase: (new (...args: any[]) => IControlValueAccessor) & typeof TdSearchInputBase;
-export declare class TdSearchInputComponent extends _TdSearchInputMixinBase implements IControlValueAccessor, OnInit {
+export declare class TdSearchInputComponent implements ControlValueAccessor, OnInit {
     private _dir;
-    _input: MatInput;
+    private _changeDetectorRef;
+    _input?: MatInput;
     /**
      * appearance?: MatFormFieldAppearance
      * Appearance style for the underlying input component.
@@ -38,6 +38,7 @@ export declare class TdSearchInputComponent extends _TdSearchInputMixinBase impl
      * Defaults to 'cancel' icon.
      */
     clearIcon: string;
+    value?: unknown;
     /**
      * searchDebounce: function($event)
      * Event emitted after the [debounce] timeout.
@@ -57,10 +58,13 @@ export declare class TdSearchInputComponent extends _TdSearchInputMixinBase impl
      * blur: function()
      * Event emitted after the blur event has been called in underlying input.
      */
-    blur: EventEmitter<void>;
+    blurSearch: EventEmitter<void>;
     get isRTL(): boolean;
     constructor(_dir: Dir, _changeDetectorRef: ChangeDetectorRef);
     ngOnInit(): void;
+    writeValue(value: unknown): void;
+    registerOnChange(): void;
+    registerOnTouched(): void;
     /**
      * Method to focus to underlying input.
      */
@@ -74,5 +78,5 @@ export declare class TdSearchInputComponent extends _TdSearchInputMixinBase impl
     clearSearch(): void;
     private _searchTermChanged;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdSearchInputComponent, [{ optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TdSearchInputComponent, "td-search-input", never, { "value": "value"; "appearance": "appearance"; "showUnderline": "showUnderline"; "debounce": "debounce"; "placeholder": "placeholder"; "clearIcon": "clearIcon"; }, { "searchDebounce": "searchDebounce"; "search": "search"; "clear": "clear"; "blur": "blur"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdSearchInputComponent, "td-search-input", never, { "appearance": "appearance"; "showUnderline": "showUnderline"; "debounce": "debounce"; "placeholder": "placeholder"; "clearIcon": "clearIcon"; "value": "value"; }, { "searchDebounce": "searchDebounce"; "search": "search"; "clear": "clear"; "blurSearch": "blurSearch"; }, never, never>;
 }

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

@@ -42,7 +42,7 @@ Basic Example:
 import { ExampleSideSheetComponent } from './example.sidebar/example.sidesheet.component';
 import { CovalentSideSheet } from '.@covalent/core/side-sheet';
 
-export class AppComponent {  
+export class AppComponent {
   constructor(private sideSheet: CovalentSideSheet) {
     this.sideSheet.open(ExampleSidebarComponent);
   }
@@ -54,11 +54,9 @@ 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>  
+  <button mat-icon-button td-sidesheet-close>close</button>
 </span>
-<td-side-sheet-content>
-  Sidesheet Content
-</td-side-sheet-content>
+<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>

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

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

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

@@ -1,5 +1,5 @@
 import { AnimationEvent } from '@angular/animations';
-import { FocusMonitor, FocusOrigin, FocusTrapFactory } from '@angular/cdk/a11y';
+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';
@@ -11,7 +11,7 @@ export declare function _getFocusedElementPierceShadowDom(): HTMLElement | null;
  */
 export declare abstract class _CovalentSideSheetContainerBase extends BasePortalOutlet {
     protected _elementRef: ElementRef;
-    protected _focusTrapFactory: FocusTrapFactory;
+    protected _focusTrapFactory: ConfigurableFocusTrapFactory;
     protected _changeDetectorRef: ChangeDetectorRef;
     /** The side-sheet configuration. */
     _config: CovalentSideSheetConfig;
@@ -38,9 +38,9 @@ export declare abstract class _CovalentSideSheetContainerBase extends BasePortal
     _ariaLabelledBy: string | null;
     /** ID for the container DOM element. */
     _id: string;
-    constructor(_elementRef: ElementRef, _focusTrapFactory: FocusTrapFactory, _changeDetectorRef: ChangeDetectorRef, _document: any, 
+    constructor(_elementRef: ElementRef, _focusTrapFactory: ConfigurableFocusTrapFactory, _changeDetectorRef: ChangeDetectorRef, _document: any, 
     /** The side-sheet configuration. */
-    _config: CovalentSideSheetConfig, _focusMonitor?: FocusMonitor);
+    _config: CovalentSideSheetConfig, _focusMonitor?: FocusMonitor | undefined);
     /** Starts the side-sheet exit animation. */
     abstract _startExitAnimation(): void;
     /** Initializes the side-sheet container with the attached content. */
@@ -85,15 +85,26 @@ export declare abstract class _CovalentSideSheetContainerBase extends BasePortal
  * 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 CovalentSideSheetContainer extends _CovalentSideSheetContainerBase {
+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<CovalentSideSheetContainer, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CovalentSideSheetContainer, "td-side-sheet-container", never, {}, {}, never, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentSideSheetContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CovalentSideSheetContainerComponent, "td-side-sheet-container", never, {}, {}, never, never>;
 }

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

@@ -5,57 +5,63 @@ import * as i0 from "@angular/core";
 /**
  * Button that will close the current dialog.
  */
-export declare class CovalentSideSheetClose implements OnInit, OnChanges {
+export declare class CovalentSideSheetCloseDirective implements OnInit, OnChanges {
     dialogRef: CovalentSideSheetRef<any>;
     private _elementRef;
     private _dialog;
     /** Screenreader label for the button. */
-    ariaLabel: string;
+    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<CovalentSideSheetClose, [{ optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CovalentSideSheetClose, "[td-side-sheet-close], [CovalentSideSheetClose]", ["CovalentSideSheetClose"], { "ariaLabel": "aria-label"; "type": "type"; "dialogResult": "td-side-sheet-close"; "_CovalentSideSheetClose": "CovalentSideSheetClose"; }, {}, never>;
+    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 CovalentSideSheetTitle implements OnInit {
+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<CovalentSideSheetTitle, [{ optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CovalentSideSheetTitle, "[td-side-sheet-title], [CovalentSideSheetTitle]", ["CovalentSideSheetTitle"], { "id": "id"; }, {}, never>;
+    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 CovalentSideSheetContent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentSideSheetContent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CovalentSideSheetContent, "[td-side-sheet-content], td-side-sheet-content, [CovalentSideSheetContent]", never, {}, {}, never>;
+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 CovalentSideSheetActions {
-    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentSideSheetActions, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CovalentSideSheetActions, "[td-side-sheet-actions], td-side-sheet-actions, [CovalentSideSheetActions]", never, {}, {}, never>;
+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 CovalentSideSheetWrapper {
-    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentSideSheetWrapper, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CovalentSideSheetWrapper, "[td-side-sheet-wrapper], td-side-sheet-wrapper, [CovalentSideSheetWrapper]", never, {}, {}, never>;
+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

@@ -1,7 +1,7 @@
 import { InjectionToken, Injector, OnDestroy, TemplateRef, Type } from '@angular/core';
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentType } from '@angular/cdk/portal';
-import { CovalentSideSheetContainer, _CovalentSideSheetContainerBase } from './side-sheet-container';
+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";
@@ -59,7 +59,7 @@ export declare class _CovalentSideSheetBase<C extends _CovalentSideSheetContaine
 /**
  * Service to open Covalent Design side-sheet.
  */
-export declare class CovalentSideSheet extends _CovalentSideSheetBase<CovalentSideSheetContainer> {
+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

@@ -6,6 +6,6 @@ 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.CovalentSideSheetContainer, typeof i2.CovalentSideSheetActions, typeof i2.CovalentSideSheetClose, typeof i2.CovalentSideSheetContent, typeof i2.CovalentSideSheetTitle, typeof i2.CovalentSideSheetWrapper], [typeof i3.PortalModule, typeof i4.MatDialogModule, typeof i5.MatCommonModule], [typeof i2.CovalentSideSheetActions, typeof i2.CovalentSideSheetClose, typeof i2.CovalentSideSheetContent, typeof i2.CovalentSideSheetTitle, typeof i2.CovalentSideSheetWrapper]>;
+    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>;
 }