feat(split): migrate si-split to OnPush

BREAKING CHANGE: si-split and si-split-part inputs were migrated to signal inputs

Author: spliffone

api-goldens/element-ng/split/index.api.md

@@ -4,13 +4,9 @@
 
 ```ts
 
-import { AfterContentInit } from '@angular/core';
 import * as _angular_core from '@angular/core';
 import { EventEmitter } from '@angular/core';
-import { OnChanges } from '@angular/core';
-import { QueryList } from '@angular/core';
 import { Signal } from '@angular/core';
-import { SimpleChanges } from '@angular/core';
 import { TemplateRef } from '@angular/core';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
 
@@ -39,69 +35,46 @@ export interface PartState {
 export type Scale = 'none' | 'auto';
 
 // @public (undocumented)
-export class SiSplitComponent implements AfterContentInit, OnChanges {
-    // (undocumented)
-    gutterSize: number;
-    // (undocumented)
-    get orientation(): SplitOrientation;
-    set orientation(value: SplitOrientation);
-    // (undocumented)
-    sizes: number[];
+export class SiSplitComponent {
+    constructor();
+    readonly gutterSize: _angular_core.InputSignal<number>;
+    readonly orientation: _angular_core.InputSignal<SplitOrientation>;
+    readonly sizes: _angular_core.InputSignal<number[]>;
     // (undocumented)
     readonly sizesChange: EventEmitter<number[]>;
-    stateId?: string;
+    readonly stateId: _angular_core.InputSignal<string | undefined>;
 }
 
 // @public (undocumented)
 export class SiSplitModule {
 }
 
 // @public (undocumented)
-export class SiSplitPartComponent implements OnChanges {
-    // (undocumented)
-    actions: Action[];
+export class SiSplitPartComponent {
+    constructor();
+    readonly actions: _angular_core.InputSignal<Action[]>;
     // (undocumented)
     readonly collapseChanged: EventEmitter<boolean>;
     get collapsed(): boolean;
-    // (undocumented)
-    collapseDirection: CollapseTo;
-    collapseIconClass: string;
-    collapseLabel: TranslatableString;
-    collapseOthers: boolean;
-    collapseToMinSize: boolean;
-    set expanded(value: boolean);
-    // (undocumented)
-    get expanded(): boolean;
-    // (undocumented)
-    headerTemplate?: TemplateRef<{
+    readonly collapseDirection: _angular_core.InputSignal<CollapseTo>;
+    readonly collapseIconClass: _angular_core.InputSignal<string>;
+    readonly collapseLabel: _angular_core.InputSignal<TranslatableString>;
+    readonly collapseOthers: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly collapseToMinSize: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly expanded: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly headerTemplate: _angular_core.InputSignal<TemplateRef<{
         $implicit: SiSplitPartComponent;
-    }>;
-    heading: TranslatableString;
-    minSize: number;
-    // (undocumented)
-    static ngAcceptInputType_collapseOthers: unknown;
-    // (undocumented)
-    static ngAcceptInputType_collapseToMinSize: unknown;
-    // (undocumented)
-    static ngAcceptInputType_expanded: unknown;
-    // (undocumented)
-    static ngAcceptInputType_minSize: unknown;
-    // (undocumented)
-    static ngAcceptInputType_removeContentOnCollapse: unknown;
-    // (undocumented)
-    static ngAcceptInputType_showCollapseButton: unknown;
-    // (undocumented)
-    static ngAcceptInputType_showHeader: unknown;
-    // (undocumented)
-    static ngAcceptInputType_size: unknown;
-    removeContentOnCollapse: boolean;
-    scale: Scale;
-    showCollapseButton: boolean;
-    showHeader: boolean;
-    size?: number;
+    }> | undefined>;
+    readonly heading: _angular_core.InputSignal<TranslatableString | undefined>;
+    readonly minSize: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly removeContentOnCollapse: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly scale: _angular_core.InputSignal<Scale>;
+    readonly showCollapseButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly showHeader: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly size: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
     // (undocumented)
     readonly stateChange: EventEmitter<PartState>;
-    stateId?: string;
+    readonly stateId: _angular_core.InputSignal<string | undefined>;
     toggleCollapse(): void;
 }
 

projects/element-ng/split/si-split-part.component.html

@@ -1,11 +1,11 @@
-@if (!headerTemplate && showHeader) {
+@if (!headerTemplate() && showHeader()) {
   <div class="si-split-part-header" [class.is-collapsed]="collapsedState()">
     <div class="si-split-part-title text-truncate">
-      {{ heading | translate }}
+      {{ heading() | translate }}
     </div>
     @if (!collapsedState()) {
       <div class="si-split-part-actions">
-        @for (action of actions; track $index) {
+        @for (action of actions(); track $index) {
           <button
             type="button"
             class="si-split-button"
@@ -18,30 +18,30 @@
         }
       </div>
     }
-    @if (showCollapseButton) {
+    @if (showCollapseButton()) {
       <div class="si-split-part-collapse-button">
         <button
           type="button"
           class="si-split-button"
-          [attr.aria-label]="collapseLabel | translate"
+          [attr.aria-label]="collapseLabel() | translate"
           (click)="toggleCollapse()"
         >
-          <si-icon class="collapse-icon" [icon]="collapseIconClass" />
+          <si-icon class="collapse-icon" [icon]="collapseIconClass()" />
         </button>
       </div>
     }
   </div>
 }
 
-@if (headerTemplate) {
-  <ng-container *ngTemplateOutlet="headerTemplate; context: headerContext" />
+@if (headerTemplate()) {
+  <ng-container *ngTemplateOutlet="headerTemplate()!; context: headerContext" />
 }
 
 <div
   class="si-split-part-content"
-  [class.d-none]="!removeContentOnCollapse && collapsedState() && !collapseToMinSize"
+  [class.d-none]="!removeContentOnCollapse() && collapsedState() && !collapseToMinSize()"
 >
-  @if (!removeContentOnCollapse || !collapsedState()) {
+  @if (!removeContentOnCollapse() || !collapsedState()) {
     <ng-content />
   }
 </div>