@ngneers/controls 0.0.1-next.0

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

@@ -0,0 +1,466 @@
+import * as _ngneers_controls_mask_input from '@ngneers/controls/mask-input';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import * as _ngneers_signal_translate from '@ngneers/signal-translate';
+import * as _angular_core from '@angular/core';
+import { TemplateRef, Signal } from '@angular/core';
+import { ValueControlBase } from '@ngneers/controls/base';
+import { NgnItem } from '@ngneers/controls/api';
+
+declare const MONTHS: readonly ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
+type Month = (typeof MONTHS)[number];
+declare const WEEK_DAYS: readonly ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
+type WeekDay = (typeof WEEK_DAYS)[number];
+type DayModel = {
+    date: number;
+    /**
+     * -1 = previous month, 0 = current month, 1 = next month
+     */
+    monthOffset: number;
+};
+type DayTemplateType = {
+    $implicit: {
+        date: number;
+        selected: boolean;
+        today: boolean;
+        fromOtherMonth: boolean;
+    };
+};
+type WeekDayTemplateType = {
+    $implicit: {
+        weekDay: WeekDay;
+        translation: string;
+    };
+};
+type MonthTemplateType = {
+    $implicit: {
+        month: Month;
+        change: (newMonth: Month) => void;
+    };
+};
+type TimeTemplateType = {
+    $implicit: {
+        time: Date | null;
+        showSeconds: boolean;
+        change: (newTime: Date | null) => void;
+    };
+};
+type YearTemplateType = {
+    $implicit: {
+        year: number;
+        change: (newYear: number) => void;
+    };
+};
+
+declare abstract class CalendarTemplates extends ValueControlBase<'calendar', Date | null> {
+    private readonly _defaultDayTemplate;
+    private readonly _userDayTemplate;
+    /**
+     * Set a custom template for a day.
+     * Can also be set using an `<ng-template>` element with `#day` template reference variable.
+     */
+    readonly templateDay: _angular_core.InputSignal<TemplateRef<DayTemplateType> | null>;
+    protected readonly dayTemplate: _angular_core.Signal<TemplateRef<DayTemplateType>>;
+    private readonly _defaultWeekDayTemplate;
+    private readonly _userWeekDayTemplate;
+    /**
+     * Set a custom template for a week day.
+     * Can also be set using an `<ng-template>` element with `#weekDay` template reference variable.
+     */
+    readonly templateWeekDay: _angular_core.InputSignal<TemplateRef<WeekDayTemplateType> | null>;
+    protected readonly weekDayTemplate: _angular_core.Signal<TemplateRef<WeekDayTemplateType>>;
+    private readonly _defaultMonthTemplate;
+    private readonly _userMonthTemplate;
+    /**
+     * Set a custom template for a month.
+     * Can also be set using an `<ng-template>` element with `#month` template reference variable.
+     */
+    readonly templateMonth: _angular_core.InputSignal<TemplateRef<MonthTemplateType> | null>;
+    protected readonly monthTemplate: _angular_core.Signal<TemplateRef<MonthTemplateType>>;
+    private readonly _defaultTimeTemplate;
+    private readonly _userTimeTemplate;
+    /**
+     * Set a custom template for the time input.
+     * Can also be set using an `<ng-template>` element with `#time` template reference variable.
+     */
+    readonly templateTime: _angular_core.InputSignal<TemplateRef<TimeTemplateType> | null>;
+    protected readonly timeTemplate: _angular_core.Signal<TemplateRef<TimeTemplateType>>;
+    private readonly _defaultYearTemplate;
+    private readonly _userYearTemplate;
+    /**
+     * Set a custom template for the year input.
+     * Can also be set using an `<ng-template>` element with `#year` template reference variable.
+     */
+    readonly templateYear: _angular_core.InputSignal<TemplateRef<YearTemplateType> | null>;
+    protected readonly yearTemplate: _angular_core.Signal<TemplateRef<YearTemplateType>>;
+    /**
+     * Types for the calendar templates.
+     */
+    readonly templateTypes: {
+        /**
+         * Type of the template variable for the day template.
+         */
+        day: DayTemplateType;
+        /**
+         * Type of the template variable for the week day template.
+         */
+        weekDay: WeekDayTemplateType;
+        /**
+         * Type of the template variable for the month template.
+         */
+        month: MonthTemplateType;
+        /**
+         * Type of the template variable for the time template.
+         */
+        time: TimeTemplateType;
+        /**
+         * Type of the template variable for the year template.
+         */
+        year: YearTemplateType;
+    } & {
+        $implicit: {
+            day: Partial<DayTemplateType>;
+            weekDay: Partial<WeekDayTemplateType>;
+            month: Partial<MonthTemplateType>;
+            time: Partial<TimeTemplateType>;
+            year: Partial<YearTemplateType>;
+        };
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CalendarTemplates, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CalendarTemplates, never, never, { "templateDay": { "alias": "templateDay"; "required": false; "isSignal": true; }; "templateWeekDay": { "alias": "templateWeekDay"; "required": false; "isSignal": true; }; "templateMonth": { "alias": "templateMonth"; "required": false; "isSignal": true; }; "templateTime": { "alias": "templateTime"; "required": false; "isSignal": true; }; "templateYear": { "alias": "templateYear"; "required": false; "isSignal": true; }; }, {}, ["_userDayTemplate", "_userWeekDayTemplate", "_userMonthTemplate", "_userTimeTemplate", "_userYearTemplate"], never, true, never>;
+}
+
+type MonthItemType = NgnItem<{
+    $: (typeof MONTHS)[number];
+}, '$'>;
+/**
+ * @category control
+ */
+declare class NgnCalendar extends CalendarTemplates {
+    /**
+     * Set the first day of the week.
+     * @default 'monday'
+     */
+    readonly firstDayOfWeek: _angular_core.InputSignal<"sunday" | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday">;
+    /**
+     * Whether to show the time input.
+     * @default false
+     */
+    readonly showTime: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to show seconds in the time input.
+     * @default false
+     */
+    readonly showSeconds: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to show the calendar inline instead of with a input field & popup.
+     * @default false
+     */
+    readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The format of the date displayed in the input field.
+     * @default 'MM/dd/yyyy'
+     */
+    readonly format: _angular_core.InputSignal<string>;
+    private readonly _popover;
+    private readonly _mask;
+    private readonly _platform;
+    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;
+        };
+    }, "_">;
+    readonly isFieldControl = true;
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"calendar", ["root", "inline", "invalid", "details", "header", "navigation", "days", "week-day", "day", "day-selected", "day-today", "day-other-month", "months", "month", "time", "input-field"], readonly [{
+        readonly class: "input";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"mask-input", ["root", "section", "section-active", "section-placeholder", "separator", "proxy", "sr-only"], readonly []>;
+    }, {
+        readonly class: "trigger-icon";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"icon", ["root", "default"], readonly []>;
+    }, {
+        readonly class: "popover";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+    }, {
+        readonly class: "previous";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+    }, {
+        readonly class: "next";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+    }, {
+        readonly class: "current-month";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
+            readonly class: "popover";
+            readonly template: _ngneers_controls_themes.ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+        }, {
+            readonly class: "list-box";
+            readonly template: _ngneers_controls_themes.ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "item-selected", "item-highlighted", "item-disabled"], readonly [{
+                readonly class: "checkbox";
+                readonly template: _ngneers_controls_themes.ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+            }, {
+                readonly class: "scroller";
+                readonly template: _ngneers_controls_themes.ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+            }]>;
+        }, {
+            readonly class: "filter";
+            readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+                readonly class: "input";
+                readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+                readonly projected: true;
+            }]>;
+        }]>;
+    }, {
+        readonly class: "current-year";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
+            readonly class: "popover";
+            readonly template: _ngneers_controls_themes.ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+        }, {
+            readonly class: "list-box";
+            readonly template: _ngneers_controls_themes.ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "item-selected", "item-highlighted", "item-disabled"], readonly [{
+                readonly class: "checkbox";
+                readonly template: _ngneers_controls_themes.ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+            }, {
+                readonly class: "scroller";
+                readonly template: _ngneers_controls_themes.ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+            }]>;
+        }, {
+            readonly class: "filter";
+            readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+                readonly class: "input";
+                readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+                readonly projected: true;
+            }]>;
+        }]>;
+    }, {
+        readonly class: "current-month-field";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+            readonly class: "input";
+            readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+            readonly projected: true;
+        }]>;
+    }, {
+        readonly class: "current-year-field";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+            readonly class: "input";
+            readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+            readonly projected: true;
+        }]>;
+    }]>>;
+    protected get anchorElement(): HTMLElement;
+    protected readonly year: _angular_core.WritableSignal<number>;
+    protected readonly month: _angular_core.WritableSignal<number>;
+    protected readonly yearOptions: NgnItem[];
+    protected readonly monthOptions: Signal<NgnItem<MonthItemType>[]>;
+    protected readonly valueStr: Signal<string | null>;
+    protected readonly maskCfg: Signal<_ngneers_controls_mask_input.MaskInputCfg>;
+    protected readonly previousMonth: () => void;
+    protected readonly nextMonth: () => void;
+    protected readonly previousYear: () => void;
+    protected readonly nextYear: () => void;
+    protected selectMonth(month: Month): void;
+    protected selectYear(year: number): void;
+    protected selectDay(day: DayModel): void;
+    protected changeTime(newTime: Date | null): void;
+    /**
+     * Places focus from a pointer event: forwards the location to the embedded
+     * mask so the section nearest the cursor is selected, then opens the popup.
+     * Implemented as the `NgnBase.focusFromPointer` hook so it also works when the
+     * calendar is wrapped in an `ngn-input-field` — the outer field delegates the
+     * click here (with the real coordinates) instead of synthesising a
+     * coordinate-less click. Invoked by the calendar's own field click too.
+     */
+    focusFromPointer(event: MouseEvent): boolean;
+    /**
+     * Shows the calendar popup. Only works if `inline` is `false`.
+     */
+    show(): void;
+    /**
+     * Hides the calendar popup. Only works if `inline` is `false`.
+     */
+    hide(): void;
+    protected onKeyDown(event: KeyboardEvent): void;
+    /** The current (possibly partial) text in the mask field, awaiting blur. */
+    private readonly _inputString;
+    private readonly _clearingMaskInput;
+    private readonly _clearValueWhenMaskBecomesEmpty;
+    protected stringValueChange(newValue: string | null): void;
+    /** Parse the complete mask string into the calendar value. */
+    private parseInputString;
+    protected potentiallyBlurred(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnCalendar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnCalendar, "ngn-calendar", never, { "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Parses a date string according to `format`, the inverse of {@link formatDate}.
+ *
+ * Unlike `new Date(string)` this is format-aware (so e.g. `dd.MM.yyyy` parses
+ * correctly) and, crucially, **clamps the day to the number of days in the
+ * resolved month/year** instead of rolling over: `31` in February becomes the
+ * 28th/29th rather than spilling into March. Returns `null` when the string does
+ * not match the format.
+ *
+ * Two-digit years (`yy`) are interpreted as 2000–2099. Numeric tokens are capped
+ * at their natural digit count so separator-free formats parse unambiguously.
+ */
+declare function parseDate(str: string, format: string): Date | null;
+declare function formatDate(value: Date | null, format: string): string;
+
+export { MONTHS, NgnCalendar, WEEK_DAYS, formatDate, parseDate };
+export type { DayModel, DayTemplateType, Month, MonthTemplateType, TimeTemplateType, WeekDay, WeekDayTemplateType, YearTemplateType };

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

@@ -0,0 +1,40 @@
+import * as _angular_core from '@angular/core';
+import * as _ngneers_controls_custom_types from '@ngneers/controls-custom-types';
+import * as _iconify_types from '@iconify/types';
+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';
+import { InputGeneric } from '@ngneers/controls/utils';
+
+type ValueType<Indeterminate extends boolean> = InputGeneric<Indeterminate, false> extends false ? boolean : boolean | null;
+/**
+ * @category control
+ */
+declare class NgnCheckbox<Indeterminate extends boolean> extends ValueControlBase<'checkbox', ValueType<Indeterminate>> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>>;
+    /**
+     * Set a custom icon for the checked state.
+     */
+    readonly iconChecked: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /**
+     * Set a custom icon for the unchecked state.
+     */
+    readonly iconUnchecked: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /**
+     * Set a custom icon for the indeterminate state.
+     */
+    readonly iconIndeterminate: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /**
+     * Set whether to allow the indeterminate state.
+     * If `true`, this will change the {@link value} type to `boolean | null`.
+     */
+    readonly allowIndeterminate: _angular_core.InputSignal<Indeterminate | undefined>;
+    protected readonly indeterminate: _angular_core.Signal<boolean | undefined>;
+    protected changed(event: Event): void;
+    protected onClick(event: Event): void;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnCheckbox<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnCheckbox<any>, "ngn-checkbox", never, { "iconChecked": { "alias": "iconChecked"; "required": false; "isSignal": true; }; "iconUnchecked": { "alias": "iconUnchecked"; "required": false; "isSignal": true; }; "iconIndeterminate": { "alias": "iconIndeterminate"; "required": false; "isSignal": true; }; "allowIndeterminate": { "alias": "allowIndeterminate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { NgnCheckbox };