@tekus/design-system 5.25.1 → 5.26.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tekus/design-system",
   "description": "Tekus design system library",
-  "version": "5.25.1",
+  "version": "5.26.0",
   "license": "UNLICENSED",
   "peerDependencies": {
     "@angular/core": "^21.0.0",
@@ -52,6 +52,14 @@
       "types": "./types/tekus-design-system-components-button.d.ts",
       "default": "./fesm2022/tekus-design-system-components-button.mjs"
     },
+    "./components/card": {
+      "types": "./types/tekus-design-system-components-card.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-card.mjs"
+    },
+    "./components/card-list": {
+      "types": "./types/tekus-design-system-components-card-list.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-card-list.mjs"
+    },
     "./components/checkbox": {
       "types": "./types/tekus-design-system-components-checkbox.d.ts",
       "default": "./fesm2022/tekus-design-system-components-checkbox.mjs"
@@ -96,6 +104,10 @@
       "types": "./types/tekus-design-system-components-panel.d.ts",
       "default": "./fesm2022/tekus-design-system-components-panel.mjs"
     },
+    "./components/progress-bar": {
+      "types": "./types/tekus-design-system-components-progress-bar.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-progress-bar.mjs"
+    },
     "./components/radio-button": {
       "types": "./types/tekus-design-system-components-radio-button.d.ts",
       "default": "./fesm2022/tekus-design-system-components-radio-button.mjs"
@@ -104,6 +116,10 @@
       "types": "./types/tekus-design-system-components-select.d.ts",
       "default": "./fesm2022/tekus-design-system-components-select.mjs"
     },
+    "./components/status-bar": {
+      "types": "./types/tekus-design-system-components-status-bar.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-status-bar.mjs"
+    },
     "./components/table": {
       "types": "./types/tekus-design-system-components-table.d.ts",
       "default": "./fesm2022/tekus-design-system-components-table.mjs"
@@ -120,6 +136,10 @@
       "types": "./types/tekus-design-system-components-textarea.d.ts",
       "default": "./fesm2022/tekus-design-system-components-textarea.mjs"
     },
+    "./components/toast": {
+      "types": "./types/tekus-design-system-components-toast.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-toast.mjs"
+    },
     "./components/toolbar": {
       "types": "./types/tekus-design-system-components-toolbar.d.ts",
       "default": "./fesm2022/tekus-design-system-components-toolbar.mjs"

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

@@ -115,6 +115,17 @@ declare class ButtonComponent {
      * @default `undefined`
      */
     tooltipText: _angular_core.InputSignal<string | undefined>;
+    /**
+     * @property {'small' | 'large' | undefined} size
+     * @description
+     * Defines the size of the button.
+     * - `'small'`: Small button.
+     * - `'large'`: Large button.
+     * - `undefined`: Default size.
+     *
+     * @default `undefined`
+     */
+    size: _angular_core.InputSignal<"small" | "large" | undefined>;
     /**
      * @method onButtonClick
      * @description
@@ -123,7 +134,7 @@ declare class ButtonComponent {
      */
     onButtonClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "tk-button", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tooltipText": { "alias": "tooltipText"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "tk-button", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tooltipText": { "alias": "tooltipText"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, never, true, never>;
 }
 
 export { ButtonComponent };

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

@@ -0,0 +1,63 @@
+import * as _angular_core from '@angular/core';
+import { TkCardAction, TkCardInfoElement } from '@tekus/design-system/components/card';
+
+/**
+ * Interface representing an item in the CardList.
+ * Contains all necessary properties to render a TkCard.
+ */
+interface TkCardListItem {
+    /** Unique identifier for the item (required for selection) */
+    id: string;
+    /** Primary title of the card */
+    title: string;
+    /** Optional icon to display next to the title */
+    titleIcon?: string;
+    /** Optional secondary description */
+    description?: string;
+    /** Optional image URL or source */
+    image?: string;
+    /** Optional ID or primary badge text displayed in the header */
+    badgeText?: string;
+    /** Optional secondary metadata text displayed next to the badge */
+    secondaryBadgeText?: string;
+    /** List of actions associated with the card */
+    actions?: TkCardAction[];
+    /** Dynamic list of informational elements (tags, progress bars, etc.) */
+    infoElements?: TkCardInfoElement[];
+    /** Whether this specific item can be selected. If not provided, list's selectable defaults apply. */
+    selectable?: boolean;
+}
+
+/**
+ * @component CardListComponent
+ * @description
+ * High-level component used to display a grid of cards with responsive behavioral breakpoints.
+ * Supports individual item selection and consistent spacing.
+ */
+declare class CardListComponent {
+    /** The list of items to display in the grid. Required. */
+    items: _angular_core.InputSignal<TkCardListItem[]>;
+    /** Whether the list supports global item selection (checkboxes). */
+    selectable: _angular_core.InputSignal<boolean>;
+    /** Two-way signal for the current selection of item IDs. */
+    selectedIds: _angular_core.ModelSignal<string[]>;
+    /**
+     * Helper method to determine if an individual item is currently selected.
+     */
+    isItemSelected(id: string): boolean;
+    /**
+     * Helper method to determine if a card should be marked as selected in the template.
+     * Only returns true if the item is explicitly selectable and its ID is in the selected list.
+     */
+    isCardSelected(item: TkCardListItem): boolean;
+    /**
+     * Handler for individual card selection change events.
+     * Updates the global selectedIds model accordingly.
+     */
+    onItemSelected(id: string, selected: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardListComponent, "tk-card-list", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selectedIds": { "alias": "selectedIds"; "required": false; "isSignal": true; }; }, { "selectedIds": "selectedIdsChange"; }, never, never, true, never>;
+}
+
+export { CardListComponent };
+export type { TkCardListItem };

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

@@ -0,0 +1,95 @@
+import * as _angular_core from '@angular/core';
+import { MenuItem } from 'primeng/api';
+
+interface TkCardAction {
+    id: string;
+    label: string;
+    icon?: string;
+    handler: () => void;
+    severity?: 'primary' | 'secondary' | 'danger' | 'success' | 'warn' | 'info';
+    disabled?: boolean;
+}
+type TkCardInfoElementType = 'string' | 'chip' | 'tag' | 'button' | 'icon' | 'progress-bar' | 'status-bar';
+interface TkCardInfoElement {
+    type: TkCardInfoElementType;
+    label?: string;
+    barLabel?: string;
+    icon?: string;
+    value?: number;
+    severity?: 'primary' | 'secondary' | 'danger' | 'success' | 'warn' | 'info';
+    handler?: () => void;
+}
+type TkCardLayout = 'vertical' | 'horizontal';
+
+/**
+ * @component CardComponent
+ * @description
+ * Flexible card component used to display grouped content with multiple layout options.
+ * Supports vertical and horizontal orientations, optional images, headers with selection,
+ * and dynamic action buttons (with overflow menu support).
+ *
+ * It utilizes Angular 21 Signals for efficient state management and reactivity.
+ *
+ * @usage
+ * ```html
+ * <tk-card
+ *   title="My Document"
+ *   description="Upload in progress..."
+ *   layout="horizontal"
+ *   [actions]="myActions"
+ *   [infoElements]="[{ type: 'progress-bar', value: 75 }]">
+ * </tk-card>
+ * ```
+ */
+declare class CardComponent {
+    /** The primary title of the card. Required. */
+    title: _angular_core.InputSignal<string>;
+    /** Optional icon to display next to the title. */
+    titleIcon: _angular_core.InputSignal<string | undefined>;
+    /** Optional secondary description. */
+    description: _angular_core.InputSignal<string | undefined>;
+    /** Optional image URL or source. */
+    image: _angular_core.InputSignal<string | undefined>;
+    /** Whether to show the image section. If true and no URL is provided, a placeholder is shown. */
+    showImage: _angular_core.InputSignal<boolean>;
+    /** Layout orientation: 'vertical' (default) or 'horizontal'. */
+    layout: _angular_core.InputSignal<TkCardLayout>;
+    /** Whether the card shows a checkbox for selection. */
+    selectable: _angular_core.InputSignal<boolean>;
+    /** Two-way signal for the selection state. */
+    selected: _angular_core.ModelSignal<boolean>;
+    /** Optional ID or primary badge text displayed in the header. */
+    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>;
+    /** List of actions associated with the card. */
+    actions: _angular_core.InputSignal<TkCardAction[]>;
+    /** Dynamic list of informational elements (tags, progress bars, etc.). */
+    infoElements: _angular_core.InputSignal<TkCardInfoElement[]>;
+    /**
+     * Computed logic for handling actions.
+     * If there are > 3 actions, they are all moved to an overflow menu.
+     * Otherwise, they are displayed as individual buttons.
+     */
+    hasOverflowActions: _angular_core.Signal<boolean>;
+    /** Actions to be displayed directly as buttons. */
+    visibleActions: _angular_core.Signal<TkCardAction[]>;
+    /**
+     * Actions to be displayed in the overflow menu.
+     * Maps TkCardAction to PrimeNG MenuItem format.
+     */
+    menuItems: _angular_core.Signal<MenuItem[]>;
+    /**
+     * Maps card severity to button severity.
+     */
+    getButtonSeverity(severity?: string): 'primary' | 'secondary' | 'danger';
+    /**
+     * Maps card severity to status bar severity.
+     */
+    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; }; "infoElements": { "alias": "infoElements"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, never, never, true, never>;
+}
+
+export { CardComponent };
+export type { TkCardAction, TkCardInfoElement, TkCardInfoElementType, TkCardLayout };

package/types/tekus-design-system-components-progress-bar.d.ts

@@ -0,0 +1,43 @@
+import * as _angular_core from '@angular/core';
+
+type ProgressBarSize = 'small' | 'medium' | 'large';
+/**
+ * @component ProgressBarComponent
+ * @description
+ * A component used to display the progress of a task.
+ * It wraps PrimeNG's `p-progressbar` component with custom styling and behavior.
+ *
+ * This component supports:
+ * - `value`: The progress value (0-100)
+ * - `showValue`: Whether to display the value text (only for medium/large)
+ * - `size`: The size of the progress bar ('small', 'medium', 'large')
+ *
+ * @usage
+ * ### Basic Usage
+ * ```html
+ * <tk-progress-bar [value]="50" size="medium"></tk-progress-bar>
+ * ```
+ */
+declare class ProgressBarComponent {
+    /** The progress value (0-100). */
+    value: _angular_core.InputSignal<number>;
+    /**
+     * Whether to display the progress value percentage.
+     * Only applicable for 'medium' or 'large' sizes.
+     * @default true
+     */
+    showValue: _angular_core.InputSignal<boolean>;
+    /**
+     * The size of the progress bar.
+     * - 'small': Thin bar, no percentage text.
+     * - 'medium': Regular bar, percentage text on left.
+     * - 'large': Thick bar, percentage text on left.
+     * @default 'medium'
+     */
+    size: _angular_core.InputSignal<ProgressBarSize>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressBarComponent, "tk-progress-bar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { ProgressBarComponent };
+export type { ProgressBarSize };

package/types/tekus-design-system-components-status-bar.d.ts

@@ -0,0 +1,42 @@
+import * as _angular_core from '@angular/core';
+
+type StatusBarSeverity = 'primary' | 'secondary' | 'success' | 'error';
+type StatusBarSize = 'medium' | 'large';
+/**
+ * @component StatusBarComponent
+ * @description
+ * A component used to display a static status bar with a label.
+ *
+ * This component supports:
+ * - `label`: The message to display on the left.
+ * - `severity`: The color scheme of the status bar ('primary' | 'secondary' | 'success' | 'error').
+ * - `size`: The size of the status bar ('medium' | 'large').
+ *
+ * @usage
+ * ```html
+ * <tk-status-bar label="1/99" severity="success" size="medium"></tk-status-bar>
+ * ```
+ */
+declare class StatusBarComponent {
+    /** The message to display on the left. */
+    label: _angular_core.InputSignal<string>;
+    /**
+     * The severity level of the status bar, which determines its color.
+     * @default 'primary'
+     */
+    severity: _angular_core.InputSignal<StatusBarSeverity>;
+    /**
+     * The size of the status bar.
+     * - 'medium': Height 18px.
+     * - 'large': Height 32px.
+     * @default 'medium'
+     */
+    size: _angular_core.InputSignal<StatusBarSize>;
+    /** The message to display in the center of the visual bar. */
+    barLabel: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatusBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatusBarComponent, "tk-status-bar", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "barLabel": { "alias": "barLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { StatusBarComponent };
+export type { StatusBarSeverity, StatusBarSize };

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

@@ -0,0 +1,27 @@
+import * as i0 from '@angular/core';
+
+interface TkToastAction {
+    label: string;
+    handler: () => void;
+}
+/**
+ * @component ToastComponent
+ * @description
+ * Custom wrapper around PrimeNG's Toast component to adhere to our Design System.
+ * Supports \`info\`, \`success\`, and \`error\` severities.
+ * Includes support for a custom action button on the left for \`info\` severity.
+ *
+ * To use this, add \`<tk-toast></tk-toast>\` in the root of your application, and then
+ * inject \`MessageService\` from \`primeng/api\` to trigger notifications.
+ */
+declare class ToastComponent {
+    /**
+     * Helper function to get the appropriate icon for a given severity.
+     */
+    getIconForSeverity(severity: string | undefined): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToastComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToastComponent, "tk-toast", never, {}, {}, never, never, true, never>;
+}
+
+export { ToastComponent };
+export type { TkToastAction };