@ngneers/controls 0.0.1-pre1 → 0.0.1-pre3

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

@@ -0,0 +1,146 @@
+import * as _angular_core from '@angular/core';
+import { AfterViewInit, 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 implements AfterViewInit {
+    private readonly _el;
+    private readonly _focused;
+    private readonly _isInitialized;
+    readonly ngnAutofocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    constructor();
+    ngAfterViewInit(): void;
+    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?;
+    protected readonly isDragging: _angular_core.WritableSignal<boolean>;
+    readonly dragStart: _angular_core.OutputEmitterRef<void>;
+    readonly dragEnd: _angular_core.OutputEmitterRef<void>;
+    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 _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>>;
+    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 _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>>;
+    private readonly _el;
+    private readonly _isBrowser;
+    private readonly _document;
+    private readonly _ngnMovable;
+    private _isPointerDown;
+    /**
+     * Whether the element is resizable.
+     */
+    readonly ngnResizable: _angular_core.InputSignal<boolean | "" | null | undefined>;
+    /**
+     * The maximum size of the resizable element.
+     */
+    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;
+    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, {}, {}, never, never, true, never>;
+}
+
+export { NgnAutofocus, NgnDrag, NgnDragScroll, NgnMovable, NgnResizable, NgnScrollAmount };
+export type { NgnDragInfo };

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

@@ -0,0 +1,220 @@
+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;
+    };
+};
+
+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 _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>>;
+    protected readonly i18n: _ngneers_signal_translate.TranslationsSignal<{
+        calendar: {
+            today: string;
+            selectYear: 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;
+        };
+        filter: {
+            noFilter: string;
+            addCondition: string;
+            removeCondition: string;
+            clear: string;
+            matchModeLabel: string;
+            match: {
+                all: string;
+                any: 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;
+        };
+        drawer: {
+            close: string;
+        };
+    }, "_">;
+    /**
+     * 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.
+     */
+    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<string | 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 };

package/types/ngneers-controls-edit-inplace.d.ts

@@ -0,0 +1,182 @@
+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 * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import { ValueControlBase } from '@ngneers/controls/base';
+
+type EditTemplateType = {
+    $implicit: {
+        close: () => void;
+        value: string;
+        update: (value: string) => void;
+    };
+};
+type DisplayTemplateType = {
+    $implicit: {
+        value: string;
+    };
+};
+
+declare abstract class EditInplaceTemplates extends ValueControlBase<'editInplace', string> {
+    private readonly _defaultDisplayTemplate;
+    private readonly _userDisplayTemplate;
+    /**
+     * Set a custom template for the display.
+     * Can also be set using an `<ng-template>` element with `#display` template reference variable.
+     */
+    readonly templateDisplay: _angular_core.InputSignal<TemplateRef<DisplayTemplateType> | null>;
+    protected readonly displayTemplate: _angular_core.Signal<TemplateRef<DisplayTemplateType>>;
+    private readonly _defaultEditTemplate;
+    private readonly _userEditTemplate;
+    /**
+     * Set a custom template for the edit view.
+     * Can also be set using an `<ng-template>` element with `#edit` template reference variable.
+     */
+    readonly templateEdit: _angular_core.InputSignal<TemplateRef<EditTemplateType> | null>;
+    protected readonly editTemplate: _angular_core.Signal<TemplateRef<EditTemplateType>>;
+    /**
+     * Types for the drawer templates.
+     */
+    readonly templateTypes: {
+        /**
+         * Type of the template variable for the display template.
+         */
+        display: DisplayTemplateType;
+        /**
+         * Type of the template variable for the edit template.
+         */
+        edit: EditTemplateType;
+    } & {
+        $implicit: {
+            display: Partial<DisplayTemplateType>;
+            edit: Partial<EditTemplateType>;
+        };
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EditInplaceTemplates, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<EditInplaceTemplates, never, never, { "templateDisplay": { "alias": "templateDisplay"; "required": false; "isSignal": true; }; "templateEdit": { "alias": "templateEdit"; "required": false; "isSignal": true; }; }, {}, ["_userDisplayTemplate", "_userEditTemplate"], never, true, never>;
+}
+
+/**
+ * @category control
+ */
+declare class NgnEditInplace extends EditInplaceTemplates {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"edit-inplace", ["root", "disabled", "readonly", "invalid", "default-display", "default-fallback-display", "default-edit", "default-edit-input", "default-edit-close-button"], readonly [_ngneers_controls_themes.ControlTemplate<"inplace", ["root", "content", "display", "disabled"], readonly _ngneers_controls_themes.ControlTemplate<string, string[], readonly any[]>[]>]>>;
+    protected readonly i18n: _ngneers_signal_translate.TranslationsSignal<{
+        calendar: {
+            today: string;
+            selectYear: 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;
+        };
+        filter: {
+            noFilter: string;
+            addCondition: string;
+            removeCondition: string;
+            clear: string;
+            matchModeLabel: string;
+            match: {
+                all: string;
+                any: 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;
+        };
+        drawer: {
+            close: string;
+        };
+    }, "_">;
+    protected readonly closeContent: () => void;
+    /**
+     * Controls the visibility of the content.
+     */
+    readonly editVisible: _angular_core.ModelSignal<boolean>;
+    /**
+     * Whether the content is loaded lazily.
+     * @default true
+     */
+    readonly lazy: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the content is cached when closed.
+     * @default false
+     */
+    readonly cache: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Switches to the edit view.
+     */
+    switchToEdit(): void;
+    /**
+     * Switches to the display view.
+     */
+    switchToDisplay(): void;
+    /**
+     * Toggles between the display and content views.
+     */
+    toggle(): void;
+    protected focusOut(event: FocusEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnEditInplace, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnEditInplace, "ngn-edit-inplace", never, { "editVisible": { "alias": "editVisible"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "cache": { "alias": "cache"; "required": false; "isSignal": true; }; }, { "editVisible": "editVisibleChange"; }, never, never, true, never>;
+}
+
+export { NgnEditInplace };
+export type { DisplayTemplateType, EditTemplateType };