Fixed styling for Search input control.

src/search/search.design.module.ts

@@ -17,15 +17,15 @@ export class SearchDesignModule implements IInjectorModule {
 
         const widgetService = injector.resolve<IWidgetService>("widgetService");
 
-        widgetService.registerWidget("search", {
+        widgetService.registerWidget("input:search", {
             modelDefinition: SearchInputModel,
             componentBinder: KnockoutComponentBinder,
             componentDefinition: SearchViewModel,
             modelBinder: SearchModelBinder,
             viewModelBinder: SearchViewModelBinder
         });
 
-        widgetService.registerWidgetEditor("search", {
+        widgetService.registerWidgetEditor("input:search", {
             displayName: "Search",
             iconClass: "widget-icon widget-icon-search-box",
             componentBinder: KnockoutComponentBinder,

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;
+}

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;