@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.
- package/assets/readme-images/autocomplete-default.svg +8 -0
- package/assets/readme-images/autocomplete-disabled.svg +9 -0
- package/assets/readme-images/autocomplete-focus.svg +11 -0
- package/assets/readme-images/paginator-options.svg +22 -0
- package/assets/readme-images/paginator.svg +15 -0
- package/assets/readme-images/select-default.svg +9 -0
- package/assets/readme-images/select-disabled.svg +10 -0
- package/assets/readme-images/select-filled.svg +11 -0
- package/assets/readme-images/select-options.svg +18 -0
- package/assets/readme-images/table-basic.svg +108 -0
- package/assets/readme-images/table-example.svg +67 -0
- package/assets/readme-images/table-sorting.svg +111 -0
- package/assets/readme-images/tk-checkbox-default-label.svg +5 -0
- package/assets/readme-images/tk-checkbox-default.svg +4 -0
- package/assets/readme-images/tk-checkbox-disabled.svg +11 -0
- package/assets/readme-images/tk-checkbox-selected.svg +6 -0
- package/assets/readme-images/tk-tooltip.svg +19 -0
- package/assets/readme-images/toolbar-active.svg +12 -0
- package/assets/readme-images/toolbar-default.svg +5 -0
- package/assets/readme-images/toolbar-options.svg +30 -0
- package/components/autocomplete/index.d.ts +5 -0
- package/components/autocomplete/public-api.d.ts +1 -0
- package/components/autocomplete/src/autocomplete.component.d.ts +96 -0
- package/components/button/src/button.component.d.ts +9 -1
- package/components/checkbox/index.d.ts +5 -0
- package/components/checkbox/public-api.d.ts +1 -0
- package/components/checkbox/src/checkbox.component.d.ts +78 -0
- package/components/pagination/index.d.ts +5 -0
- package/components/pagination/public-api.d.ts +1 -0
- package/components/pagination/src/pagination.component.d.ts +109 -0
- package/components/select/index.d.ts +5 -0
- package/components/select/public-api.d.ts +1 -0
- package/components/select/src/select.component.d.ts +118 -0
- package/components/table/index.d.ts +5 -0
- package/components/table/public-api.d.ts +2 -0
- package/components/table/src/table.component.d.ts +52 -0
- package/components/table/src/table.interface.d.ts +14 -0
- package/components/toolbar/index.d.ts +5 -0
- package/components/toolbar/public-api.d.ts +1 -0
- package/components/toolbar/src/toolbar.component.d.ts +99 -0
- package/components/tooltip/index.d.ts +5 -0
- package/components/tooltip/public-api.d.ts +1 -0
- package/components/tooltip/src/tooltip.component.d.ts +35 -0
- package/fesm2022/tekus-design-system-components-autocomplete.mjs +157 -0
- package/fesm2022/tekus-design-system-components-autocomplete.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-button.mjs +6 -3
- package/fesm2022/tekus-design-system-components-button.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-checkbox.mjs +146 -0
- package/fesm2022/tekus-design-system-components-checkbox.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-date-picker.mjs +2 -2
- package/fesm2022/tekus-design-system-components-date-picker.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-fallback-view.mjs +1 -1
- package/fesm2022/tekus-design-system-components-fallback-view.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-modal.mjs +1 -1
- package/fesm2022/tekus-design-system-components-modal.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-multiselect.mjs +2 -2
- package/fesm2022/tekus-design-system-components-multiselect.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-pagination.mjs +162 -0
- package/fesm2022/tekus-design-system-components-pagination.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-select.mjs +193 -0
- package/fesm2022/tekus-design-system-components-select.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-table.mjs +134 -0
- package/fesm2022/tekus-design-system-components-table.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-toolbar.mjs +126 -0
- package/fesm2022/tekus-design-system-components-toolbar.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-tooltip.mjs +37 -0
- package/fesm2022/tekus-design-system-components-tooltip.mjs.map +1 -0
- package/fesm2022/tekus-design-system-core-types.mjs +25 -0
- package/fesm2022/tekus-design-system-core-types.mjs.map +1 -1
- package/fesm2022/tekus-design-system-core.mjs +25 -0
- package/fesm2022/tekus-design-system-core.mjs.map +1 -1
- 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 @@
|
|
|
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 @@
|
|
|
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,
|
|
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":"
|
|
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
|