Merge branch 'feature/pipes'

package.json

@@ -35,7 +35,7 @@
     "rxjs": "^7.5.7",
     "smoothscroll-polyfill": "^0.4.3",
     "tslib": "^2.3.1",
-    "vgr-komponentkartan": "^12.0.2",
+    "vgr-komponentkartan": "^12.0.3",
     "zone.js": "~0.14.2"
   },
   "devDependencies": {

src/app/app.component.html

@@ -11,6 +11,7 @@
       <vgr-menu-item link="/colours" text="Färgkarta"></vgr-menu-item>
 
       <vgr-menu-item link="/sizes" text="Upplösning"></vgr-menu-item>
+      <vgr-menu-item link="/pipes" text="Pipes"></vgr-menu-item>
       <vgr-menu-separator></vgr-menu-separator>
       <vgr-submenu text="Komponenter">
         <vgr-menu-item link="/actionPanels" text="Action panel"></vgr-menu-item>

src/app/app.module.ts

@@ -79,6 +79,7 @@ import { RadiogroupComponent } from './radiogroup/radiogroup.component';
 import { registerLocaleData } from '@angular/common';
 import localeSv from '@angular/common/locales/sv';
 import { SelectablelistDocumentationComponent } from './selectablelist-documentation/selectablelist-documentation.component';
+import { PipesDocumentationComponent } from './pipes-documentation/pipes-documentation.component';
 registerLocaleData(localeSv);
 
 @NgModule({
@@ -128,7 +129,8 @@ registerLocaleData(localeSv);
         EditableTableDocumentationComponent,
         ComboboxDocumentationComponent,
         RadiogroupComponent,
-        SelectablelistDocumentationComponent
+        SelectablelistDocumentationComponent,
+        PipesDocumentationComponent
     ],
     imports: [
         KomponentkartanModule,

src/app/pipes-documentation/pipes-documentation.component.html

@@ -0,0 +1,52 @@
+<vgr-page>
+  <vgr-page-header [title]="'Pipes'">
+  </vgr-page-header>
+
+  <vgr-page-body>
+    <!-- Färger -->
+    <vgr-page-block class="column-layout">
+      <h2>Dokumentation för tillgängliga Pipes i komponentkartan</h2>
+      <p>Det finns ett visst antal olika pipes som man via komponentkartan kan använda sig av, utöver de inbyggda som redan finns i Angular.</p>
+      <br>
+      <table class="property-table">
+        <tr>
+          <th>Namn</th>
+          <th>Beskrivning</th>
+          <th>Exempel</th>
+        </tr>
+        <tr>
+          <td>
+            hsaidPipe : string
+          </td>
+          <td>Pipe som tar in ett HSA-id (SEZZZZZZZZZZ-E0XXXXXXXXXX60) och returnerar sista delen av HSA-id:t (E0XXXXXXXXXX60)</td>
+          <td>'SEZZZ-E0XXX60' | hsaidPipe</td>
+        </tr>
+        <tr>
+          <td>
+            postnummer : string
+          </td>
+          <td>Pipe som tar in en sträng (5 siffror) och returnerar ett svenskt postnummer format (ex. XXX XX)</td>
+          <td>'47700' | postnummer</td>
+        </tr>
+        <tr>
+          <td>
+            personnummer : string
+          </td>
+          <td>Pipe som tar in en sträng (10 eller 12 siffror) och returnerar ett svenskt personnummer format (ex. YYYYMMDD-XXXX)</td>
+          <td>'191212121212' | personnummer</td>
+        </tr>
+        <tr>
+          <td>
+            komponentkartanCurrency : number
+          </td>
+          <td>Pipe som tar in ett nummer och returnerar detta med decimaltecken (default 2 decimaler, ex 12,00)</td>
+          <td>12 | komponentkartanCurrency</td>
+        </tr>
+      </table>
+      <br>
+      <h2>Exempel</h2>
+      <section [innerHTML]="pipesPageStructure" vgrHighlightCode>
+      </section>
+    </vgr-page-block>
+  </vgr-page-body>
+</vgr-page>

src/app/pipes-documentation/pipes-documentation.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { HtmlEncodeService } from '../html-encode.service';
+
+@Component({
+  selector: 'app-pipes-documentation',
+  templateUrl: './pipes-documentation.component.html',
+  styleUrls: ['./pipes.documentation.component.scss']
+})
+export class PipesDocumentationComponent {
+
+  pipesPageStructure: string;
+  pipesPage = `<div>{{ 120 | komponentkartanCurrency }}</div> // Output 120,00
+  <div>{{ 'SEZZZZZZZZZZ-E0XXXXXXXXXX60' | hsaidPipe }}</div> // Output E0XXXXXXXXXX60
+  <div>{{ '47700' | postnummer }}</div> // Output 477 00
+  <div>{{ '191212121212' | personnummer }}</div> // Output 19121212-1212`;
+  constructor(private htmlEncoder: HtmlEncodeService) {
+    this.pipesPageStructure = htmlEncoder.prepareHighlightedSection(this.pipesPage);
+  }
+
+
+
+
+}

src/app/pipes-documentation/pipes.documentation.component.scss

@@ -0,0 +1,4 @@
+ul {
+  list-style-type: disc;
+  list-style-position: inside;
+}

src/app/routes.ts

@@ -45,6 +45,7 @@ import { ComboboxDocumentationComponent } from './combobox-documentation/combobo
 import { EditableTableDocumentationComponent } from './editable-table-documentation/editable-table-documentation.component'
 import {RadiogroupComponent} from './radiogroup/radiogroup.component'
 import { SelectablelistDocumentationComponent } from './selectablelist-documentation/selectablelist-documentation.component';
+import { PipesDocumentationComponent } from './pipes-documentation/pipes-documentation.component';
 
 
 export const appRoutes: Routes = [
@@ -76,6 +77,7 @@ export const appRoutes: Routes = [
     { path: 'pagebody', component: PageBodyDocumentationComponent },
     { path: 'card', component: CardComponent },
     { path: 'sizes', component: SizesComponent },
+    { path: 'pipes', component: PipesDocumentationComponent },
     {
       path: 'menu', component: MenuComponent,
       children: [{