refactor(element-ng): use OnPush change detection in remaining components

following components now use `ChangeDetectionStrategy.OnPush`:

- si-badge
- si-login-single-sign-on
- si-password-strength
- si-status-counter

Author: chintankavathia

projects/element-ng/badge/si-badge.component.ts

@@ -2,7 +2,7 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
-import { Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { type StatusType } from '@siemens/element-ng/common';
 import { SiIconComponent } from '@siemens/element-ng/icon';
 
@@ -27,6 +27,7 @@ export type BadgeType =
     }
     <span class="text-truncate"><ng-content /></span>
   `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     role: 'status',
     class: 'badge',

projects/element-ng/landing-page/login-single-sign-on/si-login-single-sign-on.component.ts

@@ -2,7 +2,7 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
-import { Component, input, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
 
 /**
@@ -23,7 +23,8 @@ import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
 @Component({
   selector: 'si-login-single-sign-on',
   imports: [SiTranslatePipe],
-  templateUrl: './si-login-single-sign-on.component.html'
+  templateUrl: './si-login-single-sign-on.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SiLoginSingleSignOnComponent {
   /**

projects/element-ng/password-strength/si-password-strength.component.ts

@@ -4,6 +4,7 @@
  */
 import {
   AfterViewInit,
+  ChangeDetectionStrategy,
   Component,
   contentChild,
   contentChildren,
@@ -24,6 +25,7 @@ import { SiPasswordStrengthDirective } from './si-password-strength.directive';
     </si-password-toggle>
   `,
   styleUrl: './si-password-strength.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[class.bad]': 'bad()',
     '[class.weak]': 'weak()',

projects/element-ng/status-counter/si-status-counter.component.ts

@@ -3,14 +3,22 @@
  * SPDX-License-Identifier: MIT
  */
 import { NgClass } from '@angular/common';
-import { booleanAttribute, Component, computed, input, numberAttribute } from '@angular/core';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  numberAttribute
+} from '@angular/core';
 import { SiIconComponent } from '@siemens/element-ng/icon';
 
 @Component({
   selector: 'si-status-counter, si-icon-status',
   imports: [NgClass, SiIconComponent],
   templateUrl: './si-status-counter.component.html',
-  styleUrl: './si-status-counter.component.scss'
+  styleUrl: './si-status-counter.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SiStatusCounterComponent {
   /** Icon to display. */