@scania-nl/tegel-angular-extensions 0.0.7 → 0.0.9

package/index.d.ts

@@ -1,8 +1,9 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, EnvironmentProviders } from '@angular/core';
+import { InjectionToken, EnvironmentProviders, InputSignal, OutputEmitterRef, TemplateRef, Type, ElementRef } from '@angular/core';
 import z$1, { z } from 'zod';
 import { zx } from '@traversable/zod';
 import { Subject } from 'rxjs';
+import { ControlValueAccessor } from '@angular/forms';
 
 /**
  * List of available toast types (inherited from Tegel)
@@ -47,6 +48,12 @@ interface ToastConfig {
 declare const TOAST_CONFIG: InjectionToken<ToastConfig>;
 declare const DEFAULT_TOAST_CONFIG: Required<ToastConfig>;
 
+/**
+ * Provides toast configuration defaults and bootstraps the global toast host.
+ *
+ * @param config Optional config overrides applied on top of defaults.
+ * @returns EnvironmentProviders to register in application providers.
+ */
 declare function provideToast(config?: Partial<ToastConfig>): EnvironmentProviders;
 
 /**
@@ -236,6 +243,247 @@ declare class ToastService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ToastService>;
 }
 
+interface ModalRef {
+    /** Unique id for the modal instance. */
+    id: string;
+    /** Opens the modal instance. */
+    open: () => void;
+    /** Closes the modal instance. */
+    close: () => void;
+    /** Removes the modal instance from the DOM. */
+    remove: () => void;
+}
+
+/**
+ * Extracts the inner value type from an InputSignal.
+ * Example: InputSignal<string> -> string
+ */
+type ExtractInputValue<T> = T extends InputSignal<infer V> ? V : never;
+/**
+ * Gets all property keys that are required input signals (`input.required<T>()`).
+ * These are InputSignals where `undefined` is NOT part of the value type.
+ */
+type RequiredInputKeys<T> = {
+    [K in keyof T]: T[K] extends InputSignal<infer V> ? undefined extends V ? never : K : never;
+}[keyof T];
+/**
+ * Gets all property keys that are optional input signals (`input<T | undefined>()`).
+ * These are InputSignals where `undefined` IS part of the value type.
+ */
+type OptionalInputKeys<T> = {
+    [K in keyof T]: T[K] extends InputSignal<infer V> ? undefined extends V ? K : never : never;
+}[keyof T];
+/**
+ * Creates a type representing the input values for an Angular component.
+ * - Required inputs (`input.required<T>()`) become required properties
+ * - Optional inputs (`input<T | undefined>()`) become optional properties
+ * - Non-input properties are excluded
+ *
+ * @example
+ * class MyComponent {
+ *   name = input.required<string>();
+ *   age = input<number | undefined>();
+ * }
+ *
+ * type Inputs = ComponentInputs<MyComponent>;
+ * // { name: string; age?: number | undefined }
+ */
+type ComponentInputs<T> = {
+    [K in RequiredInputKeys<T>]: ExtractInputValue<T[K]>;
+} & {
+    [K in OptionalInputKeys<T>]?: ExtractInputValue<T[K]>;
+};
+/**
+ * Extracts the inner value type from an OutputEmitterRef.
+ * Example: OutputEmitterRef<string> -> string
+ */
+type ExtractOutputValue<T> = T extends OutputEmitterRef<infer V> ? V : never;
+/**
+ * Gets all property keys that are output signals (`output<T>()`).
+ */
+type OutputKeys<T> = {
+    [K in keyof T]: T[K] extends OutputEmitterRef<unknown> ? K : never;
+}[keyof T];
+/**
+ * Creates a type representing the output event handlers for an Angular component.
+ * Converts output signals into callback functions that receive the emitted value.
+ *
+ * @example
+ * class MyComponent {
+ *   closed = output<void>();
+ *   valueChanged = output<string>();
+ *   notAnOutput = 'regular property';
+ * }
+ *
+ * type Outputs = ComponentOutputs<MyComponent>;
+ * // { closed?: () => void; valueChanged?: (value: string) => void }
+ */
+type ComponentOutputs<T> = {
+    [K in OutputKeys<T>]?: (value: ExtractOutputValue<T[K]>) => void;
+};
+
+/** Pure domain/UI types for modal components. */
+/** Supported modal sizes. */
+type ModalSize = 'lg' | 'md' | 'sm' | 'xs';
+/** Positioning behavior for the actions slot. */
+type ModalActionsPosition = 'sticky' | 'static';
+/** ARIA role used by the modal for accessibility. */
+type ModalAlertDialogRole = 'dialog' | 'alertdialog';
+/** Descriptor for a button rendered in the modal actions area. */
+interface ModalButton {
+    /** Button label text. */
+    text: string;
+    /** Visual variant for the button. */
+    variant?: 'primary' | 'secondary' | 'success' | 'danger';
+    /** Size of the button. */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+    /** If true, clicking triggers modal dismissal. */
+    dismiss?: boolean;
+    /** Optional click handler (sync or async). */
+    onClick?: () => void | Promise<void>;
+}
+
+/**
+ * Configuration used by the modal service when creating modals.
+ * Individual modal options can override any of these values.
+ */
+interface ModalConfig {
+    /** Size of the modal dialog. */
+    size: ModalSize;
+    /** Positioning behavior for the actions area. */
+    actionsPosition: ModalActionsPosition;
+    /** Prevent closing when clicking the overlay. */
+    prevent: boolean;
+    /** Show or hide the close [X] button. */
+    closable: boolean;
+    /** ARIA role for the modal element. */
+    alertDialog: ModalAlertDialogRole;
+    /** If true, content is only rendered while open. */
+    lazy: boolean;
+    /** Whether a modal starts open */
+    startOpen: boolean;
+    /** Whether a modal should be removed from DOM on close */
+    removeOnClose: boolean;
+}
+/** Injection token for modal configuration defaults. */
+declare const MODAL_CONFIG: InjectionToken<ModalConfig>;
+/** Default modal configuration. */
+declare const DEFAULT_MODAL_CONFIG: Required<ModalConfig>;
+
+/** Component-based modal body with typed inputs/outputs. */
+type ModalComponentBody<TComponent = unknown> = {
+    component: Type<TComponent>;
+    inputs: ComponentInputs<TComponent>;
+    outputs?: ComponentOutputs<TComponent>;
+};
+/** Template-based modal body with an optional context. */
+type ModalTemplateBody<TContext = unknown> = {
+    template: TemplateRef<TContext>;
+    context?: TContext;
+};
+/** Union of supported modal body types. */
+type ModalBody<T = unknown> = string | ModalTemplateBody<T> | ModalComponentBody<T>;
+/** Public options used when creating a modal. */
+type ModalOptions<T = unknown> = Partial<ModalConfig> & {
+    selector?: string;
+    referenceEl?: HTMLElement;
+    header?: string | TemplateRef<unknown>;
+    body?: ModalBody<T>;
+    buttons?: ModalButton[];
+    /** Callback fired when the modal is closed (user or programmatic). */
+    onClosed?: () => void;
+    /** Callback fired when the modal is removed from the DOM. */
+    onRemoved?: () => void;
+};
+/** Runtime modal state stored by the service. */
+type Modal = Required<ModalConfig> & Omit<ModalOptions<unknown>, keyof ModalConfig> & {
+    id: string;
+    isOpen: boolean;
+};
+
+/**
+ * Central registry and lifecycle manager for modal instances.
+ *
+ * This service creates modals, tracks their state, and coordinates
+ * open/close/remove behavior across the application.
+ */
+declare class ModalService {
+    /** Default modal configuration injected via `MODAL_CONFIG`. */
+    private readonly config;
+    /** Incrementing counter for modal id generation. */
+    private id;
+    /** Internal store of modals keyed by id. */
+    private readonly _modals;
+    /** Read-only signal of all registered modals. */
+    readonly modals: _angular_core.Signal<Map<string, Modal>>;
+    /**
+     * Creates a new modal instance and registers it.
+     * @param options Modal options used to initialize the instance.
+     * @returns A ModalRef for controlling the instance.
+     */
+    create<T>(options?: ModalOptions<T>): ModalRef;
+    /**
+     * Opens a modal by id.
+     * @param id Modal id.
+     */
+    open(id: string): void;
+    /**
+     * Closes a modal by id.
+     * @param id Modal id.
+     */
+    close(id: string): void;
+    /**
+     * Removes a modal from the registry and DOM.
+     * Closes the modal first if it is open.
+     * @param id Modal id.
+     */
+    remove(id: string): void;
+    /**
+     * Closes all open modals.
+     */
+    closeAll(): void;
+    /**
+     * Removes all modals from the registry.
+     */
+    removeAll(): void;
+    /**
+     * Looks up a modal by id.
+     * @param id Modal id.
+     */
+    private getModal;
+    /**
+     * Updates the open/closed state of a modal if it exists.
+     * @param id Modal id.
+     * @param isOpen Desired open state.
+     */
+    private updateModalState;
+    /**
+     * Inserts or replaces a modal in the internal store.
+     * @param modal Modal to upsert.
+     */
+    private upsertModal;
+    /**
+     * Builds a modal instance by merging defaults, existing state, and options.
+     * @param id Modal id.
+     * @param existing Existing modal state (if any).
+     * @param options New options to apply.
+     * @param isOpen Optional override for open state.
+     */
+    private buildModal;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ModalService>;
+}
+
+/**
+ * Provides modal configuration defaults and bootstraps the global modal host.
+ *
+ * @param config Optional config overrides applied on top of defaults.
+ * @returns EnvironmentProviders to register in application providers.
+ */
+declare function provideModal(config?: Partial<ModalConfig>): EnvironmentProviders;
+
 /**
  * Extracts the **output type** (validated runtime shape)
  * from a Zod object schema — e.g. `z.output<typeof MySchema>`.
@@ -553,6 +801,169 @@ declare class HardRefreshDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HardRefreshDirective, "[taeHardRefresh]", never, { "clicksRequired": { "alias": "clicksRequired"; "required": false; "isSignal": true; }; "clickWindowMs": { "alias": "clickWindowMs"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Directive that provides typed context for an `ng-template`.
+ *
+ * This is a compile-time helper: it does not affect runtime behavior,
+ * but it allows Angular's template type checker to infer the template context.
+ *
+ * Usage:
+ * ```html
+ * <ng-template #tpl let-data [typedContext]="someContext">...</ng-template>
+ * ```
+ */
+declare class TypedTemplateDirective<T> {
+    /**
+     * Typed context value used only for type inference.
+     * This input is not read at runtime.
+     */
+    readonly typedContext: _angular_core.InputSignal<TemplateRef<T>>;
+    /**
+     * Template context guard to inform Angular's template type system.
+     * Always returns `true` at runtime; used purely for typing.
+     */
+    static ngTemplateContextGuard<T>(dir: TypedTemplateDirective<T>, ctx: unknown): ctx is {
+        $implicit: T;
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TypedTemplateDirective<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TypedTemplateDirective<any>, "ng-template[typedContext]", never, { "typedContext": { "alias": "typedContext"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** A single day entry used by the calendar grid renderer. */
+type CalendarDay = {
+    date: number;
+    month: number;
+    year: number;
+    isCurrentMonth: boolean;
+    isToday: boolean;
+    isSelected: boolean;
+};
+
+/**
+ * Standalone date/time picker that integrates with Angular forms via CVA.
+ *
+ * Supports `date`, `datetime`, and `time` modes, exposes a typed API via inputs,
+ * and emits form updates through the registered CVA callbacks.
+ *
+ * Adheres to Tegel design guidelines and can be used as a drop-in replacement.
+ */
+declare class TaeDateTimePickerComponent implements ControlValueAccessor {
+    private readonly elementRef;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly labelPosition: _angular_core.InputSignal<"inside" | "outside" | "no-label">;
+    readonly size: _angular_core.InputSignal<"lg" | "md" | "sm">;
+    readonly state: _angular_core.InputSignal<"error" | undefined>;
+    readonly helper: _angular_core.InputSignal<string>;
+    readonly mode: _angular_core.InputSignal<"date" | "datetime" | "time">;
+    private readonly internalValue;
+    readonly displayValue: _angular_core.Signal<string>;
+    private readonly suppressChange;
+    readonly disabled: _angular_core.WritableSignal<boolean>;
+    readonly labelId: string;
+    readonly showPicker: _angular_core.WritableSignal<boolean>;
+    readonly currentMonth: _angular_core.WritableSignal<number>;
+    readonly currentYear: _angular_core.WritableSignal<number>;
+    readonly calendarDays: _angular_core.Signal<CalendarDay[]>;
+    readonly selectedDay: _angular_core.WritableSignal<number | null>;
+    readonly selectedMonth: _angular_core.WritableSignal<number | null>;
+    readonly selectedYear: _angular_core.WritableSignal<number | null>;
+    readonly selectedHour: _angular_core.WritableSignal<string | null>;
+    readonly selectedMinute: _angular_core.WritableSignal<string | null>;
+    readonly selectedSecond: _angular_core.WritableSignal<string | null>;
+    readonly weekDays: readonly ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+    readonly months: readonly ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+    readonly hours: string[];
+    readonly minutes: string[];
+    readonly seconds: string[];
+    readonly placeholder: _angular_core.Signal<"dd-MM-YYYY HH:mm:ss" | "HH:mm:ss" | "dd-MM-YYYY">;
+    readonly currentMonthName: _angular_core.Signal<"January" | "February" | "March" | "April" | "May" | "June" | "July" | "August" | "September" | "October" | "November" | "December">;
+    private onChange;
+    private onTouched;
+    private updateScheduled;
+    constructor(elementRef: ElementRef);
+    /**
+     * Writes an ISO value from the outside into the picker state.
+     * @param value ISO date/datetime string.
+     */
+    writeValue(value: string): void;
+    /**
+     * Registers the CVA change handler.
+     * @param fn Callback invoked on value changes.
+     */
+    registerOnChange(fn: (value: string) => void): void;
+    /**
+     * Registers the CVA touched handler.
+     * @param fn Callback invoked on touch.
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * Updates the disabled state for the control.
+     * @param isDisabled Whether the control is disabled.
+     */
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Closes the picker when clicking outside the component.
+     * @param event Document click event.
+     */
+    onDocumentClick(event: MouseEvent): void;
+    /** Marks the control as touched. */
+    onBlur(): void;
+    /**
+     * Toggles the picker popover.
+     * @param event Click event from the control.
+     */
+    togglePicker(event: Event): void;
+    /** Moves the calendar to the previous month. */
+    previousMonth(): void;
+    /** Moves the calendar to the next month. */
+    nextMonth(): void;
+    /**
+     * Builds the calendar day grid for the current month.
+     * @returns Calendar day entries for rendering.
+     */
+    private buildCalendar;
+    /**
+     * Selects a date from the calendar grid.
+     * @param day Calendar day entry.
+     */
+    selectDate(day: CalendarDay): void;
+    /**
+     * Selects an hour in datetime mode.
+     * @param hour Two-digit hour string.
+     */
+    selectHour(hour: string): void;
+    /**
+     * Selects a minute in datetime mode.
+     * @param minute Two-digit minute string.
+     */
+    selectMinute(minute: string): void;
+    /**
+     * Selects a second in datetime mode.
+     * @param second Two-digit second string.
+     */
+    selectSecond(second: string): void;
+    /** Confirms the selection and closes the picker. */
+    confirm(): void;
+    /**
+     * Parses an ISO date segment into selected date parts.
+     * @param datePart ISO date segment.
+     */
+    private parseDatePart;
+    /** Computes and emits the ISO value from current parts. */
+    private updateValue;
+    /** Resets all selected date/time parts to defaults. */
+    private resetSelection;
+    /**
+     * Returns current selected date parts when fully defined.
+     * @returns Date parts or `null` if incomplete.
+     */
+    private getSelectedDateParts;
+    /** Returns today's date in local time. */
+    private getToday;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TaeDateTimePickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TaeDateTimePickerComponent, "tae-date-time-picker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "helper": { "alias": "helper"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /**
  * An enhanced standalone footer component based on the Tegel `TdsFooterComponent`.
  *
@@ -577,7 +988,7 @@ declare class TaeFooterComponent {
      *
      * @default 'normal'
      */
-    readonly variant: _angular_core.InputSignal<"normal" | "small">;
+    readonly variant: _angular_core.InputSignal<"small" | "normal">;
     /**
      * Optional application version string to display in the footer.
      *
@@ -593,5 +1004,5 @@ declare class TaeFooterComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TaeFooterComponent, "tae-footer", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "version": { "alias": "version"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { BarcodeScannerDirective, DEFAULT_TOAST_CONFIG, HardRefreshDirective, TOAST_CONFIG, TaeFooterComponent, ToastService, createEnvKit, parseEnvFile, provideRuntimeConfig, provideStaticConfig, provideToast };
-export type { Toast, ToastConfig, ToastOptions };
+export { BarcodeScannerDirective, DEFAULT_MODAL_CONFIG, DEFAULT_TOAST_CONFIG, HardRefreshDirective, MODAL_CONFIG, ModalService, TOAST_CONFIG, TaeDateTimePickerComponent, TaeFooterComponent, ToastService, TypedTemplateDirective, createEnvKit, parseEnvFile, provideModal, provideRuntimeConfig, provideStaticConfig, provideToast };
+export type { Modal, ModalActionsPosition, ModalAlertDialogRole, ModalButton, ModalConfig, ModalOptions, ModalRef, ModalSize, Toast, ToastConfig, ToastOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania-nl/tegel-angular-extensions",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "license": "MIT",
   "publishConfig": {
     "access": "public"