From 706c48828dac8bd2b16ac1380e8f33506510319f Mon Sep 17 00:00:00 2001 From: Daniel Appelgren Date: Tue, 7 Dec 2021 10:28:14 +0100 Subject: [PATCH] feature(digi-migrering): Utfasning av digi-ng-expansion-panel till ui-expansion-panel. (TV-851) Merge in TEA/mina-sidor-fa-web from feature/TV-851-digi-ng-layout-expansion-panel to develop Squashed commit of the following: commit 10b046bf603e1c5a79dd5c1129b2cdcddfe09424 Author: Daniel Appelgren Date: Tue Dec 7 09:18:35 2021 +0100 Fix PR comments commit 3ca8e27699887c05d225b78c4ebad9c0c60f97f0 Author: Daniel Appelgren Date: Mon Dec 6 13:27:45 2021 +0100 correct PR comments and add better lintint to UI commit 8d54902fcdad4503e9168a249ca47e39ab207f38 Merge: 1b202e6a 938014ab Author: WP\holno Date: Thu Dec 2 10:51:21 2021 +0100 Merge branch 'develop' into feature/TV-851-digi-ng-layout-expansion-panel commit 1b202e6a9dad961d45e1d0bb1dae766b2a927564 Author: WP\holno Date: Wed Dec 1 14:56:36 2021 +0100 Utfasning av digi-ng-expansion-panel till ui-expansion-panel. --- .../employee-card.component.html | 7 +- .../employee-card/employee-card.module.ts | 4 +- .../deltagare-tab-experiences.component.html | 10 +-- .../deltagare-card/deltagare-card.module.ts | 4 +- libs/ui/.eslintrc.json | 39 +++++++++- .../expansion-panel.component.html | 25 ++++++ .../expansion-panel.component.scss | 55 ++++++++++++++ .../expansion-panel.component.spec.ts | 19 +++++ .../expansion-panel.component.ts | 76 +++++++++++++++++++ .../expansion-panel/expansion-panel.module.ts | 11 +++ libs/ui/src/icon/icon-type.enum.ts | 1 + libs/ui/src/icon/icon.component.html | 1 + package-lock.json | 1 + 13 files changed, 236 insertions(+), 17 deletions(-) create mode 100644 libs/ui/src/expansion-panel/expansion-panel.component.html create mode 100644 libs/ui/src/expansion-panel/expansion-panel.component.scss create mode 100644 libs/ui/src/expansion-panel/expansion-panel.component.spec.ts create mode 100644 libs/ui/src/expansion-panel/expansion-panel.component.ts create mode 100644 libs/ui/src/expansion-panel/expansion-panel.module.ts diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.html b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.html index 295b1c4..9bb1d75 100644 --- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.html +++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.html @@ -81,10 +81,9 @@ class="employee-card__utforandeverksamhet-card" >

Alla adresser inom utförande verksamheten valda.

- - @@ -97,7 +96,7 @@ {{address.name}}{{last ? '' : ','}} - + diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.module.ts b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.module.ts index 316bcfc..8577644 100644 --- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.module.ts +++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.module.ts @@ -1,4 +1,3 @@ -import { DigiNgLayoutExpansionPanelModule } from '@af/digi-ng/_layout/layout-expansion-panel'; import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; @@ -10,6 +9,7 @@ import { UiBackLinkModule } from '@ui/back-link/back-link.module'; import { UiLinkButtonModule } from '@ui/link-button/link-button.module'; import { UiSkeletonModule } from '@ui/skeleton/skeleton.module'; import { EmployeeCardComponent } from './employee-card.component'; +import { UiExpansionPanelModule } from '@ui/expansion-panel/expansion-panel.module'; @NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], @@ -19,11 +19,11 @@ import { EmployeeCardComponent } from './employee-card.component'; RouterModule.forChild([{ path: '', component: EmployeeCardComponent }]), LayoutModule, UiSkeletonModule, - DigiNgLayoutExpansionPanelModule, LocalDatePipeModule, HideTextModule, UiBackLinkModule, UiLinkButtonModule, + UiExpansionPanelModule, RolesDialogModule, ], }) diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-experiences/deltagare-tab-experiences.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-experiences/deltagare-tab-experiences.component.html index 448afde..3059caf 100644 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-experiences/deltagare-tab-experiences.component.html +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-experiences/deltagare-tab-experiences.component.html @@ -11,11 +11,11 @@

{{ workExperience.description }}

- {{ accordionExpanded ? 'Dölj' : 'Visa' }} fler arbetsgivare{{ workExperience.description }}

- +

Utbildning

diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.module.ts index 2cb86ee..7719264 100644 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.module.ts +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.module.ts @@ -1,4 +1,3 @@ -import { DigiNgLayoutExpansionPanelModule } from '@af/digi-ng/_layout/layout-expansion-panel'; import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover'; import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; @@ -12,6 +11,7 @@ import { UiBackLinkModule } from '@ui/back-link/back-link.module'; import { UiLinkButtonModule } from '@ui/link-button/link-button.module'; import { UiLoaderModule } from '@ui/loader/loader.module'; import { UiSkeletonModule } from '@ui/skeleton/skeleton.module'; +import { UiExpansionPanelModule } from '@ui/expansion-panel/expansion-panel.module'; import { DeltagareTabExperiencesComponent } from './components/deltagare-tab-experiences/deltagare-tab-experiences.component'; import { DeltagareTabPersonalInformationComponent } from './components/deltagare-tab-personal-information/deltagare-tab-personal-information.component'; import { ReportsListModule } from './components/deltagare-tab-reports/components/reports-list/reports-list.module'; @@ -40,12 +40,12 @@ import { UiPopoverModule } from '@ui/popover/ui-popover.module'; HideTextModule, UiLoaderModule, HandledarePickerFormModule, - DigiNgLayoutExpansionPanelModule, DigiNgPopoverModule, UiPopoverModule, UiSkeletonModule, UiIconModule, UiLinkButtonModule, + UiExpansionPanelModule, ], providers: [DeltagareCardService], exports: [DeltagareCardComponent], diff --git a/libs/ui/.eslintrc.json b/libs/ui/.eslintrc.json index 4188875..c353e8c 100644 --- a/libs/ui/.eslintrc.json +++ b/libs/ui/.eslintrc.json @@ -4,18 +4,49 @@ "overrides": [ { "files": ["*.ts"], - "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"], + "excludedFiles": ["*.spec.ts"], + "extends": [ + "plugin:@nrwl/nx/angular", + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:@typescript-eslint/recommended-requiring-type-checking", + "plugin:@angular-eslint/template/process-inline-templates" + ], + "parserOptions": { "project": ["apps/mina-sidor-fa/tsconfig.*?.json"] }, "rules": { + "max-len": [ + 1, + 140, + 2, + { + "ignorePattern": "^import\\s.+\\sfrom\\s.+;$", + "ignoreUrls": true, + "ignoreStrings": true, + "ignoreRegExpLiterals": true + } + ], "@angular-eslint/directive-selector": [ "error", - { "type": "attribute", "prefix": "mina-sidor-fa-web", "style": "camelCase" } + { + "type": "attribute", + "prefix": "ui", + "style": "camelCase" + } ], "@angular-eslint/component-selector": [ "error", - { "type": "element", "prefix": "mina-sidor-fa-web", "style": "kebab-case" } + { + "type": "element", + "prefix": "ui", + "style": "kebab-case" + } ] } }, - { "files": ["*.html"], "extends": ["plugin:@nrwl/nx/angular-template"], "rules": {} } + { + "files": ["*.html"], + "extends": ["plugin:@nrwl/nx/angular-template"], + "rules": {} + } ] } diff --git a/libs/ui/src/expansion-panel/expansion-panel.component.html b/libs/ui/src/expansion-panel/expansion-panel.component.html new file mode 100644 index 0000000..41f0de5 --- /dev/null +++ b/libs/ui/src/expansion-panel/expansion-panel.component.html @@ -0,0 +1,25 @@ +
+
+ +
+
+ +
+
diff --git a/libs/ui/src/expansion-panel/expansion-panel.component.scss b/libs/ui/src/expansion-panel/expansion-panel.component.scss new file mode 100644 index 0000000..de6e6e1 --- /dev/null +++ b/libs/ui/src/expansion-panel/expansion-panel.component.scss @@ -0,0 +1,55 @@ +@import '~@digi/styles/src/ui/variables/ui__variables'; + +.ui-expansion-panel { + &__toggle-button { + border: none; + margin: 0; + overflow: visible; + background: transparent; + cursor: pointer; + color: inherit; + font: inherit; + + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 2px solid var(--digi--ui--color--focus); + padding: var(--digi--layout--padding--10) var(--digi--layout--padding--20) var(--digi--layout--padding--10) 0; + + &:focus { + box-shadow: 0 0 0 0.12rem $digi--ui--color--blue-60; + } + + .ui-expansion-panel--secondary & { + box-sizing: border-box; + background-color: var(--digi--ui--color--background--symbol); + padding: var(--digi--layout--gutter--s); + border-bottom: none; + } + } + + &__icon { + transition: transform 0.2s; + color: var(--digi--ui--color--focus); + + &--expanded { + transform: rotate(180deg); + } + + .ui-expansion-panel--secondary & { + color: var(--digi--ui--color--background--overlay--opaque); + } + } + + &__container { + .ui-expansion-panel--collapsed & { + display: none; + } + + .ui-expansion-panel--secondary.ui-expansion-panel--expanded & { + border: 2px solid var(--digi--ui--color--background--symbol); + border-top: none; + } + } +} diff --git a/libs/ui/src/expansion-panel/expansion-panel.component.spec.ts b/libs/ui/src/expansion-panel/expansion-panel.component.spec.ts new file mode 100644 index 0000000..2fa1400 --- /dev/null +++ b/libs/ui/src/expansion-panel/expansion-panel.component.spec.ts @@ -0,0 +1,19 @@ +import { ExpansionPanelComponent } from './expansion-panel.component'; + +// tslint:disable-next-line: max-classes-per-file +export class MockChangeDetectorRef { + markForCheck = jest.fn(); + detach = jest.fn(); + detectChanges = jest.fn(); + reattach = jest.fn(); + checkNoChanges = jest.fn(); +} + +describe('ExpansionPanelComponent', () => { + let component: ExpansionPanelComponent; + + it('should create', () => { + component = new ExpansionPanelComponent(new MockChangeDetectorRef()); + expect(component).toBeTruthy(); + }); +}); diff --git a/libs/ui/src/expansion-panel/expansion-panel.component.ts b/libs/ui/src/expansion-panel/expansion-panel.component.ts new file mode 100644 index 0000000..150f36a --- /dev/null +++ b/libs/ui/src/expansion-panel/expansion-panel.component.ts @@ -0,0 +1,76 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + EventEmitter, + Input, + OnDestroy, + OnInit, + Output, +} from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; +import { skip } from 'rxjs/operators'; +import { UiIconType } from '@ui/icon/icon-type.enum'; +import { UiIconSize } from '@ui/icon/icon-size.enum'; +import { uuid } from '@utils/uuid.util'; + +@Component({ + selector: 'ui-expansion-panel', + templateUrl: './expansion-panel.component.html', + styleUrls: ['./expansion-panel.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ExpansionPanelComponent implements OnInit, OnDestroy { + @Input() uiContentId: string = 'ui-expansion-panel--container__' + uuid(); + @Input() uiTriggerId: string = 'ui-expansion-panel--toggle-button__' + uuid(); + @Input() uiSecondary = false; + @Output() uiExpand = new EventEmitter(); + @Output() uiCollapse = new EventEmitter(); + @Output() uiClick = new EventEmitter(); + + isExpanded$: BehaviorSubject = new BehaviorSubject(false); + UiIconType = UiIconType; + UiIconSize = UiIconSize; + + constructor(private changeDetectorRef: ChangeDetectorRef) {} + + @Input() + set uiExpanded(expanded: boolean) { + this.isExpanded$.next(expanded); + } + + ngOnInit(): void { + this.isExpanded$.pipe(skip(1)).subscribe(val => { + this.changeDetectorRef.markForCheck(); + this.togglePanelEventHandler(val); + }); + } + + ngOnDestroy(): void { + this.isExpanded$.unsubscribe(); + } + + get cssModifiers(): { [cssClass: string]: boolean } { + return { + 'ui-expansion-panel--collapsed': !this.isExpanded$.value, + 'ui-expansion-panel--secondary': this.uiSecondary, + }; + } + + get cssModifiersIcon(): { [cssClass: string]: boolean } { + return { 'ui-expansion-panel__icon--expanded': this.isExpanded$.value }; + } + + clickTriggerHandler(mouseEvent: MouseEvent): void { + this.uiClick.emit(mouseEvent); + this.isExpanded$.next(!this.isExpanded$.value); + } + + togglePanelEventHandler(isExpanded: boolean): void { + if (isExpanded) { + this.uiExpand.emit(); + } else { + this.uiCollapse.emit(); + } + } +} diff --git a/libs/ui/src/expansion-panel/expansion-panel.module.ts b/libs/ui/src/expansion-panel/expansion-panel.module.ts new file mode 100644 index 0000000..5491789 --- /dev/null +++ b/libs/ui/src/expansion-panel/expansion-panel.module.ts @@ -0,0 +1,11 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { ExpansionPanelComponent } from './expansion-panel.component'; +import { UiIconModule } from '@ui/icon/icon.module'; + +@NgModule({ + imports: [CommonModule, UiIconModule], + declarations: [ExpansionPanelComponent], + exports: [ExpansionPanelComponent], +}) +export class UiExpansionPanelModule {} diff --git a/libs/ui/src/icon/icon-type.enum.ts b/libs/ui/src/icon/icon-type.enum.ts index 78c31f0..27bb088 100644 --- a/libs/ui/src/icon/icon-type.enum.ts +++ b/libs/ui/src/icon/icon-type.enum.ts @@ -19,6 +19,7 @@ export enum UiIconType { X = 'x', ARROW_LEFT = 'arrow-left', ARROW_RIGHT = 'arrow-right', + ARROW_DOWN = 'arrow-down', EYE = 'eye', EYESLASH = 'eyeslash', INFO_CIRCLE_SOLID = 'info-circle-solid', diff --git a/libs/ui/src/icon/icon.component.html b/libs/ui/src/icon/icon.component.html index 65bd6cd..96c5f98 100644 --- a/libs/ui/src/icon/icon.component.html +++ b/libs/ui/src/icon/icon.component.html @@ -96,6 +96,7 @@ + diff --git a/package-lock.json b/package-lock.json index e1ea40e..0c9ad18 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "mina-sidor-fa-web", "version": "2.4.0", "hasInstallScript": true, "license": "MIT",