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

@siemens/ix-docs 0.0.0-pr-2238-20251103105018 → 0.0.0-pr-2297-20251211061723

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 (1026) hide show

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

@@ -1,7 +1,41 @@
 # ix-tooltip
 ## HTML Examples
+### Example: tooltip-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>Tooltip example</title>
+    <link rel="stylesheet" href="./tooltip.css" />
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import { iconInfo } from '@siemens/ix-icons/icons';
+      addIcons({
+        iconInfo,
+      });
+    </script>
+  </head>
+  <body>
+    <ix-button class="any-class" aria-describedby="tooltip-1">
+      Hover me
+    </ix-button>
+    <ix-tooltip id="tooltip-1" for=".any-class">
+      <ix-icon slot="title-icon" name="info" size="16"></ix-icon>
+      <div slot="title-content">Tooltip Title</div>
+      Simple selector with icon
+    </ix-tooltip>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
 ### Example: tooltip
 ```html
 <!DOCTYPE html>
@@ -34,6 +68,31 @@
 ## React Examples
+### Example: tooltip-with-icon
+```tsx
+import './tooltip.scoped.css';
+import { IxButton, IxIcon, IxTooltip } from '@siemens/ix-react';
+import { iconInfo } from '@siemens/ix-icons/icons';
+const TooltipWithIcon = () => {
+  return (
+    <>
+      <IxButton className="any-class" aria-describedby="tooltip-1">
+        Hover me
+      </IxButton>
+      <IxTooltip id="tooltip-1" for=".any-class">
+        <IxIcon slot="title-icon" name={iconInfo} size="16"></IxIcon>
+        <div slot="title-content">Tooltip Title</div>
+        Simple selector with icon
+      </IxTooltip>
+    </>
+  );
+};
+export default TooltipWithIcon;
+```
 ### Example: tooltip
 ```tsx
 import './tooltip.scoped.css';
@@ -43,7 +102,7 @@ import { IxButton, IxTooltip } from '@siemens/ix-react';
 export default () => {
   return (
     <>
-      <IxButton class="any-class" aria-describedby="tooltip-1">
+      <IxButton className="any-class" aria-describedby="tooltip-1">
         Hover me
       </IxButton>
       <IxTooltip id="tooltip-1" for=".any-class">
@@ -66,6 +125,25 @@ export default () => {
 ## Vue Examples
+### Example: tooltip-with-icon
+```tsx
+<script setup lang="ts">
+import { IxButton, IxTooltip, IxIcon } from '@siemens/ix-vue';
+import { iconInfo } from '@siemens/ix-icons/icons';
+</script>
+<style scoped src="./tooltip.css"></style>
+<template>
+  <IxButton class="any-class" aria-describedby="tooltip-1"> Hover me </IxButton>
+  <IxTooltip id="tooltip-1" for=".any-class">
+    <IxIcon slot="title-icon" :name="iconInfo" :size="16"></IxIcon>
+    <div slot="title-content">Tooltip Title</div>
+    Simple selector with icon</IxTooltip
+  >
+</template>
+```
 ### Example: tooltip
 ```tsx
 <script setup lang="ts">
@@ -89,6 +167,42 @@ import { IxButton, IxTooltip } from '@siemens/ix-vue';
 ## Angular Examples
+### Example: tooltip-with-icon
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './tooltip-with-icon.html',
+  styleUrls: ['./tooltip.css'],
+})
+export default class TooltipWithIcon {}
+```
+#### 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-button class="any-class" aria-describedby="tooltip-1">Hover me</ix-button>
+<ix-tooltip id="tooltip-1" for=".any-class">
+  <ix-icon slot="title-icon" name="info" size="16"></ix-icon>
+  <div slot="title-content">Tooltip Title</div>
+  Simple selector with icon
+</ix-tooltip>
+```
 ### Example: tooltip
 #### Component typescript
 ```typescript
@@ -130,6 +244,43 @@ LICENSE file in the root directory of this source tree.
 ## Angular Standalone Examples
+### Example: tooltip-with-icon
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import { IxButton, IxIcon, IxTooltip } from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxButton, IxTooltip, IxIcon],
+  templateUrl: './tooltip-with-icon.html',
+  styleUrls: ['./tooltip.css'],
+})
+export default class Tooltip {}
+```
+#### 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-button class="any-class" aria-describedby="tooltip-1">Hover me</ix-button>
+<ix-tooltip id="tooltip-1" for=".any-class">
+  <ix-icon slot="title-icon" name="info" size="16"></ix-icon>
+  <div slot="title-content">Tooltip Title</div>
+  Simple selector with icon
+</ix-tooltip>
+```
 ### Example: tooltip
 #### Component typescript
 ```typescript
@@ -171,10 +322,6 @@ LICENSE file in the root directory of this source tree.
 ```
-<!-- Auto Generated Below -->
 ## Properties
 | Property       | Attribute       | Description                                                                                                                                  | Type                                                                               | Default     |
@@ -187,10 +334,10 @@ LICENSE file in the root directory of this source tree.
 ## Slots
-| Slot              | Description              |
-| ----------------- | ------------------------ |
-| `"title-content"` | Content of tooltip title |
-| `"title-icon"`    | Icon of tooltip title    |
+| Slot              | Description                                                                      |
+| ----------------- | -------------------------------------------------------------------------------- |
+| `"title-content"` | Content of tooltip title                                                         |
+| `"title-icon"`    | Icon displayed next to the tooltip title. The icon will be displayed as 16x16px. |
 ## Dependencies

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

@@ -1,3 +1,4 @@
 # ix-tree
 ## HTML Examples
@@ -848,10 +849,6 @@ export default class Tree {
 ```
-<!-- Auto Generated Below -->
 ## Properties
 | Property            | Attribute              | Description                                 | Type                                                                                                                                               | Default     |

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

@@ -1,3 +1,4 @@
 # ix-tree-item
 ## HTML Examples
@@ -21,10 +22,6 @@
-<!-- Auto Generated Below -->
 ## Properties
 | Property               | Attribute                 | Description                     | Type                           | Default     |

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

@@ -1,3 +1,4 @@
 # ix-typography
 ## HTML Examples
@@ -1993,10 +1994,6 @@ LICENSE file in the root directory of this source tree.
 ```
-<!-- Auto Generated Below -->
 ## Properties
 | Property         | Attribute         | Description                         | Type                                                                                                                                                                                                                                                                               | Default     |

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

@@ -1,3 +1,4 @@
 # ix-upload
 ## HTML Examples
@@ -80,10 +81,6 @@ export default class Upload {}
 ```
-<!-- Auto Generated Below -->
 ## Properties
 | Property             | Attribute              | Description                                                                                                                                                                              | Type                                                                                                                          | Default                                 |

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

@@ -1,3 +1,4 @@
 # ix-validation-tooltip
 ## HTML Examples
@@ -21,10 +22,6 @@
-<!-- Auto Generated Below -->
 > **[DEPRECATED]** Since 3.0.0. Will be removed with 4.0.0
 Not maintained anymore.

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

@@ -1,3 +1,4 @@
 # ix-workflow-step
 ## HTML Examples
@@ -244,10 +245,6 @@ export default class Workflow {}
 ```
-<!-- Auto Generated Below -->
 ## Properties
 | Property    | Attribute   | Description               | Type                                                    | Default  |

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

@@ -1,3 +1,4 @@
 # ix-workflow-steps
 ## HTML Examples
@@ -244,10 +245,6 @@ export default class Workflow {}
 ```
-<!-- Auto Generated Below -->
 ## Properties
 | Property        | Attribute        | Description               | Type      | Default |

package/build/docs/autogenerated/usage/angular/aggrid.html.md CHANGED Viewed

@@ -1,8 +1,6 @@
 ```html
-<ag-grid-angular
-  style="height: 12rem; width: 100%"
-  class="ag-theme-alpine-dark ag-theme-ix"
-  [gridOptions]="gridOptions"
->
+@if (gridOptions) {
+<ag-grid-angular style="height: 12rem; width: 100%" [gridOptions]="gridOptions">
 </ag-grid-angular>
+}
 ```

package/build/docs/autogenerated/usage/angular/aggrid.ts.md CHANGED Viewed

@@ -1,53 +1,85 @@
 ```ts
-import { Component } from '@angular/core';
-import { GridOptions } from 'ag-grid-community';
+import { Component, OnInit } from '@angular/core';
+import { getIxTheme } from '@siemens/ix-aggrid';
+import {
+  GridOptions,
+  AllCommunityModule,
+  ModuleRegistry,
+} from 'ag-grid-community';
+import * as agGrid from 'ag-grid-community';
+ModuleRegistry.registerModules([AllCommunityModule]);
 @Component({
   standalone: false,
   selector: 'app-example',
   templateUrl: './aggrid.html',
 })
-export default class AGGrid {
-  gridOptions = {
-    columnDefs: [
-      {
-        field: 'type',
-        headerName: 'Type',
-        resizable: true,
-        checkboxSelection: true,
-      },
-      {
-        field: 'status',
-        headerName: 'Status',
-        resizable: true,
-        sortable: true,
-        filter: true,
-      },
-      { field: 'hwVersion', headerName: 'HW version', resizable: true },
-    ],
-    rowData: [
-      {
-        type: 'Equipment',
-        status: 'Normal',
-        hwVersion: '2.0',
-        checked: false,
-      },
-      {
-        type: 'Positioner',
-        status: 'Maintenance',
-        hwVersion: '1.0',
-        checked: true,
-      },
-      {
-        type: 'Pressure sensor',
-        status: 'Unknown',
-        hwVersion: 'N/A',
-        checked: false,
+export default class AGGrid implements OnInit {
+  gridOptions: GridOptions | null = null;
+  ngOnInit() {
+    const ixTheme = getIxTheme(agGrid);
+    this.gridOptions = {
+      theme: ixTheme,
+      rowDragManaged: true,
+      tooltipShowDelay: 500,
+      rowSelection: {
+        mode: 'multiRow',
+        checkboxes: true,
+        headerCheckbox: true,
+        selectAll: 'filtered',
       },
-    ],
-    rowSelection: 'multiple',
-    suppressCellFocus: true,
-    checkboxSelection: true,
-  } as GridOptions;
+      columnDefs: [
+        {
+          field: 'type',
+          headerName: 'Type',
+          resizable: true,
+          rowDrag: true,
+          tooltipField: 'type',
+        },
+        {
+          field: 'status',
+          headerName: 'Status',
+          resizable: true,
+          sortable: true,
+          filter: true,
+          tooltipValueGetter: (params) => {
+            return `Status: ${params.value} - Type: ${params.data.type}`;
+          },
+        },
+        {
+          field: 'hwVersion',
+          headerName: 'HW version',
+          resizable: true,
+          tooltipValueGetter: (params) => {
+            if (params.value === 'N/A') {
+              return 'Hardware version not available';
+            }
+            return `Hardware Version ${params.value}`;
+          },
+        },
+      ],
+      rowData: [
+        {
+          type: 'Equipment',
+          status: 'Normal',
+          hwVersion: '2.0',
+        },
+        {
+          type: 'Positioner',
+          status: 'Maintenance',
+          hwVersion: '1.0',
+        },
+        {
+          type: 'Pressure sensor',
+          status: 'Unknown',
+          hwVersion: 'N/A',
+        },
+      ],
+      suppressCellFocus: true,
+    };
+  }
 }
 ```

package/build/docs/autogenerated/usage/angular/blind-variants.html.md CHANGED Viewed

@@ -1,6 +1,6 @@
 ```html
-<ix-blind icon="bulb" label="Insight" sublabel="sublabel">
-  <div>Insight content</div>
+<ix-blind icon="bulb" label="Example" sublabel="sublabel">
+  <div>Filled content</div>
 </ix-blind>
 <ix-blind variant="outline" icon="bulb" label="Outline" sublabel="sublabel">
   <div>Outline content</div>

package/build/docs/autogenerated/usage/angular/form-checkbox-group-indeterminate.html.md CHANGED Viewed

@@ -1,7 +1,7 @@
 ```html
 <ix-checkbox-group>
   <ix-checkbox
-    indeterminate="{{this.parentCheckbox.indeterminate}}"
+    [indeterminate]="parentCheckbox.indeterminate"
     [(ngModel)]="this.parentCheckbox.checked"
     label="{{this.parentCheckbox.label}}"
     (checkedChange)="parentCheckedChange()"

package/build/docs/autogenerated/usage/angular/form-checkbox-group-indeterminate.ts.md CHANGED Viewed

@@ -27,16 +27,10 @@ export default class FormCheckboxGroupIndeterminate {
   }
   checkedChange() {
-    if (this.childCheckboxes.every((cb) => cb.checked)) {
-      this.parentCheckbox.indeterminate = false;
-      this.parentCheckbox.checked = true;
-    } else if (this.childCheckboxes.some((cb) => cb.checked)) {
-      this.parentCheckbox.indeterminate = true;
-      this.parentCheckbox.checked = false;
-    } else {
-      this.parentCheckbox.indeterminate = false;
-      this.parentCheckbox.checked = false;
-    }
+    const checkedCount = this.childCheckboxes.filter((cb) => cb.checked).length;
+    const totalCount = this.childCheckboxes.length;
+    this.parentCheckbox.checked = checkedCount === totalCount;
+    this.parentCheckbox.indeterminate = checkedCount > 0 && checkedCount < totalCount;
   }
 }
 ```

package/build/docs/autogenerated/usage/angular/global.css.md CHANGED Viewed

@@ -1,11 +1,6 @@
 ```css
 @import '@siemens/ix/dist/siemens-ix/siemens-ix.css';
-@import 'ag-grid-community/styles/ag-grid.css';
-@import 'ag-grid-community/styles/ag-theme-alpine.css';
-@import '@siemens/ix-aggrid/dist/ix-aggrid/ix-aggrid.css';
 html {
   width: 100vw;
   height: 100vh;

package/build/docs/autogenerated/usage/angular/loading.ts.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ```ts
 import { Component } from '@angular/core';
-import { showModalLoading } from '@siemens/ix';
+import { ModalLoadingContext } from '@siemens/ix';
+import { LoadingService } from '@siemens/ix-angular';
 @Component({
   standalone: false,
@@ -8,9 +9,12 @@ import { showModalLoading } from '@siemens/ix';
   template: ` <ix-button (click)="startLoading()">Start loading</ix-button> `,
 })
 export default class Loading {
+  constructor(private readonly loadingService: LoadingService) {}
   startLoading = () => {
     let count = 0;
-    const progress = showModalLoading('Loading 0/2');
+    const progress: ModalLoadingContext =
+      this.loadingService.showModalLoading('Loading 0/2');
     const interval = setInterval(() => {
       count++;
       progress.update(`Loading ${count}/2`);

package/build/docs/autogenerated/usage/angular/message.ts.md CHANGED Viewed

@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { showMessage } from '@siemens/ix';
+import { MessageService } from '@siemens/ix-angular';
 @Component({
   standalone: false,
@@ -10,9 +10,11 @@ import { showMessage } from '@siemens/ix';
   `,
 })
 export default class Message {
+  constructor(private readonly messageService: MessageService) {}
   triggerMessage = async () => {
     (
-      await showMessage.success(
+      await this.messageService.success(
         'Example title',
         'message',
         'Save',

package/build/docs/autogenerated/usage/angular/modal-close.html.md ADDED Viewed

@@ -0,0 +1,5 @@
+```html
+<ix-button variant="secondary" (click)="openModal()">
+  Show modal (auto-dismiss)
+</ix-button>
+```

package/build/docs/autogenerated/usage/angular/modal-close.ts.md ADDED Viewed

@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { ModalService } from '@siemens/ix-angular';
+import ModalByInstanceExample from './modal-by-instance-content';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './modal-close.html',
+})
+export default class ModalClose {
+  constructor(private readonly modalService: ModalService) {}
+  async openModal() {
+    const modalInstance = await this.modalService.open({
+      content: ModalByInstanceExample,
+      data: 'Some data',
+    });
+    setTimeout(() => {
+      this.modalService.close(modalInstance, 'closed after 5 seconds');
+    }, 5000);
+  }
+}
+```

package/build/docs/autogenerated/usage/angular/pane-layout.html.md CHANGED Viewed

@@ -13,7 +13,7 @@
     <p>This is the bottom pane.</p>
   </ix-pane>
-  <div slot="content">
+  <div>
     <ix-button (click)="toggleVariant()" style="margin: 2.5rem"
       >Toggle Variant</ix-button
     >

package/build/docs/autogenerated/usage/angular/split-button.css.md ADDED Viewed

@@ -0,0 +1,9 @@
+```css
+body {
+  display: flex;
+}
+ix-split-button {
+  margin: 0.25rem;
+}
+```

package/build/docs/autogenerated/usage/angular/split-button.ts.md CHANGED Viewed

@@ -4,11 +4,26 @@ import { Component } from '@angular/core';
 @Component({
   standalone: false,
   selector: 'app-example',
+  styleUrls: ['./split-button.css'],
   template: `
+  <div>
     <ix-split-button label="Action text" splitIcon="chevron-down-small">
       <ix-dropdown-item label="Item 1"></ix-dropdown-item>
       <ix-dropdown-item label="Item 2"></ix-dropdown-item>
     </ix-split-button>
+    <ix-split-button label="Action text" splitIcon="chevron-down-small" disabled>
+      <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+    </ix-split-button>
+    <ix-split-button label="Action text" splitIcon="chevron-down-small" disableButton>
+      <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+    </ix-split-button>
+    <ix-split-button label="Action text" splitIcon="chevron-down-small" disableDropdownButton>
+      <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+    </ix-split-button>
+  </div>
   `,
 })
 export default class SplitButton {}