@nanahoshi/mona-ui 0.1.0

package/types/nanahoshi-mona-ui-date-picker.d.ts

@@ -0,0 +1,177 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
+import { CalendarDecadeCellTemplateDirective, CalendarMonthCellTemplateDirective, CalendarYearCellTemplateDirective, FirstDayOfWeek } from '@nanahoshi/mona-ui/calendar';
+import { PreventableEvent } from '@nanahoshi/mona-ui/common';
+import { DatePopupVariantInput, DateDisabledType } from '@nanahoshi/mona-ui/date-input';
+import * as i1 from '@nanahoshi/mona-ui/dropdowns';
+import { DropdownPopupInput } from '@nanahoshi/mona-ui/dropdowns';
+import { VariantInputs, AttributeConfig } from '@nanahoshi/mona-ui/internal';
+import { ListSizeInputType } from '@nanahoshi/mona-ui/internal/list';
+import { PopupCloseEvent } from '@nanahoshi/mona-ui/popup';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ThemeStyle } from '@nanahoshi/mona-ui/theme';
+import { VariantProps } from 'class-variance-authority';
+
+declare const datePickerBaseThemeVariants: (theme: ThemeStyle) => (props?: ({
+    focused?: boolean | null | undefined;
+    rounded?: "full" | "large" | "medium" | "none" | "small" | null | undefined;
+    size?: "large" | "medium" | "small" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type DatePickerBaseVariantProps = VariantProps<ReturnType<typeof datePickerBaseThemeVariants>>;
+type DatePickerBaseVariantInput = VariantInputs<DatePickerBaseVariantProps>;
+type DatePickerVariantProps = DatePickerBaseVariantProps;
+type DatePickerVariantInput = Omit<DatePickerBaseVariantInput, "focused">;
+
+declare class DatePickerComponent implements FormValueControl<Date | null>, DropdownPopupInput, DatePickerVariantInput, DatePopupVariantInput {
+    #private;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    protected readonly currentDateString: _angular_core.WritableSignal<string>;
+    protected readonly decadeCellTemplate: _angular_core.Signal<CalendarDecadeCellTemplateDirective | undefined>;
+    protected readonly expanded: _angular_core.Signal<boolean>;
+    protected readonly inputAttributes: _angular_core.Signal<AttributeConfig>;
+    protected readonly invalidState: _angular_core.Signal<boolean>;
+    protected readonly monthCellTemplate: _angular_core.Signal<CalendarMonthCellTemplateDirective | undefined>;
+    protected readonly navigatedDate: _angular_core.WritableSignal<Date>;
+    protected readonly pickerPopupClass: _angular_core.Signal<string>;
+    protected readonly popupId: string;
+    protected readonly popupTemplate: _angular_core.Signal<TemplateRef<unknown>>;
+    protected readonly prefixTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly yearCellTemplate: _angular_core.Signal<CalendarYearCellTemplateDirective | undefined>;
+    /**
+     * @description Emits when the popup is about to close. This event is preventable.
+     */
+    readonly close: _angular_core.OutputEmitterRef<PopupCloseEvent<unknown>>;
+    /**
+     * @description Emits after the popup is closed.
+     */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Sets the disabled state of the date picker.
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the disabled dates of the date picker.
+     * Accepts either an iterable of Date objects or a predicate function.
+     */
+    readonly disabledDates: _angular_core.InputSignal<DateDisabledType>;
+    /**
+     * @description Sets the first day of the week.
+     */
+    readonly firstDay: _angular_core.InputSignal<FirstDayOfWeek>;
+    /**
+     * @description Sets the date format of the date picker.
+     */
+    readonly format: _angular_core.InputSignal<string>;
+    /**
+     * @description Marks the date picker as invalid. When bound to a signal form field via `[formField]`,
+     * this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the maximum date of the date picker.
+     */
+    readonly max: _angular_core.InputSignalWithTransform<Date | undefined, unknown>;
+    /**
+     * @description Sets the minimum date of the date picker.
+     */
+    readonly min: _angular_core.InputSignalWithTransform<Date | undefined, unknown>;
+    /**
+     * @description Emits when the popup is about to open. This event is preventable.
+     */
+    readonly open: _angular_core.OutputEmitterRef<PreventableEvent<Event>>;
+    /**
+     * @description Emits after the popup is opened.
+     */
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Sets the placeholder of the date picker.
+     */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * @description Sets the class of the popup element.
+     * @default ""
+     */
+    readonly popupClass: _angular_core.InputSignal<string>;
+    /**
+     * @description Sets the height of the popup element.
+     * @default 200
+     */
+    readonly popupHeight: _angular_core.InputSignal<ListSizeInputType>;
+    /**
+     * @description Sets the width of the popup element.
+     * @default null
+     */
+    readonly popupWidth: _angular_core.InputSignal<ListSizeInputType>;
+    /**
+     * @description Sets the readonly state of the date picker.
+     */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * @description When true, the input is readonly but the calendar button remains enabled.
+     * @default false
+     */
+    readonly readonlyInput: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the required state of the date picker.
+     * When bound to a signal form field via `[formField]`, this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly required: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the border radius of the date picker.
+     */
+    readonly rounded: _angular_core.InputSignal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
+    /**
+     * @description Sets the visibility of the clear button.
+     */
+    readonly showClearButton: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the size of the date picker.
+     */
+    readonly size: _angular_core.InputSignal<"large" | "medium" | "small" | null | undefined>;
+    /**
+     * @description Emitted when the date picker is interacted with via blur, selection, or clear.
+     * The `FormField` directive listens to this to mark the field as touched.
+     */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Sets the touched state of the date picker. When bound to a signal form field via `[formField]`,
+     * this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly touched: _angular_core.InputSignal<boolean>;
+    readonly userClass: _angular_core.InputSignal<string>;
+    /**
+     * @description Two-way bindable current date value.
+     * @default null
+     */
+    readonly value: _angular_core.ModelSignal<Date | null>;
+    /**
+     * @description Enables the display of week numbers in the calendar.
+     * @default false
+     */
+    readonly weekNumber: _angular_core.InputSignal<boolean>;
+    constructor();
+    protected onCalendarValueChange(date: Date | Date[] | null): void;
+    protected onDateInputBlur(): void;
+    protected onDateInputButtonClick(): void;
+    protected onDateStringEdit(dateString: string): void;
+    private closePopup;
+    private compareDatesEqual;
+    private dateStringEquals;
+    focus(): void;
+    private handleKeydown;
+    private isDateDisabledByInput;
+    private openPopup;
+    private setCurrentDate;
+    private setKeyboardSubscriptions;
+    private setPopupCloseSubscriptions;
+    private setSubscriptions;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatePickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatePickerComponent, "mona-date-picker", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "firstDay": { "alias": "firstDay"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "popupClass": { "alias": "popupClass"; "required": false; "isSignal": true; }; "popupHeight": { "alias": "popupHeight"; "required": false; "isSignal": true; }; "popupWidth": { "alias": "popupWidth"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "readonlyInput": { "alias": "readonlyInput"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "weekNumber": { "alias": "weekNumber"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; }, ["decadeCellTemplate", "monthCellTemplate", "prefixTemplate", "yearCellTemplate"], never, true, [{ directive: typeof i1.DropdownPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
+}
+
+export { DatePickerComponent };
+export type { DatePickerVariantInput, DatePickerVariantProps };

package/types/nanahoshi-mona-ui-datetime-picker.d.ts

@@ -0,0 +1,199 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
+import { CalendarDecadeCellTemplateDirective, CalendarMonthCellTemplateDirective, CalendarYearCellTemplateDirective, FirstDayOfWeek } from '@nanahoshi/mona-ui/calendar';
+import { PreventableEvent } from '@nanahoshi/mona-ui/common';
+import { DateDisabledType, HourFormat } from '@nanahoshi/mona-ui/date-input';
+import * as i1 from '@nanahoshi/mona-ui/dropdowns';
+import { DropdownPopupInput } from '@nanahoshi/mona-ui/dropdowns';
+import { AttributeConfig } from '@nanahoshi/mona-ui/internal';
+import { ListSizeInputType } from '@nanahoshi/mona-ui/internal/list';
+import { PopupCloseEvent } from '@nanahoshi/mona-ui/popup';
+
+type ActiveView = "date" | "time";
+
+declare class DateTimePickerComponent implements FormValueControl<Date | null>, DropdownPopupInput {
+    #private;
+    protected readonly activeView: _angular_core.WritableSignal<ActiveView>;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    protected readonly currentDateString: _angular_core.WritableSignal<string>;
+    protected readonly decadeCellTemplate: _angular_core.Signal<CalendarDecadeCellTemplateDirective | undefined>;
+    protected readonly expanded: _angular_core.Signal<boolean>;
+    protected readonly footerClass: _angular_core.Signal<string>;
+    protected readonly headerClass: _angular_core.Signal<string>;
+    protected readonly inputAttributes: _angular_core.Signal<AttributeConfig>;
+    protected readonly invalidState: _angular_core.Signal<boolean>;
+    protected readonly monthCellTemplate: _angular_core.Signal<CalendarMonthCellTemplateDirective | undefined>;
+    protected readonly navigatedDate: _angular_core.WritableSignal<Date>;
+    protected readonly pickerPopupClass: _angular_core.Signal<string>;
+    protected readonly popupId: string;
+    protected readonly popupTemplate: _angular_core.Signal<TemplateRef<unknown>>;
+    protected readonly prefixTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly timePickerMax: _angular_core.Signal<Date | null>;
+    protected readonly timePickerMin: _angular_core.Signal<Date | null>;
+    protected readonly yearCellTemplate: _angular_core.Signal<CalendarYearCellTemplateDirective | undefined>;
+    /**
+     * @description Emits when the popup is about to close. This event is preventable.
+     */
+    readonly close: _angular_core.OutputEmitterRef<PopupCloseEvent<unknown>>;
+    /**
+     * @description Emits after the popup is closed.
+     */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Sets the disabled state of the date time picker.
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the disabled dates of the date time picker.
+     * Accepts either an iterable of Date objects or a predicate function.
+     */
+    readonly disabledDates: _angular_core.InputSignal<DateDisabledType>;
+    /**
+     * @description Sets the first day of the week.
+     */
+    readonly firstDay: _angular_core.InputSignal<FirstDayOfWeek>;
+    /**
+     * @description Sets the date format of the date time picker.
+     */
+    readonly format: _angular_core.InputSignal<string>;
+    /**
+     * @description Sets the hour format of the time picker.
+     * @default 24
+     */
+    readonly hourFormat: _angular_core.InputSignal<HourFormat>;
+    /**
+     * @description Sets the hour step of the time picker.
+     * @default 1
+     */
+    readonly hourStep: _angular_core.InputSignal<number>;
+    /**
+     * @description Marks the date time picker as invalid. When bound to a signal form field via `[formField]`,
+     * this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the maximum date of the date time picker.
+     */
+    readonly max: _angular_core.InputSignalWithTransform<Date | undefined, unknown>;
+    /**
+     * @description Sets the minimum date of the date time picker.
+     */
+    readonly min: _angular_core.InputSignalWithTransform<Date | undefined, unknown>;
+    /**
+     * @description Sets the minute step of the time picker.
+     * @default 1
+     */
+    readonly minuteStep: _angular_core.InputSignal<number>;
+    /**
+     * @description Emits when the popup is about to open. This event is preventable.
+     */
+    readonly open: _angular_core.OutputEmitterRef<PreventableEvent<Event>>;
+    /**
+     * @description Emits after the popup is opened.
+     */
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Sets the placeholder of the date time picker.
+     */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * @description Sets the class of the popup element.
+     * @default ""
+     */
+    readonly popupClass: _angular_core.InputSignal<string>;
+    /**
+     * @description Sets the height of the popup element.
+     * @default 200
+     */
+    readonly popupHeight: _angular_core.InputSignal<ListSizeInputType>;
+    /**
+     * @description Sets the width of the popup element.
+     * @default null
+     */
+    readonly popupWidth: _angular_core.InputSignal<ListSizeInputType>;
+    /**
+     * @description Sets the readonly state of the date time picker.
+     */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * @description When true, the input is readonly but the popup button remains enabled.
+     * @default false
+     */
+    readonly readonlyInput: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the required state of the date time picker.
+     * When bound to a signal form field via `[formField]`, this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly required: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the border radius of the date time picker.
+     */
+    readonly rounded: _angular_core.InputSignal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
+    /**
+     * @description Sets the second step of the time picker.
+     * @default 1
+     */
+    readonly secondStep: _angular_core.InputSignal<number>;
+    /**
+     * @description Sets the visibility of the clear button.
+     */
+    readonly showClearButton: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the visibility of the second selector.
+     */
+    readonly showSeconds: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the size of the date time picker.
+     */
+    readonly size: _angular_core.InputSignal<"large" | "medium" | "small" | null | undefined>;
+    /**
+     * @description Emitted when the date time picker is interacted with via blur, selection, or clear.
+     * The `FormField` directive listens to this to mark the field as touched.
+     */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Sets the touched state of the date time picker. When bound to a signal form field via `[formField]`,
+     * this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly touched: _angular_core.InputSignal<boolean>;
+    readonly userClass: _angular_core.InputSignal<string>;
+    /**
+     * @description Two-way bindable current date time value.
+     * @default null
+     */
+    readonly value: _angular_core.ModelSignal<Date | null>;
+    /**
+     * @description Enables the display of week numbers in the calendar.
+     * @default false
+     */
+    readonly weekNumber: _angular_core.InputSignal<boolean>;
+    constructor();
+    protected onCancelClick(): void;
+    protected onCalendarValueChange(date: Date | Date[] | null): void;
+    protected onDateInputBlur(): void;
+    protected onDateInputButtonClick(): void;
+    protected onDateStringEdit(dateString: string): void;
+    protected onSetDateClick(): void;
+    protected onTimeSelectorValueChange(date: Date | null): void;
+    private compareDatesEqual;
+    private dateStringEquals;
+    focus(): void;
+    private isDateDisabledByInput;
+    private setCurrentDate;
+    private closePopup;
+    private handleKeydown;
+    private openPopup;
+    private setKeyboardSubscriptions;
+    private setPopupCloseSubscriptions;
+    private setSubscriptions;
+    private updateDateIfNotInRange;
+    private updateCurrentDateString;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DateTimePickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DateTimePickerComponent, "mona-datetime-picker", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "firstDay": { "alias": "firstDay"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "hourStep": { "alias": "hourStep"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "popupClass": { "alias": "popupClass"; "required": false; "isSignal": true; }; "popupHeight": { "alias": "popupHeight"; "required": false; "isSignal": true; }; "popupWidth": { "alias": "popupWidth"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "readonlyInput": { "alias": "readonlyInput"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "secondStep": { "alias": "secondStep"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "weekNumber": { "alias": "weekNumber"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; }, ["decadeCellTemplate", "monthCellTemplate", "prefixTemplate", "yearCellTemplate"], never, true, [{ directive: typeof i1.DropdownPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
+}
+
+export { DateTimePickerComponent };

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

@@ -0,0 +1,261 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef, TemplateRef, ComponentRef } from '@angular/core';
+import { PopupCloseEvent, PopupRef } from '@nanahoshi/mona-ui/popup';
+import { ButtonVariantProps } from '@nanahoshi/mona-ui/button';
+import { PreventableEvent } from '@nanahoshi/mona-ui/common';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ThemeStyle } from '@nanahoshi/mona-ui/theme';
+import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+import { Observable } from 'rxjs';
+
+type ActionsLayout = "end" | "center" | "start" | "stretched";
+
+interface DialogAction<T = unknown> {
+    cssClass?: string;
+    data?: T;
+    iconOnly?: boolean;
+    look?: ButtonVariantProps["look"];
+    rounded?: ButtonVariantProps["rounded"];
+    text: string;
+}
+
+/**
+ * @description Emitted when the user clicks a dialog action button. Call `preventDefault()` to keep the dialog open.
+ */
+declare class DialogActionEvent<T = unknown> extends PreventableEvent {
+    #private;
+    constructor(action: DialogAction<T>);
+    /**
+     * @description The action that was clicked.
+     */
+    get action(): DialogAction<T>;
+}
+
+declare const dialogBaseThemeVariants: (theme: ThemeStyle) => (props?: ({
+    rounded?: "large" | "medium" | "none" | "small" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const dialogIconThemeVariants: (theme: ThemeStyle) => (props?: ({
+    type?: "success" | "error" | "warning" | "info" | "confirm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const dialogIconContainerThemeVariants: (theme: ThemeStyle) => (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type DialogBaseVariantProps = VariantProps<ReturnType<typeof dialogBaseThemeVariants>>;
+type DialogBaseVariantInput = VariantInputs<DialogBaseVariantProps>;
+type DialogIconContainerVariantProps = VariantProps<ReturnType<typeof dialogIconContainerThemeVariants>>;
+type DialogIconContainerVariantInput = VariantInputs<DialogIconContainerVariantProps>;
+type DialogIconVariantProps = VariantProps<ReturnType<typeof dialogIconThemeVariants>>;
+type DialogIconVariantInput = VariantInputs<DialogIconVariantProps>;
+type DialogVariantProps = DialogBaseVariantProps & DialogIconContainerVariantProps & DialogIconVariantProps;
+type DialogVariantInput = DialogBaseVariantInput & DialogIconContainerVariantInput & DialogIconVariantInput;
+
+declare class DialogComponent implements DialogVariantInput {
+    #private;
+    private readonly contentTemplate;
+    private readonly descriptionTemplate;
+    private readonly footerTemplate;
+    private readonly iconTemplate;
+    private readonly titleTemplate;
+    /**
+     * @description Emitted when the user clicks an action button. Call `event.preventDefault()` on the emitted
+     * `DialogActionEvent` to keep the dialog open.
+     */
+    readonly action: _angular_core.OutputEmitterRef<DialogActionEvent<unknown>>;
+    /**
+     * @description Sets the actions of the dialog.
+     * @default []
+     */
+    readonly actions: _angular_core.InputSignal<Iterable<DialogAction<unknown>>>;
+    /**
+     * @description Sets the layout of the actions in the dialog footer.
+     * @default "end"
+     */
+    readonly actionsLayout: _angular_core.InputSignal<ActionsLayout>;
+    /**
+     * @description Sets the visibility of the close button in the dialog header.
+     * @default true
+     */
+    readonly closable: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Emits when the user clicks on the close button or presses the escape key.
+     * This event is preventable.
+     */
+    readonly close: _angular_core.OutputEmitterRef<PopupCloseEvent<unknown>>;
+    /**
+     * @description Emits when the dialog is closed.
+     */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Sets whether the dialog should close when the escape key is pressed.
+     * @default true
+     */
+    readonly closeOnEscape: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the description of the dialog.
+     */
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    /**
+     * @description Sets the element that should receive focus when the dialog is opened. When omitted, focus
+     * moves to the first focusable element automatically.
+     */
+    readonly focusedElement: _angular_core.InputSignal<string | HTMLElement | ElementRef<HTMLElement> | null | undefined>;
+    /**
+     * @description Sets the height of the dialog.
+     */
+    readonly height: _angular_core.InputSignal<number | undefined>;
+    /**
+     * @description Sets the left position of the dialog.
+     */
+    readonly left: _angular_core.InputSignal<number | undefined>;
+    /**
+     * @description Sets the maximum height of the dialog.
+     */
+    readonly maxHeight: _angular_core.InputSignal<number | undefined>;
+    /**
+     * @description Sets the maximum width of the dialog.
+     */
+    readonly maxWidth: _angular_core.InputSignal<number | undefined>;
+    /**
+     * @description Sets the minimum height of the dialog.
+     */
+    readonly minHeight: _angular_core.InputSignal<number | undefined>;
+    /**
+     * @description Sets the minimum width of the dialog.
+     */
+    readonly minWidth: _angular_core.InputSignal<number | undefined>;
+    /**
+     * @description Sets whether the dialog should have an overlay behind it.
+     * @default true
+     */
+    readonly modal: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Border-radius preset applied to the component.
+     * @default "medium"
+     */
+    readonly rounded: _angular_core.InputSignal<"large" | "medium" | "none" | "small" | null | undefined>;
+    /**
+     * @description Primary text content displayed by the component.
+     */
+    readonly text: _angular_core.InputSignal<string | undefined>;
+    /**
+     * @description Title text displayed in the component header or trigger.
+     */
+    readonly title: _angular_core.InputSignal<string | undefined>;
+    /**
+     * @description Sets the top position of the dialog.
+     */
+    readonly top: _angular_core.InputSignal<number | undefined>;
+    /**
+     * @description Visual severity type of the dialog, controlling its icon and semantic role. Set to `null` to
+     * render the dialog without an icon.
+     * @default "info"
+     */
+    readonly type: _angular_core.InputSignal<"success" | "error" | "warning" | "info" | "confirm" | null | undefined>;
+    /**
+     * @description Sets the width of the dialog.
+     */
+    readonly width: _angular_core.InputSignal<number | undefined>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogComponent, "mona-dialog", never, { "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "actionsLayout": { "alias": "actionsLayout"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "focusedElement": { "alias": "focusedElement"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "left": { "alias": "left"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "modal": { "alias": "modal"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "top": { "alias": "top"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "action": "action"; "close": "close"; "closed": "closed"; }, ["contentTemplate", "descriptionTemplate", "footerTemplate", "iconTemplate", "titleTemplate"], never, true, never>;
+}
+
+declare class DialogContentTemplateDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogContentTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DialogContentTemplateDirective, "ng-template[monaDialogContentTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare class DialogDescriptionTemplateDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogDescriptionTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DialogDescriptionTemplateDirective, "ng-template[monaDialogDescriptionTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare class DialogFooterTemplateDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogFooterTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DialogFooterTemplateDirective, "ng-template[monaDialogFooterTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare class DialogIconTemplateDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogIconTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DialogIconTemplateDirective, "ng-template[monaDialogIconTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare class DialogTitleTemplateDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogTitleTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DialogTitleTemplateDirective, "ng-template[monaDialogTitleTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+type DialogResult = {
+    viaClose: true;
+} | {
+    viaClose: false;
+    action: DialogAction;
+};
+
+interface DialogSettings {
+    actions?: Iterable<DialogAction>;
+    actionsLayout?: ActionsLayout;
+    closable?: boolean;
+    closeOnEscape?: boolean;
+    content?: TemplateRef<unknown>;
+    description?: string;
+    descriptionTemplate?: TemplateRef<unknown>;
+    focusedElement?: HTMLElement | ElementRef<HTMLElement> | string | null;
+    footerTemplate?: TemplateRef<unknown>;
+    height?: number;
+    iconTemplate?: TemplateRef<unknown>;
+    left?: number;
+    maxHeight?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    minWidth?: number;
+    modal?: boolean;
+    rounded?: DialogVariantProps["rounded"];
+    text?: string;
+    title?: string;
+    titleTemplate?: TemplateRef<unknown>;
+    top?: number;
+    type?: DialogVariantProps["type"];
+    width?: number;
+}
+
+interface DialogRefParams<R = unknown> {
+    close: (result?: R) => void;
+    update: (data: Partial<DialogSettings>) => void;
+    get close$(): Observable<PopupCloseEvent<R>>;
+    get closed$(): Observable<void>;
+    get component(): ComponentRef<unknown> | null;
+    get element(): HTMLElement;
+    get height(): number;
+    get popupRef(): PopupRef;
+    get result(): Observable<DialogResult>;
+    get width(): number;
+}
+
+declare class DialogRef<R = unknown> implements DialogRefParams<R> {
+    #private;
+    constructor(options: DialogRefParams<R>);
+    close(result?: R): void;
+    /**
+     * @description Updates the dialog's content and appearance in place without closing and reopening it.
+     * Only the fields provided are changed; anything omitted keeps its current value.
+     */
+    update(data: Partial<DialogSettings>): void;
+    get close$(): Observable<PopupCloseEvent<R>>;
+    get closed$(): Observable<void>;
+    get component(): ComponentRef<unknown> | null;
+    get element(): HTMLElement;
+    get height(): number;
+    get popupRef(): PopupRef;
+    get result(): Observable<DialogResult>;
+    get width(): number;
+}
+
+declare class DialogService {
+    #private;
+    show(settings: DialogSettings): DialogRef;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DialogService>;
+}
+
+export { DialogActionEvent, DialogComponent, DialogContentTemplateDirective, DialogDescriptionTemplateDirective, DialogFooterTemplateDirective, DialogIconTemplateDirective, DialogRef, DialogService, DialogTitleTemplateDirective };
+export type { ActionsLayout, DialogAction, DialogResult, DialogSettings, DialogVariantProps };