@nanahoshi/mona-ui 0.4.0 → 0.6.0

package/types/nanahoshi-mona-ui-popup.d.ts

@@ -134,6 +134,12 @@ interface PopupSettings<T = unknown, C = void> {
      * @type {string | string[]}
      */
     backdropClass?: string | string[];
+    /**
+     * Whether scrolling behind the popup should be blocked while it is open.
+     * Default: false.
+     * @type {boolean}
+     */
+    blockScroll?: boolean;
     /**
      * The content to display in the popup.
      * @type {TemplateRef | ComponentType}
@@ -461,6 +467,11 @@ declare class PopupService {
     private resolveAnchor;
     private restoreFocusToAnchor;
     private setupBackdropCloseSubscription;
+    /**
+     * Starts the backdrop fade-out as soon as the close begins, so it runs alongside the popup's leave
+     * animation. Without it the backdrop stays fully opaque until `dispose()` removes it in one frame.
+     */
+    private setupBackdropFadeOut;
     private setupCleanupSubscription;
     private setupCloseSubscriptions;
     private setupEscapeKeyListener;
@@ -478,8 +489,12 @@ declare class PopupService {
 declare const defaultPopupAnimation: Required<PopupAnimationSettings>;
 declare const dropdownPopupAnimation: Required<PopupAnimationSettings>;
 declare const fadePopupAnimation: Required<PopupAnimationSettings>;
+declare const slideFromRightPopupAnimation: Required<PopupAnimationSettings>;
+declare const slideFromLeftPopupAnimation: Required<PopupAnimationSettings>;
+declare const slideFromTopPopupAnimation: Required<PopupAnimationSettings>;
+declare const slideFromBottomPopupAnimation: Required<PopupAnimationSettings>;
 
 declare const PopupDataInjectionToken: InjectionToken<unknown>;
 
-export { PopupCloseEvent, PopupCloseSource, PopupComponent, PopupDataInjectionToken, PopupRef, PopupService, defaultPopupAnimation, dropdownPopupAnimation, fadePopupAnimation };
+export { PopupCloseEvent, PopupCloseSource, PopupComponent, PopupDataInjectionToken, PopupRef, PopupService, defaultPopupAnimation, dropdownPopupAnimation, fadePopupAnimation, slideFromBottomPopupAnimation, slideFromLeftPopupAnimation, slideFromRightPopupAnimation, slideFromTopPopupAnimation };
 export type { ConnectionPoint, PopupAnchor, PopupAnimationSettings, PopupOffset, PopupSettings };

package/types/nanahoshi-mona-ui-sheet.d.ts

@@ -0,0 +1,62 @@
+import * as _angular_core from '@angular/core';
+import { ClassInputType } from '@nanahoshi/mona-ui/common';
+import { PopupCloseEvent } from '@nanahoshi/mona-ui/popup';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+import { VariantProps } from 'class-variance-authority';
+
+type SheetSide = "top" | "right" | "bottom" | "left";
+
+/**
+ * `overflow-clip` rather than `overflow-hidden` is deliberate. `hidden` would make the sheet a scroll
+ * container, letting the browser scroll it to reveal content that takes focus while the enter animation
+ * still has the sheet translated off-screen, which cancels the animation. `clip` cannot scroll.
+ */
+declare const sheetBaseVariants: (props?: ({
+    side?: "top" | "right" | "bottom" | "left" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SheetVariantProps = VariantProps<typeof sheetBaseVariants>;
+type SheetVariantInput = VariantInputs<SheetVariantProps>;
+
+declare class SheetComponent implements SheetVariantInput {
+    #private;
+    private readonly sheetTemplate;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    protected readonly closeButtonClass: _angular_core.Signal<string>;
+    protected readonly contentClass: _angular_core.Signal<string>;
+    protected readonly descriptionClass: _angular_core.Signal<string>;
+    protected readonly descriptionId: string;
+    protected readonly headerClass: _angular_core.Signal<string>;
+    protected readonly titleClass: _angular_core.Signal<string>;
+    protected readonly titleId: string;
+    /** @description Accessible name used when no visible title is provided. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** @description Whether the close button is displayed. @default true */
+    readonly closable: _angular_core.InputSignal<boolean>;
+    /** @description Emitted before the sheet closes. Call preventDefault() to keep it open. */
+    readonly close: _angular_core.OutputEmitterRef<PopupCloseEvent<unknown>>;
+    /** @description Whether clicking the backdrop requests that the sheet close. @default true */
+    readonly closeOnBackdropClick: _angular_core.InputSignal<boolean>;
+    /** @description Whether pressing Escape requests that the sheet close. @default true */
+    readonly closeOnEscape: _angular_core.InputSignal<boolean>;
+    /** @description Emitted after the leave animation completes and the popup is disposed. */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    /** @description Supporting text displayed below the title. */
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    /** @description Explicit sheet height. Numbers are interpreted as pixels. */
+    readonly height: _angular_core.InputSignal<string | number | undefined>;
+    /** @description Edge of the viewport from which the sheet opens. @default "right" */
+    readonly side: _angular_core.InputSignal<SheetSide>;
+    /** @description Title displayed in the sheet header and used as its accessible name. */
+    readonly title: _angular_core.InputSignal<string | undefined>;
+    readonly userClass: _angular_core.InputSignalWithTransform<string | undefined, ClassInputType>;
+    /** @description Explicit sheet width. Numbers are interpreted as pixels. */
+    readonly width: _angular_core.InputSignal<string | number | undefined>;
+    constructor();
+    protected closeSheet(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SheetComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SheetComponent, "mona-sheet", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; }, never, ["*"], true, never>;
+}
+
+export { SheetComponent };
+export type { SheetSide };