Merge pull request #23 in TEA/dafa-web-monorepo from feature/TV-223 to develop

Squashed commit of the following:

commit 47eae926c8e1564823e627ac12d487e11cc01a9c
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jun 17 15:38:41 2021 +0200

    TV-223 städ

commit fdc81d0c5eb9016a040d8806e124e5b3a22d9b9d
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jun 17 12:43:18 2021 +0200

    TV-223 städ

commit 39099436391bfbfd8ee2c9af91e94f81b53cc6b4
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jun 17 12:39:43 2021 +0200

    TV-223 Visa dölj personnumer - delad komponent. Ändringar efter code review

commit 0cd5173f6dd6915d30311a9a1c6141d84e00d6e9
Merge: 14f2b77 ba34b20
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Tue Jun 15 18:52:42 2021 +0200

    Merge branch 'develop' into feature/TV-223

    # Conflicts:
    #	apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.module.ts

commit 14f2b777c48831568bf9ff8b257f063250486da2
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Tue Jun 15 18:47:30 2021 +0200

    TV-223 tagit bort pipe

commit d011b97d87dd3b2cc336df45368200a64f17ed22
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Tue Jun 15 18:38:26 2021 +0200

    TV-223 Dölj visa text, ändrat till mer generell delad komponent

commit 7d4202c905e935e3aeda2bb9fb3f9e6232b855e2
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jun 10 16:47:59 2021 +0200

    TV-223 omvänt ikoner för vad som visas nu ist. för vad man vill ska visas

commit 77b628a2b77eb39673abefa5d0aa27a2ebe2cbcf
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jun 10 16:39:07 2021 +0200

    TV-223 css

commit 6148993314c4f0e4e1797aa220356c21ab986662
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jun 10 13:24:56 2021 +0200

    TV-223 .

commit f6723ba4959f072078f87d725d72662e4bd27d99
Merge: e71a3bd 48801a9
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jun 10 13:12:02 2021 +0200

    Merge branch 'develop' into feature/TV-223

commit e71a3bd8d071830b6bad2ea6648197dedb855615
Author: Cecilia Varnava <cecilia.varnava@arbetsformedlingen.se>
Date:   Thu Jun 10 13:07:40 2021 +0200

    TV-223 Visa-göm för personnummer. Delad komponent för dölj-visa text

apps/dafa-web/src/app/data/enums/icon-type.enum.ts

@@ -13,4 +13,6 @@ export enum IconType {
   WARNING = 'warning',
   APPROVED = 'approved',
   X = 'x',
+  EYE = 'eye',
+  EYESLASH = 'eyeslash',
 }

apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.html

@@ -1,5 +1,4 @@
 <dafa-logged-in-shell>
-
   <section class="employee-card">
     <digi-typography *ngIf="detailedEmployeeData$ | async as detailedEmployeeData; else loadingRef">
       <h1>{{ detailedEmployeeData.fullName }}</h1>
@@ -17,7 +16,13 @@
             <dt>Namn</dt>
             <dd *ngIf="detailedEmployeeData.fullName; else emptyDD">{{ detailedEmployeeData.fullName }}</dd>
             <dt>Personnummer</dt>
-          <dd *ngIf="detailedEmployeeData.ssn; else emptyDD">{{ detailedEmployeeData.ssn }}</dd>
+            <dd *ngIf="detailedEmployeeData.ssn; else emptyDD">
+              <dafa-hide-text
+                symbols="********-****"
+                [changingText]="detailedEmployeeData.ssn"
+                ariaLabelType="personnummer"
+              ></dafa-hide-text>
+            </dd>
           </dl>
         </div>
 

apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.module.ts

@@ -6,6 +6,7 @@ import { RouterModule } from '@angular/router';
 import { LocalDatePipeModule } from '@dafa-shared/pipes/local-date/local-date.module';
 import { EmployeeCardComponent } from './employee-card.component';
 import { LoggedInShellModule } from '../../../../components/logged-in-shell/logged-in-shell.module';
+import { HideTextModule } from '@dafa-shared/components/hide-text/hide-text.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -16,6 +17,7 @@ import { LoggedInShellModule } from '../../../../components/logged-in-shell/logg
     DigiNgSkeletonBaseModule,
     DigiNgLayoutExpansionPanelModule,
     LocalDatePipeModule,
+    HideTextModule,
     LoggedInShellModule
   ],
 })

apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.html

@@ -0,0 +1,7 @@
+<span class="hide-text">
+  {{ transformedText }}
+  <button class="hide-text__button" type="button" [attr.aria-label]="ariaLabel" (click)="toggleText()">
+    <dafa-icon *ngIf="!hideText" [icon]="iconType.EYESLASH" size="l"></dafa-icon>
+    <dafa-icon *ngIf="hideText" [icon]="iconType.EYE" size="l"></dafa-icon>
+  </button>
+</span>

apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.scss

@@ -0,0 +1,19 @@
+.hide-text {
+  display: flex;
+  align-items: center;
+  gap: var(--digi--layout--gutter);
+
+  &__button {
+    background-color: transparent;
+    color: var(--digi--typography--color--link);
+    font-size: var(--digi--typography--font-size--desktop--l);
+    border-width: 0;
+    width: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &:hover {
+      color: var(--digi--typography--color--link--active);
+    }
+  }
+}

apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HideTextComponent } from './hide-text.component';
+
+describe('HideTextComponent', () => {
+  let component: HideTextComponent;
+  let fixture: ComponentFixture<HideTextComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [HideTextComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HideTextComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.ts

@@ -0,0 +1,30 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { IconType } from '@dafa-enums/icon-type.enum';
+
+@Component({
+  selector: 'dafa-hide-text',
+  templateUrl: './hide-text.component.html',
+  styleUrls: ['./hide-text.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HideTextComponent {
+  @Input() changingText: string;
+  @Input() symbols: string;
+  @Input() ariaLabelType = 'text';
+
+  hideText: boolean = true;
+  iconType = IconType;
+
+  get transformedText(): string {
+    return this.hideText ? this.symbols : this.changingText;
+  }
+
+  toggleText(): void {
+    this.hideText = !this.hideText;
+  }
+
+  get ariaLabel(): string {
+    const buttonText = this.hideText ? 'Visa' : 'Dölj';
+    return `${buttonText} ${this.ariaLabelType}`;
+  }
+}

apps/dafa-web/src/app/shared/components/hide-text/hide-text.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { HideTextComponent } from './hide-text.component';
+import { IconModule } from '@dafa-shared/components/icon/icon.module';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [HideTextComponent],
+  imports: [CommonModule, IconModule],
+  exports: [HideTextComponent],
+})
+export class HideTextModule {}

apps/dafa-web/src/app/shared/components/icon/icon.component.html

@@ -42,5 +42,7 @@
     ></digi-icon-exclamation-triangle>
     <digi-icon-check-circle-reg *ngSwitchCase="iconType.APPROVED" [ngClass]="iconClass"></digi-icon-check-circle-reg>
     <digi-icon-x *ngSwitchCase="iconType.X" [ngClass]="iconClass"></digi-icon-x>
+    <digi-icon-eye *ngSwitchCase="iconType.EYE" [ngClass]="iconClass"></digi-icon-eye>
+    <digi-icon-eye-slash *ngSwitchCase="iconType.EYESLASH" [ngClass]="iconClass"></digi-icon-eye-slash> 
   </ng-container>
 </ng-template>