@tekus/design-system 5.18.0 → 5.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/assets/tokens/tk-foundations.json +3 -3
  2. package/components/checkbox/src/checkbox.component.d.ts +9 -2
  3. package/components/drawer/index.d.ts +5 -0
  4. package/components/drawer/public-api.d.ts +3 -0
  5. package/components/drawer/src/drawer.component.d.ts +78 -0
  6. package/components/drawer/src/drawer.types.d.ts +19 -0
  7. package/components/drawer/src/services/drawer.service.d.ts +15 -0
  8. package/components/icon/core/icons/arrows-rotate.d.ts +2 -0
  9. package/components/icon/core/icons/edit.d.ts +2 -0
  10. package/components/icon/core/icons/globe-pointer.d.ts +2 -0
  11. package/components/icon/core/icons/grip-vertical.d.ts +2 -0
  12. package/components/multiselect/src/multiselect.component.d.ts +115 -19
  13. package/components/panel/index.d.ts +5 -0
  14. package/components/panel/public-api.d.ts +1 -0
  15. package/components/panel/src/panel.component.d.ts +82 -0
  16. package/components/table/src/table.component.d.ts +45 -1
  17. package/components/table/src/table.interface.d.ts +1 -1
  18. package/fesm2022/tekus-design-system-components-checkbox.mjs +32 -14
  19. package/fesm2022/tekus-design-system-components-checkbox.mjs.map +1 -1
  20. package/fesm2022/tekus-design-system-components-drawer.mjs +172 -0
  21. package/fesm2022/tekus-design-system-components-drawer.mjs.map +1 -0
  22. package/fesm2022/tekus-design-system-components-icon.mjs +56 -0
  23. package/fesm2022/tekus-design-system-components-icon.mjs.map +1 -1
  24. package/fesm2022/tekus-design-system-components-multiselect.mjs +164 -45
  25. package/fesm2022/tekus-design-system-components-multiselect.mjs.map +1 -1
  26. package/fesm2022/tekus-design-system-components-panel.mjs +102 -0
  27. package/fesm2022/tekus-design-system-components-panel.mjs.map +1 -0
  28. package/fesm2022/tekus-design-system-components-select.mjs +3 -8
  29. package/fesm2022/tekus-design-system-components-select.mjs.map +1 -1
  30. package/fesm2022/tekus-design-system-components-table.mjs +72 -5
  31. package/fesm2022/tekus-design-system-components-table.mjs.map +1 -1
  32. package/fesm2022/tekus-design-system-components-toolbar.mjs +2 -2
  33. package/fesm2022/tekus-design-system-components-toolbar.mjs.map +1 -1
  34. package/fesm2022/tekus-design-system-core-types.mjs +31 -1
  35. package/fesm2022/tekus-design-system-core-types.mjs.map +1 -1
  36. package/fesm2022/tekus-design-system-core.mjs +31 -1
  37. package/fesm2022/tekus-design-system-core.mjs.map +1 -1
  38. package/package.json +13 -5
  39. package/styles/variables.css +3 -3
@@ -527,7 +527,7 @@
527
527
  }
528
528
  },
529
529
  "paddingX": {
530
- "nome": {
530
+ "none": {
531
531
  "value": "{tk-spacing.base.0}",
532
532
  "type": "number"
533
533
  },
@@ -553,7 +553,7 @@
553
553
  }
554
554
  },
555
555
  "paddingY": {
556
- "nome": {
556
+ "none": {
557
557
  "value": "{tk-spacing.base.0}",
558
558
  "type": "number"
559
559
  },
@@ -579,7 +579,7 @@
579
579
  }
580
580
  },
581
581
  "gap": {
582
- "nome": {
582
+ "none": {
583
583
  "value": "{tk-spacing.base.0}",
584
584
  "type": "number"
585
585
  },
@@ -55,12 +55,19 @@ export declare class CheckboxComponent implements ControlValueAccessor, OnInit,
55
55
  * Message to display when the control is invalid and touched.
56
56
  */
57
57
  errorMessage: import("@angular/core").InputSignal<string>;
58
+ /**
59
+ * @property {ModelSignal<boolean>} indeterminate
60
+ * @description
61
+ * Indeterminate state of the checkbox (reactive).
62
+ * Useful for parent checkboxes in lists with partial selection.
63
+ */
64
+ indeterminate: import("@angular/core").ModelSignal<boolean>;
58
65
  /**
59
66
  * @property {boolean} disabled
60
67
  * @description
61
68
  * Whether the checkbox is disabled.
62
69
  */
63
- disabled: import("@angular/core").WritableSignal<boolean>;
70
+ disabled: import("@angular/core").ModelSignal<boolean>;
64
71
  get effectiveControl(): FormControl;
65
72
  onChange: (value: unknown) => void;
66
73
  onTouched: () => void;
@@ -74,5 +81,5 @@ export declare class CheckboxComponent implements ControlValueAccessor, OnInit,
74
81
  onModelChange(value: unknown): void;
75
82
  onBlur(): void;
76
83
  static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
77
- static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "tk-checkbox", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "binary": { "alias": "binary"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; }, never, never, true, never>;
84
+ static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "tk-checkbox", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "binary": { "alias": "binary"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "indeterminate": "indeterminateChange"; "disabled": "disabledChange"; }, never, never, true, never>;
78
85
  }
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Generated bundle index. Do not edit.
3
+ */
4
+ /// <amd-module name="@tekus/design-system/components/drawer" />
5
+ export * from './public-api';
@@ -0,0 +1,3 @@
1
+ export * from './src/drawer.component';
2
+ export * from './src/services/drawer.service';
3
+ export * from './src/drawer.types';
@@ -0,0 +1,78 @@
1
+ import { EventEmitter, Type, ElementRef } from '@angular/core';
2
+ import { DrawerHeaderAction, DrawerSizeType } from './drawer.types';
3
+ import * as i0 from "@angular/core";
4
+ /**
5
+ * @component DrawerComponent
6
+ * @description
7
+ * A programmatically controlled drawer overlay used for displaying dynamic content,
8
+ * titles, and header actions. The drawer is opened through a service with a configuration object,
9
+ * similar to tk-modal.
10
+ *
11
+ * This component supports:
12
+ * - Required title with ellipsis for long text.
13
+ * - Optional header action button + close button.
14
+ * - Content as string or component.
15
+ * - Position: always right.
16
+ * - Sizes: small (500px), large (1024px).
17
+ * - Closable and dismissible mask behavior.
18
+ *
19
+ * @usage
20
+ * ### Open a drawer from TypeScript using the drawer service
21
+ * ```ts
22
+ * this.drawerService.open({
23
+ * title: 'Drawer name',
24
+ * content: 'Content text drawer example',
25
+ * headerAction: {
26
+ * label: 'Action',
27
+ * severity: 'primary',
28
+ * action: () => console.log('Action clicked'),
29
+ * returnValue: true,
30
+ * },
31
+ * size: 'small',
32
+ * }).subscribe((result) => {
33
+ * console.log('Drawer closed with value:', result);
34
+ * });
35
+ * ```
36
+ */
37
+ export declare class DrawerComponent {
38
+ private readonly elementRef;
39
+ constructor(elementRef: ElementRef);
40
+ /** The required title displayed at the top left of the drawer header */
41
+ title: import("@angular/core").InputSignal<string>;
42
+ /** The main content of the drawer */
43
+ content: import("@angular/core").InputSignal<string | Type<unknown> | null>;
44
+ /** Optional header action button (displayed before close button) */
45
+ headerAction: import("@angular/core").InputSignal<DrawerHeaderAction | null>;
46
+ /** Drawer size: 'small' (500px), 'large' (1024px) */
47
+ size: import("@angular/core").InputSignal<DrawerSizeType>;
48
+ /** Whether the drawer can be closed by the user via close button */
49
+ closable: import("@angular/core").InputSignal<boolean>;
50
+ /** Whether clicking the mask closes the drawer */
51
+ dismissible: import("@angular/core").InputSignal<boolean>;
52
+ isContentString: import("@angular/core").Signal<boolean>;
53
+ hasHeaderAction: import("@angular/core").Signal<boolean>;
54
+ /** Computed: drawer width (responsive) and max-width based on `size`. Always right position. */
55
+ drawerStyle: import("@angular/core").Signal<{
56
+ width: string;
57
+ maxWidth: string;
58
+ }>;
59
+ /** Visibility flag. Use model for two-way binding when using drawer in template. */
60
+ isOpened: import("@angular/core").ModelSignal<boolean>;
61
+ /** Emits when the drawer closes, passing the return value from header action or null */
62
+ readonly onClose: EventEmitter<unknown>;
63
+ private alreadyEmitted;
64
+ private returnValueOnClose;
65
+ /** Opens the drawer */
66
+ open(): void;
67
+ /** Closes the drawer and emits onClose */
68
+ handleClose(): void;
69
+ /** Closes the drawer without emitting an event */
70
+ close(): void;
71
+ /**
72
+ * Handles header action button click.
73
+ * Executes the action callback, emits onClose with the provided returnValue, then closes the drawer.
74
+ */
75
+ handleHeaderAction(action: (() => void) | undefined, returnValue: unknown): void;
76
+ static ɵfac: i0.ɵɵFactoryDeclaration<DrawerComponent, never>;
77
+ static ɵcmp: i0.ɵɵComponentDeclaration<DrawerComponent, "tk-drawer", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "headerAction": { "alias": "headerAction"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "isOpened": { "alias": "isOpened"; "required": false; "isSignal": true; }; }, { "isOpened": "isOpenedChange"; }, never, never, true, never>;
78
+ }
@@ -0,0 +1,19 @@
1
+ import { Type } from '@angular/core';
2
+ import { Variant } from '@tekus/design-system/components/button';
3
+ import { SeverityType } from '@tekus/design-system/components/modal';
4
+ export type DrawerSizeType = 'small' | 'large';
5
+ export interface DrawerHeaderAction {
6
+ label: string;
7
+ severity: SeverityType;
8
+ action?: () => void;
9
+ returnValue?: unknown;
10
+ variant?: Variant;
11
+ }
12
+ export interface DrawerConfig {
13
+ title: string;
14
+ content?: string | Type<unknown>;
15
+ headerAction?: DrawerHeaderAction;
16
+ size?: DrawerSizeType;
17
+ closable?: boolean;
18
+ dismissible?: boolean;
19
+ }
@@ -0,0 +1,15 @@
1
+ import { ApplicationRef, ComponentRef } from '@angular/core';
2
+ import { DrawerComponent } from '../drawer.component';
3
+ import { Observable } from 'rxjs';
4
+ import { DrawerConfig } from '../drawer.types';
5
+ import * as i0 from "@angular/core";
6
+ export declare class DrawerService {
7
+ private readonly appRef;
8
+ private drawerRef;
9
+ constructor(appRef: ApplicationRef);
10
+ get _drawerRefForTesting(): ComponentRef<DrawerComponent> | null;
11
+ set _drawerRefForTesting(ref: ComponentRef<DrawerComponent> | null);
12
+ open(config: DrawerConfig): Observable<unknown>;
13
+ static ɵfac: i0.ɵɵFactoryDeclaration<DrawerService, never>;
14
+ static ɵprov: i0.ɵɵInjectableDeclaration<DrawerService>;
15
+ }
@@ -0,0 +1,2 @@
1
+ import { IconRegister } from "../icon-catalog";
2
+ export declare const arrowsRotateIcon: IconRegister;
@@ -0,0 +1,2 @@
1
+ import { IconRegister } from '../icon-catalog';
2
+ export declare const editIcon: IconRegister;
@@ -0,0 +1,2 @@
1
+ import { IconRegister } from '../icon-catalog';
2
+ export declare const globePointerIcon: IconRegister;
@@ -0,0 +1,2 @@
1
+ import { IconRegister } from '../icon-catalog';
2
+ export declare const gridVerticalIcon: IconRegister;
@@ -1,21 +1,27 @@
1
- import { EventEmitter } from '@angular/core';
2
- import { FormControl } from '@angular/forms';
1
+ import { ControlValueAccessor, FormControl, NgControl } from '@angular/forms';
3
2
  import { MultiSelectOption } from './multiselect.types';
4
3
  import * as i0 from "@angular/core";
5
- export declare class MultiselectComponent {
4
+ export declare class MultiselectComponent implements ControlValueAccessor {
5
+ readonly ngControl: NgControl | null;
6
+ constructor();
6
7
  /**
7
- * @property {FormControl<MultiSelectOption[] | null>} control
8
+ * @property {Signal<MultiSelectOption[]>} selectionPool
8
9
  * @description
9
- * External FormControl used to read/set the selected options.
10
- * If not provided, an internal FormControl is created with an empty array value.
10
+ * Internal signal to keep track of selected items even if they are filtered out from the main options list.
11
11
  */
12
- control: FormControl<MultiSelectOption[] | null>;
12
+ private readonly selectionPool;
13
+ /**
14
+ * @property {ModelSignal<MultiSelectOption[] | null>} model
15
+ * @description
16
+ * The model signal for two-way binding.
17
+ */
18
+ readonly model: import("@angular/core").ModelSignal<MultiSelectOption[] | null>;
13
19
  /**
14
20
  * @property {MultiSelectOption[]} options
15
21
  * @description
16
22
  * Array of available options shown in the multiselect dropdown.
17
23
  */
18
- options: MultiSelectOption[];
24
+ options: import("@angular/core").InputSignal<MultiSelectOption[]>;
19
25
  /**
20
26
  * @property {string} labelText
21
27
  * @description
@@ -23,7 +29,7 @@ export declare class MultiselectComponent {
23
29
  *
24
30
  * @default 'Select'
25
31
  */
26
- labelText: string;
32
+ labelText: import("@angular/core").InputSignal<string>;
27
33
  /**
28
34
  * @property {string} display
29
35
  * @description
@@ -31,7 +37,7 @@ export declare class MultiselectComponent {
31
37
  *
32
38
  * @default 'chip'
33
39
  */
34
- display: string;
40
+ display: import("@angular/core").InputSignal<string>;
35
41
  /**
36
42
  * @property {number} maxSelectedLabels
37
43
  * @description
@@ -39,7 +45,7 @@ export declare class MultiselectComponent {
39
45
  *
40
46
  * @default 4
41
47
  */
42
- maxSelectedLabels: number;
48
+ maxSelectedLabels: import("@angular/core").InputSignal<number>;
43
49
  /**
44
50
  * @property {string} selectedItemsLabel
45
51
  * @description
@@ -47,7 +53,7 @@ export declare class MultiselectComponent {
47
53
  *
48
54
  * @default '{0} elementos seleccionados'
49
55
  */
50
- selectedItemsLabel: string;
56
+ selectedItemsLabel: import("@angular/core").InputSignal<string>;
51
57
  /**
52
58
  * @property {string} emptyFilterMessage
53
59
  * @description
@@ -55,7 +61,7 @@ export declare class MultiselectComponent {
55
61
  *
56
62
  * @default 'No hay resultados'
57
63
  */
58
- emptyFilterMessage: string;
64
+ emptyFilterMessage: import("@angular/core").InputSignal<string>;
59
65
  /**
60
66
  * @property {boolean} filter
61
67
  * @description
@@ -63,13 +69,13 @@ export declare class MultiselectComponent {
63
69
  *
64
70
  * @default true
65
71
  */
66
- filter: boolean;
72
+ filter: import("@angular/core").InputSignal<boolean>;
67
73
  /**
68
74
  * @property {string} filterPlaceHolder
69
75
  * @description
70
76
  * Placeholder text for the filter input.
71
77
  */
72
- filterPlaceHolder: string;
78
+ filterPlaceHolder: import("@angular/core").InputSignal<string>;
73
79
  /**
74
80
  * @property {string} id
75
81
  * @description
@@ -77,13 +83,25 @@ export declare class MultiselectComponent {
77
83
  *
78
84
  * @default 'multiselect'
79
85
  */
80
- id: string;
86
+ id: import("@angular/core").InputSignal<string>;
81
87
  /**
82
88
  * @property {string} styleClass
83
89
  * @description
84
90
  * Additional CSS class applied to the multiselect container.
85
91
  */
86
- styleClass: string;
92
+ styleClass: import("@angular/core").InputSignal<string>;
93
+ /**
94
+ * @property {InputSignal<string>} errorMessage
95
+ * @description
96
+ * Message to display when the control is invalid and touched.
97
+ */
98
+ errorMessage: import("@angular/core").InputSignal<string>;
99
+ /**
100
+ * @property {InputSignal<string>} hint
101
+ * @description
102
+ * Hint text to display below the input.
103
+ */
104
+ hint: import("@angular/core").InputSignal<string>;
87
105
  /**
88
106
  * @event selectionChange
89
107
  * @description
@@ -93,7 +111,42 @@ export declare class MultiselectComponent {
93
111
  * @example
94
112
  * <tk-multiselect (selectionChange)="onChange($event)"></tk-multiselect>
95
113
  */
96
- selectionChange: EventEmitter<MultiSelectOption[] | null>;
114
+ selectionChange: import("@angular/core").OutputEmitterRef<MultiSelectOption[] | null>;
115
+ /**
116
+ * @event filterChange
117
+ * @description
118
+ * Emits the filter text when the user types in the search input.
119
+ */
120
+ readonly filterChange: import("@angular/core").OutputEmitterRef<string>;
121
+ /**
122
+ * @property internalOptions
123
+ * @description
124
+ * Computed signal that merges the current options with the selected items pool
125
+ * to ensure selected items are always visible.
126
+ */
127
+ readonly internalOptions: import("@angular/core").Signal<any[]>;
128
+ /**
129
+ * @method handleFilter
130
+ * @description
131
+ * Handles the filter event from the PrimeNG component and emits the filter value.
132
+ *
133
+ * @param event - The filter event object.
134
+ */
135
+ handleFilter(event: {
136
+ filter: string;
137
+ }): void;
138
+ /**
139
+ * @callback onChange
140
+ * @description
141
+ * Callback function to notify the parent component of value changes.
142
+ */
143
+ onChange: (value: MultiSelectOption[] | null) => void;
144
+ /**
145
+ * @callback onTouched
146
+ * @description
147
+ * Callback function to notify the parent component when the control is touched.
148
+ */
149
+ onTouched: () => void;
97
150
  /**
98
151
  * @method handleChange
99
152
  * @description
@@ -105,6 +158,49 @@ export declare class MultiselectComponent {
105
158
  handleChange(event: {
106
159
  value: MultiSelectOption[] | null;
107
160
  }): void;
161
+ /**
162
+ * @method updateSelectionPool
163
+ * @description
164
+ * Updates the internal selection pool to ensure selected items persist
165
+ * even if they are filtered out from the main options list.
166
+ *
167
+ * @param items - The items to add to the pool.
168
+ */
169
+ private updateSelectionPool;
170
+ /**
171
+ * @method writeValue
172
+ * @description
173
+ * Writes a new value to the element.
174
+ * Part of the ControlValueAccessor interface.
175
+ *
176
+ * @param value - The new value.
177
+ */
178
+ writeValue(value: MultiSelectOption[] | null): void;
179
+ /**
180
+ * @method registerOnChange
181
+ * @description
182
+ * Registers a callback function that is called when the control's value changes in the UI.
183
+ * Part of the ControlValueAccessor interface.
184
+ *
185
+ * @param fn - The callback function.
186
+ */
187
+ registerOnChange(fn: (value: MultiSelectOption[] | null) => void): void;
188
+ /**
189
+ * @method registerOnTouched
190
+ * @description
191
+ * Registers a callback function that is called by the forms API on initialization to update the form control on 'blur'.
192
+ * Part of the ControlValueAccessor interface.
193
+ *
194
+ * @param fn - The callback function.
195
+ */
196
+ registerOnTouched(fn: () => void): void;
197
+ /**
198
+ * @method effectiveControl
199
+ * @description
200
+ * Gets the effective FormControl associated with this component,
201
+ * either from NgControl or the internal model.
202
+ */
203
+ get effectiveControl(): FormControl | null;
108
204
  static ɵfac: i0.ɵɵFactoryDeclaration<MultiselectComponent, never>;
109
- static ɵcmp: i0.ɵɵComponentDeclaration<MultiselectComponent, "tk-multiselect", never, { "control": { "alias": "control"; "required": false; }; "options": { "alias": "options"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "display": { "alias": "display"; "required": false; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; }; "emptyFilterMessage": { "alias": "emptyFilterMessage"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "filterPlaceHolder": { "alias": "filterPlaceHolder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
205
+ static ɵcmp: i0.ɵɵComponentDeclaration<MultiselectComponent, "tk-multiselect", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "labelText": { "alias": "labelText"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; "isSignal": true; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; "isSignal": true; }; "emptyFilterMessage": { "alias": "emptyFilterMessage"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceHolder": { "alias": "filterPlaceHolder"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "selectionChange": "selectionChange"; "filterChange": "filterChange"; }, never, never, true, never>;
110
206
  }
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Generated bundle index. Do not edit.
3
+ */
4
+ /// <amd-module name="@tekus/design-system/components/panel" />
5
+ export * from './public-api';
@@ -0,0 +1 @@
1
+ export * from './src/panel.component';
@@ -0,0 +1,82 @@
1
+ import { EventEmitter } from '@angular/core';
2
+ import * as i0 from "@angular/core";
3
+ /**
4
+ * @component PanelComponent
5
+ * @description
6
+ * Panel is a container component with an optional content toggle feature.
7
+ * It wraps PrimeNG's Panel component and provides a consistent design across the application.
8
+ *
9
+ * The panel can be toggled between expanded and collapsed states using the chevron icon
10
+ * in the header. The component uses custom tk-icon for the toggle icons.
11
+ *
12
+ * @usage
13
+ * ```html
14
+ * <tk-panel
15
+ * header="Panel Title"
16
+ * [toggleable]="true"
17
+ * [collapsed]="false">
18
+ * <p>Panel content goes here</p>
19
+ * </tk-panel>
20
+ * ```
21
+ */
22
+ export declare class PanelComponent {
23
+ /**
24
+ * @property {string} header
25
+ * @description
26
+ * Header text displayed at the top of the panel.
27
+ *
28
+ * @default undefined
29
+ */
30
+ header?: string;
31
+ /**
32
+ * @property {boolean} toggleable
33
+ * @description
34
+ * When enabled, the panel content can be expanded and collapsed.
35
+ *
36
+ * @default false
37
+ */
38
+ toggleable: boolean;
39
+ /**
40
+ * @property {boolean} collapsed
41
+ * @description
42
+ * Defines whether the panel is collapsed or expanded.
43
+ * Supports two-way binding.
44
+ *
45
+ * @default false
46
+ */
47
+ collapsed: boolean;
48
+ /**
49
+ * @event collapsedChange
50
+ * @description
51
+ * Emits when the collapsed state changes.
52
+ * Enables two-way binding with [(collapsed)].
53
+ */
54
+ collapsedChange: EventEmitter<boolean>;
55
+ /**
56
+ * @event toggled
57
+ * @description
58
+ * Callback to invoke when the panel is toggled.
59
+ * Emits an object with the collapsed state.
60
+ *
61
+ * @example
62
+ * ```html
63
+ * <tk-panel (toggled)="handleToggle($event)"></tk-panel>
64
+ * ```
65
+ */
66
+ toggled: EventEmitter<{
67
+ collapsed: boolean;
68
+ }>;
69
+ /**
70
+ * @method handleToggle
71
+ * @description
72
+ * Handles the toggle event from the PrimeNG panel.
73
+ * Updates the collapsed state and emits the appropriate events.
74
+ *
75
+ * @param event - The toggle event from PrimeNG panel
76
+ */
77
+ handleToggle(event: {
78
+ collapsed: boolean | undefined;
79
+ }): void;
80
+ static ɵfac: i0.ɵɵFactoryDeclaration<PanelComponent, never>;
81
+ static ɵcmp: i0.ɵɵComponentDeclaration<PanelComponent, "tk-panel", never, { "header": { "alias": "header"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; }, { "collapsedChange": "collapsedChange"; "toggled": "toggled"; }, never, ["*"], true, never>;
82
+ }
@@ -41,12 +41,56 @@ export declare class TableComponent<T = unknown> {
41
41
  * ]"
42
42
  */
43
43
  columns: import("@angular/core").InputSignal<TableColumn<T>[]>;
44
+ /**
45
+ * @property {InputSignal<'single' | 'multiple' | undefined>} selectionMode
46
+ * @description
47
+ * Selection mode of the table.
48
+ */
49
+ selectionMode: import("@angular/core").InputSignal<"single" | "multiple" | undefined>;
50
+ /**
51
+ * @property {ModelSignal<any[]>} selection
52
+ * @description
53
+ * Selected row(s) in the table.
54
+ */
55
+ selection: import("@angular/core").ModelSignal<T[]>;
56
+ /**
57
+ * @property {InputSignal<string | undefined>} dataKey
58
+ * @description
59
+ * Property name to uniquely identify a row.
60
+ */
61
+ dataKey: import("@angular/core").InputSignal<string | undefined>;
44
62
  initialData: T[];
45
63
  internalData: T[];
46
64
  isSorted: boolean | null;
65
+ /**
66
+ * @computed isAllSelected
67
+ * @description
68
+ * Returns true if all visible rows are selected.
69
+ */
70
+ isAllSelected: import("@angular/core").Signal<boolean>;
71
+ /**
72
+ * @computed isPartiallySelected
73
+ * @description
74
+ * Returns true if some but not all rows are selected.
75
+ */
76
+ isPartiallySelected: import("@angular/core").Signal<boolean>;
47
77
  constructor();
78
+ /**
79
+ * @method toggleAll
80
+ * @description
81
+ * Toggles selection of all visible rows using full objects.
82
+ * @param checked {unknown}
83
+ */
84
+ toggleAll(checked: unknown): void;
85
+ /**
86
+ * @method updateSelection
87
+ * @description
88
+ * Updates row selection state from checkbox interaction.
89
+ * @param value {any[]}
90
+ */
91
+ updateSelection(value: T[]): void;
48
92
  customSort(event: SortEvent): void;
49
93
  sortTableData(event: SortEvent): void;
50
94
  static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent<any>, never>;
51
- static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent<any>, "tk-table", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
95
+ static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent<any>, "tk-table", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; }, never, never, true, never>;
52
96
  }
@@ -1,5 +1,5 @@
1
1
  import { TagSeverity } from '@tekus/design-system/components/tag';
2
- export type TableColumnType = 'text' | 'tag' | 'actions';
2
+ export type TableColumnType = 'text' | 'tag' | 'actions' | 'selection' | 'checkbox';
3
3
  export interface TableColumn<T = unknown> {
4
4
  field?: string;
5
5
  header: string;