@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,485 @@
+import * as _angular_core from '@angular/core';
+import { ComponentRef, TemplateRef, StaticProvider, OnDestroy, AfterViewInit, InjectionToken } from '@angular/core';
+import { OverlayRef, ConnectionPositionPair, FlexibleConnectedPositionStrategyOrigin, ComponentType, ConnectedPosition } from '@angular/cdk/overlay';
+import { Action } from '@nanahoshi/mona-ui/internal';
+import { PreventableEvent } from '@nanahoshi/mona-ui/common';
+import { Observable } from 'rxjs';
+
+declare class PopupCloseEvent<R = unknown> extends PreventableEvent {
+    #private;
+    constructor(options?: Partial<PopupCloseEventOptions<R>>);
+    get result(): R | undefined;
+    get via(): PopupCloseSource | undefined;
+}
+interface PopupCloseEventOptions<R = unknown, E = unknown> {
+    event?: E;
+    originalEvent: Event;
+    result?: R;
+    type?: string;
+    via?: PopupCloseSource;
+}
+declare enum PopupCloseSource {
+    BackdropClick = "backdropClick",
+    CloseButton = "closeButton",
+    Escape = "escape",
+    MouseLeave = "mouseLeave",
+    Programmatic = "programmatic",
+    OutsideClick = "outsideClick",
+    Scroll = "scroll"
+}
+
+interface PopupOffset {
+    horizontal?: number;
+    vertical?: number;
+}
+
+interface PopupRefParams {
+    close: <R>(result?: R, delay?: number) => void;
+    get beforeClose$(): Observable<PopupCloseEvent>;
+    get closeStart$(): Observable<PopupCloseEvent>;
+    get closed$(): Observable<PopupCloseEvent>;
+    get component(): ComponentRef<unknown> | null;
+    get opened$(): Observable<void>;
+    get overlayRef(): OverlayRef;
+    get positionChanges$(): Observable<ConnectionPositionPair>;
+}
+
+declare class PopupRef {
+    #private;
+    constructor(options: PopupRefParams);
+    close<R>(result?: R, delay?: number): void;
+    /**
+     * Closes the popup after a delay.
+     * When the popup is closed, the overlay element is removed from the DOM instantly.
+     * This causes the animation of the child elements to not play, therefore,
+     * a delay is added to allow the animation to play.
+     *
+     * @see {@link https://github.com/angular/angular/issues/23302} for more information.
+     * @param delay delay in milliseconds
+     * @param result optional result to pass to the closed observable
+     */
+    closeWithDelay<R>(delay?: number, result?: R): void;
+    /**
+     * @description Emitted when the popup is about to close.
+     * This event can be prevented. If it is prevented, the popup will not close.
+     */
+    get beforeClose(): Observable<PopupCloseEvent>;
+    /**
+     * @description Emitted when the popup begins closing, before the leave animation completes.
+     * Subscribe to this to react at the moment the close sequence starts — for example, to begin
+     * coordinating a transition in the consuming component. The `closed` observable fires after
+     * the leave animation finishes.
+     */
+    get closeStart(): Observable<PopupCloseEvent>;
+    /**
+     * @description Emitted when the popup is closed.
+     * This event is emitted after the animation completes.
+     * Preventing this event has no effect.
+     */
+    get closed(): Observable<PopupCloseEvent>;
+    /**
+     * @description Reference to the component hosted in the popup.
+     * This is `null` if the popup does not contain a component.
+     */
+    get component(): ComponentRef<unknown> | null;
+    /**
+     * @description Emitted when the popup is opened.
+     */
+    get opened(): Observable<void>;
+    /**
+     * @description Reference to the underlying CDK overlay.
+     * Use this reference to manipulate the overlay directly, such as to set its size or position.
+     * @see {@link https://material.angular.io/cdk/overlay/overview} for more information.
+     * @example
+     * ```ts
+     * const overlayRef = popupRef.overlayRef;
+     * overlayRef.updateSize({ width: '500px', height: '300px' });
+     * ```
+     */
+    get overlayRef(): OverlayRef;
+    /**
+     * @description Returns the position pair of the popup's anchor element.
+     * @example
+     * ```ts
+     * const positionChanges$ = popupRef.positionChanges;
+     * positionChanges$.subscribe(pair => {
+     *   console.log(`Popup position changed to: ${pair.originX} ${pair.originY} -> ${pair.overlayX} ${pair.overlayY}`);
+     * });
+     * ```
+     */
+    get positionChanges(): Observable<ConnectionPositionPair>;
+}
+
+type ConnectionPoint = "topleft" | "topcenter" | "topright" | "centerleft" | "center" | "centerright" | "bottomleft" | "bottomcenter" | "bottomright";
+
+type PopupAnchor = FlexibleConnectedPositionStrategyOrigin | string;
+interface PopupSettings<T = unknown, C = void> {
+    /**
+     * The anchor element to which the popup will be connected.
+     * Can be an element, ElementRef, or CSS selector string.
+     * @type {PopupAnchor}
+     */
+    anchor: PopupAnchor;
+    /**
+     * The connection point of the anchor element to which the popup will be connected.
+     * @type {ConnectionPoint}
+     */
+    anchorConnectionPoint?: ConnectionPoint | null;
+    /**
+     * Animation settings for the popup.
+     */
+    animation?: boolean | PopupAnimationSettings;
+    /**
+     * Classes to be applied to the backdrop.
+     * @type {string | string[]}
+     */
+    backdropClass?: string | string[];
+    /**
+     * The content to display in the popup.
+     * @type {TemplateRef | ComponentType}
+     */
+    content: TemplateRef<C> | ComponentType<C>;
+    /**
+     * Whether the popup will be closed when the user clicks on the backdrop.
+     * Only applies if `hasBackdrop` is true.
+     * @type {boolean}
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Whether the popup will be closed when the user presses the escape key.
+     * Default: true.
+     * @type {boolean}
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether the popup will be closed when the mouse leaves the anchor element.
+     * Default: false.
+     * @type {boolean}
+     */
+    closeOnMouseLeave?: boolean;
+    /**
+     * Whether the popup will be closed when the user clicks outside of it.
+     * @type {boolean}
+     */
+    closeOnOutsideClick?: boolean;
+    /**
+     * Whether the popup will be closed when the user scrolls.
+     * Default: false.
+     * @type {boolean}
+     */
+    closeOnScroll?: boolean;
+    /**
+     * Optional data to pass to the popup context.
+     */
+    data?: T;
+    /**
+     * Whether the popup will have a backdrop.
+     * Default: true.
+     */
+    hasBackdrop?: boolean;
+    /**
+     * Height of the popup.
+     * @type {number | string}
+     */
+    height?: number | string;
+    /**
+     * Maximum height of the popup.
+     * @type {number | string}
+     */
+    maxHeight?: number | string;
+    /**
+     * Maximum width of the popup.
+     * @type {number | string}
+     */
+    maxWidth?: number | string;
+    /**
+     * Minimum height of the popup.
+     * @type {number | string}
+     */
+    minHeight?: number | string;
+    /**
+     * Minimum width of the popup.
+     * @type {number | string}
+     */
+    minWidth?: number | string;
+    /**
+     * Offset of the popup.
+     * @type {PopupOffset}
+     */
+    offset?: PopupOffset;
+    /**
+     * Classes to be applied to the popup.
+     * @type {string | string[]}
+     */
+    popupClass?: string | string[];
+    /**
+     * The connection point of the popup element to which the anchor will be connected.
+     * @type {ConnectionPoint}
+     */
+    popupConnectionPoint?: ConnectionPoint | null;
+    /**
+     * Classes to be applied to the popup wrapper content div.
+     */
+    popupWrapperClass?: string | string[];
+    /**
+     * The strategy for positioning the popup.
+     * `global` means the popup will be positioned relative to the viewport,
+     * `connected` means the popup will be positioned relative to the anchor element.
+     * @type {"global" | "connected"}
+     */
+    positionStrategy?: "global" | "connected";
+    /**
+     * @description The positions to use for the popup.
+     * The popup will try to position itself in the first position that fits.
+     * This is only used when `positionStrategy` is set to `connected`.
+     */
+    positions?: Array<ConnectedPosition | ConnectionPositionPair>;
+    /**
+     * Optional callback invoked when the popup is about to close.
+     * Return `true` to cancel the close. Takes priority over `PopupCloseEvent.preventDefault()`.
+     * @type {(event: PopupCloseEvent) => boolean}
+     */
+    preventClose?: Action<PopupCloseEvent, boolean>;
+    /**
+     * Additional Angular providers made available within the popup's injector.
+     * Use this to inject services or values that the popup content component needs.
+     * @type {StaticProvider[]}
+     */
+    providers?: StaticProvider[];
+    /**
+     * Controls focus restoration behavior when the popup is closed.
+     * - true: Always restore focus to anchor
+     * - false: Never restore focus (recommended for tooltips)
+     * - "auto": Only restore focus if the anchor was focused when the popup opened (smart behavior)
+     * Default: "auto".
+     * @type {boolean | "auto"}
+     */
+    restoreFocus?: boolean | "auto";
+    /**
+     * Width of the popup.
+     * @type {number | string}
+     */
+    width?: number | string;
+    /**
+     * Whether the CDK overlay should push the popup into the visible viewport when it would
+     * otherwise overflow the screen edges.
+     * Default: true.
+     * @type {boolean}
+     */
+    withPush?: boolean;
+    /**
+     * Whether the popup should track scroll events and reposition itself.
+     * @type {boolean}
+     */
+    withScrollTracking?: boolean;
+}
+interface PopupAnimationSettings {
+    /**
+     * CSS class or classes applied by animate.enter when the popup is shown.
+     */
+    enter?: string | string[];
+    /**
+     * CSS class or classes applied by animate.leave when the popup is hidden.
+     */
+    leave?: string | string[];
+}
+
+declare class PopupComponent<T = unknown> implements OnDestroy, AfterViewInit {
+    #private;
+    protected readonly contentTemplate: _angular_core.Signal<TemplateRef<any>>;
+    protected popupRef: PopupRef | null;
+    /**
+     * @description The anchor element or point for the popup.
+     */
+    readonly anchor: _angular_core.InputSignal<FlexibleConnectedPositionStrategyOrigin>;
+    /**
+     * @description The connection point for the popup anchor.
+     */
+    readonly anchorConnectionPoint: _angular_core.InputSignal<ConnectionPoint>;
+    /**
+     * @description The animation settings for the popup.
+     */
+    readonly animation: _angular_core.InputSignal<boolean | PopupAnimationSettings>;
+    /**
+     * @description The class or classes to apply to the backdrop of the popup.
+     */
+    readonly backdropClass: _angular_core.InputSignal<string | string[]>;
+    /**
+     * @description Emits when the popup is closed.
+     */
+    readonly close: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Whether to close the popup when clicking on the backdrop.
+     * Only applies when the popup has a backdrop.
+     */
+    readonly closeOnBackdropClick: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Whether to close the popup when the escape key is pressed.
+     */
+    readonly closeOnEscape: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Whether to close the popup when the mouse leaves the anchor element.
+     */
+    readonly closeOnMouseLeave: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Whether to close the popup when clicking outside of it.
+     */
+    readonly closeOnOutsideClick: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Arbitrary data to pass to the popup.
+     */
+    readonly data: _angular_core.InputSignal<T | undefined>;
+    /**
+     * @description Whether the popup should have a backdrop.
+     */
+    readonly hasBackdrop: _angular_core.InputSignal<boolean>;
+    /**
+     * @description The height of the popup.
+     */
+    readonly height: _angular_core.InputSignal<string | number | undefined>;
+    /**
+     * @description The maximum height of the popup.
+     */
+    readonly maxHeight: _angular_core.InputSignal<string | number | undefined>;
+    /**
+     * @description The maximum width of the popup.
+     */
+    readonly maxWidth: _angular_core.InputSignal<string | number | undefined>;
+    /**
+     * @description The minimum height of the popup.
+     */
+    readonly minHeight: _angular_core.InputSignal<string | number | undefined>;
+    /**
+     * @description The minimum width of the popup.
+     */
+    readonly minWidth: _angular_core.InputSignal<string | number | undefined>;
+    /**
+     * @description The offset of the popup from the anchor.
+     */
+    readonly offset: _angular_core.InputSignal<PopupOffset | undefined>;
+    /**
+     * @description Emits when the popup is opened.
+     */
+    readonly open: _angular_core.OutputEmitterRef<PopupRef>;
+    /**
+     * @description The class or classes to apply to the popup.
+     */
+    readonly popupClass: _angular_core.InputSignal<string | string[]>;
+    /**
+     * @description The connection point for the popup.
+     */
+    readonly popupConnectionPoint: _angular_core.InputSignal<ConnectionPoint>;
+    /**
+     * @description The class or classes to apply to the popup wrapper.
+     */
+    readonly popupWrapperClass: _angular_core.InputSignal<string | string[]>;
+    /**
+     * @description The strategy for positioning the popup.
+     * `global` means the popup will be positioned relative to the viewport,
+     * `connected` means the popup will be positioned relative to the anchor element.
+     */
+    readonly positionStrategy: _angular_core.InputSignal<"global" | "connected">;
+    /**
+     * @description The positions to use for the popup.
+     * The popup will try to position itself in the first position that fits.
+     * This is only used when the `positionStrategy` is set to `connected`.
+     */
+    readonly positions: _angular_core.InputSignal<(ConnectionPositionPair | ConnectedPosition)[] | undefined>;
+    /**
+     * @description Called when the popup is requested to close.
+     * This can be used to prevent the popup from closing.
+     */
+    readonly preventClose: _angular_core.InputSignal<Action<PopupCloseEvent<unknown>, boolean> | undefined>;
+    /**
+     * @description The providers that will be injected into the popup.
+     */
+    readonly providers: _angular_core.InputSignal<StaticProvider[]>;
+    /**
+     * @description The trigger event for opening the popup.
+     */
+    readonly trigger: _angular_core.InputSignal<string>;
+    /**
+     * @description The width of the popup.
+     */
+    readonly width: _angular_core.InputSignal<string | number | undefined>;
+    /**
+     * @description Whether to push the popup into the screen when it is opened.
+     */
+    readonly withPush: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Whether to close the popup when the user scrolls within a scrollable container.
+     */
+    readonly closeOnScroll: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Controls focus restoration when the popup closes.
+     * - `true`: always restore focus to the anchor element.
+     * - `false`: never restore focus (recommended for tooltips).
+     * - `"auto"`: restore focus only if the anchor was focused when the popup opened.
+     */
+    readonly restoreFocus: _angular_core.InputSignal<boolean | "auto">;
+    /**
+     * @description Whether the popup should track scroll events and reposition itself.
+     */
+    readonly withScrollTracking: _angular_core.InputSignal<boolean>;
+    constructor();
+    closePopup(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private getPopupWidth;
+    private setupEventListeners;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopupComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopupComponent<any>, "mona-popup", never, { "anchor": { "alias": "anchor"; "required": true; "isSignal": true; }; "anchorConnectionPoint": { "alias": "anchorConnectionPoint"; "required": false; "isSignal": true; }; "animation": { "alias": "animation"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnMouseLeave": { "alias": "closeOnMouseLeave"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "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; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "popupClass": { "alias": "popupClass"; "required": false; "isSignal": true; }; "popupConnectionPoint": { "alias": "popupConnectionPoint"; "required": false; "isSignal": true; }; "popupWrapperClass": { "alias": "popupWrapperClass"; "required": false; "isSignal": true; }; "positionStrategy": { "alias": "positionStrategy"; "required": false; "isSignal": true; }; "positions": { "alias": "positions"; "required": false; "isSignal": true; }; "preventClose": { "alias": "preventClose"; "required": false; "isSignal": true; }; "providers": { "alias": "providers"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "withPush": { "alias": "withPush"; "required": false; "isSignal": true; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; "isSignal": true; }; "restoreFocus": { "alias": "restoreFocus"; "required": false; "isSignal": true; }; "withScrollTracking": { "alias": "withScrollTracking"; "required": false; "isSignal": true; }; }, { "close": "close"; "open": "open"; }, never, ["*"], true, never>;
+}
+
+declare class PopupService {
+    #private;
+    create(settings: PopupSettings): PopupRef;
+    private attachContent;
+    private buildPanelClass;
+    private captureOriginalFocus;
+    private cleanupEventDelegation;
+    private createInjector;
+    private createMultiElementPopup;
+    private createOverlay;
+    private createPositionStrategy;
+    private createScrollDispatcherTarget;
+    private createSingleElementPopup;
+    private getAnchorElement;
+    private getPosition;
+    private getScrollableAncestorElements;
+    private getScrollableContainers;
+    private isScrollableElement;
+    private isScrollableOverflow;
+    private handleFocusRestoration;
+    /**
+     * Resolves a PopupAnchor to a FlexibleConnectedPositionStrategyOrigin.
+     * This method should only receive actual elements or ElementRefs, not CSS selector strings.
+     * CSS selectors are handled by the multi-element popup creation path.
+     * @param anchor The anchor to resolve (should be Element or ElementRef)
+     * @returns The resolved anchor
+     */
+    private resolveAnchor;
+    private restoreFocusToAnchor;
+    private setupBackdropCloseSubscription;
+    private setupCleanupSubscription;
+    private setupCloseSubscriptions;
+    private setupEscapeKeyListener;
+    private setupInternalEventDelegation;
+    private setupMouseLeaveSubscription;
+    private setupOutsideClickSubscription;
+    private setupPositionChangeTracking;
+    private setupScrollClosing;
+    private setupScrollTracking;
+    private shouldIgnoreOutsideClick;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopupService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<PopupService>;
+}
+
+declare const defaultPopupAnimation: Required<PopupAnimationSettings>;
+declare const dropdownPopupAnimation: Required<PopupAnimationSettings>;
+declare const fadePopupAnimation: Required<PopupAnimationSettings>;
+
+declare const PopupDataInjectionToken: InjectionToken<unknown>;
+
+export { PopupCloseEvent, PopupCloseSource, PopupComponent, PopupDataInjectionToken, PopupRef, PopupService, defaultPopupAnimation, dropdownPopupAnimation, fadePopupAnimation };
+export type { ConnectionPoint, PopupAnchor, PopupAnimationSettings, PopupOffset, PopupSettings };

package/types/nanahoshi-mona-ui-progress-bar.d.ts

@@ -0,0 +1,139 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { VariantInputs, Action } from '@nanahoshi/mona-ui/internal';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ThemeStyle } from '@nanahoshi/mona-ui/theme';
+
+interface LabelTemplateContext {
+    $implicit: number;
+    max: number;
+    min: number;
+    percent: number;
+}
+
+declare class ProgressBarLabelTemplateDirective {
+    readonly templateRef: TemplateRef<LabelTemplateContext>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressBarLabelTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ProgressBarLabelTemplateDirective, "ng-template[monaProgressBarLabelTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+type LabelPosition = "start" | "center" | "end";
+
+declare const progressBarBaseThemeVariants: (theme: ThemeStyle) => (props?: ({
+    rounded?: "full" | "large" | "medium" | "none" | "small" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const progressBarIndeterminateThemeVariants: (theme: ThemeStyle) => (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const progressBarLabelThemeVariants: (theme: ThemeStyle) => (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const progressBarTrackThemeVariants: (theme: ThemeStyle) => (props?: ({
+    rounded?: "full" | "large" | "medium" | "none" | "small" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ProgressBarBaseVariantProps = VariantProps<ReturnType<typeof progressBarBaseThemeVariants>>;
+type ProgressBarBaseVariantInput = VariantInputs<ProgressBarBaseVariantProps>;
+type ProgressBarIndeterminateVariantProps = VariantProps<ReturnType<typeof progressBarIndeterminateThemeVariants>>;
+type ProgressBarIndeterminateVariantInput = VariantInputs<ProgressBarIndeterminateVariantProps>;
+type ProgressBarLabelVariantProps = VariantProps<ReturnType<typeof progressBarLabelThemeVariants>>;
+type ProgressBarLabelVariantInput = VariantInputs<ProgressBarLabelVariantProps>;
+type ProgressBarTrackVariantProps = VariantProps<ReturnType<typeof progressBarTrackThemeVariants>>;
+type ProgressBarTrackVariantInput = VariantInputs<ProgressBarTrackVariantProps>;
+type ProgressBarVariantInput = ProgressBarBaseVariantInput & ProgressBarIndeterminateVariantInput & ProgressBarTrackVariantInput & ProgressBarLabelVariantInput;
+
+declare class ProgressBarComponent implements ProgressBarVariantInput {
+    #private;
+    protected readonly baseClasses: _angular_core.Signal<string>;
+    protected readonly indeterminateClasses: _angular_core.Signal<string>;
+    protected readonly labelClasses: _angular_core.Signal<string>;
+    protected readonly labelTemplate: _angular_core.Signal<ProgressBarLabelTemplateDirective | undefined>;
+    protected readonly nextTrackClipPath: _angular_core.Signal<string>;
+    protected readonly prevTrackClipPath: _angular_core.Signal<string>;
+    protected readonly progress: _angular_core.Signal<number>;
+    protected readonly trackClasses: _angular_core.Signal<string>;
+    protected readonly trackColor: _angular_core.Signal<string>;
+    /**
+     * @description Accessible label for the progress bar host element.
+     * Use to describe what is being measured (e.g., "Upload progress").
+     * When empty, assistive technology announces the role and numeric values only.
+     * @default ""
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * @description Overrides the numeric aria-valuenow announcement for assistive technology.
+     * Particularly useful in indeterminate mode — set to a localized string such as "Loading"
+     * so screen readers announce state rather than silence.
+     * When empty, assistive technology falls back to the numeric value.
+     * @default ""
+     */
+    readonly ariaValueText: _angular_core.InputSignal<string>;
+    /**
+     * @description Enables CSS transitions on fill and color changes.
+     * Set to `false` when updating `value` at high frequency (e.g., a real-time byte counter).
+     * @default true
+     */
+    readonly animate: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Fill color of the progress track.
+     * Pass a CSS color string, or a function that receives the current percentage (0–100) and returns a color string.
+     * When empty, falls back to the primary theme color.
+     * @default ""
+     */
+    readonly color: _angular_core.InputSignal<string | Action<number, string>>;
+    /**
+     * @description Renders the bar with reduced visual emphasis and removes pointer interaction.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Switches to indeterminate mode: plays a looping animation and hides the label.
+     * ARIA value attributes are removed and `aria-busy` is set on the host element.
+     * @default false
+     */
+    readonly indeterminate: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Horizontal alignment of the label within the bar.
+     * @default center
+     */
+    readonly labelPosition: _angular_core.InputSignal<LabelPosition>;
+    /**
+     * @description Inline styles applied to the default label span.
+     * Has no effect when a custom `monaProgressBarLabelTemplate` is provided.
+     * @default {}
+     */
+    readonly labelStyles: _angular_core.InputSignal<Partial<CSSStyleDeclaration>>;
+    /**
+     * @description Controls label visibility in determinate mode.
+     * Has no effect in indeterminate mode — the label is always hidden there.
+     * @default true
+     */
+    readonly labelVisible: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Upper bound of the value range. Must be greater than `min`.
+     * @default 100
+     */
+    readonly max: _angular_core.InputSignal<number>;
+    /**
+     * @description Lower bound of the value range.
+     * @default 0
+     */
+    readonly min: _angular_core.InputSignal<number>;
+    /**
+     * @description Border-radius preset applied to the bar.
+     * @default medium
+     */
+    readonly rounded: _angular_core.InputSignal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<string>;
+    /**
+     * @description Current progress value within `[min, max]`.
+     * Values outside the range are clamped before rendering; non-finite values are treated as `0`.
+     * @default 0
+     */
+    readonly value: _angular_core.InputSignal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressBarComponent, "mona-progress-bar", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaValueText": { "alias": "aria-valuetext"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "labelStyles": { "alias": "labelStyles"; "required": false; "isSignal": true; }; "labelVisible": { "alias": "labelVisible"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, ["labelTemplate"], never, true, never>;
+}
+
+export { ProgressBarComponent, ProgressBarLabelTemplateDirective };
+export type { LabelPosition, LabelTemplateContext };