@sourceloop/search-client 9.0.1 → 11.0.0

package/.prettierignore

@@ -0,0 +1,2 @@
+dist
+*.json

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "bracketSpacing": false,
+  "singleQuote": true,
+  "printWidth": 80,
+  "trailingComma": "all",
+  "arrowParens": "avoid"
+}

package/CHANGELOG.md

@@ -0,0 +1,123 @@
+# 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-client@10.0.0...@sourceloop/search-client@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-client@9.0.1...@sourceloop/search-client@10.0.0) (2025-12-11)
+
+### Bug Fixes
+
+- **sandbox:** version upgrade ([ca924ed](https://github.com/sourcefuse/arc-ng-components/commit/ca924edbaf68c53675728c8edad8d1c60f299013))
+
+### 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-client@9.0.0...@sourceloop/search-client@9.0.1) (2025-12-10)
+
+**Note:** Version bump only for package @sourceloop/search-client
+
+# [9.0.0](https://github.com/sourcefuse/arc-ng-components/compare/@sourceloop/search-client@8.0.1...@sourceloop/search-client@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-client@8.0.0...@sourceloop/search-client@8.0.1) (2025-12-09)
+
+**Note:** Version bump only for package @sourceloop/search-client
+
+# [8.0.0](https://github.com/sourcefuse/arc-ng-components/compare/@sourceloop/search-client@6.1.0...@sourceloop/search-client@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)
+
+### 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.1](https://github.com/sourcefuse/arc-ng-components/compare/@sourceloop/search-client@7.0.0...@sourceloop/search-client@7.0.1) (2025-07-21)
+
+**Note:** Version bump only for package @sourceloop/search-client
+
+# [7.0.0](https://github.com/sourcefuse/arc-ng-components/compare/@sourceloop/search-client@6.1.0...@sourceloop/search-client@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)
+
+### BREAKING CHANGES
+
+- **search-client:**
+
+# [6.1.0](https://github.com/sourcefuse/arc-ng-components/compare/@sourceloop/search-client@6.0.1...@sourceloop/search-client@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-client@6.0.0...@sourceloop/search-client@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/README.md

@@ -2,9 +2,32 @@
 
 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 v20, we will provide support for the older version that is based on Angular v19 till 30th June 2026 .
+### Angular Version Compatibility
+
+To ensure smooth integration, install the Search Library version that corresponds to your Angular version:
+
+<table border="1" cellpadding="8" style="border-collapse: collapse; width: 100%; text-align: left;">
+  <thead>
+    <tr>
+      <th>Angular Version</th>
+      <th>Compatible Search-Client Version</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Angular v19</td>
+      <td>@sourceloop/search-client v8.x</td>
+    </tr>
+    <tr>
+      <td>Angular v20</td>
+      <td>@sourceloop/search-client v9.x</td>
+    </tr>
+    <tr>
+      <td>Angular v21+</td>
+      <td>Latest version (v10.x and above)</td>
+    </tr>
+  </tbody>
+</table>
 
 ## Angular Module
 

package/bundle-element.ts

@@ -0,0 +1,42 @@
+import * as crypto from 'crypto';
+import {ensureDir, readFileSync, writeFileSync} from 'fs-extra';
+import {copyFile, rm} from 'fs/promises';
+const concat = require('concat');
+
+async function elementsBundler() {
+  const space = 2;
+  const files = [
+    './dist/search-element/runtime.js',
+    './dist/search-element/polyfills.js',
+    './dist/search-element/main.js',
+  ];
+
+  await ensureDir('../search-element/dist');
+  await concat(files, '../search-element/dist/search-element.js');
+  await copyFile(
+    './dist/search-element/styles.css',
+    '../search-element/dist/styles.css',
+  );
+  await copyFile('./dist/README.md', '../search-element/dist/README.md');
+  await rm('./dist/search-element', {recursive: true});
+
+  // generate the hash of element file to keep a track of the chnages
+  // whenever any changes are made in the element the corresponding js file will
+  // resulting in changing its hash, so the element will also be published
+
+  const file = '../search-element/dist/search-element.js';
+  const data = readFileSync(file);
+  const hash = crypto.createHash('sha256');
+  hash.update(new Uint8Array(data));
+
+  const fileHash = hash.digest('hex');
+
+  //update the package.json with the new hashCode
+  //if there will be changes in hash then the element will also be published
+  const packageJsonPath = '../search-element/package.json';
+  const jsonObj = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+  jsonObj.hash = fileHash;
+  writeFileSync(packageJsonPath, JSON.stringify(jsonObj, null, space));
+}
+
+elementsBundler();

package/karma.conf.js

@@ -0,0 +1,56 @@
+// sonarignore:start
+module.exports = function (config) {
+  const isCI = !!process.env.CI;
+
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma'),
+    ],
+
+    client: {
+      jasmine: {},
+      clearContext: false,
+    },
+
+    jasmineHtmlReporter: {
+      suppressAll: true,
+    },
+
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/my-lib'),
+      subdir: '.',
+      reporters: [{type: 'html'}, {type: 'text-summary'}],
+    },
+
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+
+    autoWatch: !isCI,
+    singleRun: isCI,
+    restartOnFileChange: !isCI,
+
+    browsers: isCI ? ['ChromeHeadlessCI'] : ['Chrome'],
+
+    customLaunchers: {
+      ChromeHeadlessCI: {
+        base: 'ChromeHeadless',
+        flags: [
+          '--no-sandbox',
+          '--disable-gpu',
+          '--disable-dev-shm-usage',
+          '--disable-setuid-sandbox',
+          '--headless=new',
+        ],
+      },
+    },
+  });
+};
+// sonarignore:end

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "dist",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,26 +1,40 @@
 {
   "name": "@sourceloop/search-client",
-  "version": "9.0.1",
+  "version": "11.0.0",
   "description": "A global search component for search microservice.",
   "peerDependencies": {
-    "@angular/animations": "^20.0.3",
-    "@angular/cdk": "^20.0.3",
-    "@angular/common": "^20.0.3",
-    "@angular/compiler": "^20.0.3",
-    "@angular/core": "^20.0.3",
-    "@angular/elements": "^20.0.3",
+    "@angular/animations": "^21.0.3",
+    "@angular/cdk": "^21.0.2",
+    "@angular/common": "^21.0.3",
+    "@angular/compiler": "^21.0.3",
+    "@angular/core": "^21.0.3",
+    "@angular/elements": "^21.0.3",
     "@angular/flex-layout": "~15.0.0-beta.42",
-    "@angular/forms": "^20.0.3",
-    "@angular/material": "^20.0.3",
-    "@angular/platform-browser": "^20.0.3",
-    "@angular/platform-browser-dynamic": "^20.0.3",
-    "@angular/router": "^20.0.3",
+    "@angular/forms": "^21.0.3",
+    "@angular/material": "^21.0.2",
+    "@angular/platform-browser": "^21.0.3",
+    "@angular/platform-browser-dynamic": "^21.0.3",
+    "@angular/router": "^21.0.3",
     "rxjs": "~7.8.1",
     "zone.js": "^0.15.0"
   },
+  "scripts": {
+    "libraryBuild": "npx ng build search-lib && cp -r src/assets dist/assets",
+    "elementBuild": "npx ng build search-element",
+    "postbuild": "ts-node bundle-element.ts",
+    "build": "npm run libraryBuild && npm run elementBuild",
+    "prepublishOnly": "npm run build",
+    "pretest": "npm run build",
+    "test": "ng test"
+  },
   "dependencies": {
     "tslib": "^2.2.0"
   },
+  "devDependencies": {
+    "@angular/elements": "^21.0.3",
+    "@types/fs-extra": "^11.0.1",
+    "ng-packagr": "^21.0.0"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/sourcefuse/arc-ng-components",
@@ -33,18 +47,5 @@
   },
   "author": "Sourcefuse",
   "license": "MIT",
-  "private": false,
-  "gitHead": "3717ce9eaadaae6b78c932d3a9b54a0cd3ea8ef5",
-  "module": "fesm2022/sourceloop-search-client.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/sourceloop-search-client.mjs"
-    }
-  },
-  "sideEffects": false
-}
+  "private": false
+}

package/src/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>SearchElement</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+</body>
+</html>

package/src/lib/lib-configuration.ts

@@ -0,0 +1,112 @@
+// Copyright (c) 2023 Sourcefuse Technologies
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+import {IDefaultReturnType, IModel} from './types';
+export class Configuration<T = IDefaultReturnType> {
+  /** property to be displayed in the results */
+  displayPropertyName: keyof T;
+  /** list of model configuration to be render and categorize search results */
+  models: IModel[];
+  /** max number of results (based on limitByType option) */
+  limit?: number;
+  /** apply limit on individual models, or on overall results */
+  limitByType?: boolean;
+  /** apply a particular ordering on results */
+  order?: string[];
+  /** offset for results in case limit is used */
+  offset?: number;
+  /** save the search query in recent history */
+  saveInRecents?: boolean;
+  /** a placeholder to display in the search box */
+  placeholder?: string;
+  /** a function to generate placeholder, overrides the placeholder property */
+  placeholderFunction?: (input: string, category: string) => string;
+  /** categorize results on the basis of models provided */
+  categorizeResults?: boolean;
+  /** hides the recent search list */
+  hideRecentSearch?: boolean;
+  /** hide the category selection button */
+  hideCategorizeButton?: boolean;
+  /** save value in recent search only on enter or change in category,
+   *  if false, also saved on typing */
+  saveInRecentsOnlyOnEnter?: boolean;
+  /** search only on enter key or when category is changed */
+  searchOnlyOnEnter?: boolean;
+  noResultMessage?: string;
+  searchIconClass?: string;
+  crossIconClass?: string;
+  dropDownButtonIconClass?: string;
+  recentSearchIconClass?: string;
+
+  constructor(d: Configuration<T>) {
+    checkForError(d);
+    this.displayPropertyName = d.displayPropertyName;
+    this.models = d.models;
+
+    /* IRequestParameters - will be given default values before call is made in case undefined/null,
+    otherwise there ! is used on which sonar gives code smell */
+    this.limit = d.limit;
+    this.limitByType = d.limitByType;
+    this.order = d.order;
+    this.offset = d.offset;
+    this.saveInRecents = d.saveInRecents;
+
+    const displayTexts = setDisplayText(d);
+    this.noResultMessage = displayTexts.noResultMessage;
+    this.placeholder = displayTexts.placeholder;
+    this.placeholderFunction = displayTexts.placeholderFunction;
+
+    const searchConfig = setSearchConfig(d);
+    this.categorizeResults = searchConfig.categorizeResults;
+    this.hideRecentSearch = searchConfig.hideRecentSearch;
+    this.hideCategorizeButton = searchConfig.hideCategorizeButton;
+    this.saveInRecentsOnlyOnEnter = searchConfig.saveInRecentsOnlyOnEnter;
+    this.searchOnlyOnEnter = searchConfig.searchOnlyOnEnter;
+
+    const classes = setIconClasses(d);
+    this.searchIconClass = classes.searchIconClass;
+    this.crossIconClass = classes.crossIconClass;
+    this.dropDownButtonIconClass = classes.dropDownButtonIconClass;
+    this.recentSearchIconClass = classes.recentSearchIconClass;
+  }
+}
+function checkForError<T>(d: Configuration<T>) {
+  if (
+    d.categorizeResults === false &&
+    (d.hideCategorizeButton === false || d.hideCategorizeButton === undefined)
+  ) {
+    throw new Error(
+      'You must provide hideCategorizeButton:true as categorizeResults is false',
+    );
+  }
+  if (d.saveInRecents === false && d.saveInRecentsOnlyOnEnter === true) {
+    throw new Error(
+      'You must provide saveInRecents:true for saveInRecentsOnlyOnEnter:true',
+    );
+  }
+}
+function setDisplayText<T>(d: Configuration<T>) {
+  return {
+    placeholder: d.placeholder ?? 'Search',
+    noResultMessage: d.noResultMessage ?? 'No result found',
+    placeholderFunction: d.placeholderFunction,
+  };
+}
+function setSearchConfig<T>(d: Configuration<T>) {
+  return {
+    categorizeResults: d.categorizeResults ?? true,
+    hideRecentSearch: d.hideRecentSearch ?? false,
+    hideCategorizeButton: d.hideCategorizeButton ?? false,
+    saveInRecentsOnlyOnEnter: d.saveInRecentsOnlyOnEnter ?? false,
+    searchOnlyOnEnter: d.searchOnlyOnEnter ?? false,
+  };
+}
+function setIconClasses<T>(d: Configuration<T>) {
+  return {
+    searchIconClass: d.searchIconClass ?? 'icomoon Search',
+    crossIconClass: d.crossIconClass ?? 'icomoon close',
+    dropDownButtonIconClass: d.dropDownButtonIconClass ?? 'icomoon arrow_down',
+    recentSearchIconClass: d.recentSearchIconClass ?? 'icomoon Search',
+  };
+}

package/src/lib/search/mocks/search.component.mock.ts

@@ -0,0 +1,117 @@
+import {Configuration} from '../../lib-configuration';
+import {
+  IModel,
+  IReturnType,
+  ISearchQuery,
+  ISearchService,
+  TypeEvent,
+} from '../../types';
+export const Imodel: IModel = {
+  name: 'ToDo',
+  displayName: 'List',
+};
+export const IReturnMockValue: IReturnType[] = [
+  {
+    rank: 1,
+    source: '',
+  },
+];
+export interface MockIReturnType {
+  rank: number;
+  source: string;
+}
+export const mockIModel: IModel = {
+  name: 'User',
+  displayName: 'Users',
+};
+export const mockConfig: Configuration<MockIReturnType> = {
+  displayPropertyName: 'source',
+  models: [
+    {
+      name: 'ToDo',
+      displayName: 'List',
+      imageUrl: 'https://picsum.photos/id/1/50',
+    },
+    {
+      name: 'User',
+      displayName: 'Users',
+    },
+  ],
+  limit: 20,
+  limitByType: false,
+  order: [`name ASC`, `description DESC`],
+  offset: 0,
+  saveInRecents: true,
+  placeholder: '',
+  //placeholderFunction: (input: string, category: string) =>{},
+  categorizeResults: true,
+  hideRecentSearch: false,
+  hideCategorizeButton: false,
+  saveInRecentsOnlyOnEnter: true,
+  searchOnlyOnEnter: true,
+  noResultMessage: '',
+  searchIconClass: '',
+  crossIconClass: '',
+  dropDownButtonIconClass: '',
+  recentSearchIconClass: '',
+};
+export const ISearchMockValue: ISearchQuery[] = [
+  {
+    match: 'user',
+    limit: 10,
+    order: '',
+    limitByType: false,
+    offset: 2,
+    sources: [],
+  },
+];
+export class MockSearchService implements ISearchService<IReturnType> {
+  searchApiRequest = jasmine.createSpy();
+  recentSearchApiRequest = jasmine.createSpy();
+}
+
+export const mockCategory = ['User'];
+export function mockFunction(): void {
+  // This is intentional
+}
+
+export function mockOnChange(_mockValue: string | undefined): void {
+  // This is intentional
+}
+export const mockSuggestionUrl: IReturnType = {
+  rank: 1,
+  source: 'ToDo',
+};
+export const mockSuggestion: IReturnType = {
+  rank: 1,
+  source: 'User',
+};
+export const mockSuggestionForModel: IReturnType = {
+  rank: 1,
+  source: '',
+};
+export const mockEvent: TypeEvent = {
+  input: 'User',
+};
+export const url = 'https://picsum.photos/id/1/50';
+export const value = '';
+export const emittedValue = {
+  input: 'User',
+  event: new KeyboardEvent('click', {
+    key: 'Enter',
+  }),
+};
+export const recentSearch: ISearchQuery = {
+  match: 'user',
+  limit: 10,
+  order: '',
+  limitByType: false,
+  offset: 2,
+  sources: [],
+};
+export function mockDisabledState(_disable: boolean): void {
+  // This is intentional
+}
+export const mockNoEvent: TypeEvent = {
+  input: '',
+};

package/src/lib/search/promise-api-adapter.service.ts

@@ -0,0 +1,31 @@
+import {Injectable} from '@angular/core';
+import {from} from 'rxjs';
+import {
+  IReturnType,
+  ISearchService,
+  ISearchServiceWithPromises,
+} from '../types';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PromiseApiAdapterService<T extends IReturnType> {
+  adapt(instance: ISearchServiceWithPromises<T>): ISearchService<T> {
+    // this is a workaround for the fact that the recentSearchApiRequestWithPromise
+    // method is optional in the ISearchServiceWithPromises interface
+    // and type system is not able maintain the type information of a property
+    const recentSearchMethod = instance.recentSearchApiRequestWithPromise;
+    return {
+      searchApiRequest: (requestParameters, saveInRecents) =>
+        from(
+          instance.searchApiRequestWithPromise(
+            requestParameters,
+            saveInRecents,
+          ),
+        ),
+      ...(recentSearchMethod && {
+        recentSearchApiRequest: () => from(recentSearchMethod()),
+      }),
+    };
+  }
+}