@covalent/core 3.1.2-beta.6 → 4.0.0-beta.1

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,61 @@
+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 CovalentSideSheetClose 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;
+    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>;
+}
+/**
+ * Title of a side sheet element. Stays fixed to the top of the side sheet when scrolling.
+ */
+export declare class CovalentSideSheetTitle 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;
+    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>;
+}
+/**
+ * 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>;
+}
+/**
+ * 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>;
+}
+/**
+ * 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>;
+}

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 { CovalentSideSheetContainer, _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<CovalentSideSheetContainer> {
+    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.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 ɵinj: i0.ɵɵInjectorDeclaration<CovalentSideSheetModule>;
+}

package/side-sheet/side-sheet.scss

@@ -0,0 +1,68 @@
+$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;
+    }
+  }
+}

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/theming/_all-theme.scss

@@ -1,17 +1,11 @@
 @import '../breadcrumbs/breadcrumbs-theme';
 @import '../common/common-theme';
-@import '../chips/chips-theme';
-@import '../data-table/data-table-theme';
 @import '../layout/layout-theme';
-@import '../steps/steps-theme';
-@import '../expansion-panel/expansion-panel-theme';
 @import '../file/file-theme';
-@import '../loading/loading-theme';
 @import '../dialogs/dialog-theme';
 @import '../json-formatter/json-formatter-theme';
-@import '../paging/paging-bar-theme';
-@import '../notifications/notification-count-theme';
 @import '../message/message-theme';
+@import '../side-sheet/side-sheet.theme';
 // import the covalent mixins
 @import '../common/styles/styles';
 @import '../typography/all-typography';
@@ -22,15 +16,9 @@
   @include td-breadcrumbs-theme($theme);
   @include td-common-theme($theme);
   @include td-layout-theme($theme);
-  @include td-steps-theme($theme);
-  @include td-expansion-panel-theme($theme);
-  @include td-chips-theme($theme);
   @include td-file-theme($theme);
   @include td-dialog-theme($theme);
   @include td-json-formatter-theme($theme);
-  @include td-paging-bar-theme($theme);
-  @include td-loading-theme($theme);
-  @include td-data-table-theme($theme);
-  @include td-notification-count-theme($theme);
   @include td-message-theme($theme);
+  @include td-side-sheet-theme($theme);
 }