@brickclay-org/ui 0.0.16 → 0.0.18

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,10 +1,14 @@
 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, ViewChild } 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';
+import * as i2 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 
 // Icon paths that will be resolved relative to the library's assets folder
 // When published to npm, users will need to configure their angular.json to include these assets
@@ -2487,7 +2491,7 @@ class PillComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PillComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'brickclay-pill', imports: [], template: "<span [className]=\"containerClasses\">\r\n\r\n  @if (dot === 'left') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  <span>{{ label }}</span>\r\n\r\n  @if (dot === 'right') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  @if (removable) {\r\n    <button\r\n      (click)=\"onRemove($event)\"\r\n      class=\"pill-close \"> <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n    </svg>\r\n</button>\r\n  }\r\n</span>\r\n", styles: [".pill{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-full;}.pill-xsm{@apply px-2 py-0.5 text-[10px] leading-[14px];}.pill-sm{@apply px-2 py-0.5 text-xs leading-[18px];}.pill-md{@apply px-2 py-0.5 text-sm;}.pill-lg{@apply px-3 py-1 text-sm;}.dot{@apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;}.pill-close{@apply flex items-center justify-center rounded-full text-inherit transition-colors;}.pill-xsm .pill-close,.pill-sm .pill-close{@apply w-3 h-3;}.pill-md .pill-close,.pill-lg .pill-close{@apply w-3.5 h-3.5;}.Gray-Solid{@apply bg-[#6B7080] border-[#6B7080] text-white;}.Primary-Solid{@apply bg-[#294FFF] border-[#294FFF] text-white;}.Error-Solid{@apply bg-[#FA727A] border-[#FA727A] text-[#4C0513];}.Warning-Solid{@apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04];}.Success-Solid{@apply bg-[#57D175] border-[#57D175] text-[#461C04];}.Success-Solid .dot{@apply bg-[#082B13];}.Purple-Solid{@apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04];}.Cyan-Solid{@apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04];}.Gray-Light{@apply bg-[#F4F4F6] border-transparent text-[#363C51];}.Primary-Light{@apply bg-[#E5F3FF] border-transparent text-[#1434CB];}.Error-Light{@apply bg-[#FFF1F1] border-transparent text-[#CB1432];}.Warning-Light{@apply bg-[#FFEED7] border-transparent text-[#A04C02];}.Success-Light{@apply bg-[#F1FCF3] border-transparent text-[#1E7735];}.Purple-Light{@apply bg-[#F6EAFD] border-transparent text-[#9130C0];}.Cyan-Light{@apply bg-[#F1FAFE] border-transparent text-[#096E9B];}.Gray-Outline{@apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51];}.Primary-Outline{@apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB];}.Error-Outline{@apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432];}.Warning-Outline{@apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02];}.Success-Outline{@apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735];}.Purple-Outline{@apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0];}.Cyan-Outline{@apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B];}.Gray-Transparent{@apply bg-transparent border-[#BBBDC5] text-[#363C51];}.Primary-Transparent{@apply bg-transparent border-[#3F71FF] text-[#1434CB];}.Error-Transparent{@apply bg-transparent border-[#FA727A] text-[#CB1432];}.Warning-Transparent{@apply bg-transparent border-[#FBAE58] text-[#A04C02];}.Success-Transparent{@apply bg-transparent border-[#57D175] text-[#1E7735];}.Purple-Transparent{@apply bg-transparent border-[#CE8EF2] text-[#9130C0];}.Cyan-Transparent{@apply bg-transparent border-[#3FC2F1] text-[#096E9B];}\n"] }]
+            args: [{ selector: 'brickclay-pill', standalone: true, template: "<span [className]=\"containerClasses\">\r\n\r\n  @if (dot === 'left') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  <span>{{ label }}</span>\r\n\r\n  @if (dot === 'right') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  @if (removable) {\r\n    <button\r\n      (click)=\"onRemove($event)\"\r\n      class=\"pill-close \"> <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n    </svg>\r\n</button>\r\n  }\r\n</span>\r\n", styles: [".pill{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-full;}.pill-xsm{@apply px-2 py-0.5 text-[10px] leading-[14px];}.pill-sm{@apply px-2 py-0.5 text-xs leading-[18px];}.pill-md{@apply px-2 py-0.5 text-sm;}.pill-lg{@apply px-3 py-1 text-sm;}.dot{@apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;}.pill-close{@apply flex items-center justify-center rounded-full text-inherit transition-colors;}.pill-xsm .pill-close,.pill-sm .pill-close{@apply w-3 h-3;}.pill-md .pill-close,.pill-lg .pill-close{@apply w-3.5 h-3.5;}.Gray-Solid{@apply bg-[#6B7080] border-[#6B7080] text-white;}.Primary-Solid{@apply bg-[#294FFF] border-[#294FFF] text-white;}.Error-Solid{@apply bg-[#FA727A] border-[#FA727A] text-[#4C0513];}.Warning-Solid{@apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04];}.Success-Solid{@apply bg-[#57D175] border-[#57D175] text-[#461C04];}.Success-Solid .dot{@apply bg-[#082B13];}.Purple-Solid{@apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04];}.Cyan-Solid{@apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04];}.Gray-Light{@apply bg-[#F4F4F6] border-transparent text-[#363C51];}.Primary-Light{@apply bg-[#E5F3FF] border-transparent text-[#1434CB];}.Error-Light{@apply bg-[#FFF1F1] border-transparent text-[#CB1432];}.Warning-Light{@apply bg-[#FFEED7] border-transparent text-[#A04C02];}.Success-Light{@apply bg-[#F1FCF3] border-transparent text-[#1E7735];}.Purple-Light{@apply bg-[#F6EAFD] border-transparent text-[#9130C0];}.Cyan-Light{@apply bg-[#F1FAFE] border-transparent text-[#096E9B];}.Gray-Outline{@apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51];}.Primary-Outline{@apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB];}.Error-Outline{@apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432];}.Warning-Outline{@apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02];}.Success-Outline{@apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735];}.Purple-Outline{@apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0];}.Cyan-Outline{@apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B];}.Gray-Transparent{@apply bg-transparent border-[#BBBDC5] text-[#363C51];}.Primary-Transparent{@apply bg-transparent border-[#3F71FF] text-[#1434CB];}.Error-Transparent{@apply bg-transparent border-[#FA727A] text-[#CB1432];}.Warning-Transparent{@apply bg-transparent border-[#FBAE58] text-[#A04C02];}.Success-Transparent{@apply bg-transparent border-[#57D175] text-[#1E7735];}.Purple-Transparent{@apply bg-transparent border-[#CE8EF2] text-[#9130C0];}.Cyan-Transparent{@apply bg-transparent border-[#3FC2F1] text-[#096E9B];}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], variant: [{
@@ -2748,6 +2752,259 @@ 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
+            }] } });
+
+class Table {
+    draggable = false;
+    columns = [];
+    result;
+    actions = [];
+    actionClick = new EventEmitter();
+    sortChange = new EventEmitter();
+    dragDropChange = new EventEmitter();
+    sortColumn;
+    sortDirection = 'asc';
+    tableScrollContainer;
+    get firstVisibleColumnIndex() {
+        const index = this.columns.findIndex(col => col.visible !== false);
+        return index >= 0 ? index : 0;
+    }
+    /* ---------- Sorting ---------- */
+    sort(column, index) {
+        if (!column.sortable || !column.field)
+            return;
+        // Toggle sort direction
+        this.sortDirection =
+            this.sortColumn === column.field ? (this.sortDirection === 'asc' ? 'desc' : 'asc') : 'asc';
+        this.sortColumn = column.field;
+        // Emit sort change separately
+        this.sortChange.emit({
+            columnIndex: index,
+            column,
+            direction: this.sortDirection,
+        });
+    }
+    /* ---------- Visibility ---------- */
+    isColumnVisible(column) {
+        return column.visible !== false;
+    }
+    /* ---------- Cell Value ---------- */
+    getCellValue(row, column) {
+        if (column.formatter) {
+            return column.formatter(row);
+        }
+        if (column.field) {
+            return String(row[column.field] ?? '');
+        }
+        return '';
+    }
+    /* ---------- Actions ---------- */
+    emitAction(action, row) {
+        this.actionClick.emit({
+            action: action.name,
+            row,
+        });
+    }
+    dropList(event) {
+        if (!this.draggable || !this.result)
+            return;
+        moveItemInArray(this.result, event.previousIndex, event.currentIndex);
+        // Update existing sortOrder on T
+        this.result.forEach((item, index) => {
+            item.sortOrder = index + 1;
+        });
+        // Emit reordered list
+        this.dragDropChange.emit(this.result);
+    }
+    onDragMoved(event) {
+        if (!this.tableScrollContainer)
+            return;
+        const container = this.tableScrollContainer.nativeElement;
+        const rect = container.getBoundingClientRect();
+        const pointerY = event.pointerPosition.y - rect.top;
+        const threshold = 80;
+        const maxSpeed = 25;
+        if (pointerY < threshold) {
+            const intensity = 1 - pointerY / threshold;
+            container.scrollTop -= Math.min(maxSpeed, intensity * maxSpeed);
+        }
+        else if (pointerY > rect.height - threshold) {
+            const intensity = 1 - (rect.height - pointerY) / threshold;
+            container.scrollTop += Math.min(maxSpeed, intensity * maxSpeed);
+        }
+    }
+    onDragStart(event) {
+        const row = event.source.element.nativeElement;
+        const cells = Array.from(row.querySelectorAll('td'));
+        setTimeout(() => {
+            const preview = document.querySelector('.cdk-drag-preview');
+            if (!preview)
+                return;
+            const previewCells = preview.querySelectorAll('td');
+            cells.forEach((cell, index) => {
+                const width = cell.getBoundingClientRect().width + 'px';
+                const previewCell = previewCells[index];
+                if (previewCell) {
+                    previewCell.style.width = width;
+                    previewCell.style.minWidth = width;
+                    previewCell.style.maxWidth = width;
+                }
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Table, isStandalone: true, selector: "brickclay-table", inputs: { draggable: "draggable", columns: "columns", result: "result", actions: "actions" }, outputs: { actionClick: "actionClick", sortChange: "sortChange", dragDropChange: "dragDropChange" }, viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], ngImport: i0, template: "<div\r\n  #tableScrollContainer\r\n  cdkScrollable\r\n  class=\"h-[calc(100vh-260px)] overflow-y-auto\">\r\n\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n\r\n    <!-- ================= HEADER ================= -->\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns; track col.header;let i=$index;) {\r\n        @if (isColumnVisible(col)) {\r\n          <th\r\n            class=\"table-header sticky top-0 cursor-pointer\"\r\n            [class.action-sticky]=\"col.sticky\"\r\n            [class.z-10]=\"col.sticky\"\r\n            [ngClass]=\"col.headerClass\"\r\n            [ngClass]=\"col.cellClass\"\r\n            (click)=\"sort(col,i)\"\r\n          >\r\n            <span class=\"flex items-center gap-1\"\r\n              [ngClass]=\"sortColumn === col.field\r\n                ? (sortDirection === 'asc' ? 'asc' : 'desc')\r\n                : ''\">\r\n              {{ col.header }}\r\n              @if (col.sortable) {\r\n                <span class=\"sort-icon\"></span>\r\n              }\r\n            </span>\r\n          </th>\r\n        }\r\n      }\r\n\r\n      @if (actions.length) {\r\n        <th class=\"table-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20\">\r\n          Action\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\">\r\n\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\" [ngClass]=\"{ 'cursor-move ': draggable }\">\r\n\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"table-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span cdkDragHandle class=\"mr-2 text-gray-400\" [ngClass]=\"{ 'cursor-move': draggable }\">\u2630</span>\r\n                }\r\n                {{ getCellValue(row, col) }}\r\n              </td>\r\n            }\r\n          }\r\n\r\n       @if (actions.length) {\r\n          <td class=\"table-cell action-sticky text-center\">\r\n            <div class=\"flex items-center justify-center gap-1.5\">\r\n              @for (action of actions; track action.name) {\r\n                @if (action.hasPermission) {\r\n                     <!-- appTooltip=\"{{ action.tooltip }}\"\r\n                    appTooltipPosition=\"top\" -->\r\n                  <button\r\n                    class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                    (click)=\"emitAction(action, row)\"\r\n\r\n                  >\r\n                    <img\r\n                      [src]=\"action.icon\"\r\n                      width=\"14\"\r\n                      height=\"14\"\r\n                      alt=\"action-icon\"\r\n                    />\r\n                  </button>\r\n                }\r\n              }\r\n            </div>\r\n          </td>\r\n        }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: ScrollingModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, decorators: [{
+            type: Component,
+            args: [{ selector: 'brickclay-table', standalone: true, imports: [CommonModule, DragDropModule, ScrollingModule], template: "<div\r\n  #tableScrollContainer\r\n  cdkScrollable\r\n  class=\"h-[calc(100vh-260px)] overflow-y-auto\">\r\n\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n\r\n    <!-- ================= HEADER ================= -->\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns; track col.header;let i=$index;) {\r\n        @if (isColumnVisible(col)) {\r\n          <th\r\n            class=\"table-header sticky top-0 cursor-pointer\"\r\n            [class.action-sticky]=\"col.sticky\"\r\n            [class.z-10]=\"col.sticky\"\r\n            [ngClass]=\"col.headerClass\"\r\n            [ngClass]=\"col.cellClass\"\r\n            (click)=\"sort(col,i)\"\r\n          >\r\n            <span class=\"flex items-center gap-1\"\r\n              [ngClass]=\"sortColumn === col.field\r\n                ? (sortDirection === 'asc' ? 'asc' : 'desc')\r\n                : ''\">\r\n              {{ col.header }}\r\n              @if (col.sortable) {\r\n                <span class=\"sort-icon\"></span>\r\n              }\r\n            </span>\r\n          </th>\r\n        }\r\n      }\r\n\r\n      @if (actions.length) {\r\n        <th class=\"table-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20\">\r\n          Action\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\">\r\n\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\" [ngClass]=\"{ 'cursor-move ': draggable }\">\r\n\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"table-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span cdkDragHandle class=\"mr-2 text-gray-400\" [ngClass]=\"{ 'cursor-move': draggable }\">\u2630</span>\r\n                }\r\n                {{ getCellValue(row, col) }}\r\n              </td>\r\n            }\r\n          }\r\n\r\n       @if (actions.length) {\r\n          <td class=\"table-cell action-sticky text-center\">\r\n            <div class=\"flex items-center justify-center gap-1.5\">\r\n              @for (action of actions; track action.name) {\r\n                @if (action.hasPermission) {\r\n                     <!-- appTooltip=\"{{ action.tooltip }}\"\r\n                    appTooltipPosition=\"top\" -->\r\n                  <button\r\n                    class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                    (click)=\"emitAction(action, row)\"\r\n\r\n                  >\r\n                    <img\r\n                      [src]=\"action.icon\"\r\n                      width=\"14\"\r\n                      height=\"14\"\r\n                      alt=\"action-icon\"\r\n                    />\r\n                  </button>\r\n                }\r\n              }\r\n            </div>\r\n          </td>\r\n        }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+        }], propDecorators: { draggable: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], result: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }], sortChange: [{
+                type: Output
+            }], dragDropChange: [{
+                type: Output
+            }], tableScrollContainer: [{
+                type: ViewChild,
+                args: ['tableScrollContainer', { static: false }]
+            }] } });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -2757,5 +3014,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, Table, Textarea, TimePickerComponent, ToggleComponent, UiButton, UiIconButton };
 //# sourceMappingURL=brickclay-org-ui.mjs.map