feat(core): application frame enhancement

packages/angular-test-app/src/app/app.module.ts

@@ -103,7 +103,7 @@ import TabsRounded from 'src/preview-examples/tabs-rounded';
 import Textarea from 'src/preview-examples/textarea';
 import TextareaDisabled from 'src/preview-examples/textarea-disabled';
 import TextareaReadonly from 'src/preview-examples/textarea-readonly';
-import ThemeSwitcherService from 'src/preview-examples/theme-switcher';
+import ThemeSwitcherExample from 'src/preview-examples/theme-switcher';
 import Tile from 'src/preview-examples/tile';
 import Timepicker from 'src/preview-examples/timepicker';
 import Toast from 'src/preview-examples/toast';
@@ -198,7 +198,7 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     Textarea,
     TextareaReadonly,
     TextareaDisabled,
-    ThemeSwitcherService,
+    ThemeSwitcherExample,
     Tile,
     Timepicker,
     ToggleButtonPrimaryGhost,

packages/angular-test-app/src/preview-examples/theme-switcher.html

@@ -0,0 +1,35 @@
+<ix-grid>
+  <ix-row>
+    <ix-col size="2">
+      <span>Light/Dark</span>
+    </ix-col>
+    <ix-col>
+      <ix-button (click)="toggleMode()">Toggle mode</ix-button>
+    </ix-col>
+  </ix-row>
+
+  <ix-row>
+    <ix-col size="2">Theme</ix-col>
+    <ix-col>
+      <ix-select
+        [selectedIndices]="selectedTheme"
+        (itemSelectionChange)="onItemSelectionChange($event)"
+        placeholder="Select a theme"
+      >
+        <ix-select-item
+          *ngFor="let theme of themes"
+          [label]="theme"
+          [value]="theme"
+        ></ix-select-item>
+      </ix-select>
+    </ix-col>
+  </ix-row>
+
+  <ix-row>
+    <ix-col size="2">Use System</ix-col>
+    <ix-col>
+      <input type="checkbox" id="system" (change)="onSystemMode($event)" />
+      <label for="system"></label>
+    </ix-col>
+  </ix-row>
+</ix-grid>

packages/angular-test-app/src/preview-examples/theme-switcher.ts

@@ -6,36 +6,44 @@
  * 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 { ThemeService } from '@siemens/ix-angular';
+import { themeSwitcher } from '@siemens/ix';
 
 @Component({
   selector: 'app-example',
-  template: `
-    <ix-button class="mb-2" (click)="themeService.toggleMode()">
-      Toggle mode
-    </ix-button>
-    <ix-select
-      (itemSelectionChange)="onItemSelectionChange($event)"
-      placeholder="Select a theme"
-    >
-      <ix-select-item
-        label="Classic light"
-        value="theme-classic-light"
-      ></ix-select-item>
-      <ix-select-item
-        label="Classic dark"
-        value="theme-classic-dark"
-      ></ix-select-item>
-    </ix-select>
-  `,
+  templateUrl: './theme-switcher.html',
+  styles: [
+    `
+      ix-col {
+        align-items: center;
+        height: 2.5rem;
+      }
+    `,
+  ],
 })
-export default class ThemeSwitcherService {
-  constructor(readonly themeService: ThemeService) {}
+export default class ThemeSwitcherExample {
+  themes = ['theme-classic-light', 'theme-classic-dark'];
+  selectedTheme = this.themes[1];
+
+  constructor() {}
 
   onItemSelectionChange(event: Event) {
     const customEvent = event as CustomEvent<string | string[]>;
-    this.themeService.setTheme(customEvent.detail[0]);
+    const newTheme = customEvent.detail[0];
+    themeSwitcher.setTheme(newTheme);
+    this.selectedTheme = newTheme;
+  }
+
+  toggleMode() {
+    themeSwitcher.toggleMode();
+  }
+
+  onSystemMode({ target }: Event) {
+    if ((target as HTMLInputElement).checked) {
+      themeSwitcher.setVariant();
+      return;
+    }
+
+    themeSwitcher.setTheme(this.selectedTheme);
   }
 }

packages/angular/src/components.ts

@@ -74,14 +74,14 @@ export declare interface IxAvatar extends Components.IxAvatar {}
 
 
 @ProxyCmp({
-  inputs: ['applicationName', 'hideHeader']
+  inputs: ['applicationName', 'breakpoints', 'forceBreakpoint', 'hideHeader']
 })
 @Component({
   selector: 'ix-basic-navigation',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['applicationName', 'hideHeader'],
+  inputs: ['applicationName', 'breakpoints', 'forceBreakpoint', 'hideHeader'],
 })
 export class IxBasicNavigation {
   protected el: HTMLElement;
@@ -1260,15 +1260,15 @@ export declare interface IxMapNavigationOverlay extends Components.IxMapNavigati
 
 
 @ProxyCmp({
-  inputs: ['applicationDescription', 'applicationName', 'breakpoints', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'forceBreakpoint', 'i18nCollapse', 'i18nExpand', 'i18nExpandSidebar', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'pinned', 'showAbout', 'showSettings'],
+  inputs: ['applicationDescription', 'applicationName', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'i18nCollapse', 'i18nExpand', 'i18nExpandSidebar', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'pinned', 'showAbout', 'showSettings'],
   methods: ['toggleMapExpand', 'toggleMenu', 'toggleSettings', 'toggleAbout']
 })
 @Component({
   selector: 'ix-menu',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['applicationDescription', 'applicationName', 'breakpoints', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'forceBreakpoint', 'i18nCollapse', 'i18nExpand', 'i18nExpandSidebar', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'pinned', 'showAbout', 'showSettings'],
+  inputs: ['applicationDescription', 'applicationName', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'i18nCollapse', 'i18nExpand', 'i18nExpandSidebar', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'pinned', 'showAbout', 'showSettings'],
 })
 export class IxMenu {
   protected el: HTMLElement;

packages/angular/src/theme/theme.service.ts

@@ -8,15 +8,18 @@
  */
 
 import { EventEmitter, Injectable, Output } from '@angular/core';
-import { themeSwitcher, ThemeSwitcher } from '@siemens/ix';
+import { themeSwitcher } from '@siemens/ix';
 
+/**
+ * @deprecated Use themeSwitcher from core package `import { themeSwitcher } from '@siemens/ix';`
+ */
 @Injectable({
   providedIn: 'root',
 })
 export class ThemeService {
   @Output() themeChanged = new EventEmitter<string>();
 
-  private themeSwitcher: ThemeSwitcher;
+  private themeSwitcher: typeof themeSwitcher;
 
   constructor() {
     this.themeSwitcher = themeSwitcher;