Alla adresser inom utförande verksamheten valda.
-
-
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",