Merge pull request #3 from Charmedme/2.0.4

Fix an alignment issue when item has no children

package.json

@@ -1,11 +1,11 @@
 {
   "name": "@charmedme/ngx-treeview",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "license": "MIT",
   "contributors": [
     "Charmedme"
   ],
-  "description": "An Angular treeview component with checkbox",
+  "description": "An Angular Boostrap treeview component with checkboxes",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

projects/ngx-treeview/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@charmedme/ngx-treeview",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "license": "MIT",
   "contributors": [
     "Charmedme"
   ],
-  "description": "An Angular treeview component with checkbox",
+  "description": "An Angular Boostrap treeview component with checkboxes",
   "keywords": [
     "ng",
     "ngx",

projects/ngx-treeview/src/lib/components/treeview/treeview.component.html

@@ -1,9 +1,9 @@
 <ng-template #defaultItemTemplate let-item="item" let-onCollapseExpand="onCollapseExpand"
   let-onCheckedChange="onCheckedChange">
 
-  <div class="row treeview-row">
-    <div class="col-auto treeview-col">
-      <i *ngIf="item.children" (click)="onCollapseExpand()" aria-hidden="true" [ngSwitch]="item.collapsed">
+  <div class="row treeview-row-item">
+    <div class="col-auto">
+      <i [ngClass]="{'visible': item.children, 'invisible': !item.children}" (click)="onCollapseExpand()" aria-hidden="true" [ngSwitch]="item.collapsed">
         <svg *ngSwitchCase="true" width="0.8rem" height="0.8rem" viewBox="0 0 16 16" class="bi bi-caret-right-fill"
           fill="currentColor" xmlns="http://www.w3.org/2000/svg">
           <path
@@ -16,7 +16,7 @@
         </svg>
       </i>
     </div>
-    <div class="col treeview-col">
+    <div class="col">
       <div class="form-check">
         <input type="checkbox" class="form-check-input" [(ngModel)]="item.checked" (ngModelChange)="onCheckedChange()"
           [disabled]="item.disabled" [indeterminate]="item.indeterminate" />

projects/ngx-treeview/src/lib/components/treeview/treeview.component.scss

@@ -21,11 +21,11 @@
         margin-right: 0.3rem;
       }
     }
-  }
 
-  .treeview-row {
-    .treeview-col:last-child {
-      padding-left: 0;
+    .treeview-row-item {
+      .col {
+        padding-left: 0;
+      }
     }
   }
 }
@@ -38,4 +38,4 @@
 .treeview-text {
   padding: 0.3rem 0;
   white-space: nowrap;
-}
+}