@ngneers/controls 0.0.1-next.0

package/types/ngneers-controls-directives.d.ts

@@ -0,0 +1,171 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import { NgnBase } from '@ngneers/controls/base';
+
+declare class NgnAutofocus {
+    private readonly _el;
+    private readonly _focused;
+    private readonly _isInitialized;
+    /**
+     * Whether to focus the host element once it has rendered. Set to `false` to
+     * disable autofocus without removing the directive.
+     * @default true
+     */
+    readonly ngnAutofocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    constructor();
+    private autoFocus;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnAutofocus, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnAutofocus, "[ngnAutofocus]", never, { "ngnAutofocus": { "alias": "ngnAutofocus"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type NgnDragInfo = {
+    deltaX: number;
+    deltaY: number;
+    absoluteX: number;
+    absoluteY: number;
+};
+
+declare abstract class NgnDragBase {
+    protected readonly el: ElementRef<HTMLElement>;
+    private readonly _document;
+    private readonly _isBrowser;
+    private _pointerDown;
+    private _startX?;
+    private _startY?;
+    private _dragged;
+    protected readonly isDragging: _angular_core.WritableSignal<boolean>;
+    /**
+     * Emits once when a drag gesture begins, i.e. after the pointer has moved past
+     * the small activation threshold following a pointerdown.
+     */
+    readonly dragStart: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits once when the drag gesture ends (pointer released).
+     */
+    readonly dragEnd: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits on every pointer move while dragging, carrying the frame delta and
+     * absolute pointer position. See {@link NgnDragInfo}.
+     */
+    readonly dragged: _angular_core.OutputEmitterRef<NgnDragInfo>;
+    private readonly _pointerDownEvent;
+    private readonly _pointerMoveEvent;
+    private readonly _pointerUpEvent;
+    constructor();
+    protected abstract onDragged(delta: NgnDragInfo): void;
+    private onDraggedInt;
+    private handleDrag;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnDragBase, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnDragBase, never, never, {}, { "dragStart": "dragStart"; "dragEnd": "dragEnd"; "dragged": "dragged"; }, never, never, true, never>;
+}
+
+declare class NgnDragScroll extends NgnDragBase {
+    protected onDragged(delta: NgnDragInfo): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnDragScroll, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnDragScroll, "[ngnDragScroll]", never, {}, {}, never, never, true, never>;
+}
+
+declare class NgnDrag extends NgnDragBase {
+    protected onDragged(delta: NgnDragInfo): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnDrag, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnDrag, "[ngnDrag]", never, {}, {}, never, never, true, never>;
+}
+
+declare class NgnMovable extends NgnBase<'movable'> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"movable", ["root", "movable", "moved", "drag-handle-grab", "drag-handle-grabbing"], readonly []>>;
+    private readonly _el;
+    private readonly _document;
+    /**
+     * Whether the element is movable.
+     * @default true
+     */
+    readonly ngnMovable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The handle element used to drag the element. If omitted, the entire element will be used as the drag handle.
+     * @default null
+     */
+    readonly ngnMovableDragHandle: _angular_core.InputSignal<HTMLElement | null>;
+    /**
+     * When `true`, the cursor will change to indicate that the element / drag handle is movable.
+     * @default true
+     */
+    readonly ngnMovableChangeCursor: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * When `true`, the movement will be limited to the viewport.
+     * @default true
+     */
+    readonly ngnMovableLimitToViewport: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly _ngnMovableDragHandleWithPrevious;
+    private readonly _eventElement;
+    protected readonly dragged: _angular_core.WritableSignal<boolean>;
+    private readonly _pointerDownSignal;
+    private readonly _pointerMoveSignal;
+    private readonly _pointerUpSignal;
+    private readonly _isDragging;
+    private _startX;
+    private _startY;
+    constructor();
+    bakePosition(): void;
+    private refreshCursor;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnMovable, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnMovable, "[ngnMovable]", never, { "ngnMovable": { "alias": "ngnMovable"; "required": false; "isSignal": true; }; "ngnMovableDragHandle": { "alias": "ngnMovableDragHandle"; "required": false; "isSignal": true; }; "ngnMovableChangeCursor": { "alias": "ngnMovableChangeCursor"; "required": false; "isSignal": true; }; "ngnMovableLimitToViewport": { "alias": "ngnMovableLimitToViewport"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class NgnResizable {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"resizable", ["root", "resizable", "resized"], readonly []>>;
+    private readonly _el;
+    private readonly _isBrowser;
+    private readonly _document;
+    private readonly _ngnMovable;
+    private _isPointerDown;
+    /**
+     * Whether the element is resizable. The empty string (bare attribute) enables it.
+     * @default true
+     */
+    readonly ngnResizable: _angular_core.InputSignal<boolean | "" | null | undefined>;
+    /**
+     * Minimum and maximum size constraints for the resizable element. Number values
+     * are treated as pixels; strings are used as-is. Any bound left `null`/`undefined`
+     * is unconstrained (the effective maximum is still clamped to the viewport).
+     */
+    readonly ngnResizableSizeLimits: _angular_core.InputSignal<{
+        minWidth: string | number | null | undefined;
+        minHeight: string | number | null | undefined;
+        maxWidth: string | number | null | undefined;
+        maxHeight: string | number | null | undefined;
+    } | undefined>;
+    protected readonly resized: _angular_core.WritableSignal<boolean>;
+    private readonly _pointerDownSignal;
+    private readonly _pointerUpSignal;
+    private readonly _resizeEvent;
+    /**
+     * Formats a size value from string | number | null | undefined to a CSS string.
+     * @param value The size value to format
+     * @returns The formatted CSS string or null if the value is null/undefined
+     */
+    private formatSizeValue;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnResizable, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnResizable, "[ngnResizable]", never, { "ngnResizable": { "alias": "ngnResizable"; "required": false; "isSignal": true; }; "ngnResizableSizeLimits": { "alias": "ngnResizableSizeLimits"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class NgnScrollAmount {
+    private readonly _el;
+    /**
+     * Optional external scroll container. When set, scroll events and
+     * dimensions are tracked on this element instead of the host element.
+     */
+    readonly container: _angular_core.InputSignal<HTMLElement | undefined>;
+    readonly scrollTarget: _angular_core.Signal<HTMLElement>;
+    readonly scrollTop: _angular_core.WritableSignal<number>;
+    readonly scrollLeft: _angular_core.WritableSignal<number>;
+    private readonly _scrollEvent;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnScrollAmount, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnScrollAmount, "[ngnScrollAmount]", never, { "container": { "alias": "ngnScrollAmountContainer"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { NgnAutofocus, NgnDrag, NgnDragScroll, NgnMovable, NgnResizable, NgnScrollAmount };
+export type { NgnDragInfo };

package/types/ngneers-controls-drawer.d.ts

@@ -0,0 +1,308 @@
+import * as _ngneers_controls_custom_types from '@ngneers/controls-custom-types';
+import * as _iconify_types from '@iconify/types';
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import * as _ngneers_signal_translate from '@ngneers/signal-translate';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import { Openable, PopoverCloseBy } from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import { NgnBase } from '@ngneers/controls/base';
+
+type HeaderTemplateType = {
+    $implicit: {
+        close: () => void;
+        text?: string;
+        /**
+         * Id the drawer's `aria-labelledby` points at. Place it on your heading element
+         * in a custom `#header` template so the drawer keeps its accessible name.
+         */
+        headerId: string;
+    };
+};
+
+declare abstract class DrawerTemplates extends NgnBase<'drawer'> {
+    private readonly _defaultHeaderTemplate;
+    private readonly _userHeaderTemplate;
+    /**
+     * Set a custom template for the header.
+     * Can also be set using an `<ng-template>` element with `#header` template reference variable.
+     */
+    readonly templateHeader: _angular_core.InputSignal<TemplateRef<HeaderTemplateType> | null>;
+    protected readonly headerTemplate: _angular_core.Signal<TemplateRef<HeaderTemplateType>>;
+    private readonly _userFooterTemplate;
+    /**
+     * Set a custom template for the footer.
+     * Can also be set using an `<ng-template>` element with `#footer` template reference variable.
+     */
+    readonly templateFooter: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    protected readonly footerTemplate: _angular_core.Signal<TemplateRef<unknown> | null>;
+    private readonly _userContentTemplate;
+    /**
+     * Set a custom template for the content.
+     * Can also be set using an `<ng-template>` element with `#content` template reference variable.
+     */
+    readonly content: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    protected readonly contentTemplate: _angular_core.Signal<TemplateRef<unknown> | null>;
+    /**
+     * Types for the drawer templates.
+     */
+    readonly templateTypes: {
+        /**
+         * Type of the template variable for the header template.
+         */
+        header: HeaderTemplateType;
+    } & {
+        $implicit: {
+            header: Partial<HeaderTemplateType>;
+        };
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DrawerTemplates, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DrawerTemplates, never, never, { "templateHeader": { "alias": "templateHeader"; "required": false; "isSignal": true; }; "templateFooter": { "alias": "templateFooter"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; }, {}, ["_userHeaderTemplate", "_userFooterTemplate", "_userContentTemplate"], never, true, never>;
+}
+
+/**
+ * @category control
+ */
+declare class NgnDrawer extends DrawerTemplates implements Openable {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"drawer", ["root", "horizontal", "content", "header", "footer", "default-header", "default-header-text", "anim-in", "anim-out"], readonly []>>;
+    protected readonly i18n: _ngneers_signal_translate.TranslationsSignal<{
+        calendar: {
+            today: string;
+            input: string;
+            selectYear: string;
+            selectMonth: string;
+            previousMonth: string;
+            nextMonth: string;
+            weekdays: {
+                monday: string;
+                tuesday: string;
+                wednesday: string;
+                thursday: string;
+                friday: string;
+                saturday: string;
+                sunday: string;
+            };
+            weekdaysShort: {
+                monday: string;
+                tuesday: string;
+                wednesday: string;
+                thursday: string;
+                friday: string;
+                saturday: string;
+                sunday: string;
+            };
+            months: {
+                january: string;
+                february: string;
+                march: string;
+                april: string;
+                may: string;
+                june: string;
+                july: string;
+                august: string;
+                september: string;
+                october: string;
+                november: string;
+                december: string;
+            };
+        };
+        editInplace: {
+            placeholder: string;
+            confirm: string;
+        };
+        filter: {
+            noFilter: string;
+            addCondition: string;
+            removeCondition: string;
+            operator: string;
+            value: string;
+            clear: string;
+            apply: string;
+            cancel: string;
+            matchModeLabel: string;
+            match: {
+                all: string;
+                any: string;
+                and: string;
+                or: string;
+            };
+            selected: string;
+            conditions: string;
+            operators: {
+                isEqual: string;
+                isNotEqual: string;
+                contains: string;
+                startsWith: string;
+                endsWith: string;
+                in: string;
+                isEmpty: string;
+                isNotEmpty: string;
+                greaterThan: string;
+                greaterThanOrEqual: string;
+                lessThan: string;
+                lessThanOrEqual: string;
+                after: string;
+                onOrAfter: string;
+                before: string;
+                onOrBefore: string;
+                isTrue: string;
+                isFalse: string;
+                custom: string;
+            };
+        };
+        splitter: {
+            handleLabel: string;
+        };
+        inputField: {
+            clearInput: string;
+        };
+        maskInput: {
+            roleDescription: string;
+            segmentRange: string;
+            optionSeparator: string;
+        };
+        drawer: {
+            close: string;
+        };
+        dialog: {
+            close: string;
+        };
+        chip: {
+            close: string;
+        };
+        breadcrumb: {
+            overflow: string;
+        };
+        toast: {
+            close: string;
+            region: string;
+        };
+        snackbar: {
+            close: string;
+            region: string;
+            severity: {
+                error: string;
+                warning: string;
+                success: string;
+                info: string;
+            };
+        };
+        upload: {
+            upload: string;
+            uploadNamed: string;
+            retryNamed: string;
+            cancelNamed: string;
+            removeNamed: string;
+            progressNamed: string;
+        };
+        select: {
+            filterOptions: string;
+        };
+        paginator: {
+            previousPage: string;
+            nextPage: string;
+        };
+        listBox: {
+            noItemsFound: string;
+        };
+        tree: {
+            noItemsFound: string;
+        };
+        table: {
+            selectAllRows: string;
+            selectRow: string;
+            sortedBy: string;
+            sortAscending: string;
+            sortDescending: string;
+            sortCleared: string;
+            selectedCount: string;
+            page: string;
+            resultCount: string;
+        };
+        state: {
+            loading: string;
+            success: string;
+            warning: string;
+            error: string;
+            cancelled: string;
+        };
+    }, "_">;
+    protected readonly headerId: string;
+    private _focusTrap?;
+    /**
+     * Emits when the drawer has fully closed.
+     */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Shows or hides the drawer.
+     *
+     * You probably want to react to openChange events from outside to update your variable accordingly.
+     * @default false
+     */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /**
+     * How the drawer closes depending on user interaction.
+     * @default 'any'
+     */
+    readonly closeBy: _angular_core.InputSignal<PopoverCloseBy>;
+    /**
+     * Whether the drawer is a modal or not.
+     * A modal drawer prevents interaction with the rest of the page while open.
+     * @default false
+     */
+    readonly modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Position of the drawer
+     * @default 'left'
+     */
+    readonly position: _angular_core.InputSignal<"top" | "bottom" | "left" | "right" | "fullscreen">;
+    /**
+     * The width or height of the drawer depending on its position
+     * @default '300px'
+     */
+    readonly size: _angular_core.InputSignal<string>;
+    /**
+     * Header text of the drawer
+     */
+    readonly header: _angular_core.InputSignal<string | undefined>;
+    /**
+     * The icon to use for the close button in the default header template
+     */
+    readonly iconClose: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /**
+     * Lazy load the drawer content
+     * @default false
+     */
+    readonly lazy: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to cache the lazy loaded content
+     * @default false
+     */
+    readonly cache: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly appliedPosition: _angular_core.Signal<"top" | "bottom" | "left" | "right" | "fullscreen">;
+    private readonly platform;
+    private _togglingTriggeredByInput;
+    protected readonly isFullyClosed: _angular_core.WritableSignal<boolean>;
+    protected readonly closeByPopover: _angular_core.Signal<"auto" | "manual">;
+    protected readonly horizontal: _angular_core.Signal<boolean>;
+    protected readonly doClose: () => void;
+    constructor();
+    /**
+     * Opens the drawer. Alternatively, you can also set the `open` input to `true`.
+     */
+    show(): void;
+    /**
+     * Closes the drawer. Alternatively, you can also set the `open` input to `false`.
+     */
+    hide(): void;
+    /**
+     * Toggles the drawer open or closed. Alternatively, you can also set the `open` input accordingly.
+     */
+    toggle(): void;
+    protected onToggle(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnDrawer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnDrawer, "ngn-drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeBy": { "alias": "closeBy"; "required": false; "isSignal": true; }; "modal": { "alias": "modal"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "iconClose": { "alias": "iconClose"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "cache": { "alias": "cache"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "open": "openChange"; }, never, ["*"], true, never>;
+}
+
+export { NgnDrawer };
+export type { HeaderTemplateType };