@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,238 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef, Signal } from '@angular/core';
+import { DropdownListComponent } from '@nanahoshi/mona-ui/dropdown-list';
+import { PreventableEvent } from '@nanahoshi/mona-ui/common';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+import { ThemeStyle } from '@nanahoshi/mona-ui/theme';
+import { VariantProps } from 'class-variance-authority';
+
+interface InfoTemplateContext {
+    /** The current page number. */
+    currentPage: number;
+    /** The number of items per page. */
+    pageSize: number;
+    /** The number of items to skip. */
+    skip: number;
+    /** The total number of items. */
+    total: number;
+    /** The total number of pages. */
+    totalPages: number;
+}
+
+declare class PagerInfoTemplateDirective {
+    readonly templateRef: TemplateRef<InfoTemplateContext>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PagerInfoTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PagerInfoTemplateDirective, "ng-template[monaPagerInfoTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+interface NavigationButtonsTemplateContext {
+    disabled: boolean;
+    pageSize: number;
+    totalPages: number;
+}
+
+declare class PagerNavigationButtonsTemplateDirective {
+    readonly templateRef: TemplateRef<NavigationButtonsTemplateContext>;
+    readonly type: _angular_core.InputSignal<"first" | "last" | "next" | "previous">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PagerNavigationButtonsTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PagerNavigationButtonsTemplateDirective, "ng-template[monaPagerNavigationButtonsTemplate]", never, { "type": { "alias": "type"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface NumericButtonsTemplateContext {
+    totalPages: number;
+}
+
+declare class PagerNumericButtonsTemplateDirective {
+    readonly templateRef: TemplateRef<NumericButtonsTemplateContext>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PagerNumericButtonsTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PagerNumericButtonsTemplateDirective, "ng-template[monaPagerNumericButtonsTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+interface Page {
+    page: number;
+    text: string;
+}
+
+interface PageChangeEvent {
+    page: number;
+    skip: number;
+    take: number;
+}
+
+type PagerType = "input" | "numeric";
+
+declare class PageSizeChangeEvent extends PreventableEvent {
+    readonly newPageSize: number;
+    readonly oldPageSize: number;
+    constructor(newPageSize: number, oldPageSize: number);
+}
+
+declare const pagerBaseThemeVariants: (theme: ThemeStyle) => (props?: ({
+    rounded?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const pagerInputThemeVariants: (theme: ThemeStyle) => (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const pagerListThemeVariants: (theme: ThemeStyle) => (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type PagerBaseVariantProps = VariantProps<ReturnType<typeof pagerBaseThemeVariants>>;
+type PagerBaseVariantInputs = VariantInputs<PagerBaseVariantProps>;
+type PagerInputVariantProps = VariantProps<ReturnType<typeof pagerInputThemeVariants>>;
+type PagerInputVariantInputs = VariantInputs<PagerInputVariantProps>;
+type PagerListVariantProps = VariantProps<ReturnType<typeof pagerListThemeVariants>>;
+type PagerListVariantInputs = VariantInputs<PagerListVariantProps>;
+type PagerVariantInputs = PagerBaseVariantInputs & PagerInputVariantInputs & PagerListVariantInputs;
+
+declare class PagerComponent implements PagerVariantInputs {
+    #private;
+    private readonly navigationButtonsTemplateList;
+    protected readonly baseClasses: Signal<string>;
+    protected readonly firstPageLabel = "First page";
+    protected readonly firstPageNavigationTemplate: Signal<PagerNavigationButtonsTemplateDirective | undefined>;
+    protected readonly iconSize: Signal<18 | 20 | 22>;
+    protected readonly infoClasses: Signal<string>;
+    protected readonly infoVisible: Signal<boolean>;
+    protected readonly inputClasses: Signal<string>;
+    protected readonly inputValue: _angular_core.WritableSignal<number>;
+    protected readonly jumpNextLabel: Signal<string>;
+    protected readonly jumpPreviousLabel: Signal<string>;
+    protected readonly lastPageLabel = "Last page";
+    protected readonly lastPageNavigationTemplate: Signal<PagerNavigationButtonsTemplateDirective | undefined>;
+    protected readonly listClasses: Signal<string>;
+    protected readonly nextJumperVisible: Signal<boolean>;
+    protected readonly nextPageLabel = "Next page";
+    protected readonly nextPageNavigationTemplate: Signal<PagerNavigationButtonsTemplateDirective | undefined>;
+    protected readonly numericButtonsTemplate: Signal<PagerNumericButtonsTemplateDirective | undefined>;
+    protected readonly page: Signal<number>;
+    protected readonly pageCount: Signal<number>;
+    protected readonly pageInputVisible: _angular_core.WritableSignal<boolean>;
+    protected readonly pageList: Signal<number[]>;
+    protected readonly pageListVisible: _angular_core.WritableSignal<boolean>;
+    protected readonly pageSizeDropdownList: Signal<DropdownListComponent<number> | undefined>;
+    protected readonly pageSizeDropdownData: Signal<number[]>;
+    protected readonly pageSizeTemplate: Signal<TemplateRef<any> | undefined>;
+    protected readonly pagerInfo: Signal<string>;
+    protected readonly pagerInfoTemplate: Signal<PagerInfoTemplateDirective | undefined>;
+    protected readonly pagerInfoTemplateContext: Signal<InfoTemplateContext>;
+    protected readonly pagerPageSize: _angular_core.WritableSignal<number>;
+    protected readonly pages: Signal<Page[]>;
+    protected readonly previousJumperVisible: Signal<boolean>;
+    protected readonly previousPageLabel = "Previous page";
+    protected readonly previousPageNavigationTemplate: Signal<PagerNavigationButtonsTemplateDirective | undefined>;
+    /**
+     * @description Shows the first and last page navigation buttons.
+     * @default true
+     */
+    readonly firstLast: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Enables keyboard navigation on the pager wrapper and its inner controls.
+     * @default true
+     */
+    readonly navigable: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Emitted when the current page changes.
+     */
+    readonly pageChange: _angular_core.OutputEmitterRef<PageChangeEvent>;
+    /**
+     * @description Shows a numeric input for jumping directly to a page.
+     * @default false
+     */
+    readonly pageInput: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Number of items displayed per page.
+     * @default 5
+     */
+    readonly pageSize: _angular_core.InputSignal<number>;
+    /**
+     * @description Emitted when the page size changes. Cancelable via `preventDefault()` on the event.
+     */
+    readonly pageSizeChange: _angular_core.OutputEmitterRef<PageSizeChangeEvent>;
+    /**
+     * @description Page-size options shown in the page-size dropdown. Set to `false` or an empty array to hide the dropdown.
+     * @default [5, 10, 20, 50, 100]
+     */
+    readonly pageSizeValues: _angular_core.InputSignal<boolean | number[]>;
+    /**
+     * @description Shows the previous and next page navigation buttons.
+     * @default true
+     */
+    readonly previousNext: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Collapses sections of the pager as the host element narrows.
+     * @default true
+     */
+    readonly responsive: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Border-radius preset applied to the component.
+     * @default "medium"
+     */
+    readonly rounded: _angular_core.InputSignal<"none" | "small" | "medium" | "large" | "full" | null | undefined>;
+    /**
+     * @description Displays the summary of the current page range and total item count.
+     * @default true
+     */
+    readonly showInfo: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Size preset controlling the component's dimensions.
+     * @default "medium"
+     */
+    readonly size: _angular_core.InputSignal<"small" | "medium" | "large" | null | undefined>;
+    /**
+     * @description Number of items to skip before the current page. Determines the current page together with `pageSize`.
+     * @default 0
+     */
+    readonly skip: _angular_core.InputSignal<number>;
+    /**
+     * @description Total number of items in the paged collection.
+     * @default 0
+     */
+    readonly total: _angular_core.InputSignal<number>;
+    /**
+     * @description Visual mode of the pager: numeric page buttons, or a page-jump input.
+     * @default "numeric"
+     */
+    readonly type: _angular_core.InputSignal<PagerType>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClasses: _angular_core.InputSignal<string>;
+    /**
+     * @description Number of numeric page buttons shown at once before collapsing into jump controls.
+     * @default 5
+     */
+    readonly visiblePages: _angular_core.InputSignal<number>;
+    constructor();
+    protected onJumpNextClick(): void;
+    protected onJumpPreviousClick(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onNextPageClick(): void;
+    protected onPageClick(page: number): void;
+    protected onPageInputBlur(): void;
+    protected onPageSizeValueChange(value: number): void;
+    protected onPreviousPageClick(): void;
+    protected pageItemClasses(active: boolean): string;
+    private activateInnerNavigation;
+    private focusNextTarget;
+    private getFocusableTargets;
+    private handleInnerNavigationKeydown;
+    private isElementDisabled;
+    private isElementHidden;
+    private overrideTabIndex;
+    private preparePages;
+    private resolveFocusableTarget;
+    private restoreManagedFocusTarget;
+    private restoreManagedFocusTargets;
+    private setKeyboardPage;
+    private setPage;
+    private syncFocusableTabIndexes;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PagerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PagerComponent, "mona-pager", never, { "firstLast": { "alias": "firstLast"; "required": false; "isSignal": true; }; "navigable": { "alias": "navigable"; "required": false; "isSignal": true; }; "pageInput": { "alias": "pageInput"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeValues": { "alias": "pageSizeValues"; "required": false; "isSignal": true; }; "previousNext": { "alias": "previousNext"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "showInfo": { "alias": "showInfo"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "skip": { "alias": "skip"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "userClasses": { "alias": "class"; "required": false; "isSignal": true; }; "visiblePages": { "alias": "visiblePages"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; }, ["navigationButtonsTemplateList", "numericButtonsTemplate", "pageSizeTemplate", "pagerInfoTemplate"], never, true, never>;
+}
+
+declare class PagerPageSizeTemplateDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PagerPageSizeTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PagerPageSizeTemplateDirective, "ng-template[monaPagerPageSizeTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+export { PageSizeChangeEvent, PagerComponent, PagerInfoTemplateDirective, PagerNavigationButtonsTemplateDirective, PagerNumericButtonsTemplateDirective, PagerPageSizeTemplateDirective };
+export type { PageChangeEvent };

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

@@ -0,0 +1,35 @@
+import * as _angular_core from '@angular/core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ThemeStyle } from '@nanahoshi/mona-ui/theme';
+import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+import { VariantProps } from 'class-variance-authority';
+
+declare const placeholderBaseThemeVariants: (theme: ThemeStyle) => (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const placeholderTextThemeVariants: (theme: ThemeStyle) => (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type PlaceholderBaseVariantProps = VariantProps<ReturnType<typeof placeholderBaseThemeVariants>>;
+type PlaceholderBaseVariantInput = VariantInputs<PlaceholderBaseVariantProps>;
+type PlaceholderTextVariantProps = VariantProps<ReturnType<typeof placeholderTextThemeVariants>>;
+type PlaceholderTextVariantInput = VariantInputs<PlaceholderTextVariantProps>;
+type PlaceholderVariantInput = PlaceholderBaseVariantInput & PlaceholderTextVariantInput;
+
+declare class PlaceholderComponent implements PlaceholderVariantInput {
+    #private;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    protected readonly textClass: _angular_core.Signal<string>;
+    /**
+     * @description The text to display inside the placeholder.
+     * Takes precedence over projected content if both are provided.
+     * @default ""
+     */
+    readonly text: _angular_core.InputSignal<string>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * Bind this input with the public `class` alias.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PlaceholderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PlaceholderComponent, "mona-placeholder", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { PlaceholderComponent };

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

@@ -0,0 +1,130 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef, ElementRef } from '@angular/core';
+import { PreventableEvent, Position } from '@nanahoshi/mona-ui/common';
+import { PopupRef } from '@nanahoshi/mona-ui/popup';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+import { ThemeStyle } from '@nanahoshi/mona-ui/theme';
+import { VariantProps } from 'class-variance-authority';
+
+declare class PopoverHideEvent extends PreventableEvent {
+    readonly target: Element;
+    readonly popupRef: PopupRef;
+    constructor(target: Element, popupRef: PopupRef);
+}
+
+declare class PopoverShowEvent extends PreventableEvent {
+    readonly target: Element;
+    constructor(target: Element);
+}
+
+declare class PopoverShownEvent {
+    readonly target: Element;
+    readonly popupRef: PopupRef;
+    constructor(target: Element, popupRef: PopupRef);
+}
+
+/**
+ * @description The trigger event for showing/hiding a popover.
+ * "click" toggles the popover on click, "hover" opens on pointer enter and
+ * closes on pointer leave, and "none" disables automatic triggering so the
+ * popover can only be controlled via its `open()`/`close()` methods.
+ * Any other DOM event name is also accepted and used as-is to open the popover.
+ */
+type PopoverTrigger = "click" | "hover" | "none" | (string & {});
+
+declare const popoverBaseThemeVariants: (theme: ThemeStyle) => (props?: ({
+    rounded?: "none" | "large" | "medium" | "small" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const popoverHeaderThemeVariants: (theme: ThemeStyle) => (props?: ({
+    rounded?: "none" | "large" | "medium" | "small" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const popoverContentThemeVariants: (theme: ThemeStyle) => (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const popoverArrowThemeVariants: (theme: ThemeStyle) => (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type PopoverBaseVariantProps = VariantProps<ReturnType<typeof popoverBaseThemeVariants>>;
+type PopoverBaseVariantInputs = VariantInputs<PopoverBaseVariantProps>;
+type PopoverHeaderVariantProps = VariantProps<ReturnType<typeof popoverHeaderThemeVariants>>;
+type PopoverHeaderVariantInputs = VariantInputs<PopoverHeaderVariantProps>;
+type PopoverContentVariantProps = VariantProps<ReturnType<typeof popoverContentThemeVariants>>;
+type PopoverContentVariantInputs = VariantInputs<PopoverContentVariantProps>;
+type PopoverArrowVariantProps = VariantProps<ReturnType<typeof popoverArrowThemeVariants>>;
+type PopoverArrowVariantInputs = VariantInputs<PopoverArrowVariantProps>;
+type PopoverVariantInputs = PopoverBaseVariantInputs & PopoverHeaderVariantInputs & PopoverContentVariantInputs & PopoverArrowVariantInputs;
+
+declare class PopoverComponent implements PopoverVariantInputs {
+    #private;
+    protected readonly arrowClasses: _angular_core.Signal<string>;
+    protected readonly baseClasses: _angular_core.Signal<string>;
+    protected readonly contentClasses: _angular_core.Signal<string>;
+    protected readonly currentArrowPosition: _angular_core.Signal<Position>;
+    protected readonly footerTemplateRef: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly headerClasses: _angular_core.Signal<string>;
+    protected readonly headerId: _angular_core.Signal<string | null>;
+    protected readonly titleTemplateRef: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly templateRef: _angular_core.Signal<TemplateRef<any>>;
+    protected readonly uid: string;
+    protected popupRef: PopupRef | null;
+    /**
+     * @description Display the arrow of the popover.
+     */
+    readonly displayArrow: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Emits when the popover is about to be closed.
+     * This event is preventable.
+     */
+    readonly hide: _angular_core.OutputEmitterRef<PopoverHideEvent>;
+    /**
+     * @description Emits when the popover is hidden.
+     */
+    readonly hidden: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description The position of the popover relative to the target element.
+     */
+    readonly position: _angular_core.InputSignal<Position>;
+    /**
+     * @description The border radius of the popover.
+     */
+    readonly rounded: _angular_core.InputSignal<"none" | "large" | "medium" | "small" | null | undefined>;
+    /**
+     * @description Emits when the popover is about to be shown.
+     * This event is preventable.
+     */
+    readonly show: _angular_core.OutputEmitterRef<PopoverShowEvent>;
+    /**
+     * @description Emits when the popover is shown.
+     */
+    readonly shown: _angular_core.OutputEmitterRef<PopoverShownEvent>;
+    /**
+     * @description The target element or ElementRef to which the popover is attached.
+     */
+    readonly target: _angular_core.InputSignal<Element | ElementRef<any>>;
+    /**
+     * @description The title of the popover.
+     */
+    readonly title: _angular_core.InputSignal<string>;
+    /**
+     * @description The trigger that opens/closes the popover.
+     * "click" toggles on click, "hover" opens on pointer enter and closes on
+     * pointer leave, "none" disables automatic triggering (use `open()`/`close()`
+     * instead). Any other DOM event name is also accepted and used as-is.
+     */
+    readonly trigger: _angular_core.InputSignal<PopoverTrigger>;
+    constructor();
+    close(): void;
+    open(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopoverComponent, "mona-popover", ["monaPopover"], { "displayArrow": { "alias": "displayArrow"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; }, { "hide": "hide"; "hidden": "hidden"; "show": "show"; "shown": "shown"; }, ["footerTemplateRef", "titleTemplateRef"], ["*"], true, never>;
+}
+
+declare class PopoverFooterTemplateDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverFooterTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverFooterTemplateDirective, "ng-template[monaPopoverFooterTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare class PopoverTitleTemplateDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverTitleTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverTitleTemplateDirective, "ng-template[monaPopoverTitleTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+export { PopoverComponent, PopoverFooterTemplateDirective, PopoverHideEvent, PopoverShowEvent, PopoverShownEvent, PopoverTitleTemplateDirective };
+export type { PopoverTrigger };