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

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/usage/vue/split-button.css.md

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

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

@@ -5,9 +5,25 @@ import { IxSplitButton, IxDropdownItem } from '@siemens/ix-vue';
 </script>
 
 <template>
-  <IxSplitButton label="Action text" :splitIcon="iconChevronDownSmall">
-    <IxDropdownItem label="Item 1"></IxDropdownItem>
-    <IxDropdownItem label="Item 2"></IxDropdownItem>
-  </IxSplitButton>
+  <div>
+    <IxSplitButton label="Action text" :splitIcon="iconChevronDownSmall">
+      <IxDropdownItem label="Item 1"></IxDropdownItem>
+      <IxDropdownItem label="Item 2"></IxDropdownItem>
+    </IxSplitButton>
+    <IxSplitButton label="Action text" :splitIcon="iconChevronDownSmall" disabled>
+      <IxDropdownItem label="Item 1"></IxDropdownItem>
+      <IxDropdownItem label="Item 2"></IxDropdownItem>
+    </IxSplitButton>
+    <IxSplitButton label="Action text" :splitIcon="iconChevronDownSmall" disableButton>
+      <IxDropdownItem label="Item 1"></IxDropdownItem>
+      <IxDropdownItem label="Item 2"></IxDropdownItem>
+    </IxSplitButton>
+    <IxSplitButton label="Action text" :splitIcon="iconChevronDownSmall" disableDropdownButton>
+      <IxDropdownItem label="Item 1"></IxDropdownItem>
+      <IxDropdownItem label="Item 2"></IxDropdownItem>
+    </IxSplitButton>
+</div>
 </template>
+
+<style scoped src="./split-button.css"></style>
 ```

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

@@ -1,54 +1,57 @@
 ```vue
 <script setup lang="ts">
-import { themeSwitcher } from '@siemens/ix';
+import { themeSwitcher, type ThemeVariant } from '@siemens/ix';
 import {
   IxButton,
+  IxCheckbox,
   IxCol,
   IxLayoutGrid,
   IxRow,
   IxSelect,
+  IxSelectItem,
 } from '@siemens/ix-vue';
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 
-const themes = ['theme-classic-light', 'theme-classic-dark'];
-let selectedTheme = themes[1];
-
-themeSwitcher.setTheme(selectedTheme);
+const variants = ref<ThemeVariant[]>(['light', 'dark']);
+const selectedVariant = ref<ThemeVariant>('dark');
+const useSystemTheme = ref(false);
 
 onMounted(() => {
-  const themeSelect: HTMLSelectElement | null = document.getElementById(
-    'select-theme'
-  ) as HTMLSelectElement;
+  themeSwitcher.setTheme('classic');
+  themeSwitcher.setVariant(selectedVariant.value);
+});
 
-  if (themeSelect) {
-    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', (event: Event) => {
-      const target = event.target as HTMLSelectElement;
-      const detail = target.value;
-      themeSwitcher.setTheme(detail);
-      selectedTheme = detail;
-    });
+const valueChange = (event: CustomEvent<string | string[]>) => {
+  if (useSystemTheme.value) {
+    return;
   }
-});
+
+  const newVariant = event.detail as ThemeVariant;
+
+  themeSwitcher.setVariant(newVariant);
+
+  selectedVariant.value = newVariant;
+};
 
 const toggle = () => {
+  if (useSystemTheme.value) {
+    return;
+  }
+
   themeSwitcher.toggleMode();
+
+  selectedVariant.value = selectedVariant.value === 'light' ? 'dark' : 'light';
 };
 
-const systemChange = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  if (target.checked) {
+const systemChange = (event: CustomEvent<boolean>) => {
+  const checked = event.detail;
+  useSystemTheme.value = checked;
+
+  if (checked) {
     themeSwitcher.setVariant();
-    return;
+  } else {
+    themeSwitcher.setVariant(selectedVariant.value);
   }
-
-  themeSwitcher.setTheme(selectedTheme);
 };
 </script>
 
@@ -61,27 +64,35 @@ const systemChange = (event: Event) => {
         <span>Light/Dark</span>
       </IxCol>
       <IxCol>
-        <IxButton @click="toggle">Toggle mode</IxButton>
+        <IxButton @click="toggle" :disabled="useSystemTheme">
+          Toggle mode
+        </IxButton>
       </IxCol>
     </IxRow>
 
     <IxRow>
       <IxCol :size="'2'">Theme</IxCol>
       <IxCol>
-        <IxSelect id="select-theme" placeholder="Select a theme"> </IxSelect>
+        <IxSelect
+          :value="selectedVariant"
+          @valueChange="valueChange"
+          :disabled="useSystemTheme"
+          placeholder="Select a theme"
+        >
+          <IxSelectItem
+            v-for="variant in variants"
+            :key="variant"
+            :label="variant"
+            :value="variant"
+          />
+        </IxSelect>
       </IxCol>
     </IxRow>
 
     <IxRow>
       <IxCol :size="'2'"></IxCol>
       <IxCol>
-        <input
-          class="ix-form-control"
-          type="checkbox"
-          id="system"
-          @change="systemChange"
-        />
-        <label class="ix-form-label" for="system">Use System</label>
+        <IxCheckbox label="Use system" @checkedChange="systemChange" />
       </IxCol>
     </IxRow>
   </IxLayoutGrid>

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

@@ -0,0 +1,17 @@
+```vue
+<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>
+```

package/build/docs/autogenerated/utils/modal-service.mdx

@@ -24,6 +24,24 @@ import ReactMarkdown from 'react-markdown';
   </ApiTable.Code>
 
 
+</ApiTable>
+<ApiTable id="property-close">
+  <ApiTable.PropertyHeader name="close" singleFramework="angular">
+  </ApiTable.PropertyHeader>
+
+  <ApiTable.Text name="Description">
+    <ReactMarkdown>{``}</ReactMarkdown>
+  </ApiTable.Text>
+
+  <ApiTable.Code name="Attribute">
+    {`close`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Type">
+   {`unknown`}
+  </ApiTable.Code>
+
+
 </ApiTable>
 <ApiTable id="property-open">
   <ApiTable.PropertyHeader name="open" singleFramework="angular">

package/build/docs/autogenerated/version.json

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

package/build/static/demo/v2/angular/aggrid.html

@@ -7,9 +7,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 -->
 
-<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/static/demo/v2/angular/aggrid.ts

@@ -7,54 +7,86 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-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/static/demo/v2/angular/blind-variants.html

@@ -7,8 +7,8 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 -->
 
-<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/static/demo/v2/angular/global.css

@@ -13,11 +13,6 @@
 
 @import '@siemens/ix/dist/siemens-ix/siemens-ix.css';
 
-/* global imports only needed for AG-Grid */
-@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/static/demo/v2/angular/loading.ts

@@ -8,7 +8,8 @@
  */
 
 import { Component } from '@angular/core';
-import { showModalLoading } from '@siemens/ix';
+import { ModalLoadingContext } from '@siemens/ix';
+import { LoadingService } from '@siemens/ix-angular';
 
 @Component({
   standalone: false,
@@ -16,9 +17,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/static/demo/v2/angular/message.ts

@@ -8,7 +8,7 @@
  */
 
 import { Component } from '@angular/core';
-import { showMessage } from '@siemens/ix';
+import { MessageService } from '@siemens/ix-angular';
 
 @Component({
   standalone: false,
@@ -18,9 +18,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/static/demo/v2/angular/modal-close.html

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

package/build/static/demo/v2/angular/modal-close.ts

@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+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/static/demo/v2/angular/pane-layout.html

@@ -21,7 +21,7 @@ LICENSE file in the root directory of this source tree.
     <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/static/demo/v2/angular/split-button.css

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

package/build/static/demo/v2/angular/split-button.ts

@@ -12,11 +12,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 {}

package/build/static/demo/v2/angular/theme-switcher.html

@@ -4,7 +4,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>
 
@@ -12,14 +14,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>
@@ -28,13 +31,10 @@
   <ix-row>
     <ix-col size="2"></ix-col>
     <ix-col>
-      <input
-        class="ix-form-control"
-        type="checkbox"
-        id="system"
-        (change)="onSystemMode($event)"
-      />
-      <label class="ix-form-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/static/demo/v2/angular/theme-switcher.ts

@@ -7,8 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Component } from '@angular/core';
-import { themeSwitcher } from '@siemens/ix';
+import { Component, OnInit } from '@angular/core';
+import { themeSwitcher, ThemeVariant } from '@siemens/ix';
 
 @Component({
   standalone: false,
@@ -16,29 +16,47 @@ 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/static/demo/v2/angular/tooltip-with-icon.html

@@ -0,0 +1,15 @@
+<!--
+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>