npm - @siemens/ix-docs - Versions diffs - 0.0.0-pr-2238-20251103105018 → 4.1.0 - Mend

@siemens/ix-docs 0.0.0-pr-2238-20251103105018 → 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 (996) hide show

package/build/docs/autogenerated/prompt/ix-key-value/readme.md CHANGED Viewed

@@ -1,1023 +1,3 @@
-# ix-key-value
-## HTML Examples
-### Example: key-value-list-striped
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Key value list striped example</title>
-  </head>
-  <body>
-    <ix-key-value-list striped="true">
-      <ix-key-value
-        label="Label"
-        label-position="left"
-        value="Value"
-      ></ix-key-value>
-      <ix-key-value
-        label="Label"
-        label-position="left"
-        value="Value"
-      ></ix-key-value>
-      <ix-key-value
-        label="Label"
-        label-position="left"
-        value="Value"
-      ></ix-key-value>
-    </ix-key-value-list>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: key-value-list-with-custom-value
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Key value list with custom value example</title>
-    <link rel="stylesheet" href="./key-value-list-with-custom-value.css" />
-  </head>
-  <body>
-    <ix-key-value-list>
-      <ix-key-value label="Label" label-position="left">
-        <input
-          class="ix-form-control"
-          placeholder="Enter text here"
-          type="text"
-          slot="custom-value"
-        />
-      </ix-key-value>
-      <ix-key-value label="Label" label-position="left">
-        <input
-          class="ix-form-control"
-          placeholder="Enter text here"
-          type="text"
-          slot="custom-value"
-        />
-      </ix-key-value>
-      <ix-key-value label="Label" label-position="left">
-        <input
-          class="ix-form-control"
-          placeholder="Enter text here"
-          type="text"
-          slot="custom-value"
-        />
-      </ix-key-value>
-    </ix-key-value-list>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: key-value-list-with-icon
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Key value list with icon example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconLocation } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconLocation,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-key-value-list>
-      <ix-key-value
-        icon="location"
-        label="Label"
-        label-position="left"
-        value="Value"
-      ></ix-key-value>
-      <ix-key-value
-        icon="location"
-        label="Label"
-        label-position="left"
-        value="Value"
-      ></ix-key-value>
-      <ix-key-value
-        icon="location"
-        label="Label"
-        label-position="left"
-        value="Value"
-      ></ix-key-value>
-    </ix-key-value-list>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: key-value-list
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Key value list example</title>
-  </head>
-  <body>
-    <ix-key-value-list>
-      <ix-key-value
-        label="Label"
-        label-position="left"
-        value="Value"
-      ></ix-key-value>
-      <ix-key-value
-        label="Label"
-        label-position="left"
-        value="Value"
-      ></ix-key-value>
-      <ix-key-value
-        label="Label"
-        label-position="left"
-        value="Value"
-      ></ix-key-value>
-    </ix-key-value-list>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: key-value-with-custom-value
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Key value with custom value example</title>
-    <link rel="stylesheet" href="./key-value-with-custom-value.css" />
-  </head>
-  <body>
-    <ix-key-value label="Label">
-      <input
-        class="ix-form-control"
-        placeholder="Enter text here"
-        type="text"
-        slot="custom-value"
-      />
-    </ix-key-value>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: key-value-with-icon
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Key value with icon example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconLocation } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconLocation,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-key-value icon="location" label="Label" value="Value"></ix-key-value>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: key-value-with-label-left
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Key value with label left example</title>
-  </head>
-  <body>
-    <ix-key-value
-      label="Label"
-      label-position="left"
-      value="Value"
-    ></ix-key-value>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: key-value
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Key value example</title>
-  </head>
-  <body>
-    <ix-key-value label="Label" value="Value"></ix-key-value>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-## React Examples
-### Example: key-value-list-striped
-```tsx
-import { IxKeyValue, IxKeyValueList } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxKeyValueList striped={true}>
-      <IxKeyValue label="Label" labelPosition="left" value="Value"></IxKeyValue>
-      <IxKeyValue label="Label" labelPosition="left" value="Value"></IxKeyValue>
-      <IxKeyValue label="Label" labelPosition="left" value="Value"></IxKeyValue>
-    </IxKeyValueList>
-  );
-};
-```
-### Example: key-value-list-with-custom-value
-```tsx
-import './key-value-list-with-custom-value.scoped.css';
-import { IxKeyValue, IxKeyValueList } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxKeyValueList>
-      <IxKeyValue label="Label" labelPosition="left">
-        <input
-          className="ix-form-control"
-          placeholder="Enter text here"
-          type="text"
-          slot="custom-value"
-        />
-      </IxKeyValue>
-      <IxKeyValue label="Label" labelPosition="left">
-        <input
-          className="ix-form-control"
-          placeholder="Enter text here"
-          type="text"
-          slot="custom-value"
-        />
-      </IxKeyValue>
-      <IxKeyValue label="Label" labelPosition="left">
-        <input
-          className="ix-form-control"
-          placeholder="Enter text here"
-          type="text"
-          slot="custom-value"
-        />
-      </IxKeyValue>
-    </IxKeyValueList>
-  );
-};
-```
-### Example: key-value-list-with-icon
-```tsx
-import { iconLocation } from '@siemens/ix-icons/icons';
-import { IxKeyValue, IxKeyValueList } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxKeyValueList>
-      <IxKeyValue
-        icon={iconLocation}
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></IxKeyValue>
-      <IxKeyValue
-        icon={iconLocation}
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></IxKeyValue>
-      <IxKeyValue
-        icon={iconLocation}
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></IxKeyValue>
-    </IxKeyValueList>
-  );
-};
-```
-### Example: key-value-list
-```tsx
-import { IxKeyValue, IxKeyValueList } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxKeyValueList>
-      <IxKeyValue label="Label" labelPosition="left" value="Value"></IxKeyValue>
-      <IxKeyValue label="Label" labelPosition="left" value="Value"></IxKeyValue>
-      <IxKeyValue label="Label" labelPosition="left" value="Value"></IxKeyValue>
-    </IxKeyValueList>
-  );
-};
-```
-### Example: key-value-with-custom-value
-```tsx
-import './key-value-with-custom-value.scoped.css';
-import { IxKeyValue } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxKeyValue label="Label">
-      <input
-        className="ix-form-control"
-        placeholder="Enter text here"
-        type="text"
-        slot="custom-value"
-      />
-    </IxKeyValue>
-  );
-};
-```
-### Example: key-value-with-icon
-```tsx
-import { iconLocation } from '@siemens/ix-icons/icons';
-import { IxKeyValue } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxKeyValue icon={iconLocation} label="Label" value="Value"></IxKeyValue>
-  );
-};
-```
-### Example: key-value-with-label-left
-```tsx
-import { IxKeyValue } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxKeyValue label="Label" labelPosition="left" value="Value"></IxKeyValue>
-  );
-};
-```
-### Example: key-value
-```tsx
-import { IxKeyValue } from '@siemens/ix-react';
-export default () => {
-  return <IxKeyValue label="Label" value="Value"></IxKeyValue>;
-};
-```
-## Vue Examples
-### Example: key-value-list-striped
-```tsx
-<script setup lang="ts">
-import { IxKeyValue, IxKeyValueList } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxKeyValueList striped>
-    <IxKeyValue label="Label" labelPosition="left" value="Value"></IxKeyValue>
-    <IxKeyValue label="Label" labelPosition="left" value="Value"></IxKeyValue>
-    <IxKeyValue label="Label" labelPosition="left" value="Value"></IxKeyValue>
-  </IxKeyValueList>
-</template>
-```
-### Example: key-value-list-with-custom-value
-```tsx
-<script setup lang="ts">
-import { IxKeyValue, IxKeyValueList } from '@siemens/ix-vue';
-</script>
-<style scoped src="./key-value-list-with-custom-value.css"></style>
-<template>
-  <IxKeyValueList>
-    <IxKeyValue label="Label" labelPosition="left">
-      <input
-        class="ix-form-control"
-        placeholder="Enter text here"
-        type="text"
-        slot="custom-value"
-      />
-    </IxKeyValue>
-    <IxKeyValue label="Label" labelPosition="left">
-      <input
-        class="ix-form-control"
-        placeholder="Enter text here"
-        type="text"
-        slot="custom-value"
-      />
-    </IxKeyValue>
-    <IxKeyValue label="Label" labelPosition="left">
-      <input
-        class="ix-form-control"
-        placeholder="Enter text here"
-        type="text"
-        slot="custom-value"
-      />
-    </IxKeyValue>
-  </IxKeyValueList>
-</template>
-```
-### Example: key-value-list-with-icon
-```tsx
-<script setup lang="ts">
-import { iconLocation } from '@siemens/ix-icons/icons';
-import { IxKeyValue, IxKeyValueList } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxKeyValueList>
-    <IxKeyValue
-      :icon="iconLocation"
-      label="Label"
-      labelPosition="left"
-      value="Value"
-    ></IxKeyValue>
-    <IxKeyValue
-      :icon="iconLocation"
-      label="Label"
-      labelPosition="left"
-      value="Value"
-    ></IxKeyValue>
-    <IxKeyValue
-      :icon="iconLocation"
-      label="Label"
-      labelPosition="left"
-      value="Value"
-    ></IxKeyValue>
-  </IxKeyValueList>
-</template>
-```
-### Example: key-value-list
-```tsx
-<script setup lang="ts">
-import { IxKeyValue, IxKeyValueList } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxKeyValueList>
-    <IxKeyValue label="Label" labelPosition="left" value="Value"></IxKeyValue>
-    <IxKeyValue label="Label" labelPosition="left" value="Value"></IxKeyValue>
-    <IxKeyValue label="Label" labelPosition="left" value="Value"></IxKeyValue>
-  </IxKeyValueList>
-</template>
-```
-### Example: key-value-with-custom-value
-```tsx
-<script setup lang="ts">
-import { IxKeyValue } from '@siemens/ix-vue';
-</script>
-<style scoped src="./key-value-with-custom-value.css"></style>
-<template>
-  <IxKeyValue label="Label">
-    <input
-      class="ix-form-control"
-      placeholder="Enter text here"
-      type="text"
-      slot="custom-value"
-    />
-  </IxKeyValue>
-</template>
-```
-### Example: key-value-with-icon
-```tsx
-<script setup lang="ts">
-import { iconLocation } from '@siemens/ix-icons/icons';
-import { IxKeyValue } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxKeyValue :icon="iconLocation" label="Label" value="Value"></IxKeyValue>
-</template>
-```
-### Example: key-value-with-label-left
-```tsx
-<script setup lang="ts">
-import { IxKeyValue } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxKeyValue label="Label" labelPosition="left" value="Value"></IxKeyValue>
-</template>
-```
-### Example: key-value
-```tsx
-<script setup lang="ts">
-import { IxKeyValue } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxKeyValue label="Label" value="Value"></IxKeyValue>
-</template>
-```
-## Angular Examples
-### Example: key-value-list-striped
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-key-value-list striped="true">
-      <ix-key-value
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></ix-key-value>
-      <ix-key-value
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></ix-key-value>
-      <ix-key-value
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></ix-key-value>
-    </ix-key-value-list>
-  `,
-})
-export default class KeyValueListStriped {}
-```
-### Example: key-value-list-with-custom-value
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-key-value-list>
-      <ix-key-value label="Label" labelPosition="left">
-        <input
-          class="ix-form-control"
-          placeholder="Enter text here"
-          type="text"
-          slot="custom-value"
-        />
-      </ix-key-value>
-      <ix-key-value label="Label" labelPosition="left">
-        <input
-          class="ix-form-control"
-          placeholder="Enter text here"
-          type="text"
-          slot="custom-value"
-        />
-      </ix-key-value>
-      <ix-key-value label="Label" labelPosition="left">
-        <input
-          class="ix-form-control"
-          placeholder="Enter text here"
-          type="text"
-          slot="custom-value"
-        />
-      </ix-key-value>
-    </ix-key-value-list>
-  `,
-  styleUrls: ['./key-value-list-with-custom-value.css'],
-})
-export default class KeyValueListWithCustomValue {}
-```
-### Example: key-value-list-with-icon
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-key-value-list>
-      <ix-key-value
-        icon="location"
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></ix-key-value>
-      <ix-key-value
-        icon="location"
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></ix-key-value>
-      <ix-key-value
-        icon="location"
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></ix-key-value>
-    </ix-key-value-list>
-  `,
-})
-export default class KeyValueListWithCustomValue {}
-```
-### Example: key-value-list
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-key-value-list>
-      <ix-key-value
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></ix-key-value>
-      <ix-key-value
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></ix-key-value>
-      <ix-key-value
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></ix-key-value>
-    </ix-key-value-list>
-  `,
-})
-export default class KeyValueList {}
-```
-### Example: key-value-with-custom-value
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-key-value label="Label">
-      <input
-        class="ix-form-control"
-        placeholder="Enter text here"
-        type="text"
-        slot="custom-value"
-      />
-    </ix-key-value>
-  `,
-  styleUrls: ['./key-value-with-custom-value.css'],
-})
-export default class KeyValueWithCustomValue {}
-```
-### Example: key-value-with-icon
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-key-value icon="location" label="Label" value="Value"></ix-key-value>
-  `,
-})
-export default class KeyValueWithIcon {}
-```
-### Example: key-value-with-label-left
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-key-value
-      label="Label"
-      labelPosition="left"
-      value="Value"
-    ></ix-key-value>
-  `,
-})
-export default class KeyValueWithLabelLeft {}
-```
-### Example: key-value
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `<ix-key-value label="Label" value="Value"></ix-key-value>`,
-})
-export default class KeyValue {}
-```
-## Angular Standalone Examples
-### Example: key-value-list-striped
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxKeyValueList, IxKeyValue } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxKeyValueList, IxKeyValue],
-  template: `
-    <ix-key-value-list striped="true">
-      <ix-key-value
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></ix-key-value>
-      <ix-key-value
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></ix-key-value>
-      <ix-key-value
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></ix-key-value>
-    </ix-key-value-list>
-  `,
-})
-export default class KeyValueListStriped {}
-```
-### Example: key-value-list-with-custom-value
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxKeyValueList, IxKeyValue } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxKeyValueList, IxKeyValue],
-  template: `
-    <ix-key-value-list>
-      <ix-key-value label="Label" labelPosition="left">
-        <input placeholder="Enter text here" type="text" slot="custom-value" />
-      </ix-key-value>
-      <ix-key-value label="Label" labelPosition="left">
-        <input placeholder="Enter text here" type="text" slot="custom-value" />
-      </ix-key-value>
-      <ix-key-value label="Label" labelPosition="left">
-        <input placeholder="Enter text here" type="text" slot="custom-value" />
-      </ix-key-value>
-    </ix-key-value-list>
-  `,
-  styleUrls: ['./key-value-list-with-custom-value.css'],
-})
-export default class KeyValueListWithCustomValue {}
-```
-### Example: key-value-list-with-icon
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxKeyValueList, IxKeyValue } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxKeyValueList, IxKeyValue],
-  template: `
-    <ix-key-value-list>
-      <ix-key-value
-        icon="location"
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></ix-key-value>
-      <ix-key-value
-        icon="location"
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></ix-key-value>
-      <ix-key-value
-        icon="location"
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></ix-key-value>
-    </ix-key-value-list>
-  `,
-})
-export default class KeyValueListWithCustomValue {}
-```
-### Example: key-value-list
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxKeyValueList, IxKeyValue } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxKeyValueList, IxKeyValue],
-  template: `
-    <ix-key-value-list>
-      <ix-key-value
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></ix-key-value>
-      <ix-key-value
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></ix-key-value>
-      <ix-key-value
-        label="Label"
-        labelPosition="left"
-        value="Value"
-      ></ix-key-value>
-    </ix-key-value-list>
-  `,
-})
-export default class KeyValueList {}
-```
-### Example: key-value-with-custom-value
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxKeyValue } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxKeyValue],
-  template: `
-    <ix-key-value label="Label">
-      <input placeholder="Enter text here" type="text" slot="custom-value" />
-    </ix-key-value>
-  `,
-  styleUrls: ['./key-value-with-custom-value.css'],
-})
-export default class KeyValueWithCustomValue {}
-```
-### Example: key-value-with-icon
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxKeyValue } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxKeyValue],
-  template: `
-    <ix-key-value icon="location" label="Label" value="Value"></ix-key-value>
-  `,
-})
-export default class KeyValueWithIcon {}
-```
-### Example: key-value-with-label-left
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxKeyValue } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxKeyValue],
-  template: `
-    <ix-key-value
-      label="Label"
-      labelPosition="left"
-      value="Value"
-    ></ix-key-value>
-  `,
-})
-export default class KeyValueWithLabelLeft {}
-```
-### Example: key-value
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxKeyValue } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxKeyValue],
-  template: `<ix-key-value label="Label" value="Value"></ix-key-value>`,
-})
-export default class KeyValue {}
-```
 <!-- Auto Generated Below -->