Add virtual scrolling card component

Add OpenAPI client(s)

angular.json

@@ -92,5 +92,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

openapitools.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/@openapitools/openapi-generator-cli/config.schema.json",
+  "spaces": 2,
+  "generator-cli": {
+    "version": "7.12.0"
+  }
+}

package.json

@@ -17,9 +17,11 @@
     "@angular/platform-browser": "^19.2.0",
     "@angular/platform-browser-dynamic": "^19.2.0",
     "@angular/router": "^19.2.0",
+    "@openapitools/openapi-generator-cli": "^2.19.1",
     "@primeng/themes": "^19.0.10",
     "@tailwindcss/postcss": "^4.1.3",
     "postcss": "^8.5.3",
+    "primeicons": "^7.0.0",
     "primeng": "^19.0.10",
     "rxjs": "~7.8.0",
     "tailwindcss": "^4.1.3",

src/app/app.component.html

@@ -1,36 +1,4 @@
-<style>
-  .main {
-    display: flex;
-    align-items: center;
-    height: 100vh;
-  }
-
-  .content {
-    background: light-dark(var(--p-surface-50), var(--p-surface-900));
-    border-radius: 2rem;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 2rem;
-  }
-</style>
-
-<main class="flex h-screen items-center">
-  <app-bar/>
-  <app-items/>
-  <div class="content">
-    <h1 class="text-3xl font-bold underline">
-      Hello world!
-    </h1>
-    <span class="title">PrimeNG Playground</span>
-    <div class="content-input">
-      <input type="text" pInputText [(ngModel)]="text">
-      <p-button label="Submit" (onClick)="onClick()" [disabled]="!text"></p-button>
-    </div>
-    <p-message severity="success" *ngIf="msg">{{msg}}</p-message>
-  </div>
+<main class="flex flex-col h-screen w-full items-center bg-surface-800">
+  <app-bar class="sticky top-0 z-10 h-[10%]"/>
+  <app-items class="size-full"/>
 </main>
-
-
-<router-outlet />

src/app/app.component.ts

@@ -1,11 +1,12 @@
 import {Component} from '@angular/core';
-import {RouterOutlet} from '@angular/router';
 import {CommonModule} from '@angular/common';
 import {InputTextModule} from 'primeng/inputtext';
 import {ButtonModule} from 'primeng/button';
 import {MessageModule} from 'primeng/message';
 import {FormsModule} from '@angular/forms';
 import {BarComponent} from './component/bar/bar.component';
+import {ScrollingModule} from '@angular/cdk/scrolling';
+import {ApiModule} from './openapi';
 import {ItemsComponent} from './component/items/items.component';
 
 @Component({
@@ -13,23 +14,18 @@ import {ItemsComponent} from './component/items/items.component';
   standalone: true,
   imports: [
     CommonModule,
-    RouterOutlet,
     InputTextModule,
     ButtonModule,
     MessageModule,
     FormsModule,
     BarComponent,
+    ScrollingModule,
+    ApiModule,
+    ItemsComponent,
     ItemsComponent
   ],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
+  styleUrl: './app.component.css',
 })
 export class AppComponent {
-  text = '';
-
-  msg = '';
-
-  onClick() {
-    this.msg = 'Welcome ' + this.text;
-  }
 }

src/app/app.config.ts

@@ -4,6 +4,8 @@ import {routes} from './app.routes';
 import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
 import {providePrimeNG} from 'primeng/config';
 import Aura from '@primeng/themes/aura';
+import {BASE_PATH} from './openapi';
+import {provideHttpClient} from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -14,6 +16,8 @@ export const appConfig: ApplicationConfig = {
       theme: {
         preset: Aura
       }
-    })
+    }),
+    provideHttpClient(),
+    {provide: BASE_PATH, useValue: 'http://localhost:8080'}
   ]
 };

src/app/app.routes.ts

@@ -1,3 +1,6 @@
 import { Routes } from '@angular/router';
+import {ItemsComponent} from './component/items/items.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  { path: '', component: ItemsComponent },
+];

src/app/component/bar/bar.component.html

@@ -1,3 +1,28 @@
-<div class="flex items-center justify-center absolute top-0 w-full hover:bg-emphasis">
-  <p>bar works!</p>
+<div class="w-screen p-4 bg-none">
+  <p-menubar
+    [model]="items"
+    [style]="{ background: 'none'}"
+    styleClass="backdrop-blur-md"
+    class="backdrop-blur-md"
+  >
+    <ng-template #item let-item let-root="root">
+      <a pRipple class="flex items-center p-menubar-item-link">
+        <span>{{ item.label }}</span>
+        <p-badge *ngIf="item.badge" [ngClass]="{ 'ml-auto': !root, 'ml-2': root }" [value]="item.badge" />
+        <span *ngIf="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+        <i *ngIf="item.items" [ngClass]="['ml-auto pi', root ? 'pi-angle-down' : 'pi-angle-right']"></i>
+      </a>
+    </ng-template>
+    <ng-template #end>
+      <div class="flex items-center gap-2">
+        <input
+          type="text"
+          pInputText
+          placeholder="Search"
+          class="w-36"
+        />
+        <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" shape="circle" />
+      </div>
+    </ng-template>
+  </p-menubar>
 </div>

src/app/component/bar/bar.component.ts

@@ -1,11 +1,81 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {MenuItem} from 'primeng/api';
+import {Menubar} from 'primeng/menubar';
+import {Badge} from 'primeng/badge';
+import {NgClass, NgIf} from '@angular/common';
+import {Ripple} from 'primeng/ripple';
+import {Avatar} from 'primeng/avatar';
+import {InputText} from 'primeng/inputtext';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-bar',
-  imports: [],
+  imports: [
+    Menubar,
+    Badge,
+    NgClass,
+    NgIf,
+    Ripple,
+    Avatar,
+    InputText
+  ],
   templateUrl: './bar.component.html',
   styleUrl: './bar.component.css'
 })
-export class BarComponent {
+export class BarComponent implements OnInit {
+  items: MenuItem[] | undefined;
 
+  constructor(private router: Router) {}
+
+  ngOnInit() {
+    this.items = [
+      {
+        label: 'Home (Cards)',
+        icon: 'pi pi-home',
+        command: () => {
+          this.router.navigate(['/cards']);
+        }
+      },
+      {
+        label: 'Features',
+        icon: 'pi pi-star'
+      },
+      {
+        label: 'Projects',
+        icon: 'pi pi-search',
+        items: [
+          {
+            label: 'Components',
+            icon: 'pi pi-bolt'
+          },
+          {
+            label: 'Blocks',
+            icon: 'pi pi-server'
+          },
+          {
+            label: 'UI Kit',
+            icon: 'pi pi-pencil'
+          },
+          {
+            label: 'Templates',
+            icon: 'pi pi-palette',
+            items: [
+              {
+                label: 'Apollo',
+                icon: 'pi pi-palette'
+              },
+              {
+                label: 'Ultima',
+                icon: 'pi pi-palette'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        label: 'Contact',
+        icon: 'pi pi-envelope'
+      }
+    ]
+  }
 }

src/app/component/items/items.component.html

@@ -1,9 +1,51 @@
-<p-virtualscroller [items]="items" [itemSize]="[50, 100]" orientation="both" styleClass="border border-surface" [style]="{ width: '500px', height: '200px' }">
-  <ng-template #item let-item let-options="options">
-    <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-      <div style="width: 100px">
-        {{ item }}
+<div #container class="size-full overscroll-none">
+  @if (cards.length > 0) {
+    <p-virtualscroller
+      [items]="cards"
+      [itemSize]="580 / 4"
+      [lazy]="true"
+      [loading]="lazyLoading"
+      [appendOnly]="true"
+      (onLazyLoad)="onLazyLoad($event)"
+      styleClass="size-full"
+    >
+      <ng-template [appVirtualScroll]="cards" pTemplate="content" let-options="options">
+        <div class="flex flex-wrap justify-around">
+          @for (card of options.items; track card.id) {
+            <p-card styleClass="w-[24rem] h-[36rem] m-4 overflow-hidden">
+              <ng-template pTemplate="header">
+                <div
+                  class="relative duration-200 w-[23rem] rounded-lg ease-in-out h-64 z-10 overflow-hidden hover:h-[34rem] hover:translate-y-2 m-2 after:absolute after:inset-0 after:shadow-[inset_0_-10px_30px_15px_rgba(0,0,0,0.85)] after:content-[''] hover:inset-0"
+                >
+                  <div class="absolute -inset-0">
+                    <!--suppress AngularNgOptimizedImage -->
+                    <img
+                      alt="Card"
+                      class="w-full h-full object-cover object-center"
+                      src="http://localhost:8080{{ card.imageApiPath }}"
+                    />
                   </div>
                 </div>
               </ng-template>
-</p-virtualscroller>
+              <ng-template pTemplate="title"> {{ card.name }}</ng-template>
+              <ng-template pTemplate="subtitle"> Card subtitle</ng-template>
+              <ng-template pTemplate="footer">
+                <div class="flex gap-4 mt-1">
+                  <p-button label="Cancel" severity="secondary" class="w-full" [outlined]="true" styleClass="w-full"/>
+                  <p-button label="Save" class="w-full" styleClass="w-full"/>
+                </div>
+              </ng-template>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae
+                numquam deserunt
+                quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
+                neque
+                quas!
+              </p>
+            </p-card>
+          }
+        </div>
+      </ng-template>
+    </p-virtualscroller>
+  }
+</div>

src/app/component/items/items.component.ts

@@ -1,29 +1,134 @@
-import { Component } from '@angular/core';
-import {Scroller} from 'primeng/scroller';
-import {NgClass, NgForOf} from '@angular/common';
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {Scroller, ScrollerLazyLoadEvent} from 'primeng/scroller';
+import {Card as CardModel, CardService} from '../../openapi';
 import {Card} from 'primeng/card';
+import {Button} from 'primeng/button';
+import {PrimeTemplate} from 'primeng/api';
+import {VirtualScrollDirective} from '../../directives/virtual-scroll.directive';
+import {debounceTime, Subject} from 'rxjs';
 
 @Component({
   selector: 'app-items',
   imports: [
     Scroller,
-    NgClass,
     Card,
-    NgForOf
+    Button,
+    PrimeTemplate,
+    VirtualScrollDirective,
   ],
   templateUrl: './items.component.html',
   styleUrl: './items.component.css'
 })
-export class ItemsComponent {
-  items: string[] = this.test();
+export class ItemsComponent implements OnInit, AfterViewInit {
+  @ViewChild('container') containerRef!: ElementRef<HTMLElement>;
+  @ViewChild(Scroller) virtualScroller!: Scroller;
 
-  test() {
-    const items = [];
-
-    for (let i = 0; i < 1000  ; i++) {
-      items[i] = `${i}`
+  constructor(private cardService: CardService) {
   }
 
-    return items;
+  private scrollSubject = new Subject<ScrollerLazyLoadEvent>();
+  private resizeObserver!: ResizeObserver;
+
+  private readonly FONT_SIZE_PX = 14;
+
+  lastRequestResponseSize?: number;
+  pageSize: number = 5;
+  page: number = -1;
+  // noinspection PointlessArithmeticExpressionJS Card height + ( margin top + margin bottom) (rem)
+  rowHeight: number = 36 + (1 * 2);
+  itemWidth: number = 24; // Card width (rem)
+  cards: CardModel[] = [];
+  lazyLoading: boolean = false;
+  itemsPerRow!: number;
+  rowsInPage!: number;
+
+  ngOnInit() {
+    this.scrollSubject
+      .pipe(debounceTime(150))
+      .subscribe((lazyLoadEvent) => {
+        this.getPage(lazyLoadEvent.last);
+      });
+
+    this.scrollSubject.next({
+      first: 0,
+      last: 0
+    })
   }
+
+  ngAfterViewInit(): void {
+    this.setupResizeObserver();
+  }
+
+  private setupResizeObserver(): void {
+    this.resizeObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        this.calculateRowsInPage(entry.contentRect.height);
+        this.calculateItemsPerRow(entry.contentRect.width);
+
+        const itemsInViewPort = this.itemsPerRow * this.rowsInPage;
+
+        if (this.virtualScroller) {
+          this.virtualScroller.numItemsInViewport = itemsInViewPort;
+          this.virtualScroller.numToleratedItems = Math.floor(itemsInViewPort * 1.5);
+        }
+      }
+    });
+    this.resizeObserver.observe(this.containerRef.nativeElement);
+  }
+
+  private calculateItemsPerRow(containerWidth: number): void {
+    const newItemsPerRow = Math.floor(containerWidth / (this.itemWidth * this.FONT_SIZE_PX)) || 1;
+
+    if (newItemsPerRow !== this.itemsPerRow) {
+      this.itemsPerRow = newItemsPerRow;
+    }
+    this.updateVirtualScrollerSettings();
+  }
+
+  private calculateRowsInPage(containerHeight: number) {
+    this.rowsInPage = Math.ceil(containerHeight / (this.rowHeight * this.FONT_SIZE_PX));
+  }
+
+  private updateVirtualScrollerSettings(): void {
+    if (this.virtualScroller) {
+      this.virtualScroller.itemSize = (this.rowHeight * this.FONT_SIZE_PX);
+    }
+  }
+
+
+  getPage(lastIndexInPage: number): void {
+    console.log("piss")
+    if (this.lazyLoading) {
+      return;
+    }
+    console.log("piss2")
+    console.log(lastIndexInPage )
+
+    if (this.lastRequestResponseSize && this.lastRequestResponseSize > lastIndexInPage ) {
+      return;
+    }
+    console.log("piss3")
+
+    this.lazyLoading = true
+    this.page++;
+
+    this.cardService.getCards(
+      undefined,
+      this.page,
+      this.pageSize,
+    ).subscribe({
+      next: cards => {
+        console.log(`pageSize ${this.pageSize}`);
+        console.log(`response size ${cards.length}`);
+        this.cards = this.cards.concat(cards);
+        console.log(`total cards ${this.cards.length}`);
+        this.lazyLoading = false;
+      }
+    });
+  }
+
+  onLazyLoad(event: ScrollerLazyLoadEvent) {
+    this.scrollSubject.next(event);
+  }
+
 }

src/app/directives/virtual-scroll.directive.spec.ts

@@ -0,0 +1,8 @@
+import { VirtualScrollDirective } from './virtual-scroll.directive';
+
+describe('VirtualScrollDirective', () => {
+  it('should create an instance', () => {
+    const directive = new VirtualScrollDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/directives/virtual-scroll.directive.ts

@@ -0,0 +1,26 @@
+import {Directive, Input} from '@angular/core';
+import {ScrollerContentOptions} from 'primeng/scroller';
+
+interface CoolScrollerContentOptions<T extends object> extends ScrollerContentOptions {
+  items?: T[];
+}
+
+interface TableRowTemplateContext<T extends object> {
+  $implicit: T;
+  options: CoolScrollerContentOptions<T>;
+}
+
+@Directive({
+  selector: 'ng-template[appVirtualScroll]'
+})
+export class VirtualScrollDirective<T extends object>{
+
+  @Input('appVirtualScroll') items!: T[];
+
+  static ngTemplateContextGuard<E extends object>(
+    _dir: VirtualScrollDirective<E>,
+    _ctx: unknown
+  ): _ctx is TableRowTemplateContext<E> {
+    return true;
+  }
+}

src/app/openapi/.openapi-generator-ignore

@@ -0,0 +1,23 @@
+# OpenAPI Generator Ignore
+# Generated by openapi-generator https://github.com/openapitools/openapi-generator
+
+# Use this file to prevent files from being overwritten by the generator.
+# The patterns follow closely to .gitignore or .dockerignore.
+
+# As an example, the C# client generator defines ApiClient.cs.
+# You can make changes and tell OpenAPI Generator to ignore just this file by uncommenting the following line:
+#ApiClient.cs
+
+# You can match any string of characters against a directory, file or extension with a single asterisk (*):
+#foo/*/qux
+# The above matches foo/bar/qux and foo/baz/qux, but not foo/bar/baz/qux
+
+# You can recursively match patterns against a directory, file or extension with a double asterisk (**):
+#foo/**/qux
+# This matches foo/bar/qux, foo/baz/qux, and foo/bar/baz/qux
+
+# You can also negate patterns with an exclamation (!).
+# For example, you can ignore all files in a docs folder with the file extension .md:
+#docs/*.md
+# Then explicitly reverse the ignore rule for a single file:
+#!docs/README.md

src/app/openapi/.openapi-generator/FILES

@@ -0,0 +1,16 @@
+.gitignore
+README.md
+api.base.service.ts
+api.module.ts
+api/api.ts
+api/card.service.ts
+api/deck-controller.service.ts
+configuration.ts
+encoder.ts
+git_push.sh
+index.ts
+model/card.ts
+model/deck.ts
+model/models.ts
+param.ts
+variables.ts

src/app/openapi/.openapi-generator/VERSION

@@ -0,0 +1 @@
+7.12.0

src/app/openapi/README.md

@@ -0,0 +1,236 @@
+# @
+
+No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+
+The version of the OpenAPI document: 0.0.1
+
+## Building
+
+To install the required dependencies and to build the typescript sources run:
+
+```console
+npm install
+npm run build
+```
+
+## Publishing
+
+First build the package then run `npm publish dist` (don't forget to specify the `dist` folder!)
+
+## Consuming
+
+Navigate to the folder of your consuming project and run one of next commands.
+
+_published:_
+
+```console
+npm install @ --save
+```
+
+_without publishing (not recommended):_
+
+```console
+npm install PATH_TO_GENERATED_PACKAGE/dist.tgz --save
+```
+
+_It's important to take the tgz file, otherwise you'll get trouble with links on windows_
+
+_using `npm link`:_
+
+In PATH_TO_GENERATED_PACKAGE/dist:
+
+```console
+npm link
+```
+
+In your project:
+
+```console
+npm link 
+```
+
+__Note for Windows users:__ The Angular CLI has troubles to use linked npm packages.
+Please refer to this issue <https://github.com/angular/angular-cli/issues/8284> for a solution / workaround.
+Published packages are not effected by this issue.
+
+### General usage
+
+In your Angular project:
+
+```typescript
+// without configuring providers
+import { ApiModule } from '';
+import { HttpClientModule } from '@angular/common/http';
+
+@NgModule({
+    imports: [
+        ApiModule,
+        // make sure to import the HttpClientModule in the AppModule only,
+        // see https://github.com/angular/angular/issues/20575
+        HttpClientModule
+    ],
+    declarations: [ AppComponent ],
+    providers: [],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+```typescript
+// configuring providers
+import { ApiModule, Configuration, ConfigurationParameters } from '';
+
+export function apiConfigFactory (): Configuration {
+  const params: ConfigurationParameters = {
+    // set configuration parameters here.
+  }
+  return new Configuration(params);
+}
+
+@NgModule({
+    imports: [ ApiModule.forRoot(apiConfigFactory) ],
+    declarations: [ AppComponent ],
+    providers: [],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+```typescript
+// configuring providers with an authentication service that manages your access tokens
+import { ApiModule, Configuration } from '';
+
+@NgModule({
+    imports: [ ApiModule ],
+    declarations: [ AppComponent ],
+    providers: [
+      {
+        provide: Configuration,
+        useFactory: (authService: AuthService) => new Configuration(
+          {
+            basePath: environment.apiUrl,
+            accessToken: authService.getAccessToken.bind(authService)
+          }
+        ),
+        deps: [AuthService],
+        multi: false
+      }
+    ],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+```typescript
+import { DefaultApi } from '';
+
+export class AppComponent {
+    constructor(private apiGateway: DefaultApi) { }
+}
+```
+
+Note: The ApiModule is restricted to being instantiated once app wide.
+This is to ensure that all services are treated as singletons.
+
+### Using multiple OpenAPI files / APIs / ApiModules
+
+In order to use multiple `ApiModules` generated from different OpenAPI files,
+you can create an alias name when importing the modules
+in order to avoid naming conflicts:
+
+```typescript
+import { ApiModule } from 'my-api-path';
+import { ApiModule as OtherApiModule } from 'my-other-api-path';
+import { HttpClientModule } from '@angular/common/http';
+
+@NgModule({
+  imports: [
+    ApiModule,
+    OtherApiModule,
+    // make sure to import the HttpClientModule in the AppModule only,
+    // see https://github.com/angular/angular/issues/20575
+    HttpClientModule
+  ]
+})
+export class AppModule {
+
+}
+```
+
+### Set service base path
+
+If different than the generated base path, during app bootstrap, you can provide the base path to your service.
+
+```typescript
+import { BASE_PATH } from '';
+
+bootstrap(AppComponent, [
+    { provide: BASE_PATH, useValue: 'https://your-web-service.com' },
+]);
+```
+
+or
+
+```typescript
+import { BASE_PATH } from '';
+
+@NgModule({
+    imports: [],
+    declarations: [ AppComponent ],
+    providers: [ provide: BASE_PATH, useValue: 'https://your-web-service.com' ],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+### Using @angular/cli
+
+First extend your `src/environments/*.ts` files by adding the corresponding base path:
+
+```typescript
+export const environment = {
+  production: false,
+  API_BASE_PATH: 'http://127.0.0.1:8080'
+};
+```
+
+In the src/app/app.module.ts:
+
+```typescript
+import { BASE_PATH } from '';
+import { environment } from '../environments/environment';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [ ],
+  providers: [{ provide: BASE_PATH, useValue: environment.API_BASE_PATH }],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+```
+
+### Customizing path parameter encoding
+
+Without further customization, only [path-parameters][parameter-locations-url] of [style][style-values-url] 'simple'
+and Dates for format 'date-time' are encoded correctly.
+
+Other styles (e.g. "matrix") are not that easy to encode
+and thus are best delegated to other libraries (e.g.: [@honoluluhenk/http-param-expander]).
+
+To implement your own parameter encoding (or call another library),
+pass an arrow-function or method-reference to the `encodeParam` property of the Configuration-object
+(see [General Usage](#general-usage) above).
+
+Example value for use in your Configuration-Provider:
+
+```typescript
+new Configuration({
+    encodeParam: (param: Param) => myFancyParamEncoder(param),
+})
+```
+
+[parameter-locations-url]: https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.1.0.md#parameter-locations
+[style-values-url]: https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.1.0.md#style-values
+[@honoluluhenk/http-param-expander]: https://www.npmjs.com/package/@honoluluhenk/http-param-expander

src/app/openapi/api.base.service.ts

@@ -0,0 +1,69 @@
+import { HttpHeaders, HttpParams, HttpParameterCodec } from '@angular/common/http';
+import { CustomHttpParameterCodec } from './encoder';
+import { Configuration } from './configuration';
+
+export class BaseService {
+    protected basePath = '';
+    public defaultHeaders = new HttpHeaders();
+    public configuration: Configuration;
+    public encoder: HttpParameterCodec;
+
+    constructor(basePath?: string|string[], configuration?: Configuration) {
+        this.configuration = configuration || new Configuration();
+        if (typeof this.configuration.basePath !== 'string') {
+            const firstBasePath = Array.isArray(basePath) ? basePath[0] : undefined;
+            if (firstBasePath != undefined) {
+                basePath = firstBasePath;
+            }
+
+            if (typeof basePath !== 'string') {
+                basePath = this.basePath;
+            }
+            this.configuration.basePath = basePath;
+        }
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
+    }
+
+    protected canConsumeForm(consumes: string[]): boolean {
+        return consumes.indexOf('multipart/form-data') !== -1;
+    }
+
+    protected addToHttpParams(httpParams: HttpParams, value: any, key?: string): HttpParams {
+        // If the value is an object (but not a Date), recursively add its keys.
+        if (typeof value === 'object' && !(value instanceof Date)) {
+            return this.addToHttpParamsRecursive(httpParams, value, key);
+        }
+        return this.addToHttpParamsRecursive(httpParams, value, key);
+    }
+
+    protected addToHttpParamsRecursive(httpParams: HttpParams, value?: any, key?: string): HttpParams {
+        if (value === null || value === undefined) {
+            return httpParams;
+        }
+        if (typeof value === 'object') {
+            // If JSON format is preferred, key must be provided.
+            if (key != null) {
+                return httpParams.append(key, JSON.stringify(value));
+            }
+            // Otherwise, if it's an array, add each element.
+            if (Array.isArray(value)) {
+                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
+            } else if (value instanceof Date) {
+                if (key != null) {
+                    httpParams = httpParams.append(key, value.toISOString());
+                } else {
+                    throw Error("key may not be null if value is Date");
+                }
+            } else {
+                Object.keys(value).forEach(k => {
+                    const paramKey = key ? `${key}.${k}` : k;
+                    httpParams = this.addToHttpParamsRecursive(httpParams, value[k], paramKey);
+                });
+            }
+            return httpParams;
+        } else if (key != null) {
+            return httpParams.append(key, value);
+        }
+        throw Error("key may not be null if value is not object or array");
+    }
+}

src/app/openapi/api.module.ts

@@ -0,0 +1,30 @@
+import { NgModule, ModuleWithProviders, SkipSelf, Optional } from '@angular/core';
+import { Configuration } from './configuration';
+import { HttpClient } from '@angular/common/http';
+
+
+@NgModule({
+  imports:      [],
+  declarations: [],
+  exports:      [],
+  providers: []
+})
+export class ApiModule {
+    public static forRoot(configurationFactory: () => Configuration): ModuleWithProviders<ApiModule> {
+        return {
+            ngModule: ApiModule,
+            providers: [ { provide: Configuration, useFactory: configurationFactory } ]
+        };
+    }
+
+    constructor( @Optional() @SkipSelf() parentModule: ApiModule,
+                 @Optional() http: HttpClient) {
+        if (parentModule) {
+            throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
+        }
+        if (!http) {
+            throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
+            'See also https://github.com/angular/angular/issues/20575');
+        }
+    }
+}

src/app/openapi/api/api.ts

@@ -0,0 +1,5 @@
+export * from './card.service';
+import { CardService } from './card.service';
+export * from './deck-controller.service';
+import { DeckControllerService } from './deck-controller.service';
+export const APIS = [CardService, DeckControllerService];

src/app/openapi/api/card.service.ts

@@ -0,0 +1,193 @@
+/**
+ * dex API
+ *
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/* tslint:disable:no-unused-variable member-ordering */
+
+import { Inject, Injectable, Optional }                      from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams,
+         HttpResponse, HttpEvent, HttpParameterCodec, HttpContext
+        }       from '@angular/common/http';
+import { CustomHttpParameterCodec }                          from '../encoder';
+import { Observable }                                        from 'rxjs';
+
+// @ts-ignore
+import { Card } from '../model/card';
+
+// @ts-ignore
+import { BASE_PATH, COLLECTION_FORMATS }                     from '../variables';
+import { Configuration }                                     from '../configuration';
+import { BaseService } from '../api.base.service';
+
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CardService extends BaseService {
+
+    constructor(protected httpClient: HttpClient, @Optional() @Inject(BASE_PATH) basePath: string|string[], @Optional() configuration?: Configuration) {
+        super(basePath, configuration);
+    }
+
+    /**
+     * Get a singular Card by its ID
+     * @param id
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public getCardById(id: number, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<Card>;
+    public getCardById(id: number, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<Card>>;
+    public getCardById(id: number, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<Card>>;
+    public getCardById(id: number, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
+        if (id === null || id === undefined) {
+            throw new Error('Required parameter id was null or undefined when calling getCardById.');
+        }
+
+        let localVarHeaders = this.defaultHeaders;
+
+        const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
+            'application/json'
+        ]);
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+
+        const localVarHttpContext: HttpContext = options?.context ?? new HttpContext();
+
+        const localVarTransferCache: boolean = options?.transferCache ?? true;
+
+
+        let responseType_: 'text' | 'json' | 'blob' = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            } else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            } else {
+                responseType_ = 'blob';
+            }
+        }
+
+        let localVarPath = `/api/cards/${this.configuration.encodeParam({name: "id", value: id, in: "path", style: "simple", explode: false, dataType: "number", dataFormat: "int64"})}`;
+        return this.httpClient.request<Card>('get', `${this.configuration.basePath}${localVarPath}`,
+            {
+                context: localVarHttpContext,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                transferCache: localVarTransferCache,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * Get the image of a Card by its ID
+     * @param id
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public getCardImageById(id: number, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/octet-stream', context?: HttpContext, transferCache?: boolean}): Observable<Blob>;
+    public getCardImageById(id: number, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/octet-stream', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<Blob>>;
+    public getCardImageById(id: number, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/octet-stream', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<Blob>>;
+    public getCardImageById(id: number, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/octet-stream', context?: HttpContext, transferCache?: boolean}): Observable<any> {
+        if (id === null || id === undefined) {
+            throw new Error('Required parameter id was null or undefined when calling getCardImageById.');
+        }
+
+        let localVarHeaders = this.defaultHeaders;
+
+        const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
+            'application/octet-stream'
+        ]);
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+
+        const localVarHttpContext: HttpContext = options?.context ?? new HttpContext();
+
+        const localVarTransferCache: boolean = options?.transferCache ?? true;
+
+
+        let localVarPath = `/api/cards/${this.configuration.encodeParam({name: "id", value: id, in: "path", style: "simple", explode: false, dataType: "number", dataFormat: "int64"})}/image`;
+        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`,
+            {
+                context: localVarHttpContext,
+                responseType: "blob",
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                transferCache: localVarTransferCache,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * Get a page of Cards with optional name query parameter
+     * @param name
+     * @param page
+     * @param pageSize
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public getCards(name?: string, page?: number, pageSize?: number, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<Array<Card>>;
+    public getCards(name?: string, page?: number, pageSize?: number, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<Array<Card>>>;
+    public getCards(name?: string, page?: number, pageSize?: number, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<Array<Card>>>;
+    public getCards(name?: string, page?: number, pageSize?: number, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
+        let localVarQueryParameters = new HttpParams({encoder: this.encoder});
+        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
+          <any>name, 'name');
+        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
+          <any>page, 'page');
+        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
+          <any>pageSize, 'pageSize');
+
+        let localVarHeaders = this.defaultHeaders;
+
+        const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
+            'application/json'
+        ]);
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+
+        const localVarHttpContext: HttpContext = options?.context ?? new HttpContext();
+
+        const localVarTransferCache: boolean = options?.transferCache ?? true;
+
+
+        let responseType_: 'text' | 'json' | 'blob' = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            } else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            } else {
+                responseType_ = 'blob';
+            }
+        }
+
+        let localVarPath = `/api/cards`;
+        return this.httpClient.request<Array<Card>>('get', `${this.configuration.basePath}${localVarPath}`,
+            {
+                context: localVarHttpContext,
+                params: localVarQueryParameters,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                transferCache: localVarTransferCache,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+}

src/app/openapi/api/deck-controller.service.ts

@@ -0,0 +1,216 @@
+/**
+ * dex API
+ *
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/* tslint:disable:no-unused-variable member-ordering */
+
+import { Inject, Injectable, Optional }                      from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams,
+         HttpResponse, HttpEvent, HttpParameterCodec, HttpContext 
+        }       from '@angular/common/http';
+import { CustomHttpParameterCodec }                          from '../encoder';
+import { Observable }                                        from 'rxjs';
+
+// @ts-ignore
+import { Deck } from '../model/deck';
+
+// @ts-ignore
+import { BASE_PATH, COLLECTION_FORMATS }                     from '../variables';
+import { Configuration }                                     from '../configuration';
+import { BaseService } from '../api.base.service';
+
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DeckControllerService extends BaseService {
+
+    constructor(protected httpClient: HttpClient, @Optional() @Inject(BASE_PATH) basePath: string|string[], @Optional() configuration?: Configuration) {
+        super(basePath, configuration);
+    }
+
+    /**
+     * Add Card To Deck
+     * @param cardId 
+     * @param deckName 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public apiDecksDeckNameCardIdPost(cardId: number, deckName: string, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<object>;
+    public apiDecksDeckNameCardIdPost(cardId: number, deckName: string, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<object>>;
+    public apiDecksDeckNameCardIdPost(cardId: number, deckName: string, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<object>>;
+    public apiDecksDeckNameCardIdPost(cardId: number, deckName: string, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
+        if (cardId === null || cardId === undefined) {
+            throw new Error('Required parameter cardId was null or undefined when calling apiDecksDeckNameCardIdPost.');
+        }
+        if (deckName === null || deckName === undefined) {
+            throw new Error('Required parameter deckName was null or undefined when calling apiDecksDeckNameCardIdPost.');
+        }
+
+        let localVarHeaders = this.defaultHeaders;
+
+        const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
+            'application/json'
+        ]);
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+
+        const localVarHttpContext: HttpContext = options?.context ?? new HttpContext();
+
+        const localVarTransferCache: boolean = options?.transferCache ?? true;
+
+
+        let responseType_: 'text' | 'json' | 'blob' = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            } else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            } else {
+                responseType_ = 'blob';
+            }
+        }
+
+        let localVarPath = `/api/decks/${this.configuration.encodeParam({name: "deckName", value: deckName, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined})}/${this.configuration.encodeParam({name: "cardId", value: cardId, in: "path", style: "simple", explode: false, dataType: "number", dataFormat: "int64"})}`;
+        return this.httpClient.request<object>('post', `${this.configuration.basePath}${localVarPath}`,
+            {
+                context: localVarHttpContext,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                transferCache: localVarTransferCache,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * Get Deck
+     * @param name 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public apiDecksGet(name: string, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<Deck>;
+    public apiDecksGet(name: string, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<Deck>>;
+    public apiDecksGet(name: string, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<Deck>>;
+    public apiDecksGet(name: string, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
+        if (name === null || name === undefined) {
+            throw new Error('Required parameter name was null or undefined when calling apiDecksGet.');
+        }
+
+        let localVarQueryParameters = new HttpParams({encoder: this.encoder});
+        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
+          <any>name, 'name');
+
+        let localVarHeaders = this.defaultHeaders;
+
+        const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
+            'application/json'
+        ]);
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+
+        const localVarHttpContext: HttpContext = options?.context ?? new HttpContext();
+
+        const localVarTransferCache: boolean = options?.transferCache ?? true;
+
+
+        let responseType_: 'text' | 'json' | 'blob' = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            } else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            } else {
+                responseType_ = 'blob';
+            }
+        }
+
+        let localVarPath = `/api/decks`;
+        return this.httpClient.request<Deck>('get', `${this.configuration.basePath}${localVarPath}`,
+            {
+                context: localVarHttpContext,
+                params: localVarQueryParameters,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                transferCache: localVarTransferCache,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * Create Deck
+     * @param deck 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public apiDecksPost(deck: Deck, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<string>;
+    public apiDecksPost(deck: Deck, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<string>>;
+    public apiDecksPost(deck: Deck, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<string>>;
+    public apiDecksPost(deck: Deck, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
+        if (deck === null || deck === undefined) {
+            throw new Error('Required parameter deck was null or undefined when calling apiDecksPost.');
+        }
+
+        let localVarHeaders = this.defaultHeaders;
+
+        const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
+            'application/json'
+        ]);
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+
+        const localVarHttpContext: HttpContext = options?.context ?? new HttpContext();
+
+        const localVarTransferCache: boolean = options?.transferCache ?? true;
+
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+            'application/json'
+        ];
+        const httpContentTypeSelected: string | undefined = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
+        }
+
+        let responseType_: 'text' | 'json' | 'blob' = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            } else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            } else {
+                responseType_ = 'blob';
+            }
+        }
+
+        let localVarPath = `/api/decks`;
+        return this.httpClient.request<string>('post', `${this.configuration.basePath}${localVarPath}`,
+            {
+                context: localVarHttpContext,
+                body: deck,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                transferCache: localVarTransferCache,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+}

src/app/openapi/configuration.ts

@@ -0,0 +1,180 @@
+import { HttpHeaders, HttpParams, HttpParameterCodec } from '@angular/common/http';
+import { Param } from './param';
+
+export interface ConfigurationParameters {
+    /**
+     *  @deprecated Since 5.0. Use credentials instead
+     */
+    apiKeys?: {[ key: string ]: string};
+    username?: string;
+    password?: string;
+    /**
+     *  @deprecated Since 5.0. Use credentials instead
+     */
+    accessToken?: string | (() => string);
+    basePath?: string;
+    withCredentials?: boolean;
+    /**
+     * Takes care of encoding query- and form-parameters.
+     */
+    encoder?: HttpParameterCodec;
+    /**
+     * Override the default method for encoding path parameters in various
+     * <a href="https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.1.0.md#style-values">styles</a>.
+     * <p>
+     * See {@link README.md} for more details
+     * </p>
+     */
+    encodeParam?: (param: Param) => string;
+    /**
+     * The keys are the names in the securitySchemes section of the OpenAPI
+     * document. They should map to the value used for authentication
+     * minus any standard prefixes such as 'Basic' or 'Bearer'.
+     */
+    credentials?: {[ key: string ]: string | (() => string | undefined)};
+}
+
+export class Configuration {
+    /**
+     *  @deprecated Since 5.0. Use credentials instead
+     */
+    apiKeys?: {[ key: string ]: string};
+    username?: string;
+    password?: string;
+    /**
+     *  @deprecated Since 5.0. Use credentials instead
+     */
+    accessToken?: string | (() => string);
+    basePath?: string;
+    withCredentials?: boolean;
+    /**
+     * Takes care of encoding query- and form-parameters.
+     */
+    encoder?: HttpParameterCodec;
+    /**
+     * Encoding of various path parameter
+     * <a href="https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.1.0.md#style-values">styles</a>.
+     * <p>
+     * See {@link README.md} for more details
+     * </p>
+     */
+    encodeParam: (param: Param) => string;
+    /**
+     * The keys are the names in the securitySchemes section of the OpenAPI
+     * document. They should map to the value used for authentication
+     * minus any standard prefixes such as 'Basic' or 'Bearer'.
+     */
+    credentials: {[ key: string ]: string | (() => string | undefined)};
+
+    constructor(configurationParameters: ConfigurationParameters = {}) {
+        this.apiKeys = configurationParameters.apiKeys;
+        this.username = configurationParameters.username;
+        this.password = configurationParameters.password;
+        this.accessToken = configurationParameters.accessToken;
+        this.basePath = configurationParameters.basePath;
+        this.withCredentials = configurationParameters.withCredentials;
+        this.encoder = configurationParameters.encoder;
+        if (configurationParameters.encodeParam) {
+            this.encodeParam = configurationParameters.encodeParam;
+        }
+        else {
+            this.encodeParam = param => this.defaultEncodeParam(param);
+        }
+        if (configurationParameters.credentials) {
+            this.credentials = configurationParameters.credentials;
+        }
+        else {
+            this.credentials = {};
+        }
+    }
+
+    /**
+     * Select the correct content-type to use for a request.
+     * Uses {@link Configuration#isJsonMime} to determine the correct content-type.
+     * If no content type is found return the first found type if the contentTypes is not empty
+     * @param contentTypes - the array of content types that are available for selection
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
+     */
+    public selectHeaderContentType (contentTypes: string[]): string | undefined {
+        if (contentTypes.length === 0) {
+            return undefined;
+        }
+
+        const type = contentTypes.find((x: string) => this.isJsonMime(x));
+        if (type === undefined) {
+            return contentTypes[0];
+        }
+        return type;
+    }
+
+    /**
+     * Select the correct accept content-type to use for a request.
+     * Uses {@link Configuration#isJsonMime} to determine the correct accept content-type.
+     * If no content type is found return the first found type if the contentTypes is not empty
+     * @param accepts - the array of content types that are available for selection.
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
+     */
+    public selectHeaderAccept(accepts: string[]): string | undefined {
+        if (accepts.length === 0) {
+            return undefined;
+        }
+
+        const type = accepts.find((x: string) => this.isJsonMime(x));
+        if (type === undefined) {
+            return accepts[0];
+        }
+        return type;
+    }
+
+    /**
+     * Check if the given MIME is a JSON MIME.
+     * JSON MIME examples:
+     *   application/json
+     *   application/json; charset=UTF8
+     *   APPLICATION/JSON
+     *   application/vnd.company+json
+     * @param mime - MIME (Multipurpose Internet Mail Extensions)
+     * @return True if the given MIME is JSON, false otherwise.
+     */
+    public isJsonMime(mime: string): boolean {
+        const jsonMime: RegExp = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');
+        return mime !== null && (jsonMime.test(mime) || mime.toLowerCase() === 'application/json-patch+json');
+    }
+
+    public lookupCredential(key: string): string | undefined {
+        const value = this.credentials[key];
+        return typeof value === 'function'
+            ? value()
+            : value;
+    }
+
+    public addCredentialToHeaders(credentialKey: string, headerName: string, headers: HttpHeaders, prefix?: string): HttpHeaders {
+        const value = this.lookupCredential(credentialKey);
+        return value
+            ? headers.set(headerName, (prefix ?? '') + value)
+            : headers;
+    }
+
+    public addCredentialToQuery(credentialKey: string, paramName: string, query: HttpParams): HttpParams {
+        const value = this.lookupCredential(credentialKey);
+        return value
+            ? query.set(paramName, value)
+            : query;
+    }
+
+    private defaultEncodeParam(param: Param): string {
+        // This implementation exists as fallback for missing configuration
+        // and for backwards compatibility to older typescript-angular generator versions.
+        // It only works for the 'simple' parameter style.
+        // Date-handling only works for the 'date-time' format.
+        // All other styles and Date-formats are probably handled incorrectly.
+        //
+        // But: if that's all you need (i.e.: the most common use-case): no need for customization!
+
+        const value = param.dataFormat === 'date-time' && param.value instanceof Date
+            ? (param.value as Date).toISOString()
+            : param.value;
+
+        return encodeURIComponent(String(value));
+    }
+}

src/app/openapi/encoder.ts

@@ -0,0 +1,20 @@
+import { HttpParameterCodec } from '@angular/common/http';
+
+/**
+ * Custom HttpParameterCodec
+ * Workaround for https://github.com/angular/angular/issues/18261
+ */
+export class CustomHttpParameterCodec implements HttpParameterCodec {
+    encodeKey(k: string): string {
+        return encodeURIComponent(k);
+    }
+    encodeValue(v: string): string {
+        return encodeURIComponent(v);
+    }
+    decodeKey(k: string): string {
+        return decodeURIComponent(k);
+    }
+    decodeValue(v: string): string {
+        return decodeURIComponent(v);
+    }
+}

src/app/openapi/index.ts

@@ -0,0 +1,6 @@
+export * from './api/api';
+export * from './model/models';
+export * from './variables';
+export * from './configuration';
+export * from './api.module';
+export * from './param';

src/app/openapi/model/card.ts

@@ -0,0 +1,30 @@
+/**
+ * dex API
+ *
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export interface Card { 
+    id?: number;
+    description: string;
+    pendulumDescription?: string | null;
+    defense?: number | null;
+    attack?: number | null;
+    health?: number | null;
+    level?: number | null;
+    linkValue?: number | null;
+    name: string;
+    type: string;
+    frameType: string;
+    archetype?: string | null;
+    race?: string | null;
+    attribute?: string | null;
+    decks: { [key: string]: number; };
+    imageApiPath: string;
+}
+

src/app/openapi/model/deck.ts

@@ -0,0 +1,16 @@
+/**
+ * dex API
+ *
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export interface Deck { 
+    name: string;
+    cards: { [key: string]: number; };
+}
+

src/app/openapi/model/models.ts

@@ -0,0 +1,2 @@
+export * from './card';
+export * from './deck';

src/app/openapi/param.ts

@@ -0,0 +1,69 @@
+/**
+ * Standard parameter styles defined by OpenAPI spec
+ */
+export type StandardParamStyle =
+  | 'matrix'
+  | 'label'
+  | 'form'
+  | 'simple'
+  | 'spaceDelimited'
+  | 'pipeDelimited'
+  | 'deepObject'
+  ;
+
+/**
+ * The OpenAPI standard {@link StandardParamStyle}s may be extended by custom styles by the user.
+ */
+export type ParamStyle = StandardParamStyle | string;
+
+/**
+ * Standard parameter locations defined by OpenAPI spec
+ */
+export type ParamLocation = 'query' | 'header' | 'path' | 'cookie';
+
+/**
+ * Standard types as defined in <a href="https://swagger.io/specification/#data-types">OpenAPI Specification: Data Types</a>
+ */
+export type StandardDataType =
+  | "integer"
+  | "number"
+  | "boolean"
+  | "string"
+  | "object"
+  | "array"
+  ;
+
+/**
+ * Standard {@link DataType}s plus your own types/classes.
+ */
+export type DataType = StandardDataType | string;
+
+/**
+ * Standard formats as defined in <a href="https://swagger.io/specification/#data-types">OpenAPI Specification: Data Types</a>
+ */
+export type StandardDataFormat =
+  | "int32"
+  | "int64"
+  | "float"
+  | "double"
+  | "byte"
+  | "binary"
+  | "date"
+  | "date-time"
+  | "password"
+  ;
+
+export type DataFormat = StandardDataFormat | string;
+
+/**
+ * The parameter to encode.
+ */
+export interface Param {
+  name: string;
+  value: unknown;
+  in: ParamLocation;
+  style: ParamStyle,
+  explode: boolean;
+  dataType: DataType;
+  dataFormat: DataFormat | undefined;
+}

src/app/openapi/variables.ts

@@ -0,0 +1,9 @@
+import { InjectionToken } from '@angular/core';
+
+export const BASE_PATH = new InjectionToken<string>('basePath');
+export const COLLECTION_FORMATS = {
+    'csv': ',',
+    'tsv': '   ',
+    'ssv': ' ',
+    'pipes': '|'
+}