@brickclay-org/ui 0.0.16 → 0.0.17

package/README.md

@@ -59,7 +59,7 @@ _More components coming soon..._
 ## Installation
 
 ```bash
-npm i @brickclay-org/ui@0.0.16
+npm i @brickclay-org/ui@0.0.17
 ```
 
 ### Peer Dependencies

package/fesm2022/brickclay-org-ui.mjs

@@ -1,7 +1,8 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, HostListener, ViewChildren, Output, Input, Injectable, NgModule, forwardRef, ViewEncapsulation } from '@angular/core';
+import { Component, EventEmitter, HostListener, ViewChildren, Output, Input, Injectable, NgModule, forwardRef, ViewEncapsulation, Optional, Self } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import moment from 'moment';
 import { Subject } from 'rxjs';
@@ -2748,6 +2749,136 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+class Textarea {
+    ngControl;
+    name;
+    id;
+    label = '';
+    placeholder = '';
+    rows = 4;
+    hint = '';
+    required = false;
+    maxLength = null;
+    hasError = false;
+    errorMessage = '';
+    trimWhiteSpaces = false;
+    eventType = 'input';
+    value = '';
+    isDisabled = false;
+    // --- ControlValueAccessor ---
+    onChange = (_) => { };
+    onTouched = () => { };
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    // --- Computed ID ---
+    get effectiveId() {
+        const base = 'brickclay_textarea_';
+        return this.id ? `${base}${this.id}` : `${base}${this.label?.replace(/\s+/g, '_').toLowerCase()}`;
+    }
+    // --- Expose FormControl state ---
+    get control() {
+        return this.ngControl?.control;
+    }
+    get touched() {
+        return this.control?.touched;
+    }
+    get dirty() {
+        return this.control?.dirty;
+    }
+    get errors() {
+        return this.control?.errors;
+    }
+    get showError() {
+        debugger;
+        if (this.hasError)
+            return true;
+        if (!this.control)
+            return false;
+        return (this.required && (this.control.dirty || this.control.touched) &&
+            this.control.invalid &&
+            this.control.errors?.['required']);
+    }
+    // --- Event handler ---
+    handleEvent(event) {
+        const input = event.target;
+        // Always update internal value for the counter
+        this.value = input.value;
+        // Trim spaces if needed
+        if (this.trimWhiteSpaces && this.eventType === 'input') {
+            setTimeout(() => {
+                this.value = this.value.trim();
+                input.value = this.value;
+                if (this.eventType === 'input')
+                    this.onChange(this.value);
+            }, 300); // small delay for input event
+        }
+        else if (this.trimWhiteSpaces) {
+            this.value = this.value.trim();
+            input.value = this.value;
+        }
+        // Update ngModel depending on event type
+        if (this.eventType === 'input' && event.type === 'input')
+            this.onChange(this.value);
+        if (this.eventType === 'change' && event.type === 'change')
+            this.onChange(this.value);
+        if (this.eventType === 'blur' && event.type === 'blur')
+            this.onChange(this.value);
+        // Always mark as touched on blur/focus
+        if (event.type === 'blur' || event.type === 'focus')
+            this.onTouched();
+    }
+    writeValue(value) {
+        this.value = value ?? '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Textarea, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Textarea, isStandalone: true, selector: "brickclay-textarea", inputs: { name: "name", id: "id", label: "label", placeholder: "placeholder", rows: "rows", hint: "hint", required: "required", maxLength: "maxLength", hasError: "hasError", errorMessage: "errorMessage", trimWhiteSpaces: "trimWhiteSpaces", eventType: "eventType" }, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5 w-full\">\r\n\r\n  @if (label) {\r\n    <label\r\n      class=\"text-sm font-medium text-[#141414] block\" [attr.for]=\"effectiveId\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"text-[#E7000B] ml-0.5\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <textarea\r\n      [id]=\"effectiveId\"\r\n      [attr.name]=\"name\"\r\n      [value]=\"value\"\r\n      (input)=\"handleEvent($event)\"\r\n      (change)=\"handleEvent($event)\"\r\n      (blur)=\"handleEvent($event)\"\r\n      (focus)=\"handleEvent($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.maxlength]=\"maxLength\"\r\n      rows=\"{{rows}}\"\r\n      class=\"\r\n        w-full\r\n        px-3 py-2.5\r\n        text-sm\r\n        border border-[#E3E3E7] rounded-[4px]\r\n        outline-none\r\n        transition-colors duration-200\r\n        bg-white resize-y\r\n        placeholder:text-[#6B7080]\r\n      \"\r\n      [ngClass]=\"{\r\n        'border-[#FA727A] text-[#141414]': hasError && !isDisabled,\r\n\r\n        'focus:border-[#6B7080] text-[#141414]': !hasError && !isDisabled,\r\n\r\n        'bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed': isDisabled\r\n      }\"\r\n    ></textarea>\r\n  </div>\r\n\r\n  <div class=\"flex justify-between items-start font-normal text-sm\">\r\n\r\n    <div class=\"flex-1\">\r\n      @if (showError) {\r\n        <span class=\"text-[#F34050]\">\r\n          {{ errorMessage }}\r\n        </span>\r\n      } @else if (hint) {\r\n        <span class=\"text-[#868997]\">\r\n          {{ hint }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    @if (maxLength) {\r\n      <div\r\n        class=\"text-[#868997] tabular-nums flex-shrink-0\"\r\n      >\r\n        {{ value.length }}/{{ maxLength }}\r\n      </div>\r\n    }\r\n\r\n\r\n  </div>\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Textarea, decorators: [{
+            type: Component,
+            args: [{ selector: 'brickclay-textarea', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"flex flex-col gap-1.5 w-full\">\r\n\r\n  @if (label) {\r\n    <label\r\n      class=\"text-sm font-medium text-[#141414] block\" [attr.for]=\"effectiveId\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"text-[#E7000B] ml-0.5\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <textarea\r\n      [id]=\"effectiveId\"\r\n      [attr.name]=\"name\"\r\n      [value]=\"value\"\r\n      (input)=\"handleEvent($event)\"\r\n      (change)=\"handleEvent($event)\"\r\n      (blur)=\"handleEvent($event)\"\r\n      (focus)=\"handleEvent($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.maxlength]=\"maxLength\"\r\n      rows=\"{{rows}}\"\r\n      class=\"\r\n        w-full\r\n        px-3 py-2.5\r\n        text-sm\r\n        border border-[#E3E3E7] rounded-[4px]\r\n        outline-none\r\n        transition-colors duration-200\r\n        bg-white resize-y\r\n        placeholder:text-[#6B7080]\r\n      \"\r\n      [ngClass]=\"{\r\n        'border-[#FA727A] text-[#141414]': hasError && !isDisabled,\r\n\r\n        'focus:border-[#6B7080] text-[#141414]': !hasError && !isDisabled,\r\n\r\n        'bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed': isDisabled\r\n      }\"\r\n    ></textarea>\r\n  </div>\r\n\r\n  <div class=\"flex justify-between items-start font-normal text-sm\">\r\n\r\n    <div class=\"flex-1\">\r\n      @if (showError) {\r\n        <span class=\"text-[#F34050]\">\r\n          {{ errorMessage }}\r\n        </span>\r\n      } @else if (hint) {\r\n        <span class=\"text-[#868997]\">\r\n          {{ hint }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    @if (maxLength) {\r\n      <div\r\n        class=\"text-[#868997] tabular-nums flex-shrink-0\"\r\n      >\r\n        {{ value.length }}/{{ maxLength }}\r\n      </div>\r\n    }\r\n\r\n\r\n  </div>\r\n\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], hasError: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], trimWhiteSpaces: [{
+                type: Input
+            }], eventType: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -2757,5 +2888,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeComponent, BrickclayIcons, BrickclayLib, ButtonGroup, CalendarManagerService, CalendarModule, CheckboxComponent, CustomCalendarComponent, PillComponent, RadioComponent, ScheduledDatePickerComponent, Spinner, TimePickerComponent, ToggleComponent, UiButton, UiIconButton };
+export { BadgeComponent, BrickclayIcons, BrickclayLib, ButtonGroup, CalendarManagerService, CalendarModule, CheckboxComponent, CustomCalendarComponent, PillComponent, RadioComponent, ScheduledDatePickerComponent, Spinner, Textarea, TimePickerComponent, ToggleComponent, UiButton, UiIconButton };
 //# sourceMappingURL=brickclay-org-ui.mjs.map