@covalent/core 0.0.0-COVALENT

package/dialogs/README.md

@@ -0,0 +1,223 @@
+# TdDialogService
+
+Service provided with methods that wrap the @angular/material [MatDialog] service and provide an easier experience for simple dialogs.
+
+Note: if no [ViewContainerRef] is provided, [TdDialogService] will throw an error.
+
+<br/>
+
+## API Summary
+
+#### Methods
+
+- openAlert: function(IAlertConfig): MatDialogRef<TdAlertDialogComponent>
+  - Opens an alert dialog with the provided config.
+- openConfirm: function(IConfirmConfig): MatDialogRef<TdConfirmDialogComponent>
+  - Opens a confirm dialog with the provided config.
+- openPrompt: function(IPromptConfig): MatDialogRef<TdPromptDialogComponent>
+  - Opens a prompt dialog with the provided config.
+- open: function<T>(component: ComponentType<T>, config: MatDialogConfig): MatDialogRef<T>
+  - Wrapper function over the open() method in MatDialog. Opens a modal dialog containing the given component.
+- openDraggable: function<T>(IDraggableConfig<T>): MatDialogRef<T>
+  - Opens a draggable dialog containing the given component
+- closeAll: function()
+  - Wrapper function over the closeAll() method in MatDialog. Closes all of the currently-open dialogs.
+
+## Usage
+
+TypeScript
+
+```typescript
+import { ViewContainerRef } from '@angular/core';
+import { TdDialogService } from '@covalent/core/dialogs';
+...
+})
+export class Demo {
+  constructor(private _dialogService: TdDialogService,
+              private _viewContainerRef: ViewContainerRef) {
+    ...
+  }
+
+  openAlert(): void {
+    this._dialogService.openAlert({
+      message: 'This is how simple it is to create an alert with this wrapper service.',
+      disableClose: true | false, // defaults to false
+      viewContainerRef: this._viewContainerRef, //OPTIONAL
+      title: 'Alert', //OPTIONAL, hides if not provided
+      closeButton: 'Close', //OPTIONAL, defaults to 'CLOSE'
+      width: '400px', //OPTIONAL, defaults to 400px
+    });
+  }
+
+  openConfirm(): void {
+    this._dialogService.openConfirm({
+      message: 'This is how simple it is to create a confirm with this wrapper service. Do you agree?',
+      disableClose: true | false, // defaults to false
+      viewContainerRef: this._viewContainerRef, //OPTIONAL
+      title: 'Confirm', //OPTIONAL, hides if not provided
+      cancelButton: 'Disagree', //OPTIONAL, defaults to 'CANCEL'
+      acceptButton: 'Agree', //OPTIONAL, defaults to 'ACCEPT'
+      isDestructive: false, //OPTIONAL, defaults to false
+      width: '500px', //OPTIONAL, defaults to 400px
+    }).afterClosed().subscribe((accept: boolean) => {
+      if (accept) {
+        // DO SOMETHING
+      } else {
+        // DO SOMETHING ELSE
+      }
+    });
+  }
+
+  openPrompt(): void {
+    this._dialogService.openPrompt({
+      message: 'This is how simple it is to create a prompt with this wrapper service. Prompt something.',
+      disableClose: true | false, // defaults to false
+      viewContainerRef: this._viewContainerRef, //OPTIONAL
+      title: 'Prompt', //OPTIONAL, hides if not provided
+      value: 'Prepopulated value', //OPTIONAL
+      cancelButton: 'Cancel', //OPTIONAL, defaults to 'CANCEL'
+      acceptButton: 'Ok', //OPTIONAL, defaults to 'ACCEPT'
+      width: '400px', //OPTIONAL, defaults to 400px
+    }).afterClosed().subscribe((newValue: string) => {
+      if (newValue) {
+        // DO SOMETHING
+      } else {
+        // DO SOMETHING ELSE
+      }
+    });
+  }
+
+  openDraggable(): void {
+    this._dialogService.openDraggable({
+      component: DraggableDemoComponent,
+      config: { height: '300px' },
+      // CSS selectors of element(s) inside the component meant to be drag handle(s)
+      dragHandleSelectors: ['.drag-handle'],
+      // Class that will be added to the component signifying drag-ability
+      draggableClass: 'custom-class',
+    });
+  }
+}
+```
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-draggable-demo',
+  template: `
+    <h2>Draggable dialog</h2>
+    <p>Draggable via the drag handle</p>
+    <button mat-icon-button class="drag-handle">
+      <mat-icon>drag_handle</mat-icon>
+    </button>
+  `,
+})
+export class DraggableDemoComponent {}
+```
+
+## Setup
+
+Import the [CovalentDialogsModule] in your NgModule:
+
+```typescript
+import { CovalentDialogsModule } from '@covalent/core/dialogs';
+
+@NgModule({
+  imports: [
+    CovalentDialogsModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+After that, just inject [TdDialogService] and use it for your dialogs.
+
+# ResizableDraggableDialog
+
+A utility to make a draggable dialog resizable.
+
+## Usage
+
+```ts
+ constructor(
+    private _dialogService: TdDialogService,
+    @Inject(DOCUMENT) private _document: any,
+    private _renderer2: Renderer2,
+  ) {}
+```
+
+```ts
+const {
+  matDialogRef,
+  dragRefSubject,
+}: IDraggableRefs<DraggableResizableDialogComponent> = this._dialogService.openDraggable(
+  {
+    component: DraggableResizableDialogComponent,
+    // CSS selectors of element(s) inside the component meant to be drag handle(s)
+    dragHandleSelectors: ['.drag-handle'],
+  }
+);
+
+let resizableDraggableDialog: ResizableDraggableDialog;
+dragRefSubject.subscribe((dragRf: DragRef) => {
+  resizableDraggableDialog = new ResizableDraggableDialog(
+    this._document,
+    this._renderer2,
+    matDialogRef,
+    dragRf
+  );
+});
+
+// Detach resize-ability event listeners after dialog closes
+matDialogRef.afterClosed().subscribe(() => resizableDraggableDialog.detach());
+```
+
+# TdWindowDialogComponent
+
+A component that can be utilized to create a dialog with a toolbar
+
+## API Summary
+
+#### Inputs
+
+- title: string
+  - Title that appears in toolbar
+- closeLabel: string
+  - Label to be used on close button
+- toolbarColor: ThemePalette
+  - Toolbar color
+
+#### Outputs
+
+- closed: string
+  - Emitted when close button is clicked
+
+## Usage
+
+```ts
+@Component({
+  template: `
+    <td-window-dialog
+      [title]="'Title'"
+      [toolbarColor]="'accent'"
+      [closeLabel]="'Close'"
+      (closed)="closed.emit()"
+    >
+      <p>Comes with a handy toolbar</p>
+    </td-window-dialog>
+  `,
+})
+export class DraggableResizableWindowDialogComponent {
+  @Output() closed: EventEmitter<void> = new EventEmitter();
+}
+```
+
+```ts
+const matDialogRef: MatDialogRef<DraggableResizableWindowDialogComponent> =
+  this._dialogService.open(DraggableResizableWindowDialogComponent);
+// listen to close event
+matDialogRef.componentInstance.closed.subscribe(() => matDialogRef.close());
+```

package/dialogs/_dialog-theme.scss

@@ -0,0 +1,39 @@
+@import '../common/styles/theme-functions';
+@import '../common/styles/typography-functions';
+
+@mixin td-dialog-typography($config) {
+  .td-dialog-title {
+    font: {
+      family: td-font-family($config);
+      size: td-font-size($config, title);
+      weight: td-font-weight($config, title);
+    }
+  }
+
+  .td-dialog-message {
+    font: {
+      family: td-font-family($config);
+      size: td-font-size($config, subheading-2);
+      weight: td-font-weight($config, subheading-2);
+    }
+
+    line-height: td-line-height($config, subheading-2);
+  }
+}
+@mixin td-dialog-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  .mat-toolbar.td-window-dialog-toolbar {
+    color: mat-color($foreground, text);
+    border-bottom: 1px solid mat-color($foreground, divider);
+    background: none;
+  }
+
+  .td-dialog-message {
+    color: mat-color($foreground, secondary-text);
+  }
+}

package/dialogs/alert-dialog/alert-dialog.component.d.ts

@@ -0,0 +1,12 @@
+import { MatDialogRef } from '@angular/material/dialog';
+import * as i0 from "@angular/core";
+export declare class TdAlertDialogComponent {
+    private _dialogRef;
+    title?: string;
+    message?: string;
+    closeButton?: string;
+    constructor(_dialogRef: MatDialogRef<TdAlertDialogComponent>);
+    close(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdAlertDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdAlertDialogComponent, "td-alert-dialog", never, {}, {}, never, never>;
+}

package/dialogs/confirm-dialog/confirm-dialog.component.d.ts

@@ -0,0 +1,15 @@
+import { MatDialogRef } from '@angular/material/dialog';
+import * as i0 from "@angular/core";
+export declare class TdConfirmDialogComponent {
+    private _dialogRef;
+    title?: string;
+    message?: string;
+    cancelButton: string;
+    acceptButton: string;
+    isDestructive: boolean;
+    constructor(_dialogRef: MatDialogRef<TdConfirmDialogComponent>);
+    cancel(): void;
+    accept(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdConfirmDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdConfirmDialogComponent, "td-confirm-dialog", never, {}, {}, never, never>;
+}

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

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

package/dialogs/dialog.component.d.ts

@@ -0,0 +1,22 @@
+import { QueryList, AfterContentInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class TdDialogTitleDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdDialogTitleDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdDialogTitleDirective, "[tdDialogTitle]", never, {}, {}, never>;
+}
+export declare class TdDialogContentDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdDialogContentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdDialogContentDirective, "[tdDialogContent]", never, {}, {}, never>;
+}
+export declare class TdDialogActionsDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdDialogActionsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TdDialogActionsDirective, "[tdDialogActions]", never, {}, {}, never>;
+}
+export declare class TdDialogComponent implements AfterContentInit {
+    dialogTitle: QueryList<TdDialogTitleDirective>;
+    dialogContent: QueryList<TdDialogContentDirective>;
+    dialogActions: QueryList<TdDialogActionsDirective>;
+    ngAfterContentInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdDialogComponent, "td-dialog", never, {}, {}, ["dialogTitle", "dialogContent", "dialogActions"], ["[tdDialogTitle]", "[tdDialogContent]", "[tdDialogActions]"]>;
+}

package/dialogs/dialogs.module.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./alert-dialog/alert-dialog.component";
+import * as i2 from "./confirm-dialog/confirm-dialog.component";
+import * as i3 from "./prompt-dialog/prompt-dialog.component";
+import * as i4 from "./dialog.component";
+import * as i5 from "./window-dialog/window-dialog.component";
+import * as i6 from "@angular/forms";
+import * as i7 from "@angular/common";
+import * as i8 from "@angular/material/dialog";
+import * as i9 from "@angular/material/input";
+import * as i10 from "@angular/material/button";
+import * as i11 from "@angular/material/toolbar";
+import * as i12 from "@angular/material/tooltip";
+import * as i13 from "@angular/material/icon";
+export declare class CovalentDialogsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentDialogsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentDialogsModule, [typeof i1.TdAlertDialogComponent, typeof i2.TdConfirmDialogComponent, typeof i3.TdPromptDialogComponent, typeof i4.TdDialogComponent, typeof i4.TdDialogTitleDirective, typeof i4.TdDialogActionsDirective, typeof i4.TdDialogContentDirective, typeof i5.TdWindowDialogComponent, typeof i1.TdAlertDialogComponent, typeof i2.TdConfirmDialogComponent, typeof i3.TdPromptDialogComponent], [typeof i6.FormsModule, typeof i7.CommonModule, typeof i8.MatDialogModule, typeof i9.MatInputModule, typeof i10.MatButtonModule, typeof i11.MatToolbarModule, typeof i12.MatTooltipModule, typeof i13.MatIconModule], [typeof i1.TdAlertDialogComponent, typeof i2.TdConfirmDialogComponent, typeof i3.TdPromptDialogComponent, typeof i4.TdDialogComponent, typeof i4.TdDialogTitleDirective, typeof i4.TdDialogActionsDirective, typeof i4.TdDialogContentDirective, typeof i5.TdWindowDialogComponent, typeof i1.TdAlertDialogComponent, typeof i2.TdConfirmDialogComponent, typeof i3.TdPromptDialogComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CovalentDialogsModule>;
+}

package/dialogs/package.json

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

package/dialogs/prompt-dialog/prompt-dialog.component.d.ts

@@ -0,0 +1,23 @@
+import { ElementRef, AfterViewInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import * as i0 from "@angular/core";
+export declare class TdPromptDialogComponent implements AfterViewInit {
+    private _dialogRef;
+    title?: string;
+    message?: string;
+    value?: string;
+    cancelButton: string;
+    acceptButton: string;
+    _input: ElementRef;
+    constructor(_dialogRef: MatDialogRef<TdPromptDialogComponent>);
+    ngAfterViewInit(): void;
+    /**
+     * Method executed when input is focused
+     * Selects all text
+     */
+    handleInputFocus(): void;
+    cancel(): void;
+    accept(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdPromptDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdPromptDialogComponent, "td-prompt-dialog", never, {}, {}, never, never>;
+}

package/dialogs/public_api.d.ts

@@ -0,0 +1,8 @@
+export * from './dialogs.module';
+export * from './dialog.component';
+export * from './alert-dialog/alert-dialog.component';
+export * from './confirm-dialog/confirm-dialog.component';
+export * from './prompt-dialog/prompt-dialog.component';
+export * from './services/dialog.service';
+export * from './resizable-draggable-dialog/resizable-draggable-dialog';
+export * from './window-dialog/window-dialog.component';

package/dialogs/resizable-draggable-dialog/resizable-draggable-dialog.d.ts

@@ -0,0 +1,21 @@
+import { Renderer2 } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { DragRef } from '@angular/cdk/drag-drop';
+import { Subscription } from 'rxjs';
+export declare class ResizableDraggableDialog {
+    private _document;
+    private _renderer2;
+    private _dialogRef;
+    private _dragRef;
+    cornerElements: HTMLElement[];
+    pointerDownSubs: Subscription[];
+    constructor(_document: any, _renderer2: Renderer2, _dialogRef: MatDialogRef<any>, _dragRef: DragRef);
+    attach(): void;
+    detach(): void;
+    private _getDialogWrapper;
+    private _getViewportDimensions;
+    private _getDialogWrapperDimensions;
+    private _initialPositionReset;
+    private _attachCorners;
+    private _handleMouseDown;
+}

package/dialogs/services/dialog.service.d.ts

@@ -0,0 +1,105 @@
+import { RendererFactory2 } from '@angular/core';
+import { MatDialog, MatDialogRef, MatDialogConfig } from '@angular/material/dialog';
+import { ComponentType } from '@angular/cdk/portal';
+import { TdAlertDialogComponent } from '../alert-dialog/alert-dialog.component';
+import { TdConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component';
+import { TdPromptDialogComponent } from '../prompt-dialog/prompt-dialog.component';
+import { DragDrop, DragRef } from '@angular/cdk/drag-drop';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+export interface IDialogConfig extends MatDialogConfig {
+    title?: string;
+    message: string;
+}
+export interface IAlertConfig extends IDialogConfig {
+    closeButton?: string;
+}
+export interface IConfirmConfig extends IDialogConfig {
+    acceptButton?: string;
+    cancelButton?: string;
+    isDestructive?: boolean;
+}
+export interface IPromptConfig extends IConfirmConfig {
+    value?: string;
+}
+export interface IDraggableConfig<T> {
+    component: ComponentType<T>;
+    config?: MatDialogConfig;
+    dragHandleSelectors?: string[];
+    draggableClass?: string;
+}
+export interface IDraggableRefs<T> {
+    matDialogRef: MatDialogRef<T>;
+    dragRefSubject: Subject<DragRef>;
+}
+export declare class TdDialogService {
+    private _document;
+    private _dialogService;
+    private _dragDrop;
+    private rendererFactory;
+    private _renderer2;
+    constructor(_document: any, _dialogService: MatDialog, _dragDrop: DragDrop, rendererFactory: RendererFactory2);
+    /**
+     * params:
+     * - component: ComponentType<T>
+     * - config: MatDialogConfig
+     * Wrapper function over the open() method in MatDialog.
+     * Opens a modal dialog containing the given component.
+     */
+    open<T>(component: ComponentType<T>, config?: MatDialogConfig): MatDialogRef<T>;
+    /**
+     * Wrapper function over the closeAll() method in MatDialog.
+     * Closes all of the currently-open dialogs.
+     */
+    closeAll(): void;
+    /**
+     * params:
+     * - config: IAlertConfig {
+     *     message: string;
+     *     title?: string;
+     *     viewContainerRef?: ViewContainerRef;
+     *     closeButton?: string;
+     * }
+     *
+     * Opens an alert dialog with the provided config.
+     * Returns an MatDialogRef<TdAlertDialogComponent> object.
+     */
+    openAlert(config: IAlertConfig): MatDialogRef<TdAlertDialogComponent>;
+    /**
+     * params:
+     * - config: IConfirmConfig {
+     *     message: string;
+     *     title?: string;
+     *     viewContainerRef?: ViewContainerRef;
+     *     acceptButton?: string;
+     *     cancelButton?: string;
+     *     isDestructive?: boolean;
+     * }
+     *
+     * Opens a confirm dialog with the provided config.
+     * Returns an MatDialogRef<TdConfirmDialogComponent> object.
+     */
+    openConfirm(config: IConfirmConfig): MatDialogRef<TdConfirmDialogComponent>;
+    /**
+     * params:
+     * - config: IPromptConfig {
+     *     message: string;
+     *     title?: string;
+     *     value?: string;
+     *     viewContainerRef?: ViewContainerRef;
+     *     acceptButton?: string;
+     *     cancelButton?: string;
+     * }
+     *
+     * Opens a prompt dialog with the provided config.
+     * Returns an MatDialogRef<TdPromptDialogComponent> object.
+     */
+    openPrompt(config: IPromptConfig): MatDialogRef<TdPromptDialogComponent>;
+    /**
+     * Opens a draggable dialog containing the given component.
+     */
+    openDraggable<T>({ component, config, dragHandleSelectors, draggableClass, }: IDraggableConfig<T>): IDraggableRefs<T>;
+    private _createConfig;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdDialogService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TdDialogService>;
+}