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-custom-field/readme.md CHANGED Viewed

@@ -1,519 +1,3 @@
-# ix-custom-field
-## HTML Examples
-### Example: custom-field-validation
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Custom field validation example</title>
-    <style>
-      .custom-field-wrapper {
-        margin-bottom: 1rem;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="custom-field-wrapper">
-      <ix-custom-field
-        helper-text="Add your first name here"
-        valid-text="Valid first name"
-        label="First name"
-      >
-        <input
-          id="first-name"
-          type="text"
-          class="ix-form-control ix-valid"
-          value="Jane"
-        />
-      </ix-custom-field>
-    </div>
-    <div class="custom-field-wrapper">
-      <ix-custom-field info-text="Family name" label="Last name">
-        <input
-          id="last-name"
-          type="text"
-          class="ix-form-control ix-info"
-          value="Doe"
-        />
-      </ix-custom-field>
-    </div>
-    <div class="custom-field-wrapper">
-      <ix-custom-field warning-Text="Not a valid email address" label="Email">
-        <input
-          id="email"
-          type="email"
-          class="ix-form-control ix-warning"
-          value="info@"
-        />
-      </ix-custom-field>
-    </div>
-    <div class="custom-field-wrapper">
-      <ix-custom-field invalid-text="Required" label="Address">
-        <input id="address" type="text" class="ix-form-control ix-invalid" />
-      </ix-custom-field>
-    </div>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: custom-field
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Custom field example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconOpenFile } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconOpenFile,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-custom-field helper-text="Choose file">
-      <ix-input value="No file chosen" readonly></ix-input>
-      <ix-icon-button icon="open-file" variant="subtle-primary"></ix-icon-button>
-      <input id="file-upload" type="file" style="display: none" />
-    </ix-custom-field>
-    <script type="module" src="./init.js"></script>
-    <script>
-      document.querySelector('ix-icon-button').addEventListener('click', () => {
-        document.querySelector('#file-upload').click();
-      });
-      document.querySelector('#file-upload').addEventListener('input', (e) => {
-        const fileName = e.target.files[0]?.name;
-        document.querySelector('ix-input').value = fileName || 'No file chosen';
-      });
-    </script>
-  </body>
-</html>
-```
-## React Examples
-### Example: custom-field-validation
-```tsx
-import { IxCustomField } from '@siemens/ix-react';
-const wrapperStyle = {
-  marginBottom: '1rem',
-};
-export default () => {
-  return (
-    <>
-      <div style={wrapperStyle}>
-        <IxCustomField
-          helper-text="Add your first name here"
-          valid-text="Valid first name"
-          label="First name"
-        >
-          <input
-            id="first-name"
-            className="ix-form-control ix-valid"
-            value="Jane"
-          />
-        </IxCustomField>
-      </div>
-      <div style={wrapperStyle}>
-        <IxCustomField info-text="Family name" label="Last name">
-          <input
-            id="last-name"
-            className="ix-form-control ix-info"
-            value="Doe"
-          />
-        </IxCustomField>
-      </div>
-      <div style={wrapperStyle}>
-        <IxCustomField warning-text="Not a valid email address" label="Email">
-          <input
-            id="email"
-            className="ix-form-control ix-warning"
-            value="info@"
-          />
-        </IxCustomField>
-      </div>
-      <div style={wrapperStyle}>
-        <IxCustomField invalid-text="Required" label="Address">
-          <input id="address" className="ix-form-control ix-invalid" />
-        </IxCustomField>
-      </div>
-    </>
-  );
-};
-```
-### Example: custom-field
-```tsx
-import { useRef } from 'react';
-import { IxCustomField, IxIconButton, IxInput } from '@siemens/ix-react';
-export default () => {
-  const ref = useRef<HTMLInputElement>(null);
-  return (
-    <IxCustomField helper-text="Choose file">
-      <IxInput value="Enter text here" readonly></IxInput>
-      <IxIconButton icon="open-file" variant="subtle-primary" onClick={() => {
-          ref.current?.click();
-        }}
-      ></IxIconButton>
-      <input
-        ref={ref}
-        id="file-upload"
-        type="file"
-        style={{ display: 'none' }}
-        onInput={(e: any) => console.log(e.target.files)}
-      />
-    </IxCustomField>
-  );
-};
-```
-## Vue Examples
-### Example: custom-field-validation
-```tsx
-<script setup lang="ts">
-import { IxCustomField } from '@siemens/ix-vue';
-</script>
-<template>
-  <div class="custom-field-wrapper">
-    <IxCustomField
-      helper-text="Add your first name here"
-      valid-text="Valid first name"
-      label="First name"
-    >
-      <input
-        id="first-name"
-        className="ix-form-control ix-valid"
-        value="Jane"
-      />
-    </IxCustomField>
-  </div>
-  <div class="custom-field-wrapper">
-    <IxCustomField info-text="Family name" label="Last name">
-      <input id="last-name" className="ix-form-control ix-info" value="Doe" />
-    </IxCustomField>
-  </div>
-  <div class="custom-field-wrapper">
-    <IxCustomField warning-text="Not a valid email address" label="Email">
-      <input id="email" className="ix-form-control ix-warning" value="info@" />
-    </IxCustomField>
-  </div>
-  <div class="custom-field-wrapper">
-    <IxCustomField invalid-text="Required" label="Address">
-      <input id="address" className="ix-form-control ix-invalid" />
-    </IxCustomField>
-  </div>
-</template>
-<style scoped>
-.custom-field-wrapper {
-  margin-bottom: 1rem;
-}
-</style>
-```
-### Example: custom-field
-```tsx
-<script setup lang="ts">
-import { ref } from 'vue';
-import { IxCustomField, IxInput, IxIconButton } from '@siemens/ix-vue';
-const input = ref();
-const openFileBrowser = () => {
-  input.value.click();
-};
-</script>
-<template>
-  <IxCustomField helper-text="Choose file">
-    <IxInput value="Enter text here" readonly></IxInput>
-    <IxIconButton icon="open-file" variant="subtle-primary" @click="openFileBrowser()"></IxIconButton>
-    <input
-      ref="input"
-      id="file-upload"
-      type="file"
-      style="display: none"
-      @input="(e: any) => console.log(e.target.files)"
-    />
-  </IxCustomField>
-</template>
-```
-## Angular Examples
-### Example: custom-field-validation
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './custom-field-validation.html',
-})
-export default class CustomFieldValidation {}
-```
-#### 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.
--->
-<style>
-  .custom-field-wrapper {
-    margin-bottom: 1rem;
-  }
-</style>
-<div class="custom-field-wrapper">
-  <ix-custom-field
-    helper-text="Add your first name here"
-    valid-text="Valid first name"
-    label="First name"
-  >
-    <input
-      id="first-name"
-      type="text"
-      class="ix-form-control ix-valid"
-      value="Jane"
-    />
-  </ix-custom-field>
-</div>
-<div class="custom-field-wrapper">
-  <ix-custom-field info-text="Family name" label="Last name">
-    <input
-      id="last-name"
-      type="text"
-      class="ix-form-control ix-info"
-      value="Doe"
-    />
-  </ix-custom-field>
-</div>
-<div class="custom-field-wrapper">
-  <ix-custom-field warning-Text="Not a valid email address" label="Email">
-    <input
-      id="email"
-      type="email"
-      class="ix-form-control ix-warning"
-      value="info@"
-    />
-  </ix-custom-field>
-</div>
-<div class="custom-field-wrapper">
-  <ix-custom-field invalid-text="Required" label="Address">
-    <input id="address" type="text" class="ix-form-control ix-invalid" />
-  </ix-custom-field>
-</div>
-```
-### Example: custom-field
-#### Component typescript
-```typescript
-import { Component, ElementRef, ViewChild } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './custom-field.html',
-})
-export default class CustomField {
-  @ViewChild('fileUpload') fileUpload!: ElementRef<HTMLElement>;
-  openFileBrowser() {
-    this.fileUpload.nativeElement.click();
-    this.fileUpload.nativeElement.oninput = (event: any) => {
-      console.log(event.target.files);
-    };
-  }
-}
-```
-#### 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.
--->
-<ix-custom-field helper-text="Choose file">
-  <ix-input value="No file chosen" readonly></ix-input>
-  <ix-icon-button icon="open-file" variant="subtle-primary" (click)="openFileBrowser()"></ix-icon-button>
-  <input #fileUpload type="file" style="display: none" />
-</ix-custom-field>
-```
-## Angular Standalone Examples
-### Example: custom-field-validation
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxCustomField } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxCustomField],
-  templateUrl: './custom-field-validation.html',
-})
-export default class CustomFieldValidation {}
-```
-#### 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.
--->
-<style>
-  .custom-field-wrapper {
-    margin-bottom: 1rem;
-  }
-</style>
-<div class="custom-field-wrapper">
-  <ix-custom-field
-    helper-text="Add your first name here"
-    valid-text="Valid first name"
-    label="First name"
-  >
-    <input
-      id="first-name"
-      type="text"
-      class="form-control ix-valid"
-      value="Jane"
-    />
-  </ix-custom-field>
-</div>
-<div class="custom-field-wrapper">
-  <ix-custom-field info-text="Family name" label="Last name">
-    <input
-      id="last-name"
-      type="text"
-      class="form-control ix-info"
-      value="Doe"
-    />
-  </ix-custom-field>
-</div>
-<div class="custom-field-wrapper">
-  <ix-custom-field warning-Text="Not a valid email address" label="Email">
-    <input
-      id="email"
-      type="email"
-      class="form-control ix-warning"
-      value="info@"
-    />
-  </ix-custom-field>
-</div>
-<div class="custom-field-wrapper">
-  <ix-custom-field invalid-text="Required" label="Address">
-    <input id="address" type="text" class="form-control ix-invalid" />
-  </ix-custom-field>
-</div>
-```
-### Example: custom-field
-#### Component typescript
-```typescript
-import { Component, ElementRef, ViewChild } from '@angular/core';
-import {
-  IxCustomField,
-  IxInput,
-  IxIconButton,
-  IxTextValueAccessorDirective,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxCustomField, IxInput, IxIconButton, IxTextValueAccessorDirective],
-  templateUrl: './custom-field.html',
-})
-export default class CustomField {
-  @ViewChild('fileUpload') fileUpload!: ElementRef<HTMLElement>;
-  openFileBrowser() {
-    this.fileUpload.nativeElement.click();
-    this.fileUpload.nativeElement.oninput = (event: any) => {
-      console.log(event.target.files);
-    };
-  }
-}
-```
-#### 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.
--->
-<ix-custom-field helper-text="Choose file">
-  <ix-input value="No file chosen" readonly></ix-input>
-  <ix-icon-button icon="open-file" variant="subtle-primary" (click)="openFileBrowser()"></ix-icon-button>
-  <input #fileUpload type="file" style="display: none" />
-</ix-custom-field>
-```
 <!-- Auto Generated Below -->