@covalent/core 11.0.0-beta.2 → 11.0.0-beta.4

package/fesm2022/covalent-core-side-sheet.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Directive, Optional, Inject, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, HostListener, HostBinding, Injector, TemplateRef, Injectable, SkipSelf, Input, NgModule } from '@angular/core';
-import * as i1$1 from '@angular/cdk/overlay';
+import { inject, ElementRef, ChangeDetectorRef, EventEmitter, Directive, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, HostListener, HostBinding, Injector, TemplateRef, Injectable, Optional, Inject, SkipSelf, Input, NgModule } from '@angular/core';
+import * as i1 from '@angular/cdk/overlay';
 import { OverlayConfig } from '@angular/cdk/overlay';
 import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { AnimationDurations, AnimationCurves } from '@angular/material/core';
-import * as i1 from '@angular/cdk/a11y';
+import { ConfigurableFocusTrapFactory, FocusMonitor } from '@angular/cdk/a11y';
 import { DOCUMENT } from '@angular/common';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { Subject, of } from 'rxjs';
@@ -55,12 +55,12 @@ function _getFocusedElementPierceShadowDom() {
  * animations as these are left to implementers of the side-sheet container.
  */
 class _CovalentSideSheetContainerBase extends BasePortalOutlet {
-    _elementRef;
-    _focusTrapFactory;
-    _changeDetectorRef;
-    _config;
-    _focusMonitor;
-    _document;
+    _elementRef = inject(ElementRef);
+    _focusTrapFactory = inject(ConfigurableFocusTrapFactory);
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    _config = inject(CovalentSideSheetConfig);
+    _focusMonitor = inject(FocusMonitor);
+    _document = null;
     /** The portal outlet inside of this container into which the side-sheet content will be loaded. */
     _portalOutlet;
     /** The class that traps and manages focus within the side-sheet. */
@@ -79,15 +79,10 @@ class _CovalentSideSheetContainerBase extends BasePortalOutlet {
     _ariaLabelledBy;
     /** ID for the container DOM element. */
     _id;
-    constructor(_elementRef, _focusTrapFactory, _changeDetectorRef, _document, 
-    /** The side-sheet configuration. */
-    _config, _focusMonitor) {
+    constructor() {
+        const _document = inject(DOCUMENT, { optional: true });
         super();
-        this._elementRef = _elementRef;
-        this._focusTrapFactory = _focusTrapFactory;
-        this._changeDetectorRef = _changeDetectorRef;
-        this._config = _config;
-        this._focusMonitor = _focusMonitor;
+        const _config = this._config;
         this._ariaLabelledBy = _config.ariaLabelledBy || null;
         this._document = _document;
     }
@@ -163,7 +158,7 @@ class _CovalentSideSheetContainerBase extends BasePortalOutlet {
             // the consumer moved it themselves before the animation was done, in which case we shouldn't
             // do anything.
             if (!activeElement ||
-                activeElement === this._document.body ||
+                activeElement === this._document?.body ||
                 activeElement === element ||
                 element.contains(activeElement)) {
                 if (this._focusMonitor) {
@@ -203,7 +198,7 @@ class _CovalentSideSheetContainerBase extends BasePortalOutlet {
         const activeElement = _getFocusedElementPierceShadowDom();
         return element === activeElement || element.contains(activeElement);
     }
-    static ɵfac = function _CovalentSideSheetContainerBase_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || _CovalentSideSheetContainerBase)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.ConfigurableFocusTrapFactory), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(DOCUMENT, 8), i0.ɵɵdirectiveInject(CovalentSideSheetConfig), i0.ɵɵdirectiveInject(i1.FocusMonitor)); };
+    static ɵfac = function _CovalentSideSheetContainerBase_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || _CovalentSideSheetContainerBase)(); };
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: _CovalentSideSheetContainerBase, viewQuery: function _CovalentSideSheetContainerBase_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(CdkPortalOutlet, 7);
         } if (rf & 2) {
@@ -213,12 +208,7 @@ class _CovalentSideSheetContainerBase extends BasePortalOutlet {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(_CovalentSideSheetContainerBase, [{
         type: Directive
-    }], () => [{ type: i0.ElementRef }, { type: i1.ConfigurableFocusTrapFactory }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [DOCUMENT]
-            }] }, { type: CovalentSideSheetConfig }, { type: i1.FocusMonitor }], { _portalOutlet: [{
+    }], () => [], { _portalOutlet: [{
             type: ViewChild,
             args: [CdkPortalOutlet, { static: true }]
         }] }); })();
@@ -322,7 +312,7 @@ class CovalentSideSheetContainerComponent extends _CovalentSideSheetContainerBas
             type: HostListener,
             args: ['@sideSheetContainer.done', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CovalentSideSheetContainerComponent, { className: "CovalentSideSheetContainerComponent", filePath: "side-sheet-container.ts", lineNumber: 255 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CovalentSideSheetContainerComponent, { className: "CovalentSideSheetContainerComponent", filePath: "side-sheet-container.ts", lineNumber: 256 }); })();
 
 // Counter for unique dialog ids.
 let uniqueId = 0;
@@ -352,6 +342,7 @@ function _closeSideSheetVia(ref, interactionType, result) {
     return ref.close(result);
 }
 
+/* eslint-disable @angular-eslint/prefer-inject */
 /* tslint:disable */
 class _CovalentSideSheetBase {
     _overlay;
@@ -552,7 +543,7 @@ class _CovalentSideSheetBase {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(_CovalentSideSheetBase, [{
         type: Directive
-    }], () => [{ type: i1$1.Overlay }, { type: i0.Injector }, { type: undefined }, { type: undefined }, { type: i0.Type }, { type: i0.Type }, { type: i0.InjectionToken }], null); })();
+    }], () => [{ type: i1.Overlay }, { type: i0.Injector }, { type: undefined }, { type: undefined }, { type: i0.Type }, { type: i0.Type }, { type: i0.InjectionToken }], null); })();
 /**
  * Service to open Covalent Design side-sheet.
  */
@@ -560,12 +551,12 @@ class CovalentSideSheet extends _CovalentSideSheetBase {
     constructor(overlay, injector, defaultOptions, parentSideSheet) {
         super(overlay, injector, defaultOptions, parentSideSheet, CovalentSideSheetRef, CovalentSideSheetContainerComponent, MAT_DIALOG_DATA);
     }
-    static ɵfac = function CovalentSideSheet_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CovalentSideSheet)(i0.ɵɵinject(i1$1.Overlay), i0.ɵɵinject(i0.Injector), i0.ɵɵinject(MAT_DIALOG_DEFAULT_OPTIONS, 8), i0.ɵɵinject(CovalentSideSheet, 12)); };
+    static ɵfac = function CovalentSideSheet_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CovalentSideSheet)(i0.ɵɵinject(i1.Overlay), i0.ɵɵinject(i0.Injector), i0.ɵɵinject(MAT_DIALOG_DEFAULT_OPTIONS, 8), i0.ɵɵinject(CovalentSideSheet, 12)); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: CovalentSideSheet, factory: CovalentSideSheet.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentSideSheet, [{
         type: Injectable
-    }], () => [{ type: i1$1.Overlay }, { type: i0.Injector }, { type: CovalentSideSheetConfig, decorators: [{
+    }], () => [{ type: i1.Overlay }, { type: i0.Injector }, { type: CovalentSideSheetConfig, decorators: [{
                 type: Optional
             }, {
                 type: Inject,
@@ -583,9 +574,11 @@ let dialogElementUid = 0;
  * Button that will close the current dialog.
  */
 class CovalentSideSheetCloseDirective {
-    dialogRef;
-    _elementRef;
-    _dialog;
+    dialogRef = inject(CovalentSideSheetRef, {
+        optional: true,
+    });
+    _elementRef = inject(ElementRef);
+    _dialog = inject(CovalentSideSheet);
     /** Screenreader label for the button. */
     ariaLabel;
     /** Default to "button" to prevents accidental form submits. */
@@ -596,11 +589,6 @@ class CovalentSideSheetCloseDirective {
     onClick($event) {
         this._onButtonClick($event);
     }
-    constructor(dialogRef, _elementRef, _dialog) {
-        this.dialogRef = dialogRef;
-        this._elementRef = _elementRef;
-        this._dialog = _dialog;
-    }
     ngOnInit() {
         if (!this.dialogRef) {
             // When this directive is included in a dialog via TemplateRef (rather than being
@@ -623,9 +611,12 @@ class CovalentSideSheetCloseDirective {
         // result in incorrect origins. Most of the time, close buttons will be auto focused in the
         // dialog, and therefore clicking the button won't result in a focus change. This means that
         // the FocusMonitor won't detect any origin change, and will always output `program`.
+        if (!this.dialogRef) {
+            return;
+        }
         _closeSideSheetVia(this.dialogRef, event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse', this.dialogResult);
     }
-    static ɵfac = function CovalentSideSheetCloseDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CovalentSideSheetCloseDirective)(i0.ɵɵdirectiveInject(CovalentSideSheetRef, 8), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(CovalentSideSheet)); };
+    static ɵfac = function CovalentSideSheetCloseDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CovalentSideSheetCloseDirective)(); };
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: CovalentSideSheetCloseDirective, selectors: [["", "td-side-sheet-close", ""], ["", "CovalentSideSheetClose", ""]], hostVars: 2, hostBindings: function CovalentSideSheetCloseDirective_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("click", function CovalentSideSheetCloseDirective_click_HostBindingHandler($event) { return ctx.onClick($event); });
         } if (rf & 2) {
@@ -638,9 +629,7 @@ class CovalentSideSheetCloseDirective {
                 selector: '[td-side-sheet-close], [CovalentSideSheetClose]',
                 exportAs: 'CovalentSideSheetClose',
             }]
-    }], () => [{ type: CovalentSideSheetRef, decorators: [{
-                type: Optional
-            }] }, { type: i0.ElementRef }, { type: CovalentSideSheet }], { ariaLabel: [{
+    }], null, { ariaLabel: [{
             type: HostBinding,
             args: ['attr.arial-label']
         }, {
@@ -665,25 +654,19 @@ class CovalentSideSheetCloseDirective {
  * Title of a side sheet element. Stays fixed to the top of the side sheet when scrolling.
  */
 class CovalentSideSheetTitleDirective {
-    _dialogRef;
-    _elementRef;
-    _dialog;
+    _dialogRef = inject(CovalentSideSheetRef, {
+        optional: true,
+    });
+    _elementRef = inject(ElementRef);
+    _dialog = inject(CovalentSideSheet);
     /** Unique id for the dialog title. If none is supplied, it will be auto-generated. */
     id = `td-side-sheet-title-${dialogElementUid++}`;
     tdSideSheetTitle = true;
     idAttr = this.id;
-    constructor(
-    // The dialog title directive is always used in combination with a `CovalentSideSheetRef`.
-    // tslint:disable-next-line: lightweight-tokens
-    _dialogRef, _elementRef, _dialog) {
-        this._dialogRef = _dialogRef;
-        this._elementRef = _elementRef;
-        this._dialog = _dialog;
-    }
     ngOnInit() {
         if (this._dialogRef) {
             Promise.resolve().then(() => {
-                const container = this._dialogRef._containerInstance;
+                const container = this._dialogRef?._containerInstance;
                 if (container && !container._ariaLabelledByQueue.includes(this.id)) {
                     container._ariaLabelledByQueue.push(this.id);
                 }
@@ -693,7 +676,7 @@ class CovalentSideSheetTitleDirective {
             this._dialogRef = getClosestDialog(this._elementRef, this._dialog.openSideSheets);
         }
     }
-    static ɵfac = function CovalentSideSheetTitleDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CovalentSideSheetTitleDirective)(i0.ɵɵdirectiveInject(CovalentSideSheetRef, 8), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(CovalentSideSheet)); };
+    static ɵfac = function CovalentSideSheetTitleDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CovalentSideSheetTitleDirective)(); };
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: CovalentSideSheetTitleDirective, selectors: [["", "td-side-sheet-title", ""], ["", "CovalentSideSheetTitle", ""]], hostVars: 3, hostBindings: function CovalentSideSheetTitleDirective_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("id", ctx.idAttr);
             i0.ɵɵclassProp("td-side-sheet-title", ctx.tdSideSheetTitle);
@@ -705,9 +688,7 @@ class CovalentSideSheetTitleDirective {
                 selector: '[td-side-sheet-title], [CovalentSideSheetTitle]',
                 exportAs: 'CovalentSideSheetTitle',
             }]
-    }], () => [{ type: CovalentSideSheetRef, decorators: [{
-                type: Optional
-            }] }, { type: i0.ElementRef }, { type: CovalentSideSheet }], { id: [{
+    }], null, { id: [{
             type: Input
         }], tdSideSheetTitle: [{
             type: HostBinding,
@@ -785,7 +766,7 @@ function getClosestDialog(element, openDialogs) {
         parent = parent.parentElement;
     }
     return parent
-        ? openDialogs.find((dialog) => dialog.id === parent?.id) ?? openDialogs[0]
+        ? (openDialogs.find((dialog) => dialog.id === parent?.id) ?? openDialogs[0])
         : openDialogs[0];
 }