{"version":3,"file":"angular-ng-autocomplete.mjs","sources":["../../../projects/autocomplete-lib/src/lib/highlight.pipe.ts","../../../projects/autocomplete-lib/src/lib/autocomplete.component.ts","../../../projects/autocomplete-lib/src/lib/autocomplete.component.html","../../../projects/autocomplete-lib/src/lib/autocomplete-lib.module.ts","../../../projects/autocomplete-lib/src/public_api.ts","../../../projects/autocomplete-lib/src/angular-ng-autocomplete.ts"],"sourcesContent":["import {Pipe, PipeTransform} from '@angular/core';\n\n@Pipe({\n name: 'highlight'\n})\nexport class HighlightPipe implements PipeTransform {\n transform(text: any, search: any, searchKeyword?: any): any {\n let pattern = search.replace(/[\\-\\[\\]\\/\\{\\}\\(\\)\\*\\+\\?\\.\\\\\\^\\$\\|]/g, '\\\\$&');\n pattern = pattern.split(' ').filter((t) => {\n return t.length > 0;\n }).join('|');\n const regex = new RegExp(pattern, 'gi');\n\n if (!search) {\n return text;\n }\n\n if (searchKeyword) {\n const name = text[searchKeyword].replace(regex, (match) => `${match}`);\n // copy original object\n const textCopied = {...text};\n // set bold value into searchKeyword of copied object\n textCopied[searchKeyword] = name;\n return textCopied;\n } else {\n return search ? text.replace(regex, (match) => `${match}`) : text;\n }\n }\n}\n","import {\n AfterViewInit,\n Component, ContentChild,\n ElementRef,\n EventEmitter, forwardRef,\n Input, OnChanges,\n OnInit,\n Output,\n Renderer2,\n SimpleChanges, TemplateRef,\n ViewChild,\n ViewEncapsulation\n} from '@angular/core';\nimport {fromEvent, Observable} from 'rxjs';\nimport {debounceTime, filter, map} from 'rxjs/operators';\nimport {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';\n\n/**\n * Keyboard events\n */\nconst isArrowUp = keyCode => keyCode === 38;\nconst isArrowDown = keyCode => keyCode === 40;\nconst isArrowUpDown = keyCode => isArrowUp(keyCode) || isArrowDown(keyCode);\nconst isEnter = keyCode => keyCode === 13;\nconst isBackspace = keyCode => keyCode === 8;\nconst isDelete = keyCode => keyCode === 46;\nconst isESC = keyCode => keyCode === 27;\nconst isTab = keyCode => keyCode === 9;\n\n\n@Component({\n selector: 'ng-autocomplete',\n templateUrl: './autocomplete.component.html',\n styleUrls: ['./autocomplete.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => AutocompleteComponent),\n multi: true\n }\n ],\n encapsulation: ViewEncapsulation.None,\n host: {\n '(document:click)': 'handleClick($event)',\n 'class': 'ng-autocomplete'\n },\n})\n\nexport class AutocompleteComponent implements OnInit, OnChanges, AfterViewInit, ControlValueAccessor {\n @ViewChild('searchInput') searchInput: ElementRef; // input element\n @ViewChild('filteredListElement') filteredListElement: ElementRef; // element of items\n @ViewChild('historyListElement') historyListElement: ElementRef; // element of history items\n\n inputKeyUp$: Observable;\n inputKeyDown$: Observable;\n\n public query = ''; // search query\n public filteredList = []; // list of items\n public historyList = []; // list of history items\n public isHistoryListVisible = true;\n public elementRef;\n public selectedIdx = -1;\n public toHighlight = '';\n public notFound = false;\n public isFocused = false;\n public isOpen = false;\n public isScrollToEnd = false;\n public overlay = false;\n private manualOpen = undefined;\n private manualClose = undefined;\n\n\n // @Inputs\n /**\n * Data of items list.\n * It can be array of strings or array of objects.\n */\n @Input() public data = [];\n @Input() public searchKeyword: string; // keyword to filter the list\n @Input() public placeholder = '';\n @Input() public heading = '';\n @Input() public initialValue: any;\n /**\n * History identifier of history list\n * When valid history identifier is given, then component stores selected item to local storage of user's browser.\n * If it is null then history is hidden.\n * History list is visible if at least one history item is stored.\n */\n @Input() public historyIdentifier: string;\n /**\n * Heading text of history list.\n * If it is null then history heading is hidden.\n */\n @Input() public historyHeading = 'Recently selected';\n @Input() public historyListMaxNumber = 15; // maximum number of items in the history list.\n @Input() public notFoundText = 'Not found'; // set custom text when filter returns empty result\n @Input() public isLoading: boolean; // loading mask\n @Input() public debounceTime: number; // delay time while typing\n @Input() public disabled: boolean; // input disable/enable\n /**\n * The minimum number of characters the user must type before a search is performed.\n */\n @Input() public minQueryLength = 1;\n\n /**\n * Focus first item in the list\n */\n @Input() public focusFirst = false;\n\n /**\n * Custom filter function\n */\n @Input() public customFilter: (items: any[], query: string) => any[];\n\n /**\n * Custom result render function\n * @param value - selected value to be rendered inside input field\n */\n @Input() public selectedValueRender: (value: any) => string;\n\n // @Output events\n /** Event that is emitted whenever an item from the list is selected. */\n @Output() selected = new EventEmitter();\n\n /** Event that is emitted whenever an input is changed. */\n @Output() inputChanged = new EventEmitter();\n\n /** Event that is emitted whenever an input is focused. */\n @Output() readonly inputFocused: EventEmitter = new EventEmitter();\n\n /** Event that is emitted whenever an input is cleared. */\n @Output() readonly inputCleared: EventEmitter = new EventEmitter();\n\n /** Event that is emitted when the autocomplete panel is opened. */\n @Output() readonly opened: EventEmitter = new EventEmitter();\n\n /** Event that is emitted when the autocomplete panel is closed. */\n @Output() readonly closed: EventEmitter = new EventEmitter();\n\n /** Event that is emitted when scrolled to the end of items. */\n @Output() readonly scrolledToEnd: EventEmitter = new EventEmitter();\n\n\n // Custom templates\n @Input() itemTemplate !: TemplateRef;\n @Input() notFoundTemplate !: TemplateRef;\n @ContentChild(TemplateRef) customTemplate !: TemplateRef;\n\n /**\n * Propagates new value when model changes\n */\n propagateChange: any = () => {\n };\n\n onTouched: any = () => {\n };\n\n /**\n * Writes a new value from the form model into the view,\n * Updates model\n */\n writeValue(value: any = '') {\n this.query = this.selectedValueRender !== undefined ? this.selectedValueRender(value) : this.defaultWriteValue(value);\n }\n\n private defaultWriteValue(value: any) {\n return value && !this.isTypeString(value) ? value[this.searchKeyword] : value;\n }\n\n /**\n * Registers a handler that is called when something in the view has changed\n */\n registerOnChange(fn) {\n this.propagateChange = fn;\n }\n\n /**\n * Registers a handler specifically for when a control receives a touch event\n */\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /**\n * Event that is called when the value of an input element is changed\n */\n onChange(event) {\n this.propagateChange(event.target.value);\n }\n\n constructor(elementRef: ElementRef, private renderer: Renderer2) {\n this.elementRef = elementRef;\n }\n\n /**\n * Event that is called when the control status changes to or from DISABLED\n */\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n\n ngOnInit(): void {\n }\n\n ngAfterViewInit() {\n this.initEventStream();\n this.handleScroll();\n }\n\n /**\n * Set initial value\n * @param value\n */\n public setInitialValue(value: any) {\n if (this.initialValue) {\n this.select(value);\n }\n }\n\n /**\n * Update search results\n */\n ngOnChanges(changes: SimpleChanges): void {\n this.setInitialValue(this.initialValue);\n if (\n changes &&\n changes.data &&\n Array.isArray(changes.data.currentValue)\n ) {\n this.handleItemsChange();\n if (!changes.data.firstChange && this.isFocused) {\n this.handleOpen();\n }\n }\n }\n\n /**\n * Items change\n */\n public handleItemsChange() {\n this.isScrollToEnd = false;\n if (!this.isOpen) {\n return;\n }\n\n this.filteredList = this.data;\n this.notFound = !this.filteredList || this.filteredList.length === 0;\n\n // Filter list when updating data and panel is open\n if (this.isOpen) {\n this.filterList();\n }\n }\n\n /**\n * Filter data\n */\n public filterList() {\n this.selectedIdx = -1;\n this.initSearchHistory();\n if (this.query != null && this.data) {\n this.toHighlight = this.query;\n this.filteredList = this.customFilter !== undefined ? this.customFilter([...this.data], this.query) : this.defaultFilterFunction();\n // If [focusFirst]=\"true\" automatically focus the first match\n if (this.filteredList.length > 0 && this.focusFirst) {\n this.selectedIdx = 0;\n }\n } else {\n this.notFound = false;\n }\n }\n\n /**\n * Default filter function, used unless customFilter is provided\n */\n public defaultFilterFunction(): any[] {\n return this.data.filter((item: any) => {\n if (typeof item === 'string') {\n // string logic, check equality of strings\n return item.toLowerCase().indexOf(this.query.toLowerCase()) > -1;\n } else if (typeof item === 'object' && item instanceof Object) {\n // object logic, check property equality\n return item[this.searchKeyword] ? item[this.searchKeyword].toLowerCase().indexOf(this.query.toLowerCase()) > -1 : \"\";\n }\n });\n }\n\n\n /**\n * Check if item is a string in the list.\n * @param item\n */\n isTypeString(item) {\n return typeof item === 'string';\n }\n\n /**\n * Select item in the list.\n * @param item\n */\n public select(item) {\n this.query = !this.isTypeString(item) ? item[this.searchKeyword] : item;\n this.isOpen = true;\n this.overlay = false;\n this.selected.emit(item);\n this.propagateChange(item);\n\n if (this.initialValue) {\n // check if history already exists in localStorage and then update\n const history = window.localStorage.getItem(`${this.historyIdentifier}`);\n if (history) {\n let existingHistory = JSON.parse(localStorage[`${this.historyIdentifier}`]);\n if (!(existingHistory instanceof Array)) existingHistory = [];\n\n // check if selected item exists in existingHistory\n if (!existingHistory.some((existingItem) => !this.isTypeString(existingItem)\n ? existingItem[this.searchKeyword] == item[this.searchKeyword] : existingItem == item)) {\n existingHistory.unshift(item);\n localStorage.setItem(`${this.historyIdentifier}`, JSON.stringify(existingHistory));\n\n // check if items don't exceed max allowed number\n if (existingHistory.length >= this.historyListMaxNumber) {\n existingHistory.splice(existingHistory.length - 1, 1);\n localStorage.setItem(`${this.historyIdentifier}`, JSON.stringify(existingHistory));\n }\n } else {\n // if selected item exists in existingHistory swap to top in array\n if (!this.isTypeString(item)) {\n // object logic\n const copiedExistingHistory = existingHistory.slice(); // copy original existingHistory array\n const selectedIndex = copiedExistingHistory.map((el) => el[this.searchKeyword]).indexOf(item[this.searchKeyword]);\n copiedExistingHistory.splice(selectedIndex, 1);\n copiedExistingHistory.splice(0, 0, item);\n localStorage.setItem(`${this.historyIdentifier}`, JSON.stringify(copiedExistingHistory));\n } else {\n // string logic\n const copiedExistingHistory = existingHistory.slice(); // copy original existingHistory array\n copiedExistingHistory.splice(copiedExistingHistory.indexOf(item), 1);\n copiedExistingHistory.splice(0, 0, item);\n localStorage.setItem(`${this.historyIdentifier}`, JSON.stringify(copiedExistingHistory));\n }\n }\n } else {\n this.saveHistory(item);\n }\n } else {\n this.saveHistory(item);\n }\n this.handleClose();\n }\n\n /**\n * Document click\n * @param e event\n */\n public handleClick(e) {\n let clickedComponent = e.target;\n let inside = false;\n do {\n if (clickedComponent === this.elementRef.nativeElement) {\n inside = true;\n if (this.filteredList.length) {\n this.handleOpen();\n }\n }\n clickedComponent = clickedComponent.parentNode;\n } while (clickedComponent);\n if (!inside) {\n this.handleClose();\n }\n }\n\n /**\n * Handle body overlay\n */\n handleOverlay() {\n this.overlay = false;\n }\n\n /**\n * Scroll items\n */\n public handleScroll() {\n this.renderer.listen(this.filteredListElement.nativeElement, 'scroll', () => {\n this.scrollToEnd();\n });\n }\n\n /**\n * Define panel state\n */\n setPanelState(event) {\n if (event) {\n event.stopPropagation();\n }\n // If controls are untouched\n if (typeof this.manualOpen === 'undefined'\n && typeof this.manualClose === 'undefined') {\n this.isOpen = false;\n this.handleOpen();\n }\n\n // If one of the controls is untouched and other is deactivated\n if (typeof this.manualOpen === 'undefined'\n && this.manualClose === false\n || typeof this.manualClose === 'undefined'\n && this.manualOpen === false) {\n this.isOpen = false;\n this.handleOpen();\n }\n\n // if controls are touched but both are deactivated\n if (this.manualOpen === false && this.manualClose === false) {\n this.isOpen = false;\n this.handleOpen();\n }\n\n // if open control is touched and activated\n if (this.manualOpen) {\n this.isOpen = false;\n this.handleOpen();\n this.manualOpen = false;\n }\n\n // if close control is touched and activated\n if (this.manualClose) {\n this.isOpen = true;\n this.handleClose();\n this.manualClose = false;\n }\n }\n\n /**\n * Manual controls\n */\n open() {\n this.manualOpen = true;\n this.isOpen = false;\n this.handleOpen();\n }\n\n close() {\n this.manualClose = true;\n this.isOpen = true;\n this.handleClose();\n }\n\n focus() {\n this.handleFocus(event);\n }\n\n clear() {\n this.remove(event);\n }\n\n /**\n * Remove search query\n */\n public remove(e) {\n e.stopPropagation();\n this.query = '';\n this.inputCleared.emit();\n this.propagateChange(this.query);\n this.setPanelState(e);\n\n if (this.data && !this.data.length) {\n this.notFound = false;\n }\n }\n\n /**\n * Initialize historyList search\n */\n initSearchHistory() {\n this.isHistoryListVisible = false;\n if (this.historyIdentifier && !this.query) {\n const history = window.localStorage.getItem(`${this.historyIdentifier}`);\n if (history) {\n this.isHistoryListVisible = true;\n this.filteredList = [];\n this.historyList = history ? JSON.parse(history) : [];\n } else {\n this.isHistoryListVisible = false;\n }\n } else {\n this.isHistoryListVisible = false;\n }\n }\n\n handleOpen() {\n if (this.isOpen || this.isOpen && !this.isLoading) {\n return;\n }\n // If data exists\n if (this.data && this.data.length) {\n this.isOpen = true;\n this.overlay = true;\n this.filterList();\n this.opened.emit();\n }\n }\n\n handleClose() {\n if (!this.isOpen) {\n this.isFocused = false;\n return;\n }\n this.isOpen = false;\n this.overlay = false;\n this.filteredList = [];\n this.selectedIdx = -1;\n this.notFound = false;\n this.isHistoryListVisible = false;\n this.isFocused = false;\n this.closed.emit();\n }\n\n handleFocus(e) {\n this.searchInput.nativeElement.focus();\n if (this.isFocused) {\n return;\n }\n this.inputFocused.emit(e);\n // if data exists then open\n if (this.data && this.data.length) {\n this.setPanelState(e);\n }\n this.isFocused = true;\n }\n\n scrollToEnd(): void {\n if (this.isScrollToEnd) {\n return;\n }\n\n const scrollTop = this.filteredListElement.nativeElement\n .scrollTop;\n const scrollHeight = this.filteredListElement.nativeElement\n .scrollHeight;\n const elementHeight = this.filteredListElement.nativeElement\n .clientHeight;\n const atBottom = elementHeight !=0 && Math.abs(scrollHeight - elementHeight - scrollTop) < 1;\n\n if (atBottom) {\n this.scrolledToEnd.emit();\n this.isScrollToEnd = true;\n }\n }\n\n /**\n * Initialize keyboard events\n */\n initEventStream() {\n this.inputKeyUp$ = fromEvent(\n this.searchInput.nativeElement, 'keyup'\n ).pipe(map(\n (e: any) => e\n ));\n\n this.inputKeyDown$ = fromEvent(\n this.searchInput.nativeElement,\n 'keydown'\n ).pipe(map(\n (e: any) => e\n ));\n\n this.listenEventStream();\n }\n\n /**\n * Listen keyboard events\n */\n listenEventStream() {\n // key up event\n this.inputKeyUp$\n .pipe(\n filter(e =>\n !isArrowUpDown(e.keyCode) &&\n !isEnter(e.keyCode) &&\n !isESC(e.keyCode) &&\n !isTab(e.keyCode)),\n debounceTime(this.debounceTime)\n ).subscribe(e => {\n this.onKeyUp(e);\n });\n\n // cursor up & down\n this.inputKeyDown$.pipe(filter(\n e => isArrowUpDown(e.keyCode)\n )).subscribe(e => {\n e.preventDefault();\n this.onFocusItem(e);\n });\n\n // enter keyup\n this.inputKeyUp$.pipe(filter(e => isEnter(e.keyCode))).subscribe(e => {\n //this.onHandleEnter();\n });\n\n // enter keydown\n this.inputKeyDown$.pipe(filter(e => isEnter(e.keyCode))).subscribe(e => {\n this.onHandleEnter();\n });\n\n // ESC\n this.inputKeyUp$.pipe(\n filter(e => isESC(e.keyCode),\n debounceTime(100))\n ).subscribe(e => {\n this.onEsc();\n });\n\n // TAB\n this.inputKeyDown$.pipe(\n filter(e => isTab(e.keyCode))\n ).subscribe(e => {\n this.onTab();\n });\n\n // delete\n this.inputKeyDown$.pipe(\n filter(e => isBackspace(e.keyCode) || isDelete(e.keyCode))\n ).subscribe(e => {\n this.onDelete();\n });\n }\n\n /**\n * on keyup == when input changed\n * @param e event\n */\n onKeyUp(e) {\n this.notFound = false; // search results are unknown while typing\n // if input is empty\n if (!this.query) {\n this.notFound = false;\n this.inputChanged.emit(e.target.value);\n this.inputCleared.emit();\n this.setPanelState(e);\n }\n // note that '' can be a valid query\n if (!this.query && this.query !== '') {\n return;\n }\n // if query >= to minQueryLength\n if (this.query.length >= this.minQueryLength) {\n this.inputChanged.emit(e.target.value);\n this.filterList();\n\n // If no results found\n if (!this.filteredList.length && !this.isLoading) {\n this.notFoundText ? this.notFound = true : this.notFound = false;\n }\n\n if (this.data && !this.data.length) {\n this.isOpen = true;\n }\n }\n }\n\n\n /**\n * Keyboard arrow top and arrow bottom\n * @param e event\n */\n onFocusItem(e) {\n // move arrow up and down on filteredList or historyList\n if (!this.historyList.length || !this.isHistoryListVisible) {\n // filteredList\n const totalNumItem = this.filteredList.length;\n if (e.key === 'ArrowDown') {\n let sum = this.selectedIdx;\n sum = (this.selectedIdx === null) ? 0 : sum + 1;\n this.selectedIdx = (totalNumItem + sum) % totalNumItem;\n this.scrollToFocusedItem(this.selectedIdx);\n } else if (e.key === 'ArrowUp') {\n if (this.selectedIdx == -1) {\n this.selectedIdx = 0;\n }\n this.selectedIdx = (totalNumItem + this.selectedIdx - 1) % totalNumItem;\n this.scrollToFocusedItem(this.selectedIdx);\n }\n } else {\n // historyList\n const totalNumItem = this.historyList.length;\n if (e.key === 'ArrowDown') {\n let sum = this.selectedIdx;\n sum = (this.selectedIdx === null) ? 0 : sum + 1;\n this.selectedIdx = (totalNumItem + sum) % totalNumItem;\n this.scrollToFocusedItem(this.selectedIdx);\n } else if (e.key === 'ArrowUp') {\n if (this.selectedIdx == -1) {\n this.selectedIdx = 0;\n }\n this.selectedIdx = (totalNumItem + this.selectedIdx - 1) % totalNumItem;\n this.scrollToFocusedItem(this.selectedIdx);\n }\n }\n }\n\n /**\n * Scroll to focused item\n * * @param index\n */\n scrollToFocusedItem(index) {\n let listElement = null;\n // Define list element\n if (!this.historyList.length || !this.isHistoryListVisible) {\n // filteredList element\n listElement = this.filteredListElement.nativeElement;\n } else {\n // historyList element\n listElement = this.historyListElement.nativeElement;\n }\n\n const items = Array.prototype.slice.call(listElement.childNodes).filter((node: any) => {\n if (node.nodeType === 1) {\n // if node is element\n return node.className.includes('item');\n } else {\n return false;\n }\n });\n\n if (!items.length) {\n return;\n }\n\n const listHeight = listElement.offsetHeight;\n const itemHeight = items[index].offsetHeight;\n const visibleTop = listElement.scrollTop;\n const visibleBottom = listElement.scrollTop + listHeight - itemHeight;\n const targetPosition = items[index].offsetTop;\n\n if (targetPosition < visibleTop) {\n listElement.scrollTop = targetPosition;\n }\n\n if (targetPosition > visibleBottom) {\n listElement.scrollTop = targetPosition - listHeight + itemHeight;\n }\n }\n\n /**\n * Select item on enter click\n */\n onHandleEnter() {\n // click enter to choose item from filteredList or historyList\n if (this.selectedIdx > -1) {\n if (!this.historyList.length || !this.isHistoryListVisible) {\n // filteredList\n this.query = !this.isTypeString(this.filteredList[this.selectedIdx])\n ? this.filteredList[this.selectedIdx][this.searchKeyword]\n : this.filteredList[this.selectedIdx];\n\n this.saveHistory(this.filteredList[this.selectedIdx]);\n this.select(this.filteredList[this.selectedIdx]);\n } else {\n // historyList\n this.query = !this.isTypeString(this.historyList[this.selectedIdx])\n ? this.historyList[this.selectedIdx][this.searchKeyword]\n : this.historyList[this.selectedIdx];\n this.saveHistory(this.historyList[this.selectedIdx]);\n this.select(this.historyList[this.selectedIdx]);\n }\n }\n this.isHistoryListVisible = false;\n this.handleClose();\n }\n\n /**\n * Esc click\n */\n onEsc() {\n this.searchInput.nativeElement.blur();\n this.handleClose();\n }\n\n /**\n * Tab click\n */\n onTab() {\n this.searchInput.nativeElement.blur();\n this.handleClose();\n }\n\n /**\n * Delete click\n */\n onDelete() {\n this.isOpen = true;\n }\n\n\n /**\n * Select item to save in localStorage\n * @param selected\n */\n saveHistory(selected) {\n if (this.historyIdentifier) {\n // check if selected item exists in historyList\n if (!this.historyList.some((item) => !this.isTypeString(item)\n ? item[this.searchKeyword] == selected[this.searchKeyword] : item == selected)) {\n this.saveHistoryToLocalStorage([selected, ...this.historyList]);\n\n // check if items don't exceed max allowed number\n if (this.historyList.length >= this.historyListMaxNumber) {\n this.historyList.splice(this.historyList.length - 1, 1);\n this.saveHistoryToLocalStorage([selected, ...this.historyList]);\n }\n } else {\n // if selected item exists in historyList swap to top in array\n if (!this.isTypeString(selected)) {\n // object logic\n const copiedHistoryList = this.historyList.slice(); // copy original historyList array\n const selectedIndex = copiedHistoryList.map((item) => item[this.searchKeyword]).indexOf(selected[this.searchKeyword]);\n copiedHistoryList.splice(selectedIndex, 1);\n copiedHistoryList.splice(0, 0, selected);\n this.saveHistoryToLocalStorage([...copiedHistoryList]);\n } else {\n // string logic\n const copiedHistoryList = this.historyList.slice(); // copy original historyList array\n copiedHistoryList.splice(this.historyList.indexOf(selected), 1);\n copiedHistoryList.splice(0, 0, selected);\n this.saveHistoryToLocalStorage([...copiedHistoryList]);\n }\n }\n }\n }\n\n /**\n * Save item in localStorage\n * @param selected\n */\n saveHistoryToLocalStorage(selected) {\n window.localStorage.setItem(\n `${this.historyIdentifier}`,\n JSON.stringify(selected)\n );\n }\n\n /**\n * Remove item from localStorage\n * @param index\n * @param e event\n */\n removeHistoryItem(index, e) {\n e.stopPropagation();\n this.historyList = this.historyList.filter((v, i) => i !== index);\n this.saveHistoryToLocalStorage(this.historyList);\n if (this.historyList.length == 0) {\n window.localStorage.removeItem(`${this.historyIdentifier}`);\n this.filterList();\n }\n }\n\n /**\n * Reset localStorage\n * @param e event\n */\n resetHistoryList(e) {\n e.stopPropagation();\n this.historyList = [];\n window.localStorage.removeItem(`${this.historyIdentifier}`);\n this.filterList();\n }\n}\n","\n
\n\n \n
\n \n
0 && heading\">\n
{{heading}}
\n
\n\n
\n - \n \n
\n \n \n
\n \n \n \n \n
\n \n
\n
\n\n \n
\n \n
0 && historyHeading\">\n
{{historyHeading}}
\n
\n delete\n
\n
\n\n
\n - \n \n
\n \n \n
\n \n \n \n \n
\n \n close\n
\n \n
\n
\n\n \n
\n \n \n
\n