orbiq-neural-ui-kit 1.1.12 → 1.1.14

package/fesm2022/orbiq-neural-ui-kit.mjs

@@ -12422,6 +12422,33 @@ class NeuralDataTableComponent {
     ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     rowKey = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
+    // Multi-selection
+    selectable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+    selectedKeys = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+    toggleAll(checked) {
+        if (checked) {
+            this.selectedKeys.set(new Set(this.rows().map(r => r[this.rowKey()])));
+        }
+        else {
+            this.selectedKeys.set(new Set());
+        }
+    }
+    toggleRow(key) {
+        const set = new Set(this.selectedKeys());
+        if (set.has(key)) {
+            set.delete(key);
+        }
+        else {
+            set.add(key);
+        }
+        this.selectedKeys.set(set);
+    }
+    isAllSelected() {
+        const length = this.rows().length;
+        return length > 0 && this.selectedKeys().size === length;
+    }
     page = input(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
     totalPages = input(1, /* @ts-ignore */
@@ -12495,7 +12522,7 @@ class NeuralDataTableComponent {
         this.sortChange.emit(key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralDataTableComponent, isStandalone: true, selector: "neural-data-table", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, hasInfo: { classPropertyName: "hasInfo", publicName: "hasInfo", isSignal: true, isRequired: false, transformFunction: null }, newLabel: { classPropertyName: "newLabel", publicName: "newLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, allColumns: { classPropertyName: "allColumns", publicName: "allColumns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: true, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, emptyStateTitle: { classPropertyName: "emptyStateTitle", publicName: "emptyStateTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyStateDesc: { classPropertyName: "emptyStateDesc", publicName: "emptyStateDesc", isSignal: true, isRequired: false, transformFunction: null }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleActions: { classPropertyName: "maxVisibleActions", publicName: "maxVisibleActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSearch: "onSearch", onPageChange: "onPageChange", sortChange: "sortChange", onInfoClick: "onInfoClick", onHelpClick: "onHelpClick", onRefreshClick: "onRefreshClick", onViewChange: "onViewChange", onFilterClick: "onFilterClick", onSortChangeClick: "onSortChangeClick", onSearchClick: "onSearchClick", onCustomActionClick: "onCustomActionClick", onNewClick: "onNewClick" }, host: { properties: { "attr.title": "null" } }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cellTemplate"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralDataTableComponent, isStandalone: true, selector: "neural-data-table", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, hasInfo: { classPropertyName: "hasInfo", publicName: "hasInfo", isSignal: true, isRequired: false, transformFunction: null }, newLabel: { classPropertyName: "newLabel", publicName: "newLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, allColumns: { classPropertyName: "allColumns", publicName: "allColumns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: true, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, emptyStateTitle: { classPropertyName: "emptyStateTitle", publicName: "emptyStateTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyStateDesc: { classPropertyName: "emptyStateDesc", publicName: "emptyStateDesc", isSignal: true, isRequired: false, transformFunction: null }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleActions: { classPropertyName: "maxVisibleActions", publicName: "maxVisibleActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSearch: "onSearch", onPageChange: "onPageChange", sortChange: "sortChange", onInfoClick: "onInfoClick", onHelpClick: "onHelpClick", onRefreshClick: "onRefreshClick", onViewChange: "onViewChange", onFilterClick: "onFilterClick", onSortChangeClick: "onSortChangeClick", onSearchClick: "onSearchClick", onCustomActionClick: "onCustomActionClick", onNewClick: "onNewClick" }, host: { properties: { "attr.title": "null" } }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cellTemplate"], descendants: true }], ngImport: i0, template: `
     <div class="flex flex-col w-full h-full bg-white rounded-md border border-outline-gray-2 shadow-sm overflow-hidden">
       
       <!-- Top Header Area -->
@@ -12579,14 +12606,27 @@ class NeuralDataTableComponent {
         <table class="w-full text-left border-separate" style="border-spacing: 0;">
           <thead>
             <tr>
+              @if (selectable()) {
+                <th 
+                  class="px-4 py-1.5 align-middle w-12 bg-surface-gray-1 border-0"
+                  style="border-top-left-radius: 8px; border-bottom-left-radius: 8px;"
+                >
+                  <div class="flex items-center justify-center h-full w-full">
+                    <neural-checkbox size="sm" [checkedModel]="isAllSelected()" (checkedModelChange)="toggleAll($event)"></neural-checkbox>
+                  </div>
+                </th>
+              }
               @for (col of visibleColumns(); track col.key; let first = $first; let last = $last) {
-                <th class="p-0 border-0 align-middle" [style.width]="col.width || 'auto'">
-                  <div 
-                    class="flex items-center justify-between group cursor-pointer hover:text-ink-gray-9 px-4 py-2.5 text-[13px] font-medium text-ink-gray-6 bg-surface-gray-1 h-full w-full"
-                    [class.rounded-l-lg]="first"
-                    [class.rounded-r-lg]="last"
-                    (click)="col.sortable ? onSort(col.key) : null"
-                  >
+                <th 
+                  class="px-4 py-1.5 text-[13px] font-medium text-ink-gray-6 bg-surface-gray-1 border-0 align-middle hover:text-ink-gray-9 cursor-pointer transition-colors"
+                  [style.width]="col.width || 'auto'"
+                  [style.border-top-left-radius]="!selectable() && first ? '8px' : '0'"
+                  [style.border-bottom-left-radius]="!selectable() && first ? '8px' : '0'"
+                  [style.border-top-right-radius]="last ? '8px' : '0'"
+                  [style.border-bottom-right-radius]="last ? '8px' : '0'"
+                  (click)="col.sortable ? onSort(col.key) : null"
+                >
+                  <div class="flex items-center justify-between group">
                     <span class="truncate">{{ col.label }}</span>
                     @if (col.sortable) {
                       <i class="lucide-caret-down size-3.5 text-ink-gray-5 opacity-0 group-hover:opacity-100 transition-opacity"></i>
@@ -12599,7 +12639,12 @@ class NeuralDataTableComponent {
           <tbody>
             @if (rows().length > 0) {
               @for (row of rows(); track row[rowKey()]) {
-                <tr class="hover:bg-surface-gray-1 transition-colors group">
+                <tr class="hover:bg-surface-gray-1 transition-colors group cursor-pointer" (click)="selectable() ? toggleRow(row[rowKey()]) : null">
+                  @if (selectable()) {
+                    <td class="px-4 py-2 border-b border-outline-gray-1 group-last:border-b-0 w-12 align-middle text-center" (click)="$event.stopPropagation()">
+                      <neural-checkbox size="sm" [checkedModel]="selectedKeys().has(row[rowKey()])" (checkedModelChange)="toggleRow(row[rowKey()])"></neural-checkbox>
+                    </td>
+                  }
                   @for (col of visibleColumns(); track col.key; let last = $last) {
                     <td 
                       class="px-4 py-3 text-[13px] font-normal text-ink-gray-8 border-b border-outline-gray-1 group-last:border-b-0"
@@ -12802,14 +12847,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         <table class="w-full text-left border-separate" style="border-spacing: 0;">
           <thead>
             <tr>
+              @if (selectable()) {
+                <th 
+                  class="px-4 py-1.5 align-middle w-12 bg-surface-gray-1 border-0"
+                  style="border-top-left-radius: 8px; border-bottom-left-radius: 8px;"
+                >
+                  <div class="flex items-center justify-center h-full w-full">
+                    <neural-checkbox size="sm" [checkedModel]="isAllSelected()" (checkedModelChange)="toggleAll($event)"></neural-checkbox>
+                  </div>
+                </th>
+              }
               @for (col of visibleColumns(); track col.key; let first = $first; let last = $last) {
-                <th class="p-0 border-0 align-middle" [style.width]="col.width || 'auto'">
-                  <div 
-                    class="flex items-center justify-between group cursor-pointer hover:text-ink-gray-9 px-4 py-2.5 text-[13px] font-medium text-ink-gray-6 bg-surface-gray-1 h-full w-full"
-                    [class.rounded-l-lg]="first"
-                    [class.rounded-r-lg]="last"
-                    (click)="col.sortable ? onSort(col.key) : null"
-                  >
+                <th 
+                  class="px-4 py-1.5 text-[13px] font-medium text-ink-gray-6 bg-surface-gray-1 border-0 align-middle hover:text-ink-gray-9 cursor-pointer transition-colors"
+                  [style.width]="col.width || 'auto'"
+                  [style.border-top-left-radius]="!selectable() && first ? '8px' : '0'"
+                  [style.border-bottom-left-radius]="!selectable() && first ? '8px' : '0'"
+                  [style.border-top-right-radius]="last ? '8px' : '0'"
+                  [style.border-bottom-right-radius]="last ? '8px' : '0'"
+                  (click)="col.sortable ? onSort(col.key) : null"
+                >
+                  <div class="flex items-center justify-between group">
                     <span class="truncate">{{ col.label }}</span>
                     @if (col.sortable) {
                       <i class="lucide-caret-down size-3.5 text-ink-gray-5 opacity-0 group-hover:opacity-100 transition-opacity"></i>
@@ -12822,7 +12880,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           <tbody>
             @if (rows().length > 0) {
               @for (row of rows(); track row[rowKey()]) {
-                <tr class="hover:bg-surface-gray-1 transition-colors group">
+                <tr class="hover:bg-surface-gray-1 transition-colors group cursor-pointer" (click)="selectable() ? toggleRow(row[rowKey()]) : null">
+                  @if (selectable()) {
+                    <td class="px-4 py-2 border-b border-outline-gray-1 group-last:border-b-0 w-12 align-middle text-center" (click)="$event.stopPropagation()">
+                      <neural-checkbox size="sm" [checkedModel]="selectedKeys().has(row[rowKey()])" (checkedModelChange)="toggleRow(row[rowKey()])"></neural-checkbox>
+                    </td>
+                  }
                   @for (col of visibleColumns(); track col.key; let last = $last) {
                     <td 
                       class="px-4 py-3 text-[13px] font-normal text-ink-gray-8 border-b border-outline-gray-1 group-last:border-b-0"
@@ -12925,7 +12988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     </div>
   `
                 }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], hasInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasInfo", required: false }] }], newLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "newLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], allColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "allColumns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: true }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], emptyStateTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStateTitle", required: false }] }], emptyStateDesc: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStateDesc", required: false }] }], customActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "customActions", required: false }] }], maxVisibleActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleActions", required: false }] }], onSearch: [{
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], hasInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasInfo", required: false }] }], newLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "newLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], allColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "allColumns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: true }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], emptyStateTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStateTitle", required: false }] }], emptyStateDesc: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStateDesc", required: false }] }], customActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "customActions", required: false }] }], maxVisibleActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleActions", required: false }] }], onSearch: [{
                 type: Output
             }], onPageChange: [{
                 type: Output