### Initialize MCP Server Setup

Source: https://ix.siemens.io/docs/home/mcp-server

Run this command to start the initial setup process for the MCP server in your project. This command will guide you through token and tool configuration.

```bash
npx @siemens/ix-mcp init
```

--------------------------------

### Install Dependencies and Start Development Server

Source: https://ix.siemens.io/docs/home/getting-started/starter-app

After scaffolding, navigate to the generated project folder, install dependencies, and start the development server.

```bash
cd my-ix-react-app  
pnpm install  
pnpm dev  

```

--------------------------------

### Basic Workflow Example

Source: https://ix.siemens.io/docs/components/workflow

Demonstrates the basic usage of the workflow component. No specific setup is required beyond including the component.

```html
<ix-workflow>
  <ix-workflow-step label="Step 1"></ix-workflow-step>
  <ix-workflow-step label="Step 2"></ix-workflow-step>
  <ix-workflow-step label="Step 3"></ix-workflow-step>
</ix-workflow>
```

--------------------------------

### Application Switch Configuration Example

Source: https://ix.siemens.io/docs/components/application/code

Example configuration for the application switch, controlling navigation context.

```APIDOC
## Application Switch Configuration

The navigation to another application is implemented via `window.open`. You can control if the navigation should happen inside the current browser context (`target: '_self'`) or inside a new tab (`target: '_blank'`)

### Configuration Object Example
```json
{
  "id": "demo-app-2",
  "name": "Calculator App",
  "description": "Example description for Calculator App",
  "iconSrc": "...url to some icon",
  "url": "...target url",
  "target": "_self" 
}
```

### Target Options
- `_self`: Navigate in the current browser context.
- `_blank`: Navigate in a new tab.
```

--------------------------------

### Setup MCP Server Configurations

Source: https://ix.siemens.io/docs/home/mcp-server

Use the setup command to create or update MCP configuration files for your tools, utilizing the existing token.

```bash
npx @siemens/ix-mcp setup  
```

--------------------------------

### Vue Application Context Setup

Source: https://ix.siemens.io/docs/components/modal/code

Demonstrates setting up the `IxApplicationContext` in a Vue application using `<script setup>`. This context is required for the `showModal` function.

```vue
<script setup lang="ts">
import { IxApplicationContext } from '@siemens/ix-vue';
</script>

<template>
  <IxApplicationContext>
    <!-- <App /> -->
  </IxApplicationContext>
</template>
```

--------------------------------

### Advanced Pagination Example

Source: https://ix.siemens.io/docs/components/pagination/code

Shows an advanced pagination setup with custom item counts and ARIA labels.

```html
<ix-pagination
  advanced
  item-count="20"
  item-count-options="[10, 20, 50, 100]"
  aria-label-chevron-left-icon-button="Previous"
  aria-label-chevron-right-icon-button="Next"
  aria-label-page-selection="Select page"
  i18n-items="Items per page"
  i18n-of="of"
  i18n-page="Page"
></ix-pagination>
```

--------------------------------

### Install Siemens Libraries with NPM

Source: https://ix.siemens.io/docs/home/installation/vue

Install the core Siemens libraries, Vue integration, and icons using npm.

```bash
npm install @siemens/ix @siemens/ix-vue @siemens/ix-icons  
```

--------------------------------

### Basic Pagination Example

Source: https://ix.siemens.io/docs/components/pagination

A simple example of the pagination component in its basic mode. This is suitable for straightforward content navigation.

```html
<ix-pagination></ix-pagination>
```

--------------------------------

### Install Siemens Libraries with PNPM

Source: https://ix.siemens.io/docs/home/installation/vue

Install the core Siemens libraries, Vue integration, and icons using PNPM.

```bash
pnpm add @siemens/ix @siemens/ix-vue @siemens/ix-icons  
```

--------------------------------

### Basic Expanding Search

Source: https://ix.siemens.io/docs/components/expanding-search

This is a basic example of the expanding search component. No specific setup is required beyond including the component.

```html
<ix-expanding-search></ix-expanding-search>
```

--------------------------------

### Install @siemens/ix and @siemens/ix-icons with NPM

Source: https://ix.siemens.io/docs/home/installation/javascript

Use this command to install the necessary libraries for web component integration using NPM.

```bash
npm install @siemens/ix @siemens/ix-icons  
```

--------------------------------

### Install Siemens Libraries with Yarn

Source: https://ix.siemens.io/docs/home/installation/vue

Install the core Siemens libraries, Vue integration, and icons using Yarn.

```bash
yarn add @siemens/ix @siemens/ix-vue @siemens/ix-icons  
```

--------------------------------

### Application with Breakpoints

Source: https://ix.siemens.io/docs/components/application/code

Example showing how to configure responsive layouts for the application using breakpoints.

```html
<!-- Breakpoints -->
<ix-application breakpoints="sm,md">
  <ix-application-header>
    <div slot="headline">Brand</div>
    <ix-navigation>
      <ix-navigation-item>Item 1</ix-navigation-item>
      <ix-navigation-item>Item 2</ix-navigation-item>
    </ix-navigation>
  </ix-application-header>
  <ix-content>
    <p>Application content goes here.</p>
  </ix-content>
</ix-application>
```

--------------------------------

### Run MCP Server Setup (if token is configured)

Source: https://ix.siemens.io/docs/home/mcp-server

If your LLM token is already set up in your environment, you can use this command to quickly run the MCP server setup, which includes tool configuration and agent instructions.

```bash
npx @siemens/ix-mcp setup
```

--------------------------------

### Basic Toast Example

Source: https://ix.siemens.io/docs/components/toast/code

Demonstrates the basic usage of a toast component.

```html
<ix-toast></ix-toast>
```

--------------------------------

### Install Siemens Libraries with NPM

Source: https://ix.siemens.io/docs/home/installation/react

Install the core Siemens UI library, the React integration package, and icon assets using NPM.

```bash
npm install @siemens/ix @siemens/ix-react @siemens/ix-icons  
```

--------------------------------

### Install Siemens Libraries with Yarn

Source: https://ix.siemens.io/docs/home/installation/react

Install the core Siemens UI library, the React integration package, and icon assets using Yarn.

```bash
yarn add @siemens/ix @siemens/ix-react @siemens/ix-icons  
```

--------------------------------

### Install Siemens Libraries with PNPM

Source: https://ix.siemens.io/docs/home/installation/react

Install the core Siemens UI library, the React integration package, and icon assets using PNPM.

```bash
pnpm add @siemens/ix @siemens/ix-react @siemens/ix-icons  
```

--------------------------------

### Install @siemens/ix and @siemens/ix-icons with PNPM

Source: https://ix.siemens.io/docs/home/installation/javascript

Use this command to install the necessary libraries for web component integration using PNPM.

```bash
pnpm add @siemens/ix @siemens/ix-icons  
```

--------------------------------

### Install @siemens/ix and @siemens/ix-icons with Yarn

Source: https://ix.siemens.io/docs/home/installation/javascript

Use this command to install the necessary libraries for web component integration using Yarn.

```bash
yarn add @siemens/ix @siemens/ix-icons  
```

--------------------------------

### Install iX Angular Packages (NPM)

Source: https://ix.siemens.io/docs/home/installation/angular

Install the core iX library, the Angular integration, and the icon set using NPM.

```bash
npm install @siemens/ix @siemens/ix-angular @siemens/ix-icons
```

--------------------------------

### Basic Tooltip Example

Source: https://ix.siemens.io/docs/components/tooltip/code

Demonstrates the basic usage of the tooltip component with simple and custom selectors.

```html
Hover me  Simple selector Also hover me  Custom selector 
```

--------------------------------

### Install iX Angular Packages (Yarn)

Source: https://ix.siemens.io/docs/home/installation/angular

Install the core iX library, the Angular integration, and the icon set using Yarn.

```bash
yarn add @siemens/ix @siemens/ix-angular @siemens/ix-icons
```

--------------------------------

### Install @siemens/ix-mcp for Project Development

Source: https://ix.siemens.io/docs/home/mcp-server

Use this command to install the MCP server package as a development dependency in your project. Ensure you use the `--save-exact` flag for precise version control.

```bash
npm install --save-dev --save-exact @siemens/ix-mcp@ix5.0.0
```

```bash
yarn add -D --exact @siemens/ix-mcp@ix5.0.0
```

--------------------------------

### Install SiemensIXBlazor using NuGet Package Manager

Source: https://ix.siemens.io/docs/home/installation/blazor

Use the NuGet Package Manager console to install the SiemensIXBlazor package.

```Package Manager
NuGet\Install-Package SiemensIXBlazor  

```

--------------------------------

### Install iX Angular Packages (PNPM)

Source: https://ix.siemens.io/docs/home/installation/angular

Install the core iX library, the Angular integration, and the icon set using PNPM.

```bash
pnpm add @siemens/ix @siemens/ix-angular @siemens/ix-icons
```

--------------------------------

### Basic Tree Example

Source: https://ix.siemens.io/docs/components/tree/code

Demonstrates the basic usage of the Tree component for displaying hierarchical data.

```html
<ix-tree></ix-tree>
```

--------------------------------

### Text on background contrast example

Source: https://ix.siemens.io/docs/guidelines/accessibility/overview

This example demonstrates text and icon contrast against different background colors, ensuring WCAG AA compliance for body text, large text, and icons.

```css
.bg-1 {
  background-color: #ffffff;
}

.bg-2 {
  background-color: #f0f0f0;
}

.bg-3 {
  background-color: #e0e0e0;
}

.bg-4 {
  background-color: #d0d0d0;
}

.std-text {
  color: #333333;
}

.soft-text {
  color: #666666;
}

.icon {
  color: #007bff;
}
```

--------------------------------

### Basic Group Example

Source: https://ix.siemens.io/docs/components/group/code

Demonstrates the fundamental structure of an expandable group component.

```html
<ix-group>
  <ix-group-item text="Item 1"></ix-group-item>
  <ix-group-item text="Item 2"></ix-group-item>
</ix-group>
```

--------------------------------

### Custom Toast Message Example

Source: https://ix.siemens.io/docs/components/toast/code

Shows how to trigger toasts with custom messages and action buttons.

```html
<ix-toast message="This message is from template"></ix-toast>
<ix-toast message="This message is from template" action="Undo"></ix-toast>
```

--------------------------------

### Circular Progress Indicator Example

Source: https://ix.siemens.io/docs/components/progress-indicator/code

Demonstrates a basic circular progress indicator. Use this for a more compact progress feedback.

```html
<ix-progress-indicator type="circular" value="75"></ix-progress-indicator>
```

--------------------------------

### Vue Form Validation Example

Source: https://ix.siemens.io/docs/components/forms-validation/code

This Vue component demonstrates form validation using @vuelidate/core. It includes setup for various input types and custom validation rules. Ensure @vuelidate/core and @vuelidate/validators are installed.

```vue
<script lang="ts">
import { 
  IxCustomField, 
  IxDateInput, 
  IxIcon, 
  IxIconButton, 
  IxNumberInput, 
  IxRadio, 
  IxRadioGroup, 
  IxTextarea, 
  IxTypography, 
  IxSelect, 
  IxSelectItem, 
  IxButton, 
  IxLayoutAuto, 
  IxInput, 
} from '@siemens/ix-vue';
import { 
  iconLocation, 
  iconBezierCurve, 
  iconStar, 
} from '@siemens/ix-icons/icons';
import useValidate from '@vuelidate/core';
import { required, helpers, email, sameAs } from '@vuelidate/validators';
import { ref } from 'vue';

export default {
  name: 'ValidationSelect',
  components: {
    IxIcon,
    IxSelect,
    IxSelectItem,
    IxButton,
    IxLayoutAuto,
    IxInput,
    IxRadio,
    IxRadioGroup,
    IxNumberInput,
    IxTypography,
    IxDateInput,
    IxTextarea,
    IxCustomField,
    IxIconButton,
  },
  setup() {
      
    const v$ = useValidate();
    const uploadRef = ref<HTMLInputElement | null>(null);
    return { v$, uploadRef, iconLocation, iconBezierCurve, iconStar };
  },
  methods: {
    async submitForm() {
      await this.v$.$validate();
      console.log(this.$data);
    },
  },
  data() {
    return {
      car: 'audi',
      name: 'John',
      lastName: 'Doe',
      address: 'Max-Muster 18',
      bookingOption: 'option-1',
      travelOption: 'travel-option-1',
      limitA: 6,
      limitB: 7,
      warningLimitB: true,
      begin: '2024/05/03',
      end: '2024/05/05',
      comment: 'Some comment',
      upload: '',
      uploadPath: '',
      email: '',
      pin: '',
      pinConfirm: '',
      iconLocation,
      iconBezierCurve,
    };
  },
  validations() {
    return {
      travelOption: {
        required,
      },
      end: {
        isEnd: helpers.withMessage(
          'Its not allowed to pick 2024/05/05',
          (value) => value !== '2024/05/05'
        ),
      },
      email: {
        required,
        email,
      },
      pin: {
        required,
      },
      pinConfirm: {
        required,
        sameAsPin: helpers.withMessage('PINs do not match', sameAs(this.pin)),
      },
    };
  },
  watch: {
    limitB(value) {
      this.warningLimitB = value > 5;
    },
  },
};
</script>

<style scoped src="./form-validation.css"></style>

<template>
  <form
    className="form-validation-example"
    @submit.prevent
    @submit="submitForm"
  >
    <IxLayoutAuto>
      <IxInput v-model="name" label="Name"></IxInput>

      <IxInput v-model="lastName" label="Last Name"></IxInput>

      <IxInput v-model="address" label="Last Name" data-colspan="2">
        <IxIcon slot="start" :name="iconLocation" size="16"></IxIcon>
      </IxInput>

      <IxRadioGroup
        label="Booking option"
        @value-change="bookingOption = $event.detail"
      >
        <IxRadio
          label="Option 0"
          value="option-0"
          :checked="'option-0' === bookingOption"
        ></IxRadio>
        <IxRadio
          label="Option 1"
          value="option-1"
          :checked="'option-1' === bookingOption"
        ></IxRadio>
        <IxRadio
          label="Option 2"
          value="option-2"
          :checked="'option-2' === bookingOption"
        ></IxRadio>
      </IxRadioGroup>

      <IxNumberInput
        label="Preferred room size"
        className="ix-info"
        infoText="You can adjust the room size"
      >
        <IxIcon slot="start" :name="iconBezierCurve" size="16"></IxIcon>
        <IxTypography slot="end" color="weak" className="padding-right">
          m<sup>2</sup>
        </IxTypography>
      </IxNumberInput>

      <IxSelect
        v-model="travelOption"
        allowClear
        label="Select your travel option"
        data-colspan="2"
      >
        <IxSelectItem
          value="travel-option-0"
          label="Travel Option 1"
        ></IxSelectItem>
        <IxSelectItem
          value="travel-option-1"
          label="Travel Option 2"
        ></IxSelectItem>
        <IxSelectItem
          value="travel-option-2"
          label="Travel Option 3"
        ></IxSelectItem>
      </IxSelect>

      <IxNumberInput
        label="Threshold limit A"
        data-colspan="1"
        helper-text="Max threshold is 5"
        invalid-text="Not higher then 5 is allowed"
        v-model="limitA"
        :class="{ 'ix-invalid': limitA > 5 }"
      ></IxNumberInput>

      <IxNumberInput
        label="Threshold limit B"
        data-colspan="1"
        helper-text="Max threshold is 5"
        invalid-text="Not higher then 5 is allowed"
        v-model="limitB"
        :class="{ 'ix-invalid': limitB > 5 }"
      ></IxNumberInput>

      <IxTextarea
        label="Comment"
        v-model="comment"
        data-colspan="2"
      ></IxTextarea>

      <IxCustomField
        label="Upload file"
        data-colspan="2"
        :ref="uploadRef"
        v-model="uploadPath"
      >
        <IxIconButton
          slot="end"
          variant="primary"
          icon="upload"
          @click="uploadRef?.click()"
        ></IxIconButton>
        <input
          ref="uploadRef"
          type="file"
          hidden
          v-model="upload"
        />
      </IxCustomField>

      <IxInput
        label="Email"
        type="email"
        v-model="email"
        :error="v$.email.$error"
        :error-text="v$.email.$errors[0]?.$message"
      ></IxInput>

      <IxInput
        label="PIN"
        type="password"
        v-model="pin"
        :error="v$.pin.$error"
        :error-text="v$.pin.$errors[0]?.$message"
      ></IxInput>

      <IxInput
        label="Confirm PIN"
        type="password"
        v-model="pinConfirm"
        :error="v$.pinConfirm.$error"
        :error-text="v$.pinConfirm.$errors[0]?.$message"
      ></IxInput>

      <IxButton type="submit" variant="primary">Submit</IxButton>
    </IxLayoutAuto>
  </form>
</template>

```

--------------------------------

### Date Dropdown API Properties - week-start-index

Source: https://ix.siemens.io/docs/components/date-dropdown/code

Determines the starting day of the week in the date picker, based on the Locale#weekdays array. For example, `weekStartIndex = 1` starts the week on Monday for 'en-us' locale.

```html
<ix-date-dropdown week-start-index="1"></ix-date-dropdown>
```

--------------------------------

### Initialize MCP Server

Source: https://ix.siemens.io/docs/home/mcp-server

Run the init command for the first-time setup of the MCP server, which configures the token and creates necessary MCP configurations.

```bash
npx @siemens/ix-mcp init  
```

--------------------------------

### Navigate to Project Directory

Source: https://ix.siemens.io/docs/home/mcp-server

Before initializing the MCP server, navigate to the root directory of your project where you want to use the server.

```bash
cd your-project
```

--------------------------------

### Standalone Component Setup with iX

Source: https://ix.siemens.io/docs/home/installation/angular

For standalone components, import iX components and directives directly from '@siemens/ix-angular/standalone'. This example shows a button and dropdown integration.

```typescript
import { Component } from '@angular/core';
import { IxButton, IxDropdown, IxDropdownItem, IxDropdownTriggerDirective } from '@siemens/ix-angular/standalone';

@Component({
  standalone: true,
  selector: 'standalone-example',
  imports: [IxButton, IxDropdown, IxDropdownItem, IxDropdownTriggerDirective],
  template:воды
    <ix-button #trigger>Open</ix-button>
    <ix-dropdown [ixDropdownTrigger]="trigger">
      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
      <ix-dropdown-item label="Item 3"></ix-dropdown-item>
      <ix-dropdown-item label="Item 4"></ix-dropdown-item>
      <ix-dropdown-item label="Item 5"></ix-dropdown-item>
    </ix-dropdown>
  `,
})
export default class StandaloneExample {}
```

--------------------------------

### Scaffold React Starter App with npx

Source: https://ix.siemens.io/docs/home/getting-started/starter-app

Use this command to scaffold the React starter app into a new project folder using `npx`.

```bash
npx degit siemens/ix-starter/apps/react-starter my-ix-react-app  

```

--------------------------------

### React Form Validation Example

Source: https://ix.siemens.io/docs/components/forms-validation/code

This snippet demonstrates a complete form with various input fields and validation rules using react-form-hook and yup. It includes setup, default values, and submission handling.

```tsx
import './form-validation.scoped.css';  
  
import { yupResolver } from '@hookform/resolvers/yup';  
import {  
  iconBezierCurve,  
  iconLocation,  
  iconStar,  
} from '@siemens/ix-icons/icons';  
import {  
  IxButton,  
  IxCheckbox,  
  IxCheckboxGroup,  
  IxCustomField,  
  IxDateInput,  
  IxIcon,  
  IxIconButton,  
  IxLayoutAuto,  
  IxNumberInput,  
  IxRadio,  
  IxRadioGroup,  
  IxSelect,  
  IxSelectItem,  
  IxInput,  
  IxTextarea,  
  IxTypography,  
} from '@siemens/ix-react';  
import clsx from 'clsx';  
import { useLayoutEffect, useRef, useState } from 'react';  
import { Controller, useForm } from 'react-hook-form';  
import * as yup from 'yup';  
  
const validationSchema = yup.object({  
  name: yup.string().required('Name is required'),  
  'last-name': yup.string(),  
  address: yup.string(),  
  thresholdLimitA: yup  
    .number()  
    .max(5, 'The threshold must be equal or lesser than 5'),  
  thresholdLimitB: yup.number(),  
  begin: yup.string(),  
  end: yup  
    .string()  
    .test('valid-date', '2024/05/05 is not allowed to pick', (value) => {  
      return value !== '2024/05/05';  
    }),  
  comment: yup.string(),  
  agreed: yup.boolean().oneOf([true], 'You must agree to continue'),  
  'booking-option': yup.string(),  
  'travel-option': yup.string(),  
  'room-size': yup.number(),  
  email: yup.string(),  
  pin: yup.string(),  
  'confirm-pin': yup.string().oneOf([yup.ref('pin')], 'PIN does not match'),  
  upload: yup.string(),  
  'upload-path': yup.string().required('You need to upload a file'),  
});  
  
export default function FormValidation() {  
  const uploadRef = useRef<HTMLInputElement>(null);  
  
  const [showWarning, setShowWarning] = useState(true);  
  
  const {  
    register,  
    handleSubmit,  
    control,  
    formState: { errors },  
    trigger,  
    setValue,  
  } = useForm({  
    mode: 'all',  
    reValidateMode: 'onChange',  
    defaultValues: {  
      name: 'John',  
      'last-name': 'Muster',  
      address: 'John Street 14',  
      thresholdLimitA: 6,  
      thresholdLimitB: 7,  
      begin: '2024/05/05',  
      end: '2024/05/05',  
      comment: 'Some info',  
      agreed: false,  
      'booking-option': '2',  
      'travel-option': '3',  
      'room-size': 100,  
      email: '',  
      pin: '',  
      'confirm-pin': '',  
      upload: '',  
      'upload-path': '',  
    },  
    resolver: yupResolver(validationSchema),  
  });  
  
  useLayoutEffect(() => {  
    // Do instant validation after rendering  
    trigger();  
  }, [trigger]);  
  
  const onSubmit = (data: any) => {  
    console.log(data);  
  };  
  
  return (  
    <form onSubmit={handleSubmit(onSubmit)} className="form-validation-example">  
      <IxLayoutAuto>  
        <IxInput  
          label="Name"  
          {...register('name')}  
          className={clsx({ 'ix-invalid': errors.name })}  
          invalidText={errors.name?.message}  
          required  
        />  
        <IxInput label="Last Name" {...register('last-name')} />  
        <IxInput label="Address" data-colspan="2" {...register('address')}>  
          <IxIcon slot="start" name={iconLocation} size="16"></IxIcon>  
        </IxInput>  
  
        <IxRadioGroup label="Booking option">  
          {Array.from({ length: 3 }).map((_, option) => (  
            <Controller  
              key={`Option${option}`}
              control={control}
              name="booking-option"
              render={({ field }) => (
                <IxRadio  
                  label={`Option ${option}`}
                  value={`${option}`}
                  checked={field.value === `${option}`}
                  onCheckedChange={() => field.onChange(`${option}`)}
                ></IxRadio>
              )}
            />
          ))}
        </IxRadioGroup>

        <IxNumberInput  
          label="Preferred room size"
          className="ix-info"
          infoText="You can adjust the room size"
          {...register('room-size')}
        >
          <IxIcon slot="start" name={iconBezierCurve} size="16"></IxIcon>
          <IxTypography slot="end" color="weak" className="padding-right">
            m<sup>2</sup>
          </IxTypography>
        </IxNumberInput>

        <IxSelect  
          label="Travel option"
          data-colspan="2"
          {...register('travel-option')}
        >
          <IxSelectItem value="1" label="Option 1"></IxSelectItem>
          <IxSelectItem value="2" label="Option 2"></IxSelectItem>
          <IxSelectItem value="3" label="Option 3"></IxSelectItem>
        </IxSelect>
      </IxLayoutAuto>
    </form>
  );
}

```

--------------------------------

### Angular Stacked Horizontal Bar Chart

Source: https://ix.siemens.io/docs/components/bar-chart/overview

Implement a stacked horizontal bar chart in Angular. This example utilizes ECharts for rendering and the Siemens IX theme switcher for dynamic theming. Ensure ECharts and the necessary IX packages are installed.

```ts
import { Component, OnDestroy, OnInit } from '@angular/core';
import { registerTheme, resolveEChartThemeName } from '@siemens/ix-echarts';
import { themeSwitcher } from '@siemens/ix';

import { BarSeriesOption, EChartsOption } from 'echarts';

@Component({
  standalone: false,
  selector: 'app-example',
  templateUrl: './echarts-bar-horizontal-stacked.html',
  styleUrls: ['./echarts-bar-horizontal-stacked.css'],
})
export default class EchartsBarHorizontalStacked implements OnDestroy, OnInit {
  theme = resolveEChartThemeName();
  private themeChangeDisposer?: { dispose: () => void };

  data = {
    years: ['2023', '2022', '2021', '2020', '2019'],
    salesEurope: [87, 22, 28, 43, 79],
    salesUS: [35, 24, 33, 5, 40],
    salesChina: [19, 44, 23, 5, 10],
  };

  seriesData = [
    { name: 'Europe', data: this.data.salesEurope },
    { name: 'U.S', data: this.data.salesUS },
    { name: 'China', data: this.data.salesChina },
  ];

  series: BarSeriesOption[] = this.seriesData.map(({ name, data }) => ({
    name,
    data,
    type: 'bar',
    stack: 'x',
  }));

  options: EChartsOption = {
    xAxis: {
      type: 'value',
      name: 'Revenue (in Millions of USD)',
      nameLocation: 'middle',
      nameGap: 40,
    },
    yAxis: {
      type: 'category',
      data: this.data.years,
      name: 'Years',
      nameLocation: 'end',
    },
    legend: {
      show: true,
      bottom: '0',
      left: '0',
    },
    series: this.series,
  };

  ngOnInit() {
    registerTheme(echarts);

    this.themeChangeDisposer = themeSwitcher.themeChanged.on(() => {
      this.theme = resolveEChartThemeName();
    });
  }

  ngOnDestroy() {
    this.themeChangeDisposer?.dispose();
  }
}
```

```html
<div
  echarts
  [options]="options"
  [theme]="theme"
  class="echarts"
></div>
```

```css
.echarts {
  position: relative;
  width: 100%;
  height: 40rem;
  padding-top: 1rem;
}
```

--------------------------------

### Scaffold React Starter App with pnpx

Source: https://ix.siemens.io/docs/home/getting-started/starter-app

Use this command to scaffold the React starter app into a new project folder using `pnpx`.

```bash
pnpx degit siemens/ix-starter/apps/react-starter my-ix-react-app  

```

--------------------------------

### React Stacked Horizontal Bar Chart

Source: https://ix.siemens.io/docs/components/bar-chart/overview

Implement a stacked horizontal bar chart in React. This example uses ECharts for rendering and integrates with the Siemens IX theme switcher for dynamic theming. Ensure ECharts and the necessary IX packages are installed.

```tsx
import './echarts-bar-horizontal-stacked.scoped.css';

import { useEffect, useState } from 'react';
import { themeSwitcher } from '@siemens/ix';
import { registerTheme, resolveEChartThemeName } from '@siemens/ix-echarts';
import ReactEcharts from 'echarts-for-react';

import { BarSeriesOption, EChartsOption } from 'echarts';

function useEChartTheme() {
  const [theme, setTheme] = useState(resolveEChartThemeName);

  useEffect(() => {
    const disposer = themeSwitcher.themeChanged.on(() => {
      setTheme(resolveEChartThemeName());
    });

    return () => {
      disposer.dispose();
    };
  }, []);

  return theme;
}

export default function EchartsBarHorizontalStacked() {
  registerTheme(echarts);

  const theme = useEChartTheme();

  const data = {
    years: ['2023', '2022', '2021', '2020', '2019'],
    salesEurope: [87, 22, 28, 43, 79],
    salesUS: [35, 24, 33, 5, 40],
    salesChina: [19, 44, 23, 5, 10],
  };

  const seriesData = [
    { name: 'Europe', data: data.salesEurope },
    { name: 'U.S', data: data.salesUS },
    { name: 'China', data: data.salesChina },
  ];

  const series: BarSeriesOption[] = seriesData.map(({ name, data }) => ({
    name,
    data,
    type: 'bar',
    stack: 'x',
  }));

  const options: EChartsOption = {
    xAxis: {
      type: 'value',
      name: 'Revenue (in Millions of USD)',
      nameLocation: 'middle',
      nameGap: 40,
    },
    yAxis: {
      type: 'category',
      data: data.years,
      name: 'Years',
      nameLocation: 'end',
    },
    legend: {
      show: true,
      left: '0',
      bottom: '0',
    },
    series: series,
  };

  return <ReactEcharts option={options} theme={theme} className="echarts" />;
}
```

```css
.echarts {
  position: relative;
  width: 100%;
  height: 40rem;
  padding-top: 1rem;
}
```

--------------------------------

### Basic Application Layout

Source: https://ix.siemens.io/docs/components/application/code

Example demonstrating the combination of different components like `ix-application-header` and `ix-content` for basic application structure.

```html
<!-- Basic -->
<ix-application>
  <ix-application-header>
    <div slot="headline">Brand</div>
    <ix-navigation>
      <ix-navigation-item>Item 1</ix-navigation-item>
      <ix-navigation-item>Item 2</ix-navigation-item>
    </ix-navigation>
  </ix-application-header>
  <ix-content>
    <p>Application content goes here.</p>
  </ix-content>
</ix-application>
```

--------------------------------

### Date Dropdown with Specific Start Date

Source: https://ix.siemens.io/docs/components/date-dropdown

Sets the initial start date for the date picker. If set to `null`, no default start date is pre-selected.

```html
<ix-date-dropdown from="2023/03/29"></ix-date-dropdown>
```

--------------------------------

### Vue Application Setup with Ix Plugin

Source: https://ix.siemens.io/docs/home/installation/vue

Import necessary CSS, initialize the Vue app, and apply the Ix plugin for design system integration.

```javascript
import '@siemens/ix/dist/siemens-ix/siemens-ix.css';  
  
import { createApp } from 'vue';  
import { ixPlugin } from '@siemens/ix-vue';  
import Root from './App.vue';  
  
const app = createApp(App);  
  
app.use(ixPlugin);  
  
app.mount('#root');  


```

--------------------------------

### Check MCP Server Installation

Source: https://ix.siemens.io/docs/home/mcp-server

Verify your MCP server installation and configuration by running the check command.

```bash
npx @siemens/ix-mcp check  
```

--------------------------------

### Scaffold Vue Starter App with npx

Source: https://ix.siemens.io/docs/home/getting-started/starter-app

Use this command to scaffold the Vue starter app into a new project folder using `npx`.

```bash
npx degit siemens/ix-starter/apps/vue-starter my-ix-vue-app  

```

--------------------------------

### Scaffold Vue Starter App with pnpx

Source: https://ix.siemens.io/docs/home/getting-started/starter-app

Use this command to scaffold the Vue starter app into a new project folder using `pnpx`.

```bash
pnpx degit siemens/ix-starter/apps/vue-starter my-ix-vue-app  

```

--------------------------------

### React Application Context Setup

Source: https://ix.siemens.io/docs/components/modal/code

Shows how to provide the `IxApplicationContext` in a React application, which is recommended for using modal dialogs and other components.

```jsx
import ReactDOM from 'react-dom/client';
import { IxApplicationContext } from '@siemens/ix-react';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <IxApplicationContext>
    {/* <BrowserRouter>
      <App /> 
    </BrowserRouter> */}
  </IxApplicationContext>
);
```

--------------------------------

### Scaffold Angular Starter App with npx

Source: https://ix.siemens.io/docs/home/getting-started/starter-app

Use this command to scaffold the Angular starter app into a new project folder using `npx`.

```bash
npx degit siemens/ix-starter/apps/angular-starter my-ix-angular-app  

```

--------------------------------

### Basic Blind Example

Source: https://ix.siemens.io/docs/components/blind/code

Demonstrates the fundamental usage of the Blind component for content organization. Ensure the 'Brand' and 'Dark' configurations are set as needed for your application.

```html
<ix-blind>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</ix-blind>
```

--------------------------------

### Scaffold Angular Starter App with pnpx

Source: https://ix.siemens.io/docs/home/getting-started/starter-app

Use this command to scaffold the Angular starter app into a new project folder using `pnpx`.

```bash
pnpx degit siemens/ix-starter/apps/angular-starter my-ix-angular-app  

```

--------------------------------

### Globally Install @siemens/ix-mcp

Source: https://ix.siemens.io/docs/home/mcp-server

Install the MCP server package globally on your system. This is useful for running MCP commands directly from your terminal.

```bash
npm install -g @siemens/ix-mcp@ix5.0.0
```

--------------------------------

### Application with Dark Theme and Breakpoints

Source: https://ix.siemens.io/docs/components/application/code

Example demonstrating an application with a dark color schema and specific breakpoint configuration.

```html
<!-- Dark Theme & Breakpoints -->
<ix-application color-schema="dark" breakpoints="lg">
  <ix-application-header>
    <div slot="headline">Brand</div>
    <ix-navigation>
      <ix-navigation-item>Item 1</ix-navigation-item>
      <ix-navigation-item>Item 2</ix-navigation-item>
    </ix-navigation>
  </ix-application-header>
  <ix-content>
    <p>Application content goes here.</p>
  </ix-content>
</ix-application>
```

--------------------------------

### Angular Peer Dependencies

Source: https://ix.siemens.io/docs/home/installation/angular

Ensure these peer dependencies are installed before installing the iX library. Check package.json for exact version requirements.

```json
"peerDependencies": {
  "@angular/core": ">=20",
  "@angular/forms": ">=20"
}
```

--------------------------------

### Date Dropdown with Presets

Source: https://ix.siemens.io/docs/components/date-dropdown/code

Shows how to configure the date dropdown with predefined date range options.

```html
<ix-date-dropdown [date-range-options]="presetRanges"></ix-date-dropdown>
```

--------------------------------

### Basic Tabs Example

Source: https://ix.siemens.io/docs/components/tabs

Demonstrates the basic structure and usage of the Tabs component with three tab items and their corresponding content.

```html
<ix-tabs>
  <ix-tab-item label="Tab 1">Content Tab 1</ix-tab-item>
  <ix-tab-item label="Tab 2">Content Tab 2</ix-tab-item>
  <ix-tab-item label="Tab 3">Content Tab 3</ix-tab-item>
</ix-tabs>
```

--------------------------------

### Module Setup with iX

Source: https://ix.siemens.io/docs/home/installation/angular

Import `IxModule` and `BrowserAnimationsModule` into your application's main module for traditional module-based Angular setups. `IxModule.forRoot()` is used for configuration.

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IxModule } from '@siemens/ix-angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, IxModule.forRoot(), BrowserAnimationsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

--------------------------------

### Date Dropdown API Properties - from

Source: https://ix.siemens.io/docs/components/date-dropdown/code

Sets the start date for the date picker. If null, no default start date is pre-selected. Format is based on the `format` property.

```html
<ix-date-dropdown from="2023/01/01"></ix-date-dropdown>
```

--------------------------------

### Basic Tabs Example

Source: https://ix.siemens.io/docs/components/tabs/code

Demonstrates the basic structure and usage of the Tabs component. This is suitable for organizing content into distinct, selectable sections.

```html
<ix-tabs>
  <ix-tab-item label="Tab 1">Content 1</ix-tab-item>
  <ix-tab-item label="Tab 2">Content 2</ix-tab-item>
  <ix-tab-item label="Tab 3">Content 3</ix-tab-item>
</ix-tabs>
```

--------------------------------

### Install Siemens IX ECharts Theme

Source: https://ix.siemens.io/docs/components/charts-overview/overview

Install the Siemens Industrial Experience ECharts theme package using npm. This command saves the package as a dependency in your project.

```sh
npm install --save @siemens/ix-echarts
```

--------------------------------

### Application with Advanced Layout

Source: https://ix.siemens.io/docs/components/application/code

Example showcasing an application with advanced layout options, potentially including different navigation structures.

```html
<!-- Application Advanced -->
<ix-application>
  <ix-application-header>
    <div slot="headline">Brand</div>
    <ix-navigation>
      <ix-navigation-item>Home</ix-navigation-item>
      <ix-navigation-item>Alarm</ix-navigation-item>
      <ix-navigation-item>Plant</ix-navigation-item>
      <ix-navigation-item>Network</ix-navigation-item>
    </ix-navigation>
  </ix-application-header>
  <ix-content>
    <p>Application content goes here.</p>
  </ix-content>
</ix-application>
```

--------------------------------

### Scaffold Older React Starter App Version with pnpx

Source: https://ix.siemens.io/docs/home/getting-started/starter-app

To scaffold an older version of the React starter app, append the repository tag to the starter source using `pnpx`.

```bash
pnpx degit siemens/ix-starter/apps/react-starter#v5.0.0 my-ix-react-app  

```