lagt till input för att välja första item i listan

Vastra-Gotalandsregionen · Feb 1, 2024 · a7eb65a · a7eb65a
1 parent 632c932
commit a7eb65a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/projects/komponentkartan/src/lib/controls/selectablelist/selectablelist.component.ts b/projects/komponentkartan/src/lib/controls/selectablelist/selectablelist.component.ts
@@ -46,6 +46,7 @@ export class SelectablelistComponent implements AfterContentInit, OnChanges, OnD
   @HostBinding('attr.tabIndex') tabIndex = 0;
 
   @Input() active: boolean;
+  @Input() setFirstSelectable: boolean = true;
   @Input() useScrollbar: boolean = true;
   @Input() maxHeight: number;
   @HostBinding('attr.id') @Input() id: string;
@@ -174,7 +175,7 @@ export class SelectablelistComponent implements AfterContentInit, OnChanges, OnD
           this.handleRowClicked(row);
         });
 
-    if (this.active) {
+    if (this.active && this.setFirstSelectable) {
       setTimeout(() => {
         this.selectFirstSelectable();
       }, 200);

diff --git a/src/app/selectablelist-documentation/selectablelist-documentation.component.html b/src/app/selectablelist-documentation/selectablelist-documentation.component.html
@@ -18,7 +18,7 @@ <h2>Exempel</h2>
       <vgr-button (click)="addToList()">Lägg till fler rader</vgr-button>
       <vgr-button (click)="removeFromList()">Ta bort rader</vgr-button>
     </div>
-    <vgr-selectablelist [id]="'test'" [active]="true" (selectedChanged)="onSelectablelistChanged($event)" [maxHeight]="220">
+    <vgr-selectablelist [id]="'test'" [active]="true" [setFirstSelectable]="true" (selectedChanged)="onSelectablelistChanged($event)" [maxHeight]="220">
       <vgr-selectablelist-header>
           <vgr-selectablelist-header-column><strong>Utbetalning avser</strong>
           </vgr-selectablelist-header-column>
@@ -58,11 +58,21 @@ <h2><code>&lt;vgr-selectablelist&gt;</code></h2>
         <td>Talar om huruvida tabellen är aktiverad eller inte. Default värde är <code>false</code>.</td>
         <td>[active]="true"</td>
       </tr>
+      <tr>
+        <td>setFirstSelectable: boolean</td>
+        <td>Talar om huruvida första posten i tabellen automatiskt skall väljas. Default värde är <code>true</code>.</td>
+        <td>[setFirstSelectable]="true"</td>
+      </tr>
       <tr>
         <td>useScrollbar: boolean</td>
         <td>Användaren kan välja om man vill ha med en synlig scrollbar eller inte. Default värde är <code>true</code>.</td>
         <td>[useScrollbar]="false"</td>
       </tr>
+      <tr>
+        <td>maxHeight: number</td>
+        <td>Användaren kan välja maxhöjd på listan utan att scrollbaren syns. Överskrids maxhöjden så kommer scrollbaren att synas.</td>
+        <td>[maxHeight]="220"</td>
+      </tr>
       <tr>
         <td>selectedChanged: EventEmitter&lt;any&gt;</td>
         <td>Event som triggas när man väljer en ny rad i tabellen</td>

diff --git a/src/app/selectablelist-documentation/selectablelist-documentation.component.ts b/src/app/selectablelist-documentation/selectablelist-documentation.component.ts
@@ -1,12 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { HtmlEncodeService } from '../html-encode.service';
 
 @Component({
   selector: 'vgr-selectablelist-documentation',
   templateUrl: './selectablelist-documentation.component.html',
   styleUrls: ['./selectablelist-documentation.component.scss']
 })
-export class SelectablelistDocumentationComponent implements OnInit {
+export class SelectablelistDocumentationComponent {
 
   justeringar = [
     {
@@ -61,7 +61,7 @@ export class SelectablelistDocumentationComponent implements OnInit {
     }
   ]
 
-  exampleCode = `<vgr-selectablelist [id]="'test'" [active]="true (selectedChanged)="onSelectablelistChanged($event)">
+  exampleCode = `<vgr-selectablelist [id]="'test'" [active]="true" [setFirstSelectable]="true" (selectedChanged)="onSelectablelistChanged($event)" [maxHeight]="220">
       <vgr-selectablelist-header>
           <vgr-selectablelist-header-column><strong>Utbetalning avser</strong>
           </vgr-selectablelist-header-column>
@@ -85,9 +85,6 @@ export class SelectablelistDocumentationComponent implements OnInit {
       htmlEncoder.prepareHighlightedSection(this.exampleCode, 'HTML');
    }
 
-  ngOnInit(): void {
-  }
-
   onSelectablelistChanged(event) {
   }