Add filter select component (#1061)

* Implement filter-select component

* Update examples page

* Update docs

* Fix initial state

* Update changelog

* Fix lint issue

* Fix lint issue

* Fix border radius

* Update version

Author: marjan-georgiev

package.json

@@ -34,6 +34,7 @@
     "deploy": "angular-cli-ghpages --dir ./dist/ngx-ui --name=Swimlane --email=developer@swimlane.com",
     "prepublish:lib": "npm run package",
     "publish:lib": "npm publish ./dist/swimlane/ngx-ui --ignore-scripts",
+    "publish:lib:beta": "npm publish ./dist/swimlane/ngx-ui --ignore-scripts --tag beta",
     "prepack": "npm run package",
     "pack": "npm pack ./dist/swimlane/ngx-ui",
     "prepare": "husky install"

projects/swimlane/ngx-ui/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## HEAD (unreleased)
 
+## 48.2.0 (2024-12-17)
+
+- Feature (`ngx-filter-select`): Added a new filter select component
+
 ## 48.1.0 (2024-12-03)
 
 - Feature (`ngx-tooltip`): Added new ShowTypes 'click' which can open/close the popover when clicking the component

projects/swimlane/ngx-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swimlane/ngx-ui",
-  "version": "48.1.0",
+  "version": "48.2.0",
   "engines": {
     "node": ">=18.0.0"
   },

projects/swimlane/ngx-ui/src/lib/components/filter/filter-select.component.html

@@ -0,0 +1,61 @@
+<div class="ngx-select-wrap">
+  <div class="ngx-select-flex-wrap" [style.min-width]="autosize ? autosizeMinWidth : undefined">
+    <div class="ngx-select-flex-wrap-inner">
+      <div class="ngx-chip" (click)="onToggle()" [class.has-controls]="hasControls">
+        <div class="ngx-chip__contents">
+          <span *ngIf="label" class="ngx-chip-label"> {{ label }}: </span>
+
+          <span class="ngx-chip-value">
+            <span *ngIf="!value?.length">{{ placeholder }} </span>
+            <span *ngIf="value?.length > 1">{{ value.length }} Selected</span>
+            <span *ngIf="value?.length === 1" [innerHTML]="selection"></span>
+          </span>
+        </div>
+
+        <div class="ngx-chip__controls" *ngIf="hasControls">
+          <button
+            type="button"
+            *ngIf="clearVisible"
+            title="Clear Selections"
+            aria-label="Clear Selections"
+            class="ngx-chip-clear"
+            (click)="onClear()"
+          >
+            <i class="ngx-icon ngx-x"></i>
+          </button>
+          <button type="button" *ngIf="caretVisible" aria-label="Toggle Dropdown" class="ngx-chip-caret">
+            <i class="ngx-icon ngx-chevron-bold-down"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <ngx-select-dropdown
+    *ngIf="dropdownVisible"
+    [focusIndex]="focusIndex"
+    [filterQuery]="filterQuery"
+    [filterPlaceholder]="filterPlaceholder"
+    [filterCaseSensitive]="filterCaseSensitive"
+    [allowAdditions]="false"
+    [showSelectAll]="multiple && showSelectAll"
+    [selected]="value"
+    [groupBy]="groupBy"
+    [groupByTemplate]="groupByTemplate"
+    [emptyPlaceholder]="emptyPlaceholder"
+    [tagging]="false"
+    [filterEmptyPlaceholder]="filterEmptyPlaceholder"
+    [filterable]="filterable"
+    [identifier]="identifier"
+    [options]="options"
+    (keyup)="keyup.emit($event)"
+    (close)="onClose()"
+    (clearQueryFilter)="clearQueryFilter.emit()"
+    (selection)="onDropdownSelection($event)"
+    (selectAll)="onSelectAll()"
+    (deselection)="onDropdownDeselection($event)"
+    (keyboardSelection)="onDropdownSelection($event, false)"
+    (keyboardDeselection)="onDropdownDeselection($event, false)"
+  >
+  </ngx-select-dropdown>
+</div>