@tekus/design-system 5.8.2 → 5.9.0

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

@@ -214,7 +214,7 @@ class TextareaComponent {
         return this.getControl();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TextareaComponent, isStandalone: true, selector: "tk-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<p-floatlabel>\n  <div class=\"tk-textarea-wrapper\">\n    <textarea\n      pTextarea\n      [autoResize]=\"true\"\n      [id]=\"id()\"\n      [rows]=\"rows()\"\n      [cols]=\"cols()\"\n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      [attr.maxlength]=\"maxLength()\"\n      [disabled]=\"disabled()\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\"></textarea>\n\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl.invalid && (effectiveControl.dirty ||\n    effectiveControl.touched)) && errorMessage()) {\n    <p-message severity=\"error\" size=\"small\" variant=\"simple\">\n      {{ errorMessage() }}\n    </p-message>\n    } @else if (hint()) {\n    <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">\n      {{ hint() }}\n    </p-message>\n    }\n  </div>\n\n  @if (maxLength()) {\n  <p-message\n    severity=\"secondary\"\n    size=\"small\"\n    variant=\"simple\"\n    class=\"tk-character-counter\">\n    {{ counterText() }}\n  </p-message>\n  }\n</div>\n", styles: [":host ::ng-deep .p-textarea{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:var(--tk-borderRadius-null, 0);padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent}:host ::ng-deep .p-textarea:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-textarea.ng-invalid.ng-dirty,:host ::ng-deep .p-textarea.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-textarea.has-icon{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-textarea:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-textarea) label{top:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .p-floatlabel:has(textarea:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(textarea.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(textarea:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-textarea.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-textarea.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}: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-messages{flex:1;margin-right:1rem}:host ::ng-deep .tk-character-counter{white-space:nowrap;display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i1.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { 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.15", type: TextareaComponent, isStandalone: true, selector: "tk-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<p-floatlabel>\n  <div class=\"tk-textarea-wrapper\">\n    <textarea\n      pTextarea\n      [autoResize]=\"true\"\n      [id]=\"id()\"\n      [rows]=\"rows()\"\n      [cols]=\"cols()\"\n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      [attr.maxlength]=\"maxLength()\"\n      [disabled]=\"disabled()\"\n      [class.p-filled]=\"!!value()\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\"></textarea>\n\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl.invalid && (effectiveControl.dirty ||\n    effectiveControl.touched)) && errorMessage()) {\n    <p-message severity=\"error\" size=\"small\" variant=\"simple\">\n      {{ errorMessage() }}\n    </p-message>\n    } @else if (hint()) {\n    <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">\n      {{ hint() }}\n    </p-message>\n    }\n  </div>\n\n  @if (maxLength()) {\n  <p-message\n    severity=\"secondary\"\n    size=\"small\"\n    variant=\"simple\"\n    class=\"tk-character-counter\">\n    {{ counterText() }}\n  </p-message>\n  }\n</div>\n", styles: [":host ::ng-deep .p-textarea{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:var(--tk-borderRadius-null, 0);padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent}:host ::ng-deep .p-textarea:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-textarea.ng-invalid.ng-dirty,:host ::ng-deep .p-textarea.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-textarea.has-icon{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-textarea:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-textarea) label{top:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .p-floatlabel:has(textarea:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(textarea.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(textarea:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-textarea.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-textarea.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}: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-messages{flex:1;margin-right:1rem}:host ::ng-deep .tk-character-counter{white-space:nowrap;display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i1.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { 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.15", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -224,7 +224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         TextareaModule,
                         FloatLabelModule,
                         MessageModule,
-                    ], template: "<p-floatlabel>\n  <div class=\"tk-textarea-wrapper\">\n    <textarea\n      pTextarea\n      [autoResize]=\"true\"\n      [id]=\"id()\"\n      [rows]=\"rows()\"\n      [cols]=\"cols()\"\n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      [attr.maxlength]=\"maxLength()\"\n      [disabled]=\"disabled()\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\"></textarea>\n\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl.invalid && (effectiveControl.dirty ||\n    effectiveControl.touched)) && errorMessage()) {\n    <p-message severity=\"error\" size=\"small\" variant=\"simple\">\n      {{ errorMessage() }}\n    </p-message>\n    } @else if (hint()) {\n    <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">\n      {{ hint() }}\n    </p-message>\n    }\n  </div>\n\n  @if (maxLength()) {\n  <p-message\n    severity=\"secondary\"\n    size=\"small\"\n    variant=\"simple\"\n    class=\"tk-character-counter\">\n    {{ counterText() }}\n  </p-message>\n  }\n</div>\n", styles: [":host ::ng-deep .p-textarea{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:var(--tk-borderRadius-null, 0);padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent}:host ::ng-deep .p-textarea:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-textarea.ng-invalid.ng-dirty,:host ::ng-deep .p-textarea.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-textarea.has-icon{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-textarea:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-textarea) label{top:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .p-floatlabel:has(textarea:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(textarea.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(textarea:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-textarea.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-textarea.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}: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-messages{flex:1;margin-right:1rem}:host ::ng-deep .tk-character-counter{white-space:nowrap;display:flex;justify-content:flex-end}\n"] }]
+                    ], template: "<p-floatlabel>\n  <div class=\"tk-textarea-wrapper\">\n    <textarea\n      pTextarea\n      [autoResize]=\"true\"\n      [id]=\"id()\"\n      [rows]=\"rows()\"\n      [cols]=\"cols()\"\n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      [attr.maxlength]=\"maxLength()\"\n      [disabled]=\"disabled()\"\n      [class.p-filled]=\"!!value()\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\"></textarea>\n\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl.invalid && (effectiveControl.dirty ||\n    effectiveControl.touched)) && errorMessage()) {\n    <p-message severity=\"error\" size=\"small\" variant=\"simple\">\n      {{ errorMessage() }}\n    </p-message>\n    } @else if (hint()) {\n    <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">\n      {{ hint() }}\n    </p-message>\n    }\n  </div>\n\n  @if (maxLength()) {\n  <p-message\n    severity=\"secondary\"\n    size=\"small\"\n    variant=\"simple\"\n    class=\"tk-character-counter\">\n    {{ counterText() }}\n  </p-message>\n  }\n</div>\n", styles: [":host ::ng-deep .p-textarea{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:var(--tk-borderRadius-null, 0);padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent}:host ::ng-deep .p-textarea:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-textarea.ng-invalid.ng-dirty,:host ::ng-deep .p-textarea.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-textarea.has-icon{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-textarea:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-textarea) label{top:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .p-floatlabel:has(textarea:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(textarea.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(textarea:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-textarea.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-textarea.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}: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-messages{flex:1;margin-right:1rem}:host ::ng-deep .tk-character-counter{white-space:nowrap;display:flex;justify-content:flex-end}\n"] }]
         }], ctorParameters: () => [] });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-textarea.mjs","sources":["../../../projects/design-system/components/textarea/src/textarea.component.ts","../../../projects/design-system/components/textarea/src/textarea.component.html","../../../projects/design-system/components/textarea/tekus-design-system-components-textarea.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  Component,\n  input,\n  model,\n  signal,\n  computed,\n  inject,\n  OnInit,\n  OnDestroy,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  FormControl,\n  ReactiveFormsModule,\n  NgControl,\n} from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { TextareaModule } from 'primeng/textarea';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n  selector: 'tk-textarea',\n  standalone: true,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    TextareaModule,\n    FloatLabelModule,\n    MessageModule,\n  ],\n  templateUrl: './textarea.component.html',\n  styleUrl: './textarea.component.scss',\n})\nexport class TextareaComponent\n  implements ControlValueAccessor, OnInit, OnDestroy\n{\n  /* ───────────── Dependency injection ───────────── */\n  private readonly ngControl = inject(NgControl, {\n    self: true,\n    optional: true,\n  });\n\n  constructor() {\n    this.bindValueAccessor();\n  }\n\n  /* ───────────── Inputs / State ───────────── */\n\n  /**\n   * @property {ModelSignal<string>} value\n   * @description\n   * The value of the textarea. Supports two-way binding via signals.\n   */\n  value = model<string>('');\n\n  /**\n   * @property {InputSignal<FormControl>} control\n   * @description\n   * External FormControl used to read/set the textarea value.\n   * If not provided, an internal FormControl is created.\n   */\n  control = input<FormControl>(new FormControl(''));\n\n  /**\n   * @property {InputSignal<string>} label\n   * @description\n   * Label displayed above the textarea.\n   */\n  label = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} id\n   * @description\n   * HTML id attribute for the textarea.\n   * @default 'tk-textarea'\n   */\n  id = input<string>('tk-textarea');\n\n  /**\n   * @property {InputSignal<number>} rows\n   * @description\n   * Number of visible text lines for the textarea.\n   * @default 1\n   */\n  rows = input<number>(1);\n\n  /**\n   * @property {InputSignal<number>} cols\n   * @description\n   * Visible width of the textarea in average character widths.\n   * @default 30\n   */\n  cols = input<number>(30);\n\n  /**\n   * @property {InputSignal<string>} hint\n   * @description\n   * Hint text to display below the textarea.\n   */\n  hint = input<string>('');\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 {InputSignal<number | null>} maxLength\n   * @description\n   * Maximum number of characters allowed in the textarea.\n   */\n  maxLength = input<number | null>(null);\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Whether the textarea is disabled.\n   */\n  disabled = signal<boolean>(false);\n\n  /* ───────────── Derived state ───────────── */\n\n  counterText = computed(() => {\n    const limit = this.maxLength();\n    return limit ? `${this.value().length}/${limit}` : '';\n  });\n\n  /* ───────────── CVA callbacks ───────────── */\n\n  private propagateChange: (value: string) => void = () => {};\n  private propagateTouched: () => void = () => {};\n\n  /* ───────────── Internals ───────────── */\n\n  private syncingFromView = false;\n  private readonly subscriptions = new Subscription();\n\n  /* ───────────── Lifecycle ───────────── */\n\n  ngOnInit(): void {\n    this.initializeFromControl();\n    this.listenToControlChanges();\n  }\n\n  ngOnDestroy(): void {\n    this.subscriptions.unsubscribe();\n  }\n\n  /* ───────────── ControlValueAccessor ───────────── */\n\n  /**\n   * @method writeValue\n   * @description\n   * Writes a new value to the element.\n   * @param value The new value.\n   */\n  writeValue(value: string): void {\n    const safeValue = value ?? '';\n    this.value.set(safeValue);\n    this.control().setValue(safeValue, { emitEvent: false });\n  }\n\n  /**\n   * @method registerOnChange\n   * @description\n   * Registers a callback function that is called when the control's value changes in the UI.\n   * @param fn The callback function.\n   */\n  registerOnChange(fn: (value: string) => void): void {\n    this.propagateChange = fn;\n  }\n\n  /**\n   * @method registerOnTouched\n   * @description\n   * Registers a callback function that is called by the forms API on initialization to update the form model on blur.\n   * @param fn The callback function.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.propagateTouched = fn;\n  }\n\n  /**\n   * @method setDisabledState\n   * @description\n   * Function that is called by the forms API when the control status changes to or from 'DISABLED'.\n   * @param isDisabled The disabled status to set on the element.\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  /* ───────────── Template handlers ───────────── */\n\n  /**\n   * @method onInput\n   * @description\n   * Handles input events to update the model and notify forms.\n   * @param event The input event.\n   */\n  onInput(event: Event): void {\n    const nextValue = (event.target as HTMLTextAreaElement).value;\n    this.syncFromUserInput(nextValue);\n  }\n\n  /**\n   * @method onBlur\n   * @description\n   * Handles blur events to mark the control as touched.\n   */\n  onBlur(): void {\n    this.markControlAsTouched();\n  }\n\n  /* ───────────── Private helpers ───────────── */\n\n  private bindValueAccessor(): void {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  private initializeFromControl(): void {\n    const control = this.getControl();\n\n    if (control.value !== null && control.value !== undefined) {\n      this.value.set(control.value);\n    }\n\n    this.disabled.set(control.disabled);\n  }\n\n  private listenToControlChanges(): void {\n    const control = this.getControl();\n\n    this.subscriptions.add(\n      control.valueChanges.subscribe(value => {\n        if (this.syncingFromView) return;\n        if (value !== this.value()) {\n          this.value.set(value ?? '');\n          this.propagateChange(value);\n        }\n      })\n    );\n\n    this.subscriptions.add(\n      control.statusChanges.subscribe(() => {\n        this.disabled.set(control.disabled);\n      })\n    );\n  }\n\n  private syncFromUserInput(value: string): void {\n    this.syncingFromView = true;\n\n    this.value.set(value);\n    this.propagateChange(value);\n\n    const control = this.getControl();\n    control.setValue(value);\n    control.markAsDirty();\n\n    this.syncingFromView = false;\n  }\n\n  private markControlAsTouched(): void {\n    this.propagateTouched();\n    this.getControl().markAsTouched();\n  }\n\n  private getControl(): FormControl {\n    return (this.ngControl?.control as FormControl) || this.control();\n  }\n\n  get effectiveControl(): FormControl {\n    return this.getControl();\n  }\n}\n","<p-floatlabel>\n  <div class=\"tk-textarea-wrapper\">\n    <textarea\n      pTextarea\n      [autoResize]=\"true\"\n      [id]=\"id()\"\n      [rows]=\"rows()\"\n      [cols]=\"cols()\"\n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      [attr.maxlength]=\"maxLength()\"\n      [disabled]=\"disabled()\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\"></textarea>\n\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl.invalid && (effectiveControl.dirty ||\n    effectiveControl.touched)) && errorMessage()) {\n    <p-message severity=\"error\" size=\"small\" variant=\"simple\">\n      {{ errorMessage() }}\n    </p-message>\n    } @else if (hint()) {\n    <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">\n      {{ hint() }}\n    </p-message>\n    }\n  </div>\n\n  @if (maxLength()) {\n  <p-message\n    severity=\"secondary\"\n    size=\"small\"\n    variant=\"simple\"\n    class=\"tk-character-counter\">\n    {{ counterText() }}\n  </p-message>\n  }\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-textarea.mjs","sources":["../../../projects/design-system/components/textarea/src/textarea.component.ts","../../../projects/design-system/components/textarea/src/textarea.component.html","../../../projects/design-system/components/textarea/tekus-design-system-components-textarea.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  Component,\n  input,\n  model,\n  signal,\n  computed,\n  inject,\n  OnInit,\n  OnDestroy,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  FormControl,\n  ReactiveFormsModule,\n  NgControl,\n} from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { TextareaModule } from 'primeng/textarea';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n  selector: 'tk-textarea',\n  standalone: true,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    TextareaModule,\n    FloatLabelModule,\n    MessageModule,\n  ],\n  templateUrl: './textarea.component.html',\n  styleUrl: './textarea.component.scss',\n})\nexport class TextareaComponent\n  implements ControlValueAccessor, OnInit, OnDestroy\n{\n  /* ───────────── Dependency injection ───────────── */\n  private readonly ngControl = inject(NgControl, {\n    self: true,\n    optional: true,\n  });\n\n  constructor() {\n    this.bindValueAccessor();\n  }\n\n  /* ───────────── Inputs / State ───────────── */\n\n  /**\n   * @property {ModelSignal<string>} value\n   * @description\n   * The value of the textarea. Supports two-way binding via signals.\n   */\n  value = model<string>('');\n\n  /**\n   * @property {InputSignal<FormControl>} control\n   * @description\n   * External FormControl used to read/set the textarea value.\n   * If not provided, an internal FormControl is created.\n   */\n  control = input<FormControl>(new FormControl(''));\n\n  /**\n   * @property {InputSignal<string>} label\n   * @description\n   * Label displayed above the textarea.\n   */\n  label = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} id\n   * @description\n   * HTML id attribute for the textarea.\n   * @default 'tk-textarea'\n   */\n  id = input<string>('tk-textarea');\n\n  /**\n   * @property {InputSignal<number>} rows\n   * @description\n   * Number of visible text lines for the textarea.\n   * @default 1\n   */\n  rows = input<number>(1);\n\n  /**\n   * @property {InputSignal<number>} cols\n   * @description\n   * Visible width of the textarea in average character widths.\n   * @default 30\n   */\n  cols = input<number>(30);\n\n  /**\n   * @property {InputSignal<string>} hint\n   * @description\n   * Hint text to display below the textarea.\n   */\n  hint = input<string>('');\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 {InputSignal<number | null>} maxLength\n   * @description\n   * Maximum number of characters allowed in the textarea.\n   */\n  maxLength = input<number | null>(null);\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Whether the textarea is disabled.\n   */\n  disabled = signal<boolean>(false);\n\n  /* ───────────── Derived state ───────────── */\n\n  counterText = computed(() => {\n    const limit = this.maxLength();\n    return limit ? `${this.value().length}/${limit}` : '';\n  });\n\n  /* ───────────── CVA callbacks ───────────── */\n\n  private propagateChange: (value: string) => void = () => {};\n  private propagateTouched: () => void = () => {};\n\n  /* ───────────── Internals ───────────── */\n\n  private syncingFromView = false;\n  private readonly subscriptions = new Subscription();\n\n  /* ───────────── Lifecycle ───────────── */\n\n  ngOnInit(): void {\n    this.initializeFromControl();\n    this.listenToControlChanges();\n  }\n\n  ngOnDestroy(): void {\n    this.subscriptions.unsubscribe();\n  }\n\n  /* ───────────── ControlValueAccessor ───────────── */\n\n  /**\n   * @method writeValue\n   * @description\n   * Writes a new value to the element.\n   * @param value The new value.\n   */\n  writeValue(value: string): void {\n    const safeValue = value ?? '';\n    this.value.set(safeValue);\n    this.control().setValue(safeValue, { emitEvent: false });\n  }\n\n  /**\n   * @method registerOnChange\n   * @description\n   * Registers a callback function that is called when the control's value changes in the UI.\n   * @param fn The callback function.\n   */\n  registerOnChange(fn: (value: string) => void): void {\n    this.propagateChange = fn;\n  }\n\n  /**\n   * @method registerOnTouched\n   * @description\n   * Registers a callback function that is called by the forms API on initialization to update the form model on blur.\n   * @param fn The callback function.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.propagateTouched = fn;\n  }\n\n  /**\n   * @method setDisabledState\n   * @description\n   * Function that is called by the forms API when the control status changes to or from 'DISABLED'.\n   * @param isDisabled The disabled status to set on the element.\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  /* ───────────── Template handlers ───────────── */\n\n  /**\n   * @method onInput\n   * @description\n   * Handles input events to update the model and notify forms.\n   * @param event The input event.\n   */\n  onInput(event: Event): void {\n    const nextValue = (event.target as HTMLTextAreaElement).value;\n    this.syncFromUserInput(nextValue);\n  }\n\n  /**\n   * @method onBlur\n   * @description\n   * Handles blur events to mark the control as touched.\n   */\n  onBlur(): void {\n    this.markControlAsTouched();\n  }\n\n  /* ───────────── Private helpers ───────────── */\n\n  private bindValueAccessor(): void {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  private initializeFromControl(): void {\n    const control = this.getControl();\n\n    if (control.value !== null && control.value !== undefined) {\n      this.value.set(control.value);\n    }\n\n    this.disabled.set(control.disabled);\n  }\n\n  private listenToControlChanges(): void {\n    const control = this.getControl();\n\n    this.subscriptions.add(\n      control.valueChanges.subscribe(value => {\n        if (this.syncingFromView) return;\n        if (value !== this.value()) {\n          this.value.set(value ?? '');\n          this.propagateChange(value);\n        }\n      })\n    );\n\n    this.subscriptions.add(\n      control.statusChanges.subscribe(() => {\n        this.disabled.set(control.disabled);\n      })\n    );\n  }\n\n  private syncFromUserInput(value: string): void {\n    this.syncingFromView = true;\n\n    this.value.set(value);\n    this.propagateChange(value);\n\n    const control = this.getControl();\n    control.setValue(value);\n    control.markAsDirty();\n\n    this.syncingFromView = false;\n  }\n\n  private markControlAsTouched(): void {\n    this.propagateTouched();\n    this.getControl().markAsTouched();\n  }\n\n  private getControl(): FormControl {\n    return (this.ngControl?.control as FormControl) || this.control();\n  }\n\n  get effectiveControl(): FormControl {\n    return this.getControl();\n  }\n}\n","<p-floatlabel>\n  <div class=\"tk-textarea-wrapper\">\n    <textarea\n      pTextarea\n      [autoResize]=\"true\"\n      [id]=\"id()\"\n      [rows]=\"rows()\"\n      [cols]=\"cols()\"\n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      [attr.maxlength]=\"maxLength()\"\n      [disabled]=\"disabled()\"\n      [class.p-filled]=\"!!value()\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\"></textarea>\n\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl.invalid && (effectiveControl.dirty ||\n    effectiveControl.touched)) && errorMessage()) {\n    <p-message severity=\"error\" size=\"small\" variant=\"simple\">\n      {{ errorMessage() }}\n    </p-message>\n    } @else if (hint()) {\n    <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">\n      {{ hint() }}\n    </p-message>\n    }\n  </div>\n\n  @if (maxLength()) {\n  <p-message\n    severity=\"secondary\"\n    size=\"small\"\n    variant=\"simple\"\n    class=\"tk-character-counter\">\n    {{ counterText() }}\n  </p-message>\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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tekus/design-system",
   "description": "Tekus design system library",
-  "version": "5.8.2",
+  "version": "5.9.0",
   "license": "UNLICENSED",
   "peerDependencies": {
     "@angular/core": "^19.2.15",
@@ -43,14 +43,14 @@
       "types": "./components/autocomplete/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-autocomplete.mjs"
     },
-    "./components/checkbox": {
-      "types": "./components/checkbox/index.d.ts",
-      "default": "./fesm2022/tekus-design-system-components-checkbox.mjs"
-    },
     "./components/button": {
       "types": "./components/button/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-button.mjs"
     },
+    "./components/checkbox": {
+      "types": "./components/checkbox/index.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-checkbox.mjs"
+    },
     "./components/date-picker": {
       "types": "./components/date-picker/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-date-picker.mjs"