Merge pull request #1311 from scheduleonce/staging-app2

Merging staging-app2 in to master.

.lighthouse/jenkins-x/pullrequest.yaml

@@ -269,21 +269,21 @@ spec:
           command:
           - /bin/sh
           - -c
-          image: dockeronce.azurecr.io/cloudbees/nodejs:sonf-v20.18.1
+          image: dockeronce.azurecr.io/cloudbees/nodejs:sonf-v20.18.2
           name: install-packages
         - args:
           - npm run prettier
           command:
           - /bin/sh
           - -c
-          image: dockeronce.azurecr.io/cloudbees/nodejs:sonf-v20.18.1
+          image: dockeronce.azurecr.io/cloudbees/nodejs:sonf-v20.18.2
           name: check-prettier
         - args:
           - npm run lint
           command:
           - /bin/sh
           - -c
-          image: dockeronce.azurecr.io/cloudbees/nodejs:sonf-v20.18.1
+          image: dockeronce.azurecr.io/cloudbees/nodejs:sonf-v20.18.2
           name: check-lint
         - args:
           - export NODE_ENV="test" && npm run test

CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [8.0.36] - 2025-02-11
+
+- [ONCEHUB-91168](https://scheduleonce.atlassian.net/browse/ONCEHUB-91168) Feat: Filter field inside Drop down menu - shared component
+
 ## [8.0.35] - 2025-01-20
 
 - [ONCEHUB-92487](https://scheduleonce.atlassian.net/browse/ONCEHUB-92487) update: outdated package update

Dockerfile

@@ -1,4 +1,4 @@
-FROM dockeronce.azurecr.io/node:20.18.1-alpine3.20 AS build
+FROM dockeronce.azurecr.io/node:20.18.2-alpine3.21 AS build
 WORKDIR /app/website
 COPY . /app/website
 RUN chown root:root . 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "oncehub-ui",
-  "version": "8.0.35",
+  "version": "8.0.36",
   "scripts": {
     "ng": "ng",
     "build": "ng build ui",

ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oncehub/ui",
-  "version": "8.0.35",
+  "version": "8.0.36",
   "description": "Oncehub UI",
   "peerDependencies": {},
   "repository": {

ui/src/components/select/search/index.ts

@@ -16,6 +16,9 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { takeUntil, filter } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { OuiOption } from '../../core/option/option';
+import { OuiIconRegistry } from '../../icon/icon-registery';
+import { DomSanitizer } from '@angular/platform-browser';
+import { ICONS } from '../../core/shared/icons';
 
 @Component({
   selector: 'oui-select-search',
@@ -46,14 +49,26 @@ export class OuiSelectSearchComponent
   /** Reference to the search input field */
   @ViewChild('searchSelectInput', { read: ElementRef, static: true })
   searchSelectInput: ElementRef;
-  private _value: string;
+  public _value: string;
   private onChange: (value: any) => void = () => {};
   onTouched = () => {};
 
   constructor(
     @Inject(OuiSelect) public ouiSelect: OuiSelect,
-    @Optional() @Inject(DOCUMENT) private _document: any
-  ) {}
+    @Optional() @Inject(DOCUMENT) private _document: any,
+    private ouiIconRegistry: OuiIconRegistry,
+    private domSanitizer: DomSanitizer
+  ) {
+    this.ouiIconRegistry.addSvgIconSet(
+      this.domSanitizer.bypassSecurityTrustResourceUrl(
+        'https://cdn.icomoon.io/135790/oncehub-20/symbol-defs.svg?5df5gz'
+      )
+    );
+    this.ouiIconRegistry.addSvgIconLiteral(
+      `close-icon`,
+      this.domSanitizer.bypassSecurityTrustHtml(ICONS.CLOSE_ICON)
+    );
+  }
   registerOnChange(fn: (value: any) => void) {
     this.onChange = fn;
   }
@@ -76,7 +91,11 @@ export class OuiSelectSearchComponent
     this.initMultipleHandling();
     this.storeInitialValuesIntoPrevious();
   }
-
+  clearInput(): void {
+    this._value = null;
+    this._focus();
+    this._reset();
+  }
   private storeInitialValuesIntoPrevious() {
     this.ouiSelect._openedStream
       .pipe(

ui/src/components/select/search/option-search.html

@@ -7,6 +7,17 @@
       (input)="onInputChange($event.target.value)"
       [attr.aria-label]="ariaLabel"
       [placeholder]="placeholderLabel"
+      [ngClass]="{'right-padding': _value?.length}"
     />
+    <div class="clear-btn" *ngIf="_value?.length">
+      <button
+        title="Clear"
+        (click)="clearInput()"
+        aria-label="Clear search"
+        oui-icon-button
+      >
+        <oui-icon svgIcon="x-close-small"></oui-icon>
+      </button>
+    </div>
   </oui-form-field>
 </div>

ui/src/components/select/search/option-search.scss

@@ -23,10 +23,21 @@ $defaul-color: #c8c8c8;
     );
   }
   .oui-select-search-input {
+    &.right-padding {
+      padding-right: 28px;
+    }
     &:focus {
       border-color: $defaul-color;
     }
   }
+  .clear-btn {
+    background-color: #fff;
+    position: absolute;
+    right: 1px;
+    top: 1px;
+    height: calc(100% - 10px);
+    padding: 8px 4px 0px 4px;
+  }
 }
 .oui-select-search-panel {
   /* allow absolute positioning relative to outer options container */

ui/src/components/select/select.component.ts

@@ -1156,7 +1156,6 @@ export class OuiSelect
       this._setSelectionByValue(
         this.ngControl ? this.ngControl.value : this._value
       );
-      this.savedValues = this.ngControl ? this.ngControl.value : this._value;
       if (this.multiple) {
         this._highlightFirstFilteredOption();
       }