@ng-matero/ng-select 1.0.2 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-matero/ng-select",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "description": "Angular Select - All in One UI Select, Multiselect and Autocomplete",
   "publishConfig": {
     "access": "public"
@@ -29,7 +29,7 @@
   "exports": {
     ".": {
       "sass": "./_index.scss",
-      "types": "./index.d.ts",
+      "types": "./types/ng-matero-ng-select.d.ts",
       "default": "./fesm2022/ng-matero-ng-select.mjs"
     },
     "./package.json": {
@@ -46,5 +46,6 @@
   },
   "sideEffects": false,
   "module": "fesm2022/ng-matero-ng-select.mjs",
-  "typings": "index.d.ts"
+  "typings": "types/ng-matero-ng-select.d.ts",
+  "type": "module"
 }

package/src/lib/ng-select.scss

@@ -37,8 +37,8 @@
 
 .ng-select-value-remove {
   svg {
-    width: 14px;
-    height: 14px;
+    width: var(--ns-multi-value-remove-icon-size, 14px);
+    height: var(--ns-multi-value-remove-icon-size, 14px);
   }
 }
 
@@ -63,8 +63,8 @@
   user-select: none;
 
   svg {
-    width: 20px;
-    height: 20px;
+    width: var(--ns-indicator-icon-size, 20px);
+    height: var(--ns-indicator-icon-size, 20px);
   }
 }
 
@@ -153,10 +153,17 @@
   width: 100%;
   opacity: 0;
   -webkit-overflow-scrolling: touch;
+
+  &.ng-select-popover {
+    position: fixed;
+    padding: 0;
+    border: none;
+  }
 }
 
 .ng-select-listbox {
-  max-height: 300px;
+  position: relative;
+  max-height: var(--ns-panel-max-height, 300px);
   overflow-y: auto;
 }
 

package/{index.d.ts → types/ng-matero-ng-select.d.ts}

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnChanges, AfterViewChecked, OnDestroy, ElementRef, SimpleChanges, OnInit, TemplateRef, EventEmitter, InjectionToken, AfterViewInit, QueryList } from '@angular/core';
+import { OnChanges, AfterViewChecked, OnDestroy, ElementRef, SimpleChanges, OnInit, TemplateRef, EventEmitter, AfterViewInit, QueryList, InjectionToken } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { Subject } from 'rxjs';
 
@@ -122,6 +122,7 @@ declare class NgSelectPanel implements OnInit, OnChanges, OnDestroy {
     bufferAmount: number;
     virtualScroll: boolean;
     multiple: boolean;
+    usePopover: boolean;
     headerTemplate?: TemplateRef<any>;
     footerTemplate?: TemplateRef<any>;
     filterValue: string | null;
@@ -180,10 +181,13 @@ declare class NgSelectPanel implements OnInit, OnChanges, OnDestroy {
     private _updateXPosition;
     private _updateYPosition;
     private _setupMousedownListener;
+    private _showPopoverIfNeeded;
+    private _handleReposition;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgSelectPanel, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgSelectPanel, "ng-select-panel", never, { "listboxId": { "alias": "listboxId"; "required": false; }; "items": { "alias": "items"; "required": false; }; "markedItem": { "alias": "markedItem"; "required": false; }; "position": { "alias": "position"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "bufferAmount": { "alias": "bufferAmount"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "filterValue": { "alias": "filterValue"; "required": false; }; }, { "update": "update"; "scroll": "scroll"; "scrollToEnd": "scrollToEnd"; "outsideClick": "outsideClick"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgSelectPanel, "ng-select-panel", never, { "listboxId": { "alias": "listboxId"; "required": false; }; "items": { "alias": "items"; "required": false; }; "markedItem": { "alias": "markedItem"; "required": false; }; "position": { "alias": "position"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "bufferAmount": { "alias": "bufferAmount"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "usePopover": { "alias": "usePopover"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "filterValue": { "alias": "filterValue"; "required": false; }; }, { "update": "update"; "scroll": "scroll"; "scrollToEnd": "scrollToEnd"; "outsideClick": "outsideClick"; }, never, ["*"], true, never>;
     static ngAcceptInputType_virtualScroll: unknown;
     static ngAcceptInputType_multiple: unknown;
+    static ngAcceptInputType_usePopover: unknown;
 }
 
 declare const SELECTION_MODEL_FACTORY: InjectionToken<SelectionModelFactory>;
@@ -218,6 +222,7 @@ declare class NgSelect implements OnDestroy, OnChanges, OnInit, AfterViewInit, C
     selectOnTab: boolean;
     openOnEnter: boolean;
     virtualScroll: boolean;
+    usePopover: boolean;
     bufferAmount: number;
     selectableGroup: boolean;
     selectableGroupAsModel: boolean;
@@ -376,7 +381,7 @@ declare class NgSelect implements OnDestroy, OnChanges, OnInit, AfterViewInit, C
     private _nextItemIsTag;
     private _handleBackspace;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgSelect, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgSelect, "ng-select", never, { "bindLabel": { "alias": "bindLabel"; "required": false; }; "bindValue": { "alias": "bindValue"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "fixedPlaceholder": { "alias": "fixedPlaceholder"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "panelPosition": { "alias": "panelPosition"; "required": false; }; "panelDisabled": { "alias": "panelDisabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "clearOnBackspace": { "alias": "clearOnBackspace"; "required": false; }; "clearAllText": { "alias": "clearAllText"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingText": { "alias": "loadingText"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "hideSelected": { "alias": "hideSelected"; "required": false; }; "selectOnTab": { "alias": "selectOnTab"; "required": false; }; "openOnEnter": { "alias": "openOnEnter"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "bufferAmount": { "alias": "bufferAmount"; "required": false; }; "selectableGroup": { "alias": "selectableGroup"; "required": false; }; "selectableGroupAsModel": { "alias": "selectableGroupAsModel"; "required": false; }; "searchWhileComposing": { "alias": "searchWhileComposing"; "required": false; }; "editableSearchTerm": { "alias": "editableSearchTerm"; "required": false; }; "maxSelectedItems": { "alias": "maxSelectedItems"; "required": false; }; "minTermLength": { "alias": "minTermLength"; "required": false; }; "markFirst": { "alias": "markFirst"; "required": false; }; "preventToggleOnRightClick": { "alias": "preventToggleOnRightClick"; "required": false; }; "addTag": { "alias": "addTag"; "required": false; }; "addTagText": { "alias": "addTagText"; "required": false; }; "notFoundText": { "alias": "notFoundText"; "required": false; }; "typeahead": { "alias": "typeahead"; "required": false; }; "typeToSearchText": { "alias": "typeToSearchText"; "required": false; }; "groupBy": { "alias": "groupBy"; "required": false; }; "groupValue": { "alias": "groupValue"; "required": false; }; "searchFn": { "alias": "searchFn"; "required": false; }; "keyDownFn": { "alias": "keyDownFn"; "required": false; }; "trackByFn": { "alias": "trackByFn"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "inputAttrs": { "alias": "inputAttrs"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "items": { "alias": "items"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "clearSearchOnAdd": { "alias": "clearSearchOnAdd"; "required": false; }; "deselectOnClick": { "alias": "deselectOnClick"; "required": false; }; }, { "blurEvent": "blur"; "focusEvent": "focus"; "changeEvent": "change"; "openEvent": "open"; "closeEvent": "close"; "searchEvent": "search"; "clearEvent": "clear"; "addEvent": "add"; "removeEvent": "remove"; "scroll": "scroll"; "scrollToEnd": "scrollToEnd"; }, ["optionTemplate", "optgroupTemplate", "labelTemplate", "multiLabelTemplate", "panelHeaderTemplate", "panelFooterTemplate", "notFoundTemplate", "placeholderTemplate", "typeToSearchTemplate", "loadingTextTemplate", "tagTemplate", "loadingTemplate", "clearButtonTemplate", "ngOptions"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgSelect, "ng-select", never, { "bindLabel": { "alias": "bindLabel"; "required": false; }; "bindValue": { "alias": "bindValue"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "fixedPlaceholder": { "alias": "fixedPlaceholder"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "panelPosition": { "alias": "panelPosition"; "required": false; }; "panelDisabled": { "alias": "panelDisabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "clearOnBackspace": { "alias": "clearOnBackspace"; "required": false; }; "clearAllText": { "alias": "clearAllText"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingText": { "alias": "loadingText"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "hideSelected": { "alias": "hideSelected"; "required": false; }; "selectOnTab": { "alias": "selectOnTab"; "required": false; }; "openOnEnter": { "alias": "openOnEnter"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "usePopover": { "alias": "usePopover"; "required": false; }; "bufferAmount": { "alias": "bufferAmount"; "required": false; }; "selectableGroup": { "alias": "selectableGroup"; "required": false; }; "selectableGroupAsModel": { "alias": "selectableGroupAsModel"; "required": false; }; "searchWhileComposing": { "alias": "searchWhileComposing"; "required": false; }; "editableSearchTerm": { "alias": "editableSearchTerm"; "required": false; }; "maxSelectedItems": { "alias": "maxSelectedItems"; "required": false; }; "minTermLength": { "alias": "minTermLength"; "required": false; }; "markFirst": { "alias": "markFirst"; "required": false; }; "preventToggleOnRightClick": { "alias": "preventToggleOnRightClick"; "required": false; }; "addTag": { "alias": "addTag"; "required": false; }; "addTagText": { "alias": "addTagText"; "required": false; }; "notFoundText": { "alias": "notFoundText"; "required": false; }; "typeahead": { "alias": "typeahead"; "required": false; }; "typeToSearchText": { "alias": "typeToSearchText"; "required": false; }; "groupBy": { "alias": "groupBy"; "required": false; }; "groupValue": { "alias": "groupValue"; "required": false; }; "searchFn": { "alias": "searchFn"; "required": false; }; "keyDownFn": { "alias": "keyDownFn"; "required": false; }; "trackByFn": { "alias": "trackByFn"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "inputAttrs": { "alias": "inputAttrs"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "items": { "alias": "items"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "clearSearchOnAdd": { "alias": "clearSearchOnAdd"; "required": false; }; "deselectOnClick": { "alias": "deselectOnClick"; "required": false; }; }, { "blurEvent": "blur"; "focusEvent": "focus"; "changeEvent": "change"; "openEvent": "open"; "closeEvent": "close"; "searchEvent": "search"; "clearEvent": "clear"; "addEvent": "add"; "removeEvent": "remove"; "scroll": "scroll"; "scrollToEnd": "scrollToEnd"; }, ["optionTemplate", "optgroupTemplate", "labelTemplate", "multiLabelTemplate", "panelHeaderTemplate", "panelFooterTemplate", "notFoundTemplate", "placeholderTemplate", "typeToSearchTemplate", "loadingTextTemplate", "tagTemplate", "loadingTemplate", "clearButtonTemplate", "ngOptions"], never, true, never>;
     static ngAcceptInputType_panelDisabled: unknown;
     static ngAcceptInputType_readonly: unknown;
     static ngAcceptInputType_multiple: unknown;
@@ -389,6 +394,7 @@ declare class NgSelect implements OnDestroy, OnChanges, OnInit, AfterViewInit, C
     static ngAcceptInputType_selectOnTab: unknown;
     static ngAcceptInputType_openOnEnter: unknown;
     static ngAcceptInputType_virtualScroll: unknown;
+    static ngAcceptInputType_usePopover: unknown;
     static ngAcceptInputType_bufferAmount: unknown;
     static ngAcceptInputType_selectableGroup: unknown;
     static ngAcceptInputType_selectableGroupAsModel: unknown;
@@ -418,6 +424,7 @@ declare class NgSelectConfig {
     bindLabel?: string;
     clearSearchOnAdd?: boolean;
     deselectOnClick?: boolean;
+    usePopover: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgSelectConfig, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NgSelectConfig>;
 }