@tekus/design-system 5.18.0 → 5.19.0

package/fesm2022/tekus-design-system-components-checkbox.mjs

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, model, input, signal, Component } from '@angular/core';
+import { inject, model, input, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NgControl, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { Subscription } from 'rxjs';
@@ -63,12 +63,19 @@ class CheckboxComponent {
          * Message to display when the control is invalid and touched.
          */
         this.errorMessage = input('');
+        /**
+         * @property {ModelSignal<boolean>} indeterminate
+         * @description
+         * Indeterminate state of the checkbox (reactive).
+         * Useful for parent checkboxes in lists with partial selection.
+         */
+        this.indeterminate = model(false);
         /**
          * @property {boolean} disabled
          * @description
          * Whether the checkbox is disabled.
          */
-        this.disabled = signal(false);
+        this.disabled = model(false);
         this.onChange = () => { };
         this.onTouched = () => { };
         this.subscription = new Subscription();
@@ -81,28 +88,33 @@ class CheckboxComponent {
     }
     ngOnInit() {
         const control = this.effectiveControl;
-        if (control.value !== undefined) {
+        // Only read initial value if it exists
+        if (control.value !== undefined && control.value !== null) {
             this.model.set(control.value);
         }
         // Sync initial disabled state
-        this.disabled.set(control.disabled);
-        this.subscription.add(control.valueChanges.subscribe(val => {
-            if (val !== this.model()) {
-                this.model.set(val);
-                this.onChange(val);
-            }
-        }));
+        if (this.control() === control && this.disabled()) {
+            // If using internal control and disabled input is true, disable the control
+            control.disable({ emitEvent: false });
+        }
+        else {
+            // Otherwise (external control or enabled), sync from control
+            this.disabled.set(control.disabled);
+        }
         // Sync disabled state on status change
         this.subscription.add(control.statusChanges.subscribe(() => {
             this.disabled.set(control.disabled);
         }));
+        // Sync model on value change (for external control updates)
+        this.subscription.add(control.valueChanges.subscribe(value => {
+            this.model.set(value);
+        }));
     }
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
     writeValue(value) {
         this.model.set(value);
-        this.control().setValue(value, { emitEvent: false });
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -122,7 +134,7 @@ class CheckboxComponent {
     onModelChange(value) {
         this.model.set(value);
         this.onChange(value);
-        this.effectiveControl.setValue(value);
+        this.effectiveControl.setValue(value, { emitEvent: false });
         this.effectiveControl.markAsDirty();
         this.onTouched();
     }
@@ -131,11 +143,17 @@ class CheckboxComponent {
         this.effectiveControl.markAsTouched();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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        <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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            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"] }]
+            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      [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"] }]
         }], ctorParameters: () => [] });
 
 /**

package/fesm2022/tekus-design-system-components-checkbox.mjs.map

@@ -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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"}
+{"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  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 {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  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    // Only read initial value if it exists\n    if (control.value !== undefined && control.value !== null) {\n      this.model.set(control.value);\n    }\n\n    // Sync initial disabled state\n    if (this.control() === control && this.disabled()) {\n      // If using internal control and disabled input is true, disable the control\n      control.disable({ emitEvent: false });\n    } else {\n      // Otherwise (external control or enabled), sync from control\n      this.disabled.set(control.disabled);\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    // Sync model on value change (for external control updates)\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  writeValue(value: unknown): void {\n    this.model.set(value);\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, { emitEvent: false });\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      [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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"}

package/fesm2022/tekus-design-system-components-drawer.mjs

@@ -0,0 +1,172 @@
+import * as i0 from '@angular/core';
+import { input, computed, model, EventEmitter, Component, createComponent, Injectable } from '@angular/core';
+import { NgComponentOutlet } from '@angular/common';
+import { ButtonComponent } from '@tekus/design-system/components/button';
+import * as i1 from 'primeng/drawer';
+import { DrawerModule } from 'primeng/drawer';
+import * as i2 from 'primeng/api';
+import { Subject } from 'rxjs';
+
+/**
+ * @component DrawerComponent
+ * @description
+ * A programmatically controlled drawer overlay used for displaying dynamic content,
+ * titles, and header actions. The drawer is opened through a service with a configuration object,
+ * similar to tk-modal.
+ *
+ * This component supports:
+ * - Required title with ellipsis for long text.
+ * - Optional header action button + close button.
+ * - Content as string or component.
+ * - Position: always right.
+ * - Sizes: small (500px), large (1024px).
+ * - Closable and dismissible mask behavior.
+ *
+ * @usage
+ * ### Open a drawer from TypeScript using the drawer service
+ * ```ts
+ * this.drawerService.open({
+ *   title: 'Drawer name',
+ *   content: 'Content text drawer example',
+ *   headerAction: {
+ *     label: 'Action',
+ *     severity: 'primary',
+ *     action: () => console.log('Action clicked'),
+ *     returnValue: true,
+ *   },
+ *   size: 'small',
+ * }).subscribe((result) => {
+ *   console.log('Drawer closed with value:', result);
+ * });
+ * ```
+ */
+class DrawerComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        /** The required title displayed at the top left of the drawer header */
+        this.title = input.required();
+        /** The main content of the drawer */
+        this.content = input(null);
+        /** Optional header action button (displayed before close button) */
+        this.headerAction = input(null);
+        /** Drawer size: 'small' (500px), 'large' (1024px) */
+        this.size = input('small');
+        /** Whether the drawer can be closed by the user via close button */
+        this.closable = input(true);
+        /** Whether clicking the mask closes the drawer */
+        this.dismissible = input(true);
+        this.isContentString = computed(() => typeof this.content() === 'string');
+        this.hasHeaderAction = computed(() => this.headerAction() != null);
+        /** Computed: drawer width (responsive) and max-width based on `size`. Always right position. */
+        this.drawerStyle = computed(() => {
+            const sz = this.size();
+            const maxWidth = sz === 'large' ? '1024px' : '500px';
+            return {
+                width: 'calc(100vw - 1rem)',
+                maxWidth,
+            };
+        });
+        /** Visibility flag. Use model for two-way binding when using drawer in template. */
+        this.isOpened = model(false);
+        /** Emits when the drawer closes, passing the return value from header action or null */
+        this.onClose = new EventEmitter();
+        this.alreadyEmitted = false;
+        this.returnValueOnClose = null;
+    }
+    /** Opens the drawer */
+    open() {
+        this.isOpened.set(true);
+        this.alreadyEmitted = false;
+        this.returnValueOnClose = null;
+    }
+    /** Closes the drawer and emits onClose */
+    handleClose() {
+        if (!this.alreadyEmitted) {
+            this.onClose.emit(null);
+        }
+        else {
+            this.onClose.emit(this.returnValueOnClose);
+        }
+        this.alreadyEmitted = false;
+        this.returnValueOnClose = null;
+    }
+    /** Closes the drawer without emitting an event */
+    close() {
+        this.isOpened.set(false);
+    }
+    /**
+     * Handles header action button click.
+     * Executes the action callback, emits onClose with the provided returnValue, then closes the drawer.
+     */
+    handleHeaderAction(action, returnValue) {
+        if (action)
+            action();
+        this.alreadyEmitted = true;
+        this.returnValueOnClose = returnValue;
+        this.isOpened.set(false);
+    }
+    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 }); }
+    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 }, isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpened: "isOpenedChange" }, ngImport: i0, template: "<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"isOpened.set($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  (onHide)=\"handleClose()\"\n>\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)=\"handleHeaderAction(headerAction()!.action, headerAction()!.returnValue)\"\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-container *ngComponentOutlet=\"$any(content())\"></ng-container>\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 .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__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"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tk-drawer', standalone: true, imports: [DrawerModule, ButtonComponent, NgComponentOutlet], template: "<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"isOpened.set($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  (onHide)=\"handleClose()\"\n>\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)=\"handleHeaderAction(headerAction()!.action, headerAction()!.returnValue)\"\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-container *ngComponentOutlet=\"$any(content())\"></ng-container>\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 .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__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"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+class DrawerService {
+    constructor(appRef) {
+        this.appRef = appRef;
+        this.drawerRef = null;
+    }
+    get _drawerRefForTesting() {
+        return this.drawerRef;
+    }
+    set _drawerRefForTesting(ref) {
+        this.drawerRef = ref;
+    }
+    open(config) {
+        if (this.drawerRef) {
+            this.drawerRef.instance.close();
+            this.appRef.detachView(this.drawerRef.hostView);
+            this.drawerRef.destroy();
+            this.drawerRef = null;
+        }
+        const componentRef = createComponent(DrawerComponent, {
+            environmentInjector: this.appRef.injector,
+        });
+        this.appRef.attachView(componentRef.hostView);
+        const domElem = componentRef.hostView
+            .rootNodes[0];
+        document.body.appendChild(domElem);
+        componentRef.setInput('title', config.title);
+        componentRef.setInput('content', config.content ?? null);
+        componentRef.setInput('headerAction', config.headerAction ?? null);
+        componentRef.setInput('size', config.size ?? 'small');
+        componentRef.setInput('closable', config.closable ?? true);
+        componentRef.setInput('dismissible', config.dismissible ?? true);
+        const close$ = new Subject();
+        componentRef.instance.onClose.subscribe((value) => {
+            close$.next(value);
+            close$.complete();
+            this.appRef.detachView(componentRef.hostView);
+            componentRef.destroy();
+            this.drawerRef = null;
+        });
+        componentRef.instance.open();
+        this.drawerRef = componentRef;
+        return close$.asObservable();
+    }
+    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 }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DrawerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DrawerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DrawerComponent, DrawerService };
+//# sourceMappingURL=tekus-design-system-components-drawer.mjs.map

package/fesm2022/tekus-design-system-components-drawer.mjs.map

@@ -0,0 +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} from '@angular/core';\nimport { NgComponentOutlet } from '@angular/common';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { DrawerModule } from 'primeng/drawer';\nimport { DrawerHeaderAction, DrawerSizeType } from './drawer.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 */\n@Component({\n  selector: 'tk-drawer',\n  standalone: true,\n  imports: [DrawerModule, ButtonComponent, NgComponentOutlet],\n  templateUrl: './drawer.component.html',\n  styleUrls: ['./drawer.component.scss'],\n})\nexport class DrawerComponent {\n  constructor(private readonly elementRef: ElementRef) {}\n\n  /** The required title displayed at the top left of the drawer header */\n  title = input.required<string>();\n  /** The main content of the drawer */\n  content = input<string | Type<unknown> | null>(null);\n  /** Optional header action button (displayed before close button) */\n  headerAction = input<DrawerHeaderAction | null>(null);\n  /** Drawer size: 'small' (500px), 'large' (1024px) */\n  size = input<DrawerSizeType>('small');\n  /** Whether the drawer can be closed by the user via close button */\n  closable = input<boolean>(true);\n  /** Whether clicking the mask closes the drawer */\n  dismissible = input<boolean>(true);\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  /** 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  /** Opens the drawer */\n  open() {\n    this.isOpened.set(true);\n    this.alreadyEmitted = false;\n    this.returnValueOnClose = null;\n  }\n\n  /** Closes the drawer and emits onClose */\n  handleClose() {\n    if (!this.alreadyEmitted) {\n      this.onClose.emit(null);\n    } else {\n      this.onClose.emit(this.returnValueOnClose);\n    }\n    this.alreadyEmitted = false;\n    this.returnValueOnClose = null;\n  }\n\n  /** Closes the drawer without emitting an event */\n  close() {\n    this.isOpened.set(false);\n  }\n\n  /**\n   * Handles header action button click.\n   * Executes the action callback, emits onClose with the provided returnValue, then closes the drawer.\n   */\n  handleHeaderAction(\n    action: (() => void) | undefined,\n    returnValue: unknown\n  ): void {\n    if (action) action();\n    this.alreadyEmitted = true;\n    this.returnValueOnClose = returnValue;\n    this.isOpened.set(false);\n  }\n}\n","<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"isOpened.set($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  (onHide)=\"handleClose()\"\n>\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)=\"handleHeaderAction(headerAction()!.action, headerAction()!.returnValue)\"\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-container *ngComponentOutlet=\"$any(content())\"></ng-container>\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> | null = null;\n\n  constructor(private readonly appRef: ApplicationRef) {}\n\n  get _drawerRefForTesting(): ComponentRef<DrawerComponent> | null {\n    return this.drawerRef;\n  }\n  set _drawerRefForTesting(ref: ComponentRef<DrawerComponent> | 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\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      this.drawerRef = null;\n    });\n\n    componentRef.instance.open();\n    this.drawerRef = componentRef;\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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"}

package/fesm2022/tekus-design-system-components-icon.mjs

@@ -960,6 +960,58 @@ const plugIcon = {
     }
 };
 
+const arrowsRotateIcon = {
+    'arrows-rotate': {
+        name: 'faArrowsRotate',
+        tags: ['arrow', 'rotate'],
+        source: 'Font awesome',
+        styles: {
+            light: import('@fortawesome/pro-light-svg-icons').then(m => m.faArrowsRotate),
+            regular: import('@fortawesome/pro-regular-svg-icons').then(m => m.faArrowsRotate),
+            solid: import('@fortawesome/pro-solid-svg-icons').then(m => m.faArrowsRotate)
+        }
+    }
+};
+
+const editIcon = {
+    'edit': {
+        name: 'faEdit',
+        tags: ['edit'],
+        source: 'Font awesome',
+        styles: {
+            light: import('@fortawesome/pro-light-svg-icons').then(m => m.faEdit),
+            regular: import('@fortawesome/pro-regular-svg-icons').then(m => m.faEdit),
+            solid: import('@fortawesome/pro-solid-svg-icons').then(m => m.faEdit)
+        }
+    }
+};
+
+const globePointerIcon = {
+    'globe-pointer': {
+        name: 'faGlobalPointer',
+        tags: ['globe', 'pointer'],
+        source: 'Font awesome',
+        styles: {
+            light: import('@fortawesome/pro-light-svg-icons').then(m => m.faGlobePointer),
+            regular: import('@fortawesome/pro-regular-svg-icons').then(m => m.faGlobePointer),
+            solid: import('@fortawesome/pro-solid-svg-icons').then(m => m.faGlobePointer)
+        }
+    }
+};
+
+const gridVerticalIcon = {
+    'grip-vertical': {
+        name: 'faGripVertical',
+        tags: ['grip', 'vertical'],
+        source: 'Font awesome',
+        styles: {
+            light: import('@fortawesome/pro-light-svg-icons').then(m => m.faGripDotsVertical),
+            regular: import('@fortawesome/pro-regular-svg-icons').then(m => m.faGripDotsVertical),
+            solid: import('@fortawesome/pro-solid-svg-icons').then(m => m.faGripDotsVertical)
+        }
+    }
+};
+
 /**
  * iconsStylesLight is an array of available light styles for each icon in the IconCatalog.
  * It allows for easy access and iteration over the light styles.
@@ -1027,6 +1079,10 @@ const IconCatalog = {
     ...qrCodeIcon,
     ...plugIcon,
     ...adsIcons,
+    ...arrowsRotateIcon,
+    ...editIcon,
+    ...globePointerIcon,
+    ...gridVerticalIcon
 };
 
 class IconComponent {