@sourceloop/search-element 8.1.0 → 8.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [2023] [SourceFuse]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/{dist/README.md → 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,45 @@ 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.
+
+### 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 `component.scss` ```scss
+
+// Customize component colors
+
+:host ::ng-deep sourceloop-search {
+  --search-border-hover: #5c26f1 !important;
+  --search-border-focus: #5c26f1 !important;
+  --search-dropdown-background: #5c26f2 !important;
+}
+````
+
+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": "8.1.0",
+  "version": "8.2.0",
   "description": "A global search element for search microservice. ",
   "main": "./search-element.js",
   "private": false,
@@ -19,5 +19,6 @@
   },
   "author": "Sourcefuse",
   "license": "MIT",
-  "hash": "046c911416e7350e4b96c2eff7d6bdf4b9c27db569ec74fedd5501c9a890ca86"
-}
+  "hash": "87fb4982242cfb0161a93476898886eb78a1242b4d50619ccfcffdaabb95a622",
+  "gitHead": "afc109afbd7163fdfb98b49fc6f2633fee8bf2e1"
+}