@siemens/ix-docs 0.0.0-pr-2238-20251103105018 → 4.0.0

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

@@ -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_standalone/aggrid.html.md

@@ -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_standalone/aggrid.ts.md

@@ -1,54 +1,87 @@
 ```ts
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { getIxTheme } from '@siemens/ix-aggrid';
 import { AgGridAngular } from 'ag-grid-angular';
-import { GridOptions } from 'ag-grid-community';
+import {
+  GridOptions,
+  AllCommunityModule,
+  ModuleRegistry,
+} from 'ag-grid-community';
+import * as agGrid from 'ag-grid-community';
+
+ModuleRegistry.registerModules([AllCommunityModule]);
 
 @Component({
   selector: 'app-example',
-  imports: [AgGridAngular],
+  imports: [AgGridAngular, CommonModule],
   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_standalone/global.css.md

@@ -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/html/aggrid.html.md

@@ -7,73 +7,84 @@
     <title>AG Grid example</title>
   </head>
   <body>
-    <div
-      style="height: 12rem; width: 100%"
-      id="grid-container"
-      class="ag-theme-alpine-dark ag-theme-ix"
-    ></div>
+    <div style="height: 12rem; width: 100%" id="grid-container"></div>
 
     <script type="module">
+      import { getIxTheme } from '@siemens/ix-aggrid';
       import {
         AllCommunityModule,
         ModuleRegistry,
-        provideGlobalGridOptions,
+        createGrid,
       } from 'ag-grid-community';
-      import * as agGrid from 'ag-grid-community';
+      import * as agGridCommunity from 'ag-grid-community';
 
-      // Register all community features
       ModuleRegistry.registerModules([AllCommunityModule]);
 
-      // Mark all grids as using legacy themes
-      provideGlobalGridOptions({ theme: 'legacy' });
+      const ixTheme = getIxTheme(agGridCommunity);
 
-      (async function () {
-        const container = document.querySelector('#grid-container');
+      const container = document.querySelector('#grid-container');
 
-        const gridOptions = {
-          columnDefs: [
-            {
-              field: 'type',
-              headerName: 'Type',
-              resizable: true,
-              checkboxSelection: true,
+      const gridOptions = {
+        theme: ixTheme,
+        rowDragManaged: true,
+        tooltipShowDelay: 500,
+        rowSelection: {
+          mode: 'multiRow',
+          checkboxes: true,
+          headerCheckbox: true,
+          selectAll: 'filtered',
+        },
+        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: 'status',
-              headerName: 'Status',
-              resizable: true,
-              sortable: true,
-              filter: true,
+          },
+          {
+            field: 'hwVersion',
+            headerName: 'HW version',
+            resizable: true,
+            tooltipValueGetter: (params) => {
+              if (params.value === 'N/A') {
+                return 'Hardware version not available';
+              }
+              return `Hardware Version ${params.value}`;
             },
-            { 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,
-            },
-          ],
-          rowSelection: 'multiple',
-          suppressCellFocus: true,
-          checkboxSelection: true,
-        };
+          },
+        ],
+        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,
+      };
 
-        agGrid.createGrid(container, gridOptions);
-      })();
+      createGrid(container, gridOptions);
     </script>
     <script type="module" src="./init.js"></script>
   </body>

package/build/docs/autogenerated/usage/html/global.css.md

@@ -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/react/aggrid.tsx.md

@@ -1,56 +1,95 @@
 ```tsx
-import { GridOptions } from 'ag-grid-community';
+import { useEffect, useState } from 'react';
+
 import { AgGridReact } from 'ag-grid-react';
+import { getIxTheme } from '@siemens/ix-aggrid';
+import {
+  ModuleRegistry,
+  AllCommunityModule,
+  GridOptions,
+} from 'ag-grid-community';
+import * as agGrid from 'ag-grid-community';
 
-const 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,
-    },
-  ],
-  rowSelection: 'multiple',
-  suppressCellFocus: true,
-  checkboxSelection: true,
-} as GridOptions;
+ModuleRegistry.registerModules([AllCommunityModule]);
 
 export default () => {
+  const [gridOptions, setGridOptions] = useState<GridOptions | null>(null);
+
+  useEffect(() => {
+    const initializeGrid = () => {
+      const ixTheme = getIxTheme(agGrid);
+
+      setGridOptions({
+        theme: ixTheme,
+        rowDragManaged: true,
+        tooltipShowDelay: 500,
+        rowSelection: {
+          mode: 'multiRow',
+          checkboxes: true,
+          headerCheckbox: true,
+          selectAll: 'filtered',
+        },
+        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,
+      });
+    };
+
+    initializeGrid();
+  }, []);
+
+  if (!gridOptions) {
+    return null;
+  }
+
   return (
     <div style={{ height: '12rem', width: '100%' }}>
-      <AgGridReact
-        gridOptions={gridOptions}
-        className="ag-theme-alpine-dark ag-theme-ix"
-      ></AgGridReact>
+      <AgGridReact gridOptions={gridOptions}></AgGridReact>
     </div>
   );
 };

package/build/docs/autogenerated/usage/react/global.css.md

@@ -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/vue/aggrid.vue.md

@@ -1,55 +1,88 @@
 ```vue
 <script setup lang="ts">
-import { GridOptions } from 'ag-grid-community';
+import { ref, onMounted } from 'vue';
 import { AgGridVue } from 'ag-grid-vue3';
+import { getIxTheme } from '@siemens/ix-aggrid';
+import {
+  ModuleRegistry,
+  AllCommunityModule,
+  GridOptions,
+} from 'ag-grid-community';
+import * as agGrid from 'ag-grid-community';
 
-const 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,
+ModuleRegistry.registerModules([AllCommunityModule]);
+
+const gridOptions = ref<GridOptions | null>(null);
+
+onMounted(() => {
+  const ixTheme = getIxTheme(agGrid);
+
+  gridOptions.value = {
+    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,
+  };
+});
 </script>
 
 <template>
   <AgGridVue
+    v-if="gridOptions"
     style="height: 12rem; width: 100%"
-    class="ag-theme-alpine-dark ag-theme-ix"
     :gridOptions="gridOptions"
   >
   </AgGridVue>

package/build/docs/autogenerated/usage/vue/application-breakpoints.vue.md

@@ -28,7 +28,8 @@ export default {
     };
   },
   methods: {
-    setBreakpoint(value: Breakpoint) {
+    setBreakpoint(event: CustomEvent<Breakpoint>) {
+      const value = event?.detail;
       if (validBreakpoints.has(value)) {
         this.breakpoints = [value];
       }
@@ -65,22 +66,10 @@ export default {
         slot="header"
         header-title="Choose breakpoint"
       ></IxContentHeader>
-      <IxRadioGroup :value="breakpoints[0]">
-        <IxRadio
-          value="sm"
-          label="Small"
-          @click="setBreakpoint('sm')"
-        ></IxRadio>
-        <IxRadio
-          value="md"
-          label="Medium"
-          @click="setBreakpoint('md')"
-        ></IxRadio>
-        <IxRadio
-          value="lg"
-          label="Large"
-          @click="setBreakpoint('lg')"
-        ></IxRadio>
+      <IxRadioGroup :value="breakpoints[0]" @valueChange="setBreakpoint">
+        <IxRadio value="sm" label="Small" aria-label="Small"></IxRadio>
+        <IxRadio value="md" label="Medium" aria-label="Medium"></IxRadio>
+        <IxRadio value="lg" label="Large" aria-label="Large"></IxRadio>
       </IxRadioGroup>
     </IxContent>
   </IxApplication>

package/build/docs/autogenerated/usage/vue/global.css.md

@@ -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/vue/popover-news.vue.md

@@ -3,7 +3,6 @@
 import {
   IxApplication,
   IxApplicationHeader,
-  IxBasicNavigation,
   IxMenu,
   IxMenuAbout,
   IxMenuAboutItem,

package/build/docs/autogenerated/usage/vue/settings.vue.md

@@ -4,7 +4,6 @@ import {
   HTMLRefElement,
   IxApplication,
   IxApplicationHeader,
-  IxBasicNavigation,
   IxMenu,
   IxMenuSettings,
   IxMenuSettingsItem,

package/build/docs/autogenerated/version.json

@@ -1 +1 @@
-{"version":"0.0.0-pr-2238-20251103105018"}
+{"version":"4.0.0"}