orbiq-neural-ui-kit 1.1.12 → 1.1.13

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,12 +12606,21 @@ class NeuralDataTableComponent {
         <table class="w-full text-left border-separate" style="border-spacing: 0;">
           <thead>
             <tr>
+              @if (selectable()) {
+                <th class="p-0 border-0 align-middle w-12">
+                  <div class="flex items-center justify-center px-4 py-1.5 bg-surface-gray-1 h-full w-full rounded-l-lg">
+                    <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"
+                    class="flex items-center justify-between group cursor-pointer hover:text-ink-gray-9 px-4 py-1.5 text-[13px] font-medium text-ink-gray-6 bg-surface-gray-1 h-full w-full"
+                    [ngClass]="{
+                      'rounded-l-lg': !selectable() && first,
+                      'rounded-r-lg': last
+                    }"
                     (click)="col.sortable ? onSort(col.key) : null"
                   >
                     <span class="truncate">{{ col.label }}</span>
@@ -12599,7 +12635,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"
@@ -12700,7 +12741,7 @@ class NeuralDataTableComponent {
         </div>
       </neural-dialog>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }, { kind: "component", type: NeuralDialogComponent, selector: "neural-dialog", inputs: ["openModel", "title", "message", "icon", "size", "position", "paddingTop", "actions", "dismissible", "showCloseButton", "bare", "hasTitleSlot", "hasActionsSlot", "hasDefaultSlot"], outputs: ["openModelChange"] }, { kind: "component", type: NeuralSwitchComponent, selector: "neural-switch", inputs: ["valueModel", "size", "padded", "disabled", "required", "controlPosition", "icon", "label", "description", "error", "id", "hasLabelSlot", "hasDescriptionSlot"], outputs: ["valueModelChange"] }, { kind: "component", type: NeuralCheckboxComponent, selector: "neural-checkbox", inputs: ["checkedModel", "size", "padded", "indeterminate", "disabled", "required", "label", "description", "error", "id", "hasLabelSlot", "hasDescriptionSlot"], outputs: ["checkedModelChange"] }, { kind: "component", type: NeuralDropdownComponent, selector: "neural-dropdown", inputs: ["options", "side", "align", "offset", "buttonLabel", "hasTriggerSlot"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }, { kind: "component", type: NeuralDialogComponent, selector: "neural-dialog", inputs: ["openModel", "title", "message", "icon", "size", "position", "paddingTop", "actions", "dismissible", "showCloseButton", "bare", "hasTitleSlot", "hasActionsSlot", "hasDefaultSlot"], outputs: ["openModelChange"] }, { kind: "component", type: NeuralSwitchComponent, selector: "neural-switch", inputs: ["valueModel", "size", "padded", "disabled", "required", "controlPosition", "icon", "label", "description", "error", "id", "hasLabelSlot", "hasDescriptionSlot"], outputs: ["valueModelChange"] }, { kind: "component", type: NeuralCheckboxComponent, selector: "neural-checkbox", inputs: ["checkedModel", "size", "padded", "indeterminate", "disabled", "required", "label", "description", "error", "id", "hasLabelSlot", "hasDescriptionSlot"], outputs: ["checkedModelChange"] }, { kind: "component", type: NeuralDropdownComponent, selector: "neural-dropdown", inputs: ["options", "side", "align", "offset", "buttonLabel", "hasTriggerSlot"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDataTableComponent, decorators: [{
             type: Component,
@@ -12802,12 +12843,21 @@ 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="p-0 border-0 align-middle w-12">
+                  <div class="flex items-center justify-center px-4 py-1.5 bg-surface-gray-1 h-full w-full rounded-l-lg">
+                    <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"
+                    class="flex items-center justify-between group cursor-pointer hover:text-ink-gray-9 px-4 py-1.5 text-[13px] font-medium text-ink-gray-6 bg-surface-gray-1 h-full w-full"
+                    [ngClass]="{
+                      'rounded-l-lg': !selectable() && first,
+                      'rounded-r-lg': last
+                    }"
                     (click)="col.sortable ? onSort(col.key) : null"
                   >
                     <span class="truncate">{{ col.label }}</span>
@@ -12822,7 +12872,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 +12980,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