@tekus/design-system 5.18.0 → 5.20.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/tokens/tk-foundations.json +3 -3
- package/components/checkbox/src/checkbox.component.d.ts +33 -2
- package/components/drawer/index.d.ts +5 -0
- package/components/drawer/public-api.d.ts +3 -0
- package/components/drawer/src/drawer.component.d.ts +105 -0
- package/components/drawer/src/drawer.types.d.ts +22 -0
- package/components/drawer/src/services/drawer.service.d.ts +15 -0
- package/components/icon/core/icons/arrows-rotate.d.ts +2 -0
- package/components/icon/core/icons/edit.d.ts +2 -0
- package/components/icon/core/icons/globe-pointer.d.ts +2 -0
- package/components/icon/core/icons/grip-vertical.d.ts +2 -0
- package/components/modal/src/modal.component.d.ts +86 -67
- package/components/modal/src/modal.types.d.ts +22 -2
- package/components/modal/src/services/modal.service.d.ts +15 -0
- package/components/multiselect/src/multiselect.component.d.ts +115 -19
- package/components/panel/index.d.ts +5 -0
- package/components/panel/public-api.d.ts +1 -0
- package/components/panel/src/panel.component.d.ts +82 -0
- package/components/radio-button/src/radio-button.component.d.ts +33 -3
- package/components/table/src/table.component.d.ts +45 -1
- package/components/table/src/table.interface.d.ts +1 -1
- package/components/toolbar/src/toolbar.component.d.ts +55 -1
- package/core/types/public-api.d.ts +1 -0
- package/core/types/src/interception/index.d.ts +1 -0
- package/core/types/src/interception/interception.types.d.ts +21 -0
- package/fesm2022/tekus-design-system-components-checkbox.mjs +52 -16
- package/fesm2022/tekus-design-system-components-checkbox.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-drawer.mjs +280 -0
- package/fesm2022/tekus-design-system-components-drawer.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-icon.mjs +56 -0
- package/fesm2022/tekus-design-system-components-icon.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-modal.mjs +190 -89
- package/fesm2022/tekus-design-system-components-modal.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-multiselect.mjs +164 -45
- package/fesm2022/tekus-design-system-components-multiselect.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-panel.mjs +102 -0
- package/fesm2022/tekus-design-system-components-panel.mjs.map +1 -0
- package/fesm2022/tekus-design-system-components-radio-button.mjs +53 -18
- package/fesm2022/tekus-design-system-components-radio-button.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-select.mjs +3 -8
- package/fesm2022/tekus-design-system-components-select.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-table.mjs +72 -5
- package/fesm2022/tekus-design-system-components-table.mjs.map +1 -1
- package/fesm2022/tekus-design-system-components-toolbar.mjs +72 -4
- package/fesm2022/tekus-design-system-components-toolbar.mjs.map +1 -1
- package/fesm2022/tekus-design-system-core-types.mjs +31 -1
- package/fesm2022/tekus-design-system-core-types.mjs.map +1 -1
- package/fesm2022/tekus-design-system-core.mjs +31 -1
- package/fesm2022/tekus-design-system-core.mjs.map +1 -1
- package/package.json +13 -5
- package/styles/variables.css +3 -3
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CommonModule } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, model, input,
|
|
3
|
+
import { inject, model, input, Component } from '@angular/core';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
5
|
import { NgControl, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
6
6
|
import { Subscription } from 'rxjs';
|
|
@@ -10,8 +10,13 @@ import * as i3 from 'primeng/message';
|
|
|
10
10
|
import { MessageModule } from 'primeng/message';
|
|
11
11
|
|
|
12
12
|
class CheckboxComponent {
|
|
13
|
+
/**
|
|
14
|
+
* Initialize the component and register it as a ControlValueAccessor.
|
|
15
|
+
*/
|
|
13
16
|
constructor() {
|
|
17
|
+
/** Internal references and injections */
|
|
14
18
|
this.ngControl = inject(NgControl, { self: true, optional: true });
|
|
19
|
+
/** Properties and Signals */
|
|
15
20
|
/**
|
|
16
21
|
* @property {ModelSignal<any>} model
|
|
17
22
|
* @description
|
|
@@ -63,12 +68,19 @@ class CheckboxComponent {
|
|
|
63
68
|
* Message to display when the control is invalid and touched.
|
|
64
69
|
*/
|
|
65
70
|
this.errorMessage = input('');
|
|
71
|
+
/**
|
|
72
|
+
* @property {ModelSignal<boolean>} indeterminate
|
|
73
|
+
* @description
|
|
74
|
+
* Indeterminate state of the checkbox (reactive).
|
|
75
|
+
* Useful for parent checkboxes in lists with partial selection.
|
|
76
|
+
*/
|
|
77
|
+
this.indeterminate = model(false);
|
|
66
78
|
/**
|
|
67
79
|
* @property {boolean} disabled
|
|
68
80
|
* @description
|
|
69
81
|
* Whether the checkbox is disabled.
|
|
70
82
|
*/
|
|
71
|
-
this.disabled =
|
|
83
|
+
this.disabled = model(false);
|
|
72
84
|
this.onChange = () => { };
|
|
73
85
|
this.onTouched = () => { };
|
|
74
86
|
this.subscription = new Subscription();
|
|
@@ -76,40 +88,52 @@ class CheckboxComponent {
|
|
|
76
88
|
this.ngControl.valueAccessor = this;
|
|
77
89
|
}
|
|
78
90
|
}
|
|
91
|
+
/** Component Methods */
|
|
79
92
|
get effectiveControl() {
|
|
80
93
|
return this.ngControl?.control || this.control();
|
|
81
94
|
}
|
|
82
95
|
ngOnInit() {
|
|
83
96
|
const control = this.effectiveControl;
|
|
84
|
-
if (control.value !== undefined) {
|
|
97
|
+
if (control.value !== undefined && control.value !== null) {
|
|
85
98
|
this.model.set(control.value);
|
|
86
99
|
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
}
|
|
94
|
-
}));
|
|
95
|
-
// Sync disabled state on status change
|
|
100
|
+
if (this.control() === control && this.disabled()) {
|
|
101
|
+
control.disable({ emitEvent: false });
|
|
102
|
+
}
|
|
103
|
+
else {
|
|
104
|
+
this.disabled.set(control.disabled);
|
|
105
|
+
}
|
|
96
106
|
this.subscription.add(control.statusChanges.subscribe(() => {
|
|
97
107
|
this.disabled.set(control.disabled);
|
|
98
108
|
}));
|
|
109
|
+
this.subscription.add(control.valueChanges.subscribe(value => {
|
|
110
|
+
this.model.set(value);
|
|
111
|
+
}));
|
|
99
112
|
}
|
|
100
113
|
ngOnDestroy() {
|
|
101
114
|
this.subscription.unsubscribe();
|
|
102
115
|
}
|
|
116
|
+
/**
|
|
117
|
+
* Implementation of ControlValueAccessor: Writes a new value from the form.
|
|
118
|
+
*/
|
|
103
119
|
writeValue(value) {
|
|
104
120
|
this.model.set(value);
|
|
105
|
-
this.control().setValue(value, { emitEvent: false });
|
|
106
121
|
}
|
|
122
|
+
/**
|
|
123
|
+
* Implementation of ControlValueAccessor: Registers a callback for change events.
|
|
124
|
+
*/
|
|
107
125
|
registerOnChange(fn) {
|
|
108
126
|
this.onChange = fn;
|
|
109
127
|
}
|
|
128
|
+
/**
|
|
129
|
+
* Implementation of ControlValueAccessor: Registers a callback for touched events.
|
|
130
|
+
*/
|
|
110
131
|
registerOnTouched(fn) {
|
|
111
132
|
this.onTouched = fn;
|
|
112
133
|
}
|
|
134
|
+
/**
|
|
135
|
+
* Implementation of ControlValueAccessor: Sets the disabled state.
|
|
136
|
+
*/
|
|
113
137
|
setDisabledState(isDisabled) {
|
|
114
138
|
this.disabled.set(isDisabled);
|
|
115
139
|
if (isDisabled) {
|
|
@@ -119,23 +143,35 @@ class CheckboxComponent {
|
|
|
119
143
|
this.control().enable({ emitEvent: false });
|
|
120
144
|
}
|
|
121
145
|
}
|
|
146
|
+
/**
|
|
147
|
+
* Handle model change events from the template.
|
|
148
|
+
*/
|
|
122
149
|
onModelChange(value) {
|
|
123
150
|
this.model.set(value);
|
|
124
151
|
this.onChange(value);
|
|
125
|
-
this.effectiveControl.setValue(value);
|
|
152
|
+
this.effectiveControl.setValue(value, { emitEvent: false });
|
|
126
153
|
this.effectiveControl.markAsDirty();
|
|
127
154
|
this.onTouched();
|
|
128
155
|
}
|
|
156
|
+
/**
|
|
157
|
+
* Handle blur events to trigger onTouched.
|
|
158
|
+
*/
|
|
129
159
|
onBlur() {
|
|
130
160
|
this.onTouched();
|
|
131
161
|
this.effectiveControl.markAsTouched();
|
|
132
162
|
}
|
|
133
163
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
134
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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
|
|
164
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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 }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", indeterminate: "indeterminateChange", disabled: "disabledChange" }, 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 [indeterminate]=\"indeterminate()\"\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 @if (\n effectiveControl.invalid &&\n (effectiveControl.dirty || effectiveControl.touched) &&\n errorMessage()\n ) {\n <div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n errorMessage()\n }}</p-message>\n </div>\n </div>\n }\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
165
|
}
|
|
136
166
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
137
167
|
type: Component,
|
|
138
|
-
args: [{ selector: 'tk-checkbox', imports: [
|
|
168
|
+
args: [{ selector: 'tk-checkbox', imports: [
|
|
169
|
+
CommonModule,
|
|
170
|
+
ReactiveFormsModule,
|
|
171
|
+
FormsModule,
|
|
172
|
+
CheckboxModule,
|
|
173
|
+
MessageModule,
|
|
174
|
+
], 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 [indeterminate]=\"indeterminate()\"\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 @if (\n effectiveControl.invalid &&\n (effectiveControl.dirty || effectiveControl.touched) &&\n errorMessage()\n ) {\n <div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n errorMessage()\n }}</p-message>\n </div>\n </div>\n }\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
175
|
}], ctorParameters: () => [] });
|
|
140
176
|
|
|
141
177
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-components-checkbox.mjs","sources":["../../../projects/design-system/components/checkbox/src/checkbox.component.ts","../../../projects/design-system/components/checkbox/src/checkbox.component.html","../../../projects/design-system/components/checkbox/tekus-design-system-components-checkbox.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, input, model, signal, OnInit, inject, OnDestroy } from '@angular/core';\nimport { ControlValueAccessor, FormControl, ReactiveFormsModule, NgControl, FormsModule } from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { CheckboxModule } from 'primeng/checkbox';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n selector: 'tk-checkbox',\n imports: [CommonModule, ReactiveFormsModule, FormsModule, CheckboxModule, MessageModule],\n templateUrl: './checkbox.component.html',\n styleUrl: './checkbox.component.scss'\n})\nexport class CheckboxComponent implements ControlValueAccessor, OnInit, OnDestroy {\n readonly ngControl = inject(NgControl, { self: true, optional: true });\n\n constructor() {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n /**\n * @property {ModelSignal<any>} model\n * @description\n * The value of the checkbox model (checked state or array of values).\n * Supports two-way binding via signals.\n */\n model = model<unknown>();\n\n /**\n * @property {InputSignal<any>} value\n * @description\n * The value of the checkbox itself (used when part of a group).\n */\n value = input<unknown>();\n\n /**\n * @property {InputSignal<string>} label\n * @description\n * Label displayed next to the checkbox.\n */\n label = input<string>('');\n\n /**\n * @property {InputSignal<string>} name\n * @description\n * Name attribute for the checkbox.\n */\n name = input<string>('');\n\n /**\n * @property {InputSignal<string>} inputId\n * @description\n * HTML id attribute for the checkbox input.\n */\n inputId = input<string>('');\n\n /**\n * @property {InputSignal<boolean>} binary\n * @description\n * Boolean property to indicate if the checkbox is a binary toggle.\n * @default false\n */\n binary = input<boolean>(false);\n\n /**\n * @property {InputSignal<FormControl>} control\n * @description\n * External FormControl used to read/set the checkbox value.\n * If not provided, an internal FormControl is created.\n */\n control = input<FormControl>(new FormControl());\n\n /**\n * @property {InputSignal<string>} errorMessage\n * @description\n * Message to display when the control is invalid and touched.\n */\n errorMessage = input<string>('');\n\n /**\n * @property {boolean} disabled\n * @description\n * Whether the checkbox is disabled.\n */\n disabled = signal<boolean>(false);\n\n get effectiveControl(): FormControl {\n return (this.ngControl?.control as FormControl) || this.control();\n }\n\n onChange: (value: unknown) => void = () => {};\n onTouched: () => void = () => {};\n private readonly subscription = new Subscription();\n\n ngOnInit(): void {\n const control = this.effectiveControl;\n if (control.value !== undefined) {\n this.model.set(control.value);\n }\n\n // Sync initial disabled state\n this.disabled.set(control.disabled);\n\n this.subscription.add(\n control.valueChanges.subscribe(val => {\n if (val !== this.model()) {\n this.model.set(val);\n this.onChange(val);\n }\n })\n );\n\n // Sync disabled state on status change\n this.subscription.add(\n control.statusChanges.subscribe(() => {\n this.disabled.set(control.disabled);\n })\n );\n }\n\n ngOnDestroy(): void {\n this.subscription.unsubscribe();\n }\n\n writeValue(value: unknown): void {\n this.model.set(value);\n this.control().setValue(value, { emitEvent: false });\n }\n\n registerOnChange(fn: (value: unknown) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState?(isDisabled: boolean): void {\n this.disabled.set(isDisabled);\n if (isDisabled) {\n this.control().disable({ emitEvent: false });\n } else {\n this.control().enable({ emitEvent: false });\n }\n }\n\n onModelChange(value: unknown): void {\n this.model.set(value);\n this.onChange(value);\n this.effectiveControl.setValue(value);\n this.effectiveControl.markAsDirty();\n this.onTouched();\n }\n\n onBlur(): void {\n this.onTouched();\n this.effectiveControl.markAsTouched();\n }\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tekus-design-system-components-checkbox.mjs","sources":["../../../projects/design-system/components/checkbox/src/checkbox.component.ts","../../../projects/design-system/components/checkbox/src/checkbox.component.html","../../../projects/design-system/components/checkbox/tekus-design-system-components-checkbox.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n Component,\n input,\n model,\n OnInit,\n inject,\n OnDestroy,\n} from '@angular/core';\nimport {\n ControlValueAccessor,\n FormControl,\n ReactiveFormsModule,\n NgControl,\n FormsModule,\n} from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { CheckboxModule } from 'primeng/checkbox';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n selector: 'tk-checkbox',\n imports: [\n CommonModule,\n ReactiveFormsModule,\n FormsModule,\n CheckboxModule,\n MessageModule,\n ],\n templateUrl: './checkbox.component.html',\n styleUrl: './checkbox.component.scss',\n})\nexport class CheckboxComponent\n implements ControlValueAccessor, OnInit, OnDestroy\n{\n /** Internal references and injections */\n readonly ngControl = inject(NgControl, { self: true, optional: true });\n\n /**\n * Initialize the component and register it as a ControlValueAccessor.\n */\n constructor() {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n /** Properties and Signals */\n\n /**\n * @property {ModelSignal<any>} model\n * @description\n * The value of the checkbox model (checked state or array of values).\n * Supports two-way binding via signals.\n */\n model = model<unknown>();\n\n /**\n * @property {InputSignal<any>} value\n * @description\n * The value of the checkbox itself (used when part of a group).\n */\n value = input<unknown>();\n\n /**\n * @property {InputSignal<string>} label\n * @description\n * Label displayed next to the checkbox.\n */\n label = input<string>('');\n\n /**\n * @property {InputSignal<string>} name\n * @description\n * Name attribute for the checkbox.\n */\n name = input<string>('');\n\n /**\n * @property {InputSignal<string>} inputId\n * @description\n * HTML id attribute for the checkbox input.\n */\n inputId = input<string>('');\n\n /**\n * @property {InputSignal<boolean>} binary\n * @description\n * Boolean property to indicate if the checkbox is a binary toggle.\n * @default false\n */\n binary = input<boolean>(false);\n\n /**\n * @property {InputSignal<FormControl>} control\n * @description\n * External FormControl used to read/set the checkbox value.\n * If not provided, an internal FormControl is created.\n */\n control = input<FormControl>(new FormControl());\n\n /**\n * @property {InputSignal<string>} errorMessage\n * @description\n * Message to display when the control is invalid and touched.\n */\n errorMessage = input<string>('');\n\n /**\n * @property {ModelSignal<boolean>} indeterminate\n * @description\n * Indeterminate state of the checkbox (reactive).\n * Useful for parent checkboxes in lists with partial selection.\n */\n indeterminate = model<boolean>(false);\n\n /**\n * @property {boolean} disabled\n * @description\n * Whether the checkbox is disabled.\n */\n disabled = model<boolean>(false);\n\n /** Component Methods */\n\n get effectiveControl(): FormControl {\n return (this.ngControl?.control as FormControl) || this.control();\n }\n\n onChange: (value: unknown) => void = () => {};\n onTouched: () => void = () => {};\n private readonly subscription = new Subscription();\n\n ngOnInit(): void {\n const control = this.effectiveControl;\n\n if (control.value !== undefined && control.value !== null) {\n this.model.set(control.value);\n }\n\n if (this.control() === control && this.disabled()) {\n control.disable({ emitEvent: false });\n } else {\n this.disabled.set(control.disabled);\n }\n\n this.subscription.add(\n control.statusChanges.subscribe(() => {\n this.disabled.set(control.disabled);\n })\n );\n\n this.subscription.add(\n control.valueChanges.subscribe(value => {\n this.model.set(value);\n })\n );\n }\n\n ngOnDestroy(): void {\n this.subscription.unsubscribe();\n }\n\n /**\n * Implementation of ControlValueAccessor: Writes a new value from the form.\n */\n writeValue(value: unknown): void {\n this.model.set(value);\n }\n\n /**\n * Implementation of ControlValueAccessor: Registers a callback for change events.\n */\n registerOnChange(fn: (value: unknown) => void): void {\n this.onChange = fn;\n }\n\n /**\n * Implementation of ControlValueAccessor: Registers a callback for touched events.\n */\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /**\n * Implementation of ControlValueAccessor: Sets the disabled state.\n */\n setDisabledState?(isDisabled: boolean): void {\n this.disabled.set(isDisabled);\n if (isDisabled) {\n this.control().disable({ emitEvent: false });\n } else {\n this.control().enable({ emitEvent: false });\n }\n }\n\n /**\n * Handle model change events from the template.\n */\n onModelChange(value: unknown): void {\n this.model.set(value);\n this.onChange(value);\n this.effectiveControl.setValue(value, { emitEvent: false });\n this.effectiveControl.markAsDirty();\n this.onTouched();\n }\n\n /**\n * Handle blur events to trigger onTouched.\n */\n onBlur(): void {\n this.onTouched();\n this.effectiveControl.markAsTouched();\n }\n}\n","<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 [indeterminate]=\"indeterminate()\"\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 @if (\n effectiveControl.invalid &&\n (effectiveControl.dirty || effectiveControl.touched) &&\n errorMessage()\n ) {\n <div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n errorMessage()\n }}</p-message>\n </div>\n </div>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,280 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { viewChild, ViewContainerRef, input, computed, model, EventEmitter, effect, untracked, afterRender, Component, createComponent, Injectable } from '@angular/core';
|
|
3
|
+
import { ButtonComponent } from '@tekus/design-system/components/button';
|
|
4
|
+
import * as i1 from 'primeng/drawer';
|
|
5
|
+
import { DrawerModule } from 'primeng/drawer';
|
|
6
|
+
import * as i2 from 'primeng/api';
|
|
7
|
+
import { Subject } from 'rxjs';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* @component DrawerComponent
|
|
11
|
+
* @description
|
|
12
|
+
* A programmatically controlled drawer overlay used for displaying dynamic content,
|
|
13
|
+
* titles, and header actions. The drawer is opened through a service with a configuration object,
|
|
14
|
+
* similar to tk-modal.
|
|
15
|
+
*
|
|
16
|
+
* This component supports:
|
|
17
|
+
* - Required title with ellipsis for long text.
|
|
18
|
+
* - Optional header action button + close button.
|
|
19
|
+
* - Content as string or component.
|
|
20
|
+
* - Position: always right.
|
|
21
|
+
* - Sizes: small (500px), large (1024px).
|
|
22
|
+
* - Closable and dismissible mask behavior.
|
|
23
|
+
*
|
|
24
|
+
* @usage
|
|
25
|
+
* ### Open a drawer from TypeScript using the drawer service
|
|
26
|
+
* ```ts
|
|
27
|
+
* this.drawerService.open({
|
|
28
|
+
* title: 'Drawer name',
|
|
29
|
+
* content: 'Content text drawer example',
|
|
30
|
+
* headerAction: {
|
|
31
|
+
* label: 'Action',
|
|
32
|
+
* severity: 'primary',
|
|
33
|
+
* action: () => console.log('Action clicked'),
|
|
34
|
+
* returnValue: true,
|
|
35
|
+
* },
|
|
36
|
+
* size: 'small',
|
|
37
|
+
* }).subscribe((result) => {
|
|
38
|
+
* console.log('Drawer closed with value:', result);
|
|
39
|
+
* });
|
|
40
|
+
* ```
|
|
41
|
+
* Modernized for Angular 19 with 100% synchronous Signal-based closing interception.
|
|
42
|
+
*/
|
|
43
|
+
class DrawerComponent {
|
|
44
|
+
constructor(elementRef) {
|
|
45
|
+
this.elementRef = elementRef;
|
|
46
|
+
this.contentHost = viewChild('contentHost', {
|
|
47
|
+
read: ViewContainerRef,
|
|
48
|
+
});
|
|
49
|
+
/** The required title displayed at the top left of the drawer header */
|
|
50
|
+
this.title = input.required();
|
|
51
|
+
/** The main content of the drawer. Can be a string or a Component Type. */
|
|
52
|
+
this.content = input(null);
|
|
53
|
+
/** Optional header action button (displayed before close button) */
|
|
54
|
+
this.headerAction = input(null);
|
|
55
|
+
/** Drawer size: 'small' (500px), 'large' (1024px) */
|
|
56
|
+
this.size = input('small');
|
|
57
|
+
/** Whether the drawer can be closed by the user via close button */
|
|
58
|
+
this.closable = input(true);
|
|
59
|
+
/** Whether clicking the mask closes the drawer */
|
|
60
|
+
this.dismissible = input(true);
|
|
61
|
+
/** Optional data to be passed as inputs to the dynamic component. */
|
|
62
|
+
this.data = input({});
|
|
63
|
+
/** Optional interceptor called before the drawer closes. */
|
|
64
|
+
this.interceptor = input(undefined);
|
|
65
|
+
this.isContentString = computed(() => typeof this.content() === 'string');
|
|
66
|
+
this.hasHeaderAction = computed(() => this.headerAction() != null);
|
|
67
|
+
/** Computed: drawer width (responsive) and max-width based on `size`. Always right position. */
|
|
68
|
+
this.drawerStyle = computed(() => {
|
|
69
|
+
const sz = this.size();
|
|
70
|
+
const maxWidth = sz === 'large' ? '1024px' : '500px';
|
|
71
|
+
return {
|
|
72
|
+
width: 'calc(100vw - 1rem)',
|
|
73
|
+
maxWidth,
|
|
74
|
+
};
|
|
75
|
+
});
|
|
76
|
+
/** Visibility flag. Use model for two-way binding when using drawer in template. */
|
|
77
|
+
this.isOpened = model(false);
|
|
78
|
+
/** Whether the drawer content has a scrollbar */
|
|
79
|
+
this.hasScroll = false;
|
|
80
|
+
/** Emits when the drawer closes, passing the return value from header action or null */
|
|
81
|
+
this.onClose = new EventEmitter();
|
|
82
|
+
this.alreadyEmitted = false;
|
|
83
|
+
this.returnValueOnClose = null;
|
|
84
|
+
/**
|
|
85
|
+
* @summary Orchestrates the reactive dynamic lifecycle.
|
|
86
|
+
*/
|
|
87
|
+
effect(() => {
|
|
88
|
+
const opened = this.isOpened();
|
|
89
|
+
const host = this.contentHost();
|
|
90
|
+
untracked(() => {
|
|
91
|
+
if (opened && host) {
|
|
92
|
+
this.attachDynamicContent();
|
|
93
|
+
}
|
|
94
|
+
else if (!opened) {
|
|
95
|
+
this.detachDynamicContent();
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
});
|
|
99
|
+
effect(() => {
|
|
100
|
+
const currentData = this.data();
|
|
101
|
+
untracked(() => this.syncDynamicInputs(currentData));
|
|
102
|
+
});
|
|
103
|
+
afterRender(() => {
|
|
104
|
+
this.checkScroll();
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
ngOnDestroy() {
|
|
108
|
+
this.detachDynamicContent();
|
|
109
|
+
}
|
|
110
|
+
attachDynamicContent() {
|
|
111
|
+
const type = this.content();
|
|
112
|
+
const host = this.contentHost();
|
|
113
|
+
if (!type || typeof type === 'string' || !host)
|
|
114
|
+
return;
|
|
115
|
+
this.detachDynamicContent();
|
|
116
|
+
this.componentRef = host.createComponent(type);
|
|
117
|
+
this.syncDynamicInputs(this.data());
|
|
118
|
+
}
|
|
119
|
+
syncDynamicInputs(data) {
|
|
120
|
+
if (!this.componentRef)
|
|
121
|
+
return;
|
|
122
|
+
Object.entries(data).forEach(([key, value]) => {
|
|
123
|
+
this.componentRef?.setInput(key, value);
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
detachDynamicContent() {
|
|
127
|
+
if (this.componentRef) {
|
|
128
|
+
this.componentRef.destroy();
|
|
129
|
+
this.componentRef = undefined;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
/**
|
|
133
|
+
* Checks if the drawer content has a scrollbar and updates `hasScroll` state.
|
|
134
|
+
*/
|
|
135
|
+
checkScroll() {
|
|
136
|
+
const contentEl = this.elementRef.nativeElement.querySelector('.p-drawer-content');
|
|
137
|
+
if (contentEl) {
|
|
138
|
+
this.hasScroll = contentEl.scrollHeight > contentEl.clientHeight;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
/** Opens the drawer */
|
|
142
|
+
open() {
|
|
143
|
+
this.isOpened.set(true);
|
|
144
|
+
this.resetClosureState();
|
|
145
|
+
}
|
|
146
|
+
/**
|
|
147
|
+
* @summary Main entry point for closure requests.
|
|
148
|
+
* @returns true if closure was executed.
|
|
149
|
+
*/
|
|
150
|
+
tryClose(returnValue = null) {
|
|
151
|
+
if (this.canExecuteClosure()) {
|
|
152
|
+
this.executeClosure(returnValue, arguments.length > 0);
|
|
153
|
+
return true;
|
|
154
|
+
}
|
|
155
|
+
else {
|
|
156
|
+
const instance = this.componentRef?.instance;
|
|
157
|
+
instance?.onBlockedClose?.();
|
|
158
|
+
return false;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
canExecuteClosure() {
|
|
162
|
+
const instance = this.componentRef?.instance;
|
|
163
|
+
const canClose = instance?.canClose ? instance.canClose() : true;
|
|
164
|
+
if (!canClose)
|
|
165
|
+
return false;
|
|
166
|
+
const configInterceptor = this.interceptor();
|
|
167
|
+
if (configInterceptor && !configInterceptor())
|
|
168
|
+
return false;
|
|
169
|
+
return true;
|
|
170
|
+
}
|
|
171
|
+
executeClosure(returnValue, hasReturnValue) {
|
|
172
|
+
if (hasReturnValue) {
|
|
173
|
+
this.alreadyEmitted = true;
|
|
174
|
+
this.returnValueOnClose = returnValue;
|
|
175
|
+
}
|
|
176
|
+
this.isOpened.set(false);
|
|
177
|
+
}
|
|
178
|
+
/** Handles external visibility changes (from p-drawer close button or mask) */
|
|
179
|
+
onVisibleChange(visible) {
|
|
180
|
+
if (!visible) {
|
|
181
|
+
const closed = this.tryClose();
|
|
182
|
+
if (!closed) {
|
|
183
|
+
this.isOpened.set(true);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
/** Closes the drawer and emits onClose */
|
|
188
|
+
handleClose() {
|
|
189
|
+
if (this.isOpened()) {
|
|
190
|
+
return;
|
|
191
|
+
}
|
|
192
|
+
const valueToEmit = this.alreadyEmitted ? this.returnValueOnClose : null;
|
|
193
|
+
this.onClose.emit(valueToEmit);
|
|
194
|
+
this.resetClosureState();
|
|
195
|
+
}
|
|
196
|
+
/** Forcefully closes the drawer without checks */
|
|
197
|
+
close() {
|
|
198
|
+
this.tryClose();
|
|
199
|
+
}
|
|
200
|
+
/**
|
|
201
|
+
* Handles header action button click.
|
|
202
|
+
*/
|
|
203
|
+
handleHeaderAction(action, returnValue) {
|
|
204
|
+
if (action)
|
|
205
|
+
action();
|
|
206
|
+
this.tryClose(returnValue);
|
|
207
|
+
}
|
|
208
|
+
resetClosureState() {
|
|
209
|
+
this.alreadyEmitted = false;
|
|
210
|
+
this.returnValueOnClose = null;
|
|
211
|
+
}
|
|
212
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
213
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: DrawerComponent, isStandalone: true, selector: "tk-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, headerAction: { classPropertyName: "headerAction", publicName: "headerAction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, interceptor: { classPropertyName: "interceptor", publicName: "interceptor", isSignal: true, isRequired: false, transformFunction: null }, isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpened: "isOpenedChange" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<p-drawer\n [modal]=\"true\"\n [visible]=\"isOpened()\"\n (visibleChange)=\"onVisibleChange($event)\"\n [closable]=\"closable()\"\n [dismissible]=\"dismissible()\"\n [closeOnEscape]=\"true\"\n position=\"right\"\n [style]=\"drawerStyle()\"\n [styleClass]=\"'tk-drawer'\"\n [class.tk-drawer--has-scroll]=\"hasScroll\"\n (onHide)=\"handleClose()\">\n <ng-template pTemplate=\"header\">\n <div class=\"tk-drawer__header\">\n <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n @if (hasHeaderAction()) {\n <div class=\"tk-drawer__actions\">\n <tk-button\n [label]=\"headerAction()!.label\"\n [severity]=\"headerAction()!.severity\"\n [variant]=\"headerAction()!.variant\"\n (clicked)=\"\n handleHeaderAction(\n headerAction()!.action,\n headerAction()!.returnValue\n )\n \" />\n </div>\n }\n </div>\n </ng-template>\n\n <section class=\"tk-drawer__content\">\n @if (content()) {\n @if (isContentString()) {\n <p [innerHTML]=\"content()\"></p>\n } @else {\n <ng-template #contentHost></ng-template>\n }\n }\n </section>\n</p-drawer>\n", styles: [":host ::ng-deep .tk-drawer{max-height:100vh;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer__content{flex:1;overflow-y:auto;padding:var(--tk-spacing-paddingX-m, 1.5rem)}:host ::ng-deep .p-drawer-content{overflow-y:auto;display:flex;flex-direction:column;flex:1}:host ::ng-deep .p-drawer-close-button{color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .p-drawer-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-color-base-surface-500, #8a8a8b)}.tk-drawer--has-scroll .p-drawer-header{border-bottom:1px solid var(--tk-color-base-surface-200, #e2e8f0);box-shadow:0 2px 4px #00000005}.tk-drawer__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--tk-spacing-base-100, 1rem);flex-shrink:0;width:calc(100% - var(--tk-spacing-base-250, 2.5rem))}.tk-drawer__title{margin:0;font-size:var(--tk-font-size-headers-s, 1.125rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #212121);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.tk-drawer__actions{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem);flex-shrink:0;padding-right:var(--tk-spacing-paddingX-xs, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }] }); }
|
|
214
|
+
}
|
|
215
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
216
|
+
type: Component,
|
|
217
|
+
args: [{ selector: 'tk-drawer', standalone: true, imports: [DrawerModule, ButtonComponent], template: "<p-drawer\n [modal]=\"true\"\n [visible]=\"isOpened()\"\n (visibleChange)=\"onVisibleChange($event)\"\n [closable]=\"closable()\"\n [dismissible]=\"dismissible()\"\n [closeOnEscape]=\"true\"\n position=\"right\"\n [style]=\"drawerStyle()\"\n [styleClass]=\"'tk-drawer'\"\n [class.tk-drawer--has-scroll]=\"hasScroll\"\n (onHide)=\"handleClose()\">\n <ng-template pTemplate=\"header\">\n <div class=\"tk-drawer__header\">\n <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n @if (hasHeaderAction()) {\n <div class=\"tk-drawer__actions\">\n <tk-button\n [label]=\"headerAction()!.label\"\n [severity]=\"headerAction()!.severity\"\n [variant]=\"headerAction()!.variant\"\n (clicked)=\"\n handleHeaderAction(\n headerAction()!.action,\n headerAction()!.returnValue\n )\n \" />\n </div>\n }\n </div>\n </ng-template>\n\n <section class=\"tk-drawer__content\">\n @if (content()) {\n @if (isContentString()) {\n <p [innerHTML]=\"content()\"></p>\n } @else {\n <ng-template #contentHost></ng-template>\n }\n }\n </section>\n</p-drawer>\n", styles: [":host ::ng-deep .tk-drawer{max-height:100vh;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer__content{flex:1;overflow-y:auto;padding:var(--tk-spacing-paddingX-m, 1.5rem)}:host ::ng-deep .p-drawer-content{overflow-y:auto;display:flex;flex-direction:column;flex:1}:host ::ng-deep .p-drawer-close-button{color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .p-drawer-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-color-base-surface-500, #8a8a8b)}.tk-drawer--has-scroll .p-drawer-header{border-bottom:1px solid var(--tk-color-base-surface-200, #e2e8f0);box-shadow:0 2px 4px #00000005}.tk-drawer__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--tk-spacing-base-100, 1rem);flex-shrink:0;width:calc(100% - var(--tk-spacing-base-250, 2.5rem))}.tk-drawer__title{margin:0;font-size:var(--tk-font-size-headers-s, 1.125rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #212121);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.tk-drawer__actions{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem);flex-shrink:0;padding-right:var(--tk-spacing-paddingX-xs, .25rem)}\n"] }]
|
|
218
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
219
|
+
|
|
220
|
+
class DrawerService {
|
|
221
|
+
constructor(appRef) {
|
|
222
|
+
this.appRef = appRef;
|
|
223
|
+
this.drawerRef = null;
|
|
224
|
+
}
|
|
225
|
+
get _drawerRefForTesting() {
|
|
226
|
+
return this.drawerRef;
|
|
227
|
+
}
|
|
228
|
+
set _drawerRefForTesting(ref) {
|
|
229
|
+
this.drawerRef = ref;
|
|
230
|
+
}
|
|
231
|
+
open(config) {
|
|
232
|
+
if (this.drawerRef) {
|
|
233
|
+
this.drawerRef.instance.close();
|
|
234
|
+
this.appRef.detachView(this.drawerRef.hostView);
|
|
235
|
+
this.drawerRef.destroy();
|
|
236
|
+
this.drawerRef = null;
|
|
237
|
+
}
|
|
238
|
+
const componentRef = createComponent(DrawerComponent, {
|
|
239
|
+
environmentInjector: this.appRef.injector,
|
|
240
|
+
});
|
|
241
|
+
this.appRef.attachView(componentRef.hostView);
|
|
242
|
+
const domElem = componentRef.hostView
|
|
243
|
+
.rootNodes[0];
|
|
244
|
+
document.body.appendChild(domElem);
|
|
245
|
+
componentRef.setInput('title', config.title);
|
|
246
|
+
componentRef.setInput('content', config.content ?? null);
|
|
247
|
+
componentRef.setInput('headerAction', config.headerAction ?? null);
|
|
248
|
+
componentRef.setInput('size', config.size ?? 'small');
|
|
249
|
+
componentRef.setInput('closable', config.closable ?? true);
|
|
250
|
+
componentRef.setInput('dismissible', config.dismissible ?? true);
|
|
251
|
+
componentRef.setInput('data', config.data ?? {});
|
|
252
|
+
componentRef.setInput('interceptor', config.interceptor ?? undefined);
|
|
253
|
+
const close$ = new Subject();
|
|
254
|
+
componentRef.instance.onClose.subscribe(value => {
|
|
255
|
+
close$.next(value);
|
|
256
|
+
close$.complete();
|
|
257
|
+
this.appRef.detachView(componentRef.hostView);
|
|
258
|
+
componentRef.destroy();
|
|
259
|
+
if (this.drawerRef === componentRef) {
|
|
260
|
+
this.drawerRef = null;
|
|
261
|
+
}
|
|
262
|
+
});
|
|
263
|
+
componentRef.instance.open();
|
|
264
|
+
this.drawerRef = componentRef;
|
|
265
|
+
return close$.asObservable();
|
|
266
|
+
}
|
|
267
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DrawerService, deps: [{ token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
268
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DrawerService, providedIn: 'root' }); }
|
|
269
|
+
}
|
|
270
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DrawerService, decorators: [{
|
|
271
|
+
type: Injectable,
|
|
272
|
+
args: [{ providedIn: 'root' }]
|
|
273
|
+
}], ctorParameters: () => [{ type: i0.ApplicationRef }] });
|
|
274
|
+
|
|
275
|
+
/**
|
|
276
|
+
* Generated bundle index. Do not edit.
|
|
277
|
+
*/
|
|
278
|
+
|
|
279
|
+
export { DrawerComponent, DrawerService };
|
|
280
|
+
//# sourceMappingURL=tekus-design-system-components-drawer.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tekus-design-system-components-drawer.mjs","sources":["../../../projects/design-system/components/drawer/src/drawer.component.ts","../../../projects/design-system/components/drawer/src/drawer.component.html","../../../projects/design-system/components/drawer/src/services/drawer.service.ts","../../../projects/design-system/components/drawer/tekus-design-system-components-drawer.ts"],"sourcesContent":["import {\n Component,\n computed,\n input,\n model,\n EventEmitter,\n Type,\n ElementRef,\n ViewContainerRef,\n viewChild,\n ComponentRef,\n effect,\n untracked,\n OnDestroy,\n afterRender,\n} from '@angular/core';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { DrawerModule } from 'primeng/drawer';\nimport { DrawerHeaderAction, DrawerSizeType } from './drawer.types';\nimport {\n TkCanClose,\n TkCloseInterceptor,\n} from '@tekus/design-system/core/types';\n\n/**\n * @component DrawerComponent\n * @description\n * A programmatically controlled drawer overlay used for displaying dynamic content,\n * titles, and header actions. The drawer is opened through a service with a configuration object,\n * similar to tk-modal.\n *\n * This component supports:\n * - Required title with ellipsis for long text.\n * - Optional header action button + close button.\n * - Content as string or component.\n * - Position: always right.\n * - Sizes: small (500px), large (1024px).\n * - Closable and dismissible mask behavior.\n *\n * @usage\n * ### Open a drawer from TypeScript using the drawer service\n * ```ts\n * this.drawerService.open({\n * title: 'Drawer name',\n * content: 'Content text drawer example',\n * headerAction: {\n * label: 'Action',\n * severity: 'primary',\n * action: () => console.log('Action clicked'),\n * returnValue: true,\n * },\n * size: 'small',\n * }).subscribe((result) => {\n * console.log('Drawer closed with value:', result);\n * });\n * ```\n * Modernized for Angular 19 with 100% synchronous Signal-based closing interception.\n */\n@Component({\n selector: 'tk-drawer',\n standalone: true,\n imports: [DrawerModule, ButtonComponent],\n templateUrl: './drawer.component.html',\n styleUrls: ['./drawer.component.scss'],\n})\nexport class DrawerComponent<T = unknown> implements OnDestroy {\n private readonly contentHost = viewChild('contentHost', {\n read: ViewContainerRef,\n });\n private componentRef?: ComponentRef<T>;\n\n /** The required title displayed at the top left of the drawer header */\n title = input.required<string>();\n\n /** The main content of the drawer. Can be a string or a Component Type. */\n content = input<string | Type<T> | null>(null);\n\n /** Optional header action button (displayed before close button) */\n headerAction = input<DrawerHeaderAction | null>(null);\n\n /** Drawer size: 'small' (500px), 'large' (1024px) */\n size = input<DrawerSizeType>('small');\n\n /** Whether the drawer can be closed by the user via close button */\n closable = input<boolean>(true);\n\n /** Whether clicking the mask closes the drawer */\n dismissible = input<boolean>(true);\n\n /** Optional data to be passed as inputs to the dynamic component. */\n data = input<Partial<T>>({});\n\n /** Optional interceptor called before the drawer closes. */\n interceptor = input<TkCloseInterceptor | undefined>(undefined);\n\n isContentString = computed(() => typeof this.content() === 'string');\n hasHeaderAction = computed(() => this.headerAction() != null);\n\n /** Computed: drawer width (responsive) and max-width based on `size`. Always right position. */\n drawerStyle = computed(() => {\n const sz = this.size();\n const maxWidth = sz === 'large' ? '1024px' : '500px';\n return {\n width: 'calc(100vw - 1rem)',\n maxWidth,\n };\n });\n\n /** Visibility flag. Use model for two-way binding when using drawer in template. */\n isOpened = model<boolean>(false);\n\n /** Whether the drawer content has a scrollbar */\n hasScroll = false;\n\n /** Emits when the drawer closes, passing the return value from header action or null */\n readonly onClose = new EventEmitter<unknown>();\n private alreadyEmitted = false;\n private returnValueOnClose: unknown = null;\n\n constructor(private readonly elementRef: ElementRef) {\n /**\n * @summary Orchestrates the reactive dynamic lifecycle.\n */\n effect(() => {\n const opened = this.isOpened();\n const host = this.contentHost();\n\n untracked(() => {\n if (opened && host) {\n this.attachDynamicContent();\n } else if (!opened) {\n this.detachDynamicContent();\n }\n });\n });\n\n effect(() => {\n const currentData = this.data();\n untracked(() => this.syncDynamicInputs(currentData));\n });\n\n afterRender(() => {\n this.checkScroll();\n });\n }\n\n ngOnDestroy(): void {\n this.detachDynamicContent();\n }\n\n private attachDynamicContent(): void {\n const type = this.content();\n const host = this.contentHost();\n\n if (!type || typeof type === 'string' || !host) return;\n this.detachDynamicContent();\n this.componentRef = host.createComponent(type);\n this.syncDynamicInputs(this.data());\n }\n\n private syncDynamicInputs(data: Partial<T>): void {\n if (!this.componentRef) return;\n Object.entries(data).forEach(([key, value]) => {\n this.componentRef?.setInput(key, value);\n });\n }\n\n private detachDynamicContent(): void {\n if (this.componentRef) {\n this.componentRef.destroy();\n this.componentRef = undefined;\n }\n }\n\n /**\n * Checks if the drawer content has a scrollbar and updates `hasScroll` state.\n */\n checkScroll(): void {\n const contentEl =\n this.elementRef.nativeElement.querySelector('.p-drawer-content');\n if (contentEl) {\n this.hasScroll = contentEl.scrollHeight > contentEl.clientHeight;\n }\n }\n\n /** Opens the drawer */\n open(): void {\n this.isOpened.set(true);\n this.resetClosureState();\n }\n\n /**\n * @summary Main entry point for closure requests.\n * @returns true if closure was executed.\n */\n tryClose(returnValue: unknown = null): boolean {\n if (this.canExecuteClosure()) {\n this.executeClosure(returnValue, arguments.length > 0);\n return true;\n } else {\n const instance = this.componentRef?.instance as TkCanClose | undefined;\n instance?.onBlockedClose?.();\n return false;\n }\n }\n\n private canExecuteClosure(): boolean {\n const instance = this.componentRef?.instance as TkCanClose | undefined;\n const canClose = instance?.canClose ? instance.canClose() : true;\n if (!canClose) return false;\n\n const configInterceptor = this.interceptor();\n if (configInterceptor && !configInterceptor()) return false;\n\n return true;\n }\n\n private executeClosure(returnValue: unknown, hasReturnValue: boolean): void {\n if (hasReturnValue) {\n this.alreadyEmitted = true;\n this.returnValueOnClose = returnValue;\n }\n this.isOpened.set(false);\n }\n\n /** Handles external visibility changes (from p-drawer close button or mask) */\n onVisibleChange(visible: boolean): void {\n if (!visible) {\n const closed = this.tryClose();\n\n if (!closed) {\n this.isOpened.set(true);\n }\n }\n }\n\n /** Closes the drawer and emits onClose */\n handleClose(): void {\n if (this.isOpened()) {\n return;\n }\n const valueToEmit = this.alreadyEmitted ? this.returnValueOnClose : null;\n this.onClose.emit(valueToEmit);\n this.resetClosureState();\n }\n\n /** Forcefully closes the drawer without checks */\n close(): void {\n this.tryClose();\n }\n\n /**\n * Handles header action button click.\n */\n handleHeaderAction(\n action: (() => void) | undefined,\n returnValue: unknown\n ): void {\n if (action) action();\n this.tryClose(returnValue);\n }\n\n private resetClosureState(): void {\n this.alreadyEmitted = false;\n this.returnValueOnClose = null;\n }\n}\n","<p-drawer\n [modal]=\"true\"\n [visible]=\"isOpened()\"\n (visibleChange)=\"onVisibleChange($event)\"\n [closable]=\"closable()\"\n [dismissible]=\"dismissible()\"\n [closeOnEscape]=\"true\"\n position=\"right\"\n [style]=\"drawerStyle()\"\n [styleClass]=\"'tk-drawer'\"\n [class.tk-drawer--has-scroll]=\"hasScroll\"\n (onHide)=\"handleClose()\">\n <ng-template pTemplate=\"header\">\n <div class=\"tk-drawer__header\">\n <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n @if (hasHeaderAction()) {\n <div class=\"tk-drawer__actions\">\n <tk-button\n [label]=\"headerAction()!.label\"\n [severity]=\"headerAction()!.severity\"\n [variant]=\"headerAction()!.variant\"\n (clicked)=\"\n handleHeaderAction(\n headerAction()!.action,\n headerAction()!.returnValue\n )\n \" />\n </div>\n }\n </div>\n </ng-template>\n\n <section class=\"tk-drawer__content\">\n @if (content()) {\n @if (isContentString()) {\n <p [innerHTML]=\"content()\"></p>\n } @else {\n <ng-template #contentHost></ng-template>\n }\n }\n </section>\n</p-drawer>\n","import {\n Injectable,\n ApplicationRef,\n ComponentRef,\n createComponent,\n EmbeddedViewRef,\n} from '@angular/core';\nimport { DrawerComponent } from '../drawer.component';\nimport { Observable, Subject } from 'rxjs';\nimport { DrawerConfig } from '../drawer.types';\n\n@Injectable({ providedIn: 'root' })\nexport class DrawerService {\n private drawerRef: ComponentRef<DrawerComponent<unknown>> | null = null;\n\n constructor(private readonly appRef: ApplicationRef) {}\n\n get _drawerRefForTesting(): ComponentRef<DrawerComponent<unknown>> | null {\n return this.drawerRef;\n }\n set _drawerRefForTesting(ref: ComponentRef<DrawerComponent<unknown>> | null) {\n this.drawerRef = ref;\n }\n\n open(config: DrawerConfig): Observable<unknown> {\n if (this.drawerRef) {\n this.drawerRef.instance.close();\n this.appRef.detachView(this.drawerRef.hostView);\n this.drawerRef.destroy();\n this.drawerRef = null;\n }\n\n const componentRef = createComponent(DrawerComponent, {\n environmentInjector: this.appRef.injector,\n });\n\n this.appRef.attachView(componentRef.hostView);\n\n const domElem = (componentRef.hostView as EmbeddedViewRef<unknown>)\n .rootNodes[0] as HTMLElement;\n document.body.appendChild(domElem);\n\n componentRef.setInput('title', config.title);\n componentRef.setInput('content', config.content ?? null);\n componentRef.setInput('headerAction', config.headerAction ?? null);\n componentRef.setInput('size', config.size ?? 'small');\n componentRef.setInput('closable', config.closable ?? true);\n componentRef.setInput('dismissible', config.dismissible ?? true);\n componentRef.setInput('data', config.data ?? {});\n componentRef.setInput('interceptor', config.interceptor ?? undefined);\n\n const close$ = new Subject<unknown>();\n\n componentRef.instance.onClose.subscribe(value => {\n close$.next(value);\n close$.complete();\n\n this.appRef.detachView(componentRef.hostView);\n componentRef.destroy();\n if (this.drawerRef === (componentRef as unknown)) {\n this.drawerRef = null;\n }\n });\n\n componentRef.instance.open();\n this.drawerRef = componentRef as unknown as ComponentRef<\n DrawerComponent<unknown>\n >;\n\n return close$.asObservable();\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|