@nanahoshi/mona-ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,92 @@
+import * as _angular_core from '@angular/core';
+import { Signal, InjectionToken } from '@angular/core';
+import * as _nanahoshi_mona_ui_collapsible from '@nanahoshi/mona-ui/collapsible';
+
+declare const CollapsibleToken: InjectionToken<CollapsibleConfig>;
+/**
+ * The contract a collapsible root exposes to its trigger and content parts.
+ */
+interface CollapsibleConfig {
+    readonly animate: Signal<boolean>;
+    collapse(): void;
+    readonly contentId: string;
+    readonly disabled: Signal<boolean>;
+    expand(): void;
+    readonly expanded: Signal<boolean>;
+    toggle(): void;
+}
+
+/**
+ * @description
+ * Headless disclosure root. Adds no markup of its own, so it can be applied to any element
+ * (`li`, `div`, `section`) and paired with `monaCollapsibleTrigger` and `monaCollapsibleContent`.
+ */
+declare class CollapsibleDirective implements CollapsibleConfig {
+    protected readonly state: _angular_core.Signal<"open" | "closed">;
+    /**
+     * @description Enables the height transition applied to the collapsible content.
+     * @default true
+     */
+    readonly animate: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Id assigned to the content element and referenced by the trigger through `aria-controls`.
+     */
+    readonly contentId: string;
+    /**
+     * @description Suppresses toggling through the trigger. `expand()` and `collapse()` still apply.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets whether the content is expanded. Supports two-way binding.
+     * @default false
+     */
+    readonly expanded: _angular_core.ModelSignal<boolean>;
+    collapse(): void;
+    expand(): void;
+    toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CollapsibleDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CollapsibleDirective, "[monaCollapsible]", ["monaCollapsible"], { "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, never, true, never>;
+}
+
+/**
+ * @description
+ * Animates the height of the collapsible content between `0` and its measured size. Adds no wrapper
+ * element, so it can be applied directly to a `ul`, `div` or any other container with any number of children.
+ *
+ * The measured size is also published on the host as the `--mona-collapsible-content-height` custom
+ * property, so consumers can drive their own animation instead (pair it with `[animate]="false"` on the root).
+ */
+declare class CollapsibleContentDirective {
+    #private;
+    protected readonly collapsible: _nanahoshi_mona_ui_collapsible.CollapsibleConfig;
+    protected readonly inert: _angular_core.Signal<true | null>;
+    protected readonly state: _angular_core.Signal<"open" | "closed">;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CollapsibleContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CollapsibleContentDirective, "[monaCollapsibleContent]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * @description
+ * Toggles the closest `monaCollapsible`. Wires `aria-expanded` / `aria-controls` automatically and
+ * only adds `role`, `tabindex` and keyboard handling when the host element is not already interactive.
+ */
+declare class CollapsibleTriggerDirective {
+    #private;
+    protected readonly ariaDisabled: _angular_core.Signal<"true" | null>;
+    protected readonly collapsible: _nanahoshi_mona_ui_collapsible.CollapsibleConfig;
+    protected readonly nativeDisabled: _angular_core.Signal<"" | null>;
+    protected readonly role: string | null;
+    protected readonly state: _angular_core.Signal<"open" | "closed">;
+    protected readonly tabIndex: _angular_core.Signal<0 | -1 | null>;
+    protected readonly type: string | null;
+    protected onClick(): void;
+    protected onEnterKeydown(event: Event): void;
+    protected onSpaceKeydown(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CollapsibleTriggerDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CollapsibleTriggerDirective, "[monaCollapsibleTrigger]", never, {}, {}, never, never, true, never>;
+}
+
+export { CollapsibleContentDirective, CollapsibleDirective, CollapsibleToken, CollapsibleTriggerDirective };
+export type { CollapsibleConfig };

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

@@ -6,6 +6,8 @@ type SelectionMode = "single" | "multiple";
 
 type ScrollDirection = "left" | "right";
 
+type ClassInputType = string | string[] | Record<string, unknown> | null | undefined;
+
 type ColorMode = "hsv" | "rgb";
 type ColorOutputFormat = "hex" | "rgb" | "hsl";
 
@@ -369,6 +371,8 @@ declare class IterablePatchStore<TItem, TId> implements IIterablePatchStore<TIte
 declare const createIterablePatchStore: <TItem, TId>(options: IterablePatchStoreOptions<TItem, TId>) => IIterablePatchStore<TItem, TId>;
 declare const createObjectPatchStore: <T>(options: ObjectPatchStoreOptions<T>) => IObjectPatchStore<T>;
 
+declare const classInputToClass: (input: ClassInputType) => string;
+
 /**
  * Calculates the percentage of a value within a given range, rounded to the specified precision.
  * @param value The current value.
@@ -382,5 +386,5 @@ declare const getPercentage: (value: number, min: number, max: number, precision
 
 declare function moveIndices<T>(array: T[], indices: number[], offset: number): T[];
 
-export { AnyPipe, ContainsPipe, FilterChangeEvent, IterablePatchStore, ObjectPatchStore, PreventableEvent, SlicePipe, TakeFirstPipe, buildNested, createIterablePatchStore, createObjectPatchStore, deepEquals, deepMerge, getPercentage, isEmptyObject, isPlainObject, mergeInto, mergePatchInto, moveIndices, patchAt, prunePatch, setAt };
-export type { ArrayStrategy, BaseChangeStrategy, ColorMode, ColorOutputFormat, DataType, DeepMergeOptions, DeepPartial, FilterOperator, FilterableOptions, IIterablePatchStore, IObjectPatchStore, IterablePatchStoreOptions, ObjectPatchStoreOptions, Orientation, PaletteType, Path, PathValue, Position, ScrollDirection, SelectionMode, VirtualScrollOptions };
+export { AnyPipe, ContainsPipe, FilterChangeEvent, IterablePatchStore, ObjectPatchStore, PreventableEvent, SlicePipe, TakeFirstPipe, buildNested, classInputToClass, createIterablePatchStore, createObjectPatchStore, deepEquals, deepMerge, getPercentage, isEmptyObject, isPlainObject, mergeInto, mergePatchInto, moveIndices, patchAt, prunePatch, setAt };
+export type { ArrayStrategy, BaseChangeStrategy, ClassInputType, ColorMode, ColorOutputFormat, DataType, DeepMergeOptions, DeepPartial, FilterOperator, FilterableOptions, IIterablePatchStore, IObjectPatchStore, IterablePatchStoreOptions, ObjectPatchStoreOptions, Orientation, PaletteType, Path, PathValue, Position, ScrollDirection, SelectionMode, VirtualScrollOptions };

package/types/nanahoshi-mona-ui-expansion-panel.d.ts

@@ -1,5 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
+import { CollapsibleConfig } from '@nanahoshi/mona-ui/collapsible';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantInputs } from '@nanahoshi/mona-ui/internal';
 import { VariantProps } from 'class-variance-authority';
@@ -27,16 +28,21 @@ type ExpansionPanelIconContainerVariantProps = VariantProps<typeof expansionPane
 type ExpansionPanelIconContainerVariantInput = VariantInputs<ExpansionPanelIconContainerVariantProps>;
 type ExpansionPanelVariantInput = ExpansionPanelBaseVariantInput & Omit<ExpansionPanelHeaderVariantInput, "collapsed"> & ExpansionPanelContentVariantInput & Omit<ExpansionPanelIconContainerVariantInput, "hasTemplate">;
 
-declare class ExpansionPanelComponent implements ExpansionPanelVariantInput {
+declare class ExpansionPanelComponent implements ExpansionPanelVariantInput, CollapsibleConfig {
     protected readonly actionsTemplateList: _angular_core.Signal<readonly TemplateRef<any>[]>;
     protected readonly baseClass: _angular_core.Signal<string>;
     protected readonly contentClass: _angular_core.Signal<string>;
-    protected readonly contentId: string;
     protected readonly headerClass: _angular_core.Signal<string>;
     protected readonly headerTitleClass: _angular_core.Signal<string>;
     protected readonly iconContainerClass: _angular_core.Signal<string>;
     protected readonly iconTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     protected readonly titleTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    /**
+     * @description Always enabled. Satisfies the `CollapsibleConfig` contract for `monaCollapsibleTrigger`;
+     * this component doesn't use `monaCollapsibleContent`, so no animation ever consults it.
+     */
+    readonly animate: _angular_core.Signal<boolean>;
+    readonly contentId: string;
     /**
      * @description Disables header interaction, suppressing click and keyboard toggling.
      * @default false
@@ -62,7 +68,9 @@ declare class ExpansionPanelComponent implements ExpansionPanelVariantInput {
      * @default ""
      */
     readonly userClass: _angular_core.InputSignal<string>;
-    protected toggle(): void;
+    collapse(): void;
+    expand(): void;
+    toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ExpansionPanelComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ExpansionPanelComponent, "mona-expansion-panel", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "userClass": { "alias": "userClass"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, ["actionsTemplateList", "iconTemplate", "titleTemplate"], ["*"], true, never>;
 }

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

@@ -1,8 +1,8 @@
 import * as _angular_core from '@angular/core';
 import { Signal, TemplateRef, ElementRef, InjectionToken, OnInit } from '@angular/core';
 import * as _mirei_ts_collections from '@mirei/ts-collections';
+import { PreventableEvent, ClassInputType } from '@nanahoshi/mona-ui/common';
 import { PopupCloseEvent, PopupRef, ConnectionPoint, PopupOffset } from '@nanahoshi/mona-ui/popup';
-import { PreventableEvent } from '@nanahoshi/mona-ui/common';
 import { Subject } from 'rxjs';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -165,6 +165,7 @@ declare class PopupMenuComponent implements PopupMenuVariantInput {
      * This will be applied to the root menu and all submenus.
      */
     readonly width: _angular_core.InputSignal<string | number | undefined>;
+    readonly userClass: _angular_core.InputSignalWithTransform<string | undefined, ClassInputType>;
     constructor();
     clearFocusRestoration(): void;
     closeMenu(): void;
@@ -178,7 +179,7 @@ declare class PopupMenuComponent implements PopupMenuVariantInput {
     private setSubscriptions;
     private setTriggerSubscription;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopupMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopupMenuComponent, "mona-popup-menu", never, { "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; "anchorConnectionPoint": { "alias": "anchorConnectionPoint"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "menuId": { "alias": "id"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "popupConnectionPoint": { "alias": "popupConnectionPoint"; "required": false; "isSignal": true; }; "precise": { "alias": "precise"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": true; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "close": "close"; "menuClick": "menuClick"; "navigate": "navigate"; "open": "open"; }, ["groupTemplateConfig", "iconTemplateConfig", "nestedComponents", "shortcutTemplateConfig", "textTemplateConfig"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopupMenuComponent, "mona-popup-menu", never, { "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; "anchorConnectionPoint": { "alias": "anchorConnectionPoint"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "menuId": { "alias": "id"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "popupConnectionPoint": { "alias": "popupConnectionPoint"; "required": false; "isSignal": true; }; "precise": { "alias": "precise"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": true; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "close": "close"; "menuClick": "menuClick"; "navigate": "navigate"; "open": "open"; }, ["groupTemplateConfig", "iconTemplateConfig", "nestedComponents", "shortcutTemplateConfig", "textTemplateConfig"], never, true, never>;
 }
 
 declare const PopupMenuToken: InjectionToken<PopupMenuConfig>;
@@ -289,17 +290,18 @@ declare class PopupMenuItemComponent implements PopupMenuConfig, OnInit {
 }
 
 declare class PopupMenuGroupComponent implements PopupMenuConfig {
+    #private;
     protected readonly groupTemplateConfig: _angular_core.Signal<_nanahoshi_mona_ui_popup_menu.PopupTemplateConfig | undefined>;
     protected readonly items: _angular_core.Signal<readonly PopupMenuConfig[]>;
     readonly origin: PopupMenuOrigin;
     /**
      * @description Sets the title of the menu group.
      */
-    readonly title: _angular_core.InputSignal<string>;
+    readonly title: _angular_core.InputSignal<string | undefined>;
     readonly type = PopupMenuItemType.MenuGroup;
     getPopupMenuItem(): PopupMenuItem[];
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopupMenuGroupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopupMenuGroupComponent, "mona-popup-menu-group", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; }, {}, ["groupTemplateConfig", "items"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopupMenuGroupComponent, "mona-popup-menu-group", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; }, {}, ["groupTemplateConfig", "items"], never, true, never>;
 }
 
 declare class PopupMenuRadioGroupComponent implements PopupMenuConfig, OnInit {