@cute-widgets/base 20.0.1

package/sidenav/index.d.ts

@@ -0,0 +1,369 @@
+import { FocusOrigin } from '@angular/cdk/a11y';
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import * as i2 from '@angular/cdk/scrolling';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import * as i0 from '@angular/core';
+import { InjectionToken, AfterContentInit, DoCheck, OnDestroy, QueryList, AfterViewInit, EventEmitter, ElementRef } from '@angular/core';
+import { Subject, Observable } from 'rxjs';
+import { CuteLayoutControl, Expandable } from '@cute-widgets/base/abstract';
+import * as i1 from '@angular/common';
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+
+/**
+ * Throws an exception when two CuteDrawer are matching the same position.
+ */
+declare function throwCuteDuplicatedDrawerError(position: string): void;
+/** Options for where to set focus to automatically on dialog open */
+type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
+/** Result of the toggle promise that indicates the state of the drawer. */
+type CuteDrawerToggleResult = 'open' | 'close';
+/** Drawer and SideNav display modes. */
+type CuteDrawerMode = 'over' | 'push' | 'side';
+/** Configures whether drawers should use auto sizing by default. */
+declare const CUTE_DRAWER_DEFAULT_AUTOSIZE: InjectionToken<boolean>;
+/**
+ * Used to provide a drawer container to a drawer while avoiding circular references.
+ */
+declare const CUTE_DRAWER_CONTAINER: InjectionToken<unknown>;
+/**
+ * The main content of the 'cute-drawer' component
+ */
+declare class CuteDrawerContent extends CdkScrollable implements AfterContentInit {
+    private _platform;
+    private _changeDetectorRef;
+    _container: CuteDrawerContainer;
+    protected generateId(): string;
+    constructor(...args: unknown[]);
+    ngAfterContentInit(): void;
+    /** Determines whether the content element should be hidden from the user. */
+    protected _shouldBeHidden(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteDrawerContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CuteDrawerContent, "cute-drawer-content", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * This component corresponds to a drawer that can be opened on the drawer container.
+ */
+declare class CuteDrawer extends CuteLayoutControl implements Expandable, AfterViewInit, OnDestroy {
+    private _focusTrapFactory;
+    private _focusMonitor;
+    private _platform;
+    private _ngZone;
+    private readonly _interactivityChecker;
+    private _doc;
+    _container?: CuteDrawerContainer | null | undefined;
+    private _focusTrap;
+    private _elementFocusedBeforeDrawerWasOpened;
+    private _eventCleanups;
+    /** Whether the view of the component has been attached. */
+    private _isAttached;
+    /** Anchor node used to restore the drawer to its initial position. */
+    private _anchor;
+    /** Subject that emits when the component has been destroyed. */
+    protected readonly _destroyed: Subject<void>;
+    /** The side that the drawer is attached to. */
+    get position(): 'start' | 'end';
+    set position(value: 'start' | 'end');
+    private _position;
+    /** Mode of the drawer; one of 'over', 'push' or 'side'. */
+    get mode(): CuteDrawerMode;
+    set mode(value: CuteDrawerMode);
+    private _mode;
+    /** Whether the drawer can be closed with the escape key or by clicking on the backdrop. */
+    get disableClose(): boolean;
+    set disableClose(value: BooleanInput);
+    private _disableClose;
+    /**
+     * Whether the drawer should focus the first focusable element automatically when opened.
+     * Defaults to false in when `mode` is set to `side`, otherwise defaults to `true`. If explicitly
+     * enabled, focus will be moved into the sidenav in `side` mode as well.
+     * @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or AutoFocusTarget
+     * instead.
+     */
+    get autoFocus(): AutoFocusTarget | string | boolean;
+    set autoFocus(value: AutoFocusTarget | string | BooleanInput);
+    private _autoFocus;
+    /**
+     * Whether the drawer is opened. We overload this because we trigger an event when it
+     * starts or ends.
+     */
+    get opened(): boolean;
+    set opened(value: BooleanInput);
+    private _opened;
+    /** How the sidenav was opened (keypress, mouse click etc.) */
+    private _openedVia;
+    /** Emits whenever the drawer has started animating. */
+    readonly _animationStarted: Subject<unknown>;
+    /** Emits whenever the drawer is done animating. */
+    readonly _animationEnd: Subject<unknown>;
+    /** Event emitted when the drawer open state is changed. */
+    readonly openedChange: EventEmitter<boolean>;
+    /** Event emitted when the drawer has been opened. */
+    readonly _openedStream: Observable<void>;
+    /** Event emitted when the drawer has started opening. */
+    readonly openedStart: Observable<void>;
+    /** Event emitted when the drawer has been closed. */
+    readonly _closedStream: Observable<void>;
+    /** Event emitted when the drawer has started closing. */
+    readonly closedStart: Observable<void>;
+    /** Event emitted when the drawer's position changes. */
+    readonly onPositionChanged: EventEmitter<void>;
+    /** Reference to the inner element that contains all the content. */
+    _content: ElementRef<HTMLElement> | undefined;
+    /** Implementation of `Expandable` interface */
+    get expanded(): boolean;
+    /**
+     * An observable that emits when the drawer mode changes. This is used by the drawer container to know
+     * when to when the mode changes, so it can adapt the margins on the content.
+     */
+    readonly _modeChanged: Subject<void>;
+    private _injector;
+    protected generateId(): string;
+    constructor(...args: unknown[]);
+    /**
+     * Focuses the provided element. If the element is not focusable, it will add a tabIndex
+     * attribute to forcefully focus it. The attribute is removed after focus is moved.
+     * @param element The element to focus.
+     * @param options
+     */
+    private _forceFocus;
+    /**
+     * Focuses the first element that matches the given selector within the focus trap.
+     * @param selector The CSS selector for the element to set focus to.
+     * @param options
+     */
+    private _focusByCssSelector;
+    /**
+     * Moves focus into the drawer. Note that this works even if
+     * the focus trap is disabled in `side` mode.
+     */
+    private _takeFocus;
+    /**
+     * Restores focus to the element that was originally focused when the drawer opened.
+     * If no element was focused at that time, the focus will be restored to the drawer.
+     */
+    private _restoreFocus;
+    /** Whether focus is currently within the drawer. */
+    private _isFocusWithinDrawer;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Open the drawer.
+     * @param openedVia Whether the drawer was opened by a key press, mouse click or programmatically.
+     * Used for focus management after the sidenav is closed.
+     */
+    open(openedVia?: FocusOrigin): Promise<CuteDrawerToggleResult>;
+    /** Close the drawer. */
+    close(): Promise<CuteDrawerToggleResult>;
+    /** Closes the drawer with context that the backdrop was clicked. */
+    _closeViaBackdropClick(): Promise<CuteDrawerToggleResult>;
+    /**
+     * Toggle this drawer.
+     * @param isOpen Whether the drawer should be open.
+     * @param openedVia Whether the drawer was opened by a key press, mouse click or programmatically.
+     * Used for focus management after the sidenav is closed.
+     */
+    toggle(isOpen?: boolean, openedVia?: FocusOrigin): Promise<CuteDrawerToggleResult>;
+    /**
+     * Toggles the opened state of the drawer.
+     * @param isOpen Whether the drawer should open or close.
+     * @param restoreFocus Whether focus should be restored on close.
+     * @param focusOrigin Origin to use when restoring focus.
+     */
+    private _setOpen;
+    /** Toggles whether the drawer is currently animating. */
+    private _setIsAnimating;
+    _getWidth(): number;
+    /** Updates the enabled state of the focus trap. */
+    private _updateFocusTrapState;
+    /**
+     * Updates the position of the drawer in the DOM. We need to move the element around ourselves
+     * when it's in the `end` position so that it comes after the content and the visual order
+     * matches the tab order. We also need to be able to move it back to `start` if the sidenav
+     * started off as `end` and was changed to `start`.
+     */
+    private _updatePositionInParent;
+    /** Event handler for animation events. */
+    private _handleTransitionEvent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteDrawer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CuteDrawer, "cute-drawer", ["cuteDrawer"], { "position": { "alias": "position"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "disableClose": { "alias": "disableClose"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; }, { "openedChange": "openedChange"; "_openedStream": "opened"; "openedStart": "openedStart"; "_closedStream": "closed"; "closedStart": "closedStart"; "onPositionChanged": "positionChanged"; }, never, ["*"], true, never>;
+}
+/**
+ * `<cute-drawer-container>` component.
+ *
+ * This is the parent component to one or two `<cute-drawer>`s that validates the state internally
+ * and coordinates the backdrop and content styling.
+ */
+declare class CuteDrawerContainer extends CuteLayoutControl implements AfterContentInit, DoCheck, OnDestroy {
+    private _dir;
+    private _element;
+    private _ngZone;
+    private _animationDisabled;
+    _transitionsEnabled: boolean;
+    /** All drawers in the container. Includes drawers from inside nested containers. */
+    _allDrawers: QueryList<CuteDrawer> | undefined;
+    /** Drawers that belong to this container. */
+    _drawers: QueryList<CuteDrawer>;
+    _content: CuteDrawerContent | undefined;
+    _userContent: CuteDrawerContent | undefined;
+    /** The drawer child with the `start` position. */
+    get start(): CuteDrawer | null;
+    /** The drawer child with the `end` position. */
+    get end(): CuteDrawer | null;
+    /**
+     * Whether to automatically resize the container whenever
+     * the size of its drawers changes.
+     *
+     * **Use at your own risk!** Enabling this option can cause layout thrashing by measuring
+     * the drawers on every change detection cycle. Can be configured globally via the
+     * `CUTE_DRAWER_DEFAULT_AUTOSIZE` token.
+     */
+    get autosize(): boolean;
+    set autosize(value: BooleanInput);
+    private _autosize;
+    /**
+     * Whether the drawer container should have a backdrop while one of the `sidenav`s is open.
+     * If explicitly set to `true`, the backdrop will be enabled for drawers in the `side`
+     * mode as well.
+     */
+    get hasBackdrop(): boolean;
+    set hasBackdrop(value: BooleanInput);
+    _backdropOverride: boolean | null;
+    /** Event emitted when the drawer backdrop is clicked. */
+    readonly backdropClick: EventEmitter<void>;
+    /** The drawer at the start/end position, independent of a direction. */
+    private _start;
+    private _end;
+    /**
+     * The drawer at the left/right. When a direction changes, these will change as well.
+     * They're used as aliases for the above to set the left/right style properly.
+     * In LTR, _left == _start and _right == _end.
+     * In RTL, _left == _end and _right == _start.
+     */
+    private _left;
+    private _right;
+    /** Emits on every ngDoCheck. Used for debouncing reflows. */
+    private readonly _doCheckSubject;
+    /** Subject that emits when the component has been destroyed. */
+    private readonly _destroyed;
+    /**
+     * Margins to be applied to the content. These are used to push / shrink the drawer content when a
+     * drawer is open. We use margin rather than transform even for push mode because transform breaks
+     * fixed position elements inside of the transformed element.
+     */
+    _contentMargins: {
+        left: number | null;
+        right: number | null;
+    };
+    readonly _contentMarginChanges: Subject<{
+        left: number | null;
+        right: number | null;
+    }>;
+    /** Reference to the CdkScrollable instance that wraps the scrollable content. */
+    get scrollable(): CdkScrollable;
+    protected generateId(): string;
+    private _injector;
+    constructor(...args: unknown[]);
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    /** Calls `open` of both start and end drawers */
+    open(): void;
+    /** Calls `close` of both start and end drawers */
+    close(): void;
+    /**
+     * Recalculates and updates the inline styles for the content. Note that this should be used
+     * sparingly, because it causes a reflow.
+     */
+    updateContentMargins(): void;
+    ngDoCheck(): void;
+    /**
+     * Subscribes to drawer events in order to set a class on the main container element when the
+     * drawer is open and the backdrop is visible. This ensures any overflow on the container element
+     * is properly hidden.
+     */
+    private _watchDrawerToggle;
+    /**
+     * Subscribes to drawer onPositionChanged event in order to
+     * re-validate drawers when the position changes.
+     */
+    private _watchDrawerPosition;
+    /** Subscribes to changes in drawer mode so we can run change detection. */
+    private _watchDrawerMode;
+    /** Toggles the 'cute-drawer-opened' class on the main 'cute-drawer-container' element. */
+    private _setContainerClass;
+    /** Validate the state of the drawer children components. */
+    private _validateDrawers;
+    /** Whether the container is being pushed to the side by one of the drawers. */
+    private _isPushed;
+    _onBackdropClicked(): void;
+    _closeModalDrawersViaBackdrop(): void;
+    _isShowingBackdrop(): boolean;
+    private _isDrawerOpen;
+    private _drawerHasBackdrop;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteDrawerContainer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CuteDrawerContainer, "cute-drawer-container", ["cuteDrawerContainer"], { "autosize": { "alias": "autosize"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; }, { "backdropClick": "backdropClick"; }, ["_content", "_allDrawers"], ["cute-drawer", "cute-drawer-content", "*"], true, never>;
+}
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+
+declare class CuteSidenavContent extends CuteDrawerContent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteSidenavContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CuteSidenavContent, "cute-sidenav-content", never, {}, {}, never, ["*"], true, never>;
+}
+declare class CuteSidenav extends CuteDrawer {
+    /** Whether the sidenav is fixed in the viewport. */
+    get fixedInViewport(): boolean;
+    set fixedInViewport(value: BooleanInput);
+    private _fixedInViewport;
+    /**
+     * The gap between the top of the sidenav and the top of the viewport when the sidenav is in fixed
+     * mode.
+     */
+    get fixedTopGap(): number;
+    set fixedTopGap(value: NumberInput);
+    private _fixedTopGap;
+    /**
+     * The gap between the bottom of the sidenav and the bottom of the viewport when the sidenav is in
+     * fixed mode.
+     */
+    get fixedBottomGap(): number;
+    set fixedBottomGap(value: NumberInput);
+    private _fixedBottomGap;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteSidenav, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CuteSidenav, "cute-sidenav", ["cuteSidenav"], { "fixedInViewport": { "alias": "fixedInViewport"; "required": false; }; "fixedTopGap": { "alias": "fixedTopGap"; "required": false; }; "fixedBottomGap": { "alias": "fixedBottomGap"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+declare class CuteSidenavContainer extends CuteDrawerContainer {
+    _allDrawers: QueryList<CuteSidenav>;
+    _content: CuteSidenavContent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteSidenavContainer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CuteSidenavContainer, "cute-sidenav-container", ["cuteSidenavContainer"], {}, {}, ["_content", "_allDrawers"], ["cute-sidenav", "cute-sidenav-content", "*"], true, never>;
+}
+
+declare class CuteSidenavModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteSidenavModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CuteSidenavModule, never, [typeof i1.CommonModule, typeof i2.CdkScrollableModule, typeof CuteDrawer, typeof CuteDrawerContainer, typeof CuteDrawerContent, typeof CuteSidenav, typeof CuteSidenavContainer, typeof CuteSidenavContent], [typeof CuteDrawer, typeof CuteDrawerContainer, typeof CuteDrawerContent, typeof CuteSidenav, typeof CuteSidenavContainer, typeof CuteSidenavContent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CuteSidenavModule>;
+}
+
+export { CUTE_DRAWER_CONTAINER, CUTE_DRAWER_DEFAULT_AUTOSIZE, CuteDrawer, CuteDrawerContainer, CuteDrawerContent, CuteSidenav, CuteSidenavContainer, CuteSidenavContent, CuteSidenavModule, throwCuteDuplicatedDrawerError };
+export type { AutoFocusTarget, CuteDrawerMode, CuteDrawerToggleResult };

package/slider/index.d.ts

@@ -0,0 +1,48 @@
+import * as i0 from '@angular/core';
+import { InjectionToken } from '@angular/core';
+import { CuteInput } from '@cute-widgets/base/input';
+import * as i1 from '@angular/common';
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+/**
+ * Injection token that can be used for a `CuteSlider` to provide itself as a
+ * parent to the `CuteSliderThumb` and `CuteSliderRangeThumb`.
+ * Used primarily to avoid circular imports.
+ * @docs-private
+ */
+declare const CUTE_SLIDER: InjectionToken<CuteSlider>;
+declare class CuteSlider {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteSlider, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CuteSlider, "cute-slider", ["cuteSlider"], {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Directive that adds slider-specific behaviors to an input element inside `<cute-slider>`.
+ * Up to two may be placed inside a `<cute-slider>`.
+ *
+ * If one is used, the selector `cuteSliderThumb` must be used, and the outcome will be a normal
+ * slider. If two are used, the selectors `cuteSliderStartThumb` and `cuteSliderEndThumb` must be
+ * used, and the outcome will be a range slider with two slider thumbs.
+ */
+declare class CuteSliderThumb extends CuteInput {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteSliderThumb, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteSliderThumb, "input[cuteSliderThumb]", ["cuteSliderThumb"], {}, {}, never, never, true, never>;
+}
+
+declare class CuteSliderModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteSliderModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CuteSliderModule, never, [typeof i1.CommonModule, typeof CuteSlider, typeof CuteSliderThumb], [typeof CuteSlider, typeof CuteSliderThumb]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CuteSliderModule>;
+}
+
+export { CUTE_SLIDER, CuteSlider, CuteSliderModule, CuteSliderThumb };