@tekus/design-system 5.41.0 → 5.42.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 (35) hide show
  1. package/fesm2022/tekus-design-system-components-carousel.mjs +17 -3
  2. package/fesm2022/tekus-design-system-components-carousel.mjs.map +1 -1
  3. package/fesm2022/tekus-design-system-components-checkbox.mjs +2 -2
  4. package/fesm2022/tekus-design-system-components-checkbox.mjs.map +1 -1
  5. package/fesm2022/tekus-design-system-components-color-picker.mjs +119 -71
  6. package/fesm2022/tekus-design-system-components-color-picker.mjs.map +1 -1
  7. package/fesm2022/tekus-design-system-components-column-picker.mjs +210 -0
  8. package/fesm2022/tekus-design-system-components-column-picker.mjs.map +1 -0
  9. package/fesm2022/tekus-design-system-components-dropdown.mjs +1 -1
  10. package/fesm2022/tekus-design-system-components-dropdown.mjs.map +1 -1
  11. package/fesm2022/tekus-design-system-components-icon.mjs +10 -0
  12. package/fesm2022/tekus-design-system-components-icon.mjs.map +1 -1
  13. package/fesm2022/tekus-design-system-components-link-group.mjs +74 -0
  14. package/fesm2022/tekus-design-system-components-link-group.mjs.map +1 -0
  15. package/fesm2022/tekus-design-system-components-panel.mjs +1 -1
  16. package/fesm2022/tekus-design-system-components-panel.mjs.map +1 -1
  17. package/fesm2022/tekus-design-system-components-skeleton.mjs +79 -0
  18. package/fesm2022/tekus-design-system-components-skeleton.mjs.map +1 -0
  19. package/fesm2022/tekus-design-system-components-table.mjs +234 -11
  20. package/fesm2022/tekus-design-system-components-table.mjs.map +1 -1
  21. package/fesm2022/tekus-design-system-components-tabs.mjs +1 -1
  22. package/fesm2022/tekus-design-system-components-tabs.mjs.map +1 -1
  23. package/fesm2022/tekus-design-system-components-toolbar.mjs +33 -3
  24. package/fesm2022/tekus-design-system-components-toolbar.mjs.map +1 -1
  25. package/fesm2022/tekus-design-system-components-tooltip.mjs +16 -3
  26. package/fesm2022/tekus-design-system-components-tooltip.mjs.map +1 -1
  27. package/package.json +13 -1
  28. package/types/tekus-design-system-components-carousel.d.ts +8 -1
  29. package/types/tekus-design-system-components-color-picker.d.ts +41 -7
  30. package/types/tekus-design-system-components-column-picker.d.ts +116 -0
  31. package/types/tekus-design-system-components-link-group.d.ts +119 -0
  32. package/types/tekus-design-system-components-skeleton.d.ts +68 -0
  33. package/types/tekus-design-system-components-table.d.ts +186 -10
  34. package/types/tekus-design-system-components-toolbar.d.ts +37 -2
  35. package/types/tekus-design-system-components-tooltip.d.ts +12 -1
@@ -1,3 +1,5 @@
1
+ import * as _tekus_design_system_components_column_picker from '@tekus/design-system/components/column-picker';
2
+ import { TkColumnPickerColumn } from '@tekus/design-system/components/column-picker';
1
3
  import * as _angular_core from '@angular/core';
2
4
  import { MenuItem } from 'primeng/api';
3
5
  import { Popover } from 'primeng/popover';
@@ -13,6 +15,11 @@ interface TkToolbarFilterConfig {
13
15
  label: string;
14
16
  options: MultiSelectOption[];
15
17
  }
18
+ /**
19
+ * Configuration for a column listed in the toolbar's column picker.
20
+ * Same shape as `TkColumnPickerColumn`: `key` must match the `tk-table` column `field`.
21
+ */
22
+ type TkToolbarColumnConfig = TkColumnPickerColumn;
16
23
  /**
17
24
  * Definition for toolbar selection or mass actions.
18
25
  */
@@ -103,6 +110,29 @@ declare class ToolbarComponent {
103
110
  viewCardsTooltip: _angular_core.InputSignal<string>;
104
111
  /** Tooltip text for view table layout button (e.g. 'Vista tabla') */
105
112
  viewTableTooltip: _angular_core.InputSignal<string>;
113
+ /**
114
+ * Optional. Columns listed in the embedded `tk-column-picker`.
115
+ * The picker button is only shown when this list is not empty.
116
+ * @default []
117
+ */
118
+ readonly columns: _angular_core.InputSignal<_tekus_design_system_components_column_picker.TkColumnPickerColumn[]>;
119
+ /**
120
+ * Two-way bindable list of hidden column keys, forwarded to the embedded
121
+ * `tk-column-picker`. Bind the same list to `tk-table`'s `[hiddenColumns]`.
122
+ * Its initial value preloads a saved selection; locked keys are removed from it.
123
+ * @default []
124
+ */
125
+ readonly hiddenColumns: _angular_core.ModelSignal<string[]>;
126
+ /**
127
+ * Title/tooltip for the column visibility picker.
128
+ * @default 'Columnas'
129
+ */
130
+ readonly columnsLabel: _angular_core.InputSignal<string>;
131
+ /**
132
+ * Label for the button that shows every column again.
133
+ * @default 'Restablecer'
134
+ */
135
+ readonly resetColumnsLabel: _angular_core.InputSignal<string>;
106
136
  /**
107
137
  * Available list of sorting options.
108
138
  * @default []
@@ -179,6 +209,11 @@ declare class ToolbarComponent {
179
209
  * Emits when sorting changes.
180
210
  */
181
211
  appliedSort: _angular_core.OutputEmitterRef<string | null>;
212
+ /**
213
+ * Emits the hidden column keys when the user applies the column picker,
214
+ * so the consumer can store the selection and preload it next time.
215
+ */
216
+ readonly appliedColumns: _angular_core.OutputEmitterRef<string[]>;
182
217
  /** Temporary filter values held before the user clicks "Aplicar" */
183
218
  tempFilterValues: _angular_core.WritableSignal<Record<string, MultiSelectOption[]>>;
184
219
  /** Temporary sort value held before the user clicks "Aplicar" in mobile drawer */
@@ -236,8 +271,8 @@ declare class ToolbarComponent {
236
271
  toggleView(): void;
237
272
  onReload(): void;
238
273
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToolbarComponent, never>;
239
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToolbarComponent, "tk-toolbar", never, { "searchModel": { "alias": "searchModel"; "required": false; "isSignal": true; }; "searchFloatLabel": { "alias": "searchFloatLabel"; "required": false; "isSignal": true; }; "searchVisible": { "alias": "searchVisible"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "viewToggleVisible": { "alias": "viewToggleVisible"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "filterModel": { "alias": "filterModel"; "required": false; "isSignal": true; }; "filterOptions": { "alias": "filterOptions"; "required": false; "isSignal": true; }; "filterOptionLabel": { "alias": "filterOptionLabel"; "required": false; "isSignal": true; }; "filterFloatLabel": { "alias": "filterFloatLabel"; "required": false; "isSignal": true; }; "filterVisible": { "alias": "filterVisible"; "required": false; "isSignal": true; }; "filterValues": { "alias": "filterValues"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "deleteLabel": { "alias": "deleteLabel"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "selectedLabel": { "alias": "selectedLabel"; "required": false; "isSignal": true; }; "selectedPluralLabel": { "alias": "selectedPluralLabel"; "required": false; "isSignal": true; }; "applyLabel": { "alias": "applyLabel"; "required": false; "isSignal": true; }; "reloadTooltip": { "alias": "reloadTooltip"; "required": false; "isSignal": true; }; "sortTooltip": { "alias": "sortTooltip"; "required": false; "isSignal": true; }; "viewCardsTooltip": { "alias": "viewCardsTooltip"; "required": false; "isSignal": true; }; "viewTableTooltip": { "alias": "viewTableTooltip"; "required": false; "isSignal": true; }; "sortOptions": { "alias": "sortOptions"; "required": false; "isSignal": true; }; "sortLabel": { "alias": "sortLabel"; "required": false; "isSignal": true; }; "sortValue": { "alias": "sortValue"; "required": false; "isSignal": true; }; "reloadVisible": { "alias": "reloadVisible"; "required": false; "isSignal": true; }; "reloadInterval": { "alias": "reloadInterval"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "globalActions": { "alias": "globalActions"; "required": false; "isSignal": true; }; "selectionCount": { "alias": "selectionCount"; "required": false; "isSignal": true; }; "allSelected": { "alias": "allSelected"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "selectionActions": { "alias": "selectionActions"; "required": false; "isSignal": true; }; "maxVisibleSelectionActions": { "alias": "maxVisibleSelectionActions"; "required": false; "isSignal": true; }; }, { "searchModel": "searchModelChange"; "view": "viewChange"; "filterModel": "filterModelChange"; "filterValues": "filterValuesChange"; "sortValue": "sortValueChange"; "allSelected": "allSelectedChange"; "indeterminate": "indeterminateChange"; "reload": "reload"; "appliedFilters": "appliedFilters"; "appliedSort": "appliedSort"; }, never, never, true, never>;
274
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToolbarComponent, "tk-toolbar", never, { "searchModel": { "alias": "searchModel"; "required": false; "isSignal": true; }; "searchFloatLabel": { "alias": "searchFloatLabel"; "required": false; "isSignal": true; }; "searchVisible": { "alias": "searchVisible"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "viewToggleVisible": { "alias": "viewToggleVisible"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "filterModel": { "alias": "filterModel"; "required": false; "isSignal": true; }; "filterOptions": { "alias": "filterOptions"; "required": false; "isSignal": true; }; "filterOptionLabel": { "alias": "filterOptionLabel"; "required": false; "isSignal": true; }; "filterFloatLabel": { "alias": "filterFloatLabel"; "required": false; "isSignal": true; }; "filterVisible": { "alias": "filterVisible"; "required": false; "isSignal": true; }; "filterValues": { "alias": "filterValues"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "deleteLabel": { "alias": "deleteLabel"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "selectedLabel": { "alias": "selectedLabel"; "required": false; "isSignal": true; }; "selectedPluralLabel": { "alias": "selectedPluralLabel"; "required": false; "isSignal": true; }; "applyLabel": { "alias": "applyLabel"; "required": false; "isSignal": true; }; "reloadTooltip": { "alias": "reloadTooltip"; "required": false; "isSignal": true; }; "sortTooltip": { "alias": "sortTooltip"; "required": false; "isSignal": true; }; "viewCardsTooltip": { "alias": "viewCardsTooltip"; "required": false; "isSignal": true; }; "viewTableTooltip": { "alias": "viewTableTooltip"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "hiddenColumns": { "alias": "hiddenColumns"; "required": false; "isSignal": true; }; "columnsLabel": { "alias": "columnsLabel"; "required": false; "isSignal": true; }; "resetColumnsLabel": { "alias": "resetColumnsLabel"; "required": false; "isSignal": true; }; "sortOptions": { "alias": "sortOptions"; "required": false; "isSignal": true; }; "sortLabel": { "alias": "sortLabel"; "required": false; "isSignal": true; }; "sortValue": { "alias": "sortValue"; "required": false; "isSignal": true; }; "reloadVisible": { "alias": "reloadVisible"; "required": false; "isSignal": true; }; "reloadInterval": { "alias": "reloadInterval"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "globalActions": { "alias": "globalActions"; "required": false; "isSignal": true; }; "selectionCount": { "alias": "selectionCount"; "required": false; "isSignal": true; }; "allSelected": { "alias": "allSelected"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "selectionActions": { "alias": "selectionActions"; "required": false; "isSignal": true; }; "maxVisibleSelectionActions": { "alias": "maxVisibleSelectionActions"; "required": false; "isSignal": true; }; }, { "searchModel": "searchModelChange"; "view": "viewChange"; "filterModel": "filterModelChange"; "filterValues": "filterValuesChange"; "hiddenColumns": "hiddenColumnsChange"; "sortValue": "sortValueChange"; "allSelected": "allSelectedChange"; "indeterminate": "indeterminateChange"; "reload": "reload"; "appliedFilters": "appliedFilters"; "appliedSort": "appliedSort"; "appliedColumns": "appliedColumns"; }, never, never, true, never>;
240
275
  }
241
276
 
242
277
  export { ToolbarComponent };
243
- export type { TkToolbarAction, TkToolbarFilterConfig };
278
+ export type { TkToolbarAction, TkToolbarColumnConfig, TkToolbarFilterConfig };
@@ -31,8 +31,19 @@ declare class TooltipComponent {
31
31
  * @default 'top'
32
32
  */
33
33
  position: _angular_core.InputSignal<TooltipPosition>;
34
+ /**
35
+ * @property {number | null} lineClamp
36
+ * @description
37
+ * Optional. Truncates the projected content to this number of lines with an
38
+ * ellipsis (long words without spaces break too) and only shows the tooltip
39
+ * when the content is actually truncated. Use it with `content` set to the
40
+ * full text. Without it the content is not truncated and the tooltip always shows.
41
+ *
42
+ * @default null
43
+ */
44
+ readonly lineClamp: _angular_core.InputSignal<number | null>;
34
45
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipComponent, never>;
35
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<TooltipComponent, "tk-tooltip", never, { "content": { "alias": "content"; "required": true; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
46
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<TooltipComponent, "tk-tooltip", never, { "content": { "alias": "content"; "required": true; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "lineClamp": { "alias": "lineClamp"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
36
47
  }
37
48
 
38
49
  export { TooltipComponent };