ngx-dropdown-list 1.2.0 → 21.0.2

package/{fesm2020 → fesm2022}/ngx-dropdown-list.mjs

@@ -1,313 +1,326 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, ElementRef, Component, ViewChild, Input, Output, NgModule } from '@angular/core';
+import { EventEmitter, ElementRef, Output, Input, ViewChild, Component } from '@angular/core';
 import * as i1 from '@angular/common';
-import { DecimalPipe, CommonModule } from '@angular/common';
+import { CommonModule, DecimalPipe } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
-/**
- * check whether the provided items contains group
- */
-function hasGroup(items) {
-    return items ? (items.find(item => item.group) != null) : false;
-}
-/**
- * clear all selections from the provide items.
- * @param items the dropdown items, can be group or item
- */
-function clearAllSelection(items) {
-    if (hasGroup(items)) {
-        for (const groupItem of items) {
-            if (groupItem.items) {
-                groupItem.items.filter(item => item.selected).forEach(item => item.selected = false);
-            }
-        }
-    }
-    else {
-        // clear the selection of previous selected item
-        items.filter(item => item.selected).forEach(item => item.selected = false);
-    }
-}
-/**
- * stop all propagation and default actions
- */
-function stopPropagationAndDefault(event) {
-    event.stopImmediatePropagation();
-    event.stopPropagation();
-    event.preventDefault();
-}
-/**
- * check whether the provided value is number of not
- */
-function isNumber(value) {
-    return !(value == null || isNaN(value) || value.length === 0);
-}
-/**
- * get the selected item from the items list (including item and group)
- */
-function getFirstSelectedItem(items) {
-    if (!items) {
-        return undefined;
-    }
-    let selectedItem;
-    if (hasGroup(items)) {
-        for (const item of items) {
-            selectedItem = item.items ? item.items.find(subItem => subItem.selected) : undefined;
-            if (selectedItem) {
-                break;
-            }
-        }
-    }
-    else {
-        selectedItem = items ? items.find(item => item.selected) : undefined;
-    }
-    return selectedItem;
+/**
+ * check whether the provided items contains group
+ */
+function hasGroup(items) {
+    return items ? (items.find(item => item.group) != null) : false;
+}
+/**
+ * clear all selections from the provide items.
+ * @param items the dropdown items, can be group or item
+ */
+function clearAllSelection(items) {
+    if (hasGroup(items)) {
+        for (const groupItem of items) {
+            if (groupItem.items) {
+                groupItem.items.filter(item => item.selected).forEach(item => item.selected = false);
+            }
+        }
+    }
+    else {
+        // clear the selection of previous selected item
+        items.filter(item => item.selected).forEach(item => item.selected = false);
+    }
+}
+/**
+ * stop all propagation and default actions
+ */
+function stopPropagationAndDefault(event) {
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+    event.preventDefault();
+}
+/**
+ * check whether the provided value is number of not
+ */
+function isNumber(value) {
+    return !(value == null || isNaN(value) || value.length === 0);
+}
+/**
+ * get the selected item from the items list (including item and group)
+ */
+function getFirstSelectedItem(items) {
+    if (!items) {
+        return undefined;
+    }
+    let selectedItem;
+    if (hasGroup(items)) {
+        for (const item of items) {
+            selectedItem = item.items ? item.items.find(subItem => subItem.selected) : undefined;
+            if (selectedItem) {
+                break;
+            }
+        }
+    }
+    else {
+        selectedItem = items ? items.find(item => item.selected) : undefined;
+    }
+    return selectedItem;
 }
 
-class AnchorComponent {
-    constructor(_decimalPipe) {
-        this._decimalPipe = _decimalPipe;
-        /**
-         * bind to [checkbox] for checking whether the clearance flag should be shown or not.
-         */
-        this.checkbox = false;
-        /**
-         * bind to [allowClear] for enabling the clearance (clearance is not avaiable when checkbox is enabled)
-         */
-        this.allowClear = true;
-        /**
-         * bind to [openStatus], it's the visibility status of dropdown, for showing the arrow on anchor
-         */
-        this.openStatus = false;
-        /**
-         * bind to [disabled] for disabling the anchor
-         */
-        this.disabled = false;
-        /**
-         * will be triggered when clicking the anchor
-         */
-        this.anchorClick = new EventEmitter();
-        /**
-         * will be triggered when clicking the clearance
-         */
-        this.clearanceClick = new EventEmitter();
-    }
-    /**
-     * flag for showing the clearance flag
-     */
-    get showClearanceFlag() {
-        return !this.checkbox && this.selectedText && this.allowClear;
-    }
-    /**
-     * the text displays on anchor
-     */
-    get anchorDisplayText() {
-        let anchorDisplayText = this.selectedText ? (this.formatNumber ? (isNumber(this.selectedText) ?
-            this._decimalPipe.transform(this.selectedText, '1.0-2') : this.selectedText) :
-            this.selectedText) + (this.suffixText ? this.suffixText : '') : this.placeHolder;
-        let charLength = 1;
-        if (this.showClearanceFlag && this.anchorLength > 0) {
-            charLength = Math.floor((this.anchorLength - 50) / 7);
-        }
-        else {
-            charLength = Math.floor((this.anchorLength - 50) / 7);
-        }
-        if (anchorDisplayText.length > charLength) {
-            anchorDisplayText = anchorDisplayText.slice(0, charLength - 2) + '...';
-        }
-        return anchorDisplayText;
-    }
-    /**
-     * anchor CSS class
-     */
-    get anchorClass() {
-        let anchorClassStatusPart;
-        let anchorClassFontColor;
-        if (this.disabled) {
-            anchorClassStatusPart = 'selection-anchor-disabled';
-            anchorClassFontColor = 'place-holder';
-        }
-        else {
-            if (this.openStatus) {
-                anchorClassStatusPart = 'selection-anchor-open';
-            }
-            else {
-                anchorClassStatusPart = 'selection-anchor-close';
-            }
-            if (this.selectedText != null) {
-                anchorClassFontColor = 'selected-item';
-            }
-            else {
-                anchorClassFontColor = 'place-holder';
-            }
-        }
-        return `${anchorClassStatusPart} ${anchorClassFontColor}`;
-    }
-    /**
-     * triggered when clicking the anchor
-     */
-    onAnchorClick(event) {
-        this.anchorClick.emit(event);
-    }
-    /**
-     * triggered with (blur) of anchor
-     */
-    onAnchorBlur(event) {
-        stopPropagationAndDefault(event);
-    }
-    /**
-     * triggered when clicking the clearance
-     */
-    onClearanceClick(event) {
-        this.clearanceClick.emit(event);
-    }
-    /**
-     * triggered when resizing, get the clientWidth of anchor
-     */
-    onResize() {
-        this.anchorLength = this.anchorRef ? this.anchorRef.nativeElement ? this.anchorRef.nativeElement.clientWidth : 0 : 0;
-    }
-}
-AnchorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AnchorComponent, deps: [{ token: i1.DecimalPipe }], target: i0.ɵɵFactoryTarget.Component });
-AnchorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AnchorComponent, selector: "anchor", inputs: { placeHolder: "placeHolder", checkbox: "checkbox", suffixText: "suffixText", allowClear: "allowClear", formatNumber: "formatNumber", selectedText: "selectedText", openStatus: "openStatus", disabled: "disabled" }, outputs: { anchorClick: "anchorClick", clearanceClick: "clearanceClick" }, providers: [DecimalPipe], viewQueries: [{ propertyName: "anchorRef", first: true, predicate: ["anchor"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+class AnchorComponent {
+    _decimalPipe;
+    /**
+     * Child element reference of anchor
+     */
+    anchorRef;
+    /**
+     * bind to [placeHolder] for displaying the place holder string of the anchor.
+     */
+    placeHolder;
+    /**
+     * bind to [checkbox] for checking whether the clearance flag should be shown or not.
+     */
+    checkbox = false;
+    /**
+     * bind to [suffixText] for displaying the suffix of the selected text of anchor
+     */
+    suffixText;
+    /**
+     * bind to [allowClear] for enabling the clearance (clearance is not avaiable when checkbox is enabled)
+     */
+    allowClear = true;
+    /**
+     * bind to [formatNumber] for show formatted number text
+     */
+    formatNumber;
+    /**
+     * bind to [selectedText] for displaying the selected text on anchor
+     */
+    selectedText;
+    /**
+     * bind to [openStatus], it's the visibility status of dropdown, for showing the arrow on anchor
+     */
+    openStatus = false;
+    /**
+     * bind to [disabled] for disabling the anchor
+     */
+    disabled = false;
+    /**
+     * will be triggered when clicking the anchor
+     */
+    anchorClick = new EventEmitter();
+    /**
+     * will be triggered when clicking the clearance
+     */
+    clearanceClick = new EventEmitter();
+    /**
+     * length of anchor element, used for calculate the string length of the anchor displayed text.
+     */
+    anchorLength;
+    constructor(_decimalPipe) {
+        this._decimalPipe = _decimalPipe;
+    }
+    /**
+     * flag for showing the clearance flag
+     */
+    get showClearanceFlag() {
+        return !this.checkbox && this.selectedText && this.allowClear;
+    }
+    /**
+     * the text displays on anchor
+     */
+    get anchorDisplayText() {
+        let anchorDisplayText = this.selectedText ? (this.formatNumber ? (isNumber(this.selectedText) ?
+            this._decimalPipe.transform(this.selectedText, '1.0-2') : this.selectedText) :
+            this.selectedText) + (this.suffixText ? this.suffixText : '') : this.placeHolder;
+        let charLength = 1;
+        if (this.showClearanceFlag && this.anchorLength > 0) {
+            charLength = Math.floor((this.anchorLength - 50) / 7);
+        }
+        else {
+            charLength = Math.floor((this.anchorLength - 50) / 7);
+        }
+        if (anchorDisplayText.length > charLength) {
+            anchorDisplayText = anchorDisplayText.slice(0, charLength - 2) + '...';
+        }
+        return anchorDisplayText;
+    }
+    /**
+     * anchor CSS class
+     */
+    get anchorClass() {
+        let anchorClassStatusPart;
+        let anchorClassFontColor;
+        if (this.disabled) {
+            anchorClassStatusPart = 'selection-anchor-disabled';
+            anchorClassFontColor = 'place-holder';
+        }
+        else {
+            if (this.openStatus) {
+                anchorClassStatusPart = 'selection-anchor-open';
+            }
+            else {
+                anchorClassStatusPart = 'selection-anchor-close';
+            }
+            if (this.selectedText != null) {
+                anchorClassFontColor = 'selected-item';
+            }
+            else {
+                anchorClassFontColor = 'place-holder';
+            }
+        }
+        return `${anchorClassStatusPart} ${anchorClassFontColor}`;
+    }
+    /**
+     * triggered when clicking the anchor
+     */
+    onAnchorClick(event) {
+        this.anchorClick.emit(event);
+    }
+    /**
+     * triggered with (blur) of anchor
+     */
+    onAnchorBlur(event) {
+        stopPropagationAndDefault(event);
+    }
+    /**
+     * triggered when clicking the clearance
+     */
+    onClearanceClick(event) {
+        this.clearanceClick.emit(event);
+    }
+    /**
+     * triggered when resizing, get the clientWidth of anchor
+     */
+    onResize() {
+        this.anchorLength = this.anchorRef ? this.anchorRef.nativeElement ? this.anchorRef.nativeElement.clientWidth : 0 : 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AnchorComponent, deps: [{ token: i1.DecimalPipe }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: AnchorComponent, isStandalone: true, selector: "anchor", inputs: { placeHolder: "placeHolder", checkbox: "checkbox", suffixText: "suffixText", allowClear: "allowClear", formatNumber: "formatNumber", selectedText: "selectedText", openStatus: "openStatus", disabled: "disabled" }, outputs: { anchorClick: "anchorClick", clearanceClick: "clearanceClick" }, providers: [DecimalPipe], viewQueries: [{ propertyName: "anchorRef", first: true, predicate: ["anchor"], descendants: true, read: ElementRef }], ngImport: i0, template: `
     <span #anchor tabindex="2" [ngClass]="anchorClass" (window:resize)="onResize()"
           (mousedown)="onAnchorClick($event)" (blur)="onAnchorBlur($event)"> {{anchorDisplayText}}
       <span #selectionClearance class="selection-clearance" (mousedown)="onClearanceClick($event)" *ngIf="showClearanceFlag">&times;</span>
     </span>
-  `, isInline: true, styles: ["@charset \"UTF-8\";*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.vertical-center,.selection-anchor-close:after,.selection-anchor-open:after,.selection-anchor-disabled:after{position:absolute;top:50%;transform:translateY(-50%)}.hover-box,.selection-anchor-close:hover{outline:0;box-shadow:0 0 6px #23adff;border-radius:4px}.anchor-box,.selection-anchor-disabled,.selection-anchor,.selection-anchor-close,.selection-anchor-open{height:100%;border-radius:4px;width:100%;position:relative;display:inline-block;padding:8px 12px 5px;border:1px solid;outline:0;box-shadow:inset 0 1px 1px #00000013;box-sizing:border-box;white-space:nowrap}.selection-anchor,.selection-anchor-close,.selection-anchor-open{cursor:pointer}.selection-anchor .selection-clearance,.selection-anchor-close .selection-clearance,.selection-anchor-open .selection-clearance{position:absolute;right:35px;font-weight:700}.selection-anchor .selection-clearance:hover,.selection-anchor-close .selection-clearance:hover,.selection-anchor-open .selection-clearance:hover{color:#000}.selection-anchor:focus,.selection-anchor-close:focus,.selection-anchor-open:focus{box-shadow:inset 0 1px 1px #00000013,0 0 8px #66afe999;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;border-color:#66afe9}.selection-anchor-disabled{border-color:#ccc;cursor:default;pointer-events:none;background:#f8f8f8;filter:opacity(50%)}.selection-anchor-disabled:after{font-size:9px;content:\"\\25bc\";right:10px;padding-bottom:3px}.selection-anchor-open{border-bottom:none;border-bottom-right-radius:0;border-bottom-left-radius:0;border-color:#66afe9}.selection-anchor-open:after{font-size:9px;content:\"\\25b2\";right:10px;padding-bottom:3px}.selection-anchor-close{border-color:#ccc}.selection-anchor-close:after{font-size:9px;content:\"\\25bc\";right:10px;padding-bottom:3px}.place-holder{color:#999}.selected-item{color:#495057}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AnchorComponent, decorators: [{
-            type: Component,
+  `, isInline: true, styles: ["@charset \"UTF-8\";*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.vertical-center,.selection-anchor-close:after,.selection-anchor-open:after,.selection-anchor-disabled:after{position:absolute;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%)}.hover-box,.selection-anchor-close:hover{outline:0;box-shadow:0 0 6px #23adff;border-radius:4px}.anchor-box,.selection-anchor-disabled,.selection-anchor,.selection-anchor-close,.selection-anchor-open{height:100%;border-radius:4px;width:100%;position:relative;display:inline-block;padding:8px 12px 5px;border:1px solid;outline:0;box-shadow:inset 0 1px 1px #00000013;box-sizing:border-box;white-space:nowrap}.selection-anchor,.selection-anchor-close,.selection-anchor-open{cursor:pointer}.selection-anchor .selection-clearance,.selection-anchor-close .selection-clearance,.selection-anchor-open .selection-clearance{position:absolute;right:35px;font-weight:700}.selection-anchor .selection-clearance:hover,.selection-anchor-close .selection-clearance:hover,.selection-anchor-open .selection-clearance:hover{color:#000}.selection-anchor:focus,.selection-anchor-close:focus,.selection-anchor-open:focus{box-shadow:inset 0 1px 1px #00000013,0 0 8px #66afe999;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;border-color:#66afe9}.selection-anchor-disabled{border-color:#ccc;cursor:default;pointer-events:none;background:#f8f8f8;-webkit-filter:opacity(50%);filter:opacity(50%)}.selection-anchor-disabled:after{font-size:9px;content:\"\\25bc\";right:10px;padding-bottom:3px}.selection-anchor-open{border-bottom:none;border-bottom-right-radius:0;border-bottom-left-radius:0;border-color:#66afe9}.selection-anchor-open:after{font-size:9px;content:\"\\25b2\";right:10px;padding-bottom:3px}.selection-anchor-close{border-color:#ccc}.selection-anchor-close:after{font-size:9px;content:\"\\25bc\";right:10px;padding-bottom:3px}.place-holder{color:#999}.selected-item{color:#495057}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AnchorComponent, decorators: [{
+            type: Component,
             args: [{ selector: 'anchor', template: `
     <span #anchor tabindex="2" [ngClass]="anchorClass" (window:resize)="onResize()"
           (mousedown)="onAnchorClick($event)" (blur)="onAnchorBlur($event)"> {{anchorDisplayText}}
       <span #selectionClearance class="selection-clearance" (mousedown)="onClearanceClick($event)" *ngIf="showClearanceFlag">&times;</span>
     </span>
-  `, providers: [DecimalPipe], styles: ["@charset \"UTF-8\";*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.vertical-center,.selection-anchor-close:after,.selection-anchor-open:after,.selection-anchor-disabled:after{position:absolute;top:50%;transform:translateY(-50%)}.hover-box,.selection-anchor-close:hover{outline:0;box-shadow:0 0 6px #23adff;border-radius:4px}.anchor-box,.selection-anchor-disabled,.selection-anchor,.selection-anchor-close,.selection-anchor-open{height:100%;border-radius:4px;width:100%;position:relative;display:inline-block;padding:8px 12px 5px;border:1px solid;outline:0;box-shadow:inset 0 1px 1px #00000013;box-sizing:border-box;white-space:nowrap}.selection-anchor,.selection-anchor-close,.selection-anchor-open{cursor:pointer}.selection-anchor .selection-clearance,.selection-anchor-close .selection-clearance,.selection-anchor-open .selection-clearance{position:absolute;right:35px;font-weight:700}.selection-anchor .selection-clearance:hover,.selection-anchor-close .selection-clearance:hover,.selection-anchor-open .selection-clearance:hover{color:#000}.selection-anchor:focus,.selection-anchor-close:focus,.selection-anchor-open:focus{box-shadow:inset 0 1px 1px #00000013,0 0 8px #66afe999;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;border-color:#66afe9}.selection-anchor-disabled{border-color:#ccc;cursor:default;pointer-events:none;background:#f8f8f8;filter:opacity(50%)}.selection-anchor-disabled:after{font-size:9px;content:\"\\25bc\";right:10px;padding-bottom:3px}.selection-anchor-open{border-bottom:none;border-bottom-right-radius:0;border-bottom-left-radius:0;border-color:#66afe9}.selection-anchor-open:after{font-size:9px;content:\"\\25b2\";right:10px;padding-bottom:3px}.selection-anchor-close{border-color:#ccc}.selection-anchor-close:after{font-size:9px;content:\"\\25bc\";right:10px;padding-bottom:3px}.place-holder{color:#999}.selected-item{color:#495057}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.DecimalPipe }]; }, propDecorators: { anchorRef: [{
-                type: ViewChild,
-                args: ['anchor', { read: ElementRef }]
-            }], placeHolder: [{
-                type: Input
-            }], checkbox: [{
-                type: Input
-            }], suffixText: [{
-                type: Input
-            }], allowClear: [{
-                type: Input
-            }], formatNumber: [{
-                type: Input
-            }], selectedText: [{
-                type: Input
-            }], openStatus: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], anchorClick: [{
-                type: Output
-            }], clearanceClick: [{
-                type: Output
+  `, imports: [CommonModule], providers: [DecimalPipe], styles: ["@charset \"UTF-8\";*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.vertical-center,.selection-anchor-close:after,.selection-anchor-open:after,.selection-anchor-disabled:after{position:absolute;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%)}.hover-box,.selection-anchor-close:hover{outline:0;box-shadow:0 0 6px #23adff;border-radius:4px}.anchor-box,.selection-anchor-disabled,.selection-anchor,.selection-anchor-close,.selection-anchor-open{height:100%;border-radius:4px;width:100%;position:relative;display:inline-block;padding:8px 12px 5px;border:1px solid;outline:0;box-shadow:inset 0 1px 1px #00000013;box-sizing:border-box;white-space:nowrap}.selection-anchor,.selection-anchor-close,.selection-anchor-open{cursor:pointer}.selection-anchor .selection-clearance,.selection-anchor-close .selection-clearance,.selection-anchor-open .selection-clearance{position:absolute;right:35px;font-weight:700}.selection-anchor .selection-clearance:hover,.selection-anchor-close .selection-clearance:hover,.selection-anchor-open .selection-clearance:hover{color:#000}.selection-anchor:focus,.selection-anchor-close:focus,.selection-anchor-open:focus{box-shadow:inset 0 1px 1px #00000013,0 0 8px #66afe999;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;border-color:#66afe9}.selection-anchor-disabled{border-color:#ccc;cursor:default;pointer-events:none;background:#f8f8f8;-webkit-filter:opacity(50%);filter:opacity(50%)}.selection-anchor-disabled:after{font-size:9px;content:\"\\25bc\";right:10px;padding-bottom:3px}.selection-anchor-open{border-bottom:none;border-bottom-right-radius:0;border-bottom-left-radius:0;border-color:#66afe9}.selection-anchor-open:after{font-size:9px;content:\"\\25b2\";right:10px;padding-bottom:3px}.selection-anchor-close{border-color:#ccc}.selection-anchor-close:after{font-size:9px;content:\"\\25bc\";right:10px;padding-bottom:3px}.place-holder{color:#999}.selected-item{color:#495057}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DecimalPipe }], propDecorators: { anchorRef: [{
+                type: ViewChild,
+                args: ['anchor', { read: ElementRef }]
+            }], placeHolder: [{
+                type: Input
+            }], checkbox: [{
+                type: Input
+            }], suffixText: [{
+                type: Input
+            }], allowClear: [{
+                type: Input
+            }], formatNumber: [{
+                type: Input
+            }], selectedText: [{
+                type: Input
+            }], openStatus: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], anchorClick: [{
+                type: Output
+            }], clearanceClick: [{
+                type: Output
             }] } });
 
-class InputFilterComponent {
-    constructor() {
-        /**
-         * bind to [inputFilterBlur], emits with (blur) of filter input box
-         */
-        this.inputFilterBlur = new EventEmitter();
-        /**
-         * bind to [filterValueChange], for 2-way binding of filterValue
-         */
-        this.filterValueChange = new EventEmitter();
-    }
-    /**
-     * triggers with (blur) event, emits the (inputFilterBlur) event
-     */
-    onFilterTextBlur(event) {
-        this.inputFilterBlur.emit(event);
-    }
-    /**
-     * triggers with (input) event, emits the (filterValueChange) event for 2-way binding of filterValue
-     */
-    onChange() {
-        this.filterValueChange.emit(this.filterValue);
-    }
-}
-InputFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: InputFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: InputFilterComponent, selector: "input-filter", inputs: { filterValue: "filterValue" }, outputs: { inputFilterBlur: "inputFilterBlur", filterValueChange: "filterValueChange" }, ngImport: i0, template: `
+class InputFilterComponent {
+    /**
+     * bind to [filterValue], the value of the filter
+     */
+    filterValue;
+    /**
+     * bind to [inputFilterBlur], emits with (blur) of filter input box
+     */
+    inputFilterBlur = new EventEmitter();
+    /**
+     * bind to [filterValueChange], for 2-way binding of filterValue
+     */
+    filterValueChange = new EventEmitter();
+    /**
+     * triggers with (blur) event, emits the (inputFilterBlur) event
+     */
+    onFilterTextBlur(event) {
+        this.inputFilterBlur.emit(event);
+    }
+    /**
+     * triggers with (input) event, emits the (filterValueChange) event for 2-way binding of filterValue
+     */
+    onChange() {
+        this.filterValueChange.emit(this.filterValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: InputFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: InputFilterComponent, isStandalone: true, selector: "input-filter", inputs: { filterValue: "filterValue" }, outputs: { inputFilterBlur: "inputFilterBlur", filterValueChange: "filterValueChange" }, ngImport: i0, template: `
     <input type="text" class="filter-box" [(ngModel)]="filterValue" (input)="onChange()" (blur)="onFilterTextBlur($event)">
-  `, isInline: true, styles: ["*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.filter-box{width:calc(100% - 10px);height:28px;border-radius:4px;border:1px solid #ccc;margin:1px 5px 5px;padding-left:5px;font-size:12px;box-sizing:border-box;color:#495057}.filter-box:focus{outline:0;border-color:#ccc}\n"], directives: [{ type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: InputFilterComponent, decorators: [{
-            type: Component,
+  `, isInline: true, styles: ["*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.filter-box{width:calc(100% - 10px);height:28px;border-radius:4px;border:1px solid #ccc;margin:1px 5px 5px;padding-left:5px;font-size:12px;box-sizing:border-box;color:#495057}.filter-box:focus{outline:0;border-color:#ccc}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: InputFilterComponent, decorators: [{
+            type: Component,
             args: [{ selector: 'input-filter', template: `
     <input type="text" class="filter-box" [(ngModel)]="filterValue" (input)="onChange()" (blur)="onFilterTextBlur($event)">
-  `, styles: ["*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.filter-box{width:calc(100% - 10px);height:28px;border-radius:4px;border:1px solid #ccc;margin:1px 5px 5px;padding-left:5px;font-size:12px;box-sizing:border-box;color:#495057}.filter-box:focus{outline:0;border-color:#ccc}\n"] }]
-        }], propDecorators: { filterValue: [{
-                type: Input
-            }], inputFilterBlur: [{
-                type: Output
-            }], filterValueChange: [{
-                type: Output
-            }] } });
-
-class GroupItemComponent {
-    /**
-     * prevent all clicking event from happening
-     */
-    onItemGroupClick(event) {
-        event.stopImmediatePropagation();
-        event.stopPropagation();
-        event.preventDefault();
-    }
-}
-GroupItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GroupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GroupItemComponent, selector: "group-item", inputs: { item: "item" }, ngImport: i0, template: `
-    <label class="dropdown-item dropdown-item-group" (mousedown)="onItemGroupClick($event)">{{item.group}}</label>
-  `, isInline: true, styles: ["*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.dropdown-item,.container-selection,.container-selection-selected,.container-checkbox{background:transparent;display:list-item;list-style:none;position:relative;width:100%;height:auto;cursor:pointer;color:#495057;padding-bottom:5px;padding-top:5px;padding-left:12px}.container-checkbox{padding-left:35px}.container-checkbox input{position:absolute;opacity:0;cursor:pointer}.container-checkbox .checkmark{position:absolute;top:5px;left:10px;height:15px;width:15px;border:1px solid rgba(0,0,0,.3);background-color:#fff;border-radius:4px}.container-checkbox .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:4px;height:7px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.container-checkbox:hover input~.checkmark{background-color:#ccc}.container-checkbox input:checked~.checkmark{background-color:#2196f3;border:1px solid #2196F3}.container-checkbox input:checked~.checkmark:after{display:block}.container-checkbox:hover{color:#66afe9}.container-selection,.container-selection-selected{padding-left:12px}.container-selection:hover,.container-selection-selected:hover{color:#495057;background:lightcyan}.container-selection-selected{color:#fff;background:cornflowerblue}.dropdown-item-group{font-weight:700}.dropdown-item-group:hover{cursor:default}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'group-item', template: `
-    <label class="dropdown-item dropdown-item-group" (mousedown)="onItemGroupClick($event)">{{item.group}}</label>
-  `, styles: ["*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.dropdown-item,.container-selection,.container-selection-selected,.container-checkbox{background:transparent;display:list-item;list-style:none;position:relative;width:100%;height:auto;cursor:pointer;color:#495057;padding-bottom:5px;padding-top:5px;padding-left:12px}.container-checkbox{padding-left:35px}.container-checkbox input{position:absolute;opacity:0;cursor:pointer}.container-checkbox .checkmark{position:absolute;top:5px;left:10px;height:15px;width:15px;border:1px solid rgba(0,0,0,.3);background-color:#fff;border-radius:4px}.container-checkbox .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:4px;height:7px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.container-checkbox:hover input~.checkmark{background-color:#ccc}.container-checkbox input:checked~.checkmark{background-color:#2196f3;border:1px solid #2196F3}.container-checkbox input:checked~.checkmark:after{display:block}.container-checkbox:hover{color:#66afe9}.container-selection,.container-selection-selected{padding-left:12px}.container-selection:hover,.container-selection-selected:hover{color:#495057;background:lightcyan}.container-selection-selected{color:#fff;background:cornflowerblue}.dropdown-item-group{font-weight:700}.dropdown-item-group:hover{cursor:default}\n"] }]
-        }], propDecorators: { item: [{
-                type: Input
+  `, imports: [FormsModule], styles: ["*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.filter-box{width:calc(100% - 10px);height:28px;border-radius:4px;border:1px solid #ccc;margin:1px 5px 5px;padding-left:5px;font-size:12px;box-sizing:border-box;color:#495057}.filter-box:focus{outline:0;border-color:#ccc}\n"] }]
+        }], propDecorators: { filterValue: [{
+                type: Input
+            }], inputFilterBlur: [{
+                type: Output
+            }], filterValueChange: [{
+                type: Output
             }] } });
 
-class ItemComponent {
-    constructor() {
-        /**
-         * bind to [formatNumber], the flag for formatting the number
-         */
-        this.formatNumber = false;
-        /**
-         * bind to [itemClick] event, triggers when clicking the item of dropdown
-         */
-        this.itemClick = new EventEmitter();
-        /**
-         * bind to [checkStatusChange] event, triggers when check status is changed in checkbox mode.
-         */
-        this.checkStatusChange = new EventEmitter();
-    }
-    /**
-     * check whether needs to format number for the provided text
-     */
-    needFormatNumber(value) {
-        return isNumber(value) && this.formatNumber;
-    }
-    /**
-     * triggered when clicking the item, emits the [itemClick] event
-     */
-    onItemClick(item) {
-        this.itemClick.emit(item);
-    }
-    /**
-     * triggered when checking status changed in checkbox mode, emits the [checkStatusChange] event
-     */
-    onCheckStatusChange(item) {
-        this.checkStatusChange.emit(item);
-    }
-}
-ItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ItemComponent, selector: "item", inputs: { checkbox: "checkbox", item: "item", formatNumber: "formatNumber", suffixText: "suffixText" }, outputs: { itemClick: "itemClick", checkStatusChange: "checkStatusChange" }, ngImport: i0, template: `
+class ItemComponent {
+    /**
+     * bind to [checkbox], the flag of checkbox mode
+     */
+    checkbox;
+    /**
+     * bind to [item], the dropdown option item
+     */
+    item;
+    /**
+     * bind to [formatNumber], the flag for formatting the number
+     */
+    formatNumber = false;
+    /**
+     * bind to [suffixText], the suffixText that will be displayed in the dropdown
+     */
+    suffixText;
+    /**
+     * bind to [itemClick] event, triggers when clicking the item of dropdown
+     */
+    itemClick = new EventEmitter();
+    /**
+     * bind to [checkStatusChange] event, triggers when check status is changed in checkbox mode.
+     */
+    checkStatusChange = new EventEmitter();
+    /**
+     * check whether needs to format number for the provided text
+     */
+    needFormatNumber(value) {
+        return isNumber(value) && this.formatNumber;
+    }
+    /**
+     * triggered when clicking the item, emits the [itemClick] event
+     */
+    onItemClick(item) {
+        this.itemClick.emit(item);
+    }
+    /**
+     * triggered when checking status changed in checkbox mode, emits the [checkStatusChange] event
+     */
+    onCheckStatusChange(item) {
+        this.checkStatusChange.emit(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: ItemComponent, isStandalone: true, selector: "item", inputs: { checkbox: "checkbox", item: "item", formatNumber: "formatNumber", suffixText: "suffixText" }, outputs: { itemClick: "itemClick", checkStatusChange: "checkStatusChange" }, ngImport: i0, template: `
     <label [class.container-checkbox]="checkbox"
            [class.container-selection]="!checkbox && !item.selected"
            [class.container-selection-selected]="!checkbox && item.selected"
@@ -317,9 +330,10 @@ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         <input type='checkbox' [id]="'checkbox-'+item.text" (change)="onCheckStatusChange(item)" [checked]="item.selected">
         <span class="checkmark" [id]="'checkmark-'+item.text"></span>
       </ng-container>
-    </label>`, isInline: true, styles: ["*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.dropdown-item,.container-selection,.container-selection-selected,.container-checkbox{background:transparent;display:list-item;list-style:none;position:relative;width:100%;height:auto;cursor:pointer;color:#495057;padding-bottom:5px;padding-top:5px;padding-left:12px}.container-checkbox{padding-left:35px}.container-checkbox input{position:absolute;opacity:0;cursor:pointer}.container-checkbox .checkmark{position:absolute;top:5px;left:10px;height:15px;width:15px;border:1px solid rgba(0,0,0,.3);background-color:#fff;border-radius:4px}.container-checkbox .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:4px;height:7px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.container-checkbox:hover input~.checkmark{background-color:#ccc}.container-checkbox input:checked~.checkmark{background-color:#2196f3;border:1px solid #2196F3}.container-checkbox input:checked~.checkmark:after{display:block}.container-checkbox:hover{color:#66afe9}.container-selection,.container-selection-selected{padding-left:12px}.container-selection:hover,.container-selection-selected:hover{color:#495057;background:lightcyan}.container-selection-selected{color:#fff;background:cornflowerblue}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i1.DecimalPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ItemComponent, decorators: [{
-            type: Component,
+    </label>`, isInline: true, styles: ["*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.dropdown-item,.container-selection,.container-selection-selected,.container-checkbox{background:transparent;display:list-item;list-style:none;position:relative;width:100%;height:auto;cursor:pointer;color:#495057;padding-bottom:5px;padding-top:5px;padding-left:12px}.container-checkbox{padding-left:35px}.container-checkbox input{position:absolute;opacity:0;cursor:pointer}.container-checkbox .checkmark{position:absolute;top:5px;left:10px;height:15px;width:15px;border:1px solid rgba(0,0,0,.3);background-color:#fff;border-radius:4px}.container-checkbox .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:4px;height:7px;border:solid white;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.container-checkbox:hover input~.checkmark{background-color:#ccc}.container-checkbox input:checked~.checkmark{background-color:#2196f3;border:1px solid #2196F3}.container-checkbox input:checked~.checkmark:after{display:block}.container-checkbox:hover{color:#66afe9}.container-selection,.container-selection-selected{padding-left:12px}.container-selection:hover,.container-selection-selected:hover{color:#495057;background:#e0ffff}.container-selection-selected{color:#fff;background:#6495ed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ItemComponent, decorators: [{
+            type: Component,
             args: [{ selector: 'item', template: `
     <label [class.container-checkbox]="checkbox"
            [class.container-selection]="!checkbox && !item.selected"
@@ -330,191 +344,247 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <input type='checkbox' [id]="'checkbox-'+item.text" (change)="onCheckStatusChange(item)" [checked]="item.selected">
         <span class="checkmark" [id]="'checkmark-'+item.text"></span>
       </ng-container>
-    </label>`, styles: ["*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.dropdown-item,.container-selection,.container-selection-selected,.container-checkbox{background:transparent;display:list-item;list-style:none;position:relative;width:100%;height:auto;cursor:pointer;color:#495057;padding-bottom:5px;padding-top:5px;padding-left:12px}.container-checkbox{padding-left:35px}.container-checkbox input{position:absolute;opacity:0;cursor:pointer}.container-checkbox .checkmark{position:absolute;top:5px;left:10px;height:15px;width:15px;border:1px solid rgba(0,0,0,.3);background-color:#fff;border-radius:4px}.container-checkbox .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:4px;height:7px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.container-checkbox:hover input~.checkmark{background-color:#ccc}.container-checkbox input:checked~.checkmark{background-color:#2196f3;border:1px solid #2196F3}.container-checkbox input:checked~.checkmark:after{display:block}.container-checkbox:hover{color:#66afe9}.container-selection,.container-selection-selected{padding-left:12px}.container-selection:hover,.container-selection-selected:hover{color:#495057;background:lightcyan}.container-selection-selected{color:#fff;background:cornflowerblue}\n"] }]
-        }], propDecorators: { checkbox: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], formatNumber: [{
-                type: Input
-            }], suffixText: [{
-                type: Input
-            }], itemClick: [{
-                type: Output
-            }], checkStatusChange: [{
-                type: Output
+    </label>`, imports: [DecimalPipe, CommonModule], styles: ["*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.dropdown-item,.container-selection,.container-selection-selected,.container-checkbox{background:transparent;display:list-item;list-style:none;position:relative;width:100%;height:auto;cursor:pointer;color:#495057;padding-bottom:5px;padding-top:5px;padding-left:12px}.container-checkbox{padding-left:35px}.container-checkbox input{position:absolute;opacity:0;cursor:pointer}.container-checkbox .checkmark{position:absolute;top:5px;left:10px;height:15px;width:15px;border:1px solid rgba(0,0,0,.3);background-color:#fff;border-radius:4px}.container-checkbox .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:4px;height:7px;border:solid white;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.container-checkbox:hover input~.checkmark{background-color:#ccc}.container-checkbox input:checked~.checkmark{background-color:#2196f3;border:1px solid #2196F3}.container-checkbox input:checked~.checkmark:after{display:block}.container-checkbox:hover{color:#66afe9}.container-selection,.container-selection-selected{padding-left:12px}.container-selection:hover,.container-selection-selected:hover{color:#495057;background:#e0ffff}.container-selection-selected{color:#fff;background:#6495ed}\n"] }]
+        }], propDecorators: { checkbox: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], formatNumber: [{
+                type: Input
+            }], suffixText: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], checkStatusChange: [{
+                type: Output
             }] } });
 
-class DropdownComponent {
-    constructor() {
-        /**
-         * bind to [checkbox], the flag for multi-select (checkbox) mode.
-         */
-        this.checkbox = false;
-        /**
-         * bind to [filterBox] for displaying the filter input text box
-         */
-        this.filterBox = false;
-        /**
-         * bind to [allowClear] for enabling the clearance (clearance is not avaiable when checkbox is enabled)
-         */
-        this.allowClear = true;
-        /**
-         * bind to [formatNumber] for show formatted number text
-         */
-        this.formatNumber = false;
-        /**
-         * for 2-way binding of [selectedValue]
-         */
-        this.selectedValueChange = new EventEmitter(true);
-        /**
-         * [selectionChange] event that will be triggered when changing of the selection
-         */
-        this.selectionChange = new EventEmitter(true);
-        /**
-         * [dropdownBlur] event that will be triggered with (blur) of dropdown
-         */
-        this.dropdownBlur = new EventEmitter();
-        /**
-         * [itemClick] event that will be triggered when clicking the option of dropdown
-         */
-        this.itemClick = new EventEmitter();
-        /**
-         * flag of clicking dropdown. It's to prevent (blur) of dropdown from happening in checkbox mode.
-         */
-        this._clickedItems = false;
-    }
-    ngOnChanges(changes) {
-        if (changes.items) {
-            this._checkSelectionChange(changes.items.previousValue, changes.items.currentValue);
-        }
-    }
-    /**
-     * triggered when clicking the dropdown
-     */
-    onItemsClick(event) {
-        if (event.offsetX > (event.target.clientWidth + event.target.clientLeft)) {
-            stopPropagationAndDefault(event);
-            return;
-        }
-        // should ignore clicking on filter
-        if (this.checkbox && event.target.type !== 'text') {
-            this._clickedItems = true;
-        }
-    }
-    /**
-     * triggered when clicking the item
-     */
-    onItemClick(currentItem) {
-        if (!this.checkbox) {
-            this.selectedValue = this._getItemValue(currentItem); // currentItem.value != null ? currentItem.value : currentItem.text;
-            clearAllSelection(this.items);
-            // set the selection of current one
-            currentItem.selected = true;
-            this.itemClick.emit(currentItem);
-            this._onSelectionChange(this.selectedValue);
-        }
-    }
-    /**
-     * triggers with (blur) event of filter input box
-     */
-    onFilterTextBlur(event) {
-        this.dropdownBlur.emit(event);
-    }
-    /**
-     * triggers with (blur) event of dropdown
-     */
-    onItemsBlur(event) {
-        if (this.checkbox) {
-            if (this._clickedItems) {
-                // in checkbox mode, this blur event will be ignored when clicking the dropdown (check the checkbox)
-                event.target.focus();
-                this._clickedItems = false;
-                return;
-            }
-        }
-        this.dropdownBlur.emit(event);
-    }
-    /**
-     * toggle the selection when checking status changed (in checkbox mode)
-     */
-    toggleSelection(item) {
-        item.selected = !item.selected;
-        this.selectionChange.emit(this._getItemValue(item)); // item.value != null ? item.value : item.text);
-    }
-    /**
-     * items values list after applying the filter
-     */
-    get itemsValues() {
-        let filter;
-        if (this.filterValue) {
-            filter = this.filterValue.toUpperCase();
-        }
-        if (filter == null) {
-            return this.items;
-        }
-        if (!this.items || this.items.length === 0) {
-            return [];
-        }
-        if (hasGroup(this.items)) {
-            const items = [];
-            this.items.forEach(groupItem => {
-                if (groupItem.group != null && groupItem.group.toString().toUpperCase().includes(filter)) {
-                    // if groupItem contains the filters, the groupItem needs to be displayed as well
-                    items.push(groupItem);
-                }
-                else {
-                    const filteredItems = groupItem.items.filter(item => item.text != null && item.text.toString().toUpperCase().includes(filter));
-                    if (filteredItems && filteredItems.length > 0) {
-                        items.push({ group: groupItem.group, items: filteredItems });
-                    }
-                }
-            });
-            return items;
-        }
-        else {
-            return this.items.filter(item => (item.text != null && item.text.toString().toUpperCase().includes(filter)));
-        }
-    }
-    /**
-     * options CSS class
-     */
-    get optionsClass() {
-        if (this.filterBox && !this.checkbox) {
-            return 'options with-filter';
-        }
-        else {
-            return 'options no-filter';
-        }
-    }
-    /**
-     * get item value. Return text if value is not available
-     */
-    _getItemValue(item) {
-        return item ? item.value != null ? item.value : item.text : undefined;
-    }
-    /**
-     * selection changed, emits events: (selectedValueChange) and (selectionChange);
-     */
-    _onSelectionChange(value) {
-        this.selectedValueChange.emit(value);
-        this.selectionChange.emit(value);
-    }
-    /**
-     * check whether the selection is changed. Emits relative events when if changed.
-     */
-    _checkSelectionChange(previousValue, currentValue) {
-        const curSelectedItem = getFirstSelectedItem(currentValue);
-        const lastSelectedItem = getFirstSelectedItem(previousValue);
-        const curSelectedItemId = curSelectedItem ? curSelectedItem.id : undefined;
-        const lastSelectedItemId = lastSelectedItem ? lastSelectedItem.id : undefined;
-        if (curSelectedItemId !== lastSelectedItemId && !this.checkbox) {
-            this._onSelectionChange(this._getItemValue(curSelectedItem));
-        }
-    }
-}
-DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DropdownComponent, selector: "dropdown", inputs: { placeHolder: "placeHolder", items: "items", checkbox: "checkbox", selectedValue: "selectedValue", filterBox: "filterBox", suffixText: "suffixText", disabled: "disabled", allowClear: "allowClear", formatNumber: "formatNumber" }, outputs: { selectedValueChange: "selectedValueChange", selectionChange: "selectionChange", dropdownBlur: "dropdownBlur", itemClick: "itemClick" }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true, read: ElementRef }, { propertyName: "filterInputRef", first: true, predicate: ["filterInput"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
+class GroupItemComponent {
+    /**
+     * bind to [item], the group item of dropdown
+     */
+    item;
+    /**
+     * prevent all clicking event from happening
+     */
+    onItemGroupClick(event) {
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: GroupItemComponent, isStandalone: true, selector: "group-item", inputs: { item: "item" }, ngImport: i0, template: `
+    <label class="dropdown-item dropdown-item-group" (mousedown)="onItemGroupClick($event)">{{item.group}}</label>
+  `, isInline: true, styles: ["*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.dropdown-item,.container-selection,.container-selection-selected,.container-checkbox{background:transparent;display:list-item;list-style:none;position:relative;width:100%;height:auto;cursor:pointer;color:#495057;padding-bottom:5px;padding-top:5px;padding-left:12px}.container-checkbox{padding-left:35px}.container-checkbox input{position:absolute;opacity:0;cursor:pointer}.container-checkbox .checkmark{position:absolute;top:5px;left:10px;height:15px;width:15px;border:1px solid rgba(0,0,0,.3);background-color:#fff;border-radius:4px}.container-checkbox .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:4px;height:7px;border:solid white;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.container-checkbox:hover input~.checkmark{background-color:#ccc}.container-checkbox input:checked~.checkmark{background-color:#2196f3;border:1px solid #2196F3}.container-checkbox input:checked~.checkmark:after{display:block}.container-checkbox:hover{color:#66afe9}.container-selection,.container-selection-selected{padding-left:12px}.container-selection:hover,.container-selection-selected:hover{color:#495057;background:#e0ffff}.container-selection-selected{color:#fff;background:#6495ed}.dropdown-item-group{font-weight:700}.dropdown-item-group:hover{cursor:default}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GroupItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'group-item', template: `
+    <label class="dropdown-item dropdown-item-group" (mousedown)="onItemGroupClick($event)">{{item.group}}</label>
+  `, styles: ["*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.dropdown-item,.container-selection,.container-selection-selected,.container-checkbox{background:transparent;display:list-item;list-style:none;position:relative;width:100%;height:auto;cursor:pointer;color:#495057;padding-bottom:5px;padding-top:5px;padding-left:12px}.container-checkbox{padding-left:35px}.container-checkbox input{position:absolute;opacity:0;cursor:pointer}.container-checkbox .checkmark{position:absolute;top:5px;left:10px;height:15px;width:15px;border:1px solid rgba(0,0,0,.3);background-color:#fff;border-radius:4px}.container-checkbox .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:4px;height:7px;border:solid white;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.container-checkbox:hover input~.checkmark{background-color:#ccc}.container-checkbox input:checked~.checkmark{background-color:#2196f3;border:1px solid #2196F3}.container-checkbox input:checked~.checkmark:after{display:block}.container-checkbox:hover{color:#66afe9}.container-selection,.container-selection-selected{padding-left:12px}.container-selection:hover,.container-selection-selected:hover{color:#495057;background:#e0ffff}.container-selection-selected{color:#fff;background:#6495ed}.dropdown-item-group{font-weight:700}.dropdown-item-group:hover{cursor:default}\n"] }]
+        }], propDecorators: { item: [{
+                type: Input
+            }] } });
+
+class DropdownComponent {
+    /**
+     * Child element reference of dropdown
+     */
+    dropdownRef;
+    /**
+     * Child element reference of filter input text
+     */
+    filterInputRef;
+    /**
+     * bind to [placeHolder] for displaying the place holder string of the anchor.
+     */
+    placeHolder;
+    /**
+     * bind to [items] for the options/groups in the dropdown
+     */
+    items;
+    /**
+     * bind to [checkbox], the flag for multi-select (checkbox) mode.
+     */
+    checkbox = false;
+    /**
+     * bind to [selectedValue] for the value of the selected option from dropdown
+     */
+    selectedValue;
+    /**
+     * bind to [filterBox] for displaying the filter input text box
+     */
+    filterBox = false;
+    /**
+     * bind to [suffixText] for displaying the suffix of the selected text of anchor
+     */
+    suffixText;
+    /**
+     * bind to [disabled] for disabling the dropdown
+     */
+    disabled;
+    /**
+     * bind to [allowClear] for enabling the clearance (clearance is not avaiable when checkbox is enabled)
+     */
+    allowClear = true;
+    /**
+     * bind to [formatNumber] for show formatted number text
+     */
+    formatNumber = false;
+    /**
+     * for 2-way binding of [selectedValue]
+     */
+    selectedValueChange = new EventEmitter(true);
+    /**
+     * [selectionChange] event that will be triggered when changing of the selection
+     */
+    selectionChange = new EventEmitter(true);
+    /**
+     * [dropdownBlur] event that will be triggered with (blur) of dropdown
+     */
+    dropdownBlur = new EventEmitter();
+    /**
+     * [itemClick] event that will be triggered when clicking the option of dropdown
+     */
+    itemClick = new EventEmitter();
+    /**
+     * filter value
+     */
+    filterValue;
+    /**
+     * flag of clicking dropdown. It's to prevent (blur) of dropdown from happening in checkbox mode.
+     */
+    _clickedItems = false;
+    ngOnChanges(changes) {
+        if (changes['items']) {
+            this._checkSelectionChange(changes['items'].previousValue, changes['items'].currentValue);
+        }
+    }
+    /**
+     * triggered when clicking the dropdown
+     */
+    onItemsClick(event) {
+        if (event.offsetX > (event.target.clientWidth + event.target.clientLeft)) {
+            stopPropagationAndDefault(event);
+            return;
+        }
+        // should ignore clicking on filter
+        if (this.checkbox && event.target.type !== 'text') {
+            this._clickedItems = true;
+        }
+    }
+    /**
+     * triggered when clicking the item
+     */
+    onItemClick(currentItem) {
+        if (!this.checkbox) {
+            this.selectedValue = this._getItemValue(currentItem); // currentItem.value != null ? currentItem.value : currentItem.text;
+            clearAllSelection(this.items);
+            // set the selection of current one
+            currentItem.selected = true;
+            this.itemClick.emit(currentItem);
+            this._onSelectionChange(this.selectedValue);
+        }
+    }
+    /**
+     * triggers with (blur) event of filter input box
+     */
+    onFilterTextBlur(event) {
+        this.dropdownBlur.emit(event);
+    }
+    /**
+     * triggers with (blur) event of dropdown
+     */
+    onItemsBlur(event) {
+        if (this.checkbox) {
+            if (this._clickedItems) {
+                // in checkbox mode, this blur event will be ignored when clicking the dropdown (check the checkbox)
+                event.target.focus();
+                this._clickedItems = false;
+                return;
+            }
+        }
+        this.dropdownBlur.emit(event);
+    }
+    /**
+     * toggle the selection when checking status changed (in checkbox mode)
+     */
+    toggleSelection(item) {
+        item.selected = !item.selected;
+        this.selectionChange.emit(this._getItemValue(item)); // item.value != null ? item.value : item.text);
+    }
+    /**
+     * items values list after applying the filter
+     */
+    get itemsValues() {
+        let filter;
+        if (this.filterValue) {
+            filter = this.filterValue.toUpperCase();
+        }
+        if (filter == null) {
+            return this.items;
+        }
+        if (!this.items || this.items.length === 0) {
+            return [];
+        }
+        if (hasGroup(this.items)) {
+            const items = [];
+            this.items.forEach(groupItem => {
+                if (groupItem.group != null && groupItem.group.toString().toUpperCase().includes(filter)) {
+                    // if groupItem contains the filters, the groupItem needs to be displayed as well
+                    items.push(groupItem);
+                }
+                else {
+                    const filteredItems = groupItem.items.filter(item => item.text != null && item.text.toString().toUpperCase().includes(filter));
+                    if (filteredItems && filteredItems.length > 0) {
+                        items.push({ group: groupItem.group, items: filteredItems });
+                    }
+                }
+            });
+            return items;
+        }
+        else {
+            return this.items.filter(item => (item.text != null && item.text.toString().toUpperCase().includes(filter)));
+        }
+    }
+    /**
+     * options CSS class
+     */
+    get optionsClass() {
+        if (this.filterBox && !this.checkbox) {
+            return 'options with-filter';
+        }
+        else {
+            return 'options no-filter';
+        }
+    }
+    /**
+     * get item value. Return text if value is not available
+     */
+    _getItemValue(item) {
+        return item ? item.value != null ? item.value : item.text : undefined;
+    }
+    /**
+     * selection changed, emits events: (selectedValueChange) and (selectionChange);
+     */
+    _onSelectionChange(value) {
+        this.selectedValueChange.emit(value);
+        this.selectionChange.emit(value);
+    }
+    /**
+     * check whether the selection is changed. Emits relative events when if changed.
+     */
+    _checkSelectionChange(previousValue, currentValue) {
+        const curSelectedItem = getFirstSelectedItem(currentValue);
+        const lastSelectedItem = getFirstSelectedItem(previousValue);
+        const curSelectedItemId = curSelectedItem ? curSelectedItem.id : undefined;
+        const lastSelectedItemId = lastSelectedItem ? lastSelectedItem.id : undefined;
+        if (curSelectedItemId !== lastSelectedItemId && !this.checkbox) {
+            this._onSelectionChange(this._getItemValue(curSelectedItem));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DropdownComponent, isStandalone: true, selector: "dropdown", inputs: { placeHolder: "placeHolder", items: "items", checkbox: "checkbox", selectedValue: "selectedValue", filterBox: "filterBox", suffixText: "suffixText", disabled: "disabled", allowClear: "allowClear", formatNumber: "formatNumber" }, outputs: { selectedValueChange: "selectedValueChange", selectionChange: "selectionChange", dropdownBlur: "dropdownBlur", itemClick: "itemClick" }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true, read: ElementRef }, { propertyName: "filterInputRef", first: true, predicate: ["filterInput"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
     <span #dropdown class="dropdown" tabindex="3" (mousedown)="onItemsClick($event)" (blur)="onItemsBlur($event)" *ngIf="!disabled" >
       <input-filter #filterInput tabindex="4" *ngIf="filterBox && !checkbox" [(filterValue)]="filterValue" (inputFilterBlur)="onFilterTextBlur($event)"></input-filter>
       <span #selectionOptions [ngClass]="optionsClass">
@@ -533,9 +603,10 @@ DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         </ng-container>
       </span>
     </span>
-  `, isInline: true, styles: ["*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.dropdown{width:100%;padding:0;display:none;margin:0;border:1px solid #66afe9;border-top:none;border-bottom:none;border-top-right-radius:0;border-top-left-radius:0;box-sizing:border-box;position:relative;z-index:999}.dropdown:focus{outline:0}.dropdown .options{width:calc(100% + 2px);left:0;box-sizing:border-box;background:white;position:absolute;max-height:228px;overflow-y:auto;overflow-x:hidden;border:1px solid #66afe9;border-top:none;border-bottom-right-radius:4px;border-bottom-left-radius:4px;margin-left:-1px;margin-right:-1px}.dropdown .with-filter{top:32px}.dropdown .no-filter{top:0}\n"], components: [{ type: InputFilterComponent, selector: "input-filter", inputs: ["filterValue"], outputs: ["inputFilterBlur", "filterValueChange"] }, { type: GroupItemComponent, selector: "group-item", inputs: ["item"] }, { type: ItemComponent, selector: "item", inputs: ["checkbox", "item", "formatNumber", "suffixText"], outputs: ["itemClick", "checkStatusChange"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropdownComponent, decorators: [{
-            type: Component,
+  `, isInline: true, styles: ["*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.dropdown:focus{outline:0}.dropdown{width:100%;padding:0;display:none;margin:0;border:1px solid #66afe9;border-top:none;border-bottom:none;border-top-right-radius:0;border-top-left-radius:0;box-sizing:border-box;position:relative;z-index:999}.dropdown .options{width:calc(100% + 2px);left:0;box-sizing:border-box;background:#fff;position:absolute;max-height:228px;overflow-y:auto;overflow-x:hidden;border:1px solid #66afe9;border-top:none;border-bottom-right-radius:4px;border-bottom-left-radius:4px;margin-left:-1px;margin-right:-1px}.dropdown .with-filter{top:32px}.dropdown .no-filter{top:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputFilterComponent, selector: "input-filter", inputs: ["filterValue"], outputs: ["inputFilterBlur", "filterValueChange"] }, { kind: "component", type: ItemComponent, selector: "item", inputs: ["checkbox", "item", "formatNumber", "suffixText"], outputs: ["itemClick", "checkStatusChange"] }, { kind: "component", type: GroupItemComponent, selector: "group-item", inputs: ["item"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DropdownComponent, decorators: [{
+            type: Component,
             args: [{ selector: 'dropdown', template: `
     <span #dropdown class="dropdown" tabindex="3" (mousedown)="onItemsClick($event)" (blur)="onItemsBlur($event)" *ngIf="!disabled" >
       <input-filter #filterInput tabindex="4" *ngIf="filterBox && !checkbox" [(filterValue)]="filterValue" (inputFilterBlur)="onFilterTextBlur($event)"></input-filter>
@@ -555,193 +626,211 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </ng-container>
       </span>
     </span>
-  `, styles: ["*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.dropdown{width:100%;padding:0;display:none;margin:0;border:1px solid #66afe9;border-top:none;border-bottom:none;border-top-right-radius:0;border-top-left-radius:0;box-sizing:border-box;position:relative;z-index:999}.dropdown:focus{outline:0}.dropdown .options{width:calc(100% + 2px);left:0;box-sizing:border-box;background:white;position:absolute;max-height:228px;overflow-y:auto;overflow-x:hidden;border:1px solid #66afe9;border-top:none;border-bottom-right-radius:4px;border-bottom-left-radius:4px;margin-left:-1px;margin-right:-1px}.dropdown .with-filter{top:32px}.dropdown .no-filter{top:0}\n"] }]
-        }], propDecorators: { dropdownRef: [{
-                type: ViewChild,
-                args: ['dropdown', { read: ElementRef }]
-            }], filterInputRef: [{
-                type: ViewChild,
-                args: ['filterInput', { read: ElementRef }]
-            }], placeHolder: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], checkbox: [{
-                type: Input
-            }], selectedValue: [{
-                type: Input
-            }], filterBox: [{
-                type: Input
-            }], suffixText: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], allowClear: [{
-                type: Input
-            }], formatNumber: [{
-                type: Input
-            }], selectedValueChange: [{
-                type: Output
-            }], selectionChange: [{
-                type: Output
-            }], dropdownBlur: [{
-                type: Output
-            }], itemClick: [{
-                type: Output
+  `, imports: [CommonModule, InputFilterComponent, ItemComponent, GroupItemComponent], styles: ["*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.dropdown:focus{outline:0}.dropdown{width:100%;padding:0;display:none;margin:0;border:1px solid #66afe9;border-top:none;border-bottom:none;border-top-right-radius:0;border-top-left-radius:0;box-sizing:border-box;position:relative;z-index:999}.dropdown .options{width:calc(100% + 2px);left:0;box-sizing:border-box;background:#fff;position:absolute;max-height:228px;overflow-y:auto;overflow-x:hidden;border:1px solid #66afe9;border-top:none;border-bottom-right-radius:4px;border-bottom-left-radius:4px;margin-left:-1px;margin-right:-1px}.dropdown .with-filter{top:32px}.dropdown .no-filter{top:0}\n"] }]
+        }], propDecorators: { dropdownRef: [{
+                type: ViewChild,
+                args: ['dropdown', { read: ElementRef }]
+            }], filterInputRef: [{
+                type: ViewChild,
+                args: ['filterInput', { read: ElementRef }]
+            }], placeHolder: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], checkbox: [{
+                type: Input
+            }], selectedValue: [{
+                type: Input
+            }], filterBox: [{
+                type: Input
+            }], suffixText: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], allowClear: [{
+                type: Input
+            }], formatNumber: [{
+                type: Input
+            }], selectedValueChange: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], dropdownBlur: [{
+                type: Output
+            }], itemClick: [{
+                type: Output
             }] } });
 
-class DropdownListComponent {
-    constructor() {
-        /**
-         * bind to [multiSelection], the flag for multi-select (checkbox) mode.
-         */
-        this.multiSelection = false;
-        /**
-         * bind to [filterBox] for displaying the filter input text box
-         */
-        this.filterBox = false;
-        /**
-         * bind to [allowClear] for enabling the clearance (clearance is not avaiable when checkbox is enabled)
-         */
-        this.allowClear = true;
-        /**
-         * bind to [formatNumber] for show formatted number text
-         */
-        this.formatNumber = false;
-        /**
-         * for 2-way binding of [selectedValue], using async event to
-         * prevent "ExpressionChangedAfterItHasBeenCheckedError".
-         */
-        this.selectedValueChange = new EventEmitter(true);
-        /**
-         * [selectionChange] event that will be triggered when changing of the selection.
-         * Using async event to prevent "ExpressionChangedAfterItHasBeenCheckedError".
-         */
-        this.selectionChange = new EventEmitter(true);
-        /**
-         * visibility flag of drop down
-         */
-        this.dropdownVisibility = false;
-    }
-    /**
-     * current selected text
-     */
-    get selectedText() {
-        if (!this.multiSelection) {
-            const selectedItem = getFirstSelectedItem(this.items);
-            return selectedItem ? selectedItem.text : undefined;
-        }
-    }
-    /**
-     * triggered with (selectionChange) event, emits (selectedValueChange) and (selectionChange)
-     */
-    onSelectionChange(event) {
-        this.selectedValueChange.emit(event);
-        this.selectionChange.emit(event);
-    }
-    /**
-     * triggered with (anchorClick) event, controlling the "open" and "close" of the dropdown
-     */
-    onAnchorClick(event) {
-        if (this.disabled) {
-            stopPropagationAndDefault(event);
-            return;
-        }
-        if (this._isSelectionOpen()) {
-            this._hideItemList();
-        }
-        else {
-            this._showItemsList();
-        }
-        stopPropagationAndDefault(event);
-    }
-    /**
-     * triggered with (itemClick) event, closes the dropdown in non-checkbox mode
-     */
-    onItemClick() {
-        if (!this.multiSelection) {
-            this._hideItemList();
-        }
-    }
-    /**
-     * triggered with (clearanceClick) event, clearing all selections
-     * and emits (selectedValueChange) and (selectionChange) event for empty value
-     */
-    onClearanceClick(event) {
-        if (!this.multiSelection) {
-            this.selectedValue = void 0;
-            this.selectedValueChange.emit(undefined);
-            this.selectionChange.emit(undefined);
-            clearAllSelection(this.items);
-        }
-        stopPropagationAndDefault(event);
-    }
-    /**
-     * triggered with (dropdownBlur) event, closes the dropdown
-     */
-    onItemsBlur() {
-        if (this._isSelectionOpen()) {
-            this._hideItemList();
-        }
-    }
-    /**
-     * close the dropdown
-     */
-    _hideItemList() {
-        // hide the dropdown element (has some problem for using CSS directly, using this as a workaround)
-        this._dropdownElement.classList.remove('visible');
-        this._dropdownElement.style.display = 'none';
-        this.dropdownVisibility = false;
-    }
-    /**
-     * open the dropdown
-     */
-    _showItemsList() {
-        // display the dropdown element (has some problem for using CSS directly, using this as a workaround)
-        this._dropdownElement.classList.add('visible');
-        this._dropdownElement.style.display = 'block';
-        this.dropdownVisibility = true;
-        // scrolling to the selected item
-        if (this._selectedElement) {
-            this._selectedElement.scrollIntoView({ behavior: 'auto', block: 'center' });
-        }
-        // setting the focus
-        if (this.filterBox && !this.multiSelection) {
-            this._filterInputElement.focus();
-        }
-        else {
-            this._dropdownElement.focus();
-        }
-    }
-    /**
-     * visibility status of dropdown
-     */
-    _isSelectionOpen() {
-        return this.dropdownVisibility;
-    }
-    /**
-     * get the real dropdown element (for focusing and visibility controlling), the <span> not the <dropdown>
-     */
-    get _dropdownElement() {
-        return this.dropdownRef ? this.dropdownRef.nativeElement ? this.dropdownRef.nativeElement.firstElementChild : null : null;
-    }
-    /**
-     * get the real filter element (for focusing), the <input> not the <input-filter>
-     */
-    get _filterInputElement() {
-        return this._dropdownElement ?
-            this._dropdownElement.firstElementChild ? this._dropdownElement.firstElementChild.firstElementChild : null : null;
-    }
-    /**
-     * get the HTMLElement of selected item, for doing (scrollIntoView) scrolling to the selected item
-     */
-    get _selectedElement() {
-        const selectedItem = getFirstSelectedItem(this.items);
-        return selectedItem ? document.getElementById(selectedItem.id) : undefined;
-    }
-}
-DropdownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropdownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DropdownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DropdownListComponent, selector: "ngx-dropdown-list", inputs: { placeHolder: "placeHolder", items: "items", multiSelection: "multiSelection", selectedValue: "selectedValue", filterBox: "filterBox", suffixText: "suffixText", disabled: "disabled", allowClear: "allowClear", formatNumber: "formatNumber" }, outputs: { selectedValueChange: "selectedValueChange", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+class DropdownListComponent {
+    dropdownRef;
+    /**
+     * bind to [placeHolder] for displaying the place holder string of the anchor.
+     */
+    placeHolder;
+    /**
+     * bind to [items] for the options/groups in the dropdown
+     */
+    items;
+    /**
+     * bind to [multiSelection], the flag for multi-select (checkbox) mode.
+     */
+    multiSelection = false;
+    /**
+     * bind to [selectedValue] for the value of the selected option from dropdown
+     */
+    selectedValue;
+    /**
+     * bind to [filterBox] for displaying the filter input text box
+     */
+    filterBox = false;
+    /**
+     * bind to [suffixText] for displaying the suffix of the selected text of anchor
+     */
+    suffixText;
+    /**
+     * bind to [disabled] for disabling the dropdown
+     */
+    disabled;
+    /**
+     * bind to [allowClear] for enabling the clearance (clearance is not avaiable when checkbox is enabled)
+     */
+    allowClear = true;
+    /**
+     * bind to [formatNumber] for show formatted number text
+     */
+    formatNumber = false;
+    /**
+     * for 2-way binding of [selectedValue], using async event to
+     * prevent "ExpressionChangedAfterItHasBeenCheckedError".
+     */
+    selectedValueChange = new EventEmitter(true);
+    /**
+     * [selectionChange] event that will be triggered when changing of the selection.
+     * Using async event to prevent "ExpressionChangedAfterItHasBeenCheckedError".
+     */
+    selectionChange = new EventEmitter(true);
+    /**
+     * visibility flag of drop down
+     */
+    dropdownVisibility = false;
+    /**
+     * current selected text
+     */
+    get selectedText() {
+        if (!this.multiSelection) {
+            const selectedItem = getFirstSelectedItem(this.items);
+            return selectedItem ? selectedItem.text : undefined;
+        }
+    }
+    /**
+     * triggered with (selectionChange) event, emits (selectedValueChange) and (selectionChange)
+     */
+    onSelectionChange(event) {
+        this.selectedValueChange.emit(event);
+        this.selectionChange.emit(event);
+    }
+    /**
+     * triggered with (anchorClick) event, controlling the "open" and "close" of the dropdown
+     */
+    onAnchorClick(event) {
+        if (this.disabled) {
+            stopPropagationAndDefault(event);
+            return;
+        }
+        if (this._isSelectionOpen()) {
+            this._hideItemList();
+        }
+        else {
+            this._showItemsList();
+        }
+        stopPropagationAndDefault(event);
+    }
+    /**
+     * triggered with (itemClick) event, closes the dropdown in non-checkbox mode
+     */
+    onItemClick() {
+        if (!this.multiSelection) {
+            this._hideItemList();
+        }
+    }
+    /**
+     * triggered with (clearanceClick) event, clearing all selections
+     * and emits (selectedValueChange) and (selectionChange) event for empty value
+     */
+    onClearanceClick(event) {
+        if (!this.multiSelection) {
+            this.selectedValue = void 0;
+            this.selectedValueChange.emit(undefined);
+            this.selectionChange.emit(undefined);
+            clearAllSelection(this.items);
+        }
+        stopPropagationAndDefault(event);
+    }
+    /**
+     * triggered with (dropdownBlur) event, closes the dropdown
+     */
+    onItemsBlur() {
+        if (this._isSelectionOpen()) {
+            this._hideItemList();
+        }
+    }
+    /**
+     * close the dropdown
+     */
+    _hideItemList() {
+        // hide the dropdown element (has some problem for using CSS directly, using this as a workaround)
+        this._dropdownElement.classList.remove('visible');
+        this._dropdownElement.style.display = 'none';
+        this.dropdownVisibility = false;
+    }
+    /**
+     * open the dropdown
+     */
+    _showItemsList() {
+        // display the dropdown element (has some problem for using CSS directly, using this as a workaround)
+        this._dropdownElement.classList.add('visible');
+        this._dropdownElement.style.display = 'block';
+        this.dropdownVisibility = true;
+        // scrolling to the selected item
+        if (this._selectedElement) {
+            this._selectedElement.scrollIntoView({ behavior: 'auto', block: 'center' });
+        }
+        // setting the focus
+        if (this.filterBox && !this.multiSelection) {
+            this._filterInputElement.focus();
+        }
+        else {
+            this._dropdownElement.focus();
+        }
+    }
+    /**
+     * visibility status of dropdown
+     */
+    _isSelectionOpen() {
+        return this.dropdownVisibility;
+    }
+    /**
+     * get the real dropdown element (for focusing and visibility controlling), the <span> not the <dropdown>
+     */
+    get _dropdownElement() {
+        return this.dropdownRef ? this.dropdownRef.nativeElement ? this.dropdownRef.nativeElement.firstElementChild : null : null;
+    }
+    /**
+     * get the real filter element (for focusing), the <input> not the <input-filter>
+     */
+    get _filterInputElement() {
+        return this._dropdownElement ?
+            this._dropdownElement.firstElementChild ? this._dropdownElement.firstElementChild.firstElementChild : null : null;
+    }
+    /**
+     * get the HTMLElement of selected item, for doing (scrollIntoView) scrolling to the selected item
+     */
+    get _selectedElement() {
+        const selectedItem = getFirstSelectedItem(this.items);
+        return selectedItem ? document.getElementById(selectedItem.id) : undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DropdownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DropdownListComponent, isStandalone: true, selector: "ngx-dropdown-list", inputs: { placeHolder: "placeHolder", items: "items", multiSelection: "multiSelection", selectedValue: "selectedValue", filterBox: "filterBox", suffixText: "suffixText", disabled: "disabled", allowClear: "allowClear", formatNumber: "formatNumber" }, outputs: { selectedValueChange: "selectedValueChange", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true, read: ElementRef }], ngImport: i0, template: `
     <span class="ngx-select">
         <anchor (anchorClick)="onAnchorClick($event)" (clearanceClick)="onClearanceClick($event)"
                 [checkbox]="multiSelection"
@@ -764,9 +853,10 @@ DropdownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [disabled]="disabled">
         </dropdown>
     </span>
-  `, isInline: true, styles: [":host *,:host *:before,:host *:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}:host .ngx-select{border-radius:4px;font-size:14px;position:relative;display:inline-block;width:100%;height:34px;background:white;-webkit-user-select:none;user-select:none}\n"], components: [{ type: AnchorComponent, selector: "anchor", inputs: ["placeHolder", "checkbox", "suffixText", "allowClear", "formatNumber", "selectedText", "openStatus", "disabled"], outputs: ["anchorClick", "clearanceClick"] }, { type: DropdownComponent, selector: "dropdown", inputs: ["placeHolder", "items", "checkbox", "selectedValue", "filterBox", "suffixText", "disabled", "allowClear", "formatNumber"], outputs: ["selectedValueChange", "selectionChange", "dropdownBlur", "itemClick"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropdownListComponent, decorators: [{
-            type: Component,
+  `, isInline: true, styles: ["*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}:host .ngx-select{border-radius:4px;font-size:14px;position:relative;display:inline-block;width:100%;height:34px;background:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: AnchorComponent, selector: "anchor", inputs: ["placeHolder", "checkbox", "suffixText", "allowClear", "formatNumber", "selectedText", "openStatus", "disabled"], outputs: ["anchorClick", "clearanceClick"] }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["placeHolder", "items", "checkbox", "selectedValue", "filterBox", "suffixText", "disabled", "allowClear", "formatNumber"], outputs: ["selectedValueChange", "selectionChange", "dropdownBlur", "itemClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DropdownListComponent, decorators: [{
+            type: Component,
             args: [{ selector: 'ngx-dropdown-list', template: `
     <span class="ngx-select">
         <anchor (anchorClick)="onAnchorClick($event)" (clearanceClick)="onClearanceClick($event)"
@@ -790,65 +880,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [disabled]="disabled">
         </dropdown>
     </span>
-  `, styles: [":host *,:host *:before,:host *:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}:host .ngx-select{border-radius:4px;font-size:14px;position:relative;display:inline-block;width:100%;height:34px;background:white;-webkit-user-select:none;user-select:none}\n"] }]
-        }], propDecorators: { dropdownRef: [{
-                type: ViewChild,
-                args: ['dropdown', { read: ElementRef }]
-            }], placeHolder: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], multiSelection: [{
-                type: Input
-            }], selectedValue: [{
-                type: Input
-            }], filterBox: [{
-                type: Input
-            }], suffixText: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], allowClear: [{
-                type: Input
-            }], formatNumber: [{
-                type: Input
-            }], selectedValueChange: [{
-                type: Output
-            }], selectionChange: [{
-                type: Output
+  `, imports: [AnchorComponent, DropdownComponent], styles: ["*,*:before,*:after{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}:host .ngx-select{border-radius:4px;font-size:14px;position:relative;display:inline-block;width:100%;height:34px;background:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}\n"] }]
+        }], propDecorators: { dropdownRef: [{
+                type: ViewChild,
+                args: ['dropdown', { read: ElementRef }]
+            }], placeHolder: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], multiSelection: [{
+                type: Input
+            }], selectedValue: [{
+                type: Input
+            }], filterBox: [{
+                type: Input
+            }], suffixText: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], allowClear: [{
+                type: Input
+            }], formatNumber: [{
+                type: Input
+            }], selectedValueChange: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
             }] } });
 
-class DropdownListModule {
-}
-DropdownListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropdownListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DropdownListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropdownListModule, declarations: [DropdownListComponent,
-        ItemComponent,
-        GroupItemComponent,
-        InputFilterComponent,
-        AnchorComponent,
-        DropdownComponent], imports: [CommonModule, FormsModule], exports: [DropdownListComponent] });
-DropdownListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropdownListModule, providers: [], imports: [[CommonModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropdownListModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        DropdownListComponent,
-                        ItemComponent,
-                        GroupItemComponent,
-                        InputFilterComponent,
-                        AnchorComponent,
-                        DropdownComponent
-                    ],
-                    exports: [DropdownListComponent],
-                    imports: [CommonModule, FormsModule],
-                    providers: [],
-                    bootstrap: [],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
-export { DropdownListComponent, DropdownListModule };
+export { DropdownListComponent };
 //# sourceMappingURL=ngx-dropdown-list.mjs.map