@nanahoshi/mona-ui 0.1.0

package/types/nanahoshi-mona-ui-internal-filter-input.d.ts

@@ -0,0 +1,25 @@
+import * as _angular_core from '@angular/core';
+import { OnInit } from '@angular/core';
+import { FilterChangeEvent } from '@nanahoshi/mona-ui/common';
+import { Subject } from 'rxjs';
+
+declare class FilterInputComponent implements OnInit {
+    #private;
+    protected readonly filter$: Subject<string>;
+    protected readonly filterText: _angular_core.WritableSignal<string>;
+    readonly debounce: _angular_core.InputSignal<number>;
+    readonly filter: _angular_core.InputSignal<string>;
+    readonly filterChange: _angular_core.OutputEmitterRef<FilterChangeEvent>;
+    readonly inputBlur: _angular_core.OutputEmitterRef<FocusEvent>;
+    readonly inputFocus: _angular_core.OutputEmitterRef<FocusEvent>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<"large" | "medium" | "small" | null | undefined>;
+    constructor();
+    focus(): void;
+    ngOnInit(): void;
+    private setSubscriptions;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FilterInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterInputComponent, "mona-filter-input", never, { "debounce": { "alias": "debounce"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "filterChange": "filterChange"; "inputBlur": "inputBlur"; "inputFocus": "inputFocus"; }, never, never, true, never>;
+}
+
+export { FilterInputComponent };

package/types/nanahoshi-mona-ui-internal-indicator-icon.d.ts

@@ -0,0 +1,28 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { LucideIconInput } from '@lucide/angular';
+
+type IndicatorIconPreset = "clear" | "dropdown" | "loading";
+declare class IndicatorIconComponent {
+    #private;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    protected readonly hasProjectedContent: _angular_core.WritableSignal<boolean>;
+    protected readonly iconClass: _angular_core.Signal<string>;
+    protected readonly iconToRender: _angular_core.Signal<LucideIconInput | null>;
+    protected readonly projectedContent: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    readonly activate: _angular_core.OutputEmitterRef<KeyboardEvent | MouseEvent>;
+    readonly icon: _angular_core.InputSignal<LucideIconInput | null>;
+    readonly interactive: _angular_core.InputSignal<boolean>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly preset: _angular_core.InputSignal<IndicatorIconPreset | null>;
+    readonly size: _angular_core.InputSignal<number>;
+    readonly userClass: _angular_core.InputSignal<string>;
+    constructor();
+    protected onActivate(event: Event): void;
+    private hasContent;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IndicatorIconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<IndicatorIconComponent, "mona-indicator-icon", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "preset": { "alias": "preset"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "activate": "activate"; }, never, ["*"], true, never>;
+}
+
+export { IndicatorIconComponent };
+export type { IndicatorIconPreset };

package/types/nanahoshi-mona-ui-internal-list.d.ts

@@ -0,0 +1,269 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, Signal, TemplateRef } from '@angular/core';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { FilterChangeEvent, FilterableOptions, VirtualScrollOptions } from '@nanahoshi/mona-ui/common';
+import { Selector, Predicate, ImmutableSet } from '@mirei/ts-collections';
+import { Subject, ReplaySubject } from 'rxjs';
+
+interface ListItemOptions<T> {
+    data: T;
+    header?: string;
+}
+declare class ListItem<TData> {
+    readonly data: TData;
+    readonly header: string;
+    readonly uid: string;
+    constructor(options: ListItemOptions<TData>);
+}
+
+type ListKeySelector<T, K = unknown> = string | Selector<T, K> | null;
+
+type ListSizeType = string | null | undefined;
+type ListSizeInputType = ListSizeType | number;
+
+interface SelectionChangeEvent<T> {
+    item: ListItem<T>;
+    source: SelectionSource;
+}
+type SelectionSource = {
+    via: "mouse";
+} | {
+    via: "keyboard";
+    key: string;
+};
+
+type OrderByOptions<T, R> = {
+    orderBy?: never;
+    orderByDirection?: never;
+} | {
+    /**
+     * The field to order the items of per group. If not specified, the items of the group will not be ordered.
+     */
+    orderBy: string | Selector<T, R>;
+    /**
+     * The direction to order the items of per group.
+     */
+    orderByDirection?: "asc" | "desc";
+};
+type GroupableOptions<T = unknown, R = unknown> = {
+    /**
+     * Whether to group the items. If not specified, the items will not be grouped.
+     */
+    enabled?: boolean;
+    /**
+     * The direction to order the group headers.
+     * If not specified, the group headers will be ordered in ascending order.
+     */
+    headerOrder?: "asc" | "desc";
+} & OrderByOptions<T, R>;
+
+type NavigationMode = "highlight" | "select";
+
+interface NavigableOptions {
+    enabled: boolean;
+    mode: NavigationMode;
+    wrap: boolean;
+}
+
+type NavigationDirection = "next" | "previous" | "first" | "last" | "pageup" | "pagedown";
+
+interface PagerSettings {
+    enabled: boolean;
+    firstLast: boolean;
+    pageSizeValues: number[] | boolean;
+    previousNext: boolean;
+    showInfo: boolean;
+    type: "numeric" | "input";
+    visiblePages: number;
+}
+
+interface PageState {
+    page: number;
+    skip: number;
+    take: number;
+}
+
+type SelectableOptions = {
+    checkboxes?: boolean;
+    enabled?: boolean;
+    mode: "single";
+    toggleable?: boolean;
+} | {
+    checkboxes?: boolean;
+    enabled?: boolean;
+    mode: "multiple";
+};
+
+declare class ListService<TData> {
+    #private;
+    readonly disabledBy: _angular_core.WritableSignal<string | Predicate<TData>>;
+    readonly filterChange$: Subject<FilterChangeEvent>;
+    readonly filterInputVisible: _angular_core.WritableSignal<boolean>;
+    readonly filterPlaceholder: _angular_core.WritableSignal<string>;
+    readonly filterText: _angular_core.WritableSignal<string>;
+    readonly filterableOptions: _angular_core.WritableSignal<FilterableOptions>;
+    readonly focus$: Subject<void>;
+    readonly focusableItem: _angular_core.Signal<ListItem<TData> | null>;
+    readonly groupBy: _angular_core.WritableSignal<ListKeySelector<TData>>;
+    readonly groupableOptions: _angular_core.WritableSignal<GroupableOptions<TData, any>>;
+    readonly highlightedItem: _angular_core.WritableSignal<ListItem<TData> | null>;
+    readonly itemFocusOut$: Subject<ListItem<TData>>;
+    readonly navigatedItem$: Subject<ListItem<TData> | null>;
+    readonly navigableOptions: _angular_core.WritableSignal<NavigableOptions>;
+    readonly pageState: _angular_core.WritableSignal<PageState>;
+    readonly pageableOptions: _angular_core.WritableSignal<PagerSettings>;
+    readonly scrollToItem$: ReplaySubject<{
+        item: ListItem<TData>;
+        focus: boolean;
+    }>;
+    readonly selectableOptions: _angular_core.WritableSignal<SelectableOptions>;
+    readonly selectedKeys: _angular_core.WritableSignal<ImmutableSet<any>>;
+    readonly selectedKeysChange$: Subject<any[]>;
+    readonly selectedListItems: _angular_core.Signal<ImmutableSet<ListItem<TData>>>;
+    readonly selectionChange$: Subject<ListItem<TData>>;
+    readonly textField: _angular_core.WritableSignal<string | Selector<TData, string>>;
+    readonly valueField: _angular_core.WritableSignal<string | Selector<TData, any>>;
+    readonly viewItems: _angular_core.Signal<ImmutableSet<ListItem<TData>>>;
+    readonly virtualScrollOptions: _angular_core.WritableSignal<VirtualScrollOptions>;
+    readonly itemPositions: _angular_core.Signal<Map<string, {
+        position: number;
+        total: number;
+    }>>;
+    getItemPosition(item: ListItem<TData>): {
+        position: number;
+        total: number;
+    } | null;
+    clearFilter(): void;
+    clearHighlightedItem(): void;
+    clearSelections(): void;
+    cycleThroughMatchedItems(buffer: string): ListItem<TData> | null;
+    deselectItems(item: Iterable<ListItem<TData>>): void;
+    getFilterDebounceDuration(): number;
+    getGroupField(item: ListItem<TData>): any;
+    getItemText(item: ListItem<TData>): string;
+    getMatchingFilteredItem(text: string): ListItem<TData> | null;
+    isDisabled(item: ListItem<TData>): boolean;
+    isFilteringEnabled(): boolean;
+    isHighlighted(item: ListItem<TData>): boolean;
+    isSelected(item: ListItem<TData>): boolean;
+    navigate(direction: NavigationDirection, mode: NavigationMode, focus: boolean): ListItem<TData> | null;
+    notifySelectionChange(item: ListItem<TData>): void;
+    scrollToItem(item: ListItem<TData>, focus: boolean): void;
+    selectItem(item: ListItem<TData>, scroll?: boolean, focus?: boolean): void;
+    setData(data: Iterable<TData>): void;
+    setDisabledBy(disabledBy: string | Predicate<TData>): void;
+    setFilter(filter: string): void;
+    setFilterPlaceholder(placeholder: string): void;
+    setFilterableOptions(options: Partial<FilterableOptions>): void;
+    setGroupBy(groupSelector: ListKeySelector<TData>): void;
+    setGroupableOptions(options: GroupableOptions<TData, any>): void;
+    setNavigableOptions(options: Partial<NavigableOptions>): void;
+    setPageableOptions(settings: PagerSettings): void;
+    setSelectableOptions(options: Partial<SelectableOptions>): void;
+    setSelectedDataItems(dataItems: Iterable<TData>): void;
+    setSelectedKeys(selectedKeys: Iterable<any>): void;
+    setTextField(textField: string | Selector<TData, string>): void;
+    setValueField(valueField: string | Selector<TData, any>): void;
+    setVirtualScrollOptions(options: VirtualScrollOptions): void;
+    private filterItem;
+    private getDataItemSelectionKey;
+    private getOrderKey;
+    private getPreviousItemForNavigation;
+    private getSelectionKey;
+    private navigateForMultipleSelection;
+    private navigateFirstForSingleSelection;
+    private navigateForSingleSelection;
+    private navigateLastForSingleSelection;
+    private navigateNextForSingleSelection;
+    private navigatePreviousForSingleSelection;
+    private skipTakeWithGroups;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListService<any>, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ListService<any>>;
+}
+
+declare class ListComponent<TData> implements OnInit {
+    #private;
+    private readonly filterInput;
+    protected readonly classes: Signal<string>;
+    protected readonly footerTemplate: Signal<TemplateRef<any> | undefined>;
+    protected readonly groupHeaderClasses: Signal<string>;
+    protected readonly groupHeaderTemplate: Signal<TemplateRef<any> | undefined>;
+    protected readonly headerTemplate: Signal<TemplateRef<any> | undefined>;
+    protected readonly hostTabIndex: Signal<0 | -1>;
+    protected readonly itemTemplate: Signal<TemplateRef<any> | undefined>;
+    protected readonly innerListClasses: Signal<string>;
+    protected readonly listHeight: Signal<string | undefined>;
+    protected readonly listMaxHeight: Signal<string | undefined>;
+    protected readonly listMaxWidth: Signal<string | undefined>;
+    protected readonly listService: ListService<TData>;
+    protected readonly listWidth: Signal<ListSizeType>;
+    protected readonly noDataTemplate: Signal<TemplateRef<any> | undefined>;
+    protected readonly viewportHeight: Signal<ListSizeType>;
+    protected readonly virtualScrollViewport: Signal<CdkVirtualScrollViewport | undefined>;
+    /**
+     * @description Accessible name for the list's `listbox` element. Describe what the list represents.
+     * @default ""
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly data: _angular_core.InputSignal<Iterable<TData> | null | undefined>;
+    readonly focusOnMount: _angular_core.InputSignal<boolean>;
+    readonly height: _angular_core.InputSignal<ListSizeInputType>;
+    readonly itemSelect: _angular_core.OutputEmitterRef<SelectionChangeEvent<TData>>;
+    readonly listClass: _angular_core.InputSignal<string>;
+    readonly listId: _angular_core.InputSignal<string>;
+    readonly listItemClass: _angular_core.InputSignal<string>;
+    readonly listItemStyle: _angular_core.InputSignal<Partial<CSSStyleDeclaration>>;
+    readonly listStyle: _angular_core.InputSignal<Partial<CSSStyleDeclaration>>;
+    readonly maxHeight: _angular_core.InputSignal<ListSizeInputType>;
+    readonly maxWidth: _angular_core.InputSignal<ListSizeInputType>;
+    readonly size: _angular_core.InputSignal<"large" | "medium" | "small" | null | undefined>;
+    readonly textField: _angular_core.InputSignal<ListKeySelector<TData, string> | undefined>;
+    readonly width: _angular_core.InputSignal<ListSizeInputType>;
+    constructor();
+    ngOnInit(): void;
+    protected onFilterChange(event: FilterChangeEvent): void;
+    protected onListItemCheck(item: ListItem<TData>): void;
+    protected onListItemClick(item: ListItem<TData>): void;
+    private cycleThroughMatchedItems;
+    private focusToItem;
+    private handleNavigation;
+    private handlePageScroll;
+    private scrollToItem;
+    private selectItem;
+    private setInitialSelectionOrFocus;
+    private setKeyboardEvents;
+    private setNavigationEvents;
+    private setSubscriptions;
+    private setTypeaheadSubscription;
+    private toggleItem;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListComponent<any>, "mona-list", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "focusOnMount": { "alias": "focusOnMount"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "listClass": { "alias": "listClass"; "required": false; "isSignal": true; }; "listId": { "alias": "listId"; "required": false; "isSignal": true; }; "listItemClass": { "alias": "listItemClass"; "required": false; "isSignal": true; }; "listItemStyle": { "alias": "listItemStyle"; "required": false; "isSignal": true; }; "listStyle": { "alias": "listStyle"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "itemSelect": "itemSelect"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate"], never, true, never>;
+}
+
+declare class ListFooterTemplateDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListFooterTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ListFooterTemplateDirective, "ng-template[monaListFooterTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare class ListGroupHeaderTemplateDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListGroupHeaderTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ListGroupHeaderTemplateDirective, "ng-template[monaListGroupHeaderTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare class ListHeaderTemplateDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListHeaderTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ListHeaderTemplateDirective, "ng-template[monaListHeaderTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare class ListItemTemplateDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListItemTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ListItemTemplateDirective, "ng-template[monaListItemTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare class ListNoDataTemplateDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListNoDataTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ListNoDataTemplateDirective, "ng-template[monaListNoDataTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+export { ListComponent, ListFooterTemplateDirective, ListGroupHeaderTemplateDirective, ListHeaderTemplateDirective, ListItem, ListItemTemplateDirective, ListNoDataTemplateDirective, ListService };
+export type { GroupableOptions, ListKeySelector, ListSizeInputType, NavigableOptions, NavigationDirection, NavigationMode, PagerSettings, SelectableOptions, SelectionChangeEvent };