From 315c4359ac2dae45dc72eb6c08d030e677786d99 Mon Sep 17 00:00:00 2001
From: Alexander Zaslonov <zaslonov.alexander@gmail.com>
Date: Sat, 21 Sep 2024 18:21:01 -0700
Subject: [PATCH] Fixed styling for Search input control.

---
 src/search/search.design.module.ts |  4 ++--
 src/search/searchContract.ts       | 18 +++++++++++++++++-
 src/search/searchModelBinder.ts    | 18 +++++++++++++-----
 3 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/search/search.design.module.ts b/src/search/search.design.module.ts
index edeedb636..76ad3541e 100644
--- a/src/search/search.design.module.ts
+++ b/src/search/search.design.module.ts
@@ -17,7 +17,7 @@ export class SearchDesignModule implements IInjectorModule {
 
         const widgetService = injector.resolve<IWidgetService>("widgetService");
 
-        widgetService.registerWidget("search", {
+        widgetService.registerWidget("input:search", {
             modelDefinition: SearchInputModel,
             componentBinder: KnockoutComponentBinder,
             componentDefinition: SearchViewModel,
@@ -25,7 +25,7 @@ export class SearchDesignModule implements IInjectorModule {
             viewModelBinder: SearchViewModelBinder
         });
 
-        widgetService.registerWidgetEditor("search", {
+        widgetService.registerWidgetEditor("input:search", {
             displayName: "Search",
             iconClass: "widget-icon widget-icon-search-box",
             componentBinder: KnockoutComponentBinder,
diff --git a/src/search/searchContract.ts b/src/search/searchContract.ts
index 21e483e8b..facff4616 100644
--- a/src/search/searchContract.ts
+++ b/src/search/searchContract.ts
@@ -1,3 +1,19 @@
 import { Contract } from "@paperbits/common";
+import { LocalStyles } from "@paperbits/common/styles";
 
-export interface SearchContract extends Contract { }
+export interface SearchContract extends Contract {
+    /**
+     * Text input label.
+     */
+    label: string;
+
+    /**
+     * Text input placeholder.
+     */
+    placeholder: string;
+
+    /**
+     * Text input local styles.
+     */
+    styles?: LocalStyles;
+}
diff --git a/src/search/searchModelBinder.ts b/src/search/searchModelBinder.ts
index ad5932349..66aefd873 100644
--- a/src/search/searchModelBinder.ts
+++ b/src/search/searchModelBinder.ts
@@ -11,20 +11,28 @@ export class SearchModelBinder implements IModelBinder<SearchInputModel> {
     }
 
     public canHandleContract(contract: Contract): boolean {
-        return contract.type === "search";
+        return contract.type === "input:search";
     }
 
     public canHandleModel(model: Object): boolean {
         return model instanceof SearchInputModel;
     }
 
-    public async contractToModel(searchContract: SearchContract): Promise<SearchInputModel> {
-        return new SearchInputModel();
+    public async contractToModel(contract: SearchContract): Promise<SearchInputModel> {
+        const model = new SearchInputModel();
+        model.label = contract.label;
+        model.placeholder = contract.placeholder;
+        model.styles = contract.styles || { appearance: "components/formGroup/default" };
+
+        return model;
     }
 
-    public modelToContract(searchModel: SearchInputModel): Contract {
+    public modelToContract(model: SearchInputModel): Contract {
         const searchConfig: SearchContract = {
-            type: "search"
+            type: "input:search",
+            placeholder: model.placeholder,
+            label: model.label,
+            styles: model.styles
         };
 
         return searchConfig;