ng-primitives 0.89.0 → 0.90.0

package/avatar/index.d.ts

@@ -1,5 +1,120 @@
-export { NgpAvatarFallback } from './avatar-fallback/avatar-fallback';
-export { NgpAvatarImage } from './avatar-image/avatar-image';
-export { NgpAvatar, NgpAvatarStatus } from './avatar/avatar';
-export { injectAvatarState, provideAvatarState } from './avatar/avatar-state';
-export { NgpAvatarConfig, provideAvatarConfig } from './config/avatar-config';
+import * as _angular_core from '@angular/core';
+import { OnInit, Provider } from '@angular/core';
+import { NumberInput } from '@angular/cdk/coercion';
+import * as ng_primitives_state from 'ng-primitives/state';
+import * as i1 from 'ng-primitives/a11y';
+import { NgpVisuallyHidden } from 'ng-primitives/a11y';
+
+/**
+ * Apply the `ngpAvatarFallback` directive to an element that represents the user in the absence of an image. This is typically the user's initials.
+ */
+declare class NgpAvatarFallback implements OnInit {
+    /**
+     * Access the avatar
+     */
+    private readonly avatar;
+    /**
+     * Access the global configuration.
+     */
+    private readonly config;
+    /**
+     * Access the disposable utilities.
+     */
+    private readonly disposables;
+    /**
+     * Define a delay before the fallback is shown. This is useful to only show the fallback for those with slower connections.
+     * @default 0
+     */
+    readonly delay: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * Determine if this element should be hidden.
+     * @returns True if the element should be visible
+     */
+    protected readonly visible: _angular_core.Signal<boolean>;
+    /**
+     * Determine the delay has elapsed, and we can show the fallback.
+     */
+    private delayElapsed;
+    ngOnInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpAvatarFallback, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpAvatarFallback, "[ngpAvatarFallback]", ["ngpAvatarFallback"], { "delay": { "alias": "ngpAvatarFallbackDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Apply the `ngpAvatarImage` directive to an element that represents the avatar image. This would typically be an `img` element or a `div` with a background image.
+ */
+declare class NgpAvatarImage implements OnInit {
+    /**
+     * Control the visibility of the image.
+     */
+    protected readonly visuallyHidden: _angular_core.Signal<ng_primitives_state.State<NgpVisuallyHidden>>;
+    /**
+     * Access the avatar
+     */
+    private readonly avatar;
+    /**
+     * Access the image element ref.
+     */
+    private readonly elementRef;
+    ngOnInit(): void;
+    protected onLoad(): void;
+    protected onError(): void;
+    private setState;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpAvatarImage, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpAvatarImage, "img[ngpAvatarImage]", ["ngpAvatarImage"], {}, {}, never, never, true, [{ directive: typeof i1.NgpVisuallyHidden; inputs: {}; outputs: {}; }]>;
+}
+
+/**
+ * Apply the `ngpAvatar` directive to an element that represents the avatar. This directive is a container for the image and/or fallback.
+ */
+declare class NgpAvatar {
+    /**
+     * Store the current status of the avatar.
+     * @internal
+     */
+    readonly status: _angular_core.WritableSignal<NgpAvatarStatus>;
+    /**
+     * The avatar state.
+     */
+    protected readonly state: ng_primitives_state.CreatedState<NgpAvatar>;
+    /**
+     * Set the avatar status.
+     * @param status The status to set.
+     * @internal
+     */
+    setStatus(status: NgpAvatarStatus): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpAvatar, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpAvatar, "[ngpAvatar]", ["ngpAvatar"], {}, {}, never, never, true, never>;
+}
+declare enum NgpAvatarStatus {
+    Idle = "idle",
+    Loading = "loading",
+    Loaded = "loaded",
+    Error = "error"
+}
+
+/**
+ * Provides the Avatar state.
+ */
+declare const provideAvatarState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+/**
+ * Injects the Avatar state.
+ */
+declare const injectAvatarState: <U = NgpAvatar>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+
+interface NgpAvatarConfig {
+    /**
+     * Define a delay before the fallback is shown. This is useful to only show the fallback for those with slower connections.
+     * @default 0
+     */
+    delay: number;
+}
+/**
+ * Provide the avatar config
+ * @param config The avatar config
+ * @returns The provider
+ */
+declare function provideAvatarConfig(config: Partial<NgpAvatarConfig>): Provider[];
+
+export { NgpAvatar, NgpAvatarFallback, NgpAvatarImage, NgpAvatarStatus, injectAvatarState, provideAvatarConfig, provideAvatarState };
+export type { NgpAvatarConfig };

package/breadcrumbs/index.d.ts

@@ -1,7 +1,60 @@
-export { NgpBreadcrumbEllipsis } from './breadcrumb-ellipsis/breadcrumb-ellipsis';
-export { NgpBreadcrumbItem } from './breadcrumb-item/breadcrumb-item';
-export { NgpBreadcrumbLink } from './breadcrumb-link/breadcrumb-link';
-export { NgpBreadcrumbList } from './breadcrumb-list/breadcrumb-list';
-export { NgpBreadcrumbPage } from './breadcrumb-page/breadcrumb-page';
-export { NgpBreadcrumbSeparator } from './breadcrumb-separator/breadcrumb-separator';
-export { NgpBreadcrumbs } from './breadcrumbs/breadcrumbs';
+import * as i0 from '@angular/core';
+
+/**
+ * Apply `ngpBreadcrumbEllipsis` to elements that represent collapsed breadcrumb items.
+ */
+declare class NgpBreadcrumbEllipsis {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpBreadcrumbEllipsis, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpBreadcrumbEllipsis, "[ngpBreadcrumbEllipsis]", ["ngpBreadcrumbEllipsis"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Apply `ngpBreadcrumbItem` to each list item in the breadcrumb trail.
+ */
+declare class NgpBreadcrumbItem {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpBreadcrumbItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpBreadcrumbItem, "[ngpBreadcrumbItem]", ["ngpBreadcrumbItem"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Apply `ngpBreadcrumbLink` to anchors or buttons that navigate to a breadcrumb destination.
+ */
+declare class NgpBreadcrumbLink {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpBreadcrumbLink, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpBreadcrumbLink, "[ngpBreadcrumbLink]", ["ngpBreadcrumbLink"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Apply `ngpBreadcrumbList` to the ordered list that groups breadcrumb items.
+ */
+declare class NgpBreadcrumbList {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpBreadcrumbList, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpBreadcrumbList, "[ngpBreadcrumbList]", ["ngpBreadcrumbList"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Apply `ngpBreadcrumbPage` to non-link content that represents the active page.
+ */
+declare class NgpBreadcrumbPage {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpBreadcrumbPage, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpBreadcrumbPage, "[ngpBreadcrumbPage]", ["ngpBreadcrumbPage"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Apply `ngpBreadcrumbSeparator` between breadcrumb items to render a visual divider.
+ */
+declare class NgpBreadcrumbSeparator {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpBreadcrumbSeparator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpBreadcrumbSeparator, "[ngpBreadcrumbSeparator]", ["ngpBreadcrumbSeparator"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Apply `ngpBreadcrumbs` to the navigation element that wraps the breadcrumb trail.
+ */
+declare class NgpBreadcrumbs {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpBreadcrumbs, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpBreadcrumbs, "[ngpBreadcrumbs]", ["ngpBreadcrumbs"], {}, {}, never, never, true, never>;
+}
+
+export { NgpBreadcrumbEllipsis, NgpBreadcrumbItem, NgpBreadcrumbLink, NgpBreadcrumbList, NgpBreadcrumbPage, NgpBreadcrumbSeparator, NgpBreadcrumbs };

package/button/index.d.ts

@@ -1,3 +1,44 @@
-export { NgpButton } from './button/button';
-export { injectButtonState, provideButtonState } from './button/button-state';
-export { setupButton } from './button/setup-button';
+import * as ng_primitives_state from 'ng-primitives/state';
+import * as _angular_core from '@angular/core';
+import { Signal } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+
+declare class NgpButton {
+    /**
+     * Whether the button is disabled.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The button state.
+     */
+    protected readonly state: ng_primitives_state.CreatedState<NgpButton>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpButton, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpButton, "[ngpButton]", ["ngpButton"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Provides the Button state.
+ */
+declare const provideButtonState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+/**
+ * Injects the Button state.
+ */
+declare const injectButtonState: <U = NgpButton>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+
+/** @internal */
+interface NgpButtonOptions {
+    /**
+     * Whether the button is disabled.
+     * @default false
+     */
+    disabled?: Signal<boolean>;
+}
+/**
+ * @internal
+ * Setup the button interactions and attributes.
+ * @param options - The options for the button.
+ */
+declare function setupButton({ disabled }: NgpButtonOptions): void;
+
+export { NgpButton, injectButtonState, provideButtonState, setupButton };

package/checkbox/index.d.ts

@@ -1,2 +1,58 @@
-export { NgpCheckbox } from './checkbox/checkbox';
-export { injectCheckboxState, provideCheckboxState } from './checkbox/checkbox-state';
+import * as ng_primitives_state from 'ng-primitives/state';
+import * as _angular_core from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+
+/**
+ * Apply the `ngpCheckbox` directive to an element to that represents the checkbox, such as a `button`.
+ */
+declare class NgpCheckbox {
+    /**
+     * The id of the checkbox.
+     * @internal
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    /**
+     * Defines whether the checkbox is checked.
+     */
+    readonly checked: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The event that is emitted when the checkbox value changes.
+     */
+    readonly checkedChange: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Defines whether the checkbox is indeterminate.
+     */
+    readonly indeterminate: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The event that is emitted when the indeterminate value changes.
+     */
+    readonly indeterminateChange: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Whether the checkbox is required.
+     */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Defines whether the checkbox is disabled.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The state of the checkbox.
+     */
+    protected readonly state: ng_primitives_state.CreatedState<NgpCheckbox>;
+    constructor();
+    protected onEnter(event: KeyboardEvent): void;
+    toggle(event?: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpCheckbox, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpCheckbox, "[ngpCheckbox]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "checked": { "alias": "ngpCheckboxChecked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "ngpCheckboxIndeterminate"; "required": false; "isSignal": true; }; "required": { "alias": "ngpCheckboxRequired"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpCheckboxDisabled"; "required": false; "isSignal": true; }; }, { "checkedChange": "ngpCheckboxCheckedChange"; "indeterminateChange": "ngpCheckboxIndeterminateChange"; }, never, never, true, never>;
+}
+
+/**
+ * Provides the Checkbox state.
+ */
+declare const provideCheckboxState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+/**
+ * Injects the Checkbox state.
+ */
+declare const injectCheckboxState: <U = NgpCheckbox>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+
+export { NgpCheckbox, injectCheckboxState, provideCheckboxState };