@sourceloop/search-element 9.0.0 → 11.0.0

package/CHANGELOG.md

@@ -0,0 +1,120 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [11.0.0](https://github.com/sourcefuse/arc-ng-components/compare/@sourceloop/search-element@10.0.0...@sourceloop/search-element@11.0.0) (2025-12-30)
+
+### Features
+
+- **deps:** angular version upgrade and converted into workspace ([#65](https://github.com/sourcefuse/arc-ng-components/issues/65)) ([54dfe07](https://github.com/sourcefuse/arc-ng-components/commit/54dfe07c3834b206d4115f7932d9220ce2c73c44)), closes [#64](https://github.com/sourcefuse/arc-ng-components/issues/64)
+
+### BREAKING CHANGES
+
+- **deps:** YES
+
+## Description
+
+This pull request introduces significant refactoring and modernization
+of the `SearchComponent` in the `search-lib` package, focusing on
+adopting Angular's new signal-based inputs/outputs, streamlining
+configuration management, and improving testability. Additionally, it
+includes workspace and dependency updates at the root level, and some
+cleanup of outdated scripts and files.
+
+# [10.0.0](https://github.com/sourcefuse/arc-ng-components/compare/@sourceloop/search-element@9.0.1...@sourceloop/search-element@10.0.0) (2025-12-11)
+
+### Features
+
+- **search-client:** add support for angular v21 ([#52](https://github.com/sourcefuse/arc-ng-components/issues/52)) ([26486e8](https://github.com/sourcefuse/arc-ng-components/commit/26486e8c683f63e37b29e7a41bb9c806f9ffc90c)), closes [#50](https://github.com/sourcefuse/arc-ng-components/issues/50)
+
+### BREAKING CHANGES
+
+- **search-client:** YES
+
+## Description
+
+This pull request upgrades the Angular dependencies for the search
+module and related packages from Angular v20 to Angular v21. It also
+updates the deprecation notice in documentation to reflect this new
+support window.
+
+## [9.0.1](https://github.com/sourcefuse/arc-ng-components/compare/@sourceloop/search-element@9.0.0...@sourceloop/search-element@9.0.1) (2025-12-10)
+
+**Note:** Version bump only for package @sourceloop/search-element
+
+# [9.0.0](https://github.com/sourcefuse/arc-ng-components/compare/@sourceloop/search-element@8.0.1...@sourceloop/search-element@9.0.0) (2025-12-09)
+
+### Features
+
+- **deps:** add support for angular v20 ([#49](https://github.com/sourcefuse/arc-ng-components/issues/49)) ([3ef0a0f](https://github.com/sourcefuse/arc-ng-components/commit/3ef0a0fdb0e3de05c1645e9e55f2de1069bfc6fe)), closes [#48](https://github.com/sourcefuse/arc-ng-components/issues/48)
+
+### BREAKING CHANGES
+
+- **deps:** YES
+
+## [8.0.1](https://github.com/sourcefuse/arc-ng-components/compare/@sourceloop/search-element@8.0.0...@sourceloop/search-element@8.0.1) (2025-12-09)
+
+**Note:** Version bump only for package @sourceloop/search-element
+
+# [8.0.0](https://github.com/sourcefuse/arc-ng-components/compare/@sourceloop/search-element@6.1.0...@sourceloop/search-element@8.0.0) (2025-12-09)
+
+### Documentation
+
+- **search-client:** update readme after upgrading to angular 17 ([#34](https://github.com/sourcefuse/arc-ng-components/issues/34)) ([2471785](https://github.com/sourcefuse/arc-ng-components/commit/247178534a7c5a4561fd54d38f19412e3b58beac)), closes [#30](https://github.com/sourcefuse/arc-ng-components/issues/30) [#30](https://github.com/sourcefuse/arc-ng-components/issues/30)
+
+### Features
+
+- **deps:** adds support for Angular 19 and migrates the component to a fully standalone structure ([#45](https://github.com/sourcefuse/arc-ng-components/issues/45)) ([8f7f7e3](https://github.com/sourcefuse/arc-ng-components/commit/8f7f7e3f46c3edefd87877bf886db7eb31716435)), closes [#42](https://github.com/sourcefuse/arc-ng-components/issues/42)
+- **sandbox:** add ai-assistant sandbox example in package ([#22](https://github.com/sourcefuse/arc-ng-components/issues/22)) ([cfa4d20](https://github.com/sourcefuse/arc-ng-components/commit/cfa4d20bc9fc4fa93dbaf31b6a68ebe9a9f326ee))
+
+### BREAKING CHANGES
+
+- **deps:** YES
+
+## Description
+
+This pull request modernizes the `@sourceloop/search-client` library and
+its example by upgrading to Angular 19, refactoring the search component
+to be standalone, and updating documentation and configuration to
+reflect these changes. The updates simplify integration for consumers
+and leverage Angular's latest features for improved modularity and
+maintainability.
+
+- **search-client:**
+
+# [7.0.0](https://github.com/sourcefuse/arc-ng-components/compare/@sourceloop/search-element@6.1.0...@sourceloop/search-element@7.0.0) (2025-07-18)
+
+### Documentation
+
+- **search-client:** update readme after upgrading to angular 17 ([#34](https://github.com/sourcefuse/arc-ng-components/issues/34)) ([2471785](https://github.com/sourcefuse/arc-ng-components/commit/247178534a7c5a4561fd54d38f19412e3b58beac)), closes [#30](https://github.com/sourcefuse/arc-ng-components/issues/30) [#30](https://github.com/sourcefuse/arc-ng-components/issues/30)
+
+### Features
+
+- **sandbox:** add ai-assistant sandbox example in package ([#22](https://github.com/sourcefuse/arc-ng-components/issues/22)) ([cfa4d20](https://github.com/sourcefuse/arc-ng-components/commit/cfa4d20bc9fc4fa93dbaf31b6a68ebe9a9f326ee))
+
+### BREAKING CHANGES
+
+- **search-client:**
+
+# [6.1.0](https://github.com/sourcefuse/arc-ng-components/compare/@sourceloop/search-element@6.0.1...@sourceloop/search-element@6.1.0) (2024-04-10)
+
+### Features
+
+- **search-client:** allow custom allLabel ([#15](https://github.com/sourcefuse/arc-ng-components/issues/15)) ([8b45291](https://github.com/sourcefuse/arc-ng-components/commit/8b4529171ea587ff2fd8c733ccd50a819491fe47)), closes [#14](https://github.com/sourcefuse/arc-ng-components/issues/14)
+
+## [6.0.1](https://github.com/sourcefuse/arc-ng-components/compare/@sourceloop/search-element@6.0.0...@sourceloop/search-element@6.0.1) (2024-01-12)
+
+### Bug Fixes
+
+- **search-client:** refactor the SCSS file in the search component to remove 'important' keyword ([#12](https://github.com/sourcefuse/arc-ng-components/issues/12)) ([1324f19](https://github.com/sourcefuse/arc-ng-components/commit/1324f194f3b3405505137d4a5919547195143175))
+
+# 6.0.0 (2023-11-28)
+
+### Features
+
+- **deps:** add support for angular v14 ([#10](https://github.com/sourcefuse/arc-ng-components/issues/10)) ([acdb006](https://github.com/sourcefuse/arc-ng-components/commit/acdb006dc782f04283d0ce7e4335781e2f5360e3)), closes [#9](https://github.com/sourcefuse/arc-ng-components/issues/9) [#9](https://github.com/sourcefuse/arc-ng-components/issues/9)
+
+### BREAKING CHANGES
+
+- **deps:** search library does not support angular v13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sourceloop/search-element",
-  "version": "9.0.0",
+  "version": "11.0.0",
   "description": "A global search element for search microservice. ",
   "main": "./search-element.js",
   "private": false,
@@ -19,6 +19,5 @@
   },
   "author": "Sourcefuse",
   "license": "MIT",
-  "hash": "adbe715646a8cbd3ab73a84fcfbb804c861817bdfd7f3d407aa86efb0aa5f0f0",
-  "gitHead": "b50931d75a9a3e6ffa57091c7f4f286ce24cde56"
+  "hash": "6dd267d252bfc75383c89775926b88227dcc444d771549ac9d72b6871f6577dc"
 }

package/LICENSE

@@ -1,21 +0,0 @@
-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/README.md

@@ -1,244 +0,0 @@
-# Search Library
-
-An Angular module that exports a component that can enable users to search over configured models using the search microservice provided in the sourceloop microservice catalog.
-
-### Deprecation Notice
-
-Search-client now supports Angular v19, we will provide support for the older version that is based on Angular v19 till 30th
-June 2026 .
-
-## Angular Module
-
-### Installation
-
-```sh
-npm i @sourceloop/search-client
-```
-
-### Usage
-
-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';
-
-@Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [SearchComponent],
-  templateUrl: './app.component.html',
-  providers: [{ provide: SEARCH_SERVICE_TOKEN, useClass: SearchService }],
-})
-export class AppComponent {}
-```
-
-### Search Service
-
-Create a new service using the Angular CLI. This service should implement ISearchService. You will have to implement searchApiRequest method which should return Observable<T[]>. Here T refers to the type of data returned from the search microservice. If you are using the default settings for the search microservice you can use IDefaultReturnType interface, else you need to pass your own return type interface.
-searchApiRequest receives two parameters - requestParameters: ISearchQuery, saveInRecents: boolean,
-
-```ts
-export interface ISearchQuery {
-  match: string;
-  limit: number | null;
-  order: string | null;
-  limitByType: boolean | null;
-  offset: number | null;
-  sources: string[] | null;
-}
-```
-
-Implementing the recentSearchApiRequest method is optional and its implementation depends on if you want recent search functionality as a part of the search suggestions dropdown
-
-### Configuration
-
-You need to provide some configuration for using the search component using its selector - '<sourceloop-search></sourceloop-search>'
-This can be provided as an Object of Configuration type as input to the component. To do so, create a property/field in your component of type Configuration<IDefaultReturnType> (IDefaultReturnType can be replaced by your own return type interface). In the constructor initialize the Configuration object with the following properties:
-
-- **displayPropertyName (keyof IDefaultReturnType/Your_Return_Type) :** This is one of the properties returned by the search microservice. It is the property whose value will be displayed in the search dropdown.
-- **models ( Array<IModel>) :** You need to provide the list of models you used in your search microservice. You also need to provide the displayName for each Model, this will be used in the search dropdown and categorize button dropdown.
-
-Apart from these there are some optional properties that you can give:
-
-- **limit (number) :** The number of results you want to display. Default value is 20.
-- **limitByType (boolean) :** Option to put limit on basis of model. Default value is false.
-- **order (Array<string>) :** Array of strings that specify the order format for the request sent to search API. Example, you want your results to be sorted on basis of name property first and then description. In this case you can give order = ["name ASC", "description DESC"]. By default order = []
-- **offset (number) :** Number of matched results to skip. Default is 0.
-- **saveInRecents (boolean) :** Option for saving the search results of the user. Default value is true.
-- **categorizeResults (boolean) :** Option for displaying results in search dropdown according to the Model they come from. Default value is true.
-- **hideRecentSearch (boolean) :** Option to provide recent search functionality. Default value is false.
-- **hideCategorizeButton (boolean) :** Option to hide the categorize button on the right of search dropdown. Default is false.
-- **saveInRecentsOnlyOnEnter (boolean) :** Option to save search query in recent searches only when user presses enter key or changes the category he/she is searching on. Default value is false.
-- **searchOnlyOnEnter (boolean) :** Option to call API to display search results only when user presses enter key. Default value is false.
-- **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
-
-```ts
-export class XComponent implements OnInit {
-  config: Configuration<IDefaultReturnType>;
-
-  constructor(private fb: FormBuilder) {
-    this.config = new Configuration<IDefaultReturnType>({
-      displayPropertyName: 'name',
-      models: [
-        {
-          name: 'ToDo',
-          displayName: 'List',
-        },
-        {
-          name: 'User',
-          displayName: 'Users',
-          imageUrl: 'https://picsum.photos/id/1/50',
-        },
-      ],
-      order: [`name ASC`, `description DESC`],
-    });
-  }
-
-  ngOnInit(): void {}
-}
-```
-
-Now in your template you can add the search library component selector like
-
-```ts
-<sourceloop-search [config]="config" [(ngModel)]="value"></sourceloop-search>
-```
-
-You can access the value in the search input using [(ngModel)]. You can also listen to clicked and searched events.
-Clicked event is of type ItemClickedEvent. It is emitted when user clicks one of the suggested results. Searched event is emitted when request is made to the api when user types and relevant suggestinons are displayed. It is of type RecentSearchEvent.
-
-```ts
-type ItemClickedEvent<T> = {
-  event: MouseEvent;
-  item: T;
-};
-
-type RecentSearchEvent = {
-  event: KeyboardEvent | Event;
-  keyword: string;
-  category: 'All' | IModel;
-};
-```
-
-```html
-<sourceloop-search
-  [config]="config"
-  [(ngModel)]="value"
-  (clicked)="logItemClickedEvent($event)"
-  (searched)="logRecentSearchEvent($event)"
-  disabled="false"
-></sourceloop-search>
-```
-
-### Icons
-
-To use the default icons you will have to import the following in your styles.scss:
-
-```
-@import '../node_modules/@sourceloop/search-client/assets/icomoon/style.css';
-```
-
-You can also choose to use your own icons by providing classes for icons in the configuration.
-
-## 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.
-
-### Installation
-
-```sh
-npm i @sourceloop/search-client
-```
-
-In the node modules you can find two files relevant to the element - `element/search-element.js` and `element/style.css`. How you serve and include these files in your non Angular project depend on the framework that you are using. For example, for Vanilla JS and HTML you can simply import the js and styles in your HTML ->
-
-```html
-<script type="text/javascript" src="search-element.js"></script>
-```
-
-### Usage
-
-The web component accepts all the same inputs and services as the regular Angular Module, but instead of passing them through bindings and DI, you pass them as properties of the element as shown below.
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    ...
-    <link rel="stylesheet" href="assets/icomoon/style.css" />
-    <link rel="stylesheet" href="styles.css" />
-    ...
-  </head>
-  <body>
-    <sourceloop-search-element></sourceloop-search-element>
-    <script type="text/javascript" src="search-element.js"></script>
-    <script>
-      document.addEventListener('DOMContentLoaded', () => {
-        const element = document.querySelector('sourceloop-search-element');
-        // Code to set inputs of the component
-        element.searchProvider = {
-          searchApiRequestWithPromise: () =>
-            Promise.resolve([
-              {
-                name: 'Test',
-                description: 'Test',
-                rank: 0.4,
-                source: 'ToDo',
-              },
-              {
-                name: 'Akshat',
-                description: 'Dubey',
-                rank: 0.4,
-                source: 'User',
-              },
-            ]),
-          recentSearchApiRequestWithPromise: () => Promise.resolve([]),
-        };
-        element.config = new SearchConfiguration({
-          displayPropertyName: 'name',
-          models: [
-            {
-              name: 'ToDo',
-              displayName: 'List',
-              imageUrl: 'https://picsum.photos/id/1000/50',
-            },
-            {
-              name: 'User',
-              displayName: 'Users',
-              imageUrl: 'https://picsum.photos/id/1/50',
-            },
-          ],
-          order: [`name ASC`, `description DESC`],
-          hideCategorizeButton: false,
-          placeholder: 'Search Programs, Projects or Dashboards',
-          categorizeResults: true,
-          saveInRecents: true,
-          limit: 4,
-        });
-      });
-    </script>
-  </body>
-</html>
-```
-
-Note that the instance of `SearchService` passed to the element is following a different interface -
-
-```ts
-export interface ISearchServiceWithPromises<T extends IReturnType> {
-  searchApiRequestWithPromise(
-    requestParameters: ISearchQuery,
-    saveInRecents: boolean,
-  ): Promise<T[]>;
-  recentSearchApiRequestWithPromise?(): Promise<ISearchQuery[]>;
-}
-```
-
-This facilitates the use of the `Web Component` without relying on [rxjs](https://rxjs.dev/). You can still use the `Observable` based service if you want by importing the rxjs library manually.