angular-perfect-select 2.0.0 → 2.2.0

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { OnInit, OnChanges, OnDestroy, EventEmitter, ElementRef, TemplateRef, Si
 import { ControlValueAccessor } from '@angular/forms';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { AnimationTriggerMetadata } from '@angular/animations';
 
 interface ThemeColors {
@@ -27,9 +28,11 @@ interface SelectOption {
     badgeColor?: string;
     group?: string;
     tooltip?: string;
+    pinned?: boolean;
     __isNew__?: boolean;
     __isCreate__?: boolean;
     __isRecent__?: boolean;
+    __isPinned__?: boolean;
 }
 
 type ValidationState = 'default' | 'error' | 'warning' | 'success' | 'info';
@@ -71,6 +74,16 @@ interface SelectScrollEndEvent {
     scrollHeight: number;
     clientHeight: number;
 }
+interface SelectReorderEvent {
+    previousIndex: number;
+    currentIndex: number;
+    values: any[];
+    options: SelectOption[];
+}
+interface SelectPinEvent {
+    option: SelectOption;
+    pinned: boolean;
+}
 
 declare class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnChanges, OnDestroy {
     private sanitizer;
@@ -152,6 +165,21 @@ declare class PerfectSelectComponent implements ControlValueAccessor, OnInit, On
     enableCopyPaste: boolean;
     copyDelimiter: string;
     pasteDelimiter: string;
+    enableDragDrop: boolean;
+    dragDropPlaceholder: string;
+    dragDropAnimation: number;
+    enablePinning: boolean;
+    maxPinnedOptions: number | null;
+    pinnedOptionsLabel: string;
+    persistPinnedOptions: boolean;
+    enableSearchHighlight: boolean;
+    searchHighlightColor: string;
+    searchHighlightTextColor: string;
+    maxVisibleTags: number | null;
+    showMoreTagsText: string;
+    collapsibleTags: boolean;
+    showAllTagsText: string;
+    showLessTagsText: string;
     name: string;
     id: string;
     autoFocus: boolean;
@@ -175,6 +203,8 @@ declare class PerfectSelectComponent implements ControlValueAccessor, OnInit, On
     copy: EventEmitter<SelectCopyEvent>;
     paste: EventEmitter<SelectPasteEvent>;
     scrollEnd: EventEmitter<SelectScrollEndEvent>;
+    reorder: EventEmitter<SelectReorderEvent>;
+    pin: EventEmitter<SelectPinEvent>;
     selectContainerRef: ElementRef;
     searchInputRef: ElementRef;
     menuElementRef: ElementRef;
@@ -197,6 +227,10 @@ declare class PerfectSelectComponent implements ControlValueAccessor, OnInit, On
     private tooltipTimeout;
     private recentSelectionsStorageKey;
     private scrollEndTimeout;
+    pinnedOptions: _angular_core.WritableSignal<SelectOption[]>;
+    isDragging: _angular_core.WritableSignal<boolean>;
+    private pinnedOptionsStorageKey;
+    tagsExpanded: _angular_core.WritableSignal<boolean>;
     currentTheme: _angular_core.Signal<angular_perfect_select.ThemeColors>;
     filteredOptions: _angular_core.Signal<SelectOption[]>;
     selectedOptions: _angular_core.Signal<(SelectOption | {
@@ -205,6 +239,12 @@ declare class PerfectSelectComponent implements ControlValueAccessor, OnInit, On
         value: any;
     })[]>;
     displayText: _angular_core.Signal<string>;
+    visibleTags: _angular_core.Signal<(SelectOption | {
+        id: any;
+        label: string;
+        value: any;
+    })[]>;
+    hiddenTagsCount: _angular_core.Signal<number>;
     groupedOptions: _angular_core.Signal<Record<string, SelectOption[]> | null>;
     displayOptions: _angular_core.Signal<SelectOption[]>;
     allOptionsSelected: _angular_core.Signal<boolean>;
@@ -249,6 +289,16 @@ declare class PerfectSelectComponent implements ControlValueAccessor, OnInit, On
     addToRecentSelections(option: SelectOption): void;
     loadRecentSelections(): void;
     saveRecentSelections(): void;
+    onTagsReorder(event: CdkDragDrop<any[]>): void;
+    onDragStart(): void;
+    onDragEnd(): void;
+    togglePin(option: SelectOption, event: Event): void;
+    isPinned(option: SelectOption): boolean;
+    loadPinnedOptions(): void;
+    savePinnedOptions(): void;
+    highlightSearchTerm(text: string): SafeHtml;
+    toggleTagsExpanded(): void;
+    getMoreTagsText(): string;
     onOptionsScroll(event: Event): void;
     onVirtualScrollIndexChange(index: number): void;
     showTooltip(option: SelectOption, index: number): void;
@@ -256,7 +306,7 @@ declare class PerfectSelectComponent implements ControlValueAccessor, OnInit, On
     getTooltipContent(option: SelectOption): string;
     getValidationClass(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PerfectSelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PerfectSelectComponent, "ng-perfect-select", never, { "options": { "alias": "options"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "isMulti": { "alias": "isMulti"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "isSearchable": { "alias": "isSearchable"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "isClearable": { "alias": "isClearable"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "isRtl": { "alias": "isRtl"; "required": false; }; "closeMenuOnSelect": { "alias": "closeMenuOnSelect"; "required": false; }; "hideSelectedOptions": { "alias": "hideSelectedOptions"; "required": false; }; "isCreatable": { "alias": "isCreatable"; "required": false; }; "allowCreateWhileLoading": { "alias": "allowCreateWhileLoading"; "required": false; }; "createOptionPosition": { "alias": "createOptionPosition"; "required": false; }; "formatCreateLabel": { "alias": "formatCreateLabel"; "required": false; }; "loadOptions": { "alias": "loadOptions"; "required": false; }; "cacheOptions": { "alias": "cacheOptions"; "required": false; }; "defaultOptions": { "alias": "defaultOptions"; "required": false; }; "selectSize": { "alias": "selectSize"; "required": false; }; "containerSize": { "alias": "containerSize"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "borderRadius": { "alias": "borderRadius"; "required": false; }; "customStyles": { "alias": "customStyles"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "menuPlacement": { "alias": "menuPlacement"; "required": false; }; "menuPosition": { "alias": "menuPosition"; "required": false; }; "getOptionLabel": { "alias": "getOptionLabel"; "required": false; }; "getOptionValue": { "alias": "getOptionValue"; "required": false; }; "isOptionDisabled": { "alias": "isOptionDisabled"; "required": false; }; "filterOption": { "alias": "filterOption"; "required": false; }; "isGrouped": { "alias": "isGrouped"; "required": false; }; "groupBy": { "alias": "groupBy"; "required": false; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; }; "selectAllText": { "alias": "selectAllText"; "required": false; }; "deselectAllText": { "alias": "deselectAllText"; "required": false; }; "showOptionIcons": { "alias": "showOptionIcons"; "required": false; }; "showOptionBadges": { "alias": "showOptionBadges"; "required": false; }; "maxOptionsDisplay": { "alias": "maxOptionsDisplay"; "required": false; }; "optionHeight": { "alias": "optionHeight"; "required": false; }; "emptyStateText": { "alias": "emptyStateText"; "required": false; }; "emptySearchText": { "alias": "emptySearchText"; "required": false; }; "maxSelectedOptions": { "alias": "maxSelectedOptions"; "required": false; }; "maxSelectedMessage": { "alias": "maxSelectedMessage"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "minSearchLength": { "alias": "minSearchLength"; "required": false; }; "minSearchMessage": { "alias": "minSearchMessage"; "required": false; }; "enableVirtualScroll": { "alias": "enableVirtualScroll"; "required": false; }; "virtualScrollItemSize": { "alias": "virtualScrollItemSize"; "required": false; }; "virtualScrollMinBufferPx": { "alias": "virtualScrollMinBufferPx"; "required": false; }; "virtualScrollMaxBufferPx": { "alias": "virtualScrollMaxBufferPx"; "required": false; }; "validationState": { "alias": "validationState"; "required": false; }; "validationMessage": { "alias": "validationMessage"; "required": false; }; "showValidationIcon": { "alias": "showValidationIcon"; "required": false; }; "showTooltips": { "alias": "showTooltips"; "required": false; }; "tooltipDelay": { "alias": "tooltipDelay"; "required": false; }; "getOptionTooltip": { "alias": "getOptionTooltip"; "required": false; }; "showRecentSelections": { "alias": "showRecentSelections"; "required": false; }; "recentSelectionsLimit": { "alias": "recentSelectionsLimit"; "required": false; }; "recentSelectionsLabel": { "alias": "recentSelectionsLabel"; "required": false; }; "enableRecentSelectionsPersistence": { "alias": "enableRecentSelectionsPersistence"; "required": false; }; "enableInfiniteScroll": { "alias": "enableInfiniteScroll"; "required": false; }; "infiniteScrollThreshold": { "alias": "infiniteScrollThreshold"; "required": false; }; "totalOptionsCount": { "alias": "totalOptionsCount"; "required": false; }; "enableAdvancedKeyboard": { "alias": "enableAdvancedKeyboard"; "required": false; }; "typeAheadDelay": { "alias": "typeAheadDelay"; "required": false; }; "enableCopyPaste": { "alias": "enableCopyPaste"; "required": false; }; "copyDelimiter": { "alias": "copyDelimiter"; "required": false; }; "pasteDelimiter": { "alias": "pasteDelimiter"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "openMenuOnFocus": { "alias": "openMenuOnFocus"; "required": false; }; "openMenuOnClick": { "alias": "openMenuOnClick"; "required": false; }; "tabSelectsValue": { "alias": "tabSelectsValue"; "required": false; }; "backspaceRemovesValue": { "alias": "backspaceRemovesValue"; "required": false; }; "escapeClearsValue": { "alias": "escapeClearsValue"; "required": false; }; "noOptionsMessage": { "alias": "noOptionsMessage"; "required": false; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; }; }, { "change": "change"; "clear": "clear"; "focus": "focus"; "blur": "blur"; "menuOpen": "menuOpen"; "menuClose": "menuClose"; "inputChange": "inputChange"; "createOption": "createOption"; "optionsLoaded": "optionsLoaded"; "loadError": "loadError"; "copy": "copy"; "paste": "paste"; "scrollEnd": "scrollEnd"; }, ["optionTemplate", "selectedOptionTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PerfectSelectComponent, "ng-perfect-select", never, { "options": { "alias": "options"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "isMulti": { "alias": "isMulti"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "isSearchable": { "alias": "isSearchable"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "isClearable": { "alias": "isClearable"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "isRtl": { "alias": "isRtl"; "required": false; }; "closeMenuOnSelect": { "alias": "closeMenuOnSelect"; "required": false; }; "hideSelectedOptions": { "alias": "hideSelectedOptions"; "required": false; }; "isCreatable": { "alias": "isCreatable"; "required": false; }; "allowCreateWhileLoading": { "alias": "allowCreateWhileLoading"; "required": false; }; "createOptionPosition": { "alias": "createOptionPosition"; "required": false; }; "formatCreateLabel": { "alias": "formatCreateLabel"; "required": false; }; "loadOptions": { "alias": "loadOptions"; "required": false; }; "cacheOptions": { "alias": "cacheOptions"; "required": false; }; "defaultOptions": { "alias": "defaultOptions"; "required": false; }; "selectSize": { "alias": "selectSize"; "required": false; }; "containerSize": { "alias": "containerSize"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "borderRadius": { "alias": "borderRadius"; "required": false; }; "customStyles": { "alias": "customStyles"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "menuPlacement": { "alias": "menuPlacement"; "required": false; }; "menuPosition": { "alias": "menuPosition"; "required": false; }; "getOptionLabel": { "alias": "getOptionLabel"; "required": false; }; "getOptionValue": { "alias": "getOptionValue"; "required": false; }; "isOptionDisabled": { "alias": "isOptionDisabled"; "required": false; }; "filterOption": { "alias": "filterOption"; "required": false; }; "isGrouped": { "alias": "isGrouped"; "required": false; }; "groupBy": { "alias": "groupBy"; "required": false; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; }; "selectAllText": { "alias": "selectAllText"; "required": false; }; "deselectAllText": { "alias": "deselectAllText"; "required": false; }; "showOptionIcons": { "alias": "showOptionIcons"; "required": false; }; "showOptionBadges": { "alias": "showOptionBadges"; "required": false; }; "maxOptionsDisplay": { "alias": "maxOptionsDisplay"; "required": false; }; "optionHeight": { "alias": "optionHeight"; "required": false; }; "emptyStateText": { "alias": "emptyStateText"; "required": false; }; "emptySearchText": { "alias": "emptySearchText"; "required": false; }; "maxSelectedOptions": { "alias": "maxSelectedOptions"; "required": false; }; "maxSelectedMessage": { "alias": "maxSelectedMessage"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "minSearchLength": { "alias": "minSearchLength"; "required": false; }; "minSearchMessage": { "alias": "minSearchMessage"; "required": false; }; "enableVirtualScroll": { "alias": "enableVirtualScroll"; "required": false; }; "virtualScrollItemSize": { "alias": "virtualScrollItemSize"; "required": false; }; "virtualScrollMinBufferPx": { "alias": "virtualScrollMinBufferPx"; "required": false; }; "virtualScrollMaxBufferPx": { "alias": "virtualScrollMaxBufferPx"; "required": false; }; "validationState": { "alias": "validationState"; "required": false; }; "validationMessage": { "alias": "validationMessage"; "required": false; }; "showValidationIcon": { "alias": "showValidationIcon"; "required": false; }; "showTooltips": { "alias": "showTooltips"; "required": false; }; "tooltipDelay": { "alias": "tooltipDelay"; "required": false; }; "getOptionTooltip": { "alias": "getOptionTooltip"; "required": false; }; "showRecentSelections": { "alias": "showRecentSelections"; "required": false; }; "recentSelectionsLimit": { "alias": "recentSelectionsLimit"; "required": false; }; "recentSelectionsLabel": { "alias": "recentSelectionsLabel"; "required": false; }; "enableRecentSelectionsPersistence": { "alias": "enableRecentSelectionsPersistence"; "required": false; }; "enableInfiniteScroll": { "alias": "enableInfiniteScroll"; "required": false; }; "infiniteScrollThreshold": { "alias": "infiniteScrollThreshold"; "required": false; }; "totalOptionsCount": { "alias": "totalOptionsCount"; "required": false; }; "enableAdvancedKeyboard": { "alias": "enableAdvancedKeyboard"; "required": false; }; "typeAheadDelay": { "alias": "typeAheadDelay"; "required": false; }; "enableCopyPaste": { "alias": "enableCopyPaste"; "required": false; }; "copyDelimiter": { "alias": "copyDelimiter"; "required": false; }; "pasteDelimiter": { "alias": "pasteDelimiter"; "required": false; }; "enableDragDrop": { "alias": "enableDragDrop"; "required": false; }; "dragDropPlaceholder": { "alias": "dragDropPlaceholder"; "required": false; }; "dragDropAnimation": { "alias": "dragDropAnimation"; "required": false; }; "enablePinning": { "alias": "enablePinning"; "required": false; }; "maxPinnedOptions": { "alias": "maxPinnedOptions"; "required": false; }; "pinnedOptionsLabel": { "alias": "pinnedOptionsLabel"; "required": false; }; "persistPinnedOptions": { "alias": "persistPinnedOptions"; "required": false; }; "enableSearchHighlight": { "alias": "enableSearchHighlight"; "required": false; }; "searchHighlightColor": { "alias": "searchHighlightColor"; "required": false; }; "searchHighlightTextColor": { "alias": "searchHighlightTextColor"; "required": false; }; "maxVisibleTags": { "alias": "maxVisibleTags"; "required": false; }; "showMoreTagsText": { "alias": "showMoreTagsText"; "required": false; }; "collapsibleTags": { "alias": "collapsibleTags"; "required": false; }; "showAllTagsText": { "alias": "showAllTagsText"; "required": false; }; "showLessTagsText": { "alias": "showLessTagsText"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "openMenuOnFocus": { "alias": "openMenuOnFocus"; "required": false; }; "openMenuOnClick": { "alias": "openMenuOnClick"; "required": false; }; "tabSelectsValue": { "alias": "tabSelectsValue"; "required": false; }; "backspaceRemovesValue": { "alias": "backspaceRemovesValue"; "required": false; }; "escapeClearsValue": { "alias": "escapeClearsValue"; "required": false; }; "noOptionsMessage": { "alias": "noOptionsMessage"; "required": false; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; }; }, { "change": "change"; "clear": "clear"; "focus": "focus"; "blur": "blur"; "menuOpen": "menuOpen"; "menuClose": "menuClose"; "inputChange": "inputChange"; "createOption": "createOption"; "optionsLoaded": "optionsLoaded"; "loadError": "loadError"; "copy": "copy"; "paste": "paste"; "scrollEnd": "scrollEnd"; "reorder": "reorder"; "pin": "pin"; }, ["optionTemplate", "selectedOptionTemplate"], never, true, never>;
 }
 
 declare const dropdownAnimation: AnimationTriggerMetadata;
@@ -274,4 +324,4 @@ declare class ClickOutsideDirective {
 }
 
 export { ClickOutsideDirective, PerfectSelectComponent, THEMES, dropdownAnimation, optionListAnimation, selectAnimations, tagAnimation };
-export type { InputChangeAction, SelectChangeAction, SelectChangeEvent, SelectCopyEvent, SelectCreateOptionEvent, SelectInputChangeEvent, SelectLoadErrorEvent, SelectOption, SelectOptionsLoadedEvent, SelectPasteEvent, SelectScrollEndEvent, ThemeColors, ThemeName, ValidationConfig, ValidationState };
+export type { InputChangeAction, SelectChangeAction, SelectChangeEvent, SelectCopyEvent, SelectCreateOptionEvent, SelectInputChangeEvent, SelectLoadErrorEvent, SelectOption, SelectOptionsLoadedEvent, SelectPasteEvent, SelectPinEvent, SelectReorderEvent, SelectScrollEndEvent, ThemeColors, ThemeName, ValidationConfig, ValidationState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-perfect-select",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "A modern, feature-rich select component for Angular with react-select API compatibility",
   "main": "dist/index.js",
   "module": "dist/index.js",