{{ selectedLanguage }}
diff --git a/src/app/language-select/language-select.component.spec.ts b/src/app/language-select/language-select.component.spec.ts
new file mode 100644
index 00000000..9d66e7aa
--- /dev/null
+++ b/src/app/language-select/language-select.component.spec.ts
@@ -0,0 +1,21 @@
+import { TestBed } from '@angular/core/testing'
+import { NoopAnimationsModule } from '@angular/platform-browser/animations'
+import { provideTranslateService } from '@ngx-translate/core'
+import { verifyA11y } from '@ppwcode/ng-unit-testing'
+import LanguageSelectComponent from './language-select.component'
+
+describe('LanguageSelectComponent', () => {
+ beforeEach(() =>
+ TestBed.configureTestingModule({
+ imports: [LanguageSelectComponent, NoopAnimationsModule],
+ providers: [provideTranslateService({})]
+ })
+ )
+
+ it('should create', () => {
+ const fixture = TestBed.createComponent(LanguageSelectComponent)
+ expect(fixture.componentInstance).toBeTruthy()
+ })
+
+ verifyA11y(LanguageSelectComponent)
+})
diff --git a/src/app/logging/in-memory-logging-demo/in-memory-logging-demo.component.spec.ts b/src/app/logging/in-memory-logging-demo/in-memory-logging-demo.component.spec.ts
new file mode 100644
index 00000000..a0fc2638
--- /dev/null
+++ b/src/app/logging/in-memory-logging-demo/in-memory-logging-demo.component.spec.ts
@@ -0,0 +1,21 @@
+import { TestBed } from '@angular/core/testing'
+import { NoopAnimationsModule } from '@angular/platform-browser/animations'
+import { provideTranslateService } from '@ngx-translate/core'
+import { verifyA11y } from '@ppwcode/ng-unit-testing'
+import { InMemoryLoggingDemoComponent } from './in-memory-logging-demo.component'
+
+describe('InMemoryLoggingDemoComponent', () => {
+ beforeEach(() =>
+ TestBed.configureTestingModule({
+ imports: [InMemoryLoggingDemoComponent, NoopAnimationsModule],
+ providers: [provideTranslateService({})]
+ })
+ )
+
+ it('should create', () => {
+ const fixture = TestBed.createComponent(InMemoryLoggingDemoComponent)
+ expect(fixture.componentInstance).toBeTruthy()
+ })
+
+ verifyA11y(InMemoryLoggingDemoComponent)
+})
diff --git a/src/app/logging/in-memory-logging-demo/in-memory-logging-demo.e2e-spec.ts b/src/app/logging/in-memory-logging-demo/in-memory-logging-demo.e2e-spec.ts
new file mode 100644
index 00000000..872df0a8
--- /dev/null
+++ b/src/app/logging/in-memory-logging-demo/in-memory-logging-demo.e2e-spec.ts
@@ -0,0 +1,8 @@
+import { verifyE2eA11y } from '@ppwcode/ng-e2e-testing'
+
+verifyE2eA11y({
+ name: 'in-memory logging demo has no WCAG 2.2 AA violations',
+ path: 'in-memory-logging',
+ includeSelector: 'ppw-in-memory-logging-demo',
+ readyLocator: (page) => page.getByRole('button', { name: 'Add debug line' })
+})
diff --git a/src/app/message-bar/message-bar.component.spec.ts b/src/app/message-bar/message-bar.component.spec.ts
new file mode 100644
index 00000000..bc3f7287
--- /dev/null
+++ b/src/app/message-bar/message-bar.component.spec.ts
@@ -0,0 +1,19 @@
+import { TestBed } from '@angular/core/testing'
+import { NoopAnimationsModule } from '@angular/platform-browser/animations'
+import { verifyA11y } from '@ppwcode/ng-unit-testing'
+import MessageBarComponent from './message-bar.component'
+
+describe('MessageBarDemoComponent', () => {
+ beforeEach(() =>
+ TestBed.configureTestingModule({
+ imports: [MessageBarComponent, NoopAnimationsModule]
+ })
+ )
+
+ it('should create', () => {
+ const fixture = TestBed.createComponent(MessageBarComponent)
+ expect(fixture.componentInstance).toBeTruthy()
+ })
+
+ verifyA11y(MessageBarComponent)
+})
diff --git a/src/app/message-bar/message-bar.e2e-spec.ts b/src/app/message-bar/message-bar.e2e-spec.ts
new file mode 100644
index 00000000..d3ab71c3
--- /dev/null
+++ b/src/app/message-bar/message-bar.e2e-spec.ts
@@ -0,0 +1,8 @@
+import { verifyE2eA11y } from '@ppwcode/ng-e2e-testing'
+
+verifyE2eA11y({
+ name: 'message bar demo has no WCAG 2.2 AA violations',
+ path: 'components/message-bar',
+ includeSelector: 'ppw-message-bar-demo',
+ readyLocator: (page) => page.getByRole('heading', { name: 'Message bar with input parameter message' })
+})
diff --git a/src/app/table/empty-async-result.component.spec.ts b/src/app/table/empty-async-result.component.spec.ts
new file mode 100644
index 00000000..5a1db9ad
--- /dev/null
+++ b/src/app/table/empty-async-result.component.spec.ts
@@ -0,0 +1,19 @@
+import { TestBed } from '@angular/core/testing'
+import { NoopAnimationsModule } from '@angular/platform-browser/animations'
+import { verifyA11y } from '@ppwcode/ng-unit-testing'
+import { EmptyAsyncResultComponent } from './empty-async-result.component'
+
+describe('EmptyAsyncResultComponent', () => {
+ beforeEach(() =>
+ TestBed.configureTestingModule({
+ imports: [EmptyAsyncResultComponent, NoopAnimationsModule]
+ })
+ )
+
+ it('should create', () => {
+ const fixture = TestBed.createComponent(EmptyAsyncResultComponent)
+ expect(fixture.componentInstance).toBeTruthy()
+ })
+
+ verifyA11y(EmptyAsyncResultComponent)
+})
diff --git a/src/app/table/empty-page.component.spec.ts b/src/app/table/empty-page.component.spec.ts
new file mode 100644
index 00000000..d37164a2
--- /dev/null
+++ b/src/app/table/empty-page.component.spec.ts
@@ -0,0 +1,18 @@
+import { TestBed } from '@angular/core/testing'
+import { verifyA11y } from '@ppwcode/ng-unit-testing'
+import { EmptyTablePageComponent } from './empty-page.component'
+
+describe('EmptyTablePageComponent', () => {
+ beforeEach(() =>
+ TestBed.configureTestingModule({
+ imports: [EmptyTablePageComponent]
+ })
+ )
+
+ it('should create', () => {
+ const fixture = TestBed.createComponent(EmptyTablePageComponent)
+ expect(fixture.componentInstance).toBeTruthy()
+ })
+
+ verifyA11y(EmptyTablePageComponent)
+})
diff --git a/src/app/table/expandable-table-demo/expandable-table-demo.component.spec.ts b/src/app/table/expandable-table-demo/expandable-table-demo.component.spec.ts
new file mode 100644
index 00000000..ffd90796
--- /dev/null
+++ b/src/app/table/expandable-table-demo/expandable-table-demo.component.spec.ts
@@ -0,0 +1,21 @@
+import { TestBed } from '@angular/core/testing'
+import { NoopAnimationsModule } from '@angular/platform-browser/animations'
+import { provideTranslateService } from '@ngx-translate/core'
+import { verifyA11y } from '@ppwcode/ng-unit-testing'
+import { ExpandableTableDemoComponent } from './expandable-table-demo.component'
+
+describe('ExpandableTableDemoComponent', () => {
+ beforeEach(() =>
+ TestBed.configureTestingModule({
+ imports: [ExpandableTableDemoComponent, NoopAnimationsModule],
+ providers: [provideTranslateService({})]
+ })
+ )
+
+ it('should create', () => {
+ const fixture = TestBed.createComponent(ExpandableTableDemoComponent)
+ expect(fixture.componentInstance).toBeTruthy()
+ })
+
+ verifyA11y(ExpandableTableDemoComponent)
+})
diff --git a/src/app/table/table-demo.component.spec.ts b/src/app/table/table-demo.component.spec.ts
new file mode 100644
index 00000000..0df0dba8
--- /dev/null
+++ b/src/app/table/table-demo.component.spec.ts
@@ -0,0 +1,26 @@
+import { TestBed } from '@angular/core/testing'
+import { NoopAnimationsModule } from '@angular/platform-browser/animations'
+import { RouterTestingModule } from '@angular/router/testing'
+import { provideTranslateService } from '@ngx-translate/core'
+import { PPW_TABLE_DEFAULT_OPTIONS } from '@ppwcode/ng-common-components'
+import { verifyA11y } from '@ppwcode/ng-unit-testing'
+import TableDemoComponent from './table-demo.component'
+
+describe('TableDemoComponent', () => {
+ beforeEach(() =>
+ TestBed.configureTestingModule({
+ imports: [TableDemoComponent, NoopAnimationsModule, RouterTestingModule],
+ providers: [
+ provideTranslateService({}),
+ { provide: PPW_TABLE_DEFAULT_OPTIONS, useValue: { dateColumnFormatter: (v: unknown) => String(v) } }
+ ]
+ })
+ )
+
+ it('should create', () => {
+ const fixture = TestBed.createComponent(TableDemoComponent)
+ expect(fixture.componentInstance).toBeTruthy()
+ })
+
+ verifyA11y(TableDemoComponent)
+})
diff --git a/src/app/table/table-demo.e2e-spec.ts b/src/app/table/table-demo.e2e-spec.ts
new file mode 100644
index 00000000..23dcbde4
--- /dev/null
+++ b/src/app/table/table-demo.e2e-spec.ts
@@ -0,0 +1,8 @@
+import { verifyE2eA11y } from '@ppwcode/ng-e2e-testing'
+
+verifyE2eA11y({
+ name: 'table demo has no WCAG 2.2 AA violations',
+ path: 'components/table',
+ includeSelector: 'ppw-table-demo',
+ readyLocator: (page) => page.getByRole('heading', { name: 'Filter table' })
+})
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 216c46f4..60944ddf 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -1,18 +1,33 @@
{
"APP_TITLE": "PPW Code",
"button": {
+ "add": "Add",
+ "delete": "Delete",
"open": "Open"
},
"confirmation-dialog": {
"body": "Are you sure you want to execute this action?\n\nThis action cannot be undone.",
"title": "Confirm execution?"
},
+ "common-components": {
+ "loader": {
+ "loading": "Loading"
+ },
+ "table": {
+ "collapse-row": "Collapse row",
+ "expand-row": "Expand row"
+ }
+ },
"dashboard": {
"components-description": "Opens the dashboard page for the PPW components",
"confirmation-dialog-description": "A demo page showcasing the confirm dialog component",
"expandable-card-description": "A demo page that shows all possibilities with the expandable card component",
"global-error-handler-description": "A demo page that shows all possibilities with the global error handler",
- "in-memory-logging-description": "A demo page that shows all possibilities with the in-memory logging provider"
+ "in-memory-logging-description": "A demo page that shows all possibilities with the in-memory logging provider",
+ "loading-spinner": "Loading spinner"
+ },
+ "language-select": {
+ "aria-label": "Language selector"
},
"global-error-dialog": {
"copy-all-errors": "Copy All Errors",
@@ -24,6 +39,9 @@
"single-error-details": "Error Details",
"title": "Unexpected error"
},
+ "expandable-card": {
+ "card-without-visible-title": "Card without visible title"
+ },
"navigation": {
"components": "Components",
"confirmation_dialog": "Confirmation Dialog",
diff --git a/src/assets/i18n/nl.json b/src/assets/i18n/nl.json
index cad54242..55f6c3ff 100644
--- a/src/assets/i18n/nl.json
+++ b/src/assets/i18n/nl.json
@@ -1,18 +1,33 @@
{
"APP_TITLE": "PPW Code",
"button": {
+ "add": "Toevoegen",
+ "delete": "Verwijderen",
"open": "Openen"
},
"confirmation-dialog": {
"body": "Bent u zeker dat u deze actie wil uitvoeren?\n\nDeze actie kan niet ongedaan gemaakt worden.",
"title": "Bevestig uitvoering?"
},
+ "common-components": {
+ "loader": {
+ "loading": "Laden"
+ },
+ "table": {
+ "collapse-row": "Rij dichtklappen",
+ "expand-row": "Rij openklappen"
+ }
+ },
"dashboard": {
"components-description": "Opent de dashboard pagina van de PPW components",
"confirmation-dialog-description": "Een demo pagina die de confirmation dialog component laat zien",
"expandable-card-description": "Een demo pagina die alle mogelijkheden met de expandable card component laat zien",
"global-error-handler-description": "Een demo pagina die alle mogelijkheden van de global error handler laat zien",
- "in-memory-logging-description": "Een demo pagina die alle mogelijkheden van de in-memory logging provider laat zien"
+ "in-memory-logging-description": "Een demo pagina die alle mogelijkheden van de in-memory logging provider laat zien",
+ "loading-spinner": "Laadindicator"
+ },
+ "language-select": {
+ "aria-label": "Taalselector"
},
"global-error-dialog": {
"copy-all-errors": "Kopieer alle fouten",
@@ -24,6 +39,9 @@
"single-error-details": "Fout details",
"title": "Onverwachte fout"
},
+ "expandable-card": {
+ "card-without-visible-title": "Kaart zonder zichtbare titel"
+ },
"navigation": {
"components": "Componenten",
"confirmation_dialog": "Confirmation Dialog",
diff --git a/src/styles.scss b/src/styles.scss
index a679d286..254bea66 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -13,7 +13,7 @@ $ppw-primary-palette: (
200: #80cd9f,
300: #4db978,
400: #26aa5b,
- 500: #009b3e,
+ 500: #007f28,
600: #009338,
700: #008930,
800: #007f28,
@@ -86,12 +86,13 @@ body {
--ppw-confirmation-dialog-header-text-color: #{mat.m2-get-contrast-color-from-palette($ppw-primary-palette, 500)};
--ppw-expandable-card-header-text-color: white;
- --ppw-expandable-card-header-background-color: #6eb343;
+ --ppw-expandable-card-header-background-color: #007f28;
--ppw-expandable-card-header-indicator-color: white;
--ppw-loader-content-padding: 16px;
--ppw-message-bar-warning-text-color: black;
+ --ppw-message-bar-success-background-color: #007f28;
--ppw-sidenav-background-color: #18428c;
--ppw-sidenav-navigation-item-icon-color: #6eb343;
@@ -107,7 +108,7 @@ body {
--ppw-dashboard-items-table-width: 750px;
--ppw-dashboard-items-table-primary-color: #18428c;
- --ppw-dashboard-items-table-background-color: #6eb343;
+ --ppw-dashboard-items-table-background-color: #d9ead3;
--ppw-dashboard-wrapper-container-vertical-margin: 32px;
--ppw-dashboard-items-card-margin: 8px;
diff --git a/tsconfig.e2e.json b/tsconfig.e2e.json
new file mode 100644
index 00000000..9956a753
--- /dev/null
+++ b/tsconfig.e2e.json
@@ -0,0 +1,9 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "rootDir": "./",
+ "types": ["node"]
+ },
+ "files": [],
+ "include": ["src/app/**/*.e2e-spec.ts", "playwright.config.ts"]
+}
diff --git a/tsconfig.json b/tsconfig.json
index c1cbdafa..8fc0f29b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,6 +8,7 @@
"@ppwcode/ng-common": ["./projects/ppwcode/ng-common/src/public-api"],
"@ppwcode/ng-common-components": ["./projects/ppwcode/ng-common-components/src/public-api"],
"@ppwcode/ng-dialogs": ["./projects/ppwcode/ng-dialogs/src/public-api"],
+ "@ppwcode/ng-e2e-testing": ["./projects/ppwcode/ng-e2e-testing/src/public-api"],
"@ppwcode/ng-forms": ["./projects/ppwcode/ng-forms/src/public-api"],
"@ppwcode/ng-router": ["./projects/ppwcode/ng-router/src/public-api"],
"@ppwcode/ng-state-management": ["./projects/ppwcode/ng-state-management/src/public-api"],