@siemens/ix-docs 4.4.0 → 5.0.0

package/build/docs/autogenerated/usage/angular_standalone/echarts-special-zoom.ts.md

@@ -1,8 +1,12 @@
 ```ts
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
 
-import { registerTheme, getComputedCSSProperty } from '@siemens/ix-echarts';
+import {
+  registerTheme,
+  getComputedCSSProperty,
+  resolveEChartThemeName,
+} from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import * as echarts from 'echarts';
 import { EChartsOption } from 'echarts';
@@ -14,8 +18,9 @@ import { EChartsOption } from 'echarts';
   templateUrl: './echarts-special-zoom.html',
   styleUrls: ['./echarts-special-zoom.css'],
 })
-export default class EchartsSpecialZoom implements OnInit {
-  theme = themeSwitcher.getCurrentTheme();
+export default class EchartsSpecialZoom implements OnDestroy, OnInit {
+  theme = resolveEChartThemeName();
+  private themeChangeDisposer?: { dispose: () => void };
 
   //create some random data
   private base = +new Date(1968, 9, 3);
@@ -25,56 +30,60 @@ export default class EchartsSpecialZoom implements OnInit {
 
   data: number[] = [0];
 
-  options: EChartsOption = {
-    toolbox: {
-      feature: {
-        dataZoom: {
-          yAxisIndex: 'none',
+  options: EChartsOption = this.getOptions();
+
+  private getOptions(): EChartsOption {
+    return {
+      toolbox: {
+        feature: {
+          dataZoom: {
+            yAxisIndex: 'none',
+          },
         },
       },
-    },
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: this.date,
-    },
-    yAxis: {
-      type: 'value',
-      boundaryGap: [0, '100%'],
-    },
-    dataZoom: [
-      {
-        type: 'inside',
-        start: 0,
-        end: 10,
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: this.date,
       },
-      {
-        start: 0,
-        end: 10,
+      yAxis: {
+        type: 'value',
+        boundaryGap: [0, '100%'],
       },
-    ],
-    series: [
-      {
-        name: 'Synthetic data',
-        type: 'line',
-        symbol: 'none',
-        sampling: 'lttb',
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: getComputedCSSProperty('color-primary'),
-            },
-            {
-              offset: 1,
-              color: 'transparent',
-            },
-          ]),
+      dataZoom: [
+        {
+          type: 'inside',
+          start: 0,
+          end: 10,
         },
-        data: this.data,
-      },
-    ],
-  };
+        {
+          start: 0,
+          end: 10,
+        },
+      ],
+      series: [
+        {
+          name: 'Synthetic data',
+          type: 'line',
+          symbol: 'none',
+          sampling: 'lttb',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: getComputedCSSProperty('color-primary'),
+              },
+              {
+                offset: 1,
+                color: 'transparent',
+              },
+            ]),
+          },
+          data: this.data,
+        },
+      ],
+    };
+  }
 
   generateData(): void {
     for (let i = 1; i < 20000; i++) {
@@ -88,14 +97,20 @@ export default class EchartsSpecialZoom implements OnInit {
 
   ngOnInit() {
     this.generateData();
+    this.options = this.getOptions();
 
     registerTheme(echarts);
 
-    themeSwitcher.themeChanged.on((theme: string) => {
-      this.theme = theme;
+    this.themeChangeDisposer = themeSwitcher.themeChanged.on(() => {
+      this.theme = resolveEChartThemeName();
+      this.options = this.getOptions();
     });
   }
 
+  ngOnDestroy() {
+    this.themeChangeDisposer?.dispose();
+  }
+
   private createNewBase() {
     this.base += this.oneDay;
 

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

@@ -1,8 +1,8 @@
 ```ts
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
 
-import { registerTheme } from '@siemens/ix-echarts';
+import { registerTheme, resolveEChartThemeName } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import * as echarts from 'echarts';
 import { EChartsOption } from 'echarts';
@@ -14,8 +14,9 @@ import { EChartsOption } from 'echarts';
   templateUrl: './echarts.html',
   styleUrls: ['./echarts.css'],
 })
-export default class Echarts implements OnInit {
-  theme = themeSwitcher.getCurrentTheme();
+export default class Echarts implements OnDestroy, OnInit {
+  theme = resolveEChartThemeName();
+  private themeChangeDisposer?: { dispose: () => void };
 
   options: EChartsOption = {
     tooltip: {
@@ -139,9 +140,13 @@ export default class Echarts implements OnInit {
   ngOnInit() {
     registerTheme(echarts);
 
-    themeSwitcher.themeChanged.on((theme: string) => {
-      this.theme = theme;
+    this.themeChangeDisposer = themeSwitcher.themeChanged.on(() => {
+      this.theme = resolveEChartThemeName();
     });
   }
+
+  ngOnDestroy() {
+    this.themeChangeDisposer?.dispose();
+  }
 }
 ```

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

@@ -11,10 +11,10 @@ import { IxButton, LoadingService } from '@siemens/ix-angular/standalone';
 export default class Loading {
   constructor(private readonly loadingService: LoadingService) {}
 
-  startLoading = () => {
+  startLoading = async () => {
     let count = 0;
     const progress: ModalLoadingContext =
-      this.loadingService.showModalLoading({ message: 'Loading 0/2' });
+      await this.loadingService.showModalLoading({ message: 'Loading 0/2' });
     const interval = setInterval(() => {
       count++;
       progress.update(`Loading ${count}/2`);

package/build/docs/autogenerated/usage/angular_standalone/modal-non-blocking.ts.md

@@ -0,0 +1,63 @@
+```ts
+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/usage/angular_standalone/pill-variants.ts.md

@@ -15,64 +15,64 @@ import {
     <ix-layout-grid>
       <ix-row>
         <ix-col>
-          <ix-pill icon="info"> Primary </ix-pill>
+          <ix-pill variant="primary" icon="info">Primary</ix-pill>
         </ix-col>
         <ix-col>
-          <ix-pill variant="subtle-primary" icon="info"> Primary </ix-pill>
+          <ix-pill variant="primary" outline icon="info">Primary</ix-pill>
         </ix-col>
       </ix-row>
 
       <ix-row>
         <ix-col>
-          <ix-pill variant="alarm" icon="info"> Alarm </ix-pill>
+          <ix-pill variant="alarm" icon="info">Alarm</ix-pill>
         </ix-col>
         <ix-col>
-          <ix-pill variant="alarm" icon="info"> Alarm </ix-pill>
+          <ix-pill variant="alarm" outline icon="info">Alarm</ix-pill>
         </ix-col>
       </ix-row>
 
       <ix-row>
         <ix-col>
-          <ix-pill variant="critical" icon="info"> Critical </ix-pill>
+          <ix-pill variant="critical" icon="info">Critical</ix-pill>
         </ix-col>
         <ix-col>
-          <ix-pill variant="critical" icon="info"> Critical </ix-pill>
+          <ix-pill variant="critical" outline icon="info">Critical</ix-pill>
         </ix-col>
       </ix-row>
 
       <ix-row>
         <ix-col>
-          <ix-pill variant="warning" icon="info"> Warning </ix-pill>
+          <ix-pill variant="warning" icon="info">Warning</ix-pill>
         </ix-col>
         <ix-col>
-          <ix-pill variant="warning" icon="info"> Warning </ix-pill>
+          <ix-pill variant="warning" outline icon="info">Warning</ix-pill>
         </ix-col>
       </ix-row>
 
       <ix-row>
         <ix-col>
-          <ix-pill variant="success" icon="info"> Success </ix-pill>
+          <ix-pill variant="info" icon="info">Info</ix-pill>
         </ix-col>
         <ix-col>
-          <ix-pill variant="success" icon="info"> Success </ix-pill>
+          <ix-pill variant="info" outline icon="info">Info</ix-pill>
         </ix-col>
       </ix-row>
 
       <ix-row>
         <ix-col>
-          <ix-pill variant="info" icon="info"> Info </ix-pill>
+          <ix-pill variant="neutral" icon="info">Neutral</ix-pill>
         </ix-col>
         <ix-col>
-          <ix-pill variant="info" icon="info"> Info </ix-pill>
+          <ix-pill variant="neutral" outline icon="info">Neutral</ix-pill>
         </ix-col>
       </ix-row>
 
       <ix-row>
         <ix-col>
-          <ix-pill variant="neutral" icon="info"> Neutral </ix-pill>
+          <ix-pill variant="success" icon="info">Success</ix-pill>
         </ix-col>
         <ix-col>
-          <ix-pill variant="neutral" icon="info"> Neutral </ix-pill>
+          <ix-pill variant="success" outline icon="info">Success</ix-pill>
         </ix-col>
       </ix-row>
 
@@ -80,17 +80,19 @@ import {
         <ix-col>
           <ix-pill
             variant="custom"
-            color="color-soft-text"
-            background="purple"
+            pill-color="var(--theme-color-inv-std-text)"
+            background="var(--theme-color-dynamic)"
             icon="info"
-          >
-            Custom
-          </ix-pill>
+          >Custom</ix-pill>
         </ix-col>
         <ix-col>
-          <ix-pill variant="custom" color="color-soft-text" background="purple" icon="info">
-            Custom
-          </ix-pill>
+          <ix-pill
+            variant="custom"
+            outline
+            pill-color="var(--theme-color-dynamic)"
+            background="var(--theme-color-dynamic)"
+            icon="info"
+          >Custom</ix-pill>
         </ix-col>
       </ix-row>
     </ix-layout-grid>

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

@@ -7,27 +7,32 @@ import { IxPill } from '@siemens/ix-angular/standalone';
   imports: [IxPill],
   styleUrls: ['./pill.css'],
   template: `
-    <ix-pill variant="custom" color="white" background="purple">
-      Label
-    </ix-pill>
+    <ix-pill
+      variant="custom"
+      pill-color="var(--theme-color-inv-std-text)"
+      background="var(--theme-color-dynamic)"
+      >Label</ix-pill>
 
-    <ix-pill>Label</ix-pill>
-    <ix-pill variant="subtle-primary">Label</ix-pill>
+    <ix-pill tooltip-text="Custom tooltip text">Label</ix-pill>
     <ix-pill class="styled">Label</ix-pill>
 
     <ix-pill icon="star">Label</ix-pill>
-    <ix-pill icon="star" class="styled"> Label </ix-pill>
-    <ix-pill variant="subtle-primary" alignLeft icon="star" class="styled"> Label </ix-pill>
+    <ix-pill icon="star" aria-label="Featured"></ix-pill>
+    <ix-pill icon="star" class="styled">Label</ix-pill>
+    <ix-pill variant="primary" outline alignLeft icon="star" class="styled">Label</ix-pill>
 
     <ix-pill variant="alarm">Label</ix-pill>
-    <ix-pill variant="alarm"> Label </ix-pill>
-    <ix-pill variant="alarm" class="styled"> Label </ix-pill>
+    <ix-pill variant="alarm" class="styled">Label</ix-pill>
 
-    <ix-pill variant="alarm" icon="star"> Label </ix-pill>
-    <ix-pill variant="alarm" icon="star" class="styled"> Label </ix-pill>
+    <ix-pill variant="alarm" icon="star">Label</ix-pill>
+    <ix-pill variant="alarm" icon="star" class="styled">Label</ix-pill>
     <ix-pill variant="alarm" alignLeft icon="star" class="styled">
       Label
     </ix-pill>
+    <ix-pill icon="star" class="styled-ellipsis-4">Label</ix-pill>
+    <ix-pill variant="primary" outline icon="star" class="styled-ellipsis-4">Label</ix-pill>
+    <ix-pill class="styled-ellipsis-3">Label</ix-pill>
+    <ix-pill variant="primary" outline class="styled-ellipsis-3">Label</ix-pill>
   `,
 })
 export default class Pill {}

package/build/docs/autogenerated/usage/angular_standalone/popover-news.html.md

@@ -4,10 +4,10 @@
     <div class="placeholder-logo" slot="logo"></div>
   </ix-application-header>
   <ix-menu>
-    <ix-menu-about>
-      <ix-menu-about-item label="Example"> </ix-menu-about-item>
+    <ix-menu-about activeTabKey="tab-1">
+      <ix-menu-about-item tabKey="tab-1" label="Example"> </ix-menu-about-item>
     </ix-menu-about>
-    <ix-menu-about-news label="Test" show about-item-label="Example">
+    <ix-menu-about-news label="Test" show activeAboutTabKey="tab-1">
       Test
     </ix-menu-about-news>
   </ix-menu>

package/build/docs/autogenerated/usage/angular_standalone/range-field.ts.md

@@ -0,0 +1,43 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IxDateInput,
+  IxDatetimeInput,
+  IxRangeField,
+  IxTimeInput,
+} from '@siemens/ix-angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  imports: [IxRangeField, IxDateInput, IxDatetimeInput, IxTimeInput],
+  template: `
+    <ix-range-field
+      type="date-range"
+      style="width: 32rem"
+      aria-label="Date range"
+    >
+      <ix-date-input label="Start date"></ix-date-input>
+      <ix-date-input label="End date"></ix-date-input>
+    </ix-range-field>
+
+    <ix-range-field
+      type="time-range"
+      style="width: 32rem"
+      aria-label="Time range"
+    >
+      <ix-time-input label="Start time"></ix-time-input>
+      <ix-time-input label="End time"></ix-time-input>
+    </ix-range-field>
+
+    <ix-range-field
+      type="datetime-range"
+      style="width: 32rem"
+      aria-label="Datetime range"
+    >
+      <ix-datetime-input label="Start date and time"></ix-datetime-input>
+      <ix-datetime-input label="End date and time"></ix-datetime-input>
+    </ix-range-field>
+  `,
+})
+export default class RangeField {}
+```

package/build/docs/autogenerated/usage/angular_standalone/settings-legacy.html.md

@@ -0,0 +1,19 @@
+```html
+<ix-application>
+  <ix-application-header>
+    <div class="placeholder-logo" slot="logo"></div>
+  </ix-application-header>
+  <ix-menu #menu>
+    <ix-menu-settings activeTabKey="tab-1">
+      <ix-menu-settings-item
+        tabKey="tab-1"
+        label="Example Setting 1"
+      ></ix-menu-settings-item>
+      <ix-menu-settings-item
+        tabKey="tab-2"
+        label="Example Setting 2"
+      ></ix-menu-settings-item>
+    </ix-menu-settings>
+  </ix-menu>
+</ix-application>
+```

package/build/docs/autogenerated/usage/angular_standalone/settings-legacy.ts.md

@@ -0,0 +1,31 @@
+```ts
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxMenu,
+  IxMenuSettings,
+  IxMenuSettingsItem,
+} from '@siemens/ix-angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  imports: [
+    IxApplication,
+    IxApplicationHeader,
+    IxMenu,
+    IxMenuSettings,
+    IxMenuSettingsItem,
+  ],
+  templateUrl: './settings-legacy.html',
+})
+export default class SettingsLegacy implements AfterViewInit {
+  @ViewChild('menu', { read: ElementRef })
+  menuRef!: ElementRef<HTMLIxMenuElement>;
+
+  ngAfterViewInit() {
+    const { nativeElement } = this.menuRef;
+    nativeElement.toggleSettings(true);
+  }
+}
+```

package/build/docs/autogenerated/usage/angular_standalone/settings.html.md

@@ -4,9 +4,23 @@
     <div class="placeholder-logo" slot="logo"></div>
   </ix-application-header>
   <ix-menu #menu>
-    <ix-menu-settings>
-      <ix-menu-settings-item label="Example Setting 1"></ix-menu-settings-item>
-      <ix-menu-settings-item label="Example Setting 2"></ix-menu-settings-item>
+    <ix-menu-settings suppressLegacyTabs>
+      <ix-tabs
+        [activeTabKey]="activeTabKey"
+        (tabChange)="activeTabKey = $event.detail ?? 'tab-1'"
+      >
+        <ix-tab-item tabKey="tab-1">Example Setting 1</ix-tab-item>
+        <ix-tab-item tabKey="tab-2">Example Setting 2</ix-tab-item>
+      </ix-tabs>
+      @if (activeTabKey === 'tab-1') {
+      <section role="tabpanel" aria-label="Settings content">
+        Example Setting 1 content
+      </section>
+      } @else {
+      <section role="tabpanel" aria-label="Settings content">
+        Example Setting 2 content
+      </section>
+      }
     </ix-menu-settings>
   </ix-menu>
 </ix-application>

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

@@ -5,7 +5,8 @@ import {
   IxApplicationHeader,
   IxMenu,
   IxMenuSettings,
-  IxMenuSettingsItem,
+  IxTabItem,
+  IxTabs,
 } from '@siemens/ix-angular/standalone';
 
 @Component({
@@ -15,7 +16,8 @@ import {
     IxApplicationHeader,
     IxMenu,
     IxMenuSettings,
-    IxMenuSettingsItem,
+    IxTabs,
+    IxTabItem,
   ],
   templateUrl: './settings.html',
 })
@@ -23,6 +25,8 @@ export default class Settings implements AfterViewInit {
   @ViewChild('menu', { read: ElementRef })
   menuRef!: ElementRef<HTMLIxMenuElement>;
 
+  activeTabKey = 'tab-1';
+
   ngAfterViewInit() {
     const { nativeElement } = this.menuRef;
     nativeElement.toggleSettings(true);

package/build/docs/autogenerated/usage/angular_standalone/slider-error.html.md

@@ -1,10 +1,16 @@
 ```html
-<ix-slider trace trace-reference="50" [marker]="[0, 25, 50, 75, 100]" error>
+<ix-slider
+  class="ix-invalid"
+  trace
+  trace-reference="50"
+  [marker]="[0, 25, 50, 75, 100]"
+>
   <span slot="label-start">0</span>
   <span slot="label-end">100</span>
 </ix-slider>
 
 <ix-slider
+  class="ix-invalid"
   min="0"
   max="50"
   step="10"
@@ -12,7 +18,7 @@
   trace
   trace-reference="50"
   [marker]="[0, 10, 20, 30, 40, 50]"
-  error="Error message"
+  invalid-text="Error message"
 >
   <span slot="label-start">0</span>
   <span slot="label-end">50</span>