feat: icon template and select item output call

Author: Luis M Torres

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotted-labs/ngx-bootstrap-components",
-  "version": "0.0.11",
+  "version": "1.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

projects/ngx-bootstrap-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotted-labs/ngx-bootstrap-components",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "peerDependencies": {
     "@angular/common": "^17.3.0",
     "@angular/core": "^17.3.0",

projects/ngx-bootstrap-components/table/src/components/table/table.component.html

@@ -10,6 +10,9 @@
 <table class="table m-0" [class.table-hover]="isClickable()">
   <thead>
     <tr>
+      @if (iconTemplate()) {
+        <th scope="col"></th>
+      }
       @for (column of columns(); track column) {
         <th scope="col">{{ column | translate }}</th>
       }
@@ -19,6 +22,13 @@
     @if (isLoading() && isEmpty()) {
       @for (column of skeletonRowsArr(); track column) {
         <tr>
+          @if (iconTemplate()) {
+            <td style="width: 40px">
+              <span class="placeholder-glow">
+                <span class="placeholder col-12"></span>
+              </span>
+            </td>
+          }
           @for (column of columns(); track column) {
             <td>
               <span class="placeholder-glow">
@@ -48,9 +58,18 @@ <h6 class="text-body-secondary">
       </tr>
     } @else {
       @for (item of items(); track item) {
-        @if (rowTemplate()) {
-          <ng-container [ngTemplateOutlet]="rowTemplate()" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
-        }
+        <tr [class.table-active]="selectedIds()?.includes(item.id)" [class.cursor-pointer]="isClickable()" (click)="selectItem.emit(item)">
+          @if (iconTemplate()) {
+            <td style="width: 40px">
+              <div class="d-flex align-items-center justify-content-center" style="height: 21px">
+                <ng-container [ngTemplateOutlet]="iconTemplate()" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+              </div>
+            </td>
+          }
+          @if (rowTemplate()) {
+            <ng-container [ngTemplateOutlet]="rowTemplate()" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+          }
+        </tr>
       }
     }
   </tbody>

projects/ngx-bootstrap-components/table/src/components/table/table.component.scss

@@ -0,0 +1,5 @@
+:host {
+  .cursor-pointer {
+    cursor: pointer;
+  }
+}

projects/ngx-bootstrap-components/table/src/components/table/table.component.ts

@@ -1,5 +1,15 @@
 import { NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, InputSignal, Signal, TemplateRef, computed, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  InputSignal,
+  OutputEmitterRef,
+  Signal,
+  TemplateRef,
+  computed,
+  input,
+  output,
+} from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
@@ -11,7 +21,7 @@ import { TranslateModule } from '@ngx-translate/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DtlTableComponent {
-  public items: InputSignal<unknown[]> = input.required<unknown[]>();
+  public items: InputSignal<({ id: string } & unknown)[]> = input.required<({ id: string } & unknown)[]>();
   public columns: InputSignal<string[]> = input.required<string[]>();
   public isLoaded: InputSignal<boolean> = input.required<boolean>();
   public isLoading: InputSignal<boolean> = input.required<boolean>();
@@ -21,6 +31,9 @@ export class DtlTableComponent {
   public skeletonRowsArr: Signal<number[]> = computed<number[]>(() => Array(this.skeletonRows()));
   public rowTemplate: InputSignal<TemplateRef<unknown>> = input.required<TemplateRef<unknown>>();
   public emptyTemplate: InputSignal<TemplateRef<unknown>> = input<TemplateRef<unknown>>();
-
+  public iconTemplate: InputSignal<TemplateRef<unknown>> = input<TemplateRef<unknown>>();
+  public selectedIds: InputSignal<unknown[]> = input<unknown[]>();
   public isClickable: InputSignal<boolean> = input<boolean>(true);
+
+  public selectItem: OutputEmitterRef<unknown> = output<unknown>();
 }