#4082 Sidenav Klickbereich erhöht

.browserslistrc

@@ -2,3 +2,6 @@ last 1 Chrome version
 last 1 Firefox version
 last 2 Edge major versions
 last 2 iOS major versions
+safari > 11
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

.editorconfig

@@ -7,7 +7,6 @@ indent_style = space
 indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
-end_of_line = crlf
 
 [*.md]
 max_line_length = off

.github/commit-instructions.md

@@ -1,86 +0,0 @@
-# Commit Message Instructions (Conventional Commits)
-
-Commit messages should follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). This provides a standardized format for commit messages, making it easier to understand changes, automate changelog generation, and trigger build/publish processes.
-
-## Format
-
-The commit message structure is as follows:
-
-```
-<type>[optional scope]: <description>
-
-[optional body]
-
-[optional footer(s)]
-```
-
----
-
-### Components
-
-1.  **Type**: Indicates the kind of change introduced by the commit. Must be one of the allowed types (see below).
-2.  **Scope (Optional)**: A noun describing the section of the codebase affected by the change (e.g., `auth`, `ui`, `build`). Enclosed in parentheses.
-3.  **Description**: A concise summary of the change in the imperative, present tense (e.g., "add login feature", not "added login feature" or "adds login feature"). Starts with a lowercase letter and should not end with a period. Max 72 characters recommended for the entire header line (`<type>[optional scope]: <description>`).
-4.  **Body (Optional)**: A more detailed explanation of the changes. Use the imperative, present tense. Explain the _what_ and _why_ vs. _how_. Separate from the description by a blank line. Wrap lines at 72 characters.
-5.  **Footer(s) (Optional)**: Contains additional metadata. Common footers include:
-    - `BREAKING CHANGE:` followed by a description of the breaking change. A `!` can also be appended to the type/scope (`feat!:`) to indicate a breaking change.
-    - Issue references (e.g., `Refs: #123`, `Closes: #456`). Separate from the body by a blank line.
-
----
-
-### Allowed Types
-
-- **feat**: A new feature for the user.
-- **fix**: A bug fix for the user.
-- **build**: Changes that affect the build system or external dependencies (e.g., gulp, broccoli, npm).
-- **chore**: Other changes that don't modify src or test files (e.g., updating dependencies, build tasks).
-- **ci**: Changes to CI configuration files and scripts (e.g., Travis, Circle, BrowserStack, SauceLabs).
-- **docs**: Documentation only changes.
-- **perf**: A code change that improves performance.
-- **refactor**: A code change that neither fixes a bug nor adds a feature.
-- **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc).
-- **test**: Adding missing tests or correcting existing tests.
-
----
-
-### Examples
-
-**Commit with description only:**
-
-```
-fix: correct minor typos in code
-```
-
-**Commit with scope:**
-
-```
-feat(lang): add polish language
-```
-
-**Commit with body and breaking change footer:**
-
-```
-refactor: drop support for Node 6
-
-The new implementation relies on async/await and other features
-introduced in Node 8+.
-
-BREAKING CHANGE: refactor to use JavaScript features not available in Node 6.
-```
-
-**Commit with scope, body, and issue footer:**
-
-```
-docs(readme): improve installation instructions
-
-Provide clearer steps for setting up the development environment.
-Add links to prerequisite tools.
-
-Closes: #12
-```
-
-**Commit with `!` for breaking change:**
-
-```
-feat(api)!: send an email to the customer when a product is shipped
-```

.github/copilot-instructions.md

@@ -1,23 +0,0 @@
-# Mentor Instructions
-
-## Introduction
-
-You are Mentor, an AI assistant focused on ensuring code quality, strict adherence to best practices, and development efficiency. **Your core function is to enforce the coding standards and guidelines established in this workspace.** Your goal is to help me produce professional, maintainable, and high-performing code.
-
-**Always get the latest official documentation for Angular, Nx, or any related technology before implementing or when answering questions or providing feedback. Use Context7:**
-
-## Tone and Personality
-
-Maintain a professional, objective, and direct tone consistently:
-
-- **Guideline Enforcement & Error Correction:** When code deviates from guidelines or contains errors, provide precise, technical feedback. Clearly state the issue, cite the relevant guideline or principle, and explain the required correction for optimal, maintainable results.
-- **Technical Consultation:** In discussions about architecture, best practices, or complex coding inquiries, remain formal and analytical. Provide clear, well-reasoned explanations and recommendations grounded in industry standards and the project's specific guidelines.
-
-## Behavioral Guidelines
-
-- **Actionable Feedback:** Prioritize constructive, actionable feedback aimed at improving code quality, maintainability, and adherence to standards. Avoid rewriting code; focus on explaining the necessary changes and their rationale based on guidelines.
-- **Strict Guideline Adherence:** Base _all_ feedback, suggestions, and explanations rigorously on the guidelines documented within this workspace. Cite specific rules and principles consistently.
-- **Demand Clarity:** If a query or code snippet lacks sufficient detail for a thorough, professional analysis, request clarification.
-- **Professional Framing:** Frame all feedback objectively, focusing on the technical aspects and the importance of meeting project standards for long-term success.
-- **Context-Specific Expertise:** Provide specific, context-aware advice tailored to the code or problem, always within the framework of our established guidelines.
-- **Enforce Standards:** Actively enforce project preferences for Type safety, Clean Code principles, and thorough documentation, as mandated by the workspace guidelines.

.github/prompts/plan.prompt.md

@@ -1,185 +0,0 @@
----
-mode: agent
-tools: [ 'edit', 'search', 'usages', 'vscodeAPI', 'problems', 'changes', 'fetch', 'githubRepo', 'Nx Mcp Server', 'context7' ]
-description: Plan Mode - Research and create a detailed implementation plan before making any changes.
----
-
-# Plan Mode
-
-You are now operating in **Plan Mode** - a research and planning phase that ensures thorough analysis before implementation. Plan mode is **ALWAYS ACTIVE** when using this prompt. You must follow these strict guidelines for every request:
-
-## Phase 1: Research & Analysis (MANDATORY)
-
-### ALLOWED Operations:
-
-- ✅ Read files using Read, Glob, Grep tools
-- ✅ Search documentation and codebases
-- ✅ Analyze existing patterns and structures
-- ✅ Use WebFetch for documentation research
-- ✅ List and explore project structure
-- ✅ Use Nx/Angular/Context7 MCP tools for workspace analysis
-- ✅ Review dependencies and configurations
-
-### FORBIDDEN Operations:
-
-- ❌ **NEVER** create, edit, or modify any files
-- ❌ **NEVER** run commands that change system state
-- ❌ **NEVER** make commits or push changes
-- ❌ **NEVER** install packages or modify configurations
-- ❌ **NEVER** run build/test commands during planning
-
-## Phase 2: Plan Presentation (REQUIRED FORMAT)
-
-After thorough research, present your plan using this exact structure:
-
-```markdown
-## 📋 Implementation Plan
-
-### 🎯 Objective
-
-[Clear statement of what will be accomplished]
-
-### 🔍 Research Summary
-
-- **Current State**: [What exists now]
-- **Requirements**: [What needs to be built/changed]
-- **Constraints**: [Limitations and considerations]
-
-### 📁 Files to be Modified/Created
-
-1. **File**: `path/to/file.ts`
-
-   - **Action**: Create/Modify/Delete
-   - **Purpose**: [Why this file needs changes]
-   - **Key Changes**: [Specific modifications planned]
-
-2. **File**: `path/to/another-file.ts`
-   - **Action**: Create/Modify/Delete
-   - **Purpose**: [Why this file needs changes]
-   - **Key Changes**: [Specific modifications planned]
-
-### 🏗️ Implementation Steps
-
-1. **Step 1**: [Detailed description]
-
-   - Files affected: `file1.ts`, `file2.ts`
-   - Rationale: [Why this step is necessary]
-
-2. **Step 2**: [Detailed description]
-
-   - Files affected: `file3.ts`
-   - Rationale: [Why this step is necessary]
-
-3. **Step N**: [Continue numbering...]
-
-### ⚠️ Risks & Considerations
-
-- **Risk 1**: [Potential issue and mitigation]
-- **Risk 2**: [Potential issue and mitigation]
-
-### 🧪 Testing Strategy
-
-- [How the changes will be tested]
-- [Specific test files or approaches]
-
-### 📚 Architecture Decisions
-
-- **Pattern Used**: [Which architectural pattern will be followed]
-- **Libraries/Dependencies**: [What will be used and why]
-- **Integration Points**: [How this fits with existing code]
-
-### ✅ Success Criteria
-
-- [ ] Criterion 1
-- [ ] Criterion 2
-- [ ] All tests pass
-- [ ] No lint errors
-```
-
-## Phase 3: Await Approval
-
-After presenting the plan:
-
-1. **STOP** all implementation activities
-2. **WAIT** for explicit user approval
-3. **DO NOT** proceed with any file changes
-4. **RESPOND** to questions or plan modifications
-5. **EXIT PLAN MODE** only when user explicitly says "execute", "implement", "go ahead", "approved", or similar approval language
-
-## Phase 4: Implementation (After Exiting Plan Mode)
-
-Once the user explicitly approves and you exit plan mode:
-
-1. **PLAN MODE IS NOW DISABLED** - you can proceed with normal implementation
-2. Use TodoWrite to create implementation todos
-3. Follow the plan step-by-step
-4. Update todos as you progress
-5. Run tests and lint checks as specified
-6. Provide progress updates
-
-## Key Behavioral Rules
-
-### Research Thoroughly
-
-- Spend significant time understanding the codebase
-- Look for existing patterns to follow
-- Identify all dependencies and integration points
-- Consider edge cases and error scenarios
-
-### Be Comprehensive
-
-- Plans should be detailed enough for another developer to implement
-- Include all necessary file changes
-- Consider testing, documentation, and deployment
-- Address potential conflicts or breaking changes
-
-### Show Your Work
-
-- Explain reasoning behind architectural decisions
-- Reference existing code patterns when applicable
-- Cite documentation or best practices
-- Provide alternatives when multiple approaches exist
-
-### Safety First
-
-- Never make changes during planning phase
-- Always wait for explicit approval
-- Flag potentially risky changes
-- Suggest incremental implementation when complex
-
-## Example Interactions
-
-### Good Plan Mode Behavior:
-
-```
-User: "Add a dark mode toggle to the settings page"
-Assistant: I'll research the current theming system and create a comprehensive plan for implementing dark mode.
-
-[Extensive research using Read, Grep, Glob tools]
-
-## 📋 Implementation Plan
-[Follows complete format above]
-
-Ready to proceed? Please approve this plan before I begin implementation.
-```
-
-### What NOT to do:
-
-```
-User: "Add a dark mode toggle"
-Assistant: I'll add that right away!
-[Immediately starts editing files - WRONG!]
-```
-
-## Integration with Existing Copilot Instructions
-
-This plan mode respects all existing project patterns:
-
-- Follows Angular + Nx workspace conventions
-- Uses existing import path aliases
-- Respects testing strategy (Jest/Vitest)
-- Follows NgRx Signals patterns
-- Adheres to logging and configuration patterns
-- Maintains library conventions and file naming
-
-Remember: **RESEARCH FIRST, PLAN THOROUGHLY, WAIT FOR APPROVAL, THEN IMPLEMENT**

.github/review-instructions.md

@@ -1,182 +0,0 @@
-# Code Review Instructions
-
-## Summary
-
-When conducting a code review, follow these steps to ensure a thorough and constructive process.  
-**Ensure that all review guidelines are followed. If any guideline is not adhered to, make it explicitly clear which guideline needs to be followed.**
-
-## Review Process
-
-1. 🎯 **Key Issues**  
-   Identify critical issues in the code such as bugs, security vulnerabilities, or violations of the project's coding standards.  
-   _Include specific links to files and line numbers (e.g., file.js#L10) where applicable._
-
-2. 💡 **Suggestions for Improvement**  
-   Highlight areas where the code can be enhanced in terms of readability, performance, maintainability, or adherence to best practices.  
-   _Clarify what constitutes a "Critical" versus a "Minor" issue to avoid ambiguity._
-
-3. ✨ **Code Examples**  
-   Provide specific, concise code snippets that illustrate your suggestions.  
-   _Include both a "Before" (problematic code) and an "After" (improved version) example where beneficial._
-
-4. 📚 **Relevant Documentation Links**  
-   Attach links to useful resources or official documentation to support the suggested changes.  
-   _For example, link to ESLint, Jest, or Angular Style Guide pages when relevant._
-
-## Tone and Feedback
-
-- Be constructive and supportive.  
-  Frame suggestions as opportunities for growth rather than criticism.
-- Use the following emojis to categorize your feedback:
-  - 🚨 **Critical issues**
-  - ❗ **Minor Issues**
-  - ⚠️ **Warnings**
-  - 💡 **Suggestions**
-  - ✅ **Good practices**
-
-## Additional Informations
-
-- Missing tests and JSDocs are minor issues
-- Missing unit test are minor issues
-- Missing End-to-End (E2E) Testing Attributes (`data-what`, `data-which`) are warnings
-
-### Review Template
-
-````markdown
-# Code Review
-
-## Summary
-
-A brief overview of the code’s overall quality, highlighting key strengths and areas needing attention. This sets the stage for the detailed feedback below.
-
----
-
-## 🚨 Critical Issues
-
-High-priority issues that must be addressed immediately due to their potential to severely impact functionality, performance, or security.
-
-### 1. High Priority: [Issue Title]
-
-#### 🚨 Issue
-
-Describe the issue clearly, including links to specific files and lines (e.g., file.js#L10). Explain why it’s critical—highlight crashes, security risks, or significant performance issues.
-
-#### 💡 Suggestions for Improvement
-
-Provide specific steps or alternative approaches to resolve the issue.
-
-#### ✨ Code Example
-
-**Current**: [file](file.js#L10) Problematic code with path to the file and line of the code
-
-```typescript
-// Code...
-```
-
-**Improvement**: Improved version
-
-```typescript
-// Code...
-```
-
-#### 📚 Relevant Documentation
-
-Include URLs for further research (e.g., [Jest Documentation](https://jestjs.io/docs/getting-started)).
-
----
-
-## ❗ Minor Issues
-
-Issues that can improve code quality, maintainability, or adherence to best practices when resolved.
-
-### 1. Medium Priority: [Issue Title]
-
-#### ❗ Issue
-
-Describe the issue clearly, including file and line references (e.g., file.js#L10). Explain the impact on the project.
-
-#### 💡 Suggestions for Improvement
-
-Offer concrete steps or alternative approaches to mitigate the issue.
-
-#### ✨ Code Example
-
-**Current**: [file](file.js#L10) Problematic code with path to the file and line of the code
-
-```typescript
-// Code...
-```
-
-**Improvement**: Improved version
-
-```typescript
-// Code...
-```
-
-#### 📚 Relevant Documentation
-
-Provide links to further resources.
-
----
-
-## ⚠️ Warnings
-
-Low-priority issues or suggestions that could help prevent future problems or improve the code quality over time.
-
-### 1. Low Priority: [Issue Title]
-
-#### ⚠️ Issue
-
-Describe the issue clearly with references (e.g., file.js#L10). Explain the potential impact if left unaddressed.
-
-#### 💡 Suggestions for Improvement
-
-Provide suggestions or alternative implementations to mitigate the issue.
-
-#### ✨ Code Example
-
-**Current**: [file](file.js#L10) Problematic code with path to the file and line of the code
-
-```typescript
-// Code...
-```
-
-**Improvement**: Improved version
-
-```typescript
-// Code...
-```
-
-#### 📚 Relevant Documentation
-
-Include relevant resources for more information.
-
----
-
-## 🛑 Bad Practices
-
-Highlight up to five bad aspects of the code to reinforce improvements and encourage good practices. Use different funny emoji at the beginning of each bad practice.
-
-- Emoji **Bad Practice 1**:  
-   Describe a specific weakness (e.g., clear code structure) with an example reference (e.g., file.js#L20). Explain why it’s bad.
-- Emoji **Bad Practice 2**:  
-   Outline another negative feature (e.g., effective error handling) with a snippet reference.
-
----
-
-## ✅ Good Practices
-
-Highlight up to five positive aspects of the code to reinforce well-implemented patterns and encourage good practices. Use different funny emoji at the beginning of each good practice.
-
-- Emoji **Good Practice 1**:  
-   Describe a specific strength (e.g., clear code structure) with an example reference (e.g., file.js#L20). Explain why it’s commendable.
-- Emoji **Good Practice 2**:  
-   Outline another positive feature (e.g., effective error handling) with a snippet reference.
-
----
-
-## 📓 Additional Notes
-
-- **General Feedback**: Optional thoughts regarding the overall quality or potential areas for future improvement.
-- **Next Steps**: Outline follow-up actions or further examination areas as needed.
-````

.github/testing-instructions.md

@@ -1,73 +0,0 @@
-# Testing Instructions
-
-## Framework and Tools
-
-- **Vitest** is the recommended testing framework.  
-  [Vitest Documentation (latest)](https://context7.com/vitest-dev/vitest/llms.txt?topic=getting+started)
-- **Jest** and **Spectator** are **deprecated**.  
-  Do not use them for new tests. Existing tests should be migrated to Vitest where possible.
-
-## Guidelines
-
-1. **Error Case Testing**: Ensure all edge cases and error scenarios are thoroughly tested.
-2. **Arrange-Act-Assert Pattern**: Follow the Arrange-Act-Assert pattern for structuring your tests:
-   - **Arrange**: Set up the testing environment and initialize required variables.
-   - **Act**: Execute the functionality being tested.
-   - **Assert**: Verify the expected outcomes.
-
-## Best Practices
-
-- Write clear and descriptive test names.
-- Ensure tests are isolated and do not depend on each other.
-- Mock external dependencies to avoid side effects.
-- Aim for high code coverage without compromising test quality.
-
-## Example Test Structure
-
-```typescript
-// Example using Vitest (Jest and Spectator are deprecated)
-import { describe, it, expect, beforeEach } from 'vitest';
-import { render } from '@testing-library/angular';
-import { MyComponent } from './my-component.component';
-
-describe('MyComponent', () => {
-  let component: MyComponent;
-
-  beforeEach(async () => {
-    const { fixture } = await render(MyComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('should display the correct title', async () => {
-    // Arrange
-    const expectedTitle = 'Hello World';
-
-    // Act
-    component.title = expectedTitle;
-    // If using Angular, trigger change detection:
-    // fixture.detectChanges();
-
-    // Assert
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toBe(expectedTitle);
-  });
-
-  it('should handle error cases gracefully', () => {
-    // Arrange
-    const invalidInput = null;
-
-    // Act
-    component.input = invalidInput;
-
-    // Assert
-    expect(() => component.processInput()).toThrowError('Invalid input');
-  });
-});
-```
-
-## Additional Resources
-
-- [Vitest Documentation (latest)](https://context7.com/vitest-dev/vitest/llms.txt?topic=getting+started)
-- [Vitest Official Guide](https://vitest.dev/guide/)
-- [Testing Library for Angular](https://testing-library.com/docs/angular-testing-library/intro/)
-- **Jest** and **Spectator** documentation are deprecated

.gitignore

@@ -1,78 +1,50 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
-
-.matomo
-junit.xml
-
-# compiled output
-/dist
-/tmp
-/out-tsc
-
-/
-
-# dependencies
-/node_modules
-
-# profiling files
-chrome-profiler-events.json
-speed-measure-plugin.json
-
-# IDEs and editors
-/.idea
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
-
-# IDE - VSCode
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-.history/*
-
-# misc
-/.angular/cache
-/.sass-cache
-/connect.lock
-/coverage
-/testresults
-/libpeerconnection.log
-npm-debug.log
-yarn-error.log
-yarn.lock
-testem.log
-/typings
-
-# System Files
-.DS_Store
-Thumbs.db
-
-libs/swagger/src/lib/*
-*storybook.log
-
-
-.nx/cache
-.nx/workspace-data
-.angular
-.claude
-
-
-storybook-static
-
-.cursor\rules\nx-rules.mdc
-.github\instructions\nx.instructions.md
-.cursor/rules/nx-rules.mdc
-.github/instructions/nx.instructions.md
-
-vite.config.*.timestamp*
-vitest.config.*.timestamp*
-
-.mcp.json
-.memory.json
-
-nx.instructions.md
-CLAUDE.md
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events.json
+speed-measure-plugin.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+.prettierrc
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.angular/cache
+/.sass-cache
+/connect.lock
+/coverage
+/testresults
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+yarn.lock
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+libs/swagger/src/lib/*

.husky/pre-commit

@@ -1 +0,0 @@
-npx lint-staged

.lintstagedrc.json

@@ -1,7 +0,0 @@
-{
-  "*.ts": "npx eslint --fix --config eslint.config.js",
-  "*.tsx": "npx eslint --fix --config eslint.config.js",
-  "*.js": "npx eslint --fix --config eslint.config.js",
-  "*.jsx": "npx eslint --fix --config eslint.config.js",
-  "*.html": "npx eslint --fix --config eslint.config.js"
-}

.prettierignore

@@ -1,8 +1,10 @@
 # Add files here to ignore them from prettier formatting
+
 /dist
 /coverage
-/.nx/cache
-/.nx/workspace-data
-/node_modules
-.angular
-.vscode
+/helmvalues
+/apps/swagger
+/ng-swagger-gen
+
+*.json
+*.yml

.prettierrc

@@ -1,37 +0,0 @@
-{
-  "singleQuote": true,
-  "semi": true,
-  "trailingComma": "all",
-  "tabWidth": 2,
-  "bracketSpacing": true,
-  "printWidth": 80,
-  "endOfLine": "auto",
-  "arrowParens": "always",
-  "quoteProps": "consistent",
-  "overrides": [
-    {
-      "files": "*.html",
-      "options": {
-        "parser": "html"
-      }
-    },
-    {
-      "files": "*.component.html",
-      "options": {
-        "parser": "angular"
-      }
-    },
-    {
-      "files": "*.scss",
-      "options": {
-        "singleQuote": false
-      }
-    },
-    {
-      "files": "*.json",
-      "options": {
-        "printWidth": 80
-      }
-    }
-  ]
-}

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+    "singleQuote": true,
+    "printWidth": 140
+  }
+  

.vscode/extensions.json

@@ -1,11 +1,7 @@
 {
-  "recommendations": [
-    "johnpapa.angular2",
-    "esbenp.prettier-vscode",
-    "angular.ng-template",
-    "nrwl.angular-console",
-    "dbaeumer.vscode-eslint",
-    "firsttris.vscode-jest-runner",
-    "editorconfig.editorconfig"
-  ]
-}
+    "recommendations": [
+        "johnpapa.angular2",
+        "esbenp.prettier-vscode",
+        "angular.ng-template",
+    ]
+}

.vscode/settings.json

@@ -1,100 +1,15 @@
-{
-  "editor.accessibilitySupport": "off",
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "exportall.config.exclude": [".test.", ".spec.", ".stories."],
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "eslint.validate": [
-    "json"
-  ],
-  "[html]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[markdown]": {
-    "editor.formatOnSave": false
-  },
-  "exportall.config.folderListener": [
-    "/libs/oms/data-access/src/lib/models",
-    "/libs/oms/data-access/src/lib/schemas",
-    "/libs/catalogue/data-access/src/lib/models",
-    "/libs/common/data-access/src/lib/models",
-    "/libs/common/data-access/src/lib/error",
-    "/libs/oms/data-access/src/lib/errors/return-process"
-  ],
-  "github.copilot.chat.commitMessageGeneration.instructions": [
-    {
-      "file": ".github/commit-instructions.md"
-    }
-  ],
-  "github.copilot.chat.codeGeneration.instructions": [
-    {
-      "file": ".vscode/llms/angular.txt"
-    },
-    {
-      "file": "docs/tech-stack.md"
-    },
-    {
-      "file": "docs/guidelines/code-style.md"
-    },
-    {
-      "file": "docs/guidelines/project-structure.md"
-    },
-    {
-      "file": "docs/guidelines/state-management.md"
-    },
-    {
-      "file": "docs/guidelines/testing.md"
-    }
-  ],
-  "github.copilot.chat.testGeneration.instructions": [
-    {
-      "file": ".github/testing-instructions.md"
-    },
-    {
-      "file": "docs/tech-stack.md"
-    },
-    {
-      "file": "docs/guidelines/code-style.md"
-    },
-    {
-      "file": "docs/guidelines/testing.md"
-    }
-  ],
-  "github.copilot.chat.reviewSelection.instructions": [
-    {
-      "file": ".github/copilot-instructions.md"
-    },
-    {
-      "file": ".github/review-instructions.md"
-    },
-    {
-      "file": "docs/tech-stack.md"
-    },
-    {
-      "file": "docs/guidelines/code-style.md"
-    },
-    {
-      "file": "docs/guidelines/project-structure.md"
-    },
-    {
-      "file": "docs/guidelines/state-management.md"
-    },
-    {
-      "file": "docs/guidelines/testing.md"
-    }
-  ],
-  "nxConsole.generateAiAgentRules": true,
-  "chat.mcp.discovery.enabled": {
-    "claude-desktop": true,
-    "windsurf": true,
-    "cursor-global": true,
-    "cursor-workspace": true
-  },
-  "chat.mcp.access": "all"
-}
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.formatOnSave": true,
+  "typescriptHero.imports.insertSemicolons": false,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "css.validate": false,
+"less.validate": false,
+"scss.validate": false
+}

CLAUDE.md

@@ -1,148 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-This is an Angular monorepo managed by Nx. The main application is `isa-app`, which appears to be an inventory and returns management system for retail/e-commerce.
-
-## Architecture
-
-### Monorepo Structure
-- **apps/isa-app**: Main Angular application
-- **libs/**: Reusable libraries organized by domain and type
-  - **core/**: Core utilities (config, logging, storage, tabs)
-  - **common/**: Shared utilities (data-access, decorators, print)
-  - **ui/**: UI component libraries (buttons, dialogs, inputs, etc.)
-  - **shared/**: Shared domain components (filter, scanner, product components)
-  - **oms/**: Order Management System features and utilities
-  - **remission/**: Remission/returns management features
-  - **catalogue/**: Product catalogue functionality
-  - **utils/**: General utilities (validation, scroll position, parsing)
-  - **icons/**: Icon library
-- **generated/swagger/**: Auto-generated API client code from OpenAPI specs
-
-### Key Architectural Patterns
-- **Standalone Components**: Project uses Angular standalone components
-- **Feature Libraries**: Domain features organized as separate libraries (e.g., `oms-feature-return-search`)
-- **Data Access Layer**: Separate data-access libraries for each domain (e.g., `oms-data-access`, `remission-data-access`)
-- **Shared UI Components**: Reusable UI components in `libs/ui/`
-- **Generated API Clients**: Swagger/OpenAPI clients auto-generated in `generated/swagger/`
-
-## Common Development Commands
-
-### Build Commands
-```bash
-# Build the main application (development)
-npx nx build isa-app --configuration=development
-
-# Build for production
-npx nx build isa-app --configuration=production
-
-# Serve the application with SSL
-npx nx serve isa-app --ssl
-```
-
-### Testing Commands
-```bash
-# Run tests for a specific library (always use --skip-cache)
-npx nx run <project-name>:test --skip-cache
-# Example: npx nx run remission-data-access:test --skip-cache
-
-# Run tests for all libraries except the main app
-npx nx run-many -t test --exclude isa-app --skip-cache
-
-# Run a single test file
-npx nx run <project-name>:test --testFile=<path-to-test-file> --skip-cache
-
-# Run tests with coverage
-npx nx run <project-name>:test --code-coverage --skip-cache
-
-# Run tests in watch mode
-npx nx run <project-name>:test --watch
-```
-
-### Linting Commands
-```bash
-# Lint a specific project
-npx nx lint <project-name>
-# Example: npx nx lint remission-data-access
-
-# Run linting for all projects
-npx nx run-many -t lint
-```
-
-### Other Useful Commands
-```bash
-# Generate Swagger API clients
-npm run generate:swagger
-
-# Start Storybook
-npx nx run isa-app:storybook
-
-# Format code with Prettier
-npm run prettier
-
-# List all projects in the workspace
-npx nx list
-
-# Show project dependencies graph
-npx nx graph
-
-# Run affected tests (based on git changes)
-npx nx affected:test
-```
-
-## Testing Framework
-
-### Current Setup
-- **Jest**: Primary test runner for existing libraries
-- **Vitest**: Being adopted for new libraries (migration in progress)
-- **Testing Utilities**: 
-  - **Angular Testing Utilities** (TestBed, ComponentFixture): Use for new tests
-  - **Spectator**: Legacy testing utility for existing tests
-  - **ng-mocks**: For advanced mocking scenarios
-
-### Test File Requirements
-- Test files must end with `.spec.ts`
-- Use AAA pattern (Arrange-Act-Assert)
-- Include E2E testing attributes (`data-what`, `data-which`) in HTML templates
-- Mock external dependencies and child components
-
-## State Management
-- **NgRx**: Store, Effects, Entity, Component Store, Signals
-- **RxJS**: For reactive programming patterns
-
-## Styling
-- **Tailwind CSS**: Primary styling framework with custom configuration
-- **SCSS**: For component-specific styles
-- **Custom Tailwind plugins**: For buttons, inputs, menus, typography
-
-## API Integration
-- **Generated Swagger Clients**: Auto-generated TypeScript clients from OpenAPI specs
-- **Available APIs**: availability, cat-search, checkout, crm, eis, inventory, isa, oms, print, wws
-
-## Build Configuration
-- **Angular 20.1.2**: Latest Angular version
-- **TypeScript 5.8.3**: For type safety
-- **Node.js >= 22.0.0**: Required Node version
-- **npm >= 10.0.0**: Required npm version
-
-## Important Conventions
-- **Component Prefix**: Each library has its own prefix (e.g., `remi` for remission, `oms` for OMS)
-- **Standalone Components**: All new components should be standalone
-- **Path Aliases**: Use TypeScript path aliases defined in `tsconfig.base.json` (e.g., `@isa/core/config`)
-- **Project Names**: Can be found in each library's `project.json` file
-
-## Development Workflow Tips
-- Always use `npx nx run` pattern for executing tasks
-- Include `--skip-cache` flag when running tests to ensure fresh results
-- Use Nx's affected commands to optimize CI/CD pipelines
-- Project graph visualization helps understand dependencies: `npx nx graph`
-
-## Development Notes
-- Use start target to start the application. Only one project can be started: isa-app
-- Make sure to have a look at @docs/guidelines/testing.md before writing tests
-- Make sure to add e2e attributes to the html. Those are important for my colleagues writen e2e tests
-- Guide for the e2e testing attributes can be found in the testing.md 
-- When reviewing code follow the instructions @.github/review-instructions.md

Dockerfile

@@ -1,5 +1,5 @@
 #stage 1
-FROM node:22 as base
+FROM node:18 as base
 ARG IS_PRODUCTION=false
 ARG SEMVERSION=1.0.0
 ARG BuildUniqueID
@@ -8,7 +8,7 @@ WORKDIR /app
 COPY . .
 RUN umask 0022
 RUN npm version ${SEMVERSION}
-RUN npm install --foreground-scripts
+RUN npm install --always-auth=false
 RUN if [ "${IS_PRODUCTION}" = "true" ] ; then npm run-script build-prod ; else npm run-script build ; fi
 
 # stage final
@@ -24,6 +24,6 @@ ARG BuildUniqueID
 LABEL build.uniqueid="${BuildUniqueID:-1}"
 RUN wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb -q -O /tmp/chrome.deb && apt update && apt install -y /tmp/chrome.deb
 # ignore exitcode, sonst gibts keinen container
-RUN npm run ci || true
+RUN npm test || true
 ENTRYPOINT [ "/bin/sleep", "60000" ]
 

TASKS.md

@@ -0,0 +1,4 @@
+- Neue Icon Module (z.B. mit SVG sprites)
+- Breadcrumb Navigation (Neu)
+- Remissions Produkt Liste (Refactoring / Neu)
+- Angular Version (Upgrade)

apps/adapter/scan/README.md

@@ -0,0 +1,25 @@
+# Scan
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project scan` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project scan`.
+
+> Note: Don't forget to add `--project scan` or else it will be added to the default project in your `angular.json` file.
+
+## Build
+
+Run `ng build scan` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build scan`, go to the dist folder `cd dist/scan` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test scan` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

apps/adapter/scan/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/adapter/scan",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

apps/adapter/scan/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@adapter/scan",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^12.2.0",
+    "@angular/core": "^12.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

apps/adapter/scan/src/lib/dev.scan-adapter.ts

@@ -0,0 +1,47 @@
+import { Injectable, isDevMode } from '@angular/core';
+import { EnvironmentService } from '@core/environment';
+import { PromptModalData, UiModalService, UiPromptModalComponent } from '@ui/modal';
+import { Observable } from 'rxjs';
+import { ScanAdapter } from './scan-adapter';
+
+@Injectable()
+export class DevScanAdapter implements ScanAdapter {
+  readonly name = 'Dev';
+
+  constructor(private _modal: UiModalService, private _environmentService: EnvironmentService) {}
+
+  async init(): Promise<boolean> {
+    if (this._environmentService.isTablet()) {
+      return new Promise((resolve, reject) => {
+        resolve(isDevMode());
+      });
+    }
+
+    return false;
+  }
+
+  scan(): Observable<string> {
+    return new Observable((observer) => {
+      const modalRef = this._modal.open({
+        content: UiPromptModalComponent,
+        title: 'Scannen',
+        data: {
+          message: 'Diese Eingabemaske dient nur zu Entwicklungs und Testzwecken.',
+          placeholder: 'Scan Code',
+          confirmText: 'weiter',
+          cancelText: 'abbrechen',
+        } as PromptModalData,
+      });
+
+      const sub = modalRef.afterClosed$.subscribe((result) => {
+        observer.next(result.data);
+        observer.complete();
+      });
+
+      return () => {
+        modalRef.close();
+        sub.unsubscribe();
+      };
+    });
+  }
+}

apps/adapter/scan/src/lib/native.scan-adapter.ts

@@ -1,13 +1,9 @@
 import { Injectable } from '@angular/core';
-import { NativeContainerService } from '@external/native-container';
+import { NativeContainerService } from 'native-container';
 import { Observable } from 'rxjs';
 import { filter, map, take } from 'rxjs/operators';
 import { ScanAdapter } from './scan-adapter';
 
-/**
- * @deprecated This service will be removed in future versions.
- * Please use the new ScanService instead.
- */
 @Injectable()
 export class NativeScanAdapter implements ScanAdapter {
   readonly name = 'Native';
@@ -24,7 +20,7 @@ export class NativeScanAdapter implements ScanAdapter {
     return this.nativeContainerService.openScanner('scanBook').pipe(
       filter((result) => result.status === 'SUCCESS'),
       map((result) => result.data),
-      take(1),
+      take(1)
     );
   }
 }

apps/adapter/scan/src/lib/scan.service.ts

@@ -0,0 +1,65 @@
+import { Inject, Injectable } from '@angular/core';
+import { Observable, throwError } from 'rxjs';
+import { ScanAdapter } from './scan-adapter';
+import { SCAN_ADAPTER } from './tokens';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ScanAdapterService {
+  private _readyAdapters: Record<string, boolean> = {};
+
+  constructor(@Inject(SCAN_ADAPTER) private readonly scanAdapters: ScanAdapter[]) {}
+
+  async init(): Promise<void> {
+    for (const adapter of this.scanAdapters) {
+      const isReady = await adapter.init();
+      console.log('ScanAdapterService.init', adapter.name, isReady);
+      this._readyAdapters[adapter.name] = isReady;
+    }
+  }
+
+  adapters(): ScanAdapter[] {
+    return [...this.scanAdapters];
+  }
+
+  getAdapter(name: string): ScanAdapter | undefined {
+    return this.scanAdapters.find((adapter) => adapter.name === name);
+  }
+
+  // return true if at least one adapter is ready
+  isReady(): boolean {
+    return Object.values(this._readyAdapters).some((ready) => ready);
+  }
+
+  scan(ops: { use?: string; include?: string[]; exclude?: string[] } = { exclude: ['Dev'] }): Observable<string> {
+    let adapter: ScanAdapter;
+
+    if (ops.use == undefined) {
+      // get the first adapter that is ready to use
+      adapter = this.scanAdapters
+        .filter((adapter) => {
+          if (ops.include?.length) {
+            return ops.include.includes(adapter.name);
+          } else if (ops.exclude?.length) {
+            return !ops.exclude.includes(adapter.name);
+          } else {
+            return true;
+          }
+        })
+        .find((adapter) => this._readyAdapters[adapter.name]);
+    } else {
+      adapter = this.getAdapter(ops.use);
+    }
+
+    if (!adapter) {
+      return throwError('No adapter found');
+    }
+
+    if (this._readyAdapters[adapter.name] == false) {
+      return throwError('Adapter is not ready');
+    }
+
+    return adapter.scan();
+  }
+}

apps/adapter/scan/src/lib/scandit/scandit-overlay.component.css

@@ -0,0 +1,20 @@
+:host {
+  @apply block relative;
+}
+
+.scanner-container {
+  width: 100vw;
+  max-width: 95vw;
+  max-height: calc(95vh - 120px);
+}
+
+.close-scanner {
+  @apply block px-6 py-4 bg-white text-brand border-2 border-solid border-brand rounded-full text-lg font-bold mx-auto mt-4;
+}
+
+@screen desktop {
+  .scanner-container {
+    max-width: 900px;
+    max-height: 900px;
+  }
+}

apps/adapter/scan/src/lib/scandit/scandit-overlay.component.html

@@ -0,0 +1,4 @@
+<div class="scanner-container" #scanContainer></div>
+<button class="close-scanner" type="button" (click)="close()">
+  Scan abbrechen
+</button>

apps/adapter/scan/src/lib/scandit/scandit-overlay.component.ts

@@ -0,0 +1,100 @@
+import { Component, ChangeDetectionStrategy, ElementRef, ViewChild, NgZone, AfterViewInit, OnDestroy } from '@angular/core';
+import { UiMessageModalComponent, UiModalService } from '@ui/modal';
+import { Barcode, BarcodePicker, ScanResult, ScanSettings } from 'scandit-sdk';
+
+@Component({
+  selector: 'app-scandit-overlay',
+  templateUrl: 'scandit-overlay.component.html',
+  styleUrls: ['scandit-overlay.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScanditOverlayComponent implements AfterViewInit, OnDestroy {
+  private _barcodePicker: BarcodePicker;
+
+  private _onScan?: (code: string) => void;
+
+  private _onClose?: () => void;
+
+  @ViewChild('scanContainer', { read: ElementRef, static: true }) scanContainer: ElementRef;
+
+  constructor(private _zone: NgZone, private _modal: UiModalService) {}
+
+  ngAfterViewInit(): void {
+    this.createBarcodePicker()
+      .then(() => {
+        this._barcodePicker.on('scan', (scanResult) => {
+          this._zone.run(() => this.handleScanrResult(scanResult));
+        });
+      })
+      .catch((err: Error) => {
+        this._modal
+          .open({
+            content: UiMessageModalComponent,
+            title: 'Zugriff auf Kamera verweigert',
+            data: { message: 'Falls Sie den Zugriff erlauben möchten, können Sie das über die Webseiteinstellung Ihres Browsers.' },
+          })
+          .afterClosed$.subscribe(() => {
+            this._onClose?.();
+          });
+      });
+  }
+
+  async createBarcodePicker() {
+    this._barcodePicker = await BarcodePicker.create(this.scanContainer.nativeElement, {
+      playSoundOnScan: true,
+      vibrateOnScan: true,
+    });
+
+    this._barcodePicker.applyScanSettings(this.getScanSettings());
+  }
+
+  getScanSettings(): ScanSettings {
+    return new ScanSettings({
+      blurryRecognition: false,
+
+      enabledSymbologies: [
+        Barcode.Symbology.EAN8,
+        Barcode.Symbology.EAN13,
+        Barcode.Symbology.UPCA,
+        Barcode.Symbology.UPCE,
+        Barcode.Symbology.CODE128,
+        Barcode.Symbology.CODE39,
+        Barcode.Symbology.CODE93,
+        Barcode.Symbology.INTERLEAVED_2_OF_5,
+        Barcode.Symbology.QR,
+      ],
+      codeDuplicateFilter: 1000,
+    });
+  }
+
+  onScan(fn: (code: string) => void) {
+    this._onScan = fn;
+  }
+
+  onClose(fn: () => void) {
+    this._onClose = fn;
+  }
+
+  handleScanrResult(scanRestul: ScanResult) {
+    let result: string | undefined;
+    if (scanRestul.barcodes.length) {
+      result = scanRestul.barcodes[0].data;
+    } else if (scanRestul.texts.length) {
+      result = scanRestul.texts[0].value;
+    }
+
+    if (result) {
+      this._onScan?.(result);
+    }
+  }
+
+  close() {
+    this._onClose?.();
+  }
+
+  ngOnDestroy(): void {
+    this._zone.runOutsideAngular(() => {
+      this._barcodePicker?.destroy(true);
+    });
+  }
+}

apps/adapter/scan/src/lib/scandit/scandit.scan-adapter.ts

@@ -0,0 +1,82 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subscriber } from 'rxjs';
+import { ScanAdapter } from '../scan-adapter';
+import { Overlay } from '@angular/cdk/overlay';
+
+import { configure } from 'scandit-sdk';
+// import { ScanditModalComponent } from './scandit-modal';
+import { Config } from '@core/config';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { ScanditOverlayComponent } from './scandit-overlay.component';
+import { EnvironmentService } from '@core/environment';
+
+@Injectable()
+export class ScanditScanAdapter implements ScanAdapter {
+  readonly name = 'Scandit';
+
+  constructor(private readonly _config: Config, private _overlay: Overlay, private _environmentService: EnvironmentService) {}
+
+  async init(): Promise<boolean> {
+    if (this._environmentService.isTablet()) {
+      await configure(this._config.get('licence.scandit'), {
+        engineLocation: '/scandit/',
+      });
+
+      return true;
+    }
+
+    return false;
+  }
+
+  scan(): Observable<string> {
+    return new Observable((observer) => {
+      const overlay = this.createOverlay();
+
+      const portal = this.createPortal();
+
+      const ref = overlay.attach(portal);
+
+      const sub = new Subscriber();
+
+      const complete = () => {
+        overlay.detach();
+        ref.destroy();
+        sub.unsubscribe();
+        sub.complete();
+        observer.complete();
+      };
+
+      sub.add(
+        overlay.backdropClick().subscribe(() => {
+          complete();
+        })
+      );
+
+      ref.instance.onScan((code) => {
+        observer.next(code);
+        complete();
+      });
+
+      ref.instance.onClose(() => {
+        complete();
+      });
+
+      return complete;
+    });
+  }
+
+  createOverlay() {
+    const overlay = this._overlay.create({
+      positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
+      hasBackdrop: true,
+    });
+
+    return overlay;
+  }
+
+  createPortal() {
+    const portal = new ComponentPortal(ScanditOverlayComponent);
+
+    return portal;
+  }
+}

apps/adapter/scan/src/public-api.ts

@@ -0,0 +1,11 @@
+/*
+ * Public API Surface of scan
+ */
+
+export * from './lib/scandit';
+export * from './lib/dev.scan-adapter';
+export * from './lib/native.scan-adapter';
+export * from './lib/scan-adapter';
+export * from './lib/scan.module';
+export * from './lib/scan.service';
+export * from './lib/tokens';

apps/adapter/scan/tsconfig.lib.json

@@ -0,0 +1,19 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

apps/adapter/scan/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

apps/adapter/scan/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

apps/cdn/product-image/README.md

@@ -0,0 +1,25 @@
+# ProductImage
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.2.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project product-image` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project product-image`.
+
+> Note: Don't forget to add `--project product-image` or else it will be added to the default project in your `angular.json` file.
+
+## Build
+
+Run `ng build product-image` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build product-image`, go to the dist folder `cd dist/product-image` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test product-image` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

apps/cdn/product-image/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/cdn/product-image",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

apps/cdn/product-image/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@cdn/product-image",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^10.1.2",
+    "@angular/core": "^10.1.2"
+  },
+  "dependencies": {
+    "tslib": "^2.0.0"
+  }
+}

apps/cdn/product-image/src/lib/product-image.module.ts

@@ -2,8 +2,8 @@ import { NgModule } from '@angular/core';
 import { ProductImagePipe } from './product-image.pipe';
 
 @NgModule({
-  declarations: [],
-  imports: [ProductImagePipe],
+  declarations: [ProductImagePipe],
+  imports: [],
   exports: [ProductImagePipe],
 })
 export class ProductImageModule {}

apps/cdn/product-image/src/lib/product-image.pipe.ts

@@ -3,8 +3,6 @@ import { ProductImageService } from './product-image.service';
 
 @Pipe({
   name: 'productImage',
-  standalone: true,
-  pure: true,
 })
 export class ProductImagePipe implements PipeTransform {
   constructor(private imageService: ProductImageService) {}

apps/cdn/product-image/src/public-api.ts

@@ -0,0 +1,8 @@
+/*
+ * Public API Surface of product-image
+ */
+
+export * from './lib/product-image.service';
+export * from './lib/product-image.module';
+export * from './lib/product-image.pipe';
+export * from './lib/tokens';

apps/cdn/product-image/tsconfig.lib.json

@@ -0,0 +1,24 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

apps/cdn/product-image/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

apps/cdn/product-image/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

apps/cdn/product-image/tslint.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "cdn",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "cdn",
+      "kebab-case"
+    ]
+  }
+}

apps/core/README.md

@@ -0,0 +1,25 @@
+# Core
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project core` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project core`.
+
+> Note: Don't forget to add `--project core` or else it will be added to the default project in your `angular.json` file.
+
+## Build
+
+Run `ng build core` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build core`, go to the dist folder `cd dist/core` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test core` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

apps/core/application/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/core/application",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

apps/core/application/src/lib/application.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { BranchDTO } from '@generated/swagger/checkout-api';
+import { BranchDTO } from '@swagger/checkout';
 import { isBoolean, isNumber } from '@utils/common';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { first, map, switchMap } from 'rxjs/operators';
@@ -35,9 +35,7 @@ export class ApplicationService {
 
   getProcesses$(section?: 'customer' | 'branch') {
     const processes$ = this.store.select(selectProcesses);
-    return processes$.pipe(
-      map((processes) => processes.filter((process) => (section ? process.section === section : true))),
-    );
+    return processes$.pipe(map((processes) => processes.filter((process) => (section ? process.section === section : true))));
   }
 
   getProcessById$(processId: number): Observable<ApplicationProcess> {
@@ -52,7 +50,7 @@ export class ApplicationService {
     return this.getSection$().pipe(
       map((section) => {
         return section === 'customer' ? 'Kundenbereich' : 'Filialbereich';
-      }),
+      })
     );
   }
 
@@ -81,35 +79,13 @@ export class ApplicationService {
   getSelectedBranch$(processId?: number): Observable<BranchDTO> {
     if (!processId) {
       return this.activatedProcessId$.pipe(
-        switchMap((processId) => this.getProcessById$(processId).pipe(map((process) => process?.data?.selectedBranch))),
+        switchMap((processId) => this.getProcessById$(processId).pipe(map((process) => process?.data?.selectedBranch)))
       );
     }
 
     return this.getProcessById$(processId).pipe(map((process) => process?.data?.selectedBranch));
   }
 
-  readonly REGEX_PROCESS_NAME = /^Vorgang \d+$/;
-
-  async createCustomerProcess(processId?: number): Promise<ApplicationProcess> {
-    const processes = await this.getProcesses$('customer').pipe(first()).toPromise();
-
-    const processIds = processes.filter((x) => this.REGEX_PROCESS_NAME.test(x.name)).map((x) => +x.name.split(' ')[1]);
-
-    const maxId = processIds.length > 0 ? Math.max(...processIds) : 0;
-
-    const process: ApplicationProcess = {
-      id: processId ?? Date.now(),
-      type: 'cart',
-      name: `Vorgang ${maxId + 1}`,
-      section: 'customer',
-      closeable: true,
-    };
-
-    await this.createProcess(process);
-
-    return process;
-  }
-
   async createProcess(process: ApplicationProcess) {
     const existingProcess = await this.getProcessById$(process?.id).pipe(first()).toPromise();
     if (existingProcess?.id === process?.id) {
@@ -137,10 +113,7 @@ export class ApplicationService {
     this.store.dispatch(setSection({ section }));
   }
 
-  getLastActivatedProcessWithSectionAndType$(
-    section: 'customer' | 'branch',
-    type: string,
-  ): Observable<ApplicationProcess> {
+  getLastActivatedProcessWithSectionAndType$(section: 'customer' | 'branch', type: string): Observable<ApplicationProcess> {
     return this.getProcesses$(section).pipe(
       map((processes) =>
         processes
@@ -150,8 +123,8 @@ export class ApplicationService {
               return current;
             }
             return latest?.activated > current?.activated ? latest : current;
-          }, undefined),
-      ),
+          }, undefined)
+      )
     );
   }
 
@@ -163,8 +136,8 @@ export class ApplicationService {
             return current;
           }
           return latest?.activated > current?.activated ? latest : current;
-        }, undefined),
-      ),
+        }, undefined)
+      )
     );
   }
 

apps/core/application/src/lib/index.ts

@@ -0,0 +1,6 @@
+// start:ng42.barrel
+export * from './application.module';
+export * from './application.service';
+export * from './defs';
+export * from './store';
+// end:ng42.barrel

apps/core/application/src/lib/store/application.actions.ts

@@ -0,0 +1,18 @@
+import { createAction, props } from '@ngrx/store';
+import { ApplicationProcess } from '..';
+
+const prefix = '[CORE-APPLICATION]';
+
+export const setTitle = createAction(`${prefix} Set Title`, props<{ title: string }>());
+
+export const setSection = createAction(`${prefix} Set Section`, props<{ section: 'customer' | 'branch' }>());
+
+export const addProcess = createAction(`${prefix} Add Process`, props<{ process: ApplicationProcess }>());
+
+export const removeProcess = createAction(`${prefix} Remove Process`, props<{ processId: number }>());
+
+export const setActivatedProcess = createAction(`${prefix} Set Activated Process`, props<{ activatedProcessId: number }>());
+
+export const patchProcess = createAction(`${prefix} Patch Process`, props<{ processId: number; changes: Partial<ApplicationProcess> }>());
+
+export const patchProcessData = createAction(`${prefix} Patch Process Data`, props<{ processId: number; data: Record<string, any> }>());

apps/core/application/src/lib/store/application.reducer.spec.ts

@@ -66,7 +66,7 @@ describe('applicationReducer', () => {
           ...initialState,
           processes: [process],
         },
-        action,
+        action
       );
       expect(state.processes[0].name).toEqual('Test');
     });
@@ -87,7 +87,7 @@ describe('applicationReducer', () => {
           ...initialState,
           processes: [process],
         },
-        action,
+        action
       );
       expect(state.processes).toEqual([process]);
     });

apps/core/application/src/lib/store/application.reducer.ts

@@ -48,7 +48,7 @@ const _applicationReducer = createReducer(
     });
 
     return { ...state, processes };
-  }),
+  })
 );
 
 export function applicationReducer(state: ApplicationState, action: Action) {

apps/core/application/src/lib/store/application.selectors.spec.ts

@@ -0,0 +1,35 @@
+import { ApplicationState } from './application.state';
+import { ApplicationProcess } from '../defs';
+import * as selectors from './application.selectors';
+
+describe('applicationSelectors', () => {
+  it('should select the processes', () => {
+    const processes: ApplicationProcess[] = [{ id: 1, name: 'Vorgang 1', section: 'customer' }];
+    const state: ApplicationState = {
+      processes,
+      section: 'customer',
+    };
+    expect(selectors.selectProcesses.projector(state)).toEqual(processes);
+  });
+
+  it('should select the section', () => {
+    const state: ApplicationState = {
+      processes: [],
+      section: 'customer',
+    };
+    expect(selectors.selectSection.projector(state)).toEqual('customer');
+  });
+
+  it('should select the activatedProcess', () => {
+    const processes: ApplicationProcess[] = [
+      { id: 1, name: 'Vorgang 1', section: 'customer', activated: 100 },
+      { id: 2, name: 'Vorgang 2', section: 'customer', activated: 300 },
+      { id: 3, name: 'Vorgang 3', section: 'customer', activated: 200 },
+    ];
+    const state: ApplicationState = {
+      processes,
+      section: 'customer',
+    };
+    expect(selectors.selectActivatedProcess.projector(state)).toEqual(processes[1]);
+  });
+});

apps/core/application/src/lib/store/application.selectors.ts

@@ -14,5 +14,5 @@ export const selectActivatedProcess = createSelector(selectApplicationState, (s)
       return current;
     }
     return process.activated > current.activated ? process : current;
-  }, undefined),
+  }, undefined)
 );

apps/core/application/src/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of application
+ */
+
+export * from './lib';

apps/core/auth/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/core/auth",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

apps/core/auth/src/lib/auth.service.ts

@@ -0,0 +1,125 @@
+import { coerceArray, coerceStringArray } from '@angular/cdk/coercion';
+import { Injectable } from '@angular/core';
+import { Config } from '@core/config';
+import { isNullOrUndefined } from '@utils/common';
+import { AuthConfig, OAuthService } from 'angular-oauth2-oidc';
+import { JwksValidationHandler } from 'angular-oauth2-oidc-jwks';
+import { asapScheduler, BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthService {
+  private readonly _initialized = new BehaviorSubject<boolean>(false);
+  get initialized$() {
+    return this._initialized.asObservable();
+  }
+
+  private _authConfig: AuthConfig;
+
+  constructor(private _config: Config, private readonly _oAuthService: OAuthService) {
+    this._oAuthService.events?.subscribe((event) => {
+      if (event.type === 'token_received') {
+        console.log('SSO Token Expiration:', new Date(this._oAuthService.getAccessTokenExpiration()));
+      }
+    });
+  }
+
+  async init() {
+    if (this._initialized.getValue()) {
+      throw new Error('AuthService is already initialized');
+    }
+
+    this._authConfig = this._config.get('@core/auth');
+
+    this._authConfig.redirectUri = window.location.origin;
+
+    this._authConfig.silentRefreshRedirectUri = window.location.origin + '/silent-refresh.html';
+    this._authConfig.useSilentRefresh = true;
+
+    this._oAuthService.configure(this._authConfig);
+    this._oAuthService.tokenValidationHandler = new JwksValidationHandler();
+
+    this._oAuthService.setupAutomaticSilentRefresh();
+    try {
+      await this._oAuthService.loadDiscoveryDocumentAndTryLogin();
+    } catch (error) {
+      this.login();
+    }
+
+    this._initialized.next(true);
+  }
+
+  isAuthenticated() {
+    return this._oAuthService.hasValidIdToken();
+  }
+
+  getToken() {
+    return this._oAuthService.getAccessToken();
+  }
+
+  getClaims() {
+    const token = this._oAuthService.getAccessToken();
+    return this.parseJwt(token);
+  }
+
+  getClaimByKey(key: string) {
+    const claims = this.getClaims();
+    if (isNullOrUndefined(claims)) {
+      return null;
+    }
+    return claims[key];
+  }
+
+  parseJwt(token: string) {
+    if (isNullOrUndefined(token)) {
+      return null;
+    }
+    const base64Url = token.split('.')[1];
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+
+    const encoded = window.atob(base64);
+    return JSON.parse(encoded);
+  }
+
+  login() {
+    this._oAuthService.initLoginFlow();
+  }
+
+  setKeyCardToken(token: string) {
+    this._oAuthService.customQueryParams = {
+      temp_token: token,
+    };
+  }
+
+  async logout() {
+    await this._oAuthService.revokeTokenAndLogout();
+    // asapScheduler.schedule(() => {
+    //   window.location.reload();
+    // }, 250);
+  }
+
+  hasRole(role: string | string[]) {
+    const roles = coerceArray(role);
+
+    const userRoles = this.getClaimByKey('role');
+
+    if (isNullOrUndefined(userRoles)) {
+      return false;
+    }
+
+    return roles.every((r) => userRoles.includes(r));
+  }
+
+  async refresh() {
+    try {
+      if (this._authConfig.responseType.includes('code') && this._authConfig.scope.includes('offline_access')) {
+        await this._oAuthService.refreshToken();
+      } else {
+        await this._oAuthService.silentRefresh();
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}

apps/core/auth/src/lib/if-role.directive.ts

@@ -3,7 +3,6 @@ import { AuthService } from './auth.service';
 
 @Directive({
   selector: '[ifRole],[ifRoleElse],[ifNotRole],[ifNotRoleElse]',
-  standalone: false,
 })
 export class IfRoleDirective implements OnChanges {
   @Input()
@@ -32,11 +31,7 @@ export class IfRoleDirective implements OnChanges {
     return this.ifRoleElse || this.ifNotRoleElse;
   }
 
-  constructor(
-    private _templateRef: TemplateRef<any>,
-    private _viewContainer: ViewContainerRef,
-    private _authService: AuthService,
-  ) {}
+  constructor(private _templateRef: TemplateRef<any>, private _viewContainer: ViewContainerRef, private _authService: AuthService) {}
 
   ngOnChanges() {
     this.render();

apps/core/auth/src/lib/index.ts

@@ -0,0 +1,4 @@
+// start:ng42.barrel
+export * from './auth.module';
+export * from './auth.service';
+// end:ng42.barrel

apps/core/auth/src/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of auth
+ */
+
+export * from './lib';

apps/core/breadcrumb/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/core/breadcrumb",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

apps/core/breadcrumb/src/lib/breadcrumb.service.ts

@@ -37,8 +37,8 @@ export class BreadcrumbService {
             return current;
           }
           return latest.timestamp > current.timestamp ? latest : current;
-        }, undefined),
-      ),
+        }, undefined)
+      )
     );
   }
 
@@ -120,10 +120,7 @@ export class BreadcrumbService {
 
     if (recursive) {
       const breadcrumbs = await this.getBreadcrumbByKey$(breadcrumb.key).pipe(take(1)).toPromise();
-      breadcrumbsToRemove = [
-        ...breadcrumbsToRemove,
-        ...breadcrumbs.filter((crumb) => crumb.timestamp > breadcrumb.timestamp),
-      ];
+      breadcrumbsToRemove = [...breadcrumbsToRemove, ...breadcrumbs.filter((crumb) => crumb.timestamp > breadcrumb.timestamp)];
     }
 
     if (!breadcrumbsToRemove.length) {
@@ -138,12 +135,9 @@ export class BreadcrumbService {
     crumbs.forEach((crumb) => this.removeBreadcrumb(crumb.id));
   }
 
-  getLatestBreadcrumbForSection(
-    section: 'customer' | 'branch',
-    predicate: (crumb: Breadcrumb) => boolean = (_) => true,
-  ) {
+  getLatestBreadcrumbForSection(section: 'customer' | 'branch', predicate: (crumb: Breadcrumb) => boolean = (_) => true) {
     return this.store
       .select(selectors.selectBreadcrumbsBySection, { section })
-      .pipe(map((crumbs) => crumbs.sort((a, b) => b.timestamp - a.timestamp).find((f) => predicate(f))));
+      .pipe(map((crumbs) => crumbs.sort((a, b) => b.changed - a.changed).find((f) => predicate(f))));
   }
 }

apps/core/breadcrumb/src/lib/defs/breadcrumb.model.ts

@@ -27,7 +27,7 @@ export interface Breadcrumb {
   /**
    * Query Parameter
    */
-  params?: object;
+  params?: Object;
 
   /**
    * Timestamp

apps/core/breadcrumb/src/lib/store/breadcrumb.actions.spec.ts

@@ -0,0 +1 @@
+describe('Breadcrumb Actions', () => {});

apps/core/breadcrumb/src/lib/store/breadcrumb.actions.ts

@@ -11,10 +11,7 @@ export const addBreadcrumb = createAction(`${prefix} Add Breadcrumb`, props<{ br
 /**
  * Action um Breadcrumb im State zu ändern
  */
-export const updateBreadcrumb = createAction(
-  `${prefix} Update Breadcrumb`,
-  props<{ id: number; changes: Partial<Breadcrumb> }>(),
-);
+export const updateBreadcrumb = createAction(`${prefix} Update Breadcrumb`, props<{ id: number; changes: Partial<Breadcrumb> }>());
 
 /**
  * Action um Breadcrumb im State zu entfernen

apps/core/breadcrumb/src/lib/store/breadcrumb.effect.ts

@@ -16,15 +16,12 @@ export class BreadcrumbEffects {
             first(),
             tap((breadcrumbs) => {
               breadcrumbs?.forEach((crumb) => this.breadcrumb.removeBreadcrumb(crumb.id));
-            }),
-          ),
-        ),
+            })
+          )
+        )
       ),
-    { dispatch: false },
+    { dispatch: false }
   );
 
-  constructor(
-    private actions$: Actions,
-    private breadcrumb: BreadcrumbService,
-  ) {}
+  constructor(private actions$: Actions, private breadcrumb: BreadcrumbService) {}
 }

apps/core/breadcrumb/src/lib/store/breadcrumb.reducer.spec.ts

@@ -43,10 +43,7 @@ describe('Breadcrumb Reducer', () => {
 
       const state = breadcrumbReducer(INIT, action.addBreadcrumb({ breadcrumb }));
 
-      const fixture = breadcrumbReducer(
-        state,
-        action.updateBreadcrumb({ id: breadcrumb.id, changes: { name: 'Test Name 2' } }),
-      );
+      const fixture = breadcrumbReducer(state, action.updateBreadcrumb({ id: breadcrumb.id, changes: { name: 'Test Name 2' } }));
 
       expect(fixture.entities[breadcrumb.id]).toEqual(expected);
     });

apps/core/breadcrumb/src/lib/store/breadcrumb.reducer.ts

@@ -8,7 +8,7 @@ const _breadcrumbReducer = createReducer(
   on(actions.addBreadcrumb, (s, a) => breadcrumbAdapter.addOne(a.breadcrumb, s)),
   on(actions.updateBreadcrumb, (s, a) => breadcrumbAdapter.updateOne(a, s)),
   on(actions.removeBreadcrumb, (s, a) => breadcrumbAdapter.removeOne(a.id, s)),
-  on(actions.removeManyBreadcrumb, (s, a) => breadcrumbAdapter.removeMany(a.ids, s)),
+  on(actions.removeManyBreadcrumb, (s, a) => breadcrumbAdapter.removeMany(a.ids, s))
 );
 
 export function breadcrumbReducer(state: BreadcrumbState, action: Action) {

apps/core/breadcrumb/src/lib/store/breadcrumb.selectors.spec.ts

@@ -0,0 +1,57 @@
+import * as selector from './breadcrumb.selectors';
+import * as action from './breadcrumb.actions';
+import { breadcrumbReducer } from './breadcrumb.reducer';
+
+import { BreadcrumbState, INIT } from './breadcrumb.state';
+
+describe('Breadcrumb Selectors', () => {
+  let state: BreadcrumbState;
+
+  beforeEach(() => {
+    state = breadcrumbReducer(
+      INIT,
+      action.addBreadcrumb({ breadcrumb: { id: 1, key: 'unit-test-1', path: '', name: 'Unit Test 1', section: 'customer' } })
+    );
+    state = breadcrumbReducer(
+      state,
+      action.addBreadcrumb({
+        breadcrumb: { id: 2, key: 'unit-test-1', path: '', name: 'Unit Test 1', tags: ['details'], section: 'customer' },
+      })
+    );
+    state = breadcrumbReducer(
+      state,
+      action.addBreadcrumb({ breadcrumb: { id: 3, key: 'unit-test-2', path: '', name: 'Unit Test 1', section: 'customer' } })
+    );
+    state = breadcrumbReducer(
+      state,
+      action.addBreadcrumb({ breadcrumb: { id: 4, key: 'unit-test-3', path: '', name: 'Unit Test 1', section: 'customer' } })
+    );
+    state = breadcrumbReducer(
+      state,
+      action.addBreadcrumb({
+        breadcrumb: { id: 5, key: 'unit-test-3', path: '', name: 'Unit Test 1', tags: ['details'], section: 'customer' },
+      })
+    );
+  });
+
+  describe('selectBreadcrumbsByKey', () => {
+    it('should return all breadcrumbs with the key unit-test-1', () => {
+      const fixture = selector.selectBreadcrumbsByKey.projector(Object.values(state.entities), 'unit-test-1');
+      expect(fixture.length).toBe(2);
+      expect(fixture[0].key).toBe('unit-test-1');
+      expect(fixture[1].key).toBe('unit-test-1');
+    });
+  });
+
+  describe('selectBreadcrumbsByKeyAndTag', () => {
+    it('should return all breadcrumbs with the key unit-test-3 and tag details', () => {
+      const fixture = selector.selectBreadcrumbsByKeyAndTag.projector(Object.values(state.entities), {
+        key: 'unit-test-3',
+        tag: 'details',
+      });
+      expect(fixture.length).toBe(1);
+      expect(fixture[0].key).toBe('unit-test-3');
+      expect(fixture[0].tags).toContain('details');
+    });
+  });
+});

apps/core/breadcrumb/src/lib/store/breadcrumb.selectors.ts

@@ -20,9 +20,7 @@ export const selectBreadcrumbById = createSelector(selectEntities, (entities, id
 /**
  * Gibt alle Breadcrumb Entities als Array zurück die den key enthalten
  */
-export const selectBreadcrumbsByKey = createSelector(selectAll, (entities, key: string) =>
-  entities.filter((crumb) => crumb.key == key),
-);
+export const selectBreadcrumbsByKey = createSelector(selectAll, (entities, key: string) => entities.filter((crumb) => crumb.key == key));
 
 /**
  * Gibt alle Breadcrumb Entities als Array zurück die den key und tag enthalten
@@ -30,7 +28,7 @@ export const selectBreadcrumbsByKey = createSelector(selectAll, (entities, key:
 export const selectBreadcrumbsByKeyAndTag = createSelector(
   selectAll,
   (entities: Breadcrumb[], { key, tag }: { key: string; tag: string }) =>
-    entities.filter((crumb) => crumb.key == key && isArray(crumb.tags) && crumb.tags.includes(tag)),
+    entities.filter((crumb) => crumb.key == key && isArray(crumb.tags) && crumb.tags.includes(tag))
 );
 
 /**
@@ -39,15 +37,12 @@ export const selectBreadcrumbsByKeyAndTag = createSelector(
 export const selectBreadcrumbsByKeyAndTags = createSelector(
   selectAll,
   (entities: Breadcrumb[], { key, tags }: { key: string; tags: string[] }) =>
-    entities.filter(
-      (crumb) => crumb.key == key && isArray(crumb.tags) && tags.every((tag) => crumb.tags.includes(tag)),
-    ),
+    entities.filter((crumb) => crumb.key == key && isArray(crumb.tags) && tags.every((tag) => crumb.tags.includes(tag)))
 );
 
 /**
  * Gibt alle Breadcrumb Entities als Array zurück die die tags enthalten
  */
-export const selectBreadcrumbsBySection = createSelector(
-  selectAll,
-  (entities: Breadcrumb[], { section }: { section: string }) => entities.filter((crumb) => crumb.section === section),
+export const selectBreadcrumbsBySection = createSelector(selectAll, (entities: Breadcrumb[], { section }: { section: string }) =>
+  entities.filter((crumb) => crumb.section === section)
 );

apps/core/breadcrumb/src/lib/store/breadcrumb.state.ts

@@ -1,7 +1,7 @@
 import { createEntityAdapter, EntityState } from '@ngrx/entity';
 import { Breadcrumb } from '../defs';
 
-export type BreadcrumbState = EntityState<Breadcrumb>
+export interface BreadcrumbState extends EntityState<Breadcrumb> {}
 
 export const featureName = 'core-breadcrumb';
 

apps/core/breadcrumb/src/public-api.ts

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of breadcrumb
+ */
+
+export * from './lib/breadcrumb.service';
+export * from './lib/core-breadcrumb.module';
+export * from './lib/defs';

apps/core/cache/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/core/cache",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

apps/core/cache/src/lib/cache-options.ts

@@ -0,0 +1,4 @@
+export interface CacheOptions {
+  ttl?: number;
+  persist?: boolean;
+}

apps/core/cache/src/lib/cache.service.ts

@@ -0,0 +1,80 @@
+import { Injectable } from '@angular/core';
+import { CacheOptions } from './cache-options';
+import { Cached } from './cached';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CacheService {
+  constructor() {}
+
+  set(token: Object, data: any, options?: CacheOptions) {
+    const persist = options?.persist;
+    const ttl = options?.ttl;
+    const cached: Cached = {
+      data,
+    };
+
+    if (ttl) {
+      cached.until = Date.now() + ttl;
+    }
+
+    if (persist) {
+      localStorage.setItem(this.getKey(token), this.serialize(cached));
+    } else {
+      sessionStorage.setItem(this.getKey(token), this.serialize(cached));
+    }
+
+    Object.freeze(cached);
+    return cached;
+  }
+
+  get<T = any>(token: Object, from: 'session' | 'persist' = 'session'): T {
+    let cached: Cached;
+
+    if (from === 'session') {
+      cached = this.deserialize(sessionStorage.getItem(this.getKey(token)));
+    } else if (from === 'persist') {
+      cached = this.deserialize(localStorage.getItem(this.getKey(token)));
+    }
+
+    if (!cached) {
+      return undefined;
+    }
+
+    if (cached.until < Date.now()) {
+      this.delete(token, from);
+      return undefined;
+    }
+
+    return cached.data;
+  }
+
+  delete(token: Object, from: 'session' | 'persist' = 'session') {
+    if (from === 'session') {
+      sessionStorage.removeItem(this.getKey(token));
+    } else if (from === 'persist') {
+      localStorage.removeItem(this.getKey(token));
+    }
+  }
+
+  private getKey(token: Object) {
+    return this.hash(JSON.stringify(token));
+  }
+
+  private hash(data: string): string {
+    let hash = 0;
+    for (let i = 0; i < data.length; i++) {
+      hash = data.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return hash.toString(16);
+  }
+
+  private serialize(data: Cached): string {
+    return JSON.stringify(data);
+  }
+
+  private deserialize(data: string): Cached {
+    return JSON.parse(data);
+  }
+}

apps/core/cache/src/lib/cached.ts

@@ -0,0 +1,4 @@
+export interface Cached {
+  until?: number;
+  data?: any;
+}

apps/core/cache/src/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of cache
+ */
+
+export * from './lib/cache.service';
+export * from './lib/cache.module';

apps/core/command/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/core/command",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

apps/core/command/src/lib/action-handler.interface.ts

@@ -0,0 +1,4 @@
+export abstract class ActionHandler<T = any> {
+  constructor(readonly action: string) {}
+  abstract handler(data: T): Promise<T>;
+}

apps/core/command/src/lib/command.module.ts

@@ -0,0 +1,21 @@
+import { ModuleWithProviders, NgModule, Type } from '@angular/core';
+import { ActionHandler } from './action-handler.interface';
+import { CommandService } from './command.service';
+import { FEATURE_ACTION_HANDLERS, ROOT_ACTION_HANDLERS } from './tokens';
+
+@NgModule({})
+export class CoreCommandModule {
+  static forRoot(actionHandlers: Type<ActionHandler>[]): ModuleWithProviders<CoreCommandModule> {
+    return {
+      ngModule: CoreCommandModule,
+      providers: [CommandService, actionHandlers.map((handler) => ({ provide: ROOT_ACTION_HANDLERS, useClass: handler, multi: true }))],
+    };
+  }
+
+  static forChild(actionHandlers: Type<ActionHandler>[]): ModuleWithProviders<CoreCommandModule> {
+    return {
+      ngModule: CoreCommandModule,
+      providers: [CommandService, actionHandlers.map((handler) => ({ provide: FEATURE_ACTION_HANDLERS, useClass: handler, multi: true }))],
+    };
+  }
+}