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

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

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

@@ -6,7 +6,7 @@
 ### Example: modal-close
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -97,7 +97,7 @@
 ### Example: modal-form-ix-button-submit
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -183,10 +183,67 @@
 </html>
 ```
-### Example: modal
+### Example: modal-non-blocking
 ```html
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Modal non-blocking example</title>
+  </head>
+  <body>
+    <div>
+      <div style="padding: 1rem">
+        <ix-typography format="body" text-color="std">
+          Content behind the dialog
+        </ix-typography>
+        <ix-button id="behind">Behind control</ix-button>
+      </div>
+      <ix-button id="open">Show non-blocking modal</ix-button>
+    </div>
+    <script type="module">
+      import { showModal, closeModal, dismissModal } from '@siemens/ix';
+      document.getElementById('open').addEventListener('click', async () => {
+        const modal = document.createElement('ix-modal');
+        modal.isNonBlocking = true;
+        modal.innerHTML = `
+      <ix-modal-header>Message headline</ix-modal-header>
+      <ix-modal-content>Message text lorem ipsum</ix-modal-content>
+      <ix-modal-footer>
+        <ix-button variant="subtle-primary" data-cancel>Cancel</ix-button>
+        <ix-button data-okay autofocus>OK</ix-button>
+      </ix-modal-footer>
+    `;
+        const header = modal.querySelector('ix-modal-header');
+        header.addEventListener('closeClick', () =>
+          dismissModal(header, 'dismiss payload')
+        );
+        const cancelButton = modal.querySelector('[data-cancel]');
+        const okayButton = modal.querySelector('[data-okay]');
+        cancelButton.addEventListener('click', () =>
+          dismissModal(cancelButton, 'dismiss payload')
+        );
+        okayButton.addEventListener('click', () =>
+          closeModal(okayButton, 'close payload!')
+        );
+        await showModal({ content: modal });
+      });
+    </script>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: modal
+```html
+<!DOCTYPE html>
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -389,6 +446,69 @@ export default () => {
 };
 ```
+### Example: modal-non-blocking
+```tsx
+import {
+  IxButton,
+  IxModalContent,
+  IxModalFooter,
+  IxModalHeader,
+  IxTypography,
+  Modal,
+  ModalRef,
+  showModal,
+} from '@siemens/ix-react';
+import { useRef } from 'react';
+function CustomModal() {
+  const modalRef = useRef<ModalRef>(null);
+  const close = () => {
+    modalRef.current?.close('close payload!');
+  };
+  const dismiss = () => {
+    modalRef.current?.dismiss('dismiss payload');
+  };
+  return (
+    <Modal ref={modalRef} isNonBlocking>
+      <IxModalHeader onCloseClick={() => dismiss()}>
+        Message headline
+      </IxModalHeader>
+      <IxModalContent>Message text lorem ipsum</IxModalContent>
+      <IxModalFooter>
+        <IxButton variant="subtle-primary" onClick={() => dismiss()}>
+          Cancel
+        </IxButton>
+        <IxButton onClick={() => close()} autoFocus>
+          OK
+        </IxButton>
+      </IxModalFooter>
+    </Modal>
+  );
+}
+export default function ModalNonBlockingPreview() {
+  async function show() {
+    await showModal({
+      content: <CustomModal />,
+    });
+  }
+  return (
+    <div>
+      <div style={{ padding: '1rem' }}>
+        <IxTypography format="body" textColor="std">
+          Content behind the dialog
+        </IxTypography>
+        <IxButton id="behind">Behind control</IxButton>
+      </div>
+      <IxButton onClick={show}>Show non-blocking modal</IxButton>
+    </div>
+  );
+}
+```
 ### Example: modal
 ```tsx
 import {
@@ -422,7 +542,9 @@ function CustomModal() {
         <IxButton variant="subtle-primary" onClick={() => dismiss()}>
           Cancel
         </IxButton>
-        <IxButton onClick={() => close()}>OK</IxButton>
+        <IxButton autoFocus onClick={() => close()}>
+          OK
+        </IxButton>
       </IxModalFooter>
     </Modal>
   );
@@ -682,6 +804,67 @@ export default class ModalFormIxButtonSubmit {
 ```
+### Example: modal-non-blocking
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import { IxActiveModal, ModalService } from '@siemens/ix-angular';
+@Component({
+  standalone: false,
+  selector: 'app-modal-non-blocking-content',
+  template: `
+    <ix-modal-header (closeClick)="activeModal.dismiss('dismiss payload')">
+      Message headline
+    </ix-modal-header>
+    <ix-modal-content>Message text lorem ipsum</ix-modal-content>
+    <ix-modal-footer>
+      <ix-button
+        variant="subtle-primary"
+        (click)="activeModal.dismiss('dismiss payload')"
+      >
+        Cancel
+      </ix-button>
+      <ix-button autofocus (click)="activeModal.close('close payload!')">
+        OK
+      </ix-button>
+    </ix-modal-footer>
+  `,
+})
+export class ModalNonBlockingContent {
+  constructor(readonly activeModal: IxActiveModal) {}
+}
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  template: `
+    <div>
+      <div style="padding: 1rem">
+        <ix-typography format="body" text-color="std">
+          Content behind the dialog
+        </ix-typography>
+        <ix-button id="behind">Behind control</ix-button>
+      </div>
+      <ix-button (click)="openModal()">Show non-blocking modal</ix-button>
+    </div>
+  `,
+})
+export default class ModalNonBlocking {
+  constructor(private readonly modalService: ModalService) {}
+  async openModal() {
+    await this.modalService.open({
+      content: ModalNonBlockingContent,
+      isNonBlocking: true,
+    });
+  }
+}
+```
 ## Angular Standalone Examples
 ### Example: modal-close
@@ -809,6 +992,75 @@ LICENSE file in the root directory of this source tree.
 ```
+### Example: modal-non-blocking
+#### Component typescript
+```typescript
+import { Component, inject } from '@angular/core';
+import {
+  IxActiveModal,
+  IxButton,
+  IxModalContent,
+  IxModalFooter,
+  IxModalHeader,
+  IxTypography,
+  ModalService,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-modal-non-blocking-content',
+  imports: [IxModalHeader, IxModalContent, IxModalFooter, IxButton],
+  template: `
+    <ix-modal-header (closeClick)="activeModal.dismiss('dismiss payload')">
+      Message headline
+    </ix-modal-header>
+    <ix-modal-content>Message text lorem ipsum</ix-modal-content>
+    <ix-modal-footer>
+      <ix-button
+        variant="subtle-primary"
+        (click)="activeModal.dismiss('dismiss payload')"
+      >
+        Cancel
+      </ix-button>
+      <ix-button autofocus (click)="activeModal.close('close payload!')">
+        OK
+      </ix-button>
+    </ix-modal-footer>
+  `,
+})
+export class ModalNonBlockingContent {
+  readonly activeModal: IxActiveModal = inject(IxActiveModal);
+}
+@Component({
+  selector: 'app-example',
+  imports: [IxButton, IxTypography],
+  template: `
+    <div>
+      <div style="padding: 1rem">
+        <ix-typography format="body" text-color="std">
+          Content behind the dialog
+        </ix-typography>
+        <ix-button id="behind">Behind control</ix-button>
+      </div>
+      <ix-button (click)="openModal()">Show non-blocking modal</ix-button>
+    </div>
+  `,
+})
+export default class ModalNonBlocking {
+  constructor(private readonly modalService: ModalService) {}
+  async openModal() {
+    await this.modalService.open({
+      content: ModalNonBlockingContent,
+      isNonBlocking: true,
+    });
+  }
+}
+```
 ----------------------------------------------

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

@@ -6,7 +6,7 @@
 ### Example: modal-close
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -97,7 +97,7 @@
 ### Example: modal-form-ix-button-submit
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -183,10 +183,67 @@
 </html>
 ```
-### Example: modal
+### Example: modal-non-blocking
 ```html
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Modal non-blocking example</title>
+  </head>
+  <body>
+    <div>
+      <div style="padding: 1rem">
+        <ix-typography format="body" text-color="std">
+          Content behind the dialog
+        </ix-typography>
+        <ix-button id="behind">Behind control</ix-button>
+      </div>
+      <ix-button id="open">Show non-blocking modal</ix-button>
+    </div>
+    <script type="module">
+      import { showModal, closeModal, dismissModal } from '@siemens/ix';
+      document.getElementById('open').addEventListener('click', async () => {
+        const modal = document.createElement('ix-modal');
+        modal.isNonBlocking = true;
+        modal.innerHTML = `
+      <ix-modal-header>Message headline</ix-modal-header>
+      <ix-modal-content>Message text lorem ipsum</ix-modal-content>
+      <ix-modal-footer>
+        <ix-button variant="subtle-primary" data-cancel>Cancel</ix-button>
+        <ix-button data-okay autofocus>OK</ix-button>
+      </ix-modal-footer>
+    `;
+        const header = modal.querySelector('ix-modal-header');
+        header.addEventListener('closeClick', () =>
+          dismissModal(header, 'dismiss payload')
+        );
+        const cancelButton = modal.querySelector('[data-cancel]');
+        const okayButton = modal.querySelector('[data-okay]');
+        cancelButton.addEventListener('click', () =>
+          dismissModal(cancelButton, 'dismiss payload')
+        );
+        okayButton.addEventListener('click', () =>
+          closeModal(okayButton, 'close payload!')
+        );
+        await showModal({ content: modal });
+      });
+    </script>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: modal
+```html
+<!DOCTYPE html>
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -389,6 +446,69 @@ export default () => {
 };
 ```
+### Example: modal-non-blocking
+```tsx
+import {
+  IxButton,
+  IxModalContent,
+  IxModalFooter,
+  IxModalHeader,
+  IxTypography,
+  Modal,
+  ModalRef,
+  showModal,
+} from '@siemens/ix-react';
+import { useRef } from 'react';
+function CustomModal() {
+  const modalRef = useRef<ModalRef>(null);
+  const close = () => {
+    modalRef.current?.close('close payload!');
+  };
+  const dismiss = () => {
+    modalRef.current?.dismiss('dismiss payload');
+  };
+  return (
+    <Modal ref={modalRef} isNonBlocking>
+      <IxModalHeader onCloseClick={() => dismiss()}>
+        Message headline
+      </IxModalHeader>
+      <IxModalContent>Message text lorem ipsum</IxModalContent>
+      <IxModalFooter>
+        <IxButton variant="subtle-primary" onClick={() => dismiss()}>
+          Cancel
+        </IxButton>
+        <IxButton onClick={() => close()} autoFocus>
+          OK
+        </IxButton>
+      </IxModalFooter>
+    </Modal>
+  );
+}
+export default function ModalNonBlockingPreview() {
+  async function show() {
+    await showModal({
+      content: <CustomModal />,
+    });
+  }
+  return (
+    <div>
+      <div style={{ padding: '1rem' }}>
+        <IxTypography format="body" textColor="std">
+          Content behind the dialog
+        </IxTypography>
+        <IxButton id="behind">Behind control</IxButton>
+      </div>
+      <IxButton onClick={show}>Show non-blocking modal</IxButton>
+    </div>
+  );
+}
+```
 ### Example: modal
 ```tsx
 import {
@@ -422,7 +542,9 @@ function CustomModal() {
         <IxButton variant="subtle-primary" onClick={() => dismiss()}>
           Cancel
         </IxButton>
-        <IxButton onClick={() => close()}>OK</IxButton>
+        <IxButton autoFocus onClick={() => close()}>
+          OK
+        </IxButton>
       </IxModalFooter>
     </Modal>
   );
@@ -682,6 +804,67 @@ export default class ModalFormIxButtonSubmit {
 ```
+### Example: modal-non-blocking
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import { IxActiveModal, ModalService } from '@siemens/ix-angular';
+@Component({
+  standalone: false,
+  selector: 'app-modal-non-blocking-content',
+  template: `
+    <ix-modal-header (closeClick)="activeModal.dismiss('dismiss payload')">
+      Message headline
+    </ix-modal-header>
+    <ix-modal-content>Message text lorem ipsum</ix-modal-content>
+    <ix-modal-footer>
+      <ix-button
+        variant="subtle-primary"
+        (click)="activeModal.dismiss('dismiss payload')"
+      >
+        Cancel
+      </ix-button>
+      <ix-button autofocus (click)="activeModal.close('close payload!')">
+        OK
+      </ix-button>
+    </ix-modal-footer>
+  `,
+})
+export class ModalNonBlockingContent {
+  constructor(readonly activeModal: IxActiveModal) {}
+}
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  template: `
+    <div>
+      <div style="padding: 1rem">
+        <ix-typography format="body" text-color="std">
+          Content behind the dialog
+        </ix-typography>
+        <ix-button id="behind">Behind control</ix-button>
+      </div>
+      <ix-button (click)="openModal()">Show non-blocking modal</ix-button>
+    </div>
+  `,
+})
+export default class ModalNonBlocking {
+  constructor(private readonly modalService: ModalService) {}
+  async openModal() {
+    await this.modalService.open({
+      content: ModalNonBlockingContent,
+      isNonBlocking: true,
+    });
+  }
+}
+```
 ## Angular Standalone Examples
 ### Example: modal-close
@@ -809,23 +992,92 @@ LICENSE file in the root directory of this source tree.
 ```
+### Example: modal-non-blocking
+#### Component typescript
+```typescript
+import { Component, inject } from '@angular/core';
+import {
+  IxActiveModal,
+  IxButton,
+  IxModalContent,
+  IxModalFooter,
+  IxModalHeader,
+  IxTypography,
+  ModalService,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-modal-non-blocking-content',
+  imports: [IxModalHeader, IxModalContent, IxModalFooter, IxButton],
+  template: `
+    <ix-modal-header (closeClick)="activeModal.dismiss('dismiss payload')">
+      Message headline
+    </ix-modal-header>
+    <ix-modal-content>Message text lorem ipsum</ix-modal-content>
+    <ix-modal-footer>
+      <ix-button
+        variant="subtle-primary"
+        (click)="activeModal.dismiss('dismiss payload')"
+      >
+        Cancel
+      </ix-button>
+      <ix-button autofocus (click)="activeModal.close('close payload!')">
+        OK
+      </ix-button>
+    </ix-modal-footer>
+  `,
+})
+export class ModalNonBlockingContent {
+  readonly activeModal: IxActiveModal = inject(IxActiveModal);
+}
+@Component({
+  selector: 'app-example',
+  imports: [IxButton, IxTypography],
+  template: `
+    <div>
+      <div style="padding: 1rem">
+        <ix-typography format="body" text-color="std">
+          Content behind the dialog
+        </ix-typography>
+        <ix-button id="behind">Behind control</ix-button>
+      </div>
+      <ix-button (click)="openModal()">Show non-blocking modal</ix-button>
+    </div>
+  `,
+})
+export default class ModalNonBlocking {
+  constructor(private readonly modalService: ModalService) {}
+  async openModal() {
+    await this.modalService.open({
+      content: ModalNonBlockingContent,
+      isNonBlocking: true,
+    });
+  }
+}
+```
 ## Properties
-| Property                   | Attribute                      | Description                                                                                      | Type                  | Default     |
-| -------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------ | --------------------- | ----------- |
-| `ariaLabelCloseIconButton` | `aria-label-close-icon-button` | ARIA label for the close icon button Will be set as aria-label on the nested HTML button element | `string \| undefined` | `undefined` |
-| `ariaLabelIcon`            | `aria-label-icon`              | ARIA label for the icon                                                                          | `string \| undefined` | `undefined` |
-| `hideClose`                | `hide-close`                   | Hide the close button                                                                            | `boolean`             | `false`     |
-| `icon`                     | `icon`                         | Icon of the Header                                                                               | `string \| undefined` | `undefined` |
-| `iconColor`                | `icon-color`                   | Icon color                                                                                       | `string \| undefined` | `undefined` |
+| Property                   | Attribute                      | Description                                                                                      | Type                  | Default         |
+| -------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------ | --------------------- | --------------- |
+| `ariaLabelCloseIconButton` | `aria-label-close-icon-button` | ARIA label for the close icon button Will be set as aria-label on the nested HTML button element | `string \| undefined` | `'Close modal'` |
+| `ariaLabelIcon`            | `aria-label-icon`              | ARIA label for the icon                                                                          | `string \| undefined` | `undefined`     |
+| `hideClose`                | `hide-close`                   | Hide the close button                                                                            | `boolean`             | `false`         |
+| `icon`                     | `icon`                         | Icon of the header                                                                               | `string \| undefined` | `undefined`     |
+| `iconColor`                | `icon-color`                   | Icon color                                                                                       | `string \| undefined` | `undefined`     |
 ## Events
-| Event        | Description                                                                                                                                   | Type                      |
-| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
-| `closeClick` | Emits when close icon is clicked and closes the modal Can be prevented, in which case only the event is triggered, and the modal remains open | `CustomEvent<MouseEvent>` |
+| Event        | Description                                                                                                                                       | Type                      |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
+| `closeClick` | Emits when the close icon is clicked and closes the modal Can be prevented, in which case only the event is triggered, and the modal remains open | `CustomEvent<MouseEvent>` |
 ## Dependencies