feat: add boolean and number transformers

adding to ng-dropdown-panel, ng-option and ng-select
ng-select · May 24, 2024 · 0b4ac58 · 0b4ac58
1 parent 185a364
commit 0b4ac58
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 33 deletions.
diff --git a/src/ng-select/lib/ng-dropdown-panel.component.ts b/src/ng-select/lib/ng-dropdown-panel.component.ts
@@ -1,5 +1,6 @@
 import { DOCUMENT } from '@angular/common';
 import {
+    booleanAttribute,
     ChangeDetectionStrategy,
     Component,
     ElementRef,
@@ -55,7 +56,7 @@ export class NgDropdownPanelComponent implements OnInit, OnChanges, OnDestroy {
     @Input() position: DropdownPosition = 'auto';
     @Input() appendTo: string;
     @Input() bufferAmount;
-    @Input() virtualScroll = false;
+    @Input({transform: booleanAttribute}) virtualScroll = false;
     @Input() headerTemplate: TemplateRef<any>;
     @Input() footerTemplate: TemplateRef<any>;
     @Input() filterValue: string = null;

diff --git a/src/ng-select/lib/ng-option.component.ts b/src/ng-select/lib/ng-option.component.ts
@@ -1,5 +1,6 @@
 import {
     AfterViewChecked,
+    booleanAttribute,
     ChangeDetectionStrategy,
     Component,
     ElementRef,
@@ -18,13 +19,10 @@ import { Subject } from 'rxjs';
 export class NgOptionComponent implements OnChanges, AfterViewChecked, OnDestroy {
 
     @Input() value: any;
-    @Input()
-    get disabled() { return this._disabled; }
-    set disabled(value: any) { this._disabled = this._isDisabled(value) }
+    @Input({transform: booleanAttribute}) disabled: boolean = false;
 
     readonly stateChange$ = new Subject<{ value: any, disabled: boolean, label?: string }>();
 
-    private _disabled = false;
     private _previousLabel: string;
 
     constructor(public elementRef: ElementRef<HTMLElement>) { }
@@ -37,7 +35,7 @@ export class NgOptionComponent implements OnChanges, AfterViewChecked, OnDestroy
         if (changes.disabled) {
             this.stateChange$.next({
                 value: this.value,
-                disabled: this._disabled
+                disabled: this.disabled
             });
         }
     }
@@ -47,7 +45,7 @@ export class NgOptionComponent implements OnChanges, AfterViewChecked, OnDestroy
             this._previousLabel = this.label;
             this.stateChange$.next({
                 value: this.value,
-                disabled: this._disabled,
+                disabled: this.disabled,
                 label: this.elementRef.nativeElement.innerHTML
             });
         }
@@ -56,8 +54,4 @@ export class NgOptionComponent implements OnChanges, AfterViewChecked, OnDestroy
     ngOnDestroy() {
         this.stateChange$.complete();
     }
-
-    private _isDisabled(value) {
-        return value != null && `${value}` !== 'false';
-    }
 }
diff --git a/src/ng-select/lib/ng-select.component.ts b/src/ng-select/lib/ng-select.component.ts
@@ -22,7 +22,9 @@ import {
     ContentChildren,
     QueryList,
     InjectionToken,
-    Attribute
+    Attribute,
+    booleanAttribute,
+    numberAttribute
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { takeUntil, startWith, tap, debounceTime, map, filter } from 'rxjs/operators';
@@ -74,7 +76,7 @@ export class NgSelectComponent implements OnDestroy, OnChanges, OnInit, AfterVie
 
     @Input() bindLabel: string;
     @Input() bindValue: string;
-    @Input() markFirst = true;
+    @Input({transform: booleanAttribute}) markFirst = true;
     @Input() placeholder: string;
     @Input() notFoundText: string;
     @Input() typeToSearchText: string;
@@ -84,36 +86,36 @@ export class NgSelectComponent implements OnDestroy, OnChanges, OnInit, AfterVie
     @Input() appearance: string;
     @Input() dropdownPosition: DropdownPosition = 'auto';
     @Input() appendTo: string;
-    @Input() loading = false;
-    @Input() closeOnSelect = true;
-    @Input() hideSelected = false;
-    @Input() selectOnTab = false;
-    @Input() openOnEnter: boolean;
-    @Input() maxSelectedItems: number;
+    @Input({transform: booleanAttribute}) loading = false;
+    @Input({transform: booleanAttribute}) closeOnSelect = true;
+    @Input({transform: booleanAttribute}) hideSelected = false;
+    @Input({transform: booleanAttribute}) selectOnTab = false;
+    @Input({transform: booleanAttribute}) openOnEnter: boolean;
+    @Input({transform: numberAttribute}) maxSelectedItems: number;
     @Input() groupBy: string | ((value: any) => any);
     @Input() groupValue: GroupValueFn;
-    @Input() bufferAmount = 4;
-    @Input() virtualScroll: boolean;
-    @Input() selectableGroup = false;
-    @Input() selectableGroupAsModel = true;
+    @Input({transform: numberAttribute}) bufferAmount = 4;
+    @Input({transform: booleanAttribute}) virtualScroll: boolean;
+    @Input({transform: booleanAttribute}) selectableGroup = false;
+    @Input({transform: booleanAttribute}) selectableGroupAsModel = true;
     @Input() searchFn = null;
     @Input() trackByFn = null;
-    @Input() clearOnBackspace = true;
+    @Input({transform: booleanAttribute}) clearOnBackspace = true;
     @Input() labelForId = null;
     @Input() inputAttrs: { [key: string]: string } = {};
-    @Input() tabIndex: number;
-    @Input() readonly = false;
-    @Input() searchWhileComposing = true;
-    @Input() minTermLength = 0;
-    @Input() editableSearchTerm = false;
+    @Input({transform: numberAttribute}) tabIndex: number;
+    @Input({transform: booleanAttribute}) readonly = false;
+    @Input({transform: booleanAttribute}) searchWhileComposing = true;
+    @Input({transform: numberAttribute}) minTermLength = 0;
+    @Input({transform: booleanAttribute}) editableSearchTerm = false;
     @Input() keyDownFn = (_: KeyboardEvent) => true;
 
     @Input() @HostBinding('class.ng-select-typeahead') typeahead: Subject<string>;
-    @Input() @HostBinding('class.ng-select-multiple') multiple = false;
+    @Input({transform: booleanAttribute}) @HostBinding('class.ng-select-multiple') multiple = false;
     @Input() @HostBinding('class.ng-select-taggable') addTag: boolean | AddTagFn = false;
-    @Input() @HostBinding('class.ng-select-searchable') searchable = true;
-    @Input() @HostBinding('class.ng-select-clearable') clearable = true;
-    @Input() @HostBinding('class.ng-select-opened') isOpen?: boolean = false;
+    @Input({transform: booleanAttribute}) @HostBinding('class.ng-select-searchable') searchable = true;
+    @Input({transform: booleanAttribute}) @HostBinding('class.ng-select-clearable') clearable = true;
+    @Input({transform: booleanAttribute}) @HostBinding('class.ng-select-opened') isOpen? = false;
 
     @Input()
     get items() { return this._items };