Remove with Text

Remove GetEngineeringSpcReview Better error message EnforceCodeStyleInBuild NginxFileSystem Remove Reactors and Working Directory AppSettings Delete self contained Thunder Tests Back to .net8.0 api/v4/InfinityQS ApiExplorerSettings Wafer Counter
2024-04-15 13:13:55 -07:00
parent 7e16ee7f98
commit 5c9f0d1aff
974 changed files with 205399 additions and 1385 deletions
--- a/Server/wwwroot/js/site-server.js
+++ b/Server/wwwroot/js/site-server.js
--- a/Server/wwwroot/js/wafer-counter.js
+++ b/Server/wwwroot/js/wafer-counter.js
@ -0,0 +1,106 @@
+var _count = -1;
+var _apiUrl = null;
+
+function getUrlParameter(param) {
+    var pageURL = window.location.search.substring(1),
+        urlVariables = pageURL.split('&'),
+        parameterName,
+        i;
+
+    for (i = 0; i < urlVariables.length; i++) {
+        parameterName = urlVariables[i].split('=');
+
+        if (parameterName[0] === param) {
+            return parameterName[1] === undefined ? true : decodeURIComponent(parameterName[1]);
+        }
+    }
+    return false;
+}
+
+function setSlots(slotMap) {
+    var slots = slotMap.split("");
+    if (slots.length !== 25)
+        throw Error;
+    $('.slot').each(function (index) {
+        if (slots[index] === '0')
+            $(this).addClass('waferSlotEmpty').removeClass('waferSlotPresent');
+        else if (slots[index] === '1')
+            $(this).addClass('waferSlotPresent').removeClass('waferSlotEmpty');
+        else
+            throw Error;
+    });
+}
+
+function setValues(data) {
+    if (!data)
+        clearMap();
+    else {
+        $('#waferCount').val(data.total);
+        setSlots(data.slotMap);
+        $('#lastDateTime').text(new Date().toLocaleString());
+    }
+}
+
+function clearText() {
+    $("#lot").val('');
+    $("#lot").show();
+    $("#lot").focus();
+}
+
+function clearMap() {
+    setSlots('0000000000000000000000000');
+}
+
+function poll() {
+    if (_count >= _stop) {
+        _count = -1;
+        $("#Connect").show();
+        $('#lastDateTime').hide();
+    }
+    else if (_count > -1) {
+        _count++;
+        $.get(_apiUrl + $("#toolId").val() + '/last-quantity-and-slot-map/?area=' + $("#operation").val(), function (data) {
+            setValues(data);
+        }).fail(function () {
+            ShowErrorMessage("Error");
+        });
+    }
+}
+
+function save() {
+    $.get(_apiUrl + $("#toolId").val() + '/last-quantity-and-slot-map-with-text/?area=' + $("#operation").val() + '&text=' + $("#lot").val(), function (data) {
+        setValues(data);
+    }).fail(function () {
+        ShowErrorMessage("Error");
+    });
+}
+
+function initWaferCounter(apiUrl) {
+    _apiUrl = apiUrl;
+    $("#Save").click(function () {
+        save();
+    });
+    $("#Clear").click(function () {
+        clearText();
+        clearMap();
+    });
+    $("#Connect").click(function () {
+        $("#Connect").hide();
+        $('#lastDateTime').show();
+        _count = 0;
+        clearMap();
+    });
+    // http://localhost:5051/wafer-counter.html?interval=1000&stop=3&toolId=8INCH&operation=EPP-East&a=1
+    $('#waferCount').val('0');
+    $('#lastDateTime').hide();
+    var stop = getUrlParameter('stop');
+    _stop = !stop ? 10 : parseInt(stop);
+    var interval = getUrlParameter('interval');
+    $("#toolId").val(getUrlParameter('toolId'));
+    $("#operation").val(getUrlParameter('operation'));
+    setInterval(function () {
+        poll();
+    }, !interval ? 10000 : parseInt(interval));
+    clearText();
+    clearMap();
+}
--- a/Server/wwwroot/package/LICENSE
+++ b/Server/wwwroot/package/LICENSE
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/Server/wwwroot/package/README.md
+++ b/Server/wwwroot/package/README.md
@ -0,0 +1,413 @@
+# Infineon Design System Stencil Web Components (MVP)
+[![GitHub Repo Issues](https://img.shields.io/github/issues/Infineon/infineon-design-system-stencil?style=plastic)](https://github.com/Infineon/infineon-design-system-stencil/issues)
+[![GitHub Pull Requests](https://img.shields.io/github/issues-pr-raw/Infineon/infineon-design-system-stencil?style=plastic)](https://github.com/Infineon/infineon-design-system-stencil/pulls)
+[![GitHub Repo Version](https://img.shields.io/github/package-json/v/Infineon/infineon-design-system-stencil?style=plastic)](https://github.com/Infineon/infineon-design-system-stencil/blob/master/package.json)
+[![GitHub Master Branch Weekly Commits](https://img.shields.io/github/commit-activity/w/Infineon/infineon-design-system-stencil/master?style=plastic)](https://github.com/Infineon/infineon-design-system-stencil/tree/master)
+[![GitHub Repo Contributors](https://img.shields.io/github/contributors/Infineon/infineon-design-system-stencil?style=plastic)](https://github.com/Infineon/infineon-design-system-stencil/graphs/contributors)
+[![GitHub Repo Discussions](https://img.shields.io/github/discussions/Infineon/infineon-design-system-stencil)](https://github.com/Infineon/infineon-design-system-stencil/)
+
+
+<!-- TABLE OF CONTENTS -->
+<details id="tableContent">
+  <summary>Table of Contents</summary>
+  <ol>
+    <li>
+      <a href="#about-the-project">About The Project</a>
+      <ul>
+        <li><a href="#built-with">Built With</a></li>
+        <li><a href="#examples">Example applications demonstrating the usage of the IFX web components</a></li>
+      </ul>
+    </li>
+    <li><a href="#project-structure">Project structure</a></li>
+    <li>
+      <a href="#getting-started">Getting Started</a>
+      <ul>
+        <li><a href="#prerequisites">Prerequisites</a></li>
+        <li><a href="#installation">Installation</a><li>
+        <ul>
+        <li><a href="#angular">Angular</a></li>
+        <li><a href="#react/vue">React/Vue</a></li>
+        <li><a href="#vanilla">Vanilla</a></li>
+      </ul>
+      </ul>
+    </li>
+    <li><a href="#usage-of-components">Usage</a></li>
+    <li><a href="#local-development">Local development</a></li>
+    <li><a href="#contributing">Contributing</a></li>
+    <li><a href="#contact">Contact</a></li>
+  </ol>
+</details>
+
+<!-- ABOUT THE PROJECT -->
+## About The Project
+
+As part of the Infineon brand guidelines, the Infineon Digital Design System supports designers, developers and project managers to build user interfaces faster and better – with the ultimate goal to create a coherent and optimal user journey across all internal and external Infineon digital touchpoints.
+
+This repository contains an implementation of Infineons Digital Design System and it's Storybook sourcecode using Stencil web components.
+
+Use it to build & run storybook and distribute the Stencil web components.
+
+### Built With
+
+[Stencil web components][Stencil-url]
+
+
+### Example applications demonstrating the usage of IFX Web Components
+
+- [Angular][Angular-example]
+- [React + Javascript][React-example]
+- [Vanilla][Vanilla-example]
+- [Vue + Javascript][Vue-example]
+
+
+<p align="right"><a href="#tableContent">back to top</a></p>
+
+
+## Project structure 
+
+### Overall structure
+
+The repository has a monorepo architecture using Lerna. It contains not only our Stencil Web Components, but also framework integrations for Vue and React as well as example applications demonstrating component usage (not included in the Lerna workspaces)
+
+### Wrapper components
+
+Stencil Web Components can be used with any JavaScript framework or with no framework at all, just like any other HTML elements. This is because they are built on Web APIs that are native to the browser. They are self-contained and encapsulate their functionality in a way that makes them portable and easy to drop into any project.
+
+To bridge the gap between Stencil components and specific frameworks, it can be useful to create wrapper components 
+
+A Stencil Wrapper Component is a component that wraps around a Stencil Web Component and translates the properties, events, and methods to work seamlessly within the specific framework context.
+
+Our Wrapper Components are built automatically every time ```npm run stencil:build``` is executed.
+
+<p align="right"><a href="#tableContent">back to top</a></p>
+
+ <br>
+
+---
+
+<!-- GETTING STARTED -->
+## Getting Started
+
+### Prerequisites
+
+- [Node](https://nodejs.org/en/) > v16 .
+- [Yarn](https://classic.yarnpkg.com/en/) > v1.22.10, or [Npm](https://www.npmjs.com/) > v8.
+
+### Installation of the component libraray
+
+---
+#### Angular
+
+**1.**
+
+- **with NPM**
+
+```npm install --save @infineon/infineon-design-system-stencil```
+
+- **with Yarn**
+
+```yarn add @infineon/infineon-design-system-stencil```
+
+**2. Installation of SASS**
+```bash
+npm install sass
+```
+
+**3. Import the module inside your entry point file**
+
+```bash
+#main.ts
+import { defineCustomElements } from "@infineon/infineon-design-system-stencil/loader";
+
+defineCustomElements(window);
+```
+**4. Additional steps only for Angular**
+
+Inside <b>app.modules.ts</b> file:
+
+```bash
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+@NgModule({
+ ...
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ],
+ ...
+})
+```
+
+<p align="right"><a href="#tableContent">back to top</a></p>
+
+ <br>
+
+---
+
+#### React
+
+React Wrappers: Similarly to Vue, a React wrapper provides a React interface to a Stencil web component, making the web component feel more like a typical React component. This includes proper handling of props, state, and events within the context of a React application.
+
+**1. Installation**
+
+**- with NPM**
+
+```npm install @infineon/infineon-design-system-react```
+
+**- with Yarn**
+
+```yarn add @infineon/infineon-design-system-react```
+
+**2. Installation of SASS**
+```bash
+npm install sass
+```
+
+**3. Import the module inside your entry point file**
+
+```js
+import { defineCustomElements } from '@infineon/infineon-design-system-react';
+//...
+
+defineCustomElements(window)
+```
+
+In React, there isn't a built-in mechanism to globally register components like in Vue. Therefore, components need to be imported in the file that they are being used in.
+
+**4. Usage**
+
+```js
+import { IfxProgressBar, IfxSearchBar, IfxButton } from '@infineon/infineon-design-system-react';
+//...
+<IfxSearchBar onIfxChange={handleSearch} show-close-button="true"></IfxSearchBar>
+```
+
+**React + Javascript specific**
+
+It may be necessary to add the following to your .env file at project root:
+
+``GENERATE_SOURCEMAP=false``
+
+This can also be achieved by updating your start script in the ``package.json`` accordingly.
+
+<p align="right"><a href="#tableContent">back to top</a></p>
+
+ <br>
+
+---
+
+#### Vanilla
+
+Include the following script tag in your index.html
+
+```bash
+<script type="module" src="https://cdn.jsdelivr.net/npm/@infineon/infineon-design-system-stencil/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js"></script>'
+
+```
+
+<p align="right"><a href="#tableContent">back to top</a></p>
+
+ <br>
+
+---
+
+#### Vue
+
+**1. Installation**
+
+**- with NPM**
+
+```npm install @infineon/infineon-design-system-vue```
+
+**- with Yarn**
+
+```yarn add @infineon/infineon-design-system-vue```
+
+**2. Installation of SASS**
+```bash
+npm install sass
+```
+
+**3. Import the module inside your entry point file**
+
+```js
+//main.js/main.ts
+import { ComponentLibrary } from '@infineon/infineon-design-system-vue';
+//...
+
+createApp(App).use(ComponentLibrary).mount('#app');
+```
+
+In Vue, this registers the components globally.
+
+**4. Usage**
+
+```js
+<ifx-progress-bar v-model="progress" size="m" show-label="true"></ifx-progress-bar>
+```
+
+<p align="right"><a href="#tableContent">back to top</a></p>
+
+ <br>
+
+---
+
+## General usage of IFX web components
+
+Explore our currently available web components in Storybook. You will also find the code snippets needed to include them in your application.
+
+https://infineon.github.io/infineon-design-system-stencil
+
+
+ <br>
+
+---
+
+## Using only the Icons
+
+For the case in which you only want to use our icons, please follow these steps:
+
+
+1. install the package by following the instructions for the respective framework
+2. Import only the ifx-icon component inside your entry point file as explained below;
+
+For React: <b>index.js/index.ts</b> <br />
+For Vue: <b>main.js/main.ts</b> <br />
+For Angular: <b>main.ts</b>
+
+```bash
+import { defineCustomElement as defineCustomElementIfxIcon } from "@infineon/infineon-design-system-stencil/dist/components/ifx-icon";
+
+defineCustomElementIfxIcon(window);
+```
+
+<p align="right"><a href="#tableContent">back to top</a></p>
+
+ <br>
+
+---
+
+## Local development
+
+### Installation
+
+```bash
+git clone https://github.com/Infineon/infineon-design-system-stencil.git
+```
+
+Install all the modules and dependencies listed on the ```package.json``` file with:
+
+```bash
+yarn/npm install
+```
+
+<p align="right"><a href="#tableContent">back to top</a></p>
+
+ <br>
+
+---
+
+### Build Storybook
+
+To run Storybook to view and test our Stencil Web Components, we first need to export it as a static web app.
+
+For building the application for the first time (to load fonts, assets and stylesheets) run:
+
+```bash
+yarn/npm run build:components
+```
+
+### Start Storybook
+
+To run storybook locally (automatically rebuilds on changes), run:
+
+```bash
+yarn/npm run storybook
+```
+
+
+<p align="right"><a href="#tableContent">back to top</a></p>
+
+ <br>
+
+---
+
+### Example applications
+
+To test the standard Stencil components within our example applicatons, navigate to 
+
+```bash
+cd examples/stencil-components
+```
+
+and go to the folder for Vue, React, Angular or VanillaJs. Follow the instructions described in the ```readme.md``` in each of these folders.
+
+To test the Wrapper components within React or Vue applicatons, navigate to 
+
+```bash
+cd examples/wrapper-components
+```
+
+and go to the application folder you want to use for testing. (React-Ts, React-Js, Vue-Ts, Vue-Js). Again, follow the instructions described in the ```readme.md``` in each of these folders.
+
+<p align="right"><a href="#tableContent">back to top</a></p>
+
+ <br>
+
+---
+
+### Contributing
+
+ Clone the repository
+ Create an issue with a proper description (Naming convention: 'name-of-component: feature/bug')
+ Create a pull request with a proper description 
+ Request a review (tishoyanchev || verena-ifx)
+
+
+<p align="right"><a href="#tableContent">back to top</a></p>
+
+ <br>
+ 
+## Contact
+
+### Email
+dds@infineon.com <br />
+
+
+<p align="right"><a href="#tableContent">back to top</a></p>
+
+<!-- MARKDOWN LINKS & IMAGES -->
+<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+[contributors-shield]: https://img.shields.io/github/contributors/othneildrew/Best-README-Template.svg?style=for-the-badge
+[contributors-url]: https://github.com/othneildrew/Best-README-Template/graphs/contributors
+[forks-shield]: https://img.shields.io/github/forks/othneildrew/Best-README-Template.svg?style=for-the-badge
+[forks-url]: https://github.com/othneildrew/Best-README-Template/network/members
+[stars-shield]: https://img.shields.io/github/stars/othneildrew/Best-README-Template.svg?style=for-the-badge
+[stars-url]: https://github.com/othneildrew/Best-README-Template/stargazers
+[issues-shield]: https://img.shields.io/github/issues/othneildrew/Best-README-Template.svg?style=for-the-badge
+[issues-url]: https://github.com/othneildrew/Best-README-Template/issues
+[license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=for-the-badge
+[license-url]: https://github.com/othneildrew/Best-README-Template/blob/master/LICENSE.txt
+[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
+[linkedin-url]: https://linkedin.com/in/othneildrew
+[product-screenshot]: images/screenshot.png
+[Next.js]: https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white
+[Next-url]: https://nextjs.org/
+[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
+[React-url]: https://reactjs.org/
+[Vue.js]: https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D
+[Vue-url]: https://vuejs.org/
+[Angular.io]: https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white
+[Angular-url]: https://angular.io/
+[Svelte.dev]: https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge&logo=svelte&logoColor=FF3E00
+[Svelte-url]: https://svelte.dev/
+[Laravel.com]: https://img.shields.io/badge/Laravel-FF2D20?style=for-the-badge&logo=laravel&logoColor=white
+[Laravel-url]: https://laravel.com
+[Bootstrap.com]: https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white
+[Bootstrap-url]: https://getbootstrap.com
+[JQuery.com]: https://img.shields.io/badge/jQuery-0769AD?style=for-the-badge&logo=jquery&logoColor=white
+[JQuery-url]: https://jquery.com 
+[Stencil-url]: https://stenciljs.com/
+[Vue-example]: https://infineon.github.io/infineon-design-system-stencil/vue-example
+[React-example]: https://infineon.github.io/infineon-design-system-stencil/react-example
+[Angular-example]: https://infineon.github.io/infineon-design-system-stencil/angular-example
+[Vanilla-example]: https://infineon.github.io/infineon-design-system-stencil/vanilla-example
--- a/Server/wwwroot/package/dist/cjs/_commonjsHelpers-4213291f.js
+++ b/Server/wwwroot/package/dist/cjs/_commonjsHelpers-4213291f.js
@ -0,0 +1,24 @@
+'use strict';
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+exports.createCommonjsModule = createCommonjsModule;
+exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
+
+//# sourceMappingURL=_commonjsHelpers-4213291f.js.map
--- a/Server/wwwroot/package/dist/cjs/_commonjsHelpers-4213291f.js.map
+++ b/Server/wwwroot/package/dist/cjs/_commonjsHelpers-4213291f.js.map
@ -0,0 +1 @@
+{"file":"_commonjsHelpers-4213291f.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ag-grid-community.auto.esm-f525884c.js
+++ b/Server/wwwroot/package/dist/cjs/ag-grid-community.auto.esm-f525884c.js
--- a/Server/wwwroot/package/dist/cjs/ag-grid-community.auto.esm-f525884c.js.map
+++ b/Server/wwwroot/package/dist/cjs/ag-grid-community.auto.esm-f525884c.js.map
--- a/Server/wwwroot/package/dist/cjs/icons-d2a85d59.js
+++ b/Server/wwwroot/package/dist/cjs/icons-d2a85d59.js
--- a/Server/wwwroot/package/dist/cjs/icons-d2a85d59.js.map
+++ b/Server/wwwroot/package/dist/cjs/icons-d2a85d59.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-accordion_2.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-accordion_2.cjs.entry.js
@ -0,0 +1,110 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const accordionCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}";
+
+const Accordion = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.autoCollapse = false;
+  }
+  async onItemOpen(event) {
+    if (this.autoCollapse) {
+      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));
+      for (const item of items) {
+        const itemElement = item;
+        if (itemElement !== event.target && (await itemElement.open)) {
+          itemElement.open = false;
+        }
+      }
+    }
+  }
+  render() {
+    return (index.h("div", { class: "accordion-wrapper" }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+Accordion.style = accordionCss;
+
+const accordionItemCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.accordion-item{border-radius:3px;overflow:hidden;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;max-height:0;overflow:hidden;transition:max-height 0.3s ease-in-out;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:24px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:inline-block;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}";
+
+const IfxAccordionItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ifxItemOpen = index.createEvent(this, "ifxItemOpen", 7);
+    this.ifxItemClose = index.createEvent(this, "ifxItemClose", 7);
+    this.caption = undefined;
+    this.open = false;
+    this.initialCollapse = true;
+    this.internalOpen = false;
+  }
+  componentWillLoad() {
+    this.internalOpen = this.open;
+    if (!this.initialCollapse) {
+      this.internalOpen = true;
+    }
+  }
+  componentDidLoad() {
+    this.openAccordionItem();
+  }
+  componentDidUpdate() {
+    this.openAccordionItem();
+  }
+  openChanged(newValue) {
+    this.internalOpen = newValue;
+  }
+  toggleOpen() {
+    this.internalOpen = !this.internalOpen;
+    this.open = this.internalOpen;
+    if (this.internalOpen) {
+      this.ifxItemOpen.emit({ isOpen: this.internalOpen });
+    }
+    else {
+      this.ifxItemClose.emit({ isClosed: !this.internalOpen });
+    }
+  }
+  openAccordionItem() {
+    if (this.internalOpen) {
+      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;
+    }
+    else {
+      this.contentEl.style.maxHeight = '0';
+    }
+  }
+  handleSlotChange(e) {
+    const slotElement = e.target;
+    const nodes = slotElement.assignedNodes();
+    if (nodes.length > 0) {
+      nodes.forEach(node => {
+        const observer = new MutationObserver((mutationsList, _) => {
+          for (let mutation of mutationsList) {
+            if (mutation.type === 'childList') {
+              if (this.internalOpen) {
+                this.openAccordionItem();
+              }
+            }
+          }
+        });
+        observer.observe(node, { attributes: true, childList: true, subtree: true });
+      });
+    }
+    if (this.internalOpen) {
+      this.openAccordionItem();
+    }
+  }
+  render() {
+    return (index.h("div", { "aria-label": this.caption, class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, index.h("div", { class: "accordion-title", onClick: () => this.toggleOpen() }, index.h("span", { class: "accordion-icon" }, index.h("ifx-icon", { icon: "chevron-down-12" })), index.h("span", { class: "accordion-caption" }, this.caption)), index.h("div", { class: "accordion-content", ref: (el) => (this.contentEl = el) }, index.h("div", { class: "inner-content" }, index.h("slot", { onSlotchange: (e) => this.handleSlotChange(e) })))));
+  }
+  static get watchers() { return {
+    "open": ["openChanged"]
+  }; }
+};
+IfxAccordionItem.style = accordionItemCss;
+
+exports.ifx_accordion = Accordion;
+exports.ifx_accordion_item = IfxAccordionItem;
+
+//# sourceMappingURL=ifx-accordion_2.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-accordion_2.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-accordion_2.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-alert.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-alert.cjs.entry.js
@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const alertCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper a{line-height:0;color:#1D1D1D}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper a{line-height:0;color:#1D1D1D}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.secondary{border:1px solid #9C216E}.alert.secondary .icon-wrapper{background-color:#9C216E;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}";
+
+const Alert = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ifxClose = index.createEvent(this, "ifxClose", 7);
+    this.variant = 'primary';
+    this.icon = undefined;
+    this.closable = true;
+  }
+  handleClose() {
+    this.ifxClose.emit();
+  }
+  render() {
+    return (this.variant === 'info'
+      ? index.h("div", { class: 'alert__info-wrapper' }, index.h("div", { class: 'info__text-wrapper' }, index.h("div", { class: "info__headline-wrapper" }, index.h("slot", { name: 'headline' })), index.h("div", { class: "info__description-wrapper" }, index.h("slot", { name: 'desc' }))), this.closable && index.h("div", { class: "close-icon-wrapper" }, index.h("a", { href: undefined, onClick: this.handleClose.bind(this) }, index.h("ifx-icon", { icon: 'cross-16' }))))
+      : index.h("div", { class: `alert ${this.variant}` }, this.icon && (index.h("div", { class: 'icon-wrapper' }, index.h("ifx-icon", { icon: this.icon }))), index.h("div", { class: "alert-text" }, index.h("slot", null)), this.closable && index.h("div", { class: "close-icon-wrapper" }, index.h("a", { href: undefined, onClick: this.handleClose.bind(this) }, index.h("ifx-icon", { icon: 'cross-16' })))));
+  }
+};
+Alert.style = alertCss;
+
+exports.ifx_alert = Alert;
+
+//# sourceMappingURL=ifx-alert.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-alert.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-alert.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-badge.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-badge.cjs.entry.js
@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const badgeCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.badge__container{display:inline-flex;justify-content:center;align-items:center;padding:4px 8px;gap:8px;border:1px solid #EEEDED;background-color:#EEEDED;border-radius:100px;font-family:var(--ifx-font-family);font-size:0.875rem;line-height:1.25rem;font-weight:400;color:#1D1D1D}";
+
+const Badge = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("div", { class: "badge__container" }, index.h("slot", null)));
+  }
+};
+Badge.style = badgeCss;
+
+exports.ifx_badge = Badge;
+
+//# sourceMappingURL=ifx-badge.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-badge.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-badge.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-badge.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,2YAA2Y;;MCO/Y,KAAK;;;;EAEhB,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,kBAAkB,IAC3BA,qBAAQ,CACJ,EACN;GACH;;;;;;","names":["h"],"sources":["src/components/badge/badge.scss?tag=ifx-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.badge__container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 8px;\n  gap: tokens.$ifxSpace100;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  background-color: tokens.$ifxColorEngineering200;\n  border-radius: 100px;\n  font-family: var(--ifx-font-family);\n  font-size: tokens.$ifxFontSizeS;\n  line-height: tokens.$ifxLineHeightS;\n  font-weight: 400;\n  color: tokens.$ifxColorBaseBlack;\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-badge',\n  styleUrl: 'badge.scss',\n  shadow: true\n})\nexport class Badge {\n\n  render() {\n    return (\n      <div class=\"badge__container\">\n        <slot />\n      </div>\n    );\n  }\n}"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-basic-table.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-basic-table.cjs.entry.js
--- a/Server/wwwroot/package/dist/cjs/ifx-basic-table.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-basic-table.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-breadcrumb-item-label.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-breadcrumb-item-label.cjs.entry.js
@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const breadcrumbItemLabelCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.breadcrumb-item-label-container{display:flex;align-items:center;gap:8px;text-decoration:none;color:#1D1D1D}.breadcrumb-item-label-container.margin{margin-left:16px}.breadcrumb-item-label-container ifx-icon:empty{display:none}.breadcrumb-item-label-container .label-icon-wrapper{display:inline-flex}.breadcrumb-item-label-container .menu-icon-wrapper{display:flex;justify-content:center;align-items:center;width:16px;height:16px}.breadcrumb-item-label-container .menu-icon-wrapper.hide{display:none}.breadcrumb-item-label-container .menu-icon-wrapper ifx-icon{transition:0.3s}.breadcrumb-item-label-container .menu-icon-wrapper.show ifx-icon{transition:0.3s;transform:rotate(180deg)}";
+
+const BreadcrumbItemLabel = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.breadcrumbMenuIconWrapper = index.createEvent(this, "breadcrumbMenuIconWrapper", 7);
+    this.icon = undefined;
+    this.url = undefined;
+    this.target = "_self";
+  }
+  componentDidLoad() {
+    const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container');
+    const menuWrapper = container.querySelector('.menu-icon-wrapper');
+    this.breadcrumbMenuIconWrapper.emit(menuWrapper);
+  }
+  render() {
+    return (index.h("a", { href: this.url, target: this.target, class: "breadcrumb-item-label-container" }, index.h("ifx-icon", { icon: this.icon }), index.h("span", { class: "label-wrapper" }, index.h("slot", null)), index.h("span", { class: "menu-icon-wrapper" }, index.h("ifx-icon", { icon: "chevron-down-12" }))));
+  }
+  get el() { return index.getElement(this); }
+};
+BreadcrumbItemLabel.style = breadcrumbItemLabelCss;
+
+exports.ifx_breadcrumb_item_label = BreadcrumbItemLabel;
+
+//# sourceMappingURL=ifx-breadcrumb-item-label.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-breadcrumb-item-label.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-breadcrumb-item-label.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-breadcrumb-item-label.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,sBAAsB,GAAG,swBAAswB;;MCOxxB,mBAAmB;;;;;;kBAGL,OAAO;;EAIhC,gBAAgB;IACd,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAA;IACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;IACjE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;GACjD;EAED,MAAM;IACJ,QACEA,eAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,IAC7EA,sBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,EACtCA,kBAAM,KAAK,EAAC,eAAe,IACzBA,qBAAQ,CACH,EACRA,kBAAM,KAAK,EAAC,mBAAmB,IAC9BA,sBAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ,EACJ;GACH;;;;;;;","names":["h"],"sources":["src/components/breadcrumb/breadcrumb-item-label.scss?tag=ifx-breadcrumb-item-label&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item-label.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-item-label-container {\n  display: flex;\n  align-items: center;\n  gap: tokens.$ifxSpace100;\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n\n  &.margin {\n    margin-left: 16px;\n  }\n\n  & ifx-icon:empty {\n    display: none;\n  }\n\n  & .label-icon-wrapper {\n    display: inline-flex;\n  }\n\n  & .menu-icon-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n\n    &.hide {\n      display: none;\n    }\n\n    & ifx-icon {\n      transition: .3s;\n    }\n\n    &.show {\n      & ifx-icon {\n        transition: .3s;\n        transform: rotate(180deg);\n      }\n    }\n  }\n}","import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb-item-label',\n  styleUrl: 'breadcrumb-item-label.scss',\n  shadow: true,\n})\nexport class BreadcrumbItemLabel {\n  @Prop() icon: string;\n  @Prop() url: string;\n  @Prop() target: string = \"_self\"\n  @Element() el;\n  @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\n\n  componentDidLoad() { \n    const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\n    const menuWrapper = container.querySelector('.menu-icon-wrapper')\n    this.breadcrumbMenuIconWrapper.emit(menuWrapper)\n  }\n\n  render() {\n    return (\n      <a href={this.url} target={this.target} class=\"breadcrumb-item-label-container\">\n        <ifx-icon icon={this.icon}></ifx-icon>\n        <span class=\"label-wrapper\">\n          <slot />\n        </span>\n       <span class=\"menu-icon-wrapper\">\n        <ifx-icon icon=\"chevron-down-12\"></ifx-icon>\n       </span>\n      </a>\n    );\n  }\n}\n"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-breadcrumb-item.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-breadcrumb-item.cjs.entry.js
@ -0,0 +1,78 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const breadcrumbItemCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.breadcrumb-parent{display:flex;flex-direction:row;align-items:center;padding:0px;gap:12px}.breadcrumb-parent:hover{cursor:pointer}.breadcrumb-parent .breadcrumb-wrapper{display:flex;flex-direction:row;align-items:center;padding:0px;gap:8px;position:relative}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu{display:none;position:absolute;top:20px}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu.open{display:block}.breadcrumb-parent .breadcrumb-wrapper a{text-decoration:none;color:#1D1D1D;font-family:var(--ifx-font-family);font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;display:flex;align-items:center;color:#1D1D1D;flex-direction:column;justify-content:center;padding:0px;border-bottom:1px solid #1D1D1D}.breadcrumb-parent .breadcrumb-divider{width:10px;height:16px;color:#EEEDED;line-height:13px;font-size:1.25rem;margin-right:12px}";
+
+const BreadcrumbItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.isLastItem = false;
+  }
+  handleOutsideClick(event) {
+    const path = event.composedPath();
+    if (!path.includes(this.el)) {
+      this.closeDropdownMenu();
+    }
+  }
+  getDropdownMenu() {
+    const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');
+    return dropdownMenu;
+  }
+  menuWrapperEventReEmitter(event) {
+    this.emittedElement = event.detail;
+  }
+  getMenuIconWrapper() {
+    return this.emittedElement;
+  }
+  handleClassList(el, type, className) {
+    el.classList[type](className);
+  }
+  closeDropdownMenu() {
+    const dropdownMenu = this.getDropdownMenu();
+    const menuWrapper = this.getMenuIconWrapper();
+    this.handleClassList(dropdownMenu, 'remove', 'open');
+    this.handleClassList(menuWrapper, 'remove', 'show');
+  }
+  toggleDropdownMenu() {
+    const dropdownMenu = this.getDropdownMenu();
+    const menuWrapper = this.getMenuIconWrapper();
+    this.handleClassList(dropdownMenu, 'toggle', 'open');
+    this.handleClassList(menuWrapper, 'toggle', 'show');
+  }
+  handleLastItem() {
+    const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item');
+    if (this.el === breadcrumbItems[breadcrumbItems.length - 1]) {
+      this.isLastItem = true;
+    }
+    else
+      this.isLastItem = false;
+  }
+  componentWillLoad() {
+    this.handleLastItem();
+  }
+  componentDidUpdate() {
+    this.handleLastItem();
+  }
+  componentDidLoad() {
+    const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');
+    if (!dropdownMenu) {
+      const iconMenuWrapper = this.getMenuIconWrapper();
+      this.handleClassList(iconMenuWrapper, 'toggle', 'hide');
+    }
+    else {
+      dropdownMenu.isOpen = true;
+    }
+  }
+  render() {
+    return (index.h("li", { class: 'breadcrumb-parent', "aria-current": `${this.isLastItem ? 'page' : ""}`, onClick: () => this.toggleDropdownMenu() }, index.h("li", { class: "breadcrumb-wrapper" }, index.h("slot", { name: 'label' }), index.h("div", { class: "dropdown-menu" }, index.h("slot", null))), !this.isLastItem && index.h("span", { class: "breadcrumb-divider" }, "/")));
+  }
+  get el() { return index.getElement(this); }
+};
+BreadcrumbItem.style = breadcrumbItemCss;
+
+exports.ifx_breadcrumb_item = BreadcrumbItem;
+
+//# sourceMappingURL=ifx-breadcrumb-item.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-breadcrumb-item.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-breadcrumb-item.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-breadcrumb.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-breadcrumb.cjs.entry.js
@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const breadcrumbCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex}.breadcrumb{list-style:none;padding:0px;margin:0px;display:flex;flex-direction:row;font-family:var(--ifx-font-family);font-size:0.875rem;align-items:flex-start}";
+
+const Breadcrumb = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    const element = this.el.shadowRoot.firstChild;
+    this.addEventListenersToHandleCustomFocusState(element);
+  }
+  addEventListenersToHandleCustomFocusState(element) {
+    if (!element) {
+      console.error('element not found');
+      return;
+    }
+    element.tabIndex = -1;
+    const slot = element.querySelector('slot');
+    if (slot) {
+      const assignedNodes = slot.assignedNodes();
+      for (let i = 0; i < assignedNodes.length; i++) {
+        const node = assignedNodes[i];
+        if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {
+          const breadcrumbLabel = node;
+          if (!breadcrumbLabel.hasAttribute('url')) {
+            breadcrumbLabel.tabIndex = -1;
+            breadcrumbLabel.addEventListener('focus', () => {
+              if (breadcrumbLabel.hasAttribute('url')) {
+                breadcrumbLabel.blur();
+              }
+            });
+          }
+        }
+      }
+    }
+  }
+  render() {
+    return (index.h("nav", { "aria-label": "Page navigation breadcrumb" }, index.h("ol", { class: "breadcrumb" }, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
+};
+Breadcrumb.style = breadcrumbCss;
+
+exports.ifx_breadcrumb = Breadcrumb;
+
+//# sourceMappingURL=ifx-breadcrumb.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-breadcrumb.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-breadcrumb.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-breadcrumb.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,8QAA8Q;;MCOvR,UAAU;;;;EAGrB,gBAAgB;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;IAC9C,IAAI,CAAC,yCAAyC,CAAC,OAAO,CAAC,CAAC;GAEzD;EAEO,yCAAyC,CAAC,OAAoB;IACpE,IAAI,CAAC,OAAO,EAAE;MACZ,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;MACnC,OAAO;KACR;IACD,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;IAEtB,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC3C,IAAG,IAAI,EAAE;MACP,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;MAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC7C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;UAC3C,MAAM,eAAe,GAAG,IAAoC,CAAC;UAC7D,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE;YACxC,eAAe,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YAC9B,eAAe,CAAC,gBAAgB,CAAC,OAAO,EAAE;cACxC,IAAI,eAAe,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE;gBACvC,eAAe,CAAC,IAAI,EAAE,CAAC;eACxB;aACF,CAAC,CAAC;WACJ;SACF;OACF;KACF;GACF;EAED,MAAM;IACJ,QACEA,+BAAgB,4BAA4B,IAC1CA,gBAAI,KAAK,EAAC,YAAY,IACpBA,qBAAQ,CACL,CACD,EACN;GACH;;;;;;;","names":["h"],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.breadcrumb {\n  list-style: none;\n  padding: 0px;\n  margin: 0px;\n  display: flex;\n  flex-direction: row;\n  font-family: var(--ifx-font-family);\n  font-size: tokens.$ifxFontSizeS;\n  align-items: flex-start;\n  //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n//   color: tokens.$ifxColorEngineering300;\n//   margin: 0 16px;\n// }","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true\n})\nexport class Breadcrumb {\n  @Element() el;\n\n  componentDidLoad() {\n    const element = this.el.shadowRoot.firstChild;\n    this.addEventListenersToHandleCustomFocusState(element);\n\n  }\n\n  private addEventListenersToHandleCustomFocusState(element: HTMLElement) {\n    if (!element) {\n      console.error('element not found');\n      return;\n    }\n    element.tabIndex = -1;\n\n    const slot = element.querySelector('slot');\n    if(slot) { \n      const assignedNodes = slot.assignedNodes();\n  \n      for (let i = 0; i < assignedNodes.length; i++) {\n        const node = assignedNodes[i];\n        if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n          const breadcrumbLabel = node as HTMLIfxBreadcrumbItemElement;\n          if (!breadcrumbLabel.hasAttribute('url')) {\n            breadcrumbLabel.tabIndex = -1;\n            breadcrumbLabel.addEventListener('focus', () => {\n              if (breadcrumbLabel.hasAttribute('url')) {\n                breadcrumbLabel.blur();\n              }\n            });\n          }\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <nav aria-label=\"Page navigation breadcrumb\">\n        <ol class=\"breadcrumb\">\n          <slot />\n        </ol>\n      </nav>\n    );\n  }\n}\n"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-button.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-button.cjs.entry.js
--- a/Server/wwwroot/package/dist/cjs/ifx-button.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-button.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-card-headline.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-card-headline.cjs.entry.js
@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const cardHeadlineCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{pointer-events:none}.card__headline-wrapper{padding-bottom:16px}.card__headline-wrapper.withDesc{padding-bottom:8px}.card-headline{margin-top:0;padding-top:0;font-family:var(--ifx-font-family);font-weight:600;font-size:1.5rem;line-height:2rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.card-headline.isHovered{color:#0A8276}.card-headline.horizontal{font-size:1.25rem;line-height:28px}";
+
+const CardHeadline = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.direction = undefined;
+    this.hasDesc = undefined;
+    this.isHovered = false;
+  }
+  componentWillLoad() {
+    var _a;
+    const cardElement = this.el.closest('ifx-card');
+    if (cardElement) {
+      const cardClass = (_a = cardElement.shadowRoot.querySelector('.card')) === null || _a === void 0 ? void 0 : _a.className;
+      if (cardClass && cardClass.includes('horizontal')) {
+        this.direction = 'horizontal';
+      }
+      const desc = cardElement.querySelector('ifx-card-text');
+      if (desc) {
+        this.hasDesc = true;
+      }
+    }
+  }
+  render() {
+    return (index.h("div", { class: `card__headline-wrapper ${this.hasDesc ? 'withDesc' : ""}` }, index.h("div", { class: `card-headline ${this.direction} ${this.isHovered ? 'isHovered' : ""}` }, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
+};
+CardHeadline.style = cardHeadlineCss;
+
+exports.ifx_card_headline = CardHeadline;
+
+//# sourceMappingURL=ifx-card-headline.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-card-headline.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-card-headline.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-card-headline.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,oiBAAoiB;;MCQ/iB,YAAY;;;;;qBAIM,KAAK;;EAElC,iBAAiB;;IACf,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAEhD,IAAI,WAAW,EAAE;MACf,MAAM,SAAS,GAAG,MAAA,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,0CAAE,SAAS,CAAC;MAE3E,IAAI,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;QACjD,IAAI,CAAC,SAAS,GAAG,YAAY,CAAA;OAC9B;MAED,MAAM,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;MACxD,IAAI,IAAI,EAAE;QACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;OACrB;KACF;GACF;EAGD,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAE,0BAA0B,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,IACpEA,iBAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,EAAE,EAAE,IAChFA,qBAAQ,CACJ,CACF,EACP;GACF;;;;;;;","names":["h"],"sources":["src/components/card/card-headline/card-headline.scss?tag=ifx-card-headline&encapsulation=shadow","src/components/card/card-headline/card-headline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  pointer-events: none;\n}\n\n.card__headline-wrapper {\n  padding-bottom: 16px;\n\n  &.withDesc {\n    padding-bottom: 8px;\n  }\n}\n\n.card-headline {\n  margin-top: 0;\n  padding-top: 0;\n  font-family: var(--ifx-font-family);\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSize3xl;\n  line-height: tokens.$ifxLineHeight3xl;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  &.isHovered {\n    color: #0A8276;\n  }\n\n  &.horizontal {\n    font-size: tokens.$ifxFontSizeXl;\n    line-height: 28px;\n  }\n\n}","import { Component, h, Element, State, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-headline',\n  styleUrl: 'card-headline.scss',\n  shadow: true,\n})\n\nexport class CardHeadline {\n  @Element() el;\n  @State() direction: string;\n  @State() hasDesc: boolean;\n  @Prop() isHovered: boolean = false;\n\n  componentWillLoad() {\n    const cardElement = this.el.closest('ifx-card');\n\n    if (cardElement) {\n      const cardClass = cardElement.shadowRoot.querySelector('.card')?.className;\n\n      if (cardClass && cardClass.includes('horizontal')) {\n        this.direction = 'horizontal'\n      }\n\n      const desc = cardElement.querySelector('ifx-card-text');\n      if (desc) {\n        this.hasDesc = true;\n      }\n    }\n  }\n\n\n  render() {\n    return (\n      <div class={`card__headline-wrapper ${this.hasDesc ? 'withDesc' : \"\"}`}>\n        <div class={`card-headline ${this.direction} ${this.isHovered ? 'isHovered' : \"\"}`}>\n          <slot />\n        </div>\n      </div>\n    )\n  }\n}\n"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-card-image.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-card-image.cjs.entry.js
@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const cardImageCss = ".card-image{width:100%;height:100%;vertical-align:bottom;object-fit:cover}";
+
+const CardImage = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.imgPosition = index.createEvent(this, "imgPosition", 7);
+    this.src = undefined;
+    this.alt = undefined;
+    this.position = undefined;
+  }
+  handlePosition(position) {
+    this.imgPosition.emit(position);
+  }
+  componentWillLoad() {
+    this.handlePosition(this.position);
+  }
+  componentDidUpdate() {
+    this.handlePosition(this.position);
+  }
+  render() {
+    return (index.h("img", { src: this.src, alt: this.alt, class: "card-image" }));
+  }
+};
+CardImage.style = cardImageCss;
+
+exports.ifx_card_image = CardImage;
+
+//# sourceMappingURL=ifx-card-image.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-card-image.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-card-image.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-card-image.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,4EAA4E;;MCQpF,SAAS;;;;;;;;EAMpB,cAAc,CAAC,QAAQ;IACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;GAChC;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;GACnC;EAED,kBAAkB;IAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;GACnC;EAED,MAAM;IACJ,QACEA,iBAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,YAAY,GAAG,EACxD;GACH;;;;;;","names":["h"],"sources":["src/components/card/card-image/card-image.scss?tag=ifx-card-image&encapsulation=shadow","src/components/card/card-image/card-image.tsx"],"sourcesContent":[".card-image {\n  width: 100%;\n  height: 100%;\n  vertical-align: bottom;\n  object-fit: cover;\n}","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-image',\n  styleUrl: 'card-image.scss',\n  shadow: true,\n})\n\nexport class CardImage {\n  @Prop() src: string;\n  @Prop() alt: string;\n  @Prop() position: string;\n  @Event() imgPosition: EventEmitter;\n\n  handlePosition(position) {\n    this.imgPosition.emit(position)\n  }\n\n  componentWillLoad() {\n    this.handlePosition(this.position)\n  }\n\n  componentDidUpdate() {\n    this.handlePosition(this.position)\n  }\n\n  render() {\n    return (\n      <img src={this.src} alt={this.alt} class=\"card-image\" />\n    );\n  }\n}\n"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-card-links.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-card-links.cjs.entry.js
@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const cardLinksCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.container{display:flex;align-items:center;gap:20px;flex-wrap:wrap;text-decoration:none;color:#1D1D1D;padding:0px 24px 24px 24px;word-wrap:break-word;overflow-wrap:anywhere;}.container:hover{cursor:initial}";
+
+const CardLinks = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("div", { class: 'container' }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+CardLinks.style = cardLinksCss;
+
+exports.ifx_card_links = CardLinks;
+
+//# sourceMappingURL=ifx-card-links.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-card-links.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-card-links.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-card-links.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,ySAAyS;;MCQjT,SAAS;;;;EAGpB,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,WAAW,IACpBA,qBAAQ,CACJ,EACP;GACF;;;;;;;","names":["h"],"sources":["src/components/card/card-links/card-links.scss?tag=ifx-card-links&encapsulation=shadow","src/components/card/card-links/card-links.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.container {\n  display: flex;\n  align-items: center;\n  gap: tokens.$ifxSpace250;\n  flex-wrap: wrap;\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n  padding: 0px 24px 24px 24px;\n\n  /* wraps text at spaces and within words */\n  word-wrap: break-word;\n  /* breaks text within a word if necessary */\n  overflow-wrap: anywhere;\n  /* breaks text at arbitrary points when needed */\n\n  &:hover {\n    cursor: initial;\n  }\n}","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-links',\n  styleUrl: 'card-links.scss',\n  shadow: true,\n})\n\nexport class CardLinks {\n  @Element() el;\n\n  render() {\n    return (\n      <div class='container'>\n        <slot />\n      </div>\n    )\n  }\n}\n"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-card-overline.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-card-overline.cjs.entry.js
@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const cardOverlineCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{pointer-events:none}.card-overline{font-size:1rem;font-weight:400;color:#575352;padding-bottom:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-all}";
+
+const CardOverline = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("div", { class: "card-overline" }, index.h("slot", null)));
+  }
+};
+CardOverline.style = cardOverlineCss;
+
+exports.ifx_card_overline = CardOverline;
+
+//# sourceMappingURL=ifx-card-overline.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-card-overline.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-card-overline.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-card-overline.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,qUAAqU;;MCQhV,YAAY;;;;EAEvB,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,eAAe,IACxBA,qBAAQ,CACJ,EACN;GACH;;;;;;","names":["h"],"sources":["src/components/card/card-overline/card-overline.scss?tag=ifx-card-overline&encapsulation=shadow","src/components/card/card-overline/card-overline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  pointer-events: none;\n}\n\n.card-overline {\n  font-size: tokens.$ifxFontSizeM;\n  font-weight: tokens.$ifxFontWeightRegular;\n  color: tokens.$ifxColorEngineering500;\n  padding-bottom: 4px;\n\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  word-break: break-all;\n\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-overline',\n  styleUrl: 'card-overline.scss',\n  shadow: true,\n})\n\nexport class CardOverline {\n\n  render() {\n    return (\n      <div class=\"card-overline\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-card-text.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-card-text.cjs.entry.js
@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const cardTextCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{pointer-events:none}.card__text-wrapper{padding-bottom:0px}.card__text-wrapper.hasBtn{padding-bottom:16px}.card-text{line-height:1.5rem;font-size:1rem;font-weight:400;white-space:wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}";
+
+const CardText = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.hasBtn = undefined;
+  }
+  componentWillLoad() {
+    const link = this.el.closest('ifx-card').querySelector('ifx-link');
+    const button = this.el.closest('ifx-card').querySelector('ifx-button');
+    if (link || button) {
+      this.hasBtn = true;
+    }
+  }
+  render() {
+    return (index.h("div", { class: `card__text-wrapper ${this.hasBtn ? 'hasBtn' : ""}` }, index.h("div", { class: `card-text` }, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
+};
+CardText.style = cardTextCss;
+
+exports.ifx_card_text = CardText;
+
+//# sourceMappingURL=ifx-card-text.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-card-text.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-card-text.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-card-text.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,qYAAqY;;MCQ5Y,QAAQ;;;;;EAInB,iBAAiB;IACf,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnE,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IACvE,IAAG,IAAI,IAAI,MAAM,EAAE;MACjB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;GACF;EAED,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,EAAE,IAC7DA,iBAAK,KAAK,EAAE,WAAW,IACrBA,qBAAQ,CACJ,CACF,EACN;GACH;;;;;;;","names":["h"],"sources":["src/components/card/card-text/card-text.scss?tag=ifx-card-text&encapsulation=shadow","src/components/card/card-text/card-text.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  pointer-events: none;\n}\n\n.card__text-wrapper {\n  padding-bottom: 0px;\n\n  &.hasBtn {\n    padding-bottom: 16px;\n  }\n}\n\n.card-text {\n  line-height: tokens.$ifxLineHeightM;\n  font-size: tokens.$ifxFontSizeM;\n  font-weight: 400;\n  white-space: wrap;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}","import { Component, h, Element, State} from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-text',\n  styleUrl: './card-text.scss',\n  shadow: true,\n})\n\nexport class CardText {\n  @Element() el;\n  @State() hasBtn: boolean;\n\n  componentWillLoad() { \n    const link = this.el.closest('ifx-card').querySelector('ifx-link');\n    const button = this.el.closest('ifx-card').querySelector('ifx-button');\n    if(link || button) { \n      this.hasBtn = true;\n    }\n  }\n\n  render() {\n    return (\n      <div class={`card__text-wrapper ${this.hasBtn ? 'hasBtn' : \"\"}`}>\n        <div class={`card-text`}>\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-card.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-card.cjs.entry.js
@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const cardCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:1px solid #EEEDED;border-radius:1px;width:350px;height:auto;font-family:var(--ifx-font-family)}.card.linkHovered{border-color:#EEEDED}.card.cardHovered{border-color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card:focus,.card:focus-visible,.focus{outline:none;border-color:#0A8276 !important}";
+
+const Card = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.noBtns = undefined;
+    this.direction = 'vertical';
+    this.alignment = undefined;
+    this.noImg = undefined;
+    this.href = "";
+    this.internalHref = "";
+    this.target = "_self";
+  }
+  setImgPosition(event) {
+    this.alignment = event.detail;
+  }
+  handleComponentAdjustment() {
+    const image = this.el.querySelector('ifx-card-image');
+    const links = this.el.querySelector('ifx-card-links');
+    if (!image) {
+      this.noImg = true;
+    }
+    else
+      this.noImg = false;
+    if (!links) {
+      this.noBtns = true;
+    }
+    else
+      this.noBtns = false;
+    if (this.href.trim() === "") {
+      this.internalHref = undefined;
+    }
+    else
+      this.internalHref = this.href;
+  }
+  handleClassList(el, type, className) {
+    el.classList[type](className);
+  }
+  handleHovering() {
+    const card = this.el.shadowRoot.querySelector('.card');
+    let cardHeadline = this.el.querySelector('ifx-card-headline');
+    if (this.href) {
+      card.addEventListener('mouseover', (ev) => {
+        // const target = ev.target;
+        // const relatedTarget = ev.relatedTarget;
+        // if (relatedTarget && relatedTarget !== target && !target.contains(relatedTarget)) {
+        //   this.handleClassList(card, 'add', 'borderHovered')
+        // }
+        if (ev.target.nodeName === 'IFX-CARD-LINKS' || ev.target.nodeName === 'IFX-BUTTON') {
+          this.handleClassList(card, 'add', 'linkHovered');
+        }
+        else {
+          this.handleClassList(card, 'add', 'cardHovered');
+          if (cardHeadline) {
+            cardHeadline.isHovered = true;
+          }
+        }
+      });
+      card.addEventListener('mouseout', () => {
+        if (cardHeadline) {
+          cardHeadline.isHovered = false;
+        }
+        //this.handleClassList(card, 'remove', 'borderHovered')
+        this.handleClassList(card, 'remove', 'cardHovered');
+        this.handleClassList(card, 'add', 'linkHovered');
+      });
+    }
+  }
+  componentWillLoad() {
+    this.handleComponentAdjustment();
+  }
+  componentDidLoad() {
+    this.handleHovering();
+    this.addEventListenersToHandleCustomFocusState();
+  }
+  addEventListenersToHandleCustomFocusState() {
+    const element = this.el.shadowRoot;
+    if (!element) {
+      console.error('element not found');
+      return;
+    }
+    const upperBodyWrapper = element.querySelector('.upper__body-wrapper');
+    if (!upperBodyWrapper) {
+      console.error('upper body wrapper not found');
+      return;
+    }
+    element.tabIndex = -1;
+    upperBodyWrapper.tabIndex = -1;
+  }
+  componentWillUpdate() {
+    this.handleComponentAdjustment();
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { "aria-labelledby": "label", class: `card 
+          ${this.noBtns ? 'noBtns' : ""}
+          ${this.direction} 
+          ${this.alignment}` }, this.direction === 'horizontal' &&
+      index.h("div", { class: "horizontal" }, index.h("a", { class: `card-img ${this.noImg ? 'noImage' : ""}`, href: this.internalHref }, index.h("slot", { name: "img" })), index.h("div", { class: 'lower__body-wrapper' }, index.h("a", { class: 'upper-body', href: this.internalHref }, index.h("slot", null)), index.h("div", null, index.h("slot", { name: 'buttons' })))), this.direction === 'vertical' &&
+      index.h("div", { class: "vertical" }, index.h("a", { class: 'upper__body-wrapper', href: this.internalHref, target: this.target }, index.h("div", { class: `card-img ${this.noImg ? 'noImage' : ""}` }, index.h("slot", { name: "img" })), index.h("div", { class: 'upper-body' }, index.h("slot", null))), index.h("div", { class: 'lower__body-wrapper' }, index.h("slot", { name: 'buttons' }))))));
+  }
+  get el() { return index.getElement(this); }
+};
+Card.style = cardCss;
+
+exports.ifx_card = Card;
+
+//# sourceMappingURL=ifx-card.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-card.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-card.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-checkbox.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-checkbox.cjs.entry.js
@ -0,0 +1,100 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const checkboxCss = ":host{display:inline-flex;vertical-align:top}.checkbox__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;font-family:var(--ifx-font-family)}.checkbox__container .checkbox__wrapper{display:flex;position:relative;justify-content:center;align-items:center;width:20px;height:20px;background-color:#FFFFFF;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checkbox-m{height:24px;width:24px}.checkbox__container .checkbox__wrapper.error{border-color:#CD002F}.checkbox__container .checkbox__wrapper:focus-visible{border:1px solid #575352;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper:hover{background-color:#EEEDED;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked{background-color:#0A8276;border-radius:1px;border-color:transparent;flex:none;order:0;flex-grow:0;color:#FFFFFF}.checkbox__container .checkbox__wrapper.checked.error{background-color:#CD002F}.checkbox__container .checkbox__wrapper.checked:focus-visible{border:1px solid transparent;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper.checked:hover{background-color:#08665C;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked.disabled{background:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.indeterminate:before{content:\"\";display:block;width:70%;height:2px;background-color:#08665C;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox__container .label{height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.checkbox__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.checkbox__container .label.disabled{color:#BFBBBB}.checkbox__container .checkbox__wrapper:hover,.checkbox__container .label:hover{cursor:pointer}";
+
+const Checkbox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ifxChange = index.createEvent(this, "ifxChange", 7);
+    this.disabled = false;
+    this.value = false;
+    this.error = false;
+    this.name = '';
+    this.size = 'm';
+    this.internalValue = undefined;
+    this.indeterminate = false;
+    this.internalIndeterminate = undefined;
+  }
+  handleCheckbox() {
+    if (!this.disabled) {
+      if (this.inputElement.indeterminate) {
+        this.internalValue = true;
+        this.internalIndeterminate = false;
+      }
+      else {
+        this.internalValue = !this.internalValue;
+      }
+      this.ifxChange.emit(this.internalValue);
+    }
+  }
+  valueChanged(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this.internalValue = newValue;
+      this.inputElement.checked = this.internalValue; // update the checkbox's checked property
+    }
+  }
+  indeterminateChanged(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this.internalIndeterminate = newValue;
+      this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property
+    }
+  }
+  handleKeydown(event) {
+    // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key
+    if (event.keyCode === 32 || event.keyCode === 13) {
+      this.handleCheckbox();
+      event.preventDefault(); // prevent the default action when space or enter is pressed
+    }
+  }
+  componentWillLoad() {
+    this.internalValue = this.value;
+    this.internalIndeterminate = this.indeterminate;
+  }
+  componentDidRender() {
+    this.inputElement.indeterminate = this.internalIndeterminate;
+  }
+  getCheckedClassName() {
+    if (this.error) {
+      if (this.internalValue) {
+        return "checked error";
+      }
+      else {
+        return "error";
+      }
+    }
+    else if (this.internalValue) {
+      return "checked";
+    }
+    else
+      return "";
+  }
+  render() {
+    const slot = this.el.innerHTML;
+    let hasSlot = false;
+    if (slot) {
+      hasSlot = true;
+    }
+    return (index.h("div", { class: "checkbox__container" }, index.h("input", { type: "checkbox", hidden: true, ref: (el) => (this.inputElement = el), name: this.name, checked: this.internalValue, onChange: this.handleCheckbox.bind(this), id: 'checkbox', value: `${this.internalValue}` }), index.h("div", { tabindex: "0", onClick: this.handleCheckbox.bind(this), onKeyDown: this.handleKeydown.bind(this), role: "checkbox" // role attribute
+      ,
+      "aria-value": this.internalValue, "aria-disabled": this.disabled, "aria-labelledby": "label", class: `checkbox__wrapper 
+          ${this.getCheckedClassName()}
+        ${this.size === "m" ? "checkbox-m" : ""}
+        ${this.indeterminate ? 'indeterminate' : ""}
+        ${this.disabled ? 'disabled' : ""}` }, this.internalValue && index.h("ifx-icon", { icon: "check-12" })), hasSlot &&
+      index.h("div", { id: "label", class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ""} `, onClick: this.handleCheckbox.bind(this) }, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["valueChanged"],
+    "indeterminate": ["indeterminateChanged"]
+  }; }
+};
+Checkbox.style = checkboxCss;
+
+exports.ifx_checkbox = Checkbox;
+
+//# sourceMappingURL=ifx-checkbox.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-checkbox.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-checkbox.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-chip.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-chip.cjs.entry.js
@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const chipCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block}.container{position:relative;font-family:var(--ifx-font-family)}.container .wrapper{display:inline-flex;flex-direction:row;align-items:center;padding:8px 16px;gap:8px;background:#FFFFFF;border:1px solid #BFBBBB;border-radius:100px}.container .wrapper:hover{cursor:pointer;border:1px solid #575352}.container .wrapper:active{border:1px solid #0A8276}.container .wrapper .wrapper-label{font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;display:flex;align-items:center;color:#1D1D1D;flex:none;order:0;flex-grow:0}.container .wrapper .wrapper-close-button ifx-icon{transition:0.3s;width:12px;height:12px}.container .wrapper .wrapper-close-button.show ifx-icon{transition:0.3s;transform:rotate(-180deg)}";
+
+const Chip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ifxDropdownMenu = index.createEvent(this, "ifxDropdownMenu", 7);
+    this.placeholder = undefined;
+    this.selectedValue = "";
+  }
+  handleOutsideClick(event) {
+    const path = event.composedPath();
+    if (!path.includes(this.el)) {
+      this.closedMenu();
+    }
+  }
+  handleDropdownItemValueEmission(event) {
+    this.selectedValue = event.detail;
+    this.ifxDropdownMenu.emit(event.detail);
+    this.toggleMenu();
+  }
+  getDropdownMenu() {
+    let dropdownMenuComponent = this.el.querySelector('ifx-dropdown-menu');
+    return dropdownMenuComponent;
+  }
+  closedMenu() {
+    let dropdownMenuComponent = this.getDropdownMenu();
+    dropdownMenuComponent.isOpen = false;
+  }
+  toggleMenu() {
+    let dropdownMenuComponent = this.getDropdownMenu();
+    dropdownMenuComponent.isOpen = !dropdownMenuComponent.isOpen;
+    this.toggleCloseIcon();
+  }
+  toggleCloseIcon() {
+    const closeIconWrapper = this.el.shadowRoot.querySelector('.wrapper-close-button');
+    closeIconWrapper.classList.toggle('show');
+  }
+  render() {
+    return (index.h("div", { "aria-value": this.selectedValue, "aria-label": 'chip with a dropdown menu', class: "dropdown container" }, index.h("div", { class: "wrapper", onClick: () => this.toggleMenu() }, index.h("div", { class: "wrapper-label" }, this.selectedValue ? this.selectedValue : this.placeholder), index.h("div", { class: "wrapper-close-button" }, index.h("ifx-icon", { icon: "chevrondown12" }))), index.h("slot", { name: "menu" })));
+  }
+  get el() { return index.getElement(this); }
+};
+Chip.style = chipCss;
+
+exports.ifx_chip = Chip;
+
+//# sourceMappingURL=ifx-chip.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-chip.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-chip.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-chip.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,u0BAAu0B;;MCQ10B,IAAI;;;;;yBAGkB,EAAE;;EAInC,kBAAkB,CAAC,KAAiB;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;MAC3B,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;GACF;EAGD,+BAA+B,CAAC,KAAkB;IAChD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC;IAClC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACxC,IAAI,CAAC,UAAU,EAAE,CAAA;GAClB;EAED,eAAe;IACb,IAAI,qBAAqB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IACvE,OAAO,qBAAqB,CAAA;GAC7B;EAED,UAAU;IACR,IAAI,qBAAqB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;IAClD,qBAAqB,CAAC,MAAM,GAAG,KAAK,CAAC;GACtC;EAED,UAAU;IACR,IAAI,qBAAqB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;IAClD,qBAAqB,CAAC,MAAM,GAAG,CAAC,qBAAqB,CAAC,MAAM,CAAC;IAC7D,IAAI,CAAC,eAAe,EAAE,CAAA;GACvB;EAED,eAAe;IACb,MAAM,gBAAgB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAA;IAClF,gBAAgB,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;GAC1C;EAED,MAAM;IACJ,QACEA,+BAAiB,IAAI,CAAC,aAAa,gBAAa,2BAA2B,EAAC,KAAK,EAAC,oBAAoB,IACpGA,iBAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IACnDA,iBAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,WAAW,CACvD,EACNA,iBAAK,KAAK,EAAC,sBAAsB,IAC/BA,sBAAU,IAAI,EAAC,eAAe,GAAY,CACtC,CACF,EACNA,kBAAM,IAAI,EAAC,MAAM,GAAG,CAChB,EACN;GACH;;;;;;;","names":["h"],"sources":["src/components/chips/chip.scss?tag=ifx-chip&encapsulation=shadow","src/components/chips/chip.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-block;\n}\n\n.container {\n  //display: inline-block;\n  position: relative;\n  font-family: var(--ifx-font-family);\n\n  & .wrapper {\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 8px 16px;\n    gap: tokens.$ifxSpace100;\n\n    background: tokens.$ifxColorBaseWhite;\n\n    border: 1px solid #BFBBBB;\n    border-radius: 100px;\n\n    &:hover {\n      cursor: pointer;\n      border: 1px solid #575352;\n    }\n\n    &:active {\n      border: 1px solid #0A8276;\n    }\n\n    & .wrapper-label {\n      font-style: normal;\n      font-weight: 400;\n      font-size: tokens.$ifxFontSizeS;\n      line-height: tokens.$ifxLineHeightS;\n      display: flex;\n      align-items: center;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n    }\n\n    & .wrapper-close-button {\n      & ifx-icon {\n        transition: .3s;\n        width: 12px;\n        height: 12px;\n      }\n\n      &.show {\n        & ifx-icon {\n          transition: .3s;\n          transform: rotate(-180deg);\n        }\n      }\n    }\n  }\n}","import { Component, h, Element, Prop, Listen, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-chip',\n  styleUrl: 'chip.scss',\n  shadow: true\n})\n\nexport class Chip {\n  @Element() el;\n  @Prop() placeholder: string;\n  @State() selectedValue: string = \"\";\n  @Event() ifxDropdownMenu: EventEmitter<CustomEvent>;\n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.el)) {\n      this.closedMenu();\n    }\n  }\n\n  @Listen('ifxDropdownItem')\n  handleDropdownItemValueEmission(event: CustomEvent) {\n    this.selectedValue = event.detail;\n    this.ifxDropdownMenu.emit(event.detail);\n    this.toggleMenu()\n  }\n\n  getDropdownMenu() { \n    let dropdownMenuComponent = this.el.querySelector('ifx-dropdown-menu');\n    return dropdownMenuComponent\n  }\n\n  closedMenu() {\n    let dropdownMenuComponent = this.getDropdownMenu()\n    dropdownMenuComponent.isOpen = false;\n  }\n\n  toggleMenu() { \n    let dropdownMenuComponent = this.getDropdownMenu()\n    dropdownMenuComponent.isOpen = !dropdownMenuComponent.isOpen;\n    this.toggleCloseIcon()\n  }\n\n  toggleCloseIcon() { \n    const closeIconWrapper = this.el.shadowRoot.querySelector('.wrapper-close-button')\n    closeIconWrapper.classList.toggle('show')\n  }\n\n  render() {\n    return (\n      <div aria-value={this.selectedValue} aria-label='chip with a dropdown menu' class=\"dropdown container\">\n        <div class=\"wrapper\" onClick={() => this.toggleMenu()}>\n          <div class=\"wrapper-label\">\n            {this.selectedValue ? this.selectedValue : this.placeholder}\n          </div>\n          <div class=\"wrapper-close-button\">\n            <ifx-icon icon=\"chevrondown12\"></ifx-icon>\n          </div>\n        </div>\n        <slot name=\"menu\" />\n      </div>\n    );\n  }\n}"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-dropdown-header.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-dropdown-header.cjs.entry.js
@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const dropdownHeaderCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.dropdown-header{display:flex;padding:8px 16px;align-items:center;gap:8px;align-self:stretch;border-bottom:1px solid #EEEDED;font-family:var(--ifx-font-family)}.dropdown-header span{color:#575352;font-family:var(--ifx-font-family);font-size:14px;font-style:normal;font-weight:400;line-height:20px;}";
+
+const DropdownHeader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("div", { class: 'dropdown-header' }, index.h("span", null, index.h("slot", null))));
+  }
+};
+DropdownHeader.style = dropdownHeaderCss;
+
+exports.ifx_dropdown_header = DropdownHeader;
+
+//# sourceMappingURL=ifx-dropdown-header.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-dropdown-header.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-dropdown-header.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-dropdown-header.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,qYAAqY;;MCSlZ,cAAc;;;;EACzB,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,sBACEA,qBAAQ,CACH,CACH,EACP;GACF;;;;;;","names":["h"],"sources":["src/components/dropdown/dropdown-header/dropdown-header.scss?tag=ifx-dropdown-header&encapsulation=shadow","src/components/dropdown/dropdown-header/dropdown-header.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.dropdown-header {\n  display: flex;\n  padding: 8px 16px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n  font-family: var(--ifx-font-family);\n\n\n  & span {\n    color: tokens.$ifxColorEngineering500;\n    font-family: var(--ifx-font-family);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    /* 142.857% */\n  }\n}","// dropdown-separator.tsx\nimport { Component, h } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-header',\n  styleUrl: 'dropdown-header.scss',\n  shadow: true\n})\n\nexport class DropdownHeader {\n  render() {\n    return (\n      <div class='dropdown-header'>\n        <span>\n          <slot />\n        </span>\n      </div>\n    )\n  }\n}"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-dropdown-item.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-dropdown-item.cjs.entry.js
@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const dropdownItemCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.dropdown-item{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.dropdown-item.hide{display:none}.dropdown-item span{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px;}.dropdown-item.small span{font-size:14px}.dropdown-item:hover{cursor:pointer;background-color:#EEEDED}.dropdown-item:active{background-color:#BFBBBB}.icon{margin-right:4px}";
+
+const DropdownItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ifxDropdownItem = index.createEvent(this, "ifxDropdownItem", 7);
+    this.icon = undefined;
+    this.href = "";
+    this.target = "_self";
+    this.hide = false;
+    this.size = 'l';
+  }
+  handleMenuSize(event) {
+    this.size = event.detail;
+  }
+  handleEventEmission() {
+    this.ifxDropdownItem.emit(this.el.textContent);
+  }
+  render() {
+    let hrefAttr = this.href ? { href: this.href, target: this.target } : {};
+    return (index.h("a", Object.assign({}, hrefAttr, { onClick: () => this.handleEventEmission(), class: `dropdown-item ${this.size === 's' ? 'small' : ""} ${this.hide ? 'hide' : ""}` }), this.icon && index.h("ifx-icon", { class: "icon", icon: this.icon }), index.h("span", null, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
+};
+DropdownItem.style = dropdownItemCss;
+
+exports.ifx_dropdown_item = DropdownItem;
+
+//# sourceMappingURL=ifx-dropdown-item.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-dropdown-item.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-dropdown-item.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-dropdown-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,2hBAA2hB;;MCStiB,YAAY;;;;;gBAEA,EAAE;kBACA,OAAO;gBACR,KAAK;gBACL,GAAG;;EAK3B,cAAc,CAAC,KAAkB;IAC/B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;GAC1B;EAED,mBAAmB;IACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;GAC/C;EAED,MAAM;IACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC;IACzE,QACEA,+BAAO,QAAQ,IAAE,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE,EAAE,KAAK,EAAE,iBAAiB,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,IAAI,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,EAAE,KAC9I,IAAI,CAAC,IAAI,IAAIA,sBAAU,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,EACjEA,sBACEA,qBAAQ,CACH,CACL,EACJ;GACH;;;;;;;","names":["h"],"sources":["src/components/dropdown/dropdown-item/dropdown-item.scss?tag=ifx-dropdown-item&encapsulation=shadow","src/components/dropdown/dropdown-item/dropdown-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.dropdown-item {\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n  display: flex;\n  align-items: center;\n  padding: 8px 16px;\n  gap: tokens.$ifxSize100;\n  font-family: var(--ifx-font-family);\n\n  &.hide {\n    display: none;\n  }\n\n  & span {\n    color: tokens.$ifxColorBaseBlack;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n    /* 150% */\n  }\n\n  &.small {\n    & span {\n      font-size: 14px;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &:active {\n    background-color: tokens.$ifxColorEngineering300;\n  }\n}\n\n.icon {\n  margin-right: 4px;\n}","// dropdown-item.tsx\nimport { Component, Prop, h, Listen, State, Event, EventEmitter, Element } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  shadow: true\n})\n\nexport class DropdownItem {\n  @Prop() icon: string;\n  @Prop() href: string = \"\"\n  @Prop() target: string = \"_self\"\n  @Prop() hide: boolean = false;\n  @State() size: string = 'l'\n  @Event() ifxDropdownItem: EventEmitter;\n  @Element() el;\n\n  @Listen('menuSize', { target: 'body' })\n  handleMenuSize(event: CustomEvent) {\n    this.size = event.detail;\n  }\n\n  handleEventEmission() {\n    this.ifxDropdownItem.emit(this.el.textContent)\n  }\n\n  render() {\n    let hrefAttr = this.href ? { href: this.href, target: this.target } : {};\n    return (\n      <a {...hrefAttr} onClick={() => this.handleEventEmission()} class={`dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`}>\n        {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\n        <span>\n          <slot />\n        </span>\n      </a>\n    );\n  }\n}"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-dropdown-menu.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-dropdown-menu.cjs.entry.js
@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const dropdownMenuCss = ":host{position:relative;z-index:1000}.dropdown-menu{display:none;visibility:hidden;flex-direction:column;width:224px;max-height:289px;min-width:224px;overflow-y:auto;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 0px;font-family:var(--ifx-font-family)}.dropdown-menu.small{max-height:266px;max-width:186px;overflow-y:auto}.dropdown-menu.hideTopPadding{padding-top:0px}.dropdown-menu.show{display:flex;visibility:visible}";
+
+const DropdownMenu = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.menuSize = index.createEvent(this, "menuSize", 7);
+    this.ifxDropdownMenuItem = index.createEvent(this, "ifxDropdownMenuItem", 7);
+    this.isOpen = false;
+    this.size = 'l';
+    this.hideTopPadding = false;
+    this.filteredItems = [];
+  }
+  handleMenuFilter(event) {
+    const searchValue = event.detail;
+    this.filterDropdownItems(searchValue);
+  }
+  handleDropdownItemValueEmission(event) {
+    this.ifxDropdownMenuItem.emit(event.detail);
+  }
+  filterDropdownItems(searchValue) {
+    const allItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));
+    let dropdownItem, txtValue;
+    let query = searchValue.toUpperCase();
+    for (let i = 0; i < allItems.length; i++) {
+      dropdownItem = allItems[i];
+      txtValue = dropdownItem.textContent || dropdownItem.innerText;
+      if (txtValue.toUpperCase().indexOf(query) > -1) {
+        dropdownItem.setAttribute('hide', false);
+      }
+      else {
+        dropdownItem.setAttribute('hide', true);
+      }
+    }
+  }
+  componentWillUpdate() {
+    this.menuSize.emit(this.size);
+  }
+  componentWillLoad() {
+    this.filteredItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));
+    const searchField = this.el.querySelector('ifx-search-field');
+    const dropdownHeader = this.el.querySelector('ifx-dropdown-header');
+    if (searchField || dropdownHeader) {
+      this.hideTopPadding = true;
+    }
+    else
+      this.hideTopPadding = false;
+  }
+  render() {
+    return (index.h("div", { class: `dropdown-menu 
+      ${this.isOpen ? 'show' : ''} 
+      ${this.hideTopPadding ? 'hideTopPadding' : ""}
+      ${this.size === 's' ? 'small' : ""}` }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+DropdownMenu.style = dropdownMenuCss;
+
+exports.ifx_dropdown_menu = DropdownMenu;
+
+//# sourceMappingURL=ifx-dropdown-menu.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-dropdown-menu.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-dropdown-menu.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-dropdown-menu.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,yeAAye;;MCSpf,YAAY;;;;;kBACG,KAAK;gBACR,GAAG;0BACS,KAAK;yBAIe,EAAE;;EAIzD,gBAAgB,CAAC,KAAkB;IACjC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAA;GACtC;EAGD,+BAA+B,CAAC,KAAkB;IAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;GAC5C;EAED,mBAAmB,CAAC,WAAmB;IACrC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAC3E,IAAI,YAAY,EAAE,QAAQ,CAAC;IAC3B,IAAI,KAAK,GAAG,WAAW,CAAC,WAAW,EAAE,CAAA;IAErC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MACxC,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;MAC3B,QAAQ,GAAG,YAAY,CAAC,WAAW,IAAI,YAAY,CAAC,SAAS,CAAC;MAE9D,IAAI,QAAQ,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE;QAC9C,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;OACzC;WAAM;QACL,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;OACxC;KACF;GACF;EAED,mBAAmB;IACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC9B;EAED,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAiC,CAAC;IAC/G,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAA;IAC7D,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAA;IAEnE,IAAI,WAAW,IAAI,cAAc,EAAE;MACjC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;;MAAM,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;GACpC;EAGD,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAE;QACV,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE;QACzB,IAAI,CAAC,cAAc,GAAG,gBAAgB,GAAG,EAAE;QAC3C,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,EAAE,EAAE,IAElCA,qBAAQ,CACH,EACP;GACH;;;;;;;","names":["h"],"sources":["src/components/dropdown/dropdown-menu/dropdown-menu.scss?tag=ifx-dropdown-menu&encapsulation=shadow","src/components/dropdown/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  position: relative;\n  z-index: 1000;\n}\n\n.dropdown-menu {\n  display: none;\n  visibility: hidden;\n  flex-direction: column;\n  width: 224px;\n  max-height: 289px;\n  min-width: 224px;\n  overflow-y: auto;\n  background: tokens.$ifxColorBaseWhite;\n  box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  padding: 8px 0px;\n  font-family: var(--ifx-font-family);\n\n  &.small {\n    max-height: 266px;\n    max-width: 186px;\n    overflow-y: auto;\n  }\n\n  &.hideTopPadding {\n    padding-top: 0px;\n  }\n}\n\n.dropdown-menu.show {\n  display: flex;\n  visibility: visible;\n}","// dropdown-menu.tsx\nimport { Component, h, Prop, Element, State, Event, EventEmitter, Listen } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-menu',\n  styleUrl: 'dropdown-menu.scss',\n  shadow: true\n})\n\nexport class DropdownMenu {\n  @Prop() isOpen: boolean = false;\n  @Prop() size: string = 'l'\n  @State() hideTopPadding: boolean = false;\n  @Element() el;\n\n  @Event() menuSize: EventEmitter;\n  @State() filteredItems: HTMLIfxDropdownItemElement[] = [];\n  @Event() ifxDropdownMenuItem: EventEmitter<CustomEvent>;\n\n  @Listen('ifxInput')\n  handleMenuFilter(event: CustomEvent) {\n    const searchValue = event.detail;\n    this.filterDropdownItems(searchValue)\n  }\n\n  @Listen('ifxDropdownItem')\n  handleDropdownItemValueEmission(event: CustomEvent) {\n    this.ifxDropdownMenuItem.emit(event.detail)\n  }\n\n  filterDropdownItems(searchValue: string) {\n    const allItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));\n    let dropdownItem, txtValue;\n    let query = searchValue.toUpperCase()\n\n    for (let i = 0; i < allItems.length; i++) {\n      dropdownItem = allItems[i];\n      txtValue = dropdownItem.textContent || dropdownItem.innerText;\n\n      if (txtValue.toUpperCase().indexOf(query) > -1) {\n        dropdownItem.setAttribute('hide', false)\n      } else {\n        dropdownItem.setAttribute('hide', true)\n      }\n    }\n  }\n\n  componentWillUpdate() {\n    this.menuSize.emit(this.size)\n  }\n\n  componentWillLoad() {\n    this.filteredItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item')) as HTMLIfxDropdownItemElement[];\n    const searchField = this.el.querySelector('ifx-search-field')\n    const dropdownHeader = this.el.querySelector('ifx-dropdown-header')\n\n    if (searchField || dropdownHeader) {\n      this.hideTopPadding = true;\n    } else this.hideTopPadding = false;\n  }\n\n\n  render() {\n    return (\n      <div class={`dropdown-menu \n      ${this.isOpen ? 'show' : ''} \n      ${this.hideTopPadding ? 'hideTopPadding' : \"\"}\n      ${this.size === 's' ? 'small' : \"\"}`\n      } >\n        <slot />\n      </div >\n    );\n  }\n}"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-dropdown-separator.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-dropdown-separator.cjs.entry.js
@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const dropdownSeparatorCss = ".dropdown-separator{height:1px;background-color:#EEEDED;margin:8px 16px}";
+
+const DropdownSeparator = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("div", { class: 'dropdown-separator' }));
+  }
+};
+DropdownSeparator.style = dropdownSeparatorCss;
+
+exports.ifx_dropdown_separator = DropdownSeparator;
+
+//# sourceMappingURL=ifx-dropdown-separator.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-dropdown-separator.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-dropdown-separator.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-dropdown-separator.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,oBAAoB,GAAG,0EAA0E;;MCS1F,iBAAiB;;;;EAC5B,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,oBAAoB,GAAO,EACvC;GACF;;;;;;","names":["h"],"sources":["src/components/dropdown/dropdown-seperator/dropdown-separator.scss?tag=ifx-dropdown-separator&encapsulation=shadow","src/components/dropdown/dropdown-seperator/dropdown-separator.tsx"],"sourcesContent":["// dropdown-separator.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.dropdown-separator {\n  height: 1px;\n  background-color: tokens.$ifxColorEngineering200;\n  margin: 8px 16px;\n}","// dropdown-separator.tsx\nimport { Component, h } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-separator',\n  styleUrl: 'dropdown-separator.scss',\n  shadow: true\n})\n\nexport class DropdownSeparator {\n  render() {\n    return (\n      <div class='dropdown-separator'></div>\n    )\n  }\n}"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-dropdown-trigger-button.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-dropdown-trigger-button.cjs.entry.js
@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const dropdownTriggerButtonCss = ":host{display:inline-block}.rotate{transition:transform 0.2s ease-in-out;transform:rotate(-180deg);margin-top:0em}.icon{margin-top:0em;transition:transform 0.2s ease-in-out}";
+
+const DropdownItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.isOpen = false;
+    this.theme = 'default';
+    this.variant = undefined;
+    this.size = 'm';
+    this.disabled = undefined;
+    this.hideArrow = false;
+  }
+  render() {
+    return (index.h("ifx-button", { variant: this.variant, theme: this.theme, size: this.size, disabled: this.disabled, class: "dropdown-trigger-button" }, index.h("slot", null), !this.hideArrow &&
+      index.h("ifx-icon", { icon: "chevron-down-12", class: `icon${this.isOpen ? ' rotate' : ''}` })));
+  }
+};
+DropdownItem.style = dropdownTriggerButtonCss;
+
+exports.ifx_dropdown_trigger_button = DropdownItem;
+
+//# sourceMappingURL=ifx-dropdown-trigger-button.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-dropdown-trigger-button.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-dropdown-trigger-button.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-dropdown-trigger-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,wBAAwB,GAAG,+KAA+K;;MCUnM,YAAY;;;kBACG,KAAK;iBAEmB,SAAS;;gBAEjC,GAAG;;qBAEA,KAAK;;EAElC,MAAM;IACJ,QACEA,wBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,yBAAyB,IAE/BA,qBAAQ,EACP,CAAC,IAAI,CAAC,SAAS;MACdA,sBAAU,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,EAAE,EAAE,GAAI,CAExE,EACd;GACF;;;;;;","names":["h"],"sources":["src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.scss?tag=ifx-dropdown-trigger-button&encapsulation=shadow","src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-block;\n}\n\n.rotate {\n  transition: transform 0.2s ease-in-out;\n  transform: rotate(-180deg);\n  margin-top: 0em;\n}\n\n.icon {\n  margin-top: 0em;\n  transition: transform 0.2s ease-in-out;\n}\n","// dropdown-trigger-button.tsx\nimport { Component, Prop, h } from \"@stencil/core\";\nimport { IOpenable } from '../IOpenable';\n\n@Component({\n  tag: 'ifx-dropdown-trigger-button',\n  styleUrl: 'dropdown-trigger-button.scss',\n  shadow: true\n})\n\nexport class DropdownItem implements IOpenable {\n  @Prop() isOpen: boolean = false;\n\n  @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';\n  @Prop() variant: 'primary';\n  @Prop() size: 's' | 'm' = 'm';\n  @Prop() disabled: boolean;\n  @Prop() hideArrow: boolean = false;\n\n  render() {\n    return (\n      <ifx-button\n        variant={this.variant}\n        theme={this.theme}\n        size={this.size}\n        disabled={this.disabled}\n        class=\"dropdown-trigger-button\"\n      >\n        <slot />\n        {!this.hideArrow &&\n          <ifx-icon icon=\"chevron-down-12\" class={`icon${this.isOpen ? ' rotate' : ''}`} />\n        }\n      </ifx-button>\n    )\n  }\n}"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-dropdown-trigger.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-dropdown-trigger.cjs.entry.js
@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const dropdownTriggerCss = ":host{display:inline-block;cursor:pointer}";
+
+const DropdownItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.isOpen = false;
+  }
+  render() {
+    return (index.h("slot", null));
+  }
+};
+DropdownItem.style = dropdownTriggerCss;
+
+exports.ifx_dropdown_trigger = DropdownItem;
+
+//# sourceMappingURL=ifx-dropdown-trigger.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-dropdown-trigger.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-dropdown-trigger.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-dropdown-trigger.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,4CAA4C;;MCU1D,YAAY;;;kBACG,KAAK;;EAE/B,MAAM;IACJ,QACEA,qBAAQ,EACT;GACF;;;;;;","names":["h"],"sources":["src/components/dropdown/dropdown-trigger/dropdown-trigger.scss?tag=ifx-dropdown-trigger&encapsulation=shadow","src/components/dropdown/dropdown-trigger/dropdown-trigger.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-block;\n  cursor: pointer;\n}","// dropdown-trigger-button.tsx\nimport { Component, Prop, h } from \"@stencil/core\";\nimport { IOpenable } from '../IOpenable';\n\n@Component({\n  tag: 'ifx-dropdown-trigger',\n  styleUrl: 'dropdown-trigger.scss',\n  shadow: true\n})\n\nexport class DropdownItem implements IOpenable {\n  @Prop() isOpen: boolean = false;\n\n  render() {\n    return (\n      <slot />\n    )\n  }\n}"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-dropdown.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-dropdown.cjs.entry.js
@ -0,0 +1,153 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+const popper = require('./popper-9a6aec9e.js');
+
+const dropdownCss = ":host{display:inline-block}";
+
+const Dropdown = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ifxOpen = index.createEvent(this, "ifxOpen", 7);
+    this.ifxClose = index.createEvent(this, "ifxClose", 7);
+    this.ifxDropdown = index.createEvent(this, "ifxDropdown", 7);
+    this.placement = 'bottom-start';
+    this.defaultOpen = false;
+    this.internalIsOpen = false;
+    this.noAppendToBody = false;
+    this.disabled = undefined;
+    this.noCloseOnOutsideClick = false;
+    this.noCloseOnMenuClick = false;
+    this.trigger = undefined;
+    this.menu = undefined;
+  }
+  componentWillLoad() {
+    //maybe not needed
+    this.updateSlotContent();
+    this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);
+  }
+  watchHandlerIsOpen(newValue, oldValue) {
+    if (newValue !== oldValue && newValue !== this.internalIsOpen) {
+      if (newValue) {
+        this.openDropdown();
+      }
+      else {
+        this.closeDropdown();
+      }
+    }
+  }
+  watchHandlerDisabled(newValue) {
+    if (this.trigger) {
+      this.trigger.disabled = newValue;
+    }
+  }
+  watchHandlerSlot() {
+    this.updateSlotContent();
+  }
+  // handling assignment of trigger and menu
+  updateSlotContent() {
+    // Get dropdown trigger. name has to start with ifx-dropdown-trigger
+    this.trigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger');
+    if (this.trigger) {
+      this.trigger.disabled = this.disabled;
+      this.trigger.removeEventListener('click', this.triggerClickHandler.bind(this));
+      this.trigger.addEventListener('click', this.triggerClickHandler.bind(this));
+    }
+    // Remove menu if exists from body
+    if (!this.noAppendToBody) {
+      if (this.menu) {
+        this.menu.remove();
+      }
+      // Get new menu and add to body
+      this.menu = this.el.querySelector('ifx-dropdown-menu');
+      // event handler for closing dropdown on menu click
+      document.body.append(this.menu);
+    }
+    else {
+      this.menu = this.el.querySelector('ifx-dropdown-menu');
+    }
+    this.menu.removeEventListener('click', this.menuClickHandler.bind(this));
+    this.menu.addEventListener('click', this.menuClickHandler.bind(this));
+  }
+  menuClickHandler() {
+    if (!this.noCloseOnMenuClick) {
+      this.closeDropdown();
+    }
+  }
+  triggerClickHandler() {
+    if (!this.internalIsOpen) {
+      this.openDropdown();
+    }
+    else {
+      this.closeDropdown();
+    }
+  }
+  disconnectedCallback() {
+    // Destroy popper instance if exists
+    if (this.popperInstance) {
+      this.popperInstance.destroy();
+      this.popperInstance = null;
+    }
+    // Remove menu if exists
+    if (this.menu) {
+      this.menu.remove();
+    }
+  }
+  async isOpen() {
+    return this.internalIsOpen;
+  }
+  async closeDropdown() {
+    if (this.internalIsOpen) {
+      this.internalIsOpen = false;
+      // sets isOpen prop on trigger and menu
+      this.trigger.isOpen = false;
+      this.menu.isOpen = false;
+      // Emit close event
+      this.ifxClose.emit();
+    }
+    // Destroy popper instance if exists
+    if (this.popperInstance) {
+      this.popperInstance.destroy();
+      this.popperInstance = null;
+    }
+  }
+  async openDropdown() {
+    if (!this.internalIsOpen && !this.disabled) {
+      this.internalIsOpen = true;
+      // sets isOpen prop on trigger and menu
+      this.trigger.isOpen = true;
+      this.menu.isOpen = true;
+      // Create popper instance for positioning
+      this.popperInstance = popper.createPopper(this.el, this.menu, { placement: this.placement });
+      this.ifxOpen.emit();
+    }
+  }
+  //emitted by and listening to it from the dropdown menu right now
+  // @Listen('ifxDropdownMenu')
+  // handleDropdownMenuEvents(event: CustomEvent) {
+  //   this.ifxDropdown.emit(event.detail)
+  //   console.log('Selected item received in higher-level parent:');
+  // }
+  handleOutsideClick(event) {
+    const target = event.target;
+    // Close dropdown if outside click
+    if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {
+      this.closeDropdown();
+    }
+  }
+  render() {
+    return (index.h("div", { "aria-label": 'dropdown menu', class: 'dropdown' }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "defaultOpen": ["watchHandlerIsOpen"],
+    "disabled": ["watchHandlerDisabled"]
+  }; }
+};
+Dropdown.style = dropdownCss;
+
+exports.ifx_dropdown = Dropdown;
+
+//# sourceMappingURL=ifx-dropdown.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-dropdown.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-dropdown.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-faq.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-faq.cjs.entry.js
@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const faqCss = ".container{padding-top:10px}";
+
+const Faq = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("div", { class: 'container' }, index.h("ifx-accordion", null, index.h("ifx-accordion-item", { caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), index.h("ifx-accordion-item", { caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), index.h("ifx-accordion-item", { caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), index.h("ifx-accordion-item", { caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), index.h("ifx-accordion-item", { caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
+  }
+};
+Faq.style = faqCss;
+
+exports.ifx_faq = Faq;
+
+//# sourceMappingURL=ifx-faq.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-faq.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-faq.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-faq.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,MAAM,GAAG,8BAA8B;;MCOhC,GAAG;;;;EAEd,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,WAAW,IACtBA,+BACEA,gCAAoB,OAAO,EAAC,2BAA2B,0dAElC,EACrBA,gCAAoB,OAAO,EAAC,iCAAiC,oNAExC,EACrBA,gCAAoB,OAAO,EAAC,mDAAmD,kVAE1D,EACrBA,gCAAoB,OAAO,EAAC,yCAAyC,gUAEhD,EACrBA,gCAAoB,OAAO,EAAC,iCAAiC,0PAExC,CACP,CACV,EACN;GACH;;;;;;","names":["h"],"sources":["src/stories/setup-and-installation/faq/faq.scss?tag=ifx-faq&encapsulation=shadow","src/stories/setup-and-installation/faq/faq.tsx"],"sourcesContent":[".container { \n  padding-top: 10px;\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-faq',\n  styleUrl: './faq.scss',\n  shadow: true,\n})\nexport class Faq {\n\n  render() {\n    return (\n      <div class='container'>\n      <ifx-accordion>\n        <ifx-accordion-item caption=\"What is the Infineon DDS?\">\n          The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application’s structure should be.\n        </ifx-accordion-item>\n        <ifx-accordion-item caption=\"How do I get access to the DDS?\">\n          You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github.\n        </ifx-accordion-item>\n        <ifx-accordion-item caption=\"Can I integrate the Infineon DDS into my project?\">\n          Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)\n        </ifx-accordion-item>\n        <ifx-accordion-item caption=\"Are Infineon DDS components accessable?\">\n          We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here.\n        </ifx-accordion-item>\n        <ifx-accordion-item caption=\"How to request a new component?\">\n          Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you.\n        </ifx-accordion-item>\n      </ifx-accordion>\n      </div>\n    );\n  }\n}\n"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-footer-column.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-footer-column.cjs.entry.js
@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const footerColumnCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.col{display:flex;flex-direction:column;gap:12px;padding-right:8px;color:#1D1D1D;font-family:var(--ifx-font-family)}.col ::slotted([slot=title]){box-sizing:border-box;font-weight:600;font-size:1rem;line-height:1.5rem;margin:0;padding:0}.col span{display:flex;flex-direction:column;gap:12px;color:#1D1D1D}.col span ::slotted([slot=link]){box-sizing:border-box;font-weight:400;font-size:1rem;line-height:1.5rem}";
+
+const Card = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("div", { class: "col" }, index.h("slot", { name: "title" }), index.h("span", { "aria-label": 'navigation link' }, index.h("slot", { name: "link" }))));
+  }
+  get el() { return index.getElement(this); }
+};
+Card.style = footerColumnCss;
+
+exports.ifx_footer_column = Card;
+
+//# sourceMappingURL=ifx-footer-column.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-footer-column.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-footer-column.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-footer-column.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,ofAAof;;MCQ/f,IAAI;;;;EAIf,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,KAAK,IACdA,kBAAM,IAAI,EAAC,OAAO,GAAG,EACrBA,gCAAiB,iBAAiB,IAChCA,kBAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACH,EACN;GACH;;;;;;;","names":["h"],"sources":["src/components/footer/footer-column.scss?tag=ifx-footer-column&encapsulation=shadow","src/components/footer/footer-column.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.col {\n  display: flex;\n  flex-direction: column;\n  gap: tokens.$ifxSpace150;\n  padding-right: 8px;\n  color: tokens.$ifxColorBaseBlack;\n  font-family: var(--ifx-font-family);\n\n  & ::slotted([slot=title]) {\n    box-sizing: border-box;\n    font-weight: tokens.$ifxFontWeightSemibold;\n    font-size: tokens.$ifxFontSizeM;\n    line-height: tokens.$ifxLineHeightM;\n    margin: 0;\n    padding: 0;\n  }\n\n  & span {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace150;\n    color: tokens.$ifxColorBaseBlack;\n\n    & ::slotted([slot=link]) {\n      box-sizing: border-box;\n      font-weight: 400;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n    }\n  }\n}","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-footer-column',\n  styleUrl: './footer-column.scss',\n  shadow: true,\n})\n\nexport class Card {\n  @Element() el;\n\n\n  render() {\n    return (\n      <div class=\"col\">\n        <slot name=\"title\" />\n        <span aria-label='navigation link'>\n          <slot name=\"link\" />\n        </span>\n      </div>\n    );\n  }\n}\n"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-footer.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-footer.cjs.entry.js
--- a/Server/wwwroot/package/dist/cjs/ifx-footer.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-footer.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-icon-button.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-icon-button.cjs.entry.js
@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+const index$1 = require('./index-2fdce9ad.js');
+require('./_commonjsHelpers-4213291f.js');
+
+const iconButtonCss = ":host{display:inline-flex}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px;gap:8px;color:#FFFFFF;flex-direction:row;font-weight:600;border-radius:1px;line-height:1.5rem;outline:none;font-family:var(--ifx-font-family);text-decoration:none;user-select:none;border:1px solid rgba(0, 0, 0, 0);font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}.btn:not(.disabled){cursor:pointer}.btn-primary{color:#FFFFFF;background-color:#0A8276}.btn-primary:disabled,.btn-primary.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary{color:#0A8276;background-color:#FFFFFF;border-color:#0A8276}.btn-secondary:disabled,.btn-secondary.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary{background-color:transparent;color:#1D1D1D}.btn-tertiary:disabled,.btn-tertiary.disabled{color:#BFBBBB;pointer-events:none}.btn.icon-button{min-width:initial;min-height:initial;width:40px;height:40px;padding:0;justify-content:center}.btn.icon-button.btn-round{border-radius:100px}.btn.icon-button.btn-square{border-radius:1px}.btn.icon-button.btn-s{width:32px;height:32px;padding:8px}.btn.icon-button.btn-l{width:48px;height:48px;padding:8px}.btn.btn-primary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-primary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C}.btn.btn-primary:not(:disabled,.disabled):active,.btn.btn-primary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C;color:#FFFFFF}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-tertiary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;color:#1D1D1D;box-shadow:0 0 0 0px #FFFFFF, 0 0 0 2px #0A8276}.btn.btn-tertiary:not(:disabled,.disabled):hover{color:#0A8276}.btn.btn-tertiary:not(:disabled,.disabled):active,.btn.btn-tertiary:not(:disabled,.disabled).active{color:#08665C}";
+
+const IconButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.variant = undefined;
+    this.size = undefined;
+    this.disabled = undefined;
+    this.icon = undefined;
+    this.href = undefined;
+    this.target = '_self';
+    this.shape = 'round';
+  }
+  async setFocus() {
+    this.focusableElement.focus();
+  }
+  componentWillLoad() {
+    if (this.shape === '') {
+      this.shape = 'round';
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, this.href ? (index.h("a", { "aria-disabled": this.disabled, "aria-label": 'a clickable icon button', ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.href : undefined, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined }, index.h("ifx-icon", { icon: this.icon }))) : (index.h("button", { class: this.getClassNames(), type: "button" }, index.h("ifx-icon", { icon: this.icon })))));
+  }
+  getVariantClass() {
+    return `${this.variant}` === "secondary"
+      ? `secondary`
+      : `${this.variant}` === 'tertiary'
+        ? `tertiary`
+        : `primary`;
+  }
+  getSizeClass() {
+    if (`${this.size}` === "xs") {
+      return "xs";
+    }
+    else if (`${this.size}` === "s") {
+      return "s";
+    }
+    else if (`${this.size}` === "l") {
+      return "l";
+    }
+    else
+      return "";
+  }
+  getClassNames() {
+    return index$1.classnames('btn icon-button', `btn-${this.shape}`, this.size && `btn-${this.getSizeClass()}`, `btn-${this.getVariantClass()}`, this.disabled ? 'disabled' : '');
+  }
+  get el() { return index.getElement(this); }
+};
+IconButton.style = iconButtonCss;
+
+exports.ifx_icon_button = IconButton;
+
+//# sourceMappingURL=ifx-icon-button.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-icon-button.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-icon-button.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-icon.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-icon.cjs.entry.js
@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+const icons = require('./icons-d2a85d59.js');
+
+const infineonIconStencilCss = "ifx-icon{display:inline-flex;justify-content:center}ifx-icon:empty{display:none}";
+
+const InfineonIconStencil = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.consoleError = index.createEvent(this, "consoleError", 7);
+    this.icon = "";
+    this.ifxIcon = undefined;
+  }
+  convertStringToHtml(htmlString) {
+    const div = document.createElement('div');
+    div.innerHTML = htmlString;
+    return div.firstChild;
+  }
+  convertHtmlToObject(htmlElement) {
+    let pathToObject = Array
+      .from(htmlElement.attributes, ({ name, value }) => ({ name, value }))
+      .reduce((acc, current) => {
+      acc[current.name] = current.value;
+      return acc;
+    }, {});
+    return pathToObject;
+  }
+  convertPathsToVnode(htmlPath) {
+    let svgPaths = [];
+    const parentPath = this.convertHtmlToObject(htmlPath);
+    const parentPathToVnode = index.h("path", parentPath);
+    svgPaths.push(parentPathToVnode);
+    if (htmlPath.firstChild) {
+      const paths = htmlPath.querySelectorAll('path');
+      const pathLength = htmlPath.querySelectorAll('path').length;
+      for (let i = 0; i < pathLength; i++) {
+        let pathToObject = this.convertHtmlToObject(paths[i]);
+        let objToVnode = index.h("path", pathToObject);
+        svgPaths.push(objToVnode);
+      }
+    }
+    return svgPaths;
+  }
+  getSVG(svgPath) {
+    return index.h("svg", { class: "inline-svg", width: this.ifxIcon.width, height: this.ifxIcon.height, xmlns: "http://www.w3.org/2000/svg", fill: this.ifxIcon.fill, viewBox: this.ifxIcon.viewBox }, ...svgPath);
+  }
+  constructIcon() {
+    if (this.ifxIcon) {
+      const htmlPath = this.convertStringToHtml(this.ifxIcon.svgContent);
+      const svgPath = this.convertPathsToVnode(htmlPath);
+      const SVG = this.getSVG(svgPath);
+      this.consoleError.emit(false);
+      return SVG;
+    }
+    else {
+      console.error('Icon not found!');
+      this.consoleError.emit(true);
+      return "";
+    }
+  }
+  componentWillLoad() {
+    const removeHyphen = (str) => str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr);
+    this.ifxIcon = icons.getIcon(removeHyphen(this.icon));
+  }
+  render() {
+    return (index.h(index.Host, null, this.constructIcon()));
+  }
+};
+InfineonIconStencil.style = infineonIconStencilCss;
+
+exports.ifx_icon = InfineonIconStencil;
+
+//# sourceMappingURL=ifx-icon.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-icon.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-icon.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-icon.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,sBAAsB,GAAG,kFAAkF;;MCSpG,mBAAmB;;;;gBACU,EAAE;;;EAI1C,mBAAmB,CAAC,UAAU;IAC5B,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IACzC,GAAG,CAAC,SAAS,GAAG,UAAU,CAAA;IAC1B,OAAO,GAAG,CAAC,UAAU,CAAA;GACtB;EAED,mBAAmB,CAAC,WAAW;IAC7B,IAAI,YAAY,GAAG,KAAK;OACrB,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;OACpE,MAAM,CAAC,CAAC,GAAG,EAAE,OAAO;MACnB,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,KAAK,CAAA;MACjC,OAAO,GAAG,CAAA;KACX,EAAE,EAAE,CAAC,CAAA;IAER,OAAO,YAAY,CAAA;GACpB;EAED,mBAAmB,CAAC,QAAQ;IAC1B,IAAI,QAAQ,GAAG,EAAE,CAAA;IACjB,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,iBAAiB,GAAGA,OAAC,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAChD,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;IAChC,IAAG,QAAQ,CAAC,UAAU,EAAE;MACtB,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;MAChD,MAAM,UAAU,GAAG,QAAQ,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC;MAC5D,KAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,EAAE;QAClC,IAAI,YAAY,GAAG,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;QACrD,IAAI,UAAU,GAAGA,OAAC,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;QACxC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;OAC1B;KACF;IACD,OAAO,QAAQ,CAAA;GAChB;EAED,MAAM,CAAC,OAAO;IACZ,OAAOA,iBAAK,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,OAAM,OAAO,CAAO,CAAA;GACrM;EAED,aAAa;IACX,IAAG,IAAI,CAAC,OAAO,EAAE;MACf,MAAM,QAAQ,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;MAClE,MAAM,OAAO,GAAG,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAA;MAClD,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;MAChC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;MAC7B,OAAO,GAAG,CAAC;KACZ;SAAM;MACL,OAAO,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAA;MAChC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;MAC5B,OAAO,EAAE,CAAA;KACV;GACF;EAED,iBAAiB;IACf,MAAM,YAAY,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,mBAAmB,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC;IAC/F,IAAI,CAAC,OAAO,GAAGC,aAAO,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;GACjD;EAED,MAAM;IACJ,QACED,QAACE,UAAI,QACJ,IAAI,CAAC,aAAa,EAAE,CACd,EACP;GACH;;;;;;","names":["h","getIcon","Host"],"sources":["src/components/icon/infineonIconStencil.scss?tag=ifx-icon","src/components/icon/infineonIconStencil.tsx"],"sourcesContent":["ifx-icon {\n  display: inline-flex;\n  justify-content: center;\n\n  &:empty {\n    display: none;\n  }\n}","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\nimport { getIcon } from '@infineon/infineon-icons'\n\n\n@Component({\n  tag: 'ifx-icon',\n  styleUrl: './infineonIconStencil.scss'\n})\n\nexport class InfineonIconStencil {\n  @Prop({ mutable: true }) icon: string = \"\"\n  @Prop({ mutable: true }) ifxIcon: any;\n  @Event() consoleError: EventEmitter<boolean>;\n \n  convertStringToHtml(htmlString) { \n    const div = document.createElement('div')\n    div.innerHTML = htmlString\n    return div.firstChild\n  }\n\n  convertHtmlToObject(htmlElement) { \n    let pathToObject = Array\n      .from(htmlElement.attributes, ({ name, value }) => ({ name, value }))\n      .reduce((acc, current) => {\n        acc[current.name] = current.value\n        return acc\n      }, {})\n\n    return pathToObject\n  }\n\n  convertPathsToVnode(htmlPath) { \n    let svgPaths = []\n    const parentPath = this.convertHtmlToObject(htmlPath);\n    const parentPathToVnode = h(\"path\", parentPath);\n    svgPaths.push(parentPathToVnode)\n    if(htmlPath.firstChild) { \n      const paths = htmlPath.querySelectorAll('path');\n      const pathLength = htmlPath.querySelectorAll('path').length;\n      for(let i = 0; i < pathLength; i++) { \n        let pathToObject = this.convertHtmlToObject(paths[i])\n        let objToVnode = h(\"path\", pathToObject)\n        svgPaths.push(objToVnode)\n      }      \n    }\n    return svgPaths\n  }\n\n  getSVG(svgPath) {\n    return <svg class=\"inline-svg\" width={this.ifxIcon.width} height={this.ifxIcon.height} xmlns=\"http://www.w3.org/2000/svg\" fill={this.ifxIcon.fill} viewBox={this.ifxIcon.viewBox}>{...svgPath}</svg>\n  }\n\n  constructIcon() {\n    if(this.ifxIcon) {\n      const htmlPath = this.convertStringToHtml(this.ifxIcon.svgContent)\n      const svgPath = this.convertPathsToVnode(htmlPath)\n      const SVG = this.getSVG(svgPath)\n      this.consoleError.emit(false)\n      return SVG;\n    } else {\n      console.error('Icon not found!')\n      this.consoleError.emit(true)\n      return \"\"\n    }\n  }\n\n  componentWillLoad() {\n    const removeHyphen = (str) => str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr);\n    this.ifxIcon = getIcon(removeHyphen(this.icon));\n  }\n\n  render() {\n    return (\n      <Host>\n      {this.constructIcon()}\n      </Host>\n    );\n  }\n}"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-icons-preview.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-icons-preview.cjs.entry.js
@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+const icons = require('./icons-d2a85d59.js');
+
+const iconsPreviewCss = ".container{display:flex;flex-direction:column;gap:10px}.html-wrapper{background:rgb(38, 38, 38);padding:20px;color:white;font-family:monospace;position:relative}.html-wrapper button{position:absolute;right:0px;bottom:0px;background:rgba(0, 0, 0, 0.85);color:#C9CDCF;border:0 none;padding:4px 10px;font-size:0.75rem;font-family:\"Nunito Sans\";font-weight:700;border-top:1px solid rgba(255, 255, 255, 0.1);border-left:1px solid rgba(255, 255, 255, 0.1);margin-left:-1px;border-radius:4px 0 0 0;cursor:pointer}.html-wrapper .component-name{color:#A8FF60}.html-wrapper .attribute-name{color:rgb(150, 203, 254)}.html-wrapper .attribute-value{color:rgb(180, 116, 221)}.preview__container{box-sizing:border-box;display:flex;align-items:center;padding:2px;flex-wrap:wrap;gap:4px}.preview__container .preview__container-item{display:flex;justify-content:center;align-items:center;border:1px solid #f1f1f1;padding:2px;width:50px;height:50px;position:relative}.preview__container .preview__container-item:active{border-color:#378375}.preview__container .preview__container-item:hover{cursor:pointer}.preview__container .preview__container-item.copied::after{z-index:1000;content:\"copied!\";position:absolute;top:0;left:50px;background-color:#000;color:white;padding:3px;border-radius:4px}";
+
+const IconsPreview = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.iconsArray = [];
+    this.isCopied = false;
+    this.copiedIndex = undefined;
+    this.htmlTag = '<ifx-icon icon="calendar-16"></ifx-icon>';
+    this.iconName = `"c-info-24"`;
+  }
+  handleCopiedText() {
+    this.isCopied = true;
+    setTimeout(() => {
+      this.isCopied = false;
+    }, 2000);
+  }
+  copyIconText(icon) {
+    this.htmlTag = `<ifx-icon icon="${icon}"></ifx-icon>`;
+    this.iconName = `"${icon}"`;
+  }
+  copyHtmlString() {
+    const copiedTag = `<ifx-icon icon=${this.iconName}></ifx-icon>`;
+    navigator.clipboard.writeText(copiedTag);
+    this.handleCopiedText();
+  }
+  componentWillLoad() {
+    for (let icon in icons.icons) {
+      this.iconsArray.push(icon);
+    }
+  }
+  render() {
+    return (index.h("div", { class: 'container' }, index.h("div", { class: 'html-wrapper' }, index.h("span", { class: "html-tag" }, "<"), index.h("span", { class: "component-name" }, "ifx-icon"), index.h("span", { class: "attribute-name" }, " icon"), "=", index.h("span", { class: "attribute-value" }, this.iconName), index.h("span", { class: "html-tag" }, ">"), index.h("span", { class: "html-tag" }, "</"), index.h("span", { class: "component-name" }, "ifx-icon"), index.h("span", { class: "html-tag" }, ">"), index.h("button", { onClick: () => this.copyHtmlString() }, this.isCopied ? 'Copied' : 'Copy')), index.h("div", { class: "preview__container" }, this.iconsArray.map((icon, index$1) => index.h("div", { class: `preview__container-item ${this.isCopied && this.copiedIndex === index$1 ? 'copied' : ""}`, onClick: () => this.copyIconText(icon) }, index.h("ifx-icon", { icon: icon }))))));
+  }
+  get el() { return index.getElement(this); }
+};
+IconsPreview.style = iconsPreviewCss;
+
+exports.ifx_icons_preview = IconsPreview;
+
+//# sourceMappingURL=ifx-icons-preview.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-icons-preview.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-icons-preview.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-link.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-link.cjs.entry.js
@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+const index$1 = require('./index-2fdce9ad.js');
+require('./_commonjsHelpers-4213291f.js');
+
+const linkCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.link{display:inline-flex;align-items:center;font-weight:400;font-size:1rem;text-decoration:none;color:#0A8276;gap:8px;line-height:1.6;font-family:var(--ifx-font-family)}.link:focus{outline-width:2px;outline-style:solid;outline-color:#0A8276;outline-offset:2px;border-radius:3px}.link.bold{font-weight:600}.link.bold:hover{text-decoration:underline}.link.bold:active{color:#08665C;font-style:normal;font-weight:600;text-decoration:underline}.link.underlined{text-decoration:underline;text-decoration-color:#0A8276;color:#1D1D1D}.link.underlined:hover{color:#0A8276}.link.underlined:active{color:#0A8276}.link.title{text-decoration:none;font-weight:600;color:#1D1D1D}.link.title:hover{color:#0A8276}.link.title:active{color:#08665C}.link.menu{font-weight:400;font-style:normal;line-height:26px;color:#1D1D1D}.link.menu:hover{color:#0A8276}.link.menu:active{color:#08665C}.link.small{font-size:0.875rem}.link.medium{font-size:1rem}.link.large{font-size:1.125rem}.link.extraLarge{font-size:1.25rem}.link.underline{text-decoration:underline}";
+
+const Link = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.href = undefined;
+    this.target = '_self';
+    this.size = undefined;
+    this.variant = 'bold';
+  }
+  render() {
+    return (index.h("a", { "aria-label": 'a navigation link button', href: this.href, target: this.target, class: this.linkClassNames() }, index.h("slot", null)));
+  }
+  getSizeClass() {
+    const small = this.size === 's' ? 'small' : null;
+    const medium = this.size === 'm' ? 'medium' : null;
+    const large = this.size === 'l' ? 'large' : null;
+    const extraLarge = this.size === 'xl' ? 'extraLarge' : null;
+    if (small) {
+      return small;
+    }
+    else if (medium) {
+      return medium;
+    }
+    else if (large) {
+      return large;
+    }
+    else if (extraLarge && this.variant === 'underlined') {
+      return 'large';
+    }
+    else if (extraLarge && this.variant !== 'underlined') {
+      return extraLarge;
+    }
+    else
+      return "";
+  }
+  getVariantClass() {
+    const bold = this.variant === 'bold' ? 'bold' : null;
+    const title = this.variant === 'title' ? 'title' : null;
+    const underlined = this.variant === 'underlined' ? 'underlined' : null;
+    const menu = this.variant === 'menu' ? 'menu' : null;
+    if (bold) {
+      return bold;
+    }
+    else if (title) {
+      return title;
+    }
+    else if (underlined) {
+      return underlined;
+    }
+    else if (menu) {
+      return menu;
+    }
+    else
+      return bold;
+  }
+  linkClassNames() {
+    return index$1.classnames('link', 'primary', this.getVariantClass(), this.getSizeClass());
+  }
+};
+Link.style = linkCss;
+
+exports.ifx_link = Link;
+
+//# sourceMappingURL=ifx-link.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-link.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-link.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-list-group.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-list-group.cjs.entry.js
@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const listGroupCss = ":host{display:inline-flex}.list-group-container{display:inline-flex;flex-direction:column;gap:3px}";
+
+const ListGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.flush = false;
+    this.bulletpoint = false;
+    this.notification = false;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: `list-group-container 
+        ${this.flush ? 'flush' : ""} 
+        ${this.bulletpoint ? 'bulletpoint' : ""}` }, index.h("slot", { name: 'list-item' }), index.h("slot", { name: "list-notification" }))));
+  }
+  get el() { return index.getElement(this); }
+};
+ListGroup.style = listGroupCss;
+
+exports.ifx_list_group = ListGroup;
+
+//# sourceMappingURL=ifx-list-group.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-list-group.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-list-group.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-list-group.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,oGAAoG;;MCQ5G,SAAS;;;iBAEK,KAAK;uBACC,KAAK;wBACJ,KAAK;;EAErC,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EACR;UACA,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE;UACzB,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,EAAE,EAAE,IAEvCA,kBAAM,IAAI,EAAC,WAAW,GAAG,EACzBA,kBAAM,IAAI,EAAC,mBAAmB,GAAG,CAC7B,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/list-group/list-group.scss?tag=ifx-list-group&encapsulation=shadow","src/components/list-group/list-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n:host  {\n  display: inline-flex;\n}\n\n.list-group-container {\n  display: inline-flex;\n  flex-direction: column;\n  gap: 3px;\n}","import { Component, h, Element, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-list-group',\n  styleUrl: 'list-group.scss',\n  shadow: true,\n})\n\nexport class ListGroup {\n  @Element() el;\n  @Prop() flush: boolean = false;\n  @Prop() bulletpoint: boolean = false;\n  @Prop() notification: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div class={\n          `list-group-container \n        ${this.flush ? 'flush' : \"\"} \n        ${this.bulletpoint ? 'bulletpoint' : \"\"}`\n        }>\n          <slot name='list-item' />\n          <slot name=\"list-notification\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-list-item.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-list-item.cjs.entry.js
@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const listGroupItemCss = "@charset \"UTF-8\";.list-group-item{display:flex;align-items:center;justify-content:space-between;height:40px;width:350px;padding:8px 16px;background-color:#FFFFFF;border:1px solid #EEEDED;border-radius:1px 1px 0px 0px;font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;font-family:var(--ifx-font-family)}.list-group-item.flush{border:none;border-bottom:1px solid #EEEDED}.list-group-item.flush.bulletpoint{padding:8px}.list-group-item.bulletpoint .list-group-item-content::before{content:\"•\";display:inline-block;font-size:1.125rem;padding-right:10px}.list-group-item:hover:not(.show){background-color:#EEEDED}.list-group-item:active:not(.show){background-color:#0A8276;color:#FFFFFF}.list-group-item.show{display:block;height:88px;padding:16px}";
+
+const ListGroupItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.isFlush = false;
+    this.hasBulletpoint = false;
+    this.badge = false;
+    this.badgeValue = 0;
+  }
+  componentWillLoad() {
+    const ifxListGroup = this.el.closest('ifx-list-group');
+    if (ifxListGroup.flush) {
+      this.isFlush = true;
+    }
+    else
+      this.isFlush = false;
+    if (ifxListGroup.bulletpoint && !this.badge) {
+      this.hasBulletpoint = true;
+    }
+    else
+      this.hasBulletpoint = false;
+  }
+  render() {
+    return (index.h("div", { class: `list-group-item 
+        ${this.isFlush ? 'flush' : ""}
+        ${this.hasBulletpoint ? 'bulletpoint' : ""}` }, index.h("div", { class: "list-group-item-content" }, index.h("slot", null)), this.badge && index.h("ifx-number-indicator", null, this.badgeValue)));
+  }
+  get el() { return index.getElement(this); }
+};
+ListGroupItem.style = listGroupItemCss;
+
+exports.ifx_list_item = ListGroupItem;
+
+//# sourceMappingURL=ifx-list-item.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-list-item.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-list-item.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-list-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,+vBAA+vB;;MCQ3wB,aAAa;;;mBAEoB,KAAK;0BACd,KAAK;iBACf,KAAK;sBACD,CAAC;;EAE9B,iBAAiB;IACf,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAA;IACtD,IAAI,YAAY,CAAC,KAAK,EAAE;MACtB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;;MAAM,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IAE5B,IAAI,YAAY,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MAC3C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;;MAAM,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;GACpC;EAED,MAAM;IACJ,QACEA,iBAAK,KAAK,EACR;UACE,IAAI,CAAC,OAAO,GAAG,OAAO,GAAG,EAAE;UAC3B,IAAI,CAAC,cAAc,GAAG,aAAa,GAAG,EAAE,EAAE,IAC5CA,iBAAK,KAAK,EAAC,yBAAyB,IAClCA,qBAAQ,CACJ,EACL,IAAI,CAAC,KAAK,IAAIA,sCAAuB,IAAI,CAAC,UAAU,CAAwB,CACzE,EACN;GACH;;;;;;;","names":["h"],"sources":["src/components/list-group/list-group-item.scss?tag=ifx-list-item&encapsulation=shadow","src/components/list-group/list-group-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.list-group-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: tokens.$ifxSize500;\n  width: 350px;\n  padding: 8px 16px;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  border-radius: 1px 1px 0px 0px;\n  font-style: normal;\n  font-weight: 400;\n  font-size: tokens.$ifxFontSizeM;\n  line-height: tokens.$ifxLineHeightM;\n  font-family: var(--ifx-font-family);\n\n  &.flush {\n    border: none;\n    border-bottom: 1px solid tokens.$ifxColorEngineering200;\n\n    &.bulletpoint {\n      padding: 8px;\n    }\n  }\n\n  &.bulletpoint {\n    & .list-group-item-content::before {\n      content: \"•\";\n      display: inline-block;\n      font-size: tokens.$ifxFontSizeL;\n      padding-right: 10px;\n    }\n  }\n\n  &:hover:not(.show) {\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &:active:not(.show) {\n    background-color: tokens.$ifxColorOcean500;\n    color: tokens.$ifxColorBaseWhite;\n  }\n\n  &.show {\n    display: block;\n    height: 88px;\n    padding: 16px;\n  }\n}","import { Component, h, Element, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-list-item',\n  styleUrl: 'list-group-item.scss',\n  shadow: true,\n})\n\nexport class ListGroupItem {\n  @Element() el;\n  @Prop({ mutable: true }) isFlush: boolean = false;\n  @State() hasBulletpoint: boolean = false;\n  @Prop() badge: boolean = false;\n  @Prop() badgeValue: number = 0;\n\n  componentWillLoad() {\n    const ifxListGroup = this.el.closest('ifx-list-group')\n    if (ifxListGroup.flush) {\n      this.isFlush = true;\n    } else this.isFlush = false;\n\n    if (ifxListGroup.bulletpoint && !this.badge) {\n      this.hasBulletpoint = true;\n    } else this.hasBulletpoint = false;\n  }\n\n  render() {\n    return (\n      <div class={\n        `list-group-item \n        ${this.isFlush ? 'flush' : \"\"}\n        ${this.hasBulletpoint ? 'bulletpoint' : \"\"}`}>\n        <div class=\"list-group-item-content\">\n          <slot />\n        </div>\n        {this.badge && <ifx-number-indicator>{this.badgeValue}</ifx-number-indicator>}\n      </div>\n    );\n  }\n}\n"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-list-notification.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-list-notification.cjs.entry.js
@ -0,0 +1,86 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const listGroupNotificationCss = ".list-group-notification{width:350px;height:88px;padding:16px;margin-bottom:8px;background-color:#FFFFFF;border:1px solid #EEEDED;font-family:var(--ifx-font-family)}.list-group-notification .description__section{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.list-group-notification.flush{border:none;border-bottom:1px solid #EEEDED}.list-group-notification .heading__section{display:flex;justify-content:space-between;margin-bottom:8px;color:#0A8276}.list-group-notification .heading__section-title{flex:1;margin:0;font-weight:600;line-height:1.2;font-size:1rem;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.list-group-notification .heading__section-time{flex:none;margin-left:2px;font-size:0.875rem;line-height:1.25rem;font-weight:400;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}";
+
+const ListGroupNotification = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.titleText = "";
+    this.isFlush = false;
+    this.creationTime = undefined;
+    this.postTime = undefined;
+    this.shownTime = undefined;
+  }
+  setDisplayTime(seconds, minutes, hours, days) {
+    if (seconds <= 60) {
+      this.shownTime = `Just now`;
+    }
+    else if (minutes <= 60) {
+      this.shownTime = `${minutes} min. ago`;
+    }
+    else if (hours <= 24) {
+      this.shownTime = hours > 1 ? `${hours} hr. ago` : `${hours} hrs. ago`;
+    }
+    else if (days) {
+      this.shownTime = hours < 48 ? `1 day ago` : `${days} days ago`;
+      if (hours > 168) {
+        this.shownTime = `${new Date().getDay()}.${new Date().getMonth()}.${new Date().getFullYear()}`;
+      }
+    }
+  }
+  stringToDate(dataString) {
+    if (!dataString)
+      return null;
+    let dateParts = dataString.split("/");
+    if (dateParts[2]) {
+      if (dateParts[2].split(" ")[1]) {
+        let timeParts = dateParts[2].split(" ")[1].split(":");
+        dateParts[2] = dateParts[2].split(" ")[0];
+        return new Date(+dateParts[2], dateParts[1] - 1, +dateParts[0], timeParts[0], timeParts[1], timeParts[2]);
+      }
+    }
+  }
+  getElapsedTime(time) {
+    let date = this.stringToDate(time);
+    if (date) {
+      let miliseconds = Date.now() - date.getTime();
+      let seconds = Math.floor(miliseconds / 1000);
+      let minutes = Math.floor(miliseconds / 60000);
+      let hours = Math.floor(minutes / 60);
+      let days = Math.floor(hours / 24);
+      this.setDisplayTime(seconds, minutes, hours, days);
+    }
+  }
+  setTimeInterval(time) {
+    this.postTime = window.setInterval(() => {
+      this.getElapsedTime(time);
+    }, 1000);
+  }
+  ;
+  componentWillLoad() {
+    this.getElapsedTime(this.creationTime);
+    this.setTimeInterval(this.creationTime); //if time update on refresh, delete this & clear interval
+    const ifxListGroup = this.el.closest('ifx-list-group');
+    if (ifxListGroup.flush) {
+      this.isFlush = true;
+    }
+    else
+      this.isFlush = false;
+  }
+  disconnectedCallback() {
+    window.clearInterval(this.postTime);
+  }
+  render() {
+    return (index.h("div", { class: `list-group-notification ${this.isFlush ? 'flush' : ""}` }, index.h("div", { class: "heading__section" }, index.h("h6", { class: "heading__section-title" }, this.titleText), index.h("div", { class: "heading__section-time" }, this.shownTime)), index.h("div", { class: "description__section" }, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
+};
+ListGroupNotification.style = listGroupNotificationCss;
+
+exports.ifx_list_notification = ListGroupNotification;
+
+//# sourceMappingURL=ifx-list-notification.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-list-notification.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-list-notification.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-modal.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-modal.cjs.entry.js
@ -0,0 +1,282 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+/**
+ * Copy/pasted from https://github.com/andreasbm/focus-trap
+ */
+/**
+ * Traverses the slots of the open shadowroots and returns all children matching the query.
+ * We need to traverse each child-depth one at a time because if an element should be skipped
+ * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll("*")
+ * the information of whether the children is within a hidden parent is lost.
+ * @param {ShadowRoot | HTMLElement} root
+ * @param skipNode
+ * @param isMatch
+ * @param {number} maxDepth
+ * @param {number} depth
+ * @returns {HTMLElement[]}
+ */
+function queryShadowRoot(root, skipNode, isMatch, maxDepth = 20, depth = 0) {
+  const matches = [];
+  // If the depth is above the max depth, abort the searching here.
+  if (depth >= maxDepth) {
+    return matches;
+  }
+  // Traverses a slot element
+  const traverseSlot = ($slot) => {
+    // Only check nodes that are of the type Node.ELEMENT_NODE
+    // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
+    const assignedNodes = $slot
+      .assignedNodes()
+      .filter((node) => node.nodeType === 1);
+    if (assignedNodes.length > 0) {
+      const $slotParent = assignedNodes[0].parentElement;
+      return queryShadowRoot($slotParent, skipNode, isMatch, maxDepth, depth + 1);
+    }
+    return [];
+  };
+  // Go through each child and continue the traversing if necessary
+  // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.
+  // Therefore we fallback to an empty array if it is undefined.
+  const children = Array.from(root.children || []);
+  for (const $child of children) {
+    // Check if the element and its descendants should be skipped
+    if (skipNode($child)) {
+      // console.log('-- SKIP', $child);
+      continue;
+    }
+    // console.log('$child', $child);
+    // If the element matches we always add it
+    if (isMatch($child)) {
+      matches.push($child);
+    }
+    if ($child.shadowRoot != null) {
+      // If the element has a shadow root we need to traverse it
+      matches.push(...queryShadowRoot($child.shadowRoot, skipNode, isMatch, maxDepth, depth + 1));
+    }
+    else if ($child.tagName === 'SLOT') {
+      // If the child is a slot we need to traverse each assigned node
+      matches.push(...traverseSlot($child));
+    }
+    else {
+      // Traverse the children of the element
+      matches.push(...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1));
+    }
+  }
+  return matches;
+}
+/**
+ * Returns whether the element is hidden.
+ * @param $elem
+ */
+function isHidden($elem) {
+  return ($elem.hasAttribute('hidden') ||
+    ($elem.hasAttribute('aria-hidden') &&
+      $elem.getAttribute('aria-hidden') !== 'false') ||
+    // A quick and dirty way to check whether the element is hidden.
+    // For a more fine-grained check we could use "window.getComputedStyle" but we don't because of bad performance.
+    // If the element has visibility set to "hidden" or "collapse", display set to "none" or opacity set to "0" through CSS
+    // we won't be able to catch it here. We accept it due to the huge performance benefits.
+    $elem.style.display === `none` ||
+    $elem.style.opacity === `0` ||
+    $elem.style.visibility === `hidden` ||
+    $elem.style.visibility === `collapse`);
+  // If offsetParent is null we can assume that the element is hidden
+  // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null
+  // || $elem.offsetParent == null;
+}
+/**
+ * Returns whether the element is disabled.
+ * @param $elem
+ */
+function isDisabled($elem) {
+  return ($elem.hasAttribute('disabled') ||
+    ($elem.hasAttribute('aria-disabled') &&
+      $elem.getAttribute('aria-disabled') !== 'false'));
+}
+/**
+ * Determines whether an element is focusable.
+ * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194
+ * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable
+ * @param $elem
+ */
+function isFocusable($elem) {
+  // Discard elements that are removed from the tab order.
+  if ($elem.getAttribute('tabindex') === '-1' ||
+    isHidden($elem) ||
+    isDisabled($elem)) {
+    return false;
+  }
+  return (
+  // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists
+  $elem.hasAttribute('tabindex') ||
+    // Anchor tags or area tags with a href set
+    (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) &&
+      $elem.hasAttribute('href')) ||
+    // Form elements which are not disabled
+    $elem instanceof HTMLButtonElement ||
+    $elem instanceof HTMLInputElement ||
+    $elem instanceof HTMLTextAreaElement ||
+    $elem instanceof HTMLSelectElement ||
+    // IFrames
+    $elem instanceof HTMLIFrameElement);
+}
+
+function animationTo(element, keyframes, options) {
+  const animated = element.animate(keyframes, Object.assign(Object.assign({}, options), { fill: 'both' }));
+  animated.addEventListener('finish', () => {
+    // @ts-ignore
+    animated.commitStyles();
+    animated.cancel();
+  });
+  return animated;
+}
+const keyframeDefaults = {
+  easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',
+};
+const KEYFRAMES = {
+  fadeIn: [
+    Object.assign(Object.assign({ offset: 0 }, keyframeDefaults), { opacity: 0 }),
+    Object.assign(Object.assign({ offset: 1 }, keyframeDefaults), { opacity: 1 }),
+  ],
+  fadeOut: [
+    Object.assign(Object.assign({ offset: 0 }, keyframeDefaults), { opacity: 1 }),
+    Object.assign(Object.assign({ offset: 1 }, keyframeDefaults), { opacity: 0 }),
+  ],
+};
+
+const modalCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.modal-container{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1060;overflow-y:auto;font-family:var(--ifx-font-family)}.modal-container.open{display:block}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#1D1D1D;opacity:0.5;z-index:0}.modal-content-container{position:absolute;display:flex;justify-content:center;top:50%;left:50%;transform:translate(-50%, -50%);width:90%;min-height:218px;background-color:#fff;border-radius:0;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);overflow:hidden;box-sizing:border-box;align-items:stretch}@media screen and (min-width: 768px){.modal-content-container{width:540px;min-height:132px}}.modal-content{display:flex;flex-direction:column;width:100%;height:100%}.modal-icon-container{display:flex;align-items:center;justify-content:center;width:32px;background-color:#0A8276;align-self:stretch}.modal-icon-container.danger{background-color:#CD002F}.modal-icon-container ifx-icon{color:#FFFFFF}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;height:76px;box-sizing:border-box;border-radius:1px 1px 0px 0px;border-bottom:1px solid #EEEDED}.modal-header h2{margin:0;font-weight:600;font-size:1.25rem;line-height:28px}.modal-header button{background:none;border:none;font-size:1.5em;padding:0;cursor:pointer}.modal-body{padding:16px 24px;min-height:56px;box-sizing:border-box;flex:1;max-height:70vh;overflow-y:auto}.modal-footer.buttons-present ::slotted(*){display:flex;justify-content:flex-end;gap:16px;padding:16px 24px 32px 16px}.modal-border{display:flex;align-items:center;justify-content:center;width:100%;font-size:1.5em;flex-grow:1}.modal-border.primary{background-color:#0A8276}.modal-border.secondary{background-color:#575352}.modal-border.danger{background-color:#CD002F}.modal-border.success{background-color:#4CA460}.modal-border.warning{background-color:#E16B25}.modal-border.orange{background-color:#E16B25}.modal-border.ocean{background-color:#0A8276}.modal-border.grey{background-color:#575352}.modal-border.grey-200{background-color:#EEEDED}.modal-border.red{background-color:#CD002F}.modal-border.green{background-color:#4CA460}.modal-border.berry{background-color:#9C216E}";
+
+const IfxModal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ifxModalOpen = index.createEvent(this, "ifxModalOpen", 7);
+    this.ifxModalClose = index.createEvent(this, "ifxModalClose", 7);
+    this.focusableElements = [];
+    this.handleTopFocus = () => {
+      this.attemptFocus(this.getLastFocusableElement());
+    };
+    this.handleBottomFocus = () => {
+      this.attemptFocus(this.getFirstFocusableElement());
+    };
+    this.handleKeypress = (event) => {
+      if (!this.showModal) {
+        return;
+      }
+      if (event.key === 'Escape') {
+        this.doBeforeClose('ESCAPE_KEY');
+      }
+    };
+    this.opened = false;
+    this.showModal = this.opened || false;
+    this.caption = 'Modal Title';
+    this.closeOnOverlayClick = true;
+    this.variant = 'default';
+    this.alertIcon = '';
+    this.okButtonLabel = 'OK';
+    this.cancelButtonLabel = 'Cancel';
+    this.slotButtonsPresent = false;
+  }
+  componentDidLoad() {
+    // Query all focusable elements and store them in `focusableElements`.
+    // Needed for the "focus trap" functionality.
+    this.focusableElements = queryShadowRoot(this.hostElement.shadowRoot, (el) => isHidden(el) || el.matches('[data-focus-trap-edge]'), isFocusable);
+  }
+  getFirstFocusableElement() {
+    return this.focusableElements[0];
+  }
+  getLastFocusableElement() {
+    return this.focusableElements[this.focusableElements.length - 1];
+  }
+  attemptFocus(element) {
+    if (element == null) {
+      setTimeout(() => {
+        this.closeButton.focus();
+      });
+      return;
+    }
+    setTimeout(() => {
+      element.focus();
+    }, 0);
+  }
+  open() {
+    this.showModal = true;
+    try {
+      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {
+        duration: 200,
+      });
+      anim.addEventListener('finish', () => {
+        this.attemptFocus(this.getFirstFocusableElement());
+        this.ifxModalOpen.emit();
+      });
+      // this.attemptFocus(this.getFirstFocusableElement());
+      // this.ifxModalOpen.emit();
+      this.hostElement.addEventListener('keydown', this.handleKeypress);
+    }
+    catch (err) {
+      this.ifxModalOpen.emit();
+    }
+  }
+  close() {
+    try {
+      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {
+        duration: 200,
+      });
+      anim.addEventListener('finish', () => {
+        this.showModal = false;
+        this.ifxModalClose.emit();
+      });
+      this.hostElement.removeEventListener('keydown', this.handleKeypress);
+    }
+    catch (err) {
+      this.showModal = false;
+      this.ifxModalClose.emit();
+    }
+  }
+  doBeforeClose(trigger) {
+    const triggers = [];
+    triggers.push(trigger);
+    const prevented = triggers.some((event) => event.defaultPrevented);
+    if (!prevented) {
+      this.opened = false;
+    }
+  }
+  openedChanged(newValue) {
+    if (newValue === true) {
+      this.open();
+    }
+    else {
+      this.close();
+    }
+  }
+  handleOverlayClick() {
+    if (this.closeOnOverlayClick) {
+      this.doBeforeClose('BACKDROP');
+    }
+  }
+  handleButtonsSlotChange(e) {
+    var _a;
+    if (((_a = e.currentTarget.assignedElements()[0]) === null || _a === void 0 ? void 0 : _a.childElementCount) > 0) {
+      this.slotButtonsPresent = true;
+    }
+    else {
+      this.slotButtonsPresent = false;
+    }
+  }
+  render() {
+    const isAlertVariant = this.variant !== 'default';
+    return (index.h(index.Host, null, index.h("div", { ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, index.h("div", { class: "modal-overlay", onClick: () => this.handleOverlayClick() }), index.h("div", { "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), index.h("div", { class: `modal-content-container`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, isAlertVariant ? (index.h("div", { class: `modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}` }, this.alertIcon ? index.h("ifx-icon", { icon: this.alertIcon }) : null)) : null, index.h("div", { class: "modal-content" }, index.h("div", { class: "modal-header" }, index.h("h2", null, this.caption), index.h("ifx-icon-button", { ref: (el) => (this.closeButton = el), icon: "cross-24", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), index.h("div", { class: "modal-body" }, index.h("slot", { name: "content" /*onSlotchange={() => console.log('slots children modified')}*/ })), index.h("div", { class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, index.h("slot", { name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), index.h("div", { "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "opened": ["openedChanged"]
+  }; }
+};
+IfxModal.style = modalCss;
+
+exports.ifx_modal = IfxModal;
+
+//# sourceMappingURL=ifx-modal.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-modal.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-modal.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-multiselect.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-multiselect.cjs.entry.js
@ -0,0 +1,378 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const multiselectCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.ifx-multiselect-container{background-color:#FFFFFF;position:relative;box-sizing:border-box;font-family:var(--ifx-font-family)}.ifx-multiselect-container.small-select{height:36px}.ifx-multiselect-container.medium-select{height:40px}.ifx-multiselect-container:hover{cursor:pointer}.ifx-multiselect-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-error-message-wrapper{color:#CD002F;font-size:0.75rem;line-height:1rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-multiselect-wrapper{box-sizing:border-box;position:relative;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;width:100%;font-weight:400;font-style:normal}.ifx-multiselect-container .ifx-multiselect-wrapper.small-select{height:36px;padding:8px 12px;font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .ifx-multiselect-wrapper.medium-select{height:40px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible{outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active)::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:2px}.ifx-multiselect-container .ifx-multiselect-wrapper.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:not-allowed;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-multiselect-container .ifx-multiselect-wrapper.error{border-color:#CD002F}.ifx-multiselect-container .ifx-multiselect-wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-multiselect-container .ifx-multiselect-wrapper.active{border-color:#0A8276 !important}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu{top:auto;bottom:100%}.ifx-multiselect-container .ifx-multiselect-input{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-multiselect-container .ifx-multiselect-input.placeholder{opacity:0.5}.ifx-multiselect-container .ifx-multiselect-icon-container{margin-left:auto;align-items:center;display:flex}.ifx-multiselect-container .ifx-clear-button{margin-right:8px;display:flex}.ifx-multiselect-container .ifx-multiselect-dropdown-menu{position:absolute;top:100%;left:0;width:100%;margin-top:2px;background-color:#fff;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1);max-height:300px;overflow-y:auto;z-index:var(--dynamic-z-index, 1)}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input{width:100%;padding:8px 16px;font-size:1rem;line-height:1.5rem;font-style:normal;font-weight:400;box-sizing:border-box;background-color:#FFFFFF;border:none;border-bottom:1px solid #8D8786}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input:focus{outline:none;border:1px solid #0A8276}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input::placeholder{color:#999}.ifx-multiselect-container .option{position:relative;padding:8px 16px;gap:8px;align-items:center;display:flex;font-style:normal;font-weight:400}.ifx-multiselect-container .option.small-select{font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .option.medium-select{font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .option:hover{background-color:#EEEDED}.ifx-multiselect-container .option:focus{background-color:#BFBBBB;outline:none}.ifx-multiselect-container .option.is-highlighted{background-color:#EEEDED}.ifx-multiselect-container .option.sub-option{padding-left:30px;}";
+
+// Debounce function
+function debounce(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+const Multiselect = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ifxSelect = index.createEvent(this, "ifxSelect", 7);
+    this.ifxMultiselectIsOpen = index.createEvent(this, "ifxMultiselectIsOpen", 7);
+    this.currentIndex = 0; //needed for option selection using keyboard
+    this.handleSearch = debounce((targetElement) => {
+      const searchTerm = targetElement.value.toLowerCase();
+      if (searchTerm === '') {
+        this.filteredOptions = this.loadedOptions;
+      }
+      else {
+        this.filteredOptions = this.loadedOptions.filter(option => option.label.toLowerCase().includes(searchTerm));
+      }
+    }, 300);
+    this.handleDocumentClick = (event) => {
+      const path = event.composedPath();
+      if (!path.includes(this.dropdownElement)) {
+        this.dropdownOpen = false;
+        document.removeEventListener('click', this.handleDocumentClick);
+        // Dispatch the ifxMultiselectIsOpen event
+        this.ifxMultiselectIsOpen.emit(this.dropdownOpen);
+      }
+    };
+    this.options = undefined;
+    this.batchSize = 50;
+    this.size = 'medium (40px)';
+    this.disabled = false;
+    this.error = false;
+    this.internalError = false;
+    this.errorMessage = "Error";
+    this.label = "";
+    this.persistentSelectedOptions = [];
+    this.placeholder = "";
+    this.listOfOptions = [];
+    this.dropdownOpen = false;
+    this.dropdownFlipped = undefined;
+    this.maxItemCount = undefined;
+    this.zIndex = 1;
+    this.isLoading = false;
+    this.loadedOptions = [];
+    this.filteredOptions = [];
+    this.searchEnabled = true;
+  }
+  async loadInitialOptions() {
+    this.isLoading = true;
+    this.internalError = this.error;
+    // Load the first batch of options (e.g., first 20)
+    this.loadedOptions = await this.fetchOptions(0, this.batchSize);
+    this.isLoading = false;
+  }
+  async fetchMoreOptions() {
+    this.isLoading = true;
+    const moreOptions = await this.fetchOptions(this.loadedOptions.length, this.batchSize);
+    this.loadedOptions = [...this.loadedOptions, ...moreOptions];
+    this.isLoading = false;
+  }
+  handleScroll(event) {
+    const element = event.target;
+    const halfwayPoint = Math.floor((element.scrollHeight - element.clientHeight) / 2); //loading more options when the user has scrolled halfway through the current list
+    if (element.scrollTop >= halfwayPoint) {
+      this.fetchMoreOptions();
+    }
+  }
+  async fetchOptions(startIndex, count) {
+    let allOptions = [];
+    // Parse options if it's a string, or use directly if it's an array
+    if (typeof this.options === 'string') {
+      try {
+        allOptions = JSON.parse(this.options);
+      }
+      catch (err) {
+        console.error('Failed to parse options:', err);
+      }
+    }
+    else if (Array.isArray(this.options)) {
+      allOptions = this.options;
+    }
+    else {
+      console.error('Unexpected value for options:', this.options);
+    }
+    // Slice the options array based on startIndex and count
+    const slicedOptions = allOptions.slice(startIndex, startIndex + count);
+    // Update the state for initially selected options, if needed
+    if (startIndex === 0) { // Assuming you want to do this only for the first batch
+      const initiallySelected = slicedOptions.filter(option => option.selected);
+      this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelected];
+    }
+    return slicedOptions;
+  }
+  componentDidLoad() {
+    setTimeout(() => {
+      this.positionDropdown();
+    }, 500);
+    // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)
+  }
+  componentWillLoad() {
+    this.loadInitialOptions();
+    this.filteredOptions = [...this.loadedOptions];
+  }
+  updateInternalError() {
+    this.internalError = this.error;
+  }
+  loadedOptionsChanged() {
+    this.filteredOptions = [...this.loadedOptions];
+  }
+  handleOptionClick(option) {
+    this.internalError = false;
+    if (this.isSelectionLimitReached(option)) {
+      console.error('Max item count reached');
+      this.internalError = true;
+      this.errorMessage = "Please consider the maximum number of items to choose from";
+      return;
+    }
+    this.updateSelection(option);
+    this.ifxSelect.emit(this.persistentSelectedOptions);
+  }
+  isSelectionLimitReached(option) {
+    let newOptionsLength = option.children ? option.children.length : 1;
+    return this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount &&
+      !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);
+  }
+  updateSelection(option) {
+    const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);
+    if (option.children && option.children.length > 0) {
+      this.handleParentOptionClick(option);
+    }
+    else {
+      this.handleChildOptionClick(option, wasSelected);
+    }
+  }
+  handleParentOptionClick(option) {
+    const allChildrenSelected = option.children.every(child => this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value));
+    if (allChildrenSelected) {
+      this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => !option.children.some(child => child.value === selectedOption.value))];
+    }
+    else {
+      const newChildren = [...option.children.filter(childOption => !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === childOption.value))];
+      this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...newChildren];
+    }
+  }
+  handleChildOptionClick(option, wasSelected) {
+    if (wasSelected) {
+      this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value)];
+    }
+    else {
+      this.persistentSelectedOptions = [...this.persistentSelectedOptions, option];
+    }
+  }
+  getSizeClass() {
+    return `${this.size}` === "s"
+      ? "small-select"
+      : "medium-select";
+  }
+  toggleDropdown() {
+    this.dropdownOpen = !this.dropdownOpen;
+    setTimeout(() => {
+      if (this.dropdownOpen) {
+        document.addEventListener('click', this.handleDocumentClick);
+      }
+      // Dispatch the ifxMultiselectIsOpen event
+      this.ifxMultiselectIsOpen.emit(this.dropdownOpen);
+    }, 0);
+    this.zIndex = Multiselect.globalZIndex++;
+  }
+  waitForElement(querySelectorFunc, callback, maxTries = 50) {
+    let tries = 0;
+    function request() {
+      requestAnimationFrame(() => {
+        const elements = querySelectorFunc();
+        if (elements.length > 0 || tries > maxTries) {
+          callback(elements);
+        }
+        else {
+          tries++;
+          request();
+        }
+      });
+    }
+    request();
+  }
+  handleKeyDown(event) {
+    if (this.disabled)
+      return; // If it's disabled, don't do anything.
+    const options = this.dropdownElement.querySelectorAll('.option');
+    switch (event.code) {
+      case 'Enter' :
+        if (this.dropdownOpen) {
+          this.selectItem(options);
+        }
+        else {
+          this.toggleDropdown();
+          // Wait a bit for the dropdown to finish rendering
+          this.waitForElement(() => {
+            return this.dropdownElement.querySelectorAll('.option');
+          }, (options) => {
+            this.updateHighlightedOption(options);
+          });
+        }
+        break;
+      case 'ArrowDown':
+        this.handleArrowDown(options);
+        if (this.dropdownOpen) {
+          this.updateHighlightedOption(options);
+        }
+        break;
+      case 'ArrowUp':
+        this.handleArrowUp(options);
+        if (this.dropdownOpen) {
+          this.updateHighlightedOption(options);
+        }
+        break;
+    }
+  }
+  handleWrapperClick(event) {
+    // This is your existing logic for positioning the dropdown
+    this.positionDropdown();
+    // Check if the event target is the wrapper itself and not a child element.
+    if (event.currentTarget === event.target) {
+      this.toggleDropdown();
+    }
+  }
+  clearSelection() {
+    this.persistentSelectedOptions = [];
+    this.ifxSelect.emit(this.persistentSelectedOptions); // if you want to emit empty selection after clearing
+  }
+  positionDropdown() {
+    var _a;
+    const wrapperRect = (_a = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - wrapperRect.bottom;
+    const spaceAbove = wrapperRect.top;
+    // If there's more space above than below the trigger and the dropdown doesn't fit below
+    if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) || (wrapperRect.bottom > window.innerHeight)) {
+      this.dropdownFlipped = true;
+    }
+    else {
+      this.dropdownFlipped = false;
+    }
+  }
+  // Helper function to update highlighted option based on currentIndex
+  updateHighlightedOption(options) {
+    // Clear all highlights
+    options.forEach((option) => option.classList.remove('is-highlighted'));
+    // Apply highlight to the current option
+    if (this.currentIndex >= 0 && this.currentIndex < options.length) {
+      options[this.currentIndex].classList.add('is-highlighted');
+    }
+  }
+  // Helper function to handle arrow down navigation
+  handleArrowDown(options) {
+    if (this.currentIndex < options.length - 1) {
+      this.currentIndex++;
+    }
+    else {
+      this.currentIndex = 0; // Wrap to the beginning.
+    }
+  }
+  // Helper function to handle arrow up navigation
+  handleArrowUp(options) {
+    if (this.currentIndex > 0) {
+      this.currentIndex--;
+    }
+    else {
+      this.currentIndex = options.length - 1; // Wrap to the end.
+    }
+  }
+  selectItem(options) {
+    // If there's a previous selection, remove its "selected" class
+    const previouslySelected = this.dropdownElement.querySelector('.option.selected');
+    if (previouslySelected) {
+      previouslySelected.classList.remove('selected');
+    }
+    // Mark the current item as selected
+    const currentOptionElement = options[this.currentIndex];
+    currentOptionElement.classList.add('selected');
+    const currentOptionValue = currentOptionElement.getAttribute('data-value');
+    const currentListOfOptions = typeof this.options === 'string' //passed in string form via storybook
+      ? JSON.parse(this.options).map((option) => ({ value: option.value, label: option.label, children: option.children, selected: option.selected })) // added selected
+      : this.options.map(option => (Object.assign({}, option)));
+    const currentOption = this.findInOptions(currentListOfOptions, currentOptionValue); // get the option object based on the currently selected value and the options array
+    this.handleOptionClick(currentOption);
+  }
+  renderOption(option, index$1) {
+    var _a;
+    const isIndeterminate = this.isOptionIndeterminate(option);
+    const isSelected = option.children ? isIndeterminate || this.isOptionSelected(option) : this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);
+    const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;
+    const uniqueId = `checkbox-${option.value}-${index$1}`; // Generate a unique ID using the index
+    return (index.h("div", null, index.h("div", { class: `option ${isSelected ? 'selected' : ''} 
+        ${this.getSizeClass()}`, "data-value": option.value, onClick: () => !disableCheckbox && this.handleOptionClick(option), tabindex: "0", role: `${((_a = option.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "treeitem" : "option"}` }, index.h("ifx-checkbox", { id: uniqueId, size: "s", value: isIndeterminate ? false : isSelected, indeterminate: isIndeterminate, disabled: disableCheckbox }), index.h("label", { htmlFor: uniqueId }, option.label)), option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index$1}-${childIndex}`))));
+  }
+  isOptionSelected(option) {
+    if (!option.children)
+      return false;
+    return option.children.every(child => this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value));
+  }
+  isOptionIndeterminate(option) {
+    if (!option.children)
+      return false;
+    const selectedChildren = option.children.filter(child => this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)).length;
+    return selectedChildren > 0 && selectedChildren < option.children.length;
+  }
+  findInOptions(options, searchTerm) {
+    for (const option of options) {
+      if (option.value === searchTerm) {
+        return option;
+      }
+      if (option.children) {
+        const foundInChildren = this.findInOptions(option.children, searchTerm);
+        if (foundInChildren) {
+          return foundInChildren;
+        }
+      }
+    }
+    return null;
+  }
+  renderSubOption(option, index$1) {
+    var _a;
+    const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);
+    const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;
+    const uniqueId = `checkbox-${option.value}-${index$1}`;
+    return (index.h("div", { class: `option sub-option ${isSelected ? 'selected' : ''} ${this.getSizeClass()}`, "data-value": option.value, role: `${((_a = option.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "option" : "treeitem"}`, onClick: () => !disableCheckbox && this.handleOptionClick(option), tabindex: "0" }, index.h("ifx-checkbox", { id: uniqueId, size: "s", value: isSelected, disabled: disableCheckbox }), index.h("label", { htmlFor: uniqueId }, option.label)));
+  }
+  render() {
+    // Create a label for the selected options
+    const selectedOptionsLabels = this.persistentSelectedOptions
+      .filter(option => {
+      // check if option is a child and its parent is selected
+      const isChildSelectedWithParent = this.persistentSelectedOptions.some(parentOption => parentOption.children &&
+        parentOption.children.some(child => child.value === option.value) &&
+        parentOption.selected);
+      return !isChildSelectedWithParent;
+    })
+      .map(option => option.label)
+      .join(', ');
+    return (index.h("div", { class: `ifx-multiselect-container`, ref: el => this.dropdownElement = el }, this.label ?
+      index.h("div", { class: "ifx-label-wrapper" }, index.h("span", null, this.label)) : null, index.h("div", { class: `ifx-multiselect-wrapper 
+        ${this.getSizeClass()} 
+        ${this.dropdownOpen ? 'active' : ''} 
+        ${this.dropdownFlipped ? 'is-flipped' : ''}
+        ${this.internalError ? 'error' : ""}
+        ${this.disabled ? 'disabled' : ""}`, tabindex: "0", onClick: (event) => this.handleWrapperClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, index.h("div", { class: `ifx-multiselect-input 
+          ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : ""}
+          `, onClick: this.disabled ? undefined : () => this.toggleDropdown() }, this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder), this.dropdownOpen && (index.h("div", { class: "ifx-multiselect-dropdown-menu", onScroll: (event) => this.handleScroll(event), style: { '--dynamic-z-index': this.zIndex.toString() } }, this.searchEnabled && index.h("input", { type: "text", role: "textbox", class: "search-input", onInput: (event) => this.handleSearch(event.target), placeholder: "Search..." }), this.filteredOptions.map((option, index) => this.renderOption(option, index)), this.isLoading && index.h("div", null, "Loading more options..."))), index.h("div", { class: "ifx-multiselect-icon-container" }, this.persistentSelectedOptions.length > 0 && (index.h("div", { class: "ifx-clear-button", onClick: () => this.clearSelection() }, index.h("ifx-icon", { icon: "cremove24" }))), index.h("div", { class: "icon-wrapper-up", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, index.h("ifx-icon", { key: 'icon-up', icon: 'chevronup-16' })), index.h("div", { class: "icon-wrapper-down", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, index.h("ifx-icon", { key: 'icon-down', icon: 'chevron-down-16' })))), this.internalError ?
+      index.h("div", { class: "ifx-error-message-wrapper" }, index.h("span", null, this.errorMessage)) : null));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "error": ["updateInternalError"],
+    "loadedOptions": ["loadedOptionsChanged"]
+  }; }
+};
+Multiselect.globalZIndex = 1; // This will be shared among all instances of the component.
+Multiselect.style = multiselectCss;
+
+exports.ifx_multiselect = Multiselect;
+
+//# sourceMappingURL=ifx-multiselect.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-multiselect.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-multiselect.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-navbar-item.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-navbar-item.cjs.entry.js
@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const navbarItemCss = ".navbar__container-left-content-navigation-item{display:flex;flex-direction:row;align-items:center;padding:0px 8px;gap:8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family)}.navbar__container-left-content-navigation-item.hideElement{display:none}.navbar__container-left-content-navigation-item:hover{color:#0A8276}.navbar__container-left-content-navigation-item:hover a{color:#0A8276}.navbar__container-left-content-navigation-item.remove{display:none}.navbar__container-left-content-navigation-item a{display:flex;align-items:center;font-weight:400;font-size:16px;color:#1D1D1D;text-decoration:none;flex:none;order:0;flex-grow:0}.navbar__container-left-content-navigation-item.removeLabel a{display:none}.navbar__container-left-content-navigation-item .navbar__container-right-content-navigation-item-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__container-left-content-navigation-item .navbar__container-right-content-navigation-item-icon-wrapper.removeWrapper{display:none}.navbar__container-left-content-navigation-item .navbar__container-right-content-navigation-item-icon-wrapper.hide{display:none}.navbar__container-left-content-navigation-item .navbar__container-right-content-navigation-item-navigation-profile{position:relative;width:24px;height:24px;background:#0A8276;border-radius:100px;flex:none;order:0;flex-grow:0;display:none}.navbar__container-left-content-navigation-item .navbar__container-right-content-navigation-item-navigation-profile.show{display:flex}.navbar__container-left-content-navigation-item .navbar__container-right-content-navigation-item-navigation-profile a{position:absolute;width:22px;height:20px;left:calc(50% - 11px);top:calc(50% - 10px);font-style:normal;font-weight:600;font-size:14px;line-height:20px;text-decoration:none;display:flex;align-items:center;justify-content:center;text-align:center;color:#FFFFFF}";
+
+const NavbarItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.isProfile = false;
+    this.hideLabel = false;
+    this.icon = "";
+    this.href = "";
+    this.target = "_self";
+    this.hideComponent = false;
+  }
+  componentWillLoad() {
+    const menuItem = this.el;
+    const slotValue = menuItem.getAttribute('slot');
+    if (slotValue) {
+      if (slotValue.toLowerCase() === 'right-menu-profile-item') {
+        this.isProfile = true;
+      }
+      else
+        this.isProfile = false;
+    }
+  }
+  render() {
+    return (index.h("div", { class: `navbar__container-left-content-navigation-item ${this.hideLabel ? 'removeLabel' : ""} ${this.hideComponent ? 'hideElement' : ""}` }, index.h("div", { class: `navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon && !this.isProfile ? "removeWrapper" : ""} ${this.isProfile ? "hide" : ""}` }, this.icon && index.h("ifx-icon", { icon: this.icon })), index.h("div", { class: `navbar__container-right-content-navigation-item-navigation-profile ${this.isProfile ? 'show' : ""}` }, index.h("a", { href: "javascript:void(0)" }, "AA")), index.h("a", { href: this.href, target: this.target }, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
+};
+NavbarItem.style = navbarItemCss;
+
+exports.ifx_navbar_item = NavbarItem;
+
+//# sourceMappingURL=ifx-navbar-item.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-navbar-item.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-navbar-item.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-navbar-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,k7DAAk7D;;MCQ37D,UAAU;;;qBAGyB,KAAK;qBACtB,KAAK;gBACX,EAAE;gBACF,EAAE;kBACA,OAAO;yBACC,KAAK;;EAEtC,iBAAiB;IACf,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC;IACzB,MAAM,SAAS,GAAG,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;IAC/C,IAAI,SAAS,EAAE;MACb,IAAI,SAAS,CAAC,WAAW,EAAE,KAAK,yBAAyB,EAAE;QACzD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;OACvB;;QAAM,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KAC/B;GACF;EAGD,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAE,kDAAkD,IAAI,CAAC,SAAS,GAAG,aAAa,GAAG,EAAE,IAAI,IAAI,CAAC,aAAa,GAAG,aAAa,GAAG,EAAE,EAAE,IAC5IA,iBAAK,KAAK,EAAE,gEAAgE,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,eAAe,GAAG,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,EAAE,EAAE,IAC/J,IAAI,CAAC,IAAI,IAAIA,sBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAChD,EACNA,iBAAK,KAAK,EAAE,sEAAsE,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,EAAE,EAAE,IAC9GA,eAAG,IAAI,EAAC,oBAAoB,SAAO,CAC/B,EACNA,eAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACrCA,qBAAQ,CACN,CACA,EACP;GACF;;;;;;;","names":["h"],"sources":["src/components/navbar/navbar-item.scss?tag=ifx-navbar-item&encapsulation=shadow","src/components/navbar/navbar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.navbar__container-left-content-navigation-item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0px 8px;\n  gap: 8px;\n  flex: none;\n  order: 0;\n  flex-grow: 0;\n  font-family: var(--ifx-font-family);\n\n  &.hideElement {\n    display: none;\n  }\n\n  &:hover {\n    color: tokens.$ifxColorOcean500;\n\n    & a {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n\n  &.remove {\n    display: none;\n  }\n\n  & a {\n    display: flex;\n    align-items: center;\n    font-weight: 400;\n    font-size: 16px;\n    //line-height: 24px;\n    color: tokens.$ifxColorBaseBlack;\n    text-decoration: none;\n    flex: none;\n    order: 0;\n    flex-grow: 0;\n  }\n\n  &.removeLabel {\n    & a {\n      display: none;\n    }\n  }\n\n  & .navbar__container-right-content-navigation-item-icon-wrapper {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    padding: 0px;\n    gap: 8px;\n    flex: none;\n    order: 0;\n    flex-grow: 0;\n\n    &.removeWrapper {\n      display: none;\n    }\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  & .navbar__container-right-content-navigation-item-navigation-profile {\n    position: relative;\n    width: 24px;\n    height: 24px;\n    background: tokens.$ifxColorOcean500;\n    border-radius: 100px;\n    flex: none;\n    order: 0;\n    flex-grow: 0;\n    display: none;\n\n    &.show {\n      display: flex;\n    }\n\n    & a {\n      position: absolute;\n      width: 22px;\n      height: 20px;\n      left: calc(50% - 22px/2);\n      top: calc(50% - 20px/2);\n      font-style: normal;\n      font-weight: 600;\n      font-size: 14px;\n      line-height: 20px;\n      text-decoration: none;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      text-align: center;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n}\n\n\n// @media screen and (min-width: 720px) {  \n//   .navbar__container-left-content-navigation-item { \n//     & a { \n//       display: none;\n//     }\n//   }\n// }\n\n// @media screen and (min-width: 1024px) { \n//   .navbar__container-left-content-navigation-item { \n//     & a { \n//       display: flex;\n//     }\n//   }\n// }","import { Component, h, Element, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-navbar-item',\n  styleUrl: 'navbar-item.scss',\n  shadow: true\n})\n\nexport class NavbarItem {\n\n  @Element() el;\n  @Prop({ mutable: true }) isProfile: boolean = false;\n  @Prop() hideLabel: boolean = false;\n  @Prop() icon: string = \"\"\n  @Prop() href: string = \"\"\n  @Prop() target: string = \"_self\";\n  @Prop() hideComponent: boolean = false;\n\n  componentWillLoad() {\n    const menuItem = this.el;\n    const slotValue = menuItem.getAttribute('slot')\n    if (slotValue) {\n      if (slotValue.toLowerCase() === 'right-menu-profile-item') {\n        this.isProfile = true;\n      } else this.isProfile = false;\n    }\n  }\n\n\n  render() {\n    return (\n      <div class={`navbar__container-left-content-navigation-item ${this.hideLabel ? 'removeLabel' : \"\"} ${this.hideComponent ? 'hideElement' : \"\"}`}>\n        <div class={`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon && !this.isProfile ? \"removeWrapper\" : \"\"} ${this.isProfile ? \"hide\" : \"\"}`}>\n          {this.icon && <ifx-icon icon={this.icon}></ifx-icon>}\n        </div>\n        <div class={`navbar__container-right-content-navigation-item-navigation-profile ${this.isProfile ? 'show' : \"\"}`}>\n          <a href=\"javascript:void(0)\">AA</a>\n        </div>\n        <a href={this.href} target={this.target}>\n          <slot />\n        </a>\n      </div>\n    )\n  }\n}"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-navbar-menu-item.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-navbar-menu-item.cjs.entry.js
@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const navbarMenuItemCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.navbar__menu-item{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.navbar__menu-item.hide{display:none}.navbar__menu-item span{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px;}.navbar__menu-item:hover{cursor:pointer;background-color:#EEEDED}.navbar__menu-item:active{background-color:#BFBBBB}.icon{margin-right:4px}";
+
+const NavbarMenuItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.href = "";
+    this.target = "_self";
+    this.hide = false;
+  }
+  render() {
+    let hrefAttr = this.href ? { href: this.href, target: this.target } : {};
+    return (index.h("a", Object.assign({}, hrefAttr, { class: `navbar__menu-item  ${this.hide ? 'hide' : ""}` }), index.h("span", null, index.h("slot", null))));
+  }
+};
+NavbarMenuItem.style = navbarMenuItemCss;
+
+exports.ifx_navbar_menu_item = NavbarMenuItem;
+
+//# sourceMappingURL=ifx-navbar-menu-item.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-navbar-menu-item.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-navbar-menu-item.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-navbar-menu-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,sgBAAsgB;;MCSnhB,cAAc;;;gBAEF,EAAE;kBACA,OAAO;gBACR,KAAK;;EAG7B,MAAM;IACJ,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC;IACzE,QACEA,+BAAO,QAAQ,IAAE,KAAK,EAAE,sBAAsB,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,EAAE,KACrEA,sBACEA,qBAAQ,CACH,CACL,EACJ;GACH;;;;;;","names":["h"],"sources":["src/components/navbar/navbar-menu-item.scss?tag=ifx-navbar-menu-item&encapsulation=shadow","src/components/navbar/navbar-menu-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.navbar__menu-item {\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n  display: flex;\n  align-items: center;\n  padding: 8px 16px;\n  gap: 8px;\n  font-family: var(--ifx-font-family);\n\n\n  &.hide {\n    display: none;\n  }\n\n  & span {\n    color: tokens.$ifxColorBaseBlack;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n    /* 150% */\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &:active {\n    background-color: tokens.$ifxColorEngineering300;\n  }\n}\n\n.icon {\n  margin-right: 4px;\n}","// dropdown-item.tsx\nimport { Component, Prop, h } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-navbar-menu-item',\n  styleUrl: 'navbar-menu-item.scss',\n  shadow: true\n})\n\nexport class NavbarMenuItem {\n\n  @Prop() href: string = \"\"\n  @Prop() target: string = \"_self\"\n  @Prop() hide: boolean = false;\n\n  \n  render() {\n    let hrefAttr = this.href ? { href: this.href, target: this.target } : {};\n    return (\n      <a {...hrefAttr} class={`navbar__menu-item  ${this.hide ? 'hide' : \"\"}`}>\n        <span>\n          <slot />\n        </span>\n      </a>\n    );\n  }\n}"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-navbar-menu.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-navbar-menu.cjs.entry.js
@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const navbarMenuCss = ":host{z-index:1000}.navbar-menu{display:flex;visibility:visible;flex-direction:column;width:224px;max-height:289px;min-width:224px;overflow-y:auto;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 0px;font-family:var(--ifx-font-family)}";
+
+const NavbarMenu = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.menu = undefined;
+  }
+  render() {
+    return (index.h("div", { class: 'navbar-menu' }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+NavbarMenu.style = navbarMenuCss;
+
+exports.ifx_navbar_menu = NavbarMenu;
+
+//# sourceMappingURL=ifx-navbar-menu.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-navbar-menu.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-navbar-menu.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-navbar-menu.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,8SAA8S;;MCSvT,UAAU;;;;;EAIrB,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,aAAa,IACtBA,qBAAQ,CACH,EACP;GACH;;;;;;;","names":["h"],"sources":["src/components/navbar/navbar-menu.scss?tag=ifx-navbar-menu&encapsulation=shadow","src/components/navbar/navbar-menu.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  z-index: 1000;\n}\n\n.navbar-menu {\n  display: flex;\n  visibility: visible;\n  flex-direction: column;\n  width: 224px;\n  max-height: 289px;\n  min-width: 224px;\n  overflow-y: auto;\n  background: tokens.$ifxColorBaseWhite;\n  box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  padding: 8px 0px;\n  font-family: var(--ifx-font-family);\n\n}","// dropdown-menu.tsx\nimport { Component, h, Element, State } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-navbar-menu',\n  styleUrl: 'navbar-menu.scss',\n  shadow: true\n})\n\nexport class NavbarMenu {\n  @Element() el;\n  @State() menu: HTMLElement;\n\n  render() {\n    return (\n      <div class='navbar-menu'>\n        <slot />\n      </div >\n    );\n  }\n}"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-navbar.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-navbar.cjs.entry.js
--- a/Server/wwwroot/package/dist/cjs/ifx-navbar.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-navbar.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-number-indicator.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-number-indicator.cjs.entry.js
@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const numberIndicatorCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.numberIndicator__container{display:inline-flex;padding:0px 4px;justify-content:center;align-items:center;border-radius:100px;background-color:#0A8276;font-family:var(--ifx-font-family)}.numberIndicator__container span{color:#FFFFFF;text-align:center;font-size:0.875rem;font-style:normal;font-weight:600;line-height:15px}.numberIndicator__container.inverted{background-color:#FFFFFF}.numberIndicator__container.inverted span{color:#0A8276}";
+
+const NumberIndicator = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.inverted = false;
+  }
+  render() {
+    return (index.h("div", { "aria-label": 'a number indicator', class: `numberIndicator__container ${this.inverted ? 'inverted' : ""}` }, index.h("span", null, index.h("slot", null))));
+  }
+};
+NumberIndicator.style = numberIndicatorCss;
+
+exports.ifx_number_indicator = NumberIndicator;
+
+//# sourceMappingURL=ifx-number-indicator.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-number-indicator.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-number-indicator.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-number-indicator.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,4iBAA4iB;;MCO1jB,eAAe;;;oBACE,KAAK;;EAEjC,MAAM;IACJ,QACEA,+BAAgB,oBAAoB,EAAC,KAAK,EAAE,8BAA8B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACzGA,sBACEA,qBAAQ,CACH,CACH,EACN;GACH;;;;;;","names":["h"],"sources":["src/components/number-indicator/number-indicator.scss?tag=ifx-number-indicator&encapsulation=shadow","src/components/number-indicator/number-indicator.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.numberIndicator__container {\n  display: inline-flex;\n  padding: 0px 4px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n  background-color: tokens.$ifxColorOcean500;\n  font-family: var(--ifx-font-family);\n\n  & span {\n    color: tokens.$ifxColorBaseWhite;\n    text-align: center;\n    font-size: tokens.$ifxFontSizeS;\n    font-style: normal;\n    font-weight: tokens.$ifxFontWeightSemibold;\n    line-height: 15px;\n  }\n\n  &.inverted {\n    background-color: tokens.$ifxColorBaseWhite;\n\n    & span {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n}","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-number-indicator',\n  styleUrl: 'number-indicator.scss',\n  shadow: true\n})\nexport class NumberIndicator {\n  @Prop() inverted: boolean = false;\n\n  render() {\n    return (\n      <div aria-label='a number indicator' class={`numberIndicator__container ${this.inverted ? 'inverted' : \"\"}`}>\n        <span>\n          <slot />\n        </span>\n      </div>\n    );\n  }\n}"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-pagination.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-pagination.cjs.entry.js
--- a/Server/wwwroot/package/dist/cjs/ifx-pagination.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-pagination.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-progress-bar.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-progress-bar.cjs.entry.js
@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const progressBarCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex;width:100%}.progress-bar{height:16px;bottom:0;right:0;top:0;left:0;display:flex;height:16px;border-radius:1px;width:100%;overflow:hidden;background-color:#EEEDED;font-family:var(--ifx-font-family, sans-serif)}.progress-bar .label{height:17px;border-radius:1px 0px 0px 1px}.progress-bar.s{height:4px}.progress-bar .progress{height:100%;background-color:#0A8276;position:relative;transition:width 0.2s ease}.progress-bar .progress:after{content:\"\";background-color:#EEEDED;height:100%;position:absolute}.progress-bar .label{display:flex;align-items:center;justify-content:center;position:absolute;font-style:normal;font-size:0.875rem;font-weight:400;line-height:1.25rem;color:#FFFFFF;top:0;bottom:0;left:0;right:0}";
+
+const ProgressBar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.value = 0;
+    this.label = '';
+    this.size = undefined;
+    this.showLabel = false;
+    this.internalValue = undefined;
+  }
+  valueChanged(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this.internalValue = newValue;
+    }
+  }
+  componentWillLoad() {
+    this.internalValue = this.value;
+  }
+  render() {
+    return (index.h("div", { "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, index.h("div", { class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && index.h("span", { class: "label" }, `${this.internalValue}%`))));
+  }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+};
+ProgressBar.style = progressBarCss;
+
+exports.ifx_progress_bar = ProgressBar;
+
+//# sourceMappingURL=ifx-progress-bar.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-progress-bar.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-progress-bar.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-progress-bar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,wzBAAwzB;;MCOl0B,WAAW;;;iBACE,CAAC;iBACD,EAAE;;qBAEG,KAAK;;;EAKlC,YAAY,CAAC,QAAgB,EAAE,QAAgB;IAC7C,IAAI,QAAQ,KAAK,QAAQ,EAAE;MACzB,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;GACjC;EAED,MAAM;IACJ,QACEA,+BAAgB,gBAAgB,gBAAa,IAAI,CAAC,KAAK,EAAG,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,EAAE,IAC1FA,iBAAK,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,GAAG,EAAE,IAC7D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,IAAIA,kBAAM,KAAK,EAAC,OAAO,IAAE,GAAG,IAAI,CAAC,aAAa,GAAG,CAAQ,CACzF,CACF,EACN;GACH;;;;;;;;;","names":["h"],"sources":["src/components/progress-bar/progress-bar.scss?tag=ifx-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n  width: 100%;\n}\n\n.progress-bar {\n  height: tokens.$ifxSize200;\n  bottom: 0;\n  right: 0;\n  top: 0;\n  left: 0;\n  display: flex;\n  height: tokens.$ifxSize200;\n  border-radius: tokens.$ifxBorderRadius12;\n  width: 100%; // Ensure the bar itself can grow up to 100% width\n  overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar\n  background-color: tokens.$ifxColorEngineering200;\n  font-family: var(--ifx-font-family, sans-serif);\n\n\n\n  .label {\n    height: 17px;\n    border-radius: 1px 0px 0px 1px;\n  }\n\n  &.s {\n    height: 4px;\n  }\n\n  .progress {\n    height: 100%;\n    background-color: #0A8276;\n    position: relative;\n    transition: width 0.2s ease;\n\n    &:after {\n      content: '';\n      background-color: #EEEDED;\n      height: 100%;\n      position: absolute;\n    }\n\n  }\n\n  .label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    font-style: normal;\n    font-size: tokens.$ifxFontSizeS;\n    font-weight: 400;\n    line-height: tokens.$ifxLineHeightS;\n    color: tokens.$ifxColorBaseWhite;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n}","import { Component, Prop, h, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true\n})\nexport class ProgressBar {\n  @Prop() value: number = 0;\n  @Prop() label: string = '';\n  @Prop() size: string;\n  @Prop() showLabel: boolean = false;\n\n  @State() internalValue: number;\n\n  @Watch('value')\n  valueChanged(newValue: number, oldValue: number) {\n    if (newValue !== oldValue) {\n      this.internalValue = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    this.internalValue = this.value;\n  }\n\n  render() {\n    return (\n      <div aria-label='a progress bar' aria-value={this.value}  class={`progress-bar ${this.size}`}>\n        <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\n          {this.showLabel && this.size !== \"s\" && <span class=\"label\">{`${this.internalValue}%`}</span>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-radio-button.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-radio-button.cjs.entry.js
@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const radioButtonCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}";
+
+const RadioButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ifxChange = index.createEvent(this, "ifxChange", 7);
+    this.disabled = false;
+    this.value = false;
+    this.error = false;
+    this.size = "s";
+    this.internalValue = undefined;
+    this.hasSlot = true;
+  }
+  valueChanged(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this.internalValue = newValue;
+    }
+  }
+  componentWillLoad() {
+    this.internalValue = this.value;
+    const slot = this.el.innerHTML;
+    if (slot) {
+      this.hasSlot = true;
+    }
+    else
+      this.hasSlot = false;
+  }
+  handleRadioButtonClick() {
+    if (!this.disabled && !this.error && !this.internalValue) {
+      this.internalValue = !this.internalValue;
+      this.el.shadowRoot.querySelector('.radioButton__wrapper').focus();
+      this.ifxChange.emit(this.internalValue);
+    }
+  }
+  render() {
+    return (index.h("div", { "aria-label": 'a radio button', "aria-value": this.value, "aria-disabled": this.disabled, class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: this.handleRadioButtonClick.bind(this) }, index.h("div", { class: `radioButton__wrapper 
+          ${this.internalValue ? 'checked' : ''} 
+          ${this.disabled ? 'disabled' : ''} 
+          ${this.error ? 'error' : ''}`, tabIndex: this.disabled ? -1 : 0 }, this.internalValue && index.h("div", { class: "radioButton__wrapper-mark" })), this.hasSlot && (index.h("div", { class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, index.h("slot", null)))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+};
+RadioButton.style = radioButtonCss;
+
+exports.ifx_radio_button = RadioButton;
+
+//# sourceMappingURL=ifx-radio-button.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-radio-button.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-radio-button.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-search-bar.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-search-bar.cjs.entry.js
@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+
+const searchBarCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#FFFFFF;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0A8276;cursor:pointer}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}";
+
+const SearchBar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ifxInput = index.createEvent(this, "ifxInput", 7);
+    this.ifxSearchBarIsOpen = index.createEvent(this, "ifxSearchBarIsOpen", 7);
+    this.handleCloseButton = () => {
+      this.internalState = !this.internalState;
+      this.ifxSearchBarIsOpen.emit(this.internalState);
+    };
+    this.handleFocus = () => {
+      this.internalState = true;
+    };
+    this.isOpen = true;
+    this.disabled = false;
+    this.internalState = undefined;
+    this.value = undefined;
+  }
+  handlePropChange() {
+    this.internalState = this.isOpen;
+  }
+  setInitialState() {
+    this.internalState = this.isOpen;
+  }
+  componentWillLoad() {
+    this.setInitialState();
+  }
+  handleInput(event) {
+    this.value = event.detail;
+  }
+  render() {
+    return (index.h("div", { "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (index.h("div", { class: "search-bar-wrapper" }, index.h("ifx-search-field", { disabled: this.disabled, value: this.value, onIfxInput: this.handleInput.bind(this) }, index.h("ifx-icon", { icon: "search-16", slot: "search-icon" })), index.h("a", { tabindex: "-1", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (index.h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, index.h("ifx-icon", { icon: "search-16" })))));
+  }
+  static get watchers() { return {
+    "isOpen": ["handlePropChange"]
+  }; }
+};
+SearchBar.style = searchBarCss;
+
+exports.ifx_search_bar = SearchBar;
+
+//# sourceMappingURL=ifx-search-bar.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-search-bar.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-search-bar.cjs.entry.js.map
@ -0,0 +1 @@
+{"file":"ifx-search-bar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,05BAA05B;;MCOl6B,SAAS;;;;;IAcpB,sBAAiB,GAAG;MAClB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;MACzC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;KACjD,CAAA;IAcD,gBAAW,GAAG;MACZ,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;KAC3B,CAAA;kBAhCyB,IAAI;oBACF,KAAK;;;;EAQjC,gBAAgB;IACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;GAClC;EAOD,eAAe;IACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;GAClC;EAED,iBAAiB;IACf,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,WAAW,CAAC,KAAkB;IAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;GAC3B;EAOD,MAAM;IACJ,QACEA,+BAAgB,cAAc,mBAAgB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,cAAc,IAAI,CAAC,aAAa,GAAG,MAAM,GAAG,QAAQ,EAAE,IACvH,IAAI,CAAC,aAAa,IACjBA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,8BAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IACnGA,sBAAU,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,GAAY,CACxC,EAEnBA,eAAG,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,YAAW,CACjF,KAENA,iBAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACnEA,sBAAU,IAAI,EAAC,WAAW,GAAY,CAClC,CACP,CACG,EACN;GACH;;;;;;;;;","names":["h"],"sources":["src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  width: 100%; //revert\n  display: flex;\n}\n\n.search-bar {\n  box-sizing: border-box;\n  height: tokens.$ifxSize500;\n  background-color: tokens.$ifxColorBaseWhite;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  font-family: var(--ifx-font-family);\n\n  &.closed {\n    display: flex;\n    width: auto;\n    justify-content: flex-start;\n  }\n\n  & .search-bar-wrapper {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace200;\n    width: 100%;\n\n    & a {\n      text-decoration: none;\n      font-size: tokens.$ifxFontSizeM;\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightSemibold;\n      line-height: tokens.$ifxLineHeightM;\n      color: tokens.$ifxColorOcean500;\n      cursor: pointer;\n    }\n\n    & ifx-search-field {\n      width: 100%;\n    }\n  }\n\n  .search-bar__icon-wrapper {\n    display: none;\n    flex-direction: row;\n    align-items: center;\n\n    & ifx-icon:hover {\n      cursor: pointer;\n    }\n  }\n\n  &.closed {\n    .search-bar__icon-wrapper {\n      display: flex;\n    }\n\n    .search-bar-wrapper {\n      display: none;\n    }\n  }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-search-bar',\n  styleUrl: 'search-bar.scss',\n  shadow: true,\n})\nexport class SearchBar {\n  @Prop() isOpen: boolean = true;\n  @Prop() disabled: boolean = false;\n  @State() internalState: boolean;\n  @Prop({ mutable: true }) value: string;\n  @Event() ifxInput: EventEmitter;\n  @Event() ifxSearchBarIsOpen: EventEmitter;\n\n\n  @Watch('isOpen')\n  handlePropChange() {\n    this.internalState = this.isOpen;\n  }\n\n  handleCloseButton = () => {\n    this.internalState = !this.internalState;\n    this.ifxSearchBarIsOpen.emit(this.internalState)\n  }\n\n  setInitialState() {\n    this.internalState = this.isOpen;\n  }\n\n  componentWillLoad() {\n    this.setInitialState();\n  }\n\n  handleInput(event: CustomEvent) {\n    this.value = event.detail;\n  }\n\n  handleFocus = () => {\n    this.internalState = true;\n  }\n\n\n  render() {\n    return (\n      <div aria-label='a search bar' aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n        {this.internalState ? (\n          <div class=\"search-bar-wrapper\">\n            <ifx-search-field disabled={this.disabled} value={this.value} onIfxInput={this.handleInput.bind(this)}>\n              <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n            </ifx-search-field>\n\n            <a tabindex=\"-1\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n          </div>\n        ) : (\n          <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n            <ifx-icon icon=\"search-16\"></ifx-icon>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
--- a/Server/wwwroot/package/dist/cjs/ifx-search-field.cjs.entry.js
+++ b/Server/wwwroot/package/dist/cjs/ifx-search-field.cjs.entry.js
@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca0e0765.js');
+const index$1 = require('./index-2fdce9ad.js');
+require('./_commonjsHelpers-4213291f.js');
+
+const searchFieldCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex}.search-field{box-sizing:border-box;background-color:#FFFFFF;width:100%;font-family:var(--ifx-font-family)}.search-field .search-field__wrapper{box-sizing:border-box;height:40px;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;padding:8px 16px;gap:12px;flex:none;order:0;align-self:stretch;flex-grow:0;position:relative;width:100%;outline:none;color:#8D8786}.search-field .search-field__wrapper.focused{border:1px solid #0A8276}.search-field .search-field__wrapper.focused ifx-icon{color:#575352}.search-field .search-field__wrapper.search-field__wrapper-s{height:36px}.search-field .search-field__wrapper:hover:not(.focused,:focus){border:1px solid #3C3A39}.search-field .search-field__wrapper:focus{outline:none;border:1px solid #0A8276}.search-field .search-field__wrapper .delete-icon{right:12px;cursor:pointer}.search-field .search-field__wrapper input[type=text]{font-style:normal;font-weight:400;font-size:16px;color:#8D8786;border:none;width:100%;outline:none;height:16px}.search-field .search-field__wrapper input[type=text]:focus{outline:none;color:#1d1d1d}.search-field .search-field__wrapper input[type=text]:disabled{background-color:#EEEDED}.search-field .search-field__wrapper:has(input[disabled]){background-color:#EEEDED}";
+
+const SearchField = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ifxInput = index.createEvent(this, "ifxInput", 7);
+    this.handleInput = () => {
+      const query = this.inputElement.value;
+      this.value = query; // update the value property when input changes
+      this.ifxInput.emit(this.value);
+    };
+    this.handleDelete = () => {
+      this.inputElement.value = '';
+      this.value = "";
+      this.ifxInput.emit(null);
+    };
+    this.value = '';
+    this.insideDropdown = false;
+    this.showDeleteIcon = false;
+    this.showDeleteIconInternalState = false;
+    this.disabled = false;
+    this.size = 'l';
+    this.isFocused = false;
+  }
+  handleOutsideClick(event) {
+    const path = event.composedPath();
+    if (!path.includes(this.inputElement)) {
+      this.isFocused = false;
+    }
+  }
+  valueWatcher(newValue) {
+    if (newValue !== this.inputElement.value) {
+      this.inputElement.value = newValue;
+    }
+  }
+  focusInput() {
+    this.inputElement.focus();
+    this.isFocused = true;
+  }
+  componentWillUpdate() {
+    if (this.value !== "") {
+      this.showDeleteIconInternalState = true;
+    }
+    else
+      this.showDeleteIconInternalState = false;
+  }
+  render() {
+    return (index.h("div", { "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, index.h("div", { class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, index.h("ifx-icon", { icon: "search-16", class: "search-icon" }), index.h("input", { ref: (el) => (this.inputElement = el), type: "text", onInput: () => this.handleInput(), placeholder: "Search...", disabled: this.disabled, value: this.value }), this.showDeleteIcon && this.showDeleteIconInternalState ? (index.h("ifx-icon", { icon: "cremove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
+  }
+  getSizeClass() {
+    return `${this.size}` === "s"
+      ? "search-field__wrapper-s"
+      : "";
+  }
+  getWrapperClassNames() {
+    return index$1.classnames(`search-field__wrapper`, `search-field__wrapper ${this.getSizeClass()}`, `${this.isFocused ? 'focused' : ""}`);
+  }
+  static get watchers() { return {
+    "value": ["valueWatcher"]
+  }; }
+};
+SearchField.style = searchFieldCss;
+
+exports.ifx_search_field = SearchField;
+
+//# sourceMappingURL=ifx-search-field.cjs.entry.js.map
--- a/Server/wwwroot/package/dist/cjs/ifx-search-field.cjs.entry.js.map
+++ b/Server/wwwroot/package/dist/cjs/ifx-search-field.cjs.entry.js.map
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`{"file":"_commonjsHelpers-4213291f.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}`
				`@ -0,0 +1 @@`
				{"file":"ifx-badge.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,2YAA2Y;;MCO/Y,KAAK;;;;EAEhB,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,kBAAkB,IAC3BA,qBAAQ,CACJ,EACN;GACH;;;;;;","names":["h"],"sources":["src/components/badge/badge.scss?tag=ifx-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.badge__container {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 4px 8px;\n gap: tokens.$ifxSpace100;\n border: 1px solid tokens.$ifxColorEngineering200;\n background-color: tokens.$ifxColorEngineering200;\n border-radius: 100px;\n font-family: var(--ifx-font-family);\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n font-weight: 400;\n color: tokens.$ifxColorBaseBlack;\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'ifx-badge',\n styleUrl: 'badge.scss',\n shadow: true\n})\nexport class Badge {\n\n render() {\n return (\n <div class=\"badge__container\">\n <slot />\n </div>\n );\n }\n}"],"version":3}
				`@ -0,0 +1 @@`
				{"file":"ifx-breadcrumb-item-label.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,sBAAsB,GAAG,swBAAswB;;MCOxxB,mBAAmB;;;;;;kBAGL,OAAO;;EAIhC,gBAAgB;IACd,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAA;IACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;IACjE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;GACjD;EAED,MAAM;IACJ,QACEA,eAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,IAC7EA,sBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,EACtCA,kBAAM,KAAK,EAAC,eAAe,IACzBA,qBAAQ,CACH,EACRA,kBAAM,KAAK,EAAC,mBAAmB,IAC9BA,sBAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ,EACJ;GACH;;;;;;;","names":["h"],"sources":["src/components/breadcrumb/breadcrumb-item-label.scss?tag=ifx-breadcrumb-item-label&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item-label.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-item-label-container {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n\n &.margin {\n margin-left: 16px;\n }\n\n & ifx-icon:empty {\n display: none;\n }\n\n & .label-icon-wrapper {\n display: inline-flex;\n }\n\n & .menu-icon-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n\n &.hide {\n display: none;\n }\n\n & ifx-icon {\n transition: .3s;\n }\n\n &.show {\n & ifx-icon {\n transition: .3s;\n transform: rotate(180deg);\n }\n }\n }\n}","import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item-label',\n styleUrl: 'breadcrumb-item-label.scss',\n shadow: true,\n})\nexport class BreadcrumbItemLabel {\n @Prop() icon: string;\n @Prop() url: string;\n @Prop() target: string = \"_self\"\n @Element() el;\n @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\n\n componentDidLoad() { \n const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\n const menuWrapper = container.querySelector('.menu-icon-wrapper')\n this.breadcrumbMenuIconWrapper.emit(menuWrapper)\n }\n\n render() {\n return (\n <a href={this.url} target={this.target} class=\"breadcrumb-item-label-container\">\n <ifx-icon icon={this.icon}></ifx-icon>\n <span class=\"label-wrapper\">\n <slot />\n </span>\n <span class=\"menu-icon-wrapper\">\n <ifx-icon icon=\"chevron-down-12\"></ifx-icon>\n </span>\n </a>\n );\n }\n}\n"],"version":3}
				`@ -0,0 +1 @@`
				{"file":"ifx-breadcrumb.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,8QAA8Q;;MCOvR,UAAU;;;;EAGrB,gBAAgB;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;IAC9C,IAAI,CAAC,yCAAyC,CAAC,OAAO,CAAC,CAAC;GAEzD;EAEO,yCAAyC,CAAC,OAAoB;IACpE,IAAI,CAAC,OAAO,EAAE;MACZ,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;MACnC,OAAO;KACR;IACD,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;IAEtB,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC3C,IAAG,IAAI,EAAE;MACP,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;MAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC7C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;UAC3C,MAAM,eAAe,GAAG,IAAoC,CAAC;UAC7D,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE;YACxC,eAAe,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YAC9B,eAAe,CAAC,gBAAgB,CAAC,OAAO,EAAE;cACxC,IAAI,eAAe,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE;gBACvC,eAAe,CAAC,IAAI,EAAE,CAAC;eACxB;aACF,CAAC,CAAC;WACJ;SACF;OACF;KACF;GACF;EAED,MAAM;IACJ,QACEA,+BAAgB,4BAA4B,IAC1CA,gBAAI,KAAK,EAAC,YAAY,IACpBA,qBAAQ,CACL,CACD,EACN;GACH;;;;;;;","names":["h"],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.breadcrumb {\n list-style: none;\n padding: 0px;\n margin: 0px;\n display: flex;\n flex-direction: row;\n font-family: var(--ifx-font-family);\n font-size: tokens.$ifxFontSizeS;\n align-items: flex-start;\n //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n// color: tokens.$ifxColorEngineering300;\n// margin: 0 16px;\n// }","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true\n})\nexport class Breadcrumb {\n @Element() el;\n\n componentDidLoad() {\n const element = this.el.shadowRoot.firstChild;\n this.addEventListenersToHandleCustomFocusState(element);\n\n }\n\n private addEventListenersToHandleCustomFocusState(element: HTMLElement) {\n if (!element) {\n console.error('element not found');\n return;\n }\n element.tabIndex = -1;\n\n const slot = element.querySelector('slot');\n if(slot) { \n const assignedNodes = slot.assignedNodes();\n \n for (let i = 0; i < assignedNodes.length; i++) {\n const node = assignedNodes[i];\n if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n const breadcrumbLabel = node as HTMLIfxBreadcrumbItemElement;\n if (!breadcrumbLabel.hasAttribute('url')) {\n breadcrumbLabel.tabIndex = -1;\n breadcrumbLabel.addEventListener('focus', () => {\n if (breadcrumbLabel.hasAttribute('url')) {\n breadcrumbLabel.blur();\n }\n });\n }\n }\n }\n }\n }\n\n render() {\n return (\n <nav aria-label=\"Page navigation breadcrumb\">\n <ol class=\"breadcrumb\">\n <slot />\n </ol>\n </nav>\n );\n }\n}\n"],"version":3}
				`@ -0,0 +1 @@`
				{"file":"ifx-card-headline.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,oiBAAoiB;;MCQ/iB,YAAY;;;;;qBAIM,KAAK;;EAElC,iBAAiB;;IACf,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAEhD,IAAI,WAAW,EAAE;MACf,MAAM,SAAS,GAAG,MAAA,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,0CAAE,SAAS,CAAC;MAE3E,IAAI,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;QACjD,IAAI,CAAC,SAAS,GAAG,YAAY,CAAA;OAC9B;MAED,MAAM,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;MACxD,IAAI,IAAI,EAAE;QACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;OACrB;KACF;GACF;EAGD,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAE,0BAA0B,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,IACpEA,iBAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,EAAE,EAAE,IAChFA,qBAAQ,CACJ,CACF,EACP;GACF;;;;;;;","names":["h"],"sources":["src/components/card/card-headline/card-headline.scss?tag=ifx-card-headline&encapsulation=shadow","src/components/card/card-headline/card-headline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n pointer-events: none;\n}\n\n.card__headline-wrapper {\n padding-bottom: 16px;\n\n &.withDesc {\n padding-bottom: 8px;\n }\n}\n\n.card-headline {\n margin-top: 0;\n padding-top: 0;\n font-family: var(--ifx-font-family);\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSize3xl;\n line-height: tokens.$ifxLineHeight3xl;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &.isHovered {\n color: #0A8276;\n }\n\n &.horizontal {\n font-size: tokens.$ifxFontSizeXl;\n line-height: 28px;\n }\n\n}","import { Component, h, Element, State, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-headline',\n styleUrl: 'card-headline.scss',\n shadow: true,\n})\n\nexport class CardHeadline {\n @Element() el;\n @State() direction: string;\n @State() hasDesc: boolean;\n @Prop() isHovered: boolean = false;\n\n componentWillLoad() {\n const cardElement = this.el.closest('ifx-card');\n\n if (cardElement) {\n const cardClass = cardElement.shadowRoot.querySelector('.card')?.className;\n\n if (cardClass && cardClass.includes('horizontal')) {\n this.direction = 'horizontal'\n }\n\n const desc = cardElement.querySelector('ifx-card-text');\n if (desc) {\n this.hasDesc = true;\n }\n }\n }\n\n\n render() {\n return (\n <div class={`card__headline-wrapper ${this.hasDesc ? 'withDesc' : \"\"}`}>\n <div class={`card-headline ${this.direction} ${this.isHovered ? 'isHovered' : \"\"}`}>\n <slot />\n </div>\n </div>\n )\n }\n}\n"],"version":3}
				`@ -0,0 +1 @@`
				{"file":"ifx-card-image.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,4EAA4E;;MCQpF,SAAS;;;;;;;;EAMpB,cAAc,CAAC,QAAQ;IACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;GAChC;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;GACnC;EAED,kBAAkB;IAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;GACnC;EAED,MAAM;IACJ,QACEA,iBAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,YAAY,GAAG,EACxD;GACH;;;;;;","names":["h"],"sources":["src/components/card/card-image/card-image.scss?tag=ifx-card-image&encapsulation=shadow","src/components/card/card-image/card-image.tsx"],"sourcesContent":[".card-image {\n width: 100%;\n height: 100%;\n vertical-align: bottom;\n object-fit: cover;\n}","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-image',\n styleUrl: 'card-image.scss',\n shadow: true,\n})\n\nexport class CardImage {\n @Prop() src: string;\n @Prop() alt: string;\n @Prop() position: string;\n @Event() imgPosition: EventEmitter;\n\n handlePosition(position) {\n this.imgPosition.emit(position)\n }\n\n componentWillLoad() {\n this.handlePosition(this.position)\n }\n\n componentDidUpdate() {\n this.handlePosition(this.position)\n }\n\n render() {\n return (\n <img src={this.src} alt={this.alt} class=\"card-image\" />\n );\n }\n}\n"],"version":3}
				`@ -0,0 +1 @@`
				{"file":"ifx-card-links.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,ySAAyS;;MCQjT,SAAS;;;;EAGpB,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,WAAW,IACpBA,qBAAQ,CACJ,EACP;GACF;;;;;;;","names":["h"],"sources":["src/components/card/card-links/card-links.scss?tag=ifx-card-links&encapsulation=shadow","src/components/card/card-links/card-links.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.container {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace250;\n flex-wrap: wrap;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n padding: 0px 24px 24px 24px;\n\n /* wraps text at spaces and within words /\n word-wrap: break-word;\n / breaks text within a word if necessary /\n overflow-wrap: anywhere;\n / breaks text at arbitrary points when needed */\n\n &:hover {\n cursor: initial;\n }\n}","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-links',\n styleUrl: 'card-links.scss',\n shadow: true,\n})\n\nexport class CardLinks {\n @Element() el;\n\n render() {\n return (\n <div class='container'>\n <slot />\n </div>\n )\n }\n}\n"],"version":3}
				`@ -0,0 +1 @@`
				{"file":"ifx-card-overline.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,qUAAqU;;MCQhV,YAAY;;;;EAEvB,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,eAAe,IACxBA,qBAAQ,CACJ,EACN;GACH;;;;;;","names":["h"],"sources":["src/components/card/card-overline/card-overline.scss?tag=ifx-card-overline&encapsulation=shadow","src/components/card/card-overline/card-overline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n pointer-events: none;\n}\n\n.card-overline {\n font-size: tokens.$ifxFontSizeM;\n font-weight: tokens.$ifxFontWeightRegular;\n color: tokens.$ifxColorEngineering500;\n padding-bottom: 4px;\n\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n\n word-break: break-all;\n\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-overline',\n styleUrl: 'card-overline.scss',\n shadow: true,\n})\n\nexport class CardOverline {\n\n render() {\n return (\n <div class=\"card-overline\">\n <slot />\n </div>\n );\n }\n}\n"],"version":3}
				`@ -0,0 +1 @@`
				{"file":"ifx-card-text.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,qYAAqY;;MCQ5Y,QAAQ;;;;;EAInB,iBAAiB;IACf,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnE,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IACvE,IAAG,IAAI,IAAI,MAAM,EAAE;MACjB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;GACF;EAED,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,EAAE,IAC7DA,iBAAK,KAAK,EAAE,WAAW,IACrBA,qBAAQ,CACJ,CACF,EACN;GACH;;;;;;;","names":["h"],"sources":["src/components/card/card-text/card-text.scss?tag=ifx-card-text&encapsulation=shadow","src/components/card/card-text/card-text.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n pointer-events: none;\n}\n\n.card__text-wrapper {\n padding-bottom: 0px;\n\n &.hasBtn {\n padding-bottom: 16px;\n }\n}\n\n.card-text {\n line-height: tokens.$ifxLineHeightM;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n white-space: wrap;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n}","import { Component, h, Element, State} from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-text',\n styleUrl: './card-text.scss',\n shadow: true,\n})\n\nexport class CardText {\n @Element() el;\n @State() hasBtn: boolean;\n\n componentWillLoad() { \n const link = this.el.closest('ifx-card').querySelector('ifx-link');\n const button = this.el.closest('ifx-card').querySelector('ifx-button');\n if(link \|\| button) { \n this.hasBtn = true;\n }\n }\n\n render() {\n return (\n <div class={`card__text-wrapper ${this.hasBtn ? 'hasBtn' : \"\"}`}>\n <div class={`card-text`}>\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"version":3}
				`@ -0,0 +1 @@`
				{"file":"ifx-chip.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,u0BAAu0B;;MCQ10B,IAAI;;;;;yBAGkB,EAAE;;EAInC,kBAAkB,CAAC,KAAiB;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;MAC3B,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;GACF;EAGD,+BAA+B,CAAC,KAAkB;IAChD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC;IAClC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACxC,IAAI,CAAC,UAAU,EAAE,CAAA;GAClB;EAED,eAAe;IACb,IAAI,qBAAqB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IACvE,OAAO,qBAAqB,CAAA;GAC7B;EAED,UAAU;IACR,IAAI,qBAAqB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;IAClD,qBAAqB,CAAC,MAAM,GAAG,KAAK,CAAC;GACtC;EAED,UAAU;IACR,IAAI,qBAAqB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;IAClD,qBAAqB,CAAC,MAAM,GAAG,CAAC,qBAAqB,CAAC,MAAM,CAAC;IAC7D,IAAI,CAAC,eAAe,EAAE,CAAA;GACvB;EAED,eAAe;IACb,MAAM,gBAAgB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAA;IAClF,gBAAgB,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;GAC1C;EAED,MAAM;IACJ,QACEA,+BAAiB,IAAI,CAAC,aAAa,gBAAa,2BAA2B,EAAC,KAAK,EAAC,oBAAoB,IACpGA,iBAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IACnDA,iBAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,WAAW,CACvD,EACNA,iBAAK,KAAK,EAAC,sBAAsB,IAC/BA,sBAAU,IAAI,EAAC,eAAe,GAAY,CACtC,CACF,EACNA,kBAAM,IAAI,EAAC,MAAM,GAAG,CAChB,EACN;GACH;;;;;;;","names":["h"],"sources":["src/components/chips/chip.scss?tag=ifx-chip&encapsulation=shadow","src/components/chips/chip.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-block;\n}\n\n.container {\n //display: inline-block;\n position: relative;\n font-family: var(--ifx-font-family);\n\n & .wrapper {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 8px 16px;\n gap: tokens.$ifxSpace100;\n\n background: tokens.$ifxColorBaseWhite;\n\n border: 1px solid #BFBBBB;\n border-radius: 100px;\n\n &:hover {\n cursor: pointer;\n border: 1px solid #575352;\n }\n\n &:active {\n border: 1px solid #0A8276;\n }\n\n & .wrapper-label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n & .wrapper-close-button {\n & ifx-icon {\n transition: .3s;\n width: 12px;\n height: 12px;\n }\n\n &.show {\n & ifx-icon {\n transition: .3s;\n transform: rotate(-180deg);\n }\n }\n }\n }\n}","import { Component, h, Element, Prop, Listen, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-chip',\n styleUrl: 'chip.scss',\n shadow: true\n})\n\nexport class Chip {\n @Element() el;\n @Prop() placeholder: string;\n @State() selectedValue: string = \"\";\n @Event() ifxDropdownMenu: EventEmitter<CustomEvent>;\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.el)) {\n this.closedMenu();\n }\n }\n\n @Listen('ifxDropdownItem')\n handleDropdownItemValueEmission(event: CustomEvent) {\n this.selectedValue = event.detail;\n this.ifxDropdownMenu.emit(event.detail);\n this.toggleMenu()\n }\n\n getDropdownMenu() { \n let dropdownMenuComponent = this.el.querySelector('ifx-dropdown-menu');\n return dropdownMenuComponent\n }\n\n closedMenu() {\n let dropdownMenuComponent = this.getDropdownMenu()\n dropdownMenuComponent.isOpen = false;\n }\n\n toggleMenu() { \n let dropdownMenuComponent = this.getDropdownMenu()\n dropdownMenuComponent.isOpen = !dropdownMenuComponent.isOpen;\n this.toggleCloseIcon()\n }\n\n toggleCloseIcon() { \n const closeIconWrapper = this.el.shadowRoot.querySelector('.wrapper-close-button')\n closeIconWrapper.classList.toggle('show')\n }\n\n render() {\n return (\n <div aria-value={this.selectedValue} aria-label='chip with a dropdown menu' class=\"dropdown container\">\n <div class=\"wrapper\" onClick={() => this.toggleMenu()}>\n <div class=\"wrapper-label\">\n {this.selectedValue ? this.selectedValue : this.placeholder}\n </div>\n <div class=\"wrapper-close-button\">\n <ifx-icon icon=\"chevrondown12\"></ifx-icon>\n </div>\n </div>\n <slot name=\"menu\" />\n </div>\n );\n }\n}"],"version":3}