@tekus/design-system 5.30.0 → 5.31.0

package/types/tekus-design-system-components-card.d.ts

@@ -45,6 +45,10 @@ type TkCardLayout = 'vertical' | 'horizontal';
 declare class CardComponent {
     /** The primary title of the card. Required. */
     title: _angular_core.InputSignal<string>;
+    /** Optional link (routerLink or URL) for the title. */
+    titleLink: _angular_core.InputSignal<string | unknown[] | null | undefined>;
+    /** Optional external link (href) for the title. */
+    titleHref: _angular_core.InputSignal<string | null | undefined>;
     /** Optional icon to display next to the title. */
     titleIcon: _angular_core.InputSignal<string | undefined>;
     /** Optional secondary description. */
@@ -63,6 +67,10 @@ declare class CardComponent {
     badgeText: _angular_core.InputSignal<string | undefined>;
     /** Optional secondary metadata text (e.g. file size) displayed next to the badge. */
     secondaryBadgeText: _angular_core.InputSignal<string | undefined>;
+    /** Optional date/time value for connection status. */
+    connectionStatusDate: _angular_core.InputSignal<string | number | Date | null | undefined>;
+    /** Optional connection status severity: 'success' | 'warn' | 'danger' | 'gray'. */
+    connectionStatusSeverity: _angular_core.InputSignal<"danger" | "success" | "warn" | "gray">;
     /** List of actions associated with the card. */
     actions: _angular_core.InputSignal<TkCardAction[]>;
     /** Action group list to be used with tk-action-group */
@@ -93,7 +101,7 @@ declare class CardComponent {
      */
     getStatusBarSeverity(severity?: string): 'primary' | 'secondary' | 'success' | 'error';
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "tk-card", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "titleIcon": { "alias": "titleIcon"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "showImage": { "alias": "showImage"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "badgeText": { "alias": "badgeText"; "required": false; "isSignal": true; }; "secondaryBadgeText": { "alias": "secondaryBadgeText"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "actionGroup": { "alias": "actionGroup"; "required": false; "isSignal": true; }; "actionGroupMaxVisible": { "alias": "actionGroupMaxVisible"; "required": false; "isSignal": true; }; "infoElements": { "alias": "infoElements"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "tk-card", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "titleLink": { "alias": "titleLink"; "required": false; "isSignal": true; }; "titleHref": { "alias": "titleHref"; "required": false; "isSignal": true; }; "titleIcon": { "alias": "titleIcon"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "showImage": { "alias": "showImage"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "badgeText": { "alias": "badgeText"; "required": false; "isSignal": true; }; "secondaryBadgeText": { "alias": "secondaryBadgeText"; "required": false; "isSignal": true; }; "connectionStatusDate": { "alias": "connectionStatusDate"; "required": false; "isSignal": true; }; "connectionStatusSeverity": { "alias": "connectionStatusSeverity"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "actionGroup": { "alias": "actionGroup"; "required": false; "isSignal": true; }; "actionGroupMaxVisible": { "alias": "actionGroupMaxVisible"; "required": false; "isSignal": true; }; "infoElements": { "alias": "infoElements"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, never, never, true, never>;
 }
 
 export { CardComponent };

package/types/tekus-design-system-components-stepper.d.ts

@@ -0,0 +1,117 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+
+/**
+ * Interface representing a button action in the stepper step's footer.
+ */
+interface StepAction {
+    /** Text label displayed on the button */
+    label: string;
+    /** Action handler invoked when the button is clicked */
+    action: () => void;
+    /**
+     * Status of whether the action is disabled.
+     * Can be a static boolean or a callback function (useful to bind to form validity).
+     */
+    disabled?: boolean | (() => boolean);
+    /** Styled color severity for the button matching tk-button inputs */
+    severity?: 'primary' | 'secondary' | 'danger';
+    /** Button visual style variant matching tk-button inputs */
+    variant?: 'text' | 'outlined';
+    /** Optional icon to display on the button */
+    icon?: string;
+}
+/**
+ * Interface representing data for each step configuration.
+ */
+interface StepData {
+    /** Optional identifier for the step */
+    id?: string;
+    /** Header label for the step */
+    label: string;
+    /** Whether the step header is disabled */
+    disabled?: boolean;
+    /** Whether the step has been completed successfully */
+    completed?: boolean;
+    /** The TemplateRef containing the step content form or markup */
+    content: TemplateRef<unknown>;
+    /** Optional list of primary actions (displayed right/bottom) */
+    actionsPrimary?: StepAction[];
+    /** Optional list of secondary actions (displayed left/bottom) */
+    actionsSecondary?: StepAction[];
+}
+
+/**
+ * @component StepperComponent
+ * @description
+ * Reusable stepper component that acts as a wrapper around PrimeNG's Stepper.
+ * Supports horizontal and vertical orientations, linear step completion rules,
+ * and automated footer action buttons.
+ *
+ * @usage
+ * ```html
+ * <tk-stepper
+ *   [steps]="steps"
+ *   [(activeStep)]="currentStep"
+ *   [linear]="true"
+ *   orientation="horizontal">
+ * </tk-stepper>
+ * ```
+ */
+declare class StepperComponent {
+    /**
+     * @property {InputSignal<StepData[]>} steps
+     * @description Array of step configurations to display.
+     */
+    steps: _angular_core.InputSignal<StepData[]>;
+    /**
+     * @property {ModelSignal<number>} activeStep
+     * @description The 0-based index of the currently active step. Supports two-way binding.
+     * @default 0
+     */
+    activeStep: _angular_core.ModelSignal<number>;
+    /**
+     * @property {InputSignal<boolean>} linear
+     * @description If true, blocks navigation to steps ahead of the active step.
+     * @default true
+     */
+    linear: _angular_core.InputSignal<boolean>;
+    /**
+     * @property {InputSignal<'horizontal' | 'vertical'>} orientation
+     * @description Defines the layout orientation of the stepper.
+     * @default 'horizontal'
+     */
+    orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    /**
+     * @property {InputSignal<boolean>} showFooter
+     * @description Whether to render the default footer action buttons for each step.
+     * @default true
+     */
+    showFooter: _angular_core.InputSignal<boolean>;
+    /**
+     * @event stepChange
+     * @description Emitted when the active step changes.
+     */
+    stepChange: _angular_core.OutputEmitterRef<{
+        index: number;
+        step: StepData;
+    }>;
+    /**
+     * Checks if a step header should be disabled.
+     * Steps ahead of the active index are disabled in linear mode.
+     */
+    isStepDisabled(index: number): boolean;
+    /**
+     * Helper to evaluate button disabled states dynamically.
+     */
+    evalDisabled(disabled: boolean | (() => boolean) | undefined): boolean;
+    /**
+     * Handles step transition events.
+     */
+    onStepChange(index: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StepperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StepperComponent, "tk-stepper", never, { "steps": { "alias": "steps"; "required": false; "isSignal": true; }; "activeStep": { "alias": "activeStep"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; }, { "activeStep": "activeStepChange"; "stepChange": "stepChange"; }, never, never, true, never>;
+}
+
+export { StepperComponent };
+export type { StepAction, StepData };

package/types/tekus-design-system-components-table.d.ts

@@ -4,7 +4,7 @@ import { TagSeverity } from '@tekus/design-system/components/tag';
 import { SortEvent } from 'primeng/api';
 import { TkAction } from '@tekus/design-system/components/action-group';
 
-type TableColumnType = 'text' | 'tag' | 'actions' | 'selection' | 'checkbox' | 'action-group';
+type TableColumnType = 'text' | 'tag' | 'actions' | 'selection' | 'checkbox' | 'action-group' | 'connection-status';
 interface TableColumn<T = unknown> {
     field?: string;
     header: string;
@@ -13,6 +13,8 @@ interface TableColumn<T = unknown> {
     type?: TableColumnType;
     width?: string;
     tagSeverity?: (row: T) => TagSeverity;
+    connectionStatusSeverity?: (row: T) => 'success' | 'warn' | 'danger' | 'gray';
+    connectionStatusTooltipText?: (row: T) => string;
     actions?: Array<{
         icon: string;
         action?: (row: T) => void;

package/types/tekus-design-system-components-time-ago.d.ts

@@ -0,0 +1,53 @@
+import * as _angular_core from '@angular/core';
+import { OnInit } from '@angular/core';
+
+type TimeAgoSeverity = 'success' | 'warn' | 'danger' | 'gray';
+declare class TimeAgoComponent implements OnInit {
+    /**
+     * The date to calculate the relative time from.
+     * Can be a Date object, an ISO string, a timestamp number,
+     * or a custom string format like 'dd/MM/yyyy HH:mm:ss' / 'dd/MM/yyyy HH:mm'.
+     */
+    dateTime: _angular_core.InputSignal<string | number | Date | null | undefined>;
+    /**
+     * The severity of the state, determining its dot and label colors.
+     * Options: 'success' | 'warn' | 'danger' | 'gray'
+     * @default 'success'
+     */
+    severity: _angular_core.InputSignal<TimeAgoSeverity>;
+    /**
+     * Custom tooltip text to display instead of the formatted date.
+     */
+    tooltipText: _angular_core.InputSignal<string | null | undefined>;
+    /**
+     * Format pattern for the fallback tooltip date representation.
+     * @default 'dd/MM/yyyy h:mm a'
+     */
+    tooltipFormat: _angular_core.InputSignal<string>;
+    private readonly destroyRef;
+    private readonly localeId;
+    private readonly datePipe;
+    private readonly nowSignal;
+    readonly parsedDate: _angular_core.Signal<Date | null>;
+    readonly relativeTime: _angular_core.Signal<string>;
+    readonly tooltipContent: _angular_core.Signal<string>;
+    ngOnInit(): void;
+    /**
+     * Checks if a date object represents a valid timestamp.
+     */
+    private isValidDate;
+    /**
+     * Parses legacy custom format 'DD/MM/YYYY HH:mm:ss' or 'DD/MM/YYYY HH:mm'.
+     */
+    private parseCustomFormat;
+    /**
+     * Robust date parser supporting Date, timestamp number, ISO strings,
+     * and custom DD/MM/YYYY formatting commonly used in the platform.
+     */
+    private parseDate;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimeAgoComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimeAgoComponent, "tk-time-ago", never, { "dateTime": { "alias": "dateTime"; "required": false; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "tooltipText": { "alias": "tooltipText"; "required": false; "isSignal": true; }; "tooltipFormat": { "alias": "tooltipFormat"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { TimeAgoComponent };
+export type { TimeAgoSeverity };