@tekus/design-system 5.5.0 → 5.7.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 (72) hide show
  1. package/assets/readme-images/autocomplete-default.svg +8 -0
  2. package/assets/readme-images/autocomplete-disabled.svg +9 -0
  3. package/assets/readme-images/autocomplete-focus.svg +11 -0
  4. package/assets/readme-images/paginator-options.svg +22 -0
  5. package/assets/readme-images/paginator.svg +15 -0
  6. package/assets/readme-images/select-default.svg +9 -0
  7. package/assets/readme-images/select-disabled.svg +10 -0
  8. package/assets/readme-images/select-filled.svg +11 -0
  9. package/assets/readme-images/select-options.svg +18 -0
  10. package/assets/readme-images/table-basic.svg +108 -0
  11. package/assets/readme-images/table-example.svg +67 -0
  12. package/assets/readme-images/table-sorting.svg +111 -0
  13. package/assets/readme-images/tk-checkbox-default-label.svg +5 -0
  14. package/assets/readme-images/tk-checkbox-default.svg +4 -0
  15. package/assets/readme-images/tk-checkbox-disabled.svg +11 -0
  16. package/assets/readme-images/tk-checkbox-selected.svg +6 -0
  17. package/assets/readme-images/tk-tooltip.svg +19 -0
  18. package/assets/readme-images/toolbar-active.svg +12 -0
  19. package/assets/readme-images/toolbar-default.svg +5 -0
  20. package/assets/readme-images/toolbar-options.svg +30 -0
  21. package/components/autocomplete/index.d.ts +5 -0
  22. package/components/autocomplete/public-api.d.ts +1 -0
  23. package/components/autocomplete/src/autocomplete.component.d.ts +96 -0
  24. package/components/button/src/button.component.d.ts +9 -1
  25. package/components/checkbox/index.d.ts +5 -0
  26. package/components/checkbox/public-api.d.ts +1 -0
  27. package/components/checkbox/src/checkbox.component.d.ts +78 -0
  28. package/components/pagination/index.d.ts +5 -0
  29. package/components/pagination/public-api.d.ts +1 -0
  30. package/components/pagination/src/pagination.component.d.ts +109 -0
  31. package/components/select/index.d.ts +5 -0
  32. package/components/select/public-api.d.ts +1 -0
  33. package/components/select/src/select.component.d.ts +118 -0
  34. package/components/table/index.d.ts +5 -0
  35. package/components/table/public-api.d.ts +2 -0
  36. package/components/table/src/table.component.d.ts +52 -0
  37. package/components/table/src/table.interface.d.ts +14 -0
  38. package/components/toolbar/index.d.ts +5 -0
  39. package/components/toolbar/public-api.d.ts +1 -0
  40. package/components/toolbar/src/toolbar.component.d.ts +99 -0
  41. package/components/tooltip/index.d.ts +5 -0
  42. package/components/tooltip/public-api.d.ts +1 -0
  43. package/components/tooltip/src/tooltip.component.d.ts +35 -0
  44. package/fesm2022/tekus-design-system-components-autocomplete.mjs +157 -0
  45. package/fesm2022/tekus-design-system-components-autocomplete.mjs.map +1 -0
  46. package/fesm2022/tekus-design-system-components-button.mjs +6 -3
  47. package/fesm2022/tekus-design-system-components-button.mjs.map +1 -1
  48. package/fesm2022/tekus-design-system-components-checkbox.mjs +146 -0
  49. package/fesm2022/tekus-design-system-components-checkbox.mjs.map +1 -0
  50. package/fesm2022/tekus-design-system-components-date-picker.mjs +2 -2
  51. package/fesm2022/tekus-design-system-components-date-picker.mjs.map +1 -1
  52. package/fesm2022/tekus-design-system-components-fallback-view.mjs +1 -1
  53. package/fesm2022/tekus-design-system-components-fallback-view.mjs.map +1 -1
  54. package/fesm2022/tekus-design-system-components-modal.mjs +1 -1
  55. package/fesm2022/tekus-design-system-components-modal.mjs.map +1 -1
  56. package/fesm2022/tekus-design-system-components-multiselect.mjs +2 -2
  57. package/fesm2022/tekus-design-system-components-multiselect.mjs.map +1 -1
  58. package/fesm2022/tekus-design-system-components-pagination.mjs +162 -0
  59. package/fesm2022/tekus-design-system-components-pagination.mjs.map +1 -0
  60. package/fesm2022/tekus-design-system-components-select.mjs +193 -0
  61. package/fesm2022/tekus-design-system-components-select.mjs.map +1 -0
  62. package/fesm2022/tekus-design-system-components-table.mjs +134 -0
  63. package/fesm2022/tekus-design-system-components-table.mjs.map +1 -0
  64. package/fesm2022/tekus-design-system-components-toolbar.mjs +126 -0
  65. package/fesm2022/tekus-design-system-components-toolbar.mjs.map +1 -0
  66. package/fesm2022/tekus-design-system-components-tooltip.mjs +37 -0
  67. package/fesm2022/tekus-design-system-components-tooltip.mjs.map +1 -0
  68. package/fesm2022/tekus-design-system-core-types.mjs +25 -0
  69. package/fesm2022/tekus-design-system-core-types.mjs.map +1 -1
  70. package/fesm2022/tekus-design-system-core.mjs +25 -0
  71. package/fesm2022/tekus-design-system-core.mjs.map +1 -1
  72. package/package.json +36 -8
@@ -0,0 +1,14 @@
1
+ import { TagSeverity } from '@tekus/design-system/components/tag';
2
+ export type TableColumnType = 'text' | 'tag' | 'actions';
3
+ export interface TableColumn<T = unknown> {
4
+ field?: string;
5
+ header: string;
6
+ sortable?: boolean;
7
+ type?: TableColumnType;
8
+ width?: string;
9
+ tagSeverity?: (row: T) => TagSeverity;
10
+ actions?: Array<{
11
+ icon: string;
12
+ action?: (row: T) => void;
13
+ }>;
14
+ }
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Generated bundle index. Do not edit.
3
+ */
4
+ /// <amd-module name="@tekus/design-system/components/toolbar" />
5
+ export * from './public-api';
@@ -0,0 +1 @@
1
+ export * from './src/toolbar.component';
@@ -0,0 +1,99 @@
1
+ import * as i0 from "@angular/core";
2
+ export declare class ToolbarComponent {
3
+ /**
4
+ * @property {ModelSignal<string>} searchModel
5
+ * @description
6
+ * Two-way bindable signal for the search input value.
7
+ * Supports [(searchModel)]="variable" syntax for two-way binding.
8
+ * @default ''
9
+ */
10
+ searchModel: import("@angular/core").ModelSignal<string>;
11
+ /**
12
+ * @property {ModelSignal<Record<string, string> | null>} filterModel
13
+ * @description
14
+ * Two-way bindable signal for the filter select value.
15
+ * Supports [(filterModel)]="variable" syntax for two-way binding.
16
+ * @default null
17
+ */
18
+ filterModel: import("@angular/core").ModelSignal<Record<string, string> | null>;
19
+ /**
20
+ * @property {WritableSignal<boolean>} showSearchInput
21
+ * @description
22
+ * Controls the visibility of the search input. Toggles when the search button is clicked.
23
+ * @default false
24
+ */
25
+ showSearchInput: import("@angular/core").WritableSignal<boolean>;
26
+ /**
27
+ * @property {WritableSignal<boolean>} showFilterSelect
28
+ * @description
29
+ * Controls the visibility of the filter select. Toggles when the filter button is clicked.
30
+ * @default false
31
+ */
32
+ showFilterSelect: import("@angular/core").WritableSignal<boolean>;
33
+ /**
34
+ * @property {InputSignal<Array<{ label: string; value: string }>>} filterOptions
35
+ * @description
36
+ * Array of options available in the filter select dropdown.
37
+ * Each option is an object with `label` (displayed text) and `value` (internal identifier).
38
+ *
39
+ * @default
40
+ * [
41
+ * { label: 'Option 1', value: 'option1' },
42
+ * { label: 'Option 2', value: 'option2' },
43
+ * { label: 'Option 3', value: 'option3' }
44
+ * ]
45
+ */
46
+ filterOptions: import("@angular/core").InputSignal<{
47
+ label: string;
48
+ value: string;
49
+ }[]>;
50
+ /**
51
+ * @property {InputSignal<string>} filterOptionLabel
52
+ * @description
53
+ * Property name used to display the label in the select dropdown options.
54
+ * This corresponds to the key in each option object that contains the display text.
55
+ *
56
+ * @default 'label'
57
+ */
58
+ filterOptionLabel: import("@angular/core").InputSignal<string>;
59
+ /**
60
+ * @property {InputSignal<string>} filterFloatLabel
61
+ * @description
62
+ * Label text displayed above the filter select input using the FloatLabel wrapper.
63
+ * This is the placeholder/label that floats when the select is focused or has a value.
64
+ *
65
+ * @default 'Filtrar'
66
+ */
67
+ filterFloatLabel: import("@angular/core").InputSignal<string>;
68
+ /**
69
+ * @property {InputSignal<string>} searchFloatLabel
70
+ * @description
71
+ * Label text displayed above the search input using the FloatLabel wrapper.
72
+ * This is the placeholder/label that floats when the search input is focused or has a value.
73
+ *
74
+ * @default 'Buscar'
75
+ */
76
+ searchFloatLabel: import("@angular/core").InputSignal<string>;
77
+ /**
78
+ * @method toggleSearchInput
79
+ * @description
80
+ * Toggles the visibility of the search input field.
81
+ */
82
+ toggleSearchInput(): void;
83
+ /**
84
+ * @method toggleFilterSelect
85
+ * @description
86
+ * Toggles the visibility of the filter select dropdown.
87
+ */
88
+ toggleFilterSelect(): void;
89
+ /**
90
+ * @method onSelectedOption
91
+ * @description
92
+ * Handles filter select changes and updates the filterModel signal.
93
+ *
94
+ * @param value - Selected option value from tk-select
95
+ */
96
+ onSelectedOption(value: Record<string, string> | null): void;
97
+ static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarComponent, never>;
98
+ static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "tk-toolbar", never, { "searchModel": { "alias": "searchModel"; "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; }; "searchFloatLabel": { "alias": "searchFloatLabel"; "required": false; "isSignal": true; }; }, { "searchModel": "searchModelChange"; "filterModel": "filterModelChange"; }, never, never, true, never>;
99
+ }
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Generated bundle index. Do not edit.
3
+ */
4
+ /// <amd-module name="@tekus/design-system/components/tooltip" />
5
+ export * from './public-api';
@@ -0,0 +1 @@
1
+ export * from './src/tooltip.component';
@@ -0,0 +1,35 @@
1
+ import * as i0 from "@angular/core";
2
+ /**
3
+ * @component TooltipComponent
4
+ * @description
5
+ * Wrapper component that applies a PrimeNG tooltip to its projected content.
6
+ * It allows defining the tooltip text and its position relative to the content.
7
+ *
8
+ * @usage
9
+ * ```html
10
+ * <tk-tooltip content="Tooltip text" position="top">
11
+ * <button>Hover me</button>
12
+ * </tk-tooltip>
13
+ * ```
14
+ */
15
+ export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
16
+ export declare class TooltipComponent {
17
+ /**
18
+ * @property {string} content
19
+ * @description
20
+ * The text to be displayed in the tooltip.
21
+ *
22
+ * @required
23
+ */
24
+ content: import("@angular/core").InputSignal<string>;
25
+ /**
26
+ * @property {TooltipPosition} position
27
+ * @description
28
+ * Position of the tooltip relative to the element.
29
+ *
30
+ * @default 'top'
31
+ */
32
+ position: import("@angular/core").InputSignal<TooltipPosition>;
33
+ static ɵfac: i0.ɵɵFactoryDeclaration<TooltipComponent, never>;
34
+ static ɵcmp: i0.ɵɵComponentDeclaration<TooltipComponent, "tk-tooltip", never, { "content": { "alias": "content"; "required": true; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
35
+ }
@@ -0,0 +1,157 @@
1
+ import * as i0 from '@angular/core';
2
+ import { input, signal, model, output, effect, forwardRef, Component } from '@angular/core';
3
+ import * as i1 from '@angular/forms';
4
+ import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
5
+ import * as i2 from 'primeng/floatlabel';
6
+ import { FloatLabelModule } from 'primeng/floatlabel';
7
+ import { AutoComplete } from 'primeng/autocomplete';
8
+
9
+ class AutocompleteComponent {
10
+ constructor() {
11
+ /**
12
+ * @property {string} id
13
+ * @description
14
+ * HTML id attribute for the autocomplete input.
15
+ *
16
+ * @default 'autocomplete'
17
+ */
18
+ this.id = input('autocomplete');
19
+ /**
20
+ * @property {string} label
21
+ * @description
22
+ * Floating label displayed above the autocomplete input.
23
+ */
24
+ this.label = input('');
25
+ /**
26
+ * @property {boolean} disabled
27
+ * @description
28
+ * Determines whether the autocomplete field is disabled.
29
+ *
30
+ * @default false
31
+ */
32
+ this.disabled = input(false);
33
+ /**
34
+ * @property {AutocompleteValue<T>} value
35
+ * @description
36
+ * Internal selected value. Synced with Angular forms and the model signal.
37
+ *
38
+ * @internal
39
+ */
40
+ this.value = null;
41
+ this.internalDisabled = signal(false);
42
+ /**
43
+ * @property {Signal<AutocompleteValue<T>>} model
44
+ * @description
45
+ * Two-way binding model using Angular signals.
46
+ * Allows usage with the syntax: `[(model)]="myValue"`.
47
+ */
48
+ this.model = model();
49
+ /**
50
+ * @event modelChange
51
+ * @description
52
+ * Emits whenever the value changes.
53
+ * Payload: the selected item(s) of type `AutocompleteValue<T>`.
54
+ *
55
+ * @example
56
+ * <tk-autocomplete (modelChange)="onChange($event)"></tk-autocomplete>
57
+ */
58
+ this.modelChange = output();
59
+ // -----------------------------------
60
+ // CVA CALLBACKS
61
+ // -----------------------------------
62
+ this.onChangeFn = () => { };
63
+ this.onTouchedFn = () => { };
64
+ /**
65
+ * disabled → internalDisabled
66
+ */
67
+ effect(() => {
68
+ this.internalDisabled.set(this.disabled());
69
+ });
70
+ /**
71
+ * model → internal value + forms
72
+ */
73
+ effect(() => {
74
+ const v = this.model();
75
+ if (v !== this.value) {
76
+ this.value = v ?? null;
77
+ this.onChangeFn(this.value);
78
+ }
79
+ });
80
+ }
81
+ /**
82
+ * @method writeValue
83
+ * @description
84
+ * Receives value updates from Angular Forms and writes them into the component.
85
+ *
86
+ * @param {AutocompleteValue<T>} value - New value from the forms API.
87
+ */
88
+ writeValue(value) {
89
+ this.model.set(value);
90
+ }
91
+ /**
92
+ * @method registerOnChange
93
+ * @description
94
+ * Registers a callback that is invoked when the component's value changes.
95
+ */
96
+ registerOnChange(fn) {
97
+ this.onChangeFn = fn;
98
+ }
99
+ /**
100
+ * @method registerOnTouched
101
+ * @description
102
+ * Registers a callback invoked when the component is touched.
103
+ */
104
+ registerOnTouched(fn) {
105
+ this.onTouchedFn = fn;
106
+ }
107
+ /**
108
+ * @method setDisabledState
109
+ * @description
110
+ * Updates the disabled state of the autocomplete control.
111
+ *
112
+ * @param {boolean} isDisabled - Whether the component should be disabled.
113
+ */
114
+ setDisabledState(isDisabled) {
115
+ this.internalDisabled.set(isDisabled);
116
+ }
117
+ /**
118
+ * @method handleChange
119
+ * @description
120
+ * Handles value changes from the autocomplete component.
121
+ * Updates Angular Forms, Signals, and emits the modelChange event.
122
+ *
123
+ * @param {AutocompleteValue<T>} value - The new selected value(s).
124
+ */
125
+ handleChange(value) {
126
+ this.value = value;
127
+ this.onChangeFn(value);
128
+ this.onTouchedFn();
129
+ this.model.set(value);
130
+ this.modelChange.emit(value);
131
+ }
132
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
133
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: AutocompleteComponent, isStandalone: true, selector: "tk-autocomplete", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", modelChange: "modelChange" }, providers: [
134
+ {
135
+ provide: NG_VALUE_ACCESSOR,
136
+ useExisting: forwardRef(() => AutocompleteComponent),
137
+ multi: true,
138
+ },
139
+ ], ngImport: i0, template: "<p-floatlabel class=\"w-full\">\n <p-autocomplete\n [ngModel]=\"value\"\n (ngModelChange)=\"handleChange($event)\"\n [disabled]=\"disabled()\"\n [inputId]=\"id()\"\n [typeahead]=\"false\"\n multiple\n fluid />\n <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n", styles: [":host ::ng-deep .p-autocomplete-input-multiple{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0}:host ::ng-deep .p-autocomplete-input-multiple:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #424243);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-autocomplete-chip-icon{display:flex;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-autocomplete-chip{border-radius:var(--tk-borderRadius-full, 999px)!important;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-autocomplete-input-multiple-label{gap:.313rem;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] }); }
140
+ }
141
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AutocompleteComponent, decorators: [{
142
+ type: Component,
143
+ args: [{ selector: 'tk-autocomplete', standalone: true, imports: [FormsModule, AutoComplete, FloatLabelModule], providers: [
144
+ {
145
+ provide: NG_VALUE_ACCESSOR,
146
+ useExisting: forwardRef(() => AutocompleteComponent),
147
+ multi: true,
148
+ },
149
+ ], template: "<p-floatlabel class=\"w-full\">\n <p-autocomplete\n [ngModel]=\"value\"\n (ngModelChange)=\"handleChange($event)\"\n [disabled]=\"disabled()\"\n [inputId]=\"id()\"\n [typeahead]=\"false\"\n multiple\n fluid />\n <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n", styles: [":host ::ng-deep .p-autocomplete-input-multiple{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0}:host ::ng-deep .p-autocomplete-input-multiple:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #424243);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-autocomplete-chip-icon{display:flex;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-autocomplete-chip{border-radius:var(--tk-borderRadius-full, 999px)!important;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-autocomplete-input-multiple-label{gap:.313rem;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}\n"] }]
150
+ }], ctorParameters: () => [] });
151
+
152
+ /**
153
+ * Generated bundle index. Do not edit.
154
+ */
155
+
156
+ export { AutocompleteComponent };
157
+ //# sourceMappingURL=tekus-design-system-components-autocomplete.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tekus-design-system-components-autocomplete.mjs","sources":["../../../projects/design-system/components/autocomplete/src/autocomplete.component.ts","../../../projects/design-system/components/autocomplete/src/autocomplete.component.html","../../../projects/design-system/components/autocomplete/tekus-design-system-components-autocomplete.ts"],"sourcesContent":["import {\n Component,\n effect,\n model,\n forwardRef,\n input,\n output,\n signal,\n} from '@angular/core';\nimport {\n ControlValueAccessor,\n NG_VALUE_ACCESSOR,\n FormsModule,\n} from '@angular/forms';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { AutoComplete } from 'primeng/autocomplete';\n\ntype AutocompleteValue<T = unknown> = T | T[] | null;\n\n@Component({\n selector: 'tk-autocomplete',\n standalone: true,\n imports: [FormsModule, AutoComplete, FloatLabelModule],\n templateUrl: './autocomplete.component.html',\n styleUrl: './autocomplete.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => AutocompleteComponent),\n multi: true,\n },\n ],\n})\nexport class AutocompleteComponent<T = unknown>\n implements ControlValueAccessor\n{\n /**\n * @property {string} id\n * @description\n * HTML id attribute for the autocomplete input.\n *\n * @default 'autocomplete'\n */\n id = input<string>('autocomplete');\n\n /**\n * @property {string} label\n * @description\n * Floating label displayed above the autocomplete input.\n */\n label = input<string>('');\n\n /**\n * @property {boolean} disabled\n * @description\n * Determines whether the autocomplete field is disabled.\n *\n * @default false\n */\n disabled = input<boolean>(false);\n\n /**\n * @property {AutocompleteValue<T>} value\n * @description\n * Internal selected value. Synced with Angular forms and the model signal.\n *\n * @internal\n */\n value: AutocompleteValue<T> = null;\n\n internalDisabled = signal(false);\n\n /**\n * @property {Signal<AutocompleteValue<T>>} model\n * @description\n * Two-way binding model using Angular signals.\n * Allows usage with the syntax: `[(model)]=\"myValue\"`.\n */\n model = model<AutocompleteValue<T>>();\n\n /**\n * @event modelChange\n * @description\n * Emits whenever the value changes.\n * Payload: the selected item(s) of type `AutocompleteValue<T>`.\n *\n * @example\n * <tk-autocomplete (modelChange)=\"onChange($event)\"></tk-autocomplete>\n */\n modelChange = output<AutocompleteValue<T>>();\n\n // -----------------------------------\n // CVA CALLBACKS\n // -----------------------------------\n\n private onChangeFn: (value: AutocompleteValue<T>) => void = () => {};\n private onTouchedFn = () => {};\n\n constructor() {\n /**\n * disabled → internalDisabled\n */\n effect(() => {\n this.internalDisabled.set(this.disabled());\n });\n\n /**\n * model → internal value + forms\n */\n effect(() => {\n const v = this.model();\n if (v !== this.value) {\n this.value = v ?? null;\n this.onChangeFn(this.value);\n }\n });\n }\n\n /**\n * @method writeValue\n * @description\n * Receives value updates from Angular Forms and writes them into the component.\n *\n * @param {AutocompleteValue<T>} value - New value from the forms API.\n */\n writeValue(value: AutocompleteValue<T>): void {\n this.model.set(value);\n }\n\n /**\n * @method registerOnChange\n * @description\n * Registers a callback that is invoked when the component's value changes.\n */\n registerOnChange(fn: (value: AutocompleteValue<T>) => void): void {\n this.onChangeFn = fn;\n }\n\n /**\n * @method registerOnTouched\n * @description\n * Registers a callback invoked when the component is touched.\n */\n registerOnTouched(fn: () => void): void {\n this.onTouchedFn = fn;\n }\n\n /**\n * @method setDisabledState\n * @description\n * Updates the disabled state of the autocomplete control.\n *\n * @param {boolean} isDisabled - Whether the component should be disabled.\n */\n setDisabledState(isDisabled: boolean): void {\n this.internalDisabled.set(isDisabled);\n }\n\n /**\n * @method handleChange\n * @description\n * Handles value changes from the autocomplete component.\n * Updates Angular Forms, Signals, and emits the modelChange event.\n *\n * @param {AutocompleteValue<T>} value - The new selected value(s).\n */\n handleChange(value: AutocompleteValue<T>) {\n this.value = value;\n this.onChangeFn(value);\n this.onTouchedFn();\n this.model.set(value);\n this.modelChange.emit(value);\n }\n}\n","<p-floatlabel class=\"w-full\">\n <p-autocomplete\n [ngModel]=\"value\"\n (ngModelChange)=\"handleChange($event)\"\n [disabled]=\"disabled()\"\n [inputId]=\"id()\"\n [typeahead]=\"false\"\n multiple\n fluid />\n <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
@@ -1,8 +1,9 @@
1
1
  import * as i0 from '@angular/core';
2
- import { EventEmitter, Output, Input, Component } from '@angular/core';
2
+ import { EventEmitter, Input, Output, Component } from '@angular/core';
3
3
  import * as i1 from 'primeng/button';
4
4
  import { ButtonModule } from 'primeng/button';
5
5
  import { IconComponent } from '@tekus/design-system/components/icon';
6
+ import { Tooltip } from 'primeng/tooltip';
6
7
 
7
8
  /**
8
9
  * @component ButtonComponent
@@ -95,11 +96,11 @@ class ButtonComponent {
95
96
  this.clicked.emit('mouse');
96
97
  }
97
98
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
98
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ButtonComponent, isStandalone: true, selector: "tk-button", inputs: { label: "label", disabled: "disabled", type: "type", severity: "severity", variant: "variant", link: "link", icon: "icon" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<p-button\n class=\"tk-button\"\n [label]=\"label\"\n [disabled]=\"disabled\"\n [type]=\"type\"\n [severity]=\"link ? null : severity\"\n [variant]=\"variant\"\n [link]=\"link\"\n (click)=\"onButtonClick()\"\n (keydown.enter)=\"onButtonClick()\"\n (keydown.space)=\"onButtonClick()\">\n\n @if (icon) {\n <tk-icon [icon]=\"icon\"></tk-icon>\n }\n</p-button>\n", styles: [":host ::ng-deep .p-button.p-button-primary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-color-base-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-color-base-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-color-base-primary-400, #45338c)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label{color:var(--tk-color-base-surface-900, #191A1B)!important}:host ::ng-deep .p-button.p-button-secondary.p-button-outlined .p-button-label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{font-weight:var(--tk-font-weight-400, 400)}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"], outputs: ["iconChange", "styleIconChange", "colorChange", "sizeChange", "disabledChange"] }] }); }
99
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ButtonComponent, isStandalone: true, selector: "tk-button", inputs: { label: "label", disabled: "disabled", type: "type", severity: "severity", variant: "variant", link: "link", icon: "icon", tooltipText: "tooltipText" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<p-button\n class=\"tk-button\"\n [label]=\"label\"\n [disabled]=\"disabled\"\n [type]=\"type\"\n [severity]=\"link ? null : severity\"\n [variant]=\"variant\"\n [link]=\"link\"\n [pTooltip]=\"tooltipText\"\n tooltipPosition=\"top\"\n (click)=\"onButtonClick()\"\n (keydown.enter)=\"onButtonClick()\"\n (keydown.space)=\"onButtonClick()\">\n\n @if (icon) {\n <tk-icon [icon]=\"icon\"></tk-icon>\n }\n</p-button>\n", styles: [":host ::ng-deep .p-button.p-button-primary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-color-base-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-color-base-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-color-base-primary-400, #45338c)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label{color:var(--tk-color-base-surface-900, #191A1B)!important}:host ::ng-deep .p-button.p-button-secondary.p-button-outlined .p-button-label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{font-weight:var(--tk-font-weight-400, 400)}:host ::ng-deep p-button{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"], outputs: ["iconChange", "styleIconChange", "colorChange", "sizeChange", "disabledChange"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
99
100
  }
100
101
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonComponent, decorators: [{
101
102
  type: Component,
102
- args: [{ selector: 'tk-button', standalone: true, imports: [ButtonModule, IconComponent], template: "<p-button\n class=\"tk-button\"\n [label]=\"label\"\n [disabled]=\"disabled\"\n [type]=\"type\"\n [severity]=\"link ? null : severity\"\n [variant]=\"variant\"\n [link]=\"link\"\n (click)=\"onButtonClick()\"\n (keydown.enter)=\"onButtonClick()\"\n (keydown.space)=\"onButtonClick()\">\n\n @if (icon) {\n <tk-icon [icon]=\"icon\"></tk-icon>\n }\n</p-button>\n", styles: [":host ::ng-deep .p-button.p-button-primary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-color-base-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-color-base-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-color-base-primary-400, #45338c)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label{color:var(--tk-color-base-surface-900, #191A1B)!important}:host ::ng-deep .p-button.p-button-secondary.p-button-outlined .p-button-label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{font-weight:var(--tk-font-weight-400, 400)}\n"] }]
103
+ args: [{ selector: 'tk-button', standalone: true, imports: [ButtonModule, IconComponent, Tooltip], template: "<p-button\n class=\"tk-button\"\n [label]=\"label\"\n [disabled]=\"disabled\"\n [type]=\"type\"\n [severity]=\"link ? null : severity\"\n [variant]=\"variant\"\n [link]=\"link\"\n [pTooltip]=\"tooltipText\"\n tooltipPosition=\"top\"\n (click)=\"onButtonClick()\"\n (keydown.enter)=\"onButtonClick()\"\n (keydown.space)=\"onButtonClick()\">\n\n @if (icon) {\n <tk-icon [icon]=\"icon\"></tk-icon>\n }\n</p-button>\n", styles: [":host ::ng-deep .p-button.p-button-primary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-color-base-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-color-base-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-color-base-primary-400, #45338c)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label{color:var(--tk-color-base-surface-900, #191A1B)!important}:host ::ng-deep .p-button.p-button-secondary.p-button-outlined .p-button-label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{font-weight:var(--tk-font-weight-400, 400)}:host ::ng-deep p-button{display:inline-block}\n"] }]
103
104
  }], propDecorators: { label: [{
104
105
  type: Input
105
106
  }], disabled: [{
@@ -116,6 +117,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
116
117
  type: Input
117
118
  }], clicked: [{
118
119
  type: Output
120
+ }], tooltipText: [{
121
+ type: Input
119
122
  }] } });
120
123
 
121
124
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"tekus-design-system-components-button.mjs","sources":["../../../projects/design-system/components/button/src/button.component.ts","../../../projects/design-system/components/button/src/button.component.html","../../../projects/design-system/components/button/tekus-design-system-components-button.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { ButtonModule } from 'primeng/button';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\n\nexport type ButtonSeverity = 'primary' | 'secondary' | 'danger';\nexport type Variant = 'text' | 'outlined';\n/**\n * @component ButtonComponent\n * @description\n * Atomic button component that provides a reusable and customizable button element\n * across the application.\n * It uses PrimeNG’s `ButtonModule` under the hood and allows setting different visual\n * variants (severity), button types, and disabled states.\n *\n * This component ensures consistent design and behavior in all button interactions.\n * It is accessible via both mouse clicks and keyboard actions (Enter/Space).\n *\n * @usage\n * ```html\n * <tk-button\n * label=\"Save\"\n * [severity]=\"'primary'\"\n * [type]=\"'submit'\"\n * (clicked)=\"handleSave()\">\n * </tk-button>\n *\n * <tk-button\n * label=\"Cancel\"\n * [severity]=\"'secondary'\"\n * [disabled]=\"true\">\n * </tk-button>\n * ```\n */\n@Component({\n selector: 'tk-button',\n standalone: true,\n imports: [ButtonModule, IconComponent],\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss'],\n})\nexport class ButtonComponent {\n /**\n * @property {string} label\n * @description\n * Text displayed inside the button.\n *\n * @description\n * Text displayed inside the button.\n *\n * @default `undefined`\n */\n @Input() label?: string;\n\n /**\n * @property {boolean} disabled\n * @description\n * Disables the button, preventing user interaction and applying a visual style\n * that indicates the inactive state.\n *\n * @default `false`\n */\n @Input() disabled = false;\n\n /**\n * @property {'button' | 'submit'} type\n * @description\n * Defines the button’s HTML type attribute.\n * - `'button'`: Standard clickable button (default).\n * - `'submit'`: Used to submit forms.\n *\n * @default `'button'`\n */\n @Input() type: 'button' | 'submit' = 'button';\n\n /**\n * @property {ButtonSeverity} severity\n * @description\n * Defines the visual importance or style of the button.\n * - `'primary'`: Default, neutral action.\n * - `'secondary'`: Secondary option.\n * - `'danger'`: Destructive or warning actions.\n *\n * @default `'secondary'`\n */\n @Input() severity: ButtonSeverity = 'primary';\n\n /**\n * @property {'text' | 'outlined'} variant\n * @description\n * Defines the variant of the button.\n * - `'text'`: Text-only button.\n * - `'outlined'`: Outlined button.\n *\n * @default `undefined`\n */\n @Input() variant?: Variant;\n\n /**\n * @property {boolean} link\n * @description\n * When true, the button will be styled as a link (text only with underline).\n *\n * @default false\n */\n @Input() link = false;\n\n /**\n * @property {string} icon\n * @description\n * - If `label` is provided, the icon is displayed to the left.\n * - If `label` is empty, the button is rendered as an icon-only button.\n *\n * @default `undefined`\n */\n @Input() icon?: string;\n\n /**\n * @event clicked\n * @description\n * Emits when the button is activated via click or keyboard (Enter/Space),\n * unless the button is disabled.\n *\n * @example\n * ```html\n * <tk-button label=\"Click me\" (clicked)=\"handleClick()\"></tk-button>\n * ```\n */\n @Output() clicked = new EventEmitter<'mouse' | 'keyboard'>();\n\n /**\n * @method onButtonClick\n * @description\n * Handles the native click event. Emits the `clicked` event if the button\n * is not disabled.\n */\n onButtonClick(): void {\n if (!this.disabled) this.clicked.emit('mouse');\n }\n}\n","<p-button\n class=\"tk-button\"\n [label]=\"label\"\n [disabled]=\"disabled\"\n [type]=\"type\"\n [severity]=\"link ? null : severity\"\n [variant]=\"variant\"\n [link]=\"link\"\n (click)=\"onButtonClick()\"\n (keydown.enter)=\"onButtonClick()\"\n (keydown.space)=\"onButtonClick()\">\n\n @if (icon) {\n <tk-icon [icon]=\"icon\"></tk-icon>\n }\n</p-button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BG;MAQU,eAAe,CAAA;AAP5B,IAAA,WAAA,GAAA;AAoBE;;;;;;;AAOG;QACM,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEzB;;;;;;;;AAQG;QACM,IAAI,CAAA,IAAA,GAAwB,QAAQ;AAE7C;;;;;;;;;AASG;QACM,IAAQ,CAAA,QAAA,GAAmB,SAAS;AAa7C;;;;;;AAMG;QACM,IAAI,CAAA,IAAA,GAAG,KAAK;AAYrB;;;;;;;;;;AAUG;AACO,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,YAAY,EAAwB;AAW7D;AATC;;;;;AAKG;IACH,aAAa,GAAA;QACX,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;;+GAhGrC,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,ECzC5B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,sXAgBA,EDqBY,MAAA,EAAA,CAAA,6zBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,kbAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,YAAA,EAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAI1B,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,cACT,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,sXAAA,EAAA,MAAA,EAAA,CAAA,6zBAAA,CAAA,EAAA;8BAe7B,KAAK,EAAA,CAAA;sBAAb;gBAUQ,QAAQ,EAAA,CAAA;sBAAhB;gBAWQ,IAAI,EAAA,CAAA;sBAAZ;gBAYQ,QAAQ,EAAA,CAAA;sBAAhB;gBAWQ,OAAO,EAAA,CAAA;sBAAf;gBASQ,IAAI,EAAA,CAAA;sBAAZ;gBAUQ,IAAI,EAAA,CAAA;sBAAZ;gBAaS,OAAO,EAAA,CAAA;sBAAhB;;;AEhIH;;AAEG;;;;"}
1
+ {"version":3,"file":"tekus-design-system-components-button.mjs","sources":["../../../projects/design-system/components/button/src/button.component.ts","../../../projects/design-system/components/button/src/button.component.html","../../../projects/design-system/components/button/tekus-design-system-components-button.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { ButtonModule } from 'primeng/button';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { Tooltip } from 'primeng/tooltip';\n\n\nexport type ButtonSeverity = 'primary' | 'secondary' | 'danger';\nexport type Variant = 'text' | 'outlined';\n/**\n * @component ButtonComponent\n * @description\n * Atomic button component that provides a reusable and customizable button element\n * across the application.\n * It uses PrimeNG’s `ButtonModule` under the hood and allows setting different visual\n * variants (severity), button types, and disabled states.\n *\n * This component ensures consistent design and behavior in all button interactions.\n * It is accessible via both mouse clicks and keyboard actions (Enter/Space).\n *\n * @usage\n * ```html\n * <tk-button\n * label=\"Save\"\n * [severity]=\"'primary'\"\n * [type]=\"'submit'\"\n * (clicked)=\"handleSave()\">\n * </tk-button>\n *\n * <tk-button\n * label=\"Cancel\"\n * [severity]=\"'secondary'\"\n * [disabled]=\"true\">\n * </tk-button>\n * ```\n */\n@Component({\n selector: 'tk-button',\n standalone: true,\n imports: [ButtonModule, IconComponent, Tooltip],\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss'],\n})\nexport class ButtonComponent {\n /**\n * @property {string} label\n * @description\n * Text displayed inside the button.\n *\n * @description\n * Text displayed inside the button.\n *\n * @default `undefined`\n */\n @Input() label?: string;\n\n /**\n * @property {boolean} disabled\n * @description\n * Disables the button, preventing user interaction and applying a visual style\n * that indicates the inactive state.\n *\n * @default `false`\n */\n @Input() disabled = false;\n\n /**\n * @property {'button' | 'submit'} type\n * @description\n * Defines the button’s HTML type attribute.\n * - `'button'`: Standard clickable button (default).\n * - `'submit'`: Used to submit forms.\n *\n * @default `'button'`\n */\n @Input() type: 'button' | 'submit' = 'button';\n\n /**\n * @property {ButtonSeverity} severity\n * @description\n * Defines the visual importance or style of the button.\n * - `'primary'`: Default, neutral action.\n * - `'secondary'`: Secondary option.\n * - `'danger'`: Destructive or warning actions.\n *\n * @default `'secondary'`\n */\n @Input() severity: ButtonSeverity = 'primary';\n\n /**\n * @property {'text' | 'outlined'} variant\n * @description\n * Defines the variant of the button.\n * - `'text'`: Text-only button.\n * - `'outlined'`: Outlined button.\n *\n * @default `undefined`\n */\n @Input() variant?: Variant;\n\n /**\n * @property {boolean} link\n * @description\n * When true, the button will be styled as a link (text only with underline).\n *\n * @default false\n */\n @Input() link = false;\n\n /**\n * @property {string} icon\n * @description\n * - If `label` is provided, the icon is displayed to the left.\n * - If `label` is empty, the button is rendered as an icon-only button.\n *\n * @default `undefined`\n */\n @Input() icon?: string;\n\n /**\n * @event clicked\n * @description\n * Emits when the button is activated via click or keyboard (Enter/Space),\n * unless the button is disabled.\n *\n * @example\n * ```html\n * <tk-button label=\"Click me\" (clicked)=\"handleClick()\"></tk-button>\n * ```\n */\n @Output() clicked = new EventEmitter<'mouse' | 'keyboard'>();\n\n /**\n * @property {string} tooltipText\n * @description\n * Tooltip text to be displayed when the user hovers over the button.\n *\n * @default `undefined`\n */\n @Input() tooltipText?: string;\n\n /**\n * @method onButtonClick\n * @description\n * Handles the native click event. Emits the `clicked` event if the button\n * is not disabled.\n */\n onButtonClick(): void {\n if (!this.disabled) this.clicked.emit('mouse');\n }\n}\n","<p-button\n class=\"tk-button\"\n [label]=\"label\"\n [disabled]=\"disabled\"\n [type]=\"type\"\n [severity]=\"link ? null : severity\"\n [variant]=\"variant\"\n [link]=\"link\"\n [pTooltip]=\"tooltipText\"\n tooltipPosition=\"top\"\n (click)=\"onButtonClick()\"\n (keydown.enter)=\"onButtonClick()\"\n (keydown.space)=\"onButtonClick()\">\n\n @if (icon) {\n <tk-icon [icon]=\"icon\"></tk-icon>\n }\n</p-button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BG;MAQU,eAAe,CAAA;AAP5B,IAAA,WAAA,GAAA;AAoBE;;;;;;;AAOG;QACM,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEzB;;;;;;;;AAQG;QACM,IAAI,CAAA,IAAA,GAAwB,QAAQ;AAE7C;;;;;;;;;AASG;QACM,IAAQ,CAAA,QAAA,GAAmB,SAAS;AAa7C;;;;;;AAMG;QACM,IAAI,CAAA,IAAA,GAAG,KAAK;AAYrB;;;;;;;;;;AAUG;AACO,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,YAAY,EAAwB;AAoB7D;AATC;;;;;AAKG;IACH,aAAa,GAAA;QACX,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;;+GAzGrC,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,wQC1C5B,+aAkBA,EAAA,MAAA,EAAA,CAAA,22BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDoBY,YAAY,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,SAAA,EAAA,MAAA,EAAA,OAAA,EAAA,OAAA,EAAA,UAAA,EAAA,SAAA,EAAA,aAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,SAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,EAAA,eAAA,EAAA,WAAA,EAAA,WAAA,EAAA,OAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,aAAa,2MAAE,OAAO,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,eAAA,EAAA,mBAAA,EAAA,eAAA,EAAA,QAAA,EAAA,WAAA,EAAA,WAAA,EAAA,MAAA,EAAA,aAAA,EAAA,cAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAInC,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;+BACE,WAAW,EAAA,UAAA,EACT,IAAI,EACP,OAAA,EAAA,CAAC,YAAY,EAAE,aAAa,EAAE,OAAO,CAAC,EAAA,QAAA,EAAA,+aAAA,EAAA,MAAA,EAAA,CAAA,22BAAA,CAAA,EAAA;8BAetC,KAAK,EAAA,CAAA;sBAAb;gBAUQ,QAAQ,EAAA,CAAA;sBAAhB;gBAWQ,IAAI,EAAA,CAAA;sBAAZ;gBAYQ,QAAQ,EAAA,CAAA;sBAAhB;gBAWQ,OAAO,EAAA,CAAA;sBAAf;gBASQ,IAAI,EAAA,CAAA;sBAAZ;gBAUQ,IAAI,EAAA,CAAA;sBAAZ;gBAaS,OAAO,EAAA,CAAA;sBAAhB;gBASQ,WAAW,EAAA,CAAA;sBAAnB;;;AE1IH;;AAEG;;;;"}
@@ -0,0 +1,146 @@
1
+ import { CommonModule } from '@angular/common';
2
+ import * as i0 from '@angular/core';
3
+ import { inject, model, input, signal, Component } from '@angular/core';
4
+ import * as i1 from '@angular/forms';
5
+ import { NgControl, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
6
+ import { Subscription } from 'rxjs';
7
+ import * as i2 from 'primeng/checkbox';
8
+ import { CheckboxModule } from 'primeng/checkbox';
9
+ import * as i3 from 'primeng/message';
10
+ import { MessageModule } from 'primeng/message';
11
+
12
+ class CheckboxComponent {
13
+ constructor() {
14
+ this.ngControl = inject(NgControl, { self: true, optional: true });
15
+ /**
16
+ * @property {ModelSignal<any>} model
17
+ * @description
18
+ * The value of the checkbox model (checked state or array of values).
19
+ * Supports two-way binding via signals.
20
+ */
21
+ this.model = model();
22
+ /**
23
+ * @property {InputSignal<any>} value
24
+ * @description
25
+ * The value of the checkbox itself (used when part of a group).
26
+ */
27
+ this.value = input();
28
+ /**
29
+ * @property {InputSignal<string>} label
30
+ * @description
31
+ * Label displayed next to the checkbox.
32
+ */
33
+ this.label = input('');
34
+ /**
35
+ * @property {InputSignal<string>} name
36
+ * @description
37
+ * Name attribute for the checkbox.
38
+ */
39
+ this.name = input('');
40
+ /**
41
+ * @property {InputSignal<string>} inputId
42
+ * @description
43
+ * HTML id attribute for the checkbox input.
44
+ */
45
+ this.inputId = input('');
46
+ /**
47
+ * @property {InputSignal<boolean>} binary
48
+ * @description
49
+ * Boolean property to indicate if the checkbox is a binary toggle.
50
+ * @default false
51
+ */
52
+ this.binary = input(false);
53
+ /**
54
+ * @property {InputSignal<FormControl>} control
55
+ * @description
56
+ * External FormControl used to read/set the checkbox value.
57
+ * If not provided, an internal FormControl is created.
58
+ */
59
+ this.control = input(new FormControl());
60
+ /**
61
+ * @property {InputSignal<string>} errorMessage
62
+ * @description
63
+ * Message to display when the control is invalid and touched.
64
+ */
65
+ this.errorMessage = input('');
66
+ /**
67
+ * @property {boolean} disabled
68
+ * @description
69
+ * Whether the checkbox is disabled.
70
+ */
71
+ this.disabled = signal(false);
72
+ this.onChange = () => { };
73
+ this.onTouched = () => { };
74
+ this.subscription = new Subscription();
75
+ if (this.ngControl) {
76
+ this.ngControl.valueAccessor = this;
77
+ }
78
+ }
79
+ get effectiveControl() {
80
+ return this.ngControl?.control || this.control();
81
+ }
82
+ ngOnInit() {
83
+ const control = this.effectiveControl;
84
+ if (control.value !== undefined) {
85
+ this.model.set(control.value);
86
+ }
87
+ // Sync initial disabled state
88
+ this.disabled.set(control.disabled);
89
+ this.subscription.add(control.valueChanges.subscribe(val => {
90
+ if (val !== this.model()) {
91
+ this.model.set(val);
92
+ this.onChange(val);
93
+ }
94
+ }));
95
+ // Sync disabled state on status change
96
+ this.subscription.add(control.statusChanges.subscribe(() => {
97
+ this.disabled.set(control.disabled);
98
+ }));
99
+ }
100
+ ngOnDestroy() {
101
+ this.subscription.unsubscribe();
102
+ }
103
+ writeValue(value) {
104
+ this.model.set(value);
105
+ this.control().setValue(value, { emitEvent: false });
106
+ }
107
+ registerOnChange(fn) {
108
+ this.onChange = fn;
109
+ }
110
+ registerOnTouched(fn) {
111
+ this.onTouched = fn;
112
+ }
113
+ setDisabledState(isDisabled) {
114
+ this.disabled.set(isDisabled);
115
+ if (isDisabled) {
116
+ this.control().disable({ emitEvent: false });
117
+ }
118
+ else {
119
+ this.control().enable({ emitEvent: false });
120
+ }
121
+ }
122
+ onModelChange(value) {
123
+ this.model.set(value);
124
+ this.onChange(value);
125
+ this.effectiveControl.setValue(value);
126
+ this.effectiveControl.markAsDirty();
127
+ this.onTouched();
128
+ }
129
+ onBlur() {
130
+ this.onTouched();
131
+ this.effectiveControl.markAsTouched();
132
+ }
133
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
134
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CheckboxComponent, isStandalone: true, selector: "tk-checkbox", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, binary: { classPropertyName: "binary", publicName: "binary", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange" }, ngImport: i0, template: "<div class=\"tk-checkbox-wrapper\">\n <div class=\"tk-checkbox-group\" [class.tk-disabled]=\"disabled()\">\n <p-checkbox\n [inputId]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [binary]=\"binary()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"model()\"\n (ngModelChange)=\"onModelChange($event)\"\n [class.ng-invalid]=\"effectiveControl.invalid\"\n [class.ng-dirty]=\"effectiveControl.dirty\"\n [class.ng-touched]=\"effectiveControl.touched\">\n </p-checkbox>\n @if(label()){\n <label [for]=\"inputId()\" class=\"tk-checkbox-label\"> {{ label() }} </label>\n }\n </div>\n \n <div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n }\n </div>\n </div>\n</div>\n", styles: [":host ::ng-deep .tk-checkbox-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-checkbox-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-checkbox-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-checkbox-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-checkbox-label{margin-top:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .p-checkbox.p-disabled .p-checkbox-icon{color:var(--tk-color-base-surface-300, #d2d2d2)!important}:host ::ng-deep p-checkbox.ng-invalid.ng-touched .p-checkbox-box,:host ::ng-deep p-checkbox.ng-invalid.ng-dirty .p-checkbox-box{border-color:var(--tk-color-base-red-700, #cf2604)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
135
+ }
136
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CheckboxComponent, decorators: [{
137
+ type: Component,
138
+ args: [{ selector: 'tk-checkbox', imports: [CommonModule, ReactiveFormsModule, FormsModule, CheckboxModule, MessageModule], template: "<div class=\"tk-checkbox-wrapper\">\n <div class=\"tk-checkbox-group\" [class.tk-disabled]=\"disabled()\">\n <p-checkbox\n [inputId]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [binary]=\"binary()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"model()\"\n (ngModelChange)=\"onModelChange($event)\"\n [class.ng-invalid]=\"effectiveControl.invalid\"\n [class.ng-dirty]=\"effectiveControl.dirty\"\n [class.ng-touched]=\"effectiveControl.touched\">\n </p-checkbox>\n @if(label()){\n <label [for]=\"inputId()\" class=\"tk-checkbox-label\"> {{ label() }} </label>\n }\n </div>\n \n <div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n }\n </div>\n </div>\n</div>\n", styles: [":host ::ng-deep .tk-checkbox-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-checkbox-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-checkbox-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-checkbox-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-checkbox-label{margin-top:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .p-checkbox.p-disabled .p-checkbox-icon{color:var(--tk-color-base-surface-300, #d2d2d2)!important}:host ::ng-deep p-checkbox.ng-invalid.ng-touched .p-checkbox-box,:host ::ng-deep p-checkbox.ng-invalid.ng-dirty .p-checkbox-box{border-color:var(--tk-color-base-red-700, #cf2604)}\n"] }]
139
+ }], ctorParameters: () => [] });
140
+
141
+ /**
142
+ * Generated bundle index. Do not edit.
143
+ */
144
+
145
+ export { CheckboxComponent };
146
+ //# sourceMappingURL=tekus-design-system-components-checkbox.mjs.map