npm - @siemens/ix-docs - Versions diffs - 4.0.0 → 4.1.0 - Mend

@siemens/ix-docs 4.0.0 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (833) hide show

package/build/docs/autogenerated/prompt/ix-event-list/readme.md CHANGED Viewed

@@ -1,713 +1,3 @@
-# ix-event-list
-## HTML Examples
-### Example: event-list-compact
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Event list compact example</title>
-  </head>
-  <body>
-    <ix-event-list compact>
-      <ix-event-list-item item-color="color-primary">Text 1</ix-event-list-item>
-      <ix-event-list-item item-color="color-primary">Text 2</ix-event-list-item>
-      <ix-event-list-item item-color="color-primary">Text 3</ix-event-list-item>
-      <ix-event-list-item item-color="color-primary">Text 4</ix-event-list-item>
-    </ix-event-list>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: event-list-custom-item-height-in-number
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Event List Custom Item Height List</title>
-    <script type="module">
-      document.addEventListener('DOMContentLoaded', () => {
-        const eventList = document.querySelector('ix-event-list');
-        eventList.itemHeight = 60;
-      });
-    </script>
-    <script type="module" src="./init.js"></script>
-  </head>
-  <body>
-    <ix-event-list>
-      <ix-event-list-item item-color="color-primary">Test 1</ix-event-list-item>
-      <ix-event-list-item item-color="color-primary">Test 2</ix-event-list-item>
-    </ix-event-list>
-  </body>
-</html>
-```
-### Example: event-list-custom-item-height
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Event list custom item height example</title>
-  </head>
-  <body>
-    <ix-event-list item-height="L">
-      <ix-event-list-item item-color="color-primary">Test 1</ix-event-list-item>
-      <ix-event-list-item item-color="color-primary">Test 2</ix-event-list-item>
-    </ix-event-list>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: event-list-filled
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Event list filled example</title>
-  </head>
-  <body>
-    <ix-event-list id="event-list"></ix-event-list>
-    <script type="module" src="./init.js"></script>
-    <script type="module">
-      const items = [
-        { text: 'Text 1', color: 'color-primary' },
-        { text: 'Text 2', color: 'color-primary' },
-        { text: 'Text 3', color: 'color-alarm' },
-        { text: 'Text 4', color: 'color-success' },
-      ];
-      const eventList = document.getElementById('event-list');
-      if (eventList) {
-        for (const item of items) {
-          const listItem = document.createElement('ix-event-list-item');
-          listItem.setAttribute('variant', 'filled');
-          listItem.setAttribute('item-color', item.color);
-          listItem.textContent = item.text;
-          eventList.appendChild(listItem);
-        }
-      }
-    </script>
-  </body>
-</html>
-```
-### Example: event-list-selected
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Event list selected example</title>
-  </head>
-  <body>
-    <ix-event-list id="event-list"></ix-event-list>
-    <script type="module" src="./init.js"></script>
-    <script type="module">
-      (async () => {
-        const items = ['Text 1', 'Text 2', 'Text 3', 'Text 4'];
-        const selectedIndex = 1;
-        await globalThis.customElements.whenDefined('ix-event-list-item');
-        const eventList = document.getElementById('event-list');
-        if (!eventList) return;
-        let selectedItem = null;
-        for (const [index, text] of items.entries()) {
-          const listItem = document.createElement('ix-event-list-item');
-          listItem.setAttribute('item-color', 'color-primary');
-          listItem.textContent = text;
-          if (index === selectedIndex) {
-            listItem.selected = true;
-            selectedItem = listItem;
-          }
-          listItem.addEventListener('click', () => {
-            if (selectedItem) {
-              selectedItem.selected = false;
-            }
-            listItem.selected = true;
-            selectedItem = listItem;
-          });
-          eventList.appendChild(listItem);
-        }
-      })();
-    </script>
-  </body>
-</html>
-```
-### Example: event-list
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Event list example</title>
-  </head>
-  <body>
-    <ix-event-list>
-      <ix-event-list-item item-color="color-primary">Text 1</ix-event-list-item>
-      <ix-event-list-item item-color="color-primary">Text 2</ix-event-list-item>
-      <ix-event-list-item item-color="color-alarm">Text 3</ix-event-list-item>
-      <ix-event-list-item item-color="color-success">Text 4</ix-event-list-item>
-    </ix-event-list>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-## React Examples
-### Example: event-list-compact
-```tsx
-import { IxEventList, IxEventListItem } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxEventList compact>
-      <IxEventListItem itemColor="color-primary">Text 1</IxEventListItem>
-      <IxEventListItem itemColor="color-primary">Text 2</IxEventListItem>
-      <IxEventListItem itemColor="color-primary">Text 3</IxEventListItem>
-      <IxEventListItem itemColor="color-primary">Text 4</IxEventListItem>
-    </IxEventList>
-  );
-};
-```
-### Example: event-list-custom-item-height-in-number
-```tsx
-import { IxEventList, IxEventListItem } from '@siemens/ix-react';
-import { useState } from 'react';
-export default () => {
-  const [items] = useState([1, 2, 3]);
-  return (
-    <IxEventList itemHeight={60}>
-      {items.map((item) => (
-        <div key={item}>
-          <IxEventListItem itemColor="color-primary">
-            Text {item}
-          </IxEventListItem>
-        </div>
-      ))}
-    </IxEventList>
-  );
-};
-```
-### Example: event-list-custom-item-height
-```tsx
-import { IxEventList, IxEventListItem } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxEventList itemHeight={'L'}>
-      <IxEventListItem itemColor="color-primary">Text 1</IxEventListItem>
-      <IxEventListItem itemColor="color-primary">Text 2</IxEventListItem>
-    </IxEventList>
-  );
-};
-```
-### Example: event-list-filled
-```tsx
-import { IxEventList, IxEventListItem } from '@siemens/ix-react';
-const items = [
-  { text: 'Text 1', color: 'color-primary' },
-  { text: 'Text 2', color: 'color-primary' },
-  { text: 'Text 3', color: 'color-alarm' },
-  { text: 'Text 4', color: 'color-success' },
-];
-export default function EventListFilled() {
-  return (
-    <IxEventList>
-      {items.map((item) => (
-        <IxEventListItem
-          key={item.text}
-          variant="filled"
-          itemColor={item.color}
-        >
-          {item.text}
-        </IxEventListItem>
-      ))}
-    </IxEventList>
-  );
-}
-```
-### Example: event-list-selected
-```tsx
-import { IxEventList, IxEventListItem } from '@siemens/ix-react';
-import { useState } from 'react';
-const items = ['Text 1', 'Text 2', 'Text 3', 'Text 4'];
-export default function EventListSelected() {
-  const [selectedIndex, setSelectedIndex] = useState(1);
-  return (
-    <IxEventList>
-      {items.map((text, index) => (
-        <IxEventListItem
-          key={text}
-          itemColor="color-primary"
-          selected={selectedIndex === index}
-          onClick={() => setSelectedIndex(index)}
-        >
-          {text}
-        </IxEventListItem>
-      ))}
-    </IxEventList>
-  );
-}
-```
-### Example: event-list
-```tsx
-import { IxEventList, IxEventListItem } from '@siemens/ix-react';
-export default function EventList() {
-  return (
-    <IxEventList>
-      <IxEventListItem itemColor="color-primary">Text 1</IxEventListItem>
-      <IxEventListItem itemColor="color-primary">Text 2</IxEventListItem>
-      <IxEventListItem itemColor="color-alarm">Text 3</IxEventListItem>
-      <IxEventListItem itemColor="color-success">Text 4</IxEventListItem>
-    </IxEventList>
-  );
-}
-```
-## Vue Examples
-### Example: event-list-compact
-```tsx
-<script setup lang="ts">
-import { IxEventList, IxEventListItem } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxEventList compact>
-    <IxEventListItem itemColor="color-primary">Text 1</IxEventListItem>
-    <IxEventListItem itemColor="color-primary">Text 2</IxEventListItem>
-    <IxEventListItem itemColor="color-primary">Text 3</IxEventListItem>
-    <IxEventListItem itemColor="color-primary">Text 4</IxEventListItem>
-  </IxEventList>
-</template>
-```
-### Example: event-list-custom-item-height-in-number
-```tsx
-<script setup lang="ts">
-import { IxEventList, IxEventListItem } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxEventList :itemHeight="60">
-    <IxEventListItem itemColor="color-primary">Text 1</IxEventListItem>
-    <IxEventListItem itemColor="color-primary">Text 2</IxEventListItem>
-  </IxEventList>
-</template>
-```
-### Example: event-list-custom-item-height
-```tsx
-<script setup lang="ts">
-import { IxEventList, IxEventListItem } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxEventList itemHeight="L">
-    <IxEventListItem itemColor="color-primary">Text 1</IxEventListItem>
-    <IxEventListItem itemColor="color-primary">Text 2</IxEventListItem>
-  </IxEventList>
-</template>
-```
-### Example: event-list-filled
-```tsx
-<script setup lang="ts">
-import { IxEventList, IxEventListItem } from '@siemens/ix-vue';
-const items = [
-  { text: 'Text 1', color: 'color-primary' },
-  { text: 'Text 2', color: 'color-primary' },
-  { text: 'Text 3', color: 'color-alarm' },
-  { text: 'Text 4', color: 'color-success' },
-];
-</script>
-<template>
-  <IxEventList>
-    <IxEventListItem
-      v-for="item in items"
-      :key="item.text"
-      variant="filled"
-      :itemColor="item.color"
-    >
-      {{ item.text }}
-    </IxEventListItem>
-  </IxEventList>
-</template>
-```
-### Example: event-list-selected
-```tsx
-<script setup lang="ts">
-import { ref } from 'vue';
-import { IxEventList, IxEventListItem } from '@siemens/ix-vue';
-const selectedIndex = ref(1);
-const items = ['Text 1', 'Text 2', 'Text 3', 'Text 4'];
-</script>
-<template>
-  <IxEventList>
-    <IxEventListItem
-      v-for="(item, index) in items"
-      :key="item"
-      itemColor="color-primary"
-      :selected="selectedIndex === index"
-      @click="selectedIndex = index"
-    >
-      {{ item }}
-    </IxEventListItem>
-  </IxEventList>
-</template>
-```
-### Example: event-list
-```tsx
-<script setup lang="ts">
-import { IxEventList, IxEventListItem } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxEventList>
-    <IxEventListItem itemColor="color-primary">Text 1</IxEventListItem>
-    <IxEventListItem itemColor="color-primary">Text 2</IxEventListItem>
-    <IxEventListItem itemColor="color-alarm">Text 3</IxEventListItem>
-    <IxEventListItem itemColor="color-success">Text 4</IxEventListItem>
-  </IxEventList>
-</template>
-```
-## Angular Examples
-### Example: event-list-compact
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-event-list compact>
-      <ix-event-list-item item-color="color-primary">Text 1</ix-event-list-item>
-      <ix-event-list-item item-color="color-primary">Text 2</ix-event-list-item>
-      <ix-event-list-item item-color="color-primary">Text 3</ix-event-list-item>
-      <ix-event-list-item item-color="color-primary">Text 4</ix-event-list-item>
-    </ix-event-list>
-  `,
-})
-export default class EventListCompact {}
-```
-### Example: event-list-custom-item-height-in-number
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-event-list [itemHeight]="itemHeight">
-      <ng-container *ngFor="let item of items">
-        <ix-event-list-item item-color="color-primary"
-          >Text {{ item }}</ix-event-list-item
-        >
-      </ng-container>
-    </ix-event-list>
-  `,
-})
-export default class EventListCustomItemHeightInNumber {
-  itemHeight = 60;
-  items = [1, 2, 3];
-}
-```
-### Example: event-list-custom-item-height
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-event-list item-height="L">
-      <ix-event-list-item item-color="color-primary">Test 1</ix-event-list-item>
-      <ix-event-list-item item-color="color-primary">Test 2</ix-event-list-item>
-    </ix-event-list>
-  `,
-})
-export default class EventListCustomItemHeight {}
-```
-### Example: event-list-filled
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-event-list>
-      @for (item of items; track i; let i = $index) {
-        <ix-event-list-item variant="filled" [itemColor]="item.color">
-          {{ item.text }}
-        </ix-event-list-item>
-      }
-    </ix-event-list>
-  `,
-})
-export default class EventListFilled {
-  items = [
-    { text: 'Text 1', color: 'color-primary' },
-    { text: 'Text 2', color: 'color-primary' },
-    { text: 'Text 3', color: 'color-alarm' },
-    { text: 'Text 4', color: 'color-success' },
-  ];
-}
-```
-### Example: event-list-selected
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-event-list>
-      @for (item of items; track i; let i = $index) {
-      <ix-event-list-item
-        item-color="color-primary"
-        [selected]="selectedIndex === i"
-        (click)="selectedIndex = i"
-      >
-        {{ item }}
-      </ix-event-list-item>
-      }
-    </ix-event-list>
-  `,
-})
-export default class EventListSelected {
-  selectedIndex = 1;
-  items = ['Text 1', 'Text 2', 'Text 3', 'Text 4'];
-}
-```
-### Example: event-list
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-event-list>
-      <ix-event-list-item item-color="color-primary">Text 1</ix-event-list-item>
-      <ix-event-list-item item-color="color-primary">Text 2</ix-event-list-item>
-      <ix-event-list-item item-color="color-alarm">Text 3</ix-event-list-item>
-      <ix-event-list-item item-color="color-success">Text 4</ix-event-list-item>
-    </ix-event-list>
-  `,
-})
-export default class EventList {}
-```
-## Angular Standalone Examples
-### Example: event-list-compact
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxEventList, IxEventListItem } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxEventList, IxEventListItem],
-  template: `
-    <ix-event-list compact>
-      <ix-event-list-item item-color="color-primary">Text 1</ix-event-list-item>
-      <ix-event-list-item item-color="color-primary">Text 2</ix-event-list-item>
-      <ix-event-list-item item-color="color-primary">Text 3</ix-event-list-item>
-      <ix-event-list-item item-color="color-primary">Text 4</ix-event-list-item>
-    </ix-event-list>
-  `,
-})
-export default class EventListCompact {}
-```
-### Example: event-list-custom-item-height
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxEventList, IxEventListItem } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxEventList, IxEventListItem],
-  template: `
-    <ix-event-list item-height="L">
-      <ix-event-list-item item-color="color-primary">Test 1</ix-event-list-item>
-      <ix-event-list-item item-color="color-primary">Test 2</ix-event-list-item>
-    </ix-event-list>
-  `,
-})
-export default class EventListCustomItemHeight {}
-```
-### Example: event-list-filled
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxEventList, IxEventListItem } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxEventList, IxEventListItem],
-  template: `
-    <ix-event-list>
-      @for (item of items; track i; let i = $index) {
-        <ix-event-list-item variant="filled" [itemColor]="item.color">
-          {{ item.text }}
-        </ix-event-list-item>
-      }
-    </ix-event-list>
-  `,
-})
-export default class EventListFilled {
-  items = [
-    { text: 'Text 1', color: 'color-primary' },
-    { text: 'Text 2', color: 'color-primary' },
-    { text: 'Text 3', color: 'color-alarm' },
-    { text: 'Text 4', color: 'color-success' },
-  ];
-}
-```
-### Example: event-list-selected
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxEventList, IxEventListItem } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxEventList, IxEventListItem],
-  template: `
-    <ix-event-list>
-      @for (item of items; track item; let i = $index) {
-        <ix-event-list-item
-          item-color="color-primary"
-          [selected]="selectedIndex === i"
-          (click)="selectedIndex = i"
-        >
-          {{ item }}
-        </ix-event-list-item>
-      }
-    </ix-event-list>
-  `,
-})
-export default class EventListSelected {
-  selectedIndex = 1;
-  items = ['Text 1', 'Text 2', 'Text 3', 'Text 4'];
-}
-```
-### Example: event-list
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxEventList, IxEventListItem } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxEventList, IxEventListItem],
-  template: `
-    <ix-event-list>
-      <ix-event-list-item item-color="color-primary">Text 1</ix-event-list-item>
-      <ix-event-list-item item-color="color-primary">Text 2</ix-event-list-item>
-      <ix-event-list-item item-color="color-alarm">Text 3</ix-event-list-item>
-      <ix-event-list-item item-color="color-success">Text 4</ix-event-list-item>
-    </ix-event-list>
-  `,
-})
-export default class EventList {}
-```
 <!-- Auto Generated Below -->