@nanahoshi/mona-ui 0.11.3 → 0.12.0

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

@@ -29,6 +29,7 @@ interface ColumnConfig {
     readonly editTemplate: TemplateRef<unknown> | null;
     readonly editable: boolean;
     readonly field: string;
+    readonly filterable: boolean;
     readonly format: ColumnFormat | null;
     readonly footerTemplate: TemplateRef<unknown> | null;
     readonly groupFooterTemplate: TemplateRef<unknown> | null;
@@ -771,6 +772,10 @@ declare class GridColumnComponent implements GridColumnDefinition {
      * @description The field name of the data property to display in this column.
      */
     readonly field: _angular_core.InputSignal<string>;
+    /**
+     * @description Whether this column can be filtered when grid filtering is enabled. Has no effect if filtering is disabled on the grid.
+     */
+    readonly filterable: _angular_core.InputSignal<boolean>;
     /**
      * @description Formats the displayed cell value. String formats apply to date, datetime, and time columns; formatter functions replace the cell text.
      */
@@ -813,7 +818,7 @@ declare class GridColumnComponent implements GridColumnDefinition {
     readonly width: _angular_core.InputSignal<number | null | undefined>;
     getColumn(): Column;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridColumnComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GridColumnComponent, "mona-grid-column", never, { "aggregate": { "alias": "aggregate"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "field": { "alias": "field"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "locked": { "alias": "locked"; "required": false; "isSignal": true; }; "lockedPosition": { "alias": "lockedPosition"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "stateKey": { "alias": "stateKey"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, {}, ["cellTemplate", "editTemplate", "footerTemplate", "groupFooterTemplate", "headerTemplate", "titleTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GridColumnComponent, "mona-grid-column", never, { "aggregate": { "alias": "aggregate"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "field": { "alias": "field"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "locked": { "alias": "locked"; "required": false; "isSignal": true; }; "lockedPosition": { "alias": "lockedPosition"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "stateKey": { "alias": "stateKey"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, {}, ["cellTemplate", "editTemplate", "footerTemplate", "groupFooterTemplate", "headerTemplate", "titleTemplate"], never, true, never>;
 }
 
 interface ColumnFilterState {

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

@@ -0,0 +1,295 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef, TemplateRef } from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
+import { LucideCircle, LucideDiamond, LucideFlame, LucideHeart, LucideStar } from '@lucide/angular';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+
+/**
+ * @description Rendering context passed to the default, selected, and hovered item templates.
+ */
+interface RatingItemTemplateContext {
+    /**
+     * Zero-based item index.
+     */
+    readonly $implicit: number;
+    /**
+     * Zero-based item index.
+     */
+    readonly index: number;
+    /**
+     * One-based value represented by this item.
+     */
+    readonly itemValue: number;
+    /**
+     * Visible fill amount between 0 and 1.
+     */
+    readonly fill: number;
+    /**
+     * Whether the visible state comes from the committed value.
+     */
+    readonly selected: boolean;
+    /**
+     * Whether the visible state comes from pointer preview.
+     */
+    readonly hovered: boolean;
+}
+
+/**
+ * @description Built-in icon names available for the default rating visuals.
+ */
+type RatingIconName = "circle" | "diamond" | "flame" | "heart" | "star";
+
+/**
+ * @description Position of the visible label relative to the rating items.
+ * @default "after"
+ */
+type RatingLabelPosition = "before" | "after";
+
+/**
+ * @description Selection granularity of the rating. `"item"` selects whole items, `"half"` selects
+ * half-item increments.
+ * @default "item"
+ */
+type RatingPrecision = "item" | "half";
+
+/**
+ * @description How the selected value is visualized across the items. `"continuous"` fills every
+ * item up to the selected value, `"single"` fills only the item representing the selected value.
+ * @default "continuous"
+ */
+type RatingSelectionMode = "continuous" | "single";
+
+declare const ratingContainerThemeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const ratingControlThemeVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const ratingItemThemeVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const ratingIconThemeVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const ratingOverlayClipThemeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const ratingOverlayContentThemeVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const ratingLabelThemeVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type RatingContainerVariantProps = VariantProps<typeof ratingContainerThemeVariants>;
+type RatingContainerVariantInput = VariantInputs<RatingContainerVariantProps>;
+type RatingControlVariantProps = VariantProps<typeof ratingControlThemeVariants>;
+type RatingControlVariantInput = VariantInputs<RatingControlVariantProps>;
+type RatingItemVariantProps = VariantProps<typeof ratingItemThemeVariants>;
+type RatingItemVariantInput = VariantInputs<RatingItemVariantProps>;
+type RatingIconVariantProps = VariantProps<typeof ratingIconThemeVariants>;
+type RatingIconVariantInput = VariantInputs<RatingIconVariantProps>;
+type RatingOverlayClipVariantProps = VariantProps<typeof ratingOverlayClipThemeVariants>;
+type RatingOverlayClipVariantInput = VariantInputs<RatingOverlayClipVariantProps>;
+type RatingOverlayContentVariantProps = VariantProps<typeof ratingOverlayContentThemeVariants>;
+type RatingOverlayContentVariantInput = VariantInputs<RatingOverlayContentVariantProps>;
+type RatingLabelVariantProps = VariantProps<typeof ratingLabelThemeVariants>;
+type RatingLabelVariantInput = VariantInputs<RatingLabelVariantProps>;
+type RatingVariantProps = RatingContainerVariantProps & RatingControlVariantProps & RatingItemVariantProps & RatingIconVariantProps & RatingOverlayClipVariantProps & RatingOverlayContentVariantProps & RatingLabelVariantProps;
+type RatingVariantInput = RatingContainerVariantInput & RatingControlVariantInput & RatingItemVariantInput & RatingIconVariantInput & RatingOverlayClipVariantInput & RatingOverlayContentVariantInput & RatingLabelVariantInput;
+
+interface RatingItemDescriptor {
+    readonly index: number;
+    readonly itemValue: number;
+}
+declare class RatingComponent implements RatingVariantInput, FormValueControl<number> {
+    protected readonly activeState: _angular_core.Signal<"hovered" | "selected">;
+    protected readonly containerClasses: _angular_core.Signal<string>;
+    protected readonly controlClasses: _angular_core.Signal<string>;
+    protected readonly controlElement: _angular_core.Signal<ElementRef<HTMLElement>>;
+    protected readonly displayValue: _angular_core.Signal<number>;
+    protected readonly effectiveAriaLabelledBy: _angular_core.Signal<string | null>;
+    protected readonly effectiveAriaValueText: _angular_core.Signal<string>;
+    protected readonly effectiveTabIndex: _angular_core.Signal<number>;
+    protected readonly hoveredTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly iconClasses: _angular_core.Signal<string>;
+    protected readonly iconToRender: _angular_core.Signal<typeof LucideCircle | typeof LucideDiamond | typeof LucideFlame | typeof LucideHeart | typeof LucideStar>;
+    protected readonly interactionDisabled: _angular_core.Signal<boolean>;
+    protected readonly interactionStep: _angular_core.Signal<number>;
+    protected readonly invalidState: _angular_core.Signal<boolean>;
+    protected readonly itemClasses: _angular_core.Signal<string>;
+    protected readonly itemTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly items: _angular_core.Signal<readonly RatingItemDescriptor[]>;
+    protected readonly labelClasses: _angular_core.Signal<string>;
+    protected readonly labelId: string;
+    protected readonly normalizedValue: _angular_core.Signal<number>;
+    protected readonly overlayClipClasses: _angular_core.Signal<string>;
+    protected readonly overlayColor: _angular_core.Signal<string>;
+    protected readonly overlayContentClasses: _angular_core.Signal<string>;
+    protected readonly overlayIconClasses: _angular_core.Signal<string>;
+    protected readonly overlayTemplate: _angular_core.Signal<TemplateRef<RatingItemTemplateContext> | undefined>;
+    protected readonly previewActive: _angular_core.Signal<boolean>;
+    protected readonly previewValue: _angular_core.WritableSignal<number | null>;
+    protected readonly selectedTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    /**
+     * @description Associates help text or an error description with the focusable rating control.
+     * @default null
+     */
+    readonly ariaDescribedBy: _angular_core.InputSignal<string | null>;
+    /**
+     * @description Explicit accessible name for the rating control. Provide `aria-label`,
+     * `aria-labelledby`, or `label` so assistive technology can announce the control.
+     * @default null
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    /**
+     * @description IDs of external elements providing the accessible name for the rating control.
+     * @default null
+     */
+    readonly ariaLabelledBy: _angular_core.InputSignal<string | null>;
+    /**
+     * @description Custom screen-reader value announcement. Receives the normalized value and the
+     * item count and returns the string to expose through `aria-valuetext`.
+     * @default null
+     */
+    readonly ariaValueText: _angular_core.InputSignal<((value: number, maximum: number) => string) | null>;
+    /**
+     * @description CSS color for selected and hovered rating visuals. Empty, `null`, and `undefined` values use the
+     * primary theme color.
+     * @default undefined
+     */
+    readonly color: _angular_core.InputSignal<string | null | undefined>;
+    /**
+     * @description Disables pointer and keyboard interaction and removes the control from the tab
+     * sequence. When bound to a signal form field via `[formField]`, this is written by the signal
+     * forms `Field` directive.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Built-in icon used for the default rating visuals. Choose `star`, `heart`,
+     * `circle`, `diamond`, or `flame`; use item templates to supply a custom icon.
+     * @default "star"
+     */
+    readonly icon: _angular_core.InputSignal<RatingIconName>;
+    /**
+     * @description Marks the component as invalid. Error styling requires both `invalid` and
+     * `touched` to be `true`. When bound to a signal form field via `[formField]`, this is written
+     * by the signal forms `Field` directive.
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Number of rating items. Fractional values are floored and values below one are
+     * raised to one.
+     * @default 5
+     */
+    readonly itemsCount: _angular_core.InputSignalWithTransform<number, number>;
+    /**
+     * @description Optional visible label rendered before or after the rating items. When no
+     * explicit `aria-label` or `aria-labelledby` is supplied, the label provides the accessible
+     * name.
+     * @default null
+     */
+    readonly label: _angular_core.InputSignal<string | null>;
+    /**
+     * @description Places the visible label before or after the item group.
+     * @default "after"
+     */
+    readonly labelPosition: _angular_core.InputSignal<RatingLabelPosition>;
+    /**
+     * @description Selection granularity of the rating.
+     * @default "item"
+     */
+    readonly precision: _angular_core.InputSignal<RatingPrecision>;
+    /**
+     * @description Prevents value changes while preserving focusability and normal visual emphasis.
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Controls cumulative or single-item filling.
+     * @default "continuous"
+     */
+    readonly selection: _angular_core.InputSignal<RatingSelectionMode>;
+    /**
+     * @description Size preset controlling the icon dimensions, item hitboxes, spacing, and label
+     * typography.
+     * @default "medium"
+     */
+    readonly size: _angular_core.InputSignal<"small" | "medium" | "large" | null | undefined>;
+    /**
+     * @description Tab index applied to the focusable rating control when not disabled. Accepts a
+     * numeric string and converts it to a number.
+     * @default 0
+     */
+    readonly tabindex: _angular_core.InputSignalWithTransform<number, string | number>;
+    /**
+     * @description Emitted when the user interacts with the control, marking the field as touched.
+     */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Marks the component as touched. When bound to a signal form field via
+     * `[formField]`, this is written by the signal forms `Field` directive.
+     * @default false
+     */
+    readonly touched: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<string>;
+    /**
+     * @description Current rating value. `0` represents an unrated state. Values are normalized
+     * for rendering but are not rewritten until the user interacts with the component.
+     * @default 0
+     */
+    readonly value: _angular_core.ModelSignal<number>;
+    blur(): void;
+    focus(options?: FocusOptions): void;
+    protected createItemContext(item: RatingItemDescriptor): RatingItemTemplateContext;
+    protected getItemFill(itemValue: number): number;
+    protected onBlur(): void;
+    protected onClick(event: MouseEvent): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onPointerLeave(): void;
+    protected onPointerMove(event: PointerEvent): void;
+    private getCandidateFromPointerEvent;
+    private getKeyAction;
+    private normalizeCandidate;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RatingComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RatingComponent, "mona-rating", never, { "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaValueText": { "alias": "ariaValueText"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "itemsCount": { "alias": "itemsCount"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "precision": { "alias": "precision"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "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; }; }, { "touch": "touch"; "value": "valueChange"; }, ["hoveredTemplate", "itemTemplate", "selectedTemplate"], never, true, never>;
+}
+
+/**
+ * @description Renders the pointer-preview visual for rating items. Overrides the default preset
+ * overlay whenever the visible state comes from pointer preview.
+ */
+declare class RatingHoveredItemTemplateDirective {
+    readonly templateRef: TemplateRef<RatingItemTemplateContext>;
+    static ngTemplateContextGuard(_directive: RatingHoveredItemTemplateDirective, context: unknown): context is RatingItemTemplateContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RatingHoveredItemTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RatingHoveredItemTemplateDirective, "ng-template[monaRatingHoveredItemTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * @description Renders the default (unselected) visual for every rating item. Overrides the
+ * default preset icon for the base layer of each item.
+ */
+declare class RatingItemTemplateDirective {
+    readonly templateRef: TemplateRef<RatingItemTemplateContext>;
+    static ngTemplateContextGuard(_directive: RatingItemTemplateDirective, context: unknown): context is RatingItemTemplateContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RatingItemTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RatingItemTemplateDirective, "ng-template[monaRatingItemTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * @description Renders the committed selected visual for rating items. Overrides the default
+ * preset overlay whenever the visible state comes from the committed value.
+ */
+declare class RatingSelectedItemTemplateDirective {
+    readonly templateRef: TemplateRef<RatingItemTemplateContext>;
+    static ngTemplateContextGuard(_directive: RatingSelectedItemTemplateDirective, context: unknown): context is RatingItemTemplateContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RatingSelectedItemTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RatingSelectedItemTemplateDirective, "ng-template[monaRatingSelectedItemTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+export { RatingComponent, RatingHoveredItemTemplateDirective, RatingItemTemplateDirective, RatingSelectedItemTemplateDirective };
+export type { RatingIconName, RatingItemTemplateContext, RatingLabelPosition, RatingPrecision, RatingSelectionMode, RatingVariantProps };

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

@@ -59,7 +59,7 @@ declare class SegmentedComponent<T extends SegmentedValue = SegmentedValue> impl
     readonly options: _angular_core.InputSignal<readonly SegmentedOption<T>[]>;
     /**
      * @description Border-radius preset applied to the segmented container and its options.
-     * @default "large"
+     * @default "medium"
      */
     readonly rounded: _angular_core.InputSignal<"none" | "small" | "medium" | "large" | "full" | null | undefined>;
     /**