@almoamendev/ngx-md3 0.1.0 → 0.2.0

package/package.json

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

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { ViewContainerRef, Injector, ElementRef, AfterViewInit, OnDestroy, OnInit, Renderer2, Signal, InputSignal, Type, ComponentRef, InjectionToken, AfterContentInit, TemplateRef } from '@angular/core';
+import { ViewContainerRef, Injector, ElementRef, AfterViewInit, OnDestroy, OnInit, Renderer2, Signal, InputSignal, InjectionToken, Type, AfterContentInit, ComponentRef, TemplateRef } from '@angular/core';
 import { FlexibleConnectedPositionStrategyOrigin, ConnectedPosition, OverlayRef } from '@angular/cdk/overlay';
 import * as i1 from '@angular/cdk/scrolling';
 import { AbstractControl } from '@angular/forms';
@@ -36,13 +36,6 @@ 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';
@@ -51,6 +44,12 @@ type ListLeadingType = 'icon' | 'avatar' | 'media' | 'selection-input';
 
 type ListLeadingSize = 'image' | 'small-video' | 'large-video';
 
+/**
+ * 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';
 interface DialogConfig<D = unknown> {
     /**
      * Optional data passed to the component opened inside the dialog.
@@ -81,6 +80,27 @@ interface DialogConfig<D = unknown> {
     viewContainerRef?: ViewContainerRef;
     injector?: Injector;
 }
+/**
+ * What DialogRef needs from the shell hosting a dialog. Implemented by both the
+ * regular dialog and the full screen dialog, so the reference can drive either.
+ */
+interface DialogContainer {
+    /** Element that plays the enter and exit transition. */
+    readonly surfaceElement: HTMLElement | null;
+    /** Starts the enter animation. Delayed when the dialog replaces another one. */
+    startEnterAnimation(): void;
+    /** Shows or hides the surface, which is what drives both transitions. */
+    setActive(value: boolean): void;
+    /** Moves focus back inside the dialog when it is not there already. */
+    recaptureFocus(): void;
+}
+
+/**
+ * Configuration of a full screen dialog. It is the dialog configuration without
+ * `previousDialog`: a full screen dialog always replaces the one that is open,
+ * because only one of them can be open at a time.
+ */
+type FullScreenDialogConfig<D = unknown> = Omit<DialogConfig<D>, 'previousDialog'>;
 
 type MenuPositionX = 'start' | 'end' | 'before' | 'after' | 'center';
 type MenuPositionY = 'above' | 'below' | 'center';
@@ -952,20 +972,19 @@ declare class SupportingText {
  * 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 {
+declare class Dialog extends CdkDialogContainer implements DialogContainer {
+    private readonly surface;
     isActive: _angular_core.WritableSignal<boolean>;
     protected readonly config: DialogConfig<unknown>;
+    get surfaceElement(): HTMLElement | null;
     /**
      * 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.
+     * once the dialog it replaces has had its head start. 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>;
+    setActive(value: boolean): void;
+    recaptureFocus(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Dialog, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Dialog, "md3-dialog", never, {}, {}, never, never, true, never>;
 }
@@ -975,13 +994,16 @@ declare const DIALOG_CONFIG: InjectionToken<DialogConfig<unknown>>;
 declare const DIALOG_COMPONENT: InjectionToken<Type<unknown>>;
 declare class DialogRef<T = unknown, R = unknown> {
     private readonly cdkRef;
+    /** Whether this reference belongs to a full screen dialog. */
+    readonly isFullScreen: boolean;
     private readonly closed;
     private readonly closing;
     private closePromise;
     private closeStarted;
     private closeSettled;
     private hidden;
-    dialogInstance?: Dialog;
+    /** Shell hosting the dialog: the regular dialog or the full screen one. */
+    dialogInstance?: DialogContainer;
     /**
      * Filled by DialogService after the user component is attached. Keeping the
      * instance here lets callers imperatively update inputs when that is useful.
@@ -993,7 +1015,9 @@ declare class DialogRef<T = unknown, R = unknown> {
     get isClosing(): boolean;
     /** Whether the dialog is currently hidden behind another dialog. */
     get isHidden(): boolean;
-    constructor(cdkRef: DialogRef$1<R, T>, disableCloseEvents: boolean);
+    constructor(cdkRef: DialogRef$1<R, T>, disableCloseEvents: boolean, 
+    /** Whether this reference belongs to a full screen dialog. */
+    isFullScreen?: boolean);
     /** Closes the dialog. The promise resolves once the exit animation is done. */
     close(result?: R): Promise<void>;
     /**
@@ -1036,9 +1060,21 @@ declare class DialogService {
     /** Element that was focused before the first dialog of the stack opened. */
     private rootTrigger;
     get openDialogs(): readonly DialogRef<any, any>[];
+    /** The full screen dialog that is open, if there is one. */
+    get fullScreenDialog(): DialogRef<any, any> | undefined;
     open<T, D = unknown, R = unknown>(component: Type<T>, config?: DialogConfig<D>): DialogRef<T, R>;
-    /** Closes every open dialog, including the hidden ones. */
+    /**
+     * Opens a dialog that covers the whole screen. Only one can be open at a
+     * time, so it replaces whatever is open, and while it is up the side sheet
+     * outlets belong to it: side sheets open inside the dialog, not behind it.
+     */
+    openFullScreen<T, D = unknown, R = unknown>(component: Type<T>, config?: FullScreenDialogConfig<D>): DialogRef<T, R>;
+    /** Wires a freshly created dialog into the stack and starts its animation. */
+    private registerDialog;
+    /** Closes every open dialog, including the hidden and the full screen ones. */
     closeAll(): Promise<void>;
+    /** Closes the regular dialogs and leaves a full screen dialog alone. */
+    private closeRegularDialogs;
     private mergeConfig;
     /**
      * Hides or closes the dialog that is on screen. Its scrim stays up until
@@ -1062,6 +1098,11 @@ declare class DialogService {
     private canBindDataToInputs;
     /** Last dialog of the stack that is not closing yet. */
     private topRef;
+    /**
+     * Same, without the full screen dialog: it hosts the dialogs opened on top
+     * of it, so it is never the one that gets hidden or closed to make room.
+     */
+    private topRegularRef;
     private restorePreviousDialog;
     private removeRef;
     private updateScrollBlock;
@@ -1085,6 +1126,42 @@ declare class DialogActions {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogActions, "md3-dialog-actions", never, {}, {}, never, ["*"], true, never>;
 }
 
+/**
+ * Material 3 full screen dialog shell. It covers the viewport and lays its
+ * content out like the scaffold does, with a main pane and a side sheet outlet
+ * on each side, so side sheets opened while it is up land inside the dialog
+ * instead of behind it.
+ */
+declare class FullScreenDialog extends CdkDialogContainer implements DialogContainer, AfterViewInit {
+    private readonly surface;
+    private readonly startOutlet;
+    private readonly endOutlet;
+    private readonly sheets;
+    isActive: _angular_core.WritableSignal<boolean>;
+    protected readonly config: DialogConfig<unknown>;
+    get surfaceElement(): HTMLElement | null;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    startEnterAnimation(): void;
+    setActive(value: boolean): void;
+    recaptureFocus(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FullScreenDialog, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FullScreenDialog, "md3-fullscreen-dialog", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Header of a full screen dialog: a leading icon button to leave the dialog,
+ * the headline, and a trailing action. It sticks to the top of the dialog while
+ * the content scrolls underneath.
+ */
+declare class FullScreenDialogHeader implements ButtonContext {
+    title: _angular_core.InputSignal<string>;
+    buttonContextSize: Signal<ButtonSize>;
+    buttonContextWidth: Signal<IconButtonWidth>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FullScreenDialogHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FullScreenDialogHeader, "md3-fullscreen-dialog-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; }, {}, never, ["[md3-icon-button][md3-header-leading]", "[md3-header-trailing]"], true, never>;
+}
+
 declare class Menu implements AfterContentInit {
     private el;
     private readonly portalOutlet;
@@ -1246,11 +1323,19 @@ declare class SideSheetRef<T = unknown, R = unknown> {
 
 declare class SheetsService {
     private readonly injector;
+    /**
+     * Outlets registered per side, from the page scaffold up to whatever took
+     * them over last. Sheets always open in the outlet on top, so a full screen
+     * dialog can host them while it is up and hand them back when it closes.
+     */
     private readonly states;
     registerSideSheetOutlet(side: SideSheetSide, outlet: CdkPortalOutlet): void;
     unregisterSideSheetOutlet(side: SideSheetSide, outlet: CdkPortalOutlet): void;
     openSideSheet<T = unknown, D = unknown, R = unknown>(component: Type<T>, config?: SideSheetConfig<D>): SideSheetRef<T, R>;
     closeSideSheet<R = unknown>(side?: SideSheetSide, result?: R): void;
+    /** Outlet that sheets currently open in: the last one that registered. */
+    private activeState;
+    private getOutletStack;
     private mergeConfig;
     private createInjector;
     private bindDataToInputs;
@@ -1377,5 +1462,5 @@ declare class SnackbarService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<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, PreviousDialog, SideSheetConfig, SideSheetContainer, SideSheetSide, SideSheetType, SliderSize, SnackbarConfig, SnackbarDismiss, SnackbarDismissReason, SnackbarPoliteness, SplitButtonType, TextColor, TextSize };
+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, FullScreenDialog, FullScreenDialogHeader, 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, DialogContainer, DialogRole, FabSize, FabType, FullScreenDialogConfig, IconButtonType, IconButtonWidth, ListLeadingSize, ListLeadingType, Md3NavigationMode, MenuConfig, MenuPositionOrigin, MenuPositionX, MenuPositionY, MenuScrollStrategy, PreviousDialog, SideSheetConfig, SideSheetContainer, SideSheetSide, SideSheetType, SliderSize, SnackbarConfig, SnackbarDismiss, SnackbarDismissReason, SnackbarPoliteness, SplitButtonType, TextColor, TextSize };