@almoamendev/ngx-md3 0.0.16 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almoamendev/ngx-md3",
-  "version": "0.0.16",
+  "version": "0.1.0",
   "description": "MD3-style Angular components & style library",
   "author": "Murtadha (Hussain) Almoamen",
   "license": "MIT",

package/types/almoamendev-ngx-md3.d.ts

@@ -1,9 +1,10 @@
 import * as _angular_core from '@angular/core';
-import { ViewContainerRef, Injector, ElementRef, AfterViewInit, OnDestroy, OnInit, Renderer2, Signal, InputSignal, AfterContentInit, Type, ComponentRef, InjectionToken, TemplateRef } from '@angular/core';
+import { ViewContainerRef, Injector, ElementRef, AfterViewInit, OnDestroy, OnInit, Renderer2, Signal, InputSignal, Type, ComponentRef, InjectionToken, AfterContentInit, TemplateRef } from '@angular/core';
 import { FlexibleConnectedPositionStrategyOrigin, ConnectedPosition, OverlayRef } from '@angular/cdk/overlay';
 import * as i1 from '@angular/cdk/scrolling';
 import { AbstractControl } from '@angular/forms';
 import * as i1$1 from '@angular/router';
+import { CdkDialogContainer, DialogRef as DialogRef$1 } from '@angular/cdk/dialog';
 import { Observable } from 'rxjs';
 import { CdkPortalOutlet } from '@angular/cdk/portal';
 
@@ -35,6 +36,13 @@ type SliderSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
 
 type DialogRole = 'dialog' | 'alertdialog';
 
+/**
+ * What happens to a dialog that is already open when a new dialog opens.
+ * - close: the open dialogs are closed before the new one opens.
+ * - hide: the dialog on top is hidden and shown again once the new one closes.
+ */
+type PreviousDialog = 'close' | 'hide';
+
 type ChipType = 'assist' | 'filter' | 'input' | 'suggestion';
 
 type ChipStyle = 'default' | 'surface' | 'elevated';
@@ -55,6 +63,11 @@ interface DialogConfig<D = unknown> {
      */
     bindDataToInputs?: boolean;
     disableCloseEvents?: boolean;
+    /**
+     * What happens to a dialog that is already open when this dialog opens.
+     * A hidden dialog keeps its state and is shown again once this dialog closes.
+     */
+    previousDialog?: PreviousDialog;
     role?: DialogRole;
     ariaLabel?: string;
     ariaLabelledBy?: string;
@@ -934,15 +947,23 @@ declare class SupportingText {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SupportingText, "[md3-supporting-text]", never, {}, {}, never, never, true, never>;
 }
 
-declare class Dialog implements AfterContentInit {
-    private readonly portalOutlet;
+/**
+ * Material 3 dialog shell. It extends the CDK dialog container, so focus
+ * trapping, focus restoration and the ARIA attributes are handled by the CDK
+ * while this component only owns the MD3 surface and its animation.
+ */
+declare class Dialog extends CdkDialogContainer {
     isActive: _angular_core.WritableSignal<boolean>;
     protected readonly config: DialogConfig<unknown>;
-    protected get role(): string;
-    ngAfterContentInit(): void;
     /**
-     * The service creates this wrapper first, then calls this method to mount
-     * the user supplied component into the dialog container.
+     * Started by DialogService, either right after the dialog is created or
+     * once the dialog it replaces has finished animating out. The animation
+     * runs on the next frame so the surface has a real from/to state.
+     */
+    startEnterAnimation(): void;
+    /**
+     * @deprecated The CDK dialog service attaches the content. Kept for
+     * backwards compatibility and will be removed in a future release.
      */
     attachContent<T>(component: Type<T>, injector: Injector): ComponentRef<T>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Dialog, never>;
@@ -953,36 +974,98 @@ declare const DIALOG_DATA: InjectionToken<unknown>;
 declare const DIALOG_CONFIG: InjectionToken<DialogConfig<unknown>>;
 declare const DIALOG_COMPONENT: InjectionToken<Type<unknown>>;
 declare class DialogRef<T = unknown, R = unknown> {
-    private readonly overlayRef;
-    private readonly previouslyFocusedElement;
+    private readonly cdkRef;
     private readonly closed;
-    private isClosed;
+    private readonly closing;
+    private closePromise;
+    private closeStarted;
+    private closeSettled;
+    private hidden;
     dialogInstance?: Dialog;
     /**
      * Filled by DialogService after the user component is attached. Keeping the
      * instance here lets callers imperatively update inputs when that is useful.
      */
     componentInstance?: T;
-    constructor(overlayRef: OverlayRef, previouslyFocusedElement: HTMLElement | null);
-    close(result?: R): void;
-    private startCloseAnimation;
+    /** Overlay hosting the dialog, useful to reach the panel and the scrim. */
+    get overlayRef(): OverlayRef;
+    /** Whether the dialog started closing. Such a dialog cannot be hidden or shown anymore. */
+    get isClosing(): boolean;
+    /** Whether the dialog is currently hidden behind another dialog. */
+    get isHidden(): boolean;
+    constructor(cdkRef: DialogRef$1<R, T>, disableCloseEvents: boolean);
+    /** Closes the dialog. The promise resolves once the exit animation is done. */
+    close(result?: R): Promise<void>;
+    /**
+     * Hides the dialog with the closing animation while keeping it alive, so
+     * its content, form state and subscriptions survive until show() is called.
+     * The promise resolves once the dialog is out of sight.
+     */
+    hide(): Promise<void>;
+    /**
+     * Brings a hidden dialog back with the opening animation. Focus moves back
+     * into the dialog even when it was never hidden, which is what makes it
+     * usable again once the dialog above it closes.
+     */
+    show(): void;
+    /** Emits when the dialog starts closing, before the exit animation runs. */
+    beforeClosed(): Observable<void>;
     afterClosed(): Observable<R | undefined>;
+    private connectCloseEvents;
+    private toggleHiddenState;
+    private startClosing;
+    private startCloseAnimation;
+    /** Resolves when the surface finished animating, with a timeout as a safety net. */
+    private waitForSurfaceAnimation;
+    /** Emits the result once the CDK reference is closed. Focus is restored by the container. */
+    private settle;
 }
 
 declare class DialogService {
+    private readonly cdkDialog;
     private readonly overlay;
     private readonly injector;
     private readonly document;
+    /** Open dialogs, from the first one opened to the one currently on top. */
+    private readonly refs;
+    /**
+     * Page scrolling is blocked here instead of per overlay, so stacked dialogs
+     * cannot unblock the page while another dialog is still open.
+     */
+    private readonly scrollBlock;
+    /** Element that was focused before the first dialog of the stack opened. */
+    private rootTrigger;
+    get openDialogs(): readonly DialogRef<any, any>[];
     open<T, D = unknown, R = unknown>(component: Type<T>, config?: DialogConfig<D>): DialogRef<T, R>;
+    /** Closes every open dialog, including the hidden ones. */
+    closeAll(): Promise<void>;
     private mergeConfig;
-    private createOverlay;
+    /**
+     * Hides or closes the dialog that is on screen. Its scrim stays up until
+     * the dialog taking over is ready for it, so the page behind never
+     * brightens between the two dialogs.
+     */
+    private dismissPrevious;
     private startOpenAnimation;
-    private createInjector;
+    /** Opening animation for a dialog that took the place of another one. */
+    private startReplacingAnimation;
+    /** Opening animation for a dialog coming back from behind a closing one. */
+    private startRestoringAnimation;
+    /**
+     * Moves both scrims to their new value in a single frame, without a
+     * transition on either side, so the dim behind the dialogs never changes.
+     */
+    private beginScrimHandover;
+    /** Gives the scrims their transitions back once the handover is painted. */
+    private endScrimHandover;
     private bindDataToInputs;
-    private connectCloseEvents;
-    private focusDialog;
-    private getFocusedElement;
     private canBindDataToInputs;
+    /** Last dialog of the stack that is not closing yet. */
+    private topRef;
+    private restorePreviousDialog;
+    private removeRef;
+    private updateScrollBlock;
+    private getFocusedElement;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<DialogService>;
 }
@@ -1295,4 +1378,4 @@ declare class SnackbarService {
 }
 
 export { AppBar, AppBarLogo, Avatar, Badge, Button, ButtonGroup, Card, Checkbox, ChipAvatar, Chips, CircularProgressIndicator, DIALOG_COMPONENT, DIALOG_CONFIG, DIALOG_DATA, Dialog, DialogActions, DialogBody, DialogHeader, DialogRef, DialogService, Divider, FloatingActionButton, Grid, GridItem, IconButton, IconElement, InputElement, LayoutService, LinearProgressIndicator, List, ListItem, ListItemPrimaryAction, ListLeading, ListSlot, LoadingIndicator, MENU_COMPONENT, MENU_CONFIG, MENU_DATA, MaterialIcon, Menu, MenuGroup, MenuItem, MenuRef, MenuService, NavigationBar, NavigationGroup, NavigationItem, NavigationRail, RadioButton, SIDE_SHEET_COMPONENT, SIDE_SHEET_CONFIG, SIDE_SHEET_DATA, SNACKBAR_ACTION_LABEL, SNACKBAR_CONFIG, SNACKBAR_MESSAGE, Scaffold, ScaffoldBar, ScaffoldPane, ScaffoldRail, SheetsService, SideSheetActions, SideSheetBody, SideSheetHeader, SideSheetRef, Slider, Snackbar, SnackbarRef, SnackbarService, SplitButton, StateComponent, SupportingText, Switch, TextField, TypeBody, TypeDisplay, TypeHeadline, TypeLabel, TypeTitle };
-export type { AppBarScrollingStyle, AppBarType, ButtonGroupSelection, ButtonGroupType, ButtonSize, ButtonType, CardType, ChipStyle, ChipType, DialogConfig, DialogRole, FabSize, FabType, IconButtonType, IconButtonWidth, ListLeadingSize, ListLeadingType, Md3NavigationMode, MenuConfig, MenuPositionOrigin, MenuPositionX, MenuPositionY, MenuScrollStrategy, SideSheetConfig, SideSheetContainer, SideSheetSide, SideSheetType, SliderSize, SnackbarConfig, SnackbarDismiss, SnackbarDismissReason, SnackbarPoliteness, SplitButtonType, TextColor, TextSize };
+export type { AppBarScrollingStyle, AppBarType, ButtonGroupSelection, ButtonGroupType, ButtonSize, ButtonType, CardType, ChipStyle, ChipType, DialogConfig, DialogRole, FabSize, FabType, IconButtonType, IconButtonWidth, ListLeadingSize, ListLeadingType, Md3NavigationMode, MenuConfig, MenuPositionOrigin, MenuPositionX, MenuPositionY, MenuScrollStrategy, PreviousDialog, SideSheetConfig, SideSheetContainer, SideSheetSide, SideSheetType, SliderSize, SnackbarConfig, SnackbarDismiss, SnackbarDismissReason, SnackbarPoliteness, SplitButtonType, TextColor, TextSize };