@sourceloop/search-element 9.0.1 → 9.0.3

package/README.md

@@ -19,16 +19,16 @@ npm i @sourceloop/search-client
 Create a new Application using Angular CLI and import the `SearchComponent` in your application.SearchComponent is now a standalone component, so no NgModule is required.Also create a new service that implements the ISearchService interface exported by the search library. This service will be used by the exported component to make API calls whenever needed. You will have to update the providers section of your module with { provide: SEARCH_SERVICE_TOKEN, useExisting: Your_Service_Name }
 
 ```ts
-import { Component } from '@angular/core';
-import { SearchComponent, SEARCH_SERVICE_TOKEN } from '@sourceloop/search-client';
-import { SearchService } from './search.service';
+import {Component} from '@angular/core';
+import {SearchComponent, SEARCH_SERVICE_TOKEN} from '@sourceloop/search-client';
+import {SearchService} from './search.service';
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [SearchComponent],
   templateUrl: './app.component.html',
-  providers: [{ provide: SEARCH_SERVICE_TOKEN, useClass: SearchService }],
+  providers: [{provide: SEARCH_SERVICE_TOKEN, useClass: SearchService}],
 })
 export class AppComponent {}
 ```
@@ -74,7 +74,6 @@ Apart from these there are some optional properties that you can give:
 - **noResultMessage (string) :** Message to display in dropdown incase no matching result found.
 - **searchIconClass (string) :** Can be used to give custom icon for search in search bar.
 - **crossIconClass (string) :** Can be used to give custom icon for clearing text input in search bar.
-- **dropDownButtonIconClass (string) :** Can be used to give custom icon for category drop down button.
 - **recentSearchIconClass (string) :** Can be used to give custom icon for recent searches displayed in the search dropdown.
 
 Your component might look something like
@@ -147,6 +146,64 @@ To use the default icons you will have to import the following in your styles.sc
 
 You can also choose to use your own icons by providing classes for icons in the configuration.
 
+### Required Global Styles
+
+The search component uses Angular CDK overlays for the dropdown, which require global styles to function properly. **You must import the library's stylesheet in your application:**
+
+#### Option 1: Import in your `styles.scss`
+
+```scss
+@import '@sourceloop/search-client/styles';
+```
+
+#### Option 2: Add to `angular.json`
+
+```json
+"styles": [
+  "node_modules/@sourceloop/search-client/styles.scss",
+  "src/styles.scss"
+]
+```
+
+### Styling and Theming
+
+The search component uses CSS custom properties (CSS variables) for theming, allowing you to customize colors without modifying the library code. You can override these variables in your application's global styles or in a component-specific stylesheet.
+
+#### Available CSS Variables
+
+````scss
+sourceloop-search {
+  --search-background: #f7f7f7; /* Background of the search container */
+  --search-input-background: #f1f3f4; /* Background of the input field */
+  --search-input-text-color: #6b6b6b; /* Text color in the input field */
+  --search-border-hover: #a53159; /* Border color on hover */
+  --search-border-focus: #90003b; /* Border color when focused */
+  --search-dropdown-background: #90003b; /* Background of the category dropdown (on hover/focus) */
+  --search-dropdown-text-color: #ffffff; /* Text color in the category dropdown (on hover/focus) */
+  --search-highlight-bg: #fee8e8; /* Background color for highlighted suggestions */
+  --search-heading-color: #9c9c9c; /* Color of category headings */
+  --search-text-color: #333; /* General text color */
+  --search-icon-color: #33333380; /* Color of icons */
+}
+
+#### Example: Custom Theming
+
+To customize the search component, add the following to your `styles.scss` (after importing the library styles):
+
+```scss
+@import '@sourceloop/search-client/styles';
+
+// Customize component colors
+sourceloop-search {
+  --search-dropdown-background: #0056b3;
+  --search-dropdown-text-color: #ffffff;
+  --search-border-hover: #0056b3;
+  --search-border-focus: #003d82;
+}
+````
+
+This allows you to match the search component's appearance with your application's design system.
+
 ## Web Component
 
 This library is also available as a [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) so users of frameworks like React and Vue can also integrate this search element in their application with minimal effort.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sourceloop/search-element",
-  "version": "9.0.1",
+  "version": "9.0.3",
   "description": "A global search element for search microservice. ",
   "main": "./search-element.js",
   "private": false,
@@ -19,6 +19,6 @@
   },
   "author": "Sourcefuse",
   "license": "MIT",
-  "hash": "64ee416c86311c1bde0e03af55684dba28460131cc5aca311b1eb40373ca561e",
-  "gitHead": "3717ce9eaadaae6b78c932d3a9b54a0cd3ea8ef5"
+  "hash": "aaf134d1e02bc76d8e7158110c231c475142d2c8f091f831e43bcca14942a1cb",
+  "gitHead": "83f068c4ac6a36c7b71a89543b75beb5f3a6a17d"
 }