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

package/build/docs/autogenerated/usage/angular_standalone/theme-switcher.html.md

@@ -5,7 +5,9 @@
       <span>Light/Dark</span>
     </ix-col>
     <ix-col>
-      <ix-button (click)="toggleMode()">Toggle mode</ix-button>
+      <ix-button (click)="toggleMode()" [disabled]="useSystemTheme">
+        Toggle mode
+      </ix-button>
     </ix-col>
   </ix-row>
 
@@ -13,14 +15,15 @@
     <ix-col size="2">Theme</ix-col>
     <ix-col>
       <ix-select
-        [value]="selectedTheme"
+        [value]="selectedVariant"
         (valueChange)="onValueChange($event)"
+        [disabled]="useSystemTheme"
         placeholder="Select a theme"
       >
         <ix-select-item
-          *ngFor="let theme of themes"
-          [label]="theme"
-          [value]="theme"
+          *ngFor="let variant of variants"
+          [label]="variant"
+          [value]="variant"
         ></ix-select-item>
       </ix-select>
     </ix-col>
@@ -29,8 +32,10 @@
   <ix-row>
     <ix-col size="2"></ix-col>
     <ix-col>
-      <input type="checkbox" id="system" (change)="onSystemMode($event)" />
-      <label for="system">Use System</label>
+      <ix-checkbox
+        label="Use system"
+        (checkedChange)="onSystemMode($event)"
+      ></ix-checkbox>
     </ix-col>
   </ix-row>
 </ix-layout-grid>

package/build/docs/autogenerated/usage/angular_standalone/theme-switcher.ts.md

@@ -1,18 +1,19 @@
 ```ts
-import { Component } from '@angular/core';
 import { NgForOf } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
 
 import {
+  IxButton,
+  IxCheckbox,
+  IxCol,
   IxLayoutGrid,
   IxRow,
-  IxCol,
-  IxButton,
   IxSelect,
   IxSelectItem,
   IxSelectValueAccessorDirective,
 } from '@siemens/ix-angular/standalone';
 
-import { themeSwitcher } from '@siemens/ix';
+import { themeSwitcher, ThemeVariant } from '@siemens/ix';
 
 @Component({
   selector: 'app-example',
@@ -21,6 +22,7 @@ import { themeSwitcher } from '@siemens/ix';
     IxRow,
     IxCol,
     IxButton,
+    IxCheckbox,
     IxSelect,
     IxSelectItem,
     IxSelectValueAccessorDirective,
@@ -29,30 +31,48 @@ import { themeSwitcher } from '@siemens/ix';
   templateUrl: './theme-switcher.html',
   styleUrls: ['./theme-switcher.css'],
 })
-export default class ThemeSwitcher {
-  themes = ['theme-classic-light', 'theme-classic-dark'];
-  selectedTheme = this.themes[1];
+export default class ThemeSwitcher implements OnInit {
+  variants: ThemeVariant[] = ['light', 'dark'];
+  selectedVariant: ThemeVariant = 'dark';
+  useSystemTheme = false;
 
-  constructor() {}
+  ngOnInit() {
+    themeSwitcher.setTheme('classic');
+    themeSwitcher.setVariant(this.selectedVariant);
+  }
 
   onValueChange(event: Event) {
+    if (this.useSystemTheme) {
+      return;
+    }
+
     const customEvent = event as CustomEvent<string>;
-    const newTheme = customEvent.detail;
-    themeSwitcher.setTheme(newTheme);
-    this.selectedTheme = newTheme;
+    const newVariant = customEvent.detail as ThemeVariant;
+
+    themeSwitcher.setVariant(newVariant);
+
+    this.selectedVariant = newVariant;
   }
 
   toggleMode() {
+    if (this.useSystemTheme) {
+      return;
+    }
+
     themeSwitcher.toggleMode();
+
+    this.selectedVariant = this.selectedVariant === 'light' ? 'dark' : 'light';
   }
 
-  onSystemMode({ target }: Event) {
-    if ((target as HTMLInputElement).checked) {
+  onSystemMode(event: CustomEvent<boolean>) {
+    const checked = event.detail;
+    this.useSystemTheme = checked;
+
+    if (checked) {
       themeSwitcher.setVariant();
-      return;
+    } else {
+      themeSwitcher.setVariant(this.selectedVariant);
     }
-
-    themeSwitcher.setTheme(this.selectedTheme);
   }
 }
 ```

package/build/docs/autogenerated/usage/angular_standalone/toast-custom.ts.md

@@ -1,12 +1,11 @@
 ```ts
 import { Component, TemplateRef, ViewChild } from '@angular/core';
-import { IxButton } from '@siemens/ix-angular/standalone';
-
-import { ToastService } from '@siemens/ix-angular';
+import { IxButton, ToastService } from '@siemens/ix-angular/standalone';
 
 @Component({
   selector: 'app-example',
   imports: [IxButton],
+  providers: [ToastService],
   template: `
     <ix-button (click)="showToastMessage()" style="margin-right: 0.5rem">
       Trigger toast with custom message

package/build/docs/autogenerated/usage/angular_standalone/toast-position.ts.md

@@ -1,12 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
-import { IxButton } from '@siemens/ix-angular/standalone';
-
-import { ToastService } from '@siemens/ix-angular';
+import { IxButton, ToastService } from '@siemens/ix-angular/standalone';
 
 @Component({
   selector: 'app-example',
   imports: [IxButton],
+  providers: [ToastService],
   template: `
     <ix-button (click)="showToastMessage()">Trigger toast</ix-button>
   `,

package/build/docs/autogenerated/usage/angular_standalone/toast.ts.md

@@ -1,12 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
-import { IxButton } from '@siemens/ix-angular/standalone';
-
-import { ToastService } from '@siemens/ix-angular';
+import { IxButton, ToastService } from '@siemens/ix-angular/standalone';
 
 @Component({
   selector: 'app-example',
   imports: [IxButton],
+  providers: [ToastService],
   template: `
     <ix-button (click)="showToastMessage()">Trigger toast</ix-button>
   `,

package/build/docs/autogenerated/usage/angular_standalone/tooltip-with-icon.html.md

@@ -0,0 +1,8 @@
+```html
+<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>
+```

package/build/docs/autogenerated/usage/angular_standalone/tooltip-with-icon.ts.md

@@ -0,0 +1,12 @@
+```ts
+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 {}
+```

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/blind-variants.html.md

@@ -15,8 +15,8 @@
     </script>
   </head>
   <body>
-    <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/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/html/modal-close.html.md

@@ -0,0 +1,89 @@
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Modal example</title>
+  </head>
+  <body>
+    <ix-button>Show modal (auto-dismiss)</ix-button>
+    <template id="modal-example-template">
+      <ix-modal-header>Message headline</ix-modal-header>
+      <ix-modal-content>Message text lorem ipsum</ix-modal-content>
+      <ix-modal-footer>
+        <ix-button variant="secondary" data-cancel>Cancel</ix-button>
+        <ix-button data-okay>OK</ix-button>
+      </ix-modal-footer>
+    </template>
+
+    <script type="module">
+      import { showModal, closeModal, dismissModal } from '@siemens/ix';
+
+      function createExampleModal() {
+        const name = 'modal-example';
+        window.customElements.define(
+          name,
+          class extends HTMLElement {
+            isInitialRender = false;
+
+            constructor() {
+              super();
+            }
+
+            connectedCallback() {
+              if (this.isInitialRender) {
+                return;
+              }
+
+              this.isInitialRender = true;
+              this.firstRender();
+            }
+
+            firstRender() {
+              const modalTemplate = document.getElementById(
+                'modal-example-template'
+              );
+              const template = modalTemplate.content.cloneNode(true);
+
+              const cancelButton = template.querySelector('[data-cancel]');
+              const okayButton = template.querySelector('[data-okay]');
+
+              cancelButton.addEventListener('click', () => {
+                dismissModal(this);
+              });
+              okayButton.addEventListener('click', () => {
+                closeModal(this);
+              });
+
+              this.append(template);
+            }
+          }
+        );
+
+        return name;
+      }
+
+      (async function () {
+        const exampleModalName = createExampleModal();
+
+        await window.customElements.whenDefined('ix-button');
+        const button = document.querySelector('ix-button');
+
+        button.addEventListener('click', async () => {
+          const customModal = document.createElement(exampleModalName);
+
+          await showModal({
+            content: customModal,
+          });
+
+          setTimeout(() => {
+            closeModal(customModal, 'closed after 5 seconds');
+          }, 5000);
+        });
+      })();
+    </script>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```

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

@@ -26,7 +26,7 @@
         <p>This is the bottom pane.</p>
       </ix-pane>
 
-      <div slot="content">
+      <div>
         <ix-button id="toggle-variant" style="margin: 2.5rem">
           Toggle Variant
         </ix-button>

package/build/docs/autogenerated/usage/html/split-button.css.md

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

package/build/docs/autogenerated/usage/html/split-button.html.md

@@ -5,6 +5,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Split button example</title>
+    <link rel="stylesheet" href="./split-button.css" />
     <script type="module">
       import { addIcons } from '@siemens/ix-icons';
       import { iconChevronDownSmall } from '@siemens/ix-icons/icons';
@@ -14,10 +15,36 @@
     </script>
   </head>
   <body>
-    <ix-split-button label="Action text" split-icon="chevron-down-small">
-      <ix-dropdown-item label="Item 1"></ix-dropdown-item>
-      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
-    </ix-split-button>
+    <div>
+      <ix-split-button label="Action text" split-icon="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"
+        split-icon="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"
+        split-icon="chevron-down-small"
+        disable-button
+      >
+        <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"
+        split-icon="chevron-down-small"
+        disable-dropdown-button
+      >
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      </ix-split-button>
+    </div>
     <script type="module" src="./init.js"></script>
   </body>
 </html>

package/build/docs/autogenerated/usage/html/theme-switcher.html.md

@@ -29,8 +29,7 @@
       <ix-row>
         <ix-col size="2"></ix-col>
         <ix-col>
-          <input class="ix-form-control" type="checkbox" id="system" />
-          <label class="ix-form-label" for="system">Use System</label>
+          <ix-checkbox id="system" label="Use system"></ix-checkbox>
         </ix-col>
       </ix-row>
     </ix-layout-grid>
@@ -38,44 +37,71 @@
     <script type="module">
       import { themeSwitcher } from '@siemens/ix';
 
-      (async function () {
-        const themes = ['theme-classic-light', 'theme-classic-dark'];
-        let selectedTheme = themes[1];
-
-        setTimeout(() => {
-          themeSwitcher.setTheme(selectedTheme);
-        });
-
-        const toggleModeButton = document.getElementById('toggle-mode');
-        toggleModeButton.addEventListener('click', () => {
-          themeSwitcher.toggleMode();
-        });
-
-        const themeSelect = document.getElementById('select-theme');
-        themes.forEach((theme) => {
-          const item = document.createElement('ix-select-item');
-          item.label = theme;
-          item.value = theme;
-          themeSelect.appendChild(item);
-        });
-
-        themeSelect.value = selectedTheme;
-
-        themeSelect.addEventListener('valueChange', ({ detail: theme }) => {
-          themeSwitcher.setTheme(theme);
-          selectedTheme = theme;
-        });
-
-        const toggleSystem = document.getElementById('system');
-        toggleSystem.addEventListener('change', ({ target }) => {
-          if (target.checked) {
-            themeSwitcher.setVariant();
-            return;
-          }
-
-          themeSwitcher.setTheme(selectedTheme);
-        });
-      })();
+      const variants = ['light', 'dark'];
+      let selectedVariant = 'dark';
+      let useSystemTheme = false;
+
+      const toggleModeButton = document.getElementById('toggle-mode');
+      const themeSelect = document.getElementById('select-theme');
+      const toggleSystem = document.getElementById('system');
+
+      setTimeout(() => {
+        themeSwitcher.setTheme('classic');
+        themeSwitcher.setVariant(selectedVariant);
+      });
+
+      for (const variant of variants) {
+        const item = document.createElement('ix-select-item');
+
+        item.label = variant;
+        item.value = variant;
+
+        themeSelect.appendChild(item);
+      }
+
+      themeSelect.value = selectedVariant;
+
+      const updateControlsState = () => {
+        toggleModeButton.disabled = useSystemTheme;
+        themeSelect.disabled = useSystemTheme;
+      };
+
+      toggleModeButton.addEventListener('click', () => {
+        if (useSystemTheme) {
+          return;
+        }
+
+        themeSwitcher.toggleMode();
+
+        selectedVariant = selectedVariant === 'light' ? 'dark' : 'light';
+        themeSelect.value = selectedVariant;
+      });
+
+      themeSelect.addEventListener('valueChange', ({ detail: variant }) => {
+        if (useSystemTheme) {
+          return;
+        }
+
+        themeSwitcher.setVariant(variant);
+
+        selectedVariant = variant;
+      });
+
+      toggleSystem.addEventListener('checkedChange', ({ detail: checked }) => {
+        useSystemTheme = checked;
+
+        if (checked) {
+          themeSwitcher.setVariant();
+        } else {
+          themeSwitcher.setVariant(selectedVariant);
+
+          themeSelect.value = selectedVariant;
+        }
+
+        updateControlsState();
+      });
+
+      updateControlsState();
     </script>
     <script type="module" src="./init.js"></script>
   </body>