npm - @siemens/ix-docs - Versions diffs - 4.3.0 → 4.4.0 - Mend

@siemens/ix-docs 4.3.0 → 4.4.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 (1286) hide show

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

@@ -119,6 +119,73 @@
 </html>
 ```
+### Example: slider-validation
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Slider validation example</title>
+  </head>
+  <body>
+    <div>
+      <ix-slider
+        label="Info"
+        value="10"
+        trace
+        info-text="Info text"
+        class="ix-info"
+      >
+        <span slot="label-start">0</span>
+        <span slot="label-end">100</span>
+      </ix-slider>
+    </div>
+    <div>
+      <ix-slider
+        label="Warning"
+        value="90"
+        trace
+        warning-text="Warning text"
+        class="ix-warning"
+      >
+        <span slot="label-start">0</span>
+        <span slot="label-end">100</span>
+      </ix-slider>
+    </div>
+    <div>
+      <ix-slider
+        label="Valid"
+        value="10"
+        trace
+        valid-text="Valid text"
+        class="ix-valid"
+      >
+        <span slot="label-start">0</span>
+        <span slot="label-end">100</span>
+      </ix-slider>
+    </div>
+    <div>
+      <ix-slider
+        label="Invalid"
+        value="100"
+        trace
+        invalid-text="Invalid text"
+        class="ix-invalid"
+      >
+        <span slot="label-start">0</span>
+        <span slot="label-end">100</span>
+      </ix-slider>
+    </div>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
 ### Example: slider
 ```html
 <!DOCTYPE html>
@@ -232,6 +299,69 @@ export default () => {
 };
 ```
+### Example: slider-validation
+```tsx
+import { IxSlider } from '@siemens/ix-react';
+export default () => {
+  return (
+    <>
+      <div>
+        <IxSlider
+          label="Info"
+          value={10}
+          trace
+          info-text="Info text"
+          className="ix-info"
+        >
+          <span slot="label-start">0</span>
+          <span slot="label-end">100</span>
+        </IxSlider>
+      </div>
+      <div>
+        <IxSlider
+          label="Warning"
+          value={90}
+          trace
+          warningText="Warning text"
+          className="ix-warning"
+        >
+          <span slot="label-start">0</span>
+          <span slot="label-end">100</span>
+        </IxSlider>
+      </div>
+      <div>
+        <IxSlider
+          label="Valid"
+          value={10}
+          trace
+          validText="Valid text"
+          className="ix-valid"
+        >
+          <span slot="label-start">0</span>
+          <span slot="label-end">100</span>
+        </IxSlider>
+      </div>
+      <div>
+        <IxSlider
+          label="Invalid"
+          value={100}
+          trace
+          invalidText="Invalid text"
+          className="ix-invalid"
+        >
+          <span slot="label-start">0</span>
+          <span slot="label-end">100</span>
+        </IxSlider>
+      </div>
+    </>
+  );
+};
+```
 ### Example: slider
 ```tsx
 import { IxSlider } from '@siemens/ix-react';
@@ -339,6 +469,67 @@ import { IxSlider } from '@siemens/ix-vue';
 </template>
 ```
+### Example: slider-validation
+```tsx
+<script setup lang="ts">
+import { IxSlider } from '@siemens/ix-vue';
+</script>
+<template>
+  <div>
+    <IxSlider
+      label="Info"
+      :value="10"
+      trace
+      info-text="Info text"
+      class="ix-info"
+    >
+      <span slot="label-start">0</span>
+      <span slot="label-end">100</span>
+    </IxSlider>
+  </div>
+  <div>
+    <IxSlider
+      label="Warning"
+      :value="90"
+      trace
+      warning-text="Warning text"
+      class="ix-warning"
+    >
+      <span slot="label-start">0</span>
+      <span slot="label-end">100</span>
+    </IxSlider>
+  </div>
+  <div>
+    <IxSlider
+      label="Valid"
+      :value="10"
+      trace
+      valid-text="Valid text"
+      class="ix-valid"
+    >
+      <span slot="label-start">0</span>
+      <span slot="label-end">100</span>
+    </IxSlider>
+  </div>
+  <div>
+    <IxSlider
+      label="Invalid"
+      :value="100"
+      trace
+      invalid-text="Invalid text"
+      class="ix-invalid"
+    >
+      <span slot="label-start">0</span>
+      <span slot="label-end">100</span>
+    </IxSlider>
+  </div>
+</template>
+```
 ### Example: slider
 ```tsx
 <script setup lang="ts">
@@ -506,6 +697,86 @@ LICENSE file in the root directory of this source tree.
 ```
+### Example: slider-validation
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './slider-validation.html',
+})
+export default class SliderValidation {}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<div>
+  <ix-slider
+    label="Info"
+    value="10"
+    trace
+    info-text="Info text"
+    class="ix-info"
+  >
+    <span slot="label-start">0</span>
+    <span slot="label-end">100</span>
+  </ix-slider>
+</div>
+<div>
+  <ix-slider
+    label="Warning"
+    value="90"
+    trace
+    warningText="Warning text"
+    class="ix-warning"
+  >
+    <span slot="label-start">0</span>
+    <span slot="label-end">100</span>
+  </ix-slider>
+</div>
+<div>
+  <ix-slider
+    label="Valid"
+    value="10"
+    trace
+    validText="Valid text"
+    class="ix-valid"
+  >
+    <span slot="label-start">0</span>
+    <span slot="label-end">100</span>
+  </ix-slider>
+</div>
+<div>
+  <ix-slider
+    label="Invalid"
+    value="100"
+    trace
+    invalidText="Invalid text"
+    class="ix-invalid"
+  >
+    <span slot="label-start">0</span>
+    <span slot="label-end">100</span>
+  </ix-slider>
+</div>
+```
 ### Example: slider
 #### Component typescript
 ```typescript
@@ -694,6 +965,87 @@ LICENSE file in the root directory of this source tree.
 ```
+### Example: slider-validation
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import { IxSlider } from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxSlider],
+  templateUrl: './slider-validation.html',
+})
+export default class SliderValidation {}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<div>
+  <ix-slider
+    label="Info"
+    value="10"
+    trace
+    info-text="Info text"
+    class="ix-info"
+  >
+    <span slot="label-start">0</span>
+    <span slot="label-end">100</span>
+  </ix-slider>
+</div>
+<div>
+  <ix-slider
+    label="Warning"
+    value="90"
+    trace
+    warningText="Warning text"
+    class="ix-warning"
+  >
+    <span slot="label-start">0</span>
+    <span slot="label-end">100</span>
+  </ix-slider>
+</div>
+<div>
+  <ix-slider
+    label="Valid"
+    value="10"
+    trace
+    validText="Valid text"
+    class="ix-valid"
+  >
+    <span slot="label-start">0</span>
+    <span slot="label-end">100</span>
+  </ix-slider>
+</div>
+<div>
+  <ix-slider
+    label="Invalid"
+    value="100"
+    trace
+    invalidText="Invalid text"
+    class="ix-invalid"
+  >
+    <span slot="label-start">0</span>
+    <span slot="label-end">100</span>
+  </ix-slider>
+</div>
+```
 ### Example: slider
 #### Component typescript
 ```typescript
@@ -747,7 +1099,7 @@ LICENSE file in the root directory of this source tree.
 | `infoText`          | `info-text`            | Info text for the field component                                                                                                          | `string \| undefined`            | `undefined` |
 | `invalidText`       | `invalid-text`         | Error text for the field component                                                                                                         | `string \| undefined`            | `undefined` |
 | `label`             | `label`                | Label for the field component                                                                                                              | `string \| undefined`            | `undefined` |
-| `marker`            | `marker`               | Define tick marker on the slider. Marker has to be within slider min/max                                                                   | `number[] \| undefined`          | `undefined` |
+| `marker`            | --                     | Define tick marker on the slider. Marker has to be within slider min/max                                                                   | `number[] \| undefined`          | `undefined` |
 | `max`               | `max`                  | Maximum slider value                                                                                                                       | `number`                         | `100`       |
 | `min`               | `min`                  | Minimum slider value                                                                                                                       | `number`                         | `0`         |
 | `showTextAsTooltip` | `show-text-as-tooltip` | Show helper, info, warning, error and valid text as tooltip                                                                                | `boolean`                        | `false`     |