fix: update input handling to support numeric values across components

Author: TerranceKhumalo-absa

projects/composition/src/app/components/navigation-sidebar/navigation-sidebar.component.ts

@@ -168,8 +168,8 @@ export class NavigationSidebarComponent implements OnInit {
     this.filteredComponents = [...this._components];
   }
 
-  onSearchChanged(value: string) {
-    this._filterComponentsList(value);
+  onSearchChanged(value: string | number) {
+    this._filterComponentsList(String(value));
   }
 
   private _filterComponentsList(searchStr: string) {

projects/composition/src/app/pages/colors-page/colors-page/colors-page.component.ts

@@ -151,8 +151,8 @@ export class ColorsPageComponent implements OnInit {
     this.filteredColorsList = [...this.colorsList];
   }
 
-  onSearchChanged(value: string) {
-    this._filterColors(value);
+  onSearchChanged(value: string | number) {
+    this._filterColors(String(value));
   }
 
   private _filterColors(searchStr: string) {

projects/composition/src/app/pages/icons-page/icons-page/icons-page.component.ts

@@ -36,8 +36,8 @@ export class IconsPageComponent implements OnInit {
     this.filteredIconsList = iconNames;
   }
 
-  onSearchChanged(value: string) {
-    this._filterIcons(value);
+  onSearchChanged(value: string | number) {
+    this._filterIcons(String(value));
   }
 
   private _filterIcons(name: string) {

projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.ts

@@ -11,12 +11,12 @@ import {
   ViewChild
 } from '@angular/core';
 import { ControlValueAccessor, FormsModule, NgControl } from '@angular/forms';
-import { CpsInputComponent } from '../cps-input/cps-input.component';
+import { DatePickerModule } from 'primeng/datepicker';
 import { Subscription } from 'rxjs';
-import { convertSize } from '../../utils/internal/size-utils';
 import { CpsTooltipPosition } from '../../directives/cps-tooltip/cps-tooltip.directive';
+import { convertSize } from '../../utils/internal/size-utils';
+import { CpsInputComponent } from '../cps-input/cps-input.component';
 import { CpsMenuComponent } from '../cps-menu/cps-menu.component';
-import { DatePickerModule } from 'primeng/datepicker';
 
 /**
  * CpsDatepickerAppearanceType is used to define the border of the datepicker input.
@@ -226,13 +226,13 @@ export class CpsDatepickerComponent
     this.onTouched = fn;
   }
 
-  onInputValueChanged(val: string) {
-    this.stringDate = val;
+  onInputValueChanged(val: string | number) {
+    this.stringDate = String(val);
     if (!val) {
       this._updateValue(null);
       return;
     }
-    const dt = this._stringToDate(val);
+    const dt = this._stringToDate(String(val));
     if (dt) this._updateValue(dt);
   }