@tolle_/tolle-ui 0.0.15-beta → 0.0.17-beta

package/fesm2022/tolle_-tolle-ui.mjs

@@ -108,78 +108,107 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class InputComponent {
     cdr;
+    id = `input-${Math.random().toString(36).substr(2, 9)}`;
+    label = '';
+    hint = '';
+    errorMessage = '';
     type = 'text';
     placeholder = '';
-    disabled = false;
-    error = false;
     size = 'default';
     containerClass = '';
     class = '';
-    // Internal State
+    // New States
+    disabled = false;
+    readonly = false;
+    error = false;
     value = '';
-    // CVA Callbacks
     onChange = () => { };
     onTouched = () => { };
     constructor(cdr) {
         this.cdr = cdr;
     }
-    // --- ControlValueAccessor Implementation ---
     writeValue(value) {
         this.value = value;
         this.cdr.markForCheck();
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
         this.cdr.markForCheck();
     }
     onInputChange(event) {
+        if (this.readonly || this.disabled)
+            return;
         const val = event.target.value;
         this.value = val;
         this.onChange(val);
     }
-    // --- Styling Logic ---
     cn = cn;
     get computedContainerClass() {
-        return cn("group relative flex items-center w-full rounded-md border border-input bg-background ring-offset-background transition-all focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1 shadow-sm", this.size === 'xs' && "h-8 px-2 gap-1.5", this.size === 'sm' && "h-9 px-3 gap-2", this.size === 'default' && "h-10 px-3 gap-2", this.size === 'lg' && "h-11 px-4 gap-3", this.disabled && "cursor-not-allowed opacity-50", this.error && "border-destructive focus-within:ring-destructive", this.containerClass);
+        return cn("group relative flex items-center w-full rounded-md border transition-all shadow-sm", "bg-background ring-offset-background", 
+        // Sizing
+        this.size === 'xs' && "h-8 px-2 gap-1.5", this.size === 'sm' && "h-9 px-3 gap-2", this.size === 'default' && "h-10 px-3 gap-2", this.size === 'lg' && "h-11 px-4 gap-3", 
+        // Interaction States (Focus ring disabled for Readonly/Disabled)
+        !(this.readonly || this.disabled) && "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1", 
+        // Colors & Borders
+        this.error ? "border-destructive focus-within:ring-destructive" : "border-input", 
+        // Disabled vs Readonly styling
+        this.disabled && "cursor-not-allowed opacity-50 bg-muted/30", this.readonly && "cursor-default bg-muted/10 border-dashed focus-within:ring-0", this.containerClass);
     }
     get computedInputClass() {
-        return cn("flex-1 bg-transparent border-none p-0 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-0 disabled:cursor-not-allowed", this.size === 'xs' && "text-xs", this.size === 'lg' && "text-base", this.class);
+        return cn("flex-1 bg-transparent border-none p-0 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-0", this.size === 'xs' && "text-xs", this.size === 'lg' && "text-base", this.disabled && "cursor-not-allowed", this.readonly && "cursor-default", this.class);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InputComponent, isStandalone: true, selector: "tolle-input", inputs: { type: "type", placeholder: "placeholder", disabled: "disabled", error: "error", size: "size", containerClass: "containerClass", class: "class" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InputComponent, isStandalone: true, selector: "tolle-input", inputs: { id: "id", label: "label", hint: "hint", errorMessage: "errorMessage", type: "type", placeholder: "placeholder", size: "size", containerClass: "containerClass", class: "class", disabled: "disabled", readonly: "readonly", error: "error" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputComponent),
                 multi: true
             }
         ], ngImport: i0, template: `
-    <div [class]="computedContainerClass">
+    <div class="flex flex-col gap-1.5 w-full">
+      <label
+        *ngIf="label"
+        [for]="id"
+        [class.opacity-50]="disabled"
+        class="text-sm font-medium text-foreground leading-none transition-opacity"
+      >
+        {{ label }}
+      </label>
 
-      <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
-        <ng-content select="[prefix]"></ng-content>
-      </div>
+      <div [class]="computedContainerClass">
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+          <ng-content select="[prefix]"></ng-content>
+        </div>
 
-      <input
-        [type]="type"
-        [placeholder]="placeholder"
-        [disabled]="disabled"
-        [(ngModel)]="value"
-        (blur)="onTouched()"
-        (input)="onInputChange($event)"
-        [class]="computedInputClass"
-      />
+        <input
+          [id]="id"
+          [type]="type"
+          [placeholder]="placeholder"
+          [disabled]="disabled"
+          [readOnly]="readonly"
+          [(ngModel)]="value"
+          (blur)="onTouched()"
+          (input)="onInputChange($event)"
+          [class]="computedInputClass"
+        />
 
-      <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
-        <ng-content select="[suffix]"></ng-content>
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+          <ng-content select="[suffix]"></ng-content>
+        </div>
       </div>
+
+      <ng-container *ngIf="!disabled">
+        <p *ngIf="hint && !error" class="text-xs text-muted-foreground px-1">
+          {{ hint }}
+        </p>
+        <p *ngIf="error && errorMessage" class="text-xs text-destructive px-1">
+          {{ errorMessage }}
+        </p>
+      </ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -195,35 +224,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         }
                     ],
                     template: `
-    <div [class]="computedContainerClass">
+    <div class="flex flex-col gap-1.5 w-full">
+      <label
+        *ngIf="label"
+        [for]="id"
+        [class.opacity-50]="disabled"
+        class="text-sm font-medium text-foreground leading-none transition-opacity"
+      >
+        {{ label }}
+      </label>
 
-      <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
-        <ng-content select="[prefix]"></ng-content>
-      </div>
+      <div [class]="computedContainerClass">
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+          <ng-content select="[prefix]"></ng-content>
+        </div>
 
-      <input
-        [type]="type"
-        [placeholder]="placeholder"
-        [disabled]="disabled"
-        [(ngModel)]="value"
-        (blur)="onTouched()"
-        (input)="onInputChange($event)"
-        [class]="computedInputClass"
-      />
+        <input
+          [id]="id"
+          [type]="type"
+          [placeholder]="placeholder"
+          [disabled]="disabled"
+          [readOnly]="readonly"
+          [(ngModel)]="value"
+          (blur)="onTouched()"
+          (input)="onInputChange($event)"
+          [class]="computedInputClass"
+        />
 
-      <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
-        <ng-content select="[suffix]"></ng-content>
+        <div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
+          <ng-content select="[suffix]"></ng-content>
+        </div>
       </div>
+
+      <ng-container *ngIf="!disabled">
+        <p *ngIf="hint && !error" class="text-xs text-muted-foreground px-1">
+          {{ hint }}
+        </p>
+        <p *ngIf="error && errorMessage" class="text-xs text-destructive px-1">
+          {{ errorMessage }}
+        </p>
+      </ng-container>
     </div>
   `,
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { id: [{
                 type: Input
-            }], placeholder: [{
+            }], label: [{
                 type: Input
-            }], disabled: [{
+            }], hint: [{
                 type: Input
-            }], error: [{
+            }], errorMessage: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], placeholder: [{
                 type: Input
             }], size: [{
                 type: Input
@@ -231,6 +285,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], class: [{
                 type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], error: [{
+                type: Input
             }] } });
 
 class CardComponent {
@@ -426,6 +486,7 @@ class SelectComponent {
     disabled = false;
     searchable = false;
     size = 'default';
+    readonly = false;
     trigger;
     popover;
     items;
@@ -453,11 +514,19 @@ class SelectComponent {
     }
     // UPDATED: Centralized sizing logic for the trigger
     get computedTriggerClass() {
-        return cn('flex w-full items-center justify-between rounded-md border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring focus:ring-ring focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 transition-all', 'disabled:opacity-50 shadow-sm transition-shadow', this.size === 'xs' && 'h-8 px-2 text-xs', this.size === 'sm' && 'h-9 px-3 text-sm', this.size === 'default' && 'h-10 px-3 text-sm', this.size === 'lg' && 'h-11 px-4 text-base', this.class);
+        return cn('flex w-full items-center justify-between rounded-md border transition-all shadow-sm', 'bg-background ring-offset-background placeholder:text-muted-foreground', 
+        // Sizing
+        this.size === 'xs' && 'h-8 px-2 text-xs', this.size === 'sm' && 'h-9 px-3 text-sm', this.size === 'default' && 'h-10 px-3 text-sm', this.size === 'lg' && 'h-11 px-4 text-base', 
+        // Interaction States (Focus ring disabled for Readonly/Disabled)
+        !(this.readonly || this.disabled) && 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1', 
+        // Colors & Borders (Matching your Hex-based theme logic)
+        this.disabled && 'cursor-not-allowed opacity-50 bg-muted/30 border-input', this.readonly && 'cursor-default bg-muted/10 border-dashed border-input focus:ring-0', !this.disabled && !this.readonly && 'border-input hover:border-accent cursor-pointer', this.class);
     }
     // UPDATED: Dynamic icon sizing relative to the trigger size
     get iconClass() {
-        return cn('ri-arrow-down-s-line text-muted-foreground ml-2 transition-transform duration-200', this.isOpen ? 'rotate-180' : '', (this.size === 'xs' || this.size === 'sm') ? 'text-[14px]' : 'text-[18px]');
+        return cn('ri-arrow-down-s-line text-muted-foreground ml-2 transition-transform duration-200', this.isOpen ? 'rotate-180' : '', (this.size === 'xs' || this.size === 'sm') ? 'text-[14px]' : 'text-[18px]', 
+        // Hide or fade icon when interaction is blocked
+        (this.disabled || this.readonly) && 'opacity-30');
     }
     ngAfterContentInit() {
         this.updateItemSelection();
@@ -471,7 +540,7 @@ class SelectComponent {
         }
     }
     toggle() {
-        if (this.disabled)
+        if (this.disabled || this.readonly)
             return;
         this.isOpen ? this.close() : this.open();
     }
@@ -538,7 +607,7 @@ class SelectComponent {
             this.cleanupAutoUpdate();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, deps: [{ token: SelectService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SelectComponent, isStandalone: true, selector: "tolle-select", inputs: { placeholder: "placeholder", class: "class", disabled: "disabled", searchable: "searchable", size: "size" }, host: { listeners: { "document:mousedown": "onDocumentClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SelectComponent, isStandalone: true, selector: "tolle-select", inputs: { placeholder: "placeholder", class: "class", disabled: "disabled", searchable: "searchable", size: "size", readonly: "readonly" }, host: { listeners: { "document:mousedown": "onDocumentClick($event)" } }, providers: [
             SelectService,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -585,7 +654,7 @@ class SelectComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["type", "placeholder", "disabled", "error", "size", "containerClass", "class"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -653,6 +722,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], size: [{
                 type: Input
+            }], readonly: [{
+                type: Input
             }], trigger: [{
                 type: ViewChild,
                 args: ['trigger']
@@ -1568,7 +1639,7 @@ class MultiSelectComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BadgeComponent, selector: "tolle-badge", inputs: ["variant", "size", "removable", "class"], outputs: ["onRemove"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["type", "placeholder", "disabled", "error", "size", "containerClass", "class"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BadgeComponent, selector: "tolle-badge", inputs: ["variant", "size", "removable", "class"], outputs: ["onRemove"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -2513,7 +2584,7 @@ class PaginationComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "tolle-select", inputs: ["placeholder", "class", "disabled", "searchable", "size"] }, { kind: "component", type: SelectItemComponent, selector: "tolle-select-item", inputs: ["value", "class", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "tolle-select", inputs: ["placeholder", "class", "disabled", "searchable", "size", "readonly"] }, { kind: "component", type: SelectItemComponent, selector: "tolle-select-item", inputs: ["value", "class", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
@@ -2642,6 +2713,16 @@ class DataTableComponent {
     pageSize = 10;
     expandable = false;
     size = 'default';
+    // --- NEW INPUTS FOR COLUMN HIDING ---
+    allowColumnHiding = true;
+    showSettings = true; // Set to false to hide the gear icon/menu entirely
+    // Track visibility state: { 'columnKey': true/false }
+    columnVisibility = {};
+    showColumnMenu = false;
+    // Filter columns based on visibility state
+    get activeColumns() {
+        return this.columns.filter(col => this.columnVisibility[col.key]);
+    }
     // Track which rows are open
     expandedRows = new Set();
     // Use ContentChildren to grab the tolleCell templates from the user's HTML
@@ -2687,11 +2768,25 @@ class DataTableComponent {
         if (changes['data']) {
             this.refreshTable();
         }
+        if (changes['columns']) {
+            this.initializeVisibility();
+        }
+    }
+    initializeVisibility() {
+        // Default all columns to visible if not already set
+        this.columns.forEach(col => {
+            if (this.columnVisibility[col.key] === undefined) {
+                this.columnVisibility[col.key] = true;
+            }
+        });
     }
     // --- Search & Sort & Page Logic ---
     // (Your existing implementation of applySearch, applySort, and updatePage goes here)
     refreshTable() { this.applySearch(); this.applySort(); this.updatePage(); }
     onSearch() { this.currentPage = 1; this.refreshTable(); }
+    toggleColumn(key) {
+        this.columnVisibility[key] = !this.columnVisibility[key];
+    }
     applySearch() {
         if (!this.searchTerm) {
             this.filteredData = [...this.data];
@@ -2749,7 +2844,7 @@ class DataTableComponent {
         return this.cellTemplates?.find(t => t.name === key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DataTableComponent, isStandalone: true, selector: "tolle-data-table", inputs: { data: "data", columns: "columns", searchable: "searchable", paginate: "paginate", pageSize: "pageSize", expandable: "expandable", size: "size", expandedTemplate: "expandedTemplate" }, queries: [{ propertyName: "cellTemplates", predicate: TolleCellDirective }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DataTableComponent, isStandalone: true, selector: "tolle-data-table", inputs: { data: "data", columns: "columns", searchable: "searchable", paginate: "paginate", pageSize: "pageSize", expandable: "expandable", size: "size", allowColumnHiding: "allowColumnHiding", showSettings: "showSettings", expandedTemplate: "expandedTemplate" }, queries: [{ propertyName: "cellTemplates", predicate: TolleCellDirective }], usesOnChanges: true, ngImport: i0, template: `
     <div class="space-y-4">
       <div *ngIf="searchable" class="flex items-center py-2">
         <tolle-input
@@ -2837,7 +2932,7 @@ class DataTableComponent {
         (onPageSizeChange)="updatePage()"
       ></tolle-pagination>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PaginationComponent, selector: "tolle-pagination", inputs: ["class", "showPageLinks", "showPageOptions", "showCurrentPageInfo", "currentPageInfoTemplate", "totalRecords", "currentPageSize", "currentPage", "pageSizeOptions"], outputs: ["onPageNumberChange", "onPageSizeChange"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["type", "placeholder", "disabled", "error", "size", "containerClass", "class"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PaginationComponent, selector: "tolle-pagination", inputs: ["class", "showPageLinks", "showPageOptions", "showCurrentPageInfo", "currentPageInfoTemplate", "totalRecords", "currentPageSize", "currentPage", "pageSizeOptions"], outputs: ["onPageNumberChange", "onPageSizeChange"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
@@ -2949,6 +3044,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], size: [{
                 type: Input
+            }], allowColumnHiding: [{
+                type: Input
+            }], showSettings: [{
+                type: Input
             }], cellTemplates: [{
                 type: ContentChildren,
                 args: [TolleCellDirective]
@@ -3743,7 +3842,7 @@ class DateRangePickerComponent {
         ></tolle-range-calendar>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RangeCalendarComponent, selector: "tolle-range-calendar", inputs: ["class", "disablePastDates"], outputs: ["rangeSelect"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["type", "placeholder", "disabled", "error", "size", "containerClass", "class"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RangeCalendarComponent, selector: "tolle-range-calendar", inputs: ["class", "disablePastDates"], outputs: ["rangeSelect"] }, { kind: "component", type: InputComponent, selector: "tolle-input", inputs: ["id", "label", "hint", "errorMessage", "type", "placeholder", "size", "containerClass", "class", "disabled", "readonly", "error"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -3955,6 +4054,176 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['click']
             }] } });
 
+class TextareaComponent {
+    textareaElement;
+    id = `textarea-${Math.random().toString(36).substr(2, 9)}`;
+    label = '';
+    placeholder = '';
+    hint = '';
+    rows = 3;
+    maxLength;
+    showCharacterCount = false;
+    autoGrow = false;
+    error = false;
+    className = '';
+    // New States
+    disabled = false;
+    readonly = false;
+    value = '';
+    onChange = () => { };
+    onTouched = () => { };
+    ngAfterViewInit() {
+        if (this.autoGrow)
+            this.resize();
+    }
+    get textareaClasses() {
+        return cn('flex w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background transition-all duration-200 shadow-sm', 'placeholder:text-muted-foreground focus-visible:outline-none', 
+        // Focus States (Disabled only when readonly or disabled is true)
+        !(this.readonly || this.disabled) && 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1', 
+        // Border colors
+        this.error ? 'border-destructive' : 'border-input', 
+        // Disabled vs Readonly styles
+        this.disabled && 'cursor-not-allowed opacity-50 bg-muted/30', this.readonly && 'cursor-default bg-muted/10 border-dashed focus-visible:ring-0', 'scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent', 'min-h-[80px]', this.className);
+    }
+    handleInput(event) {
+        if (this.readonly || this.disabled)
+            return;
+        const val = event.target.value;
+        this.value = val;
+        this.onChange(val);
+        if (this.autoGrow)
+            this.resize();
+    }
+    resize() {
+        const textarea = this.textareaElement.nativeElement;
+        textarea.style.height = 'auto';
+        textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+    writeValue(value) {
+        this.value = value;
+        if (this.autoGrow)
+            setTimeout(() => this.resize());
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) { this.disabled = isDisabled; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TextareaComponent, isStandalone: true, selector: "tolle-textarea", inputs: { id: "id", label: "label", placeholder: "placeholder", hint: "hint", rows: "rows", maxLength: "maxLength", showCharacterCount: "showCharacterCount", autoGrow: "autoGrow", error: "error", className: "className", disabled: "disabled", readonly: "readonly" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TextareaComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textareaElement"], descendants: true }], ngImport: i0, template: `
+    <div class="flex flex-col gap-1.5 w-full">
+      <label *ngIf="label" [for]="id"
+             [class.opacity-50]="disabled"
+             class="text-sm font-medium text-foreground leading-none transition-opacity">
+        {{ label }}
+      </label>
+
+      <div class="relative">
+        <textarea
+          #textareaElement
+          [id]="id"
+          [placeholder]="placeholder"
+          [disabled]="disabled"
+          [readOnly]="readonly"
+          [rows]="rows"
+          [(ngModel)]="value"
+          (input)="handleInput($event)"
+          (blur)="onTouched()"
+          [class]="textareaClasses"
+          [style.resize]="(autoGrow || readonly || disabled) ? 'none' : 'vertical'"
+          [style.overflow]="autoGrow ? 'hidden' : 'auto'"
+        ></textarea>
+      </div>
+
+      <div *ngIf="(showCharacterCount || hint) && !disabled" class="flex justify-between items-center px-1">
+        <p *ngIf="hint" class="text-xs text-muted-foreground">{{ hint }}</p>
+        <p *ngIf="showCharacterCount" class="text-[10px] uppercase tracking-wider text-muted-foreground ml-auto font-medium">
+          {{ value.length || 0 }}{{ maxLength ? ' / ' + maxLength : '' }}
+        </p>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextareaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-textarea',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextareaComponent),
+                            multi: true
+                        }
+                    ],
+                    template: `
+    <div class="flex flex-col gap-1.5 w-full">
+      <label *ngIf="label" [for]="id"
+             [class.opacity-50]="disabled"
+             class="text-sm font-medium text-foreground leading-none transition-opacity">
+        {{ label }}
+      </label>
+
+      <div class="relative">
+        <textarea
+          #textareaElement
+          [id]="id"
+          [placeholder]="placeholder"
+          [disabled]="disabled"
+          [readOnly]="readonly"
+          [rows]="rows"
+          [(ngModel)]="value"
+          (input)="handleInput($event)"
+          (blur)="onTouched()"
+          [class]="textareaClasses"
+          [style.resize]="(autoGrow || readonly || disabled) ? 'none' : 'vertical'"
+          [style.overflow]="autoGrow ? 'hidden' : 'auto'"
+        ></textarea>
+      </div>
+
+      <div *ngIf="(showCharacterCount || hint) && !disabled" class="flex justify-between items-center px-1">
+        <p *ngIf="hint" class="text-xs text-muted-foreground">{{ hint }}</p>
+        <p *ngIf="showCharacterCount" class="text-[10px] uppercase tracking-wider text-muted-foreground ml-auto font-medium">
+          {{ value.length || 0 }}{{ maxLength ? ' / ' + maxLength : '' }}
+        </p>
+      </div>
+    </div>
+  `
+                }]
+        }], propDecorators: { textareaElement: [{
+                type: ViewChild,
+                args: ['textareaElement']
+            }], id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], showCharacterCount: [{
+                type: Input
+            }], autoGrow: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of tolle
  */
@@ -3963,5 +4232,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionItemComponent, BadgeComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, InputComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, PaginationComponent, RangeCalendarComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SkeletonComponent, SwitchComponent, TOLLE_CONFIG, ThemeService, ToastContainerComponent, ToastService, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
+export { AccordionComponent, AccordionItemComponent, BadgeComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, InputComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, PaginationComponent, RangeCalendarComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SkeletonComponent, SwitchComponent, TOLLE_CONFIG, TextareaComponent, ThemeService, ToastContainerComponent, ToastService, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
 //# sourceMappingURL=tolle_-tolle-ui.mjs.map