{"version":3,"file":"scroll-dropdown.mjs","sources":["../../../projects/scroll-dropdown/src/lib/custom-dropdown-scroll/custom-select.service.ts","../../../projects/scroll-dropdown/src/lib/custom-dropdown-scroll/custom-select-option.component.ts","../../../projects/scroll-dropdown/src/lib/custom-dropdown-scroll/shared-scroll-dropdown.module.ts","../../../projects/scroll-dropdown/src/lib/custom-dropdown-scroll/custom-dropdown-scroll.component.ts","../../../projects/scroll-dropdown/src/lib/custom-dropdown-scroll/custom-dropdown-scroll.component.html","../../../projects/scroll-dropdown/src/lib/scroll-dropdown.module.ts","../../../projects/scroll-dropdown/src/public-api.ts","../../../projects/scroll-dropdown/src/scroll-dropdown.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { CustomDropdownScrollComponent } from './custom-dropdown-scroll.component';\r\n\r\n@Injectable()\r\nexport class CustomSelectService {\r\n private select!: CustomDropdownScrollComponent;\r\n\r\n public register(select: CustomDropdownScrollComponent): void {\r\n this.select = select;\r\n }\r\n\r\n public getSelect(): CustomDropdownScrollComponent {\r\n return this.select;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ElementRef,\r\n HostBinding,\r\n HostListener,\r\n Input,\r\n ViewChild,\r\n} from '@angular/core';\r\nimport { CustomDropdownScrollComponent } from './custom-dropdown-scroll.component';\r\nimport { CustomSelectService } from './custom-select.service';\r\nimport { CommonModule } from '@angular/common';\r\n\r\n@Component({\r\n selector: 'custom-select-option',\r\n standalone: true,\r\n imports: [CommonModule],\r\n template: ``,\r\n styleUrls: ['./custom-select-option.component.scss'],\r\n host: {\r\n role: 'listbox',\r\n '[attr.aria-label]': 'value',\r\n },\r\n})\r\nexport class CustomSelectOptionComponent {\r\n @Input()\r\n public value!: any;\r\n\r\n @HostBinding('class.disabled')\r\n @Input()\r\n public disabled = false;\r\n\r\n private select: CustomDropdownScrollComponent;\r\n\r\n @ViewChild('option')\r\n private option!: ElementRef;\r\n\r\n constructor(private dropdownService: CustomSelectService) {\r\n this.select = this.dropdownService.getSelect();\r\n }\r\n\r\n @HostListener('click', ['$event'])\r\n public onClick(event: UIEvent): void {\r\n event.preventDefault();\r\n if (!this.disabled) {\r\n this.select.selectOption(this);\r\n }\r\n }\r\n\r\n public getOptionElement(): any {\r\n return this.option.nativeElement;\r\n }\r\n}\r\n","import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from \"@angular/core\";\r\nimport { FormsModule, ReactiveFormsModule } from \"@angular/forms\";\r\nimport { CommonModule } from \"@angular/common\";\r\nimport { OverlayModule } from \"@angular/cdk/overlay\";\r\nimport { PortalModule } from \"@angular/cdk/portal\";\r\nimport { CustomSelectOptionComponent } from \"./custom-select-option.component\";\r\n\r\n@NgModule({\r\n imports: [\r\n FormsModule,\r\n ReactiveFormsModule,\r\n OverlayModule,\r\n CommonModule,\r\n CustomSelectOptionComponent,\r\n PortalModule\r\n ],\r\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\r\n exports: [\r\n FormsModule,\r\n ReactiveFormsModule,\r\n OverlayModule,\r\n CommonModule,\r\n CustomSelectOptionComponent,\r\n PortalModule\r\n ],\r\n})\r\nexport class SharedHomeModule {\r\n ScriptElement?: HTMLScriptElement;\r\n JquerySrciptElement?: HTMLScriptElement;\r\n\r\n constructor() {\r\n\r\n }\r\n}","import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';\nimport { CdkPortal } from '@angular/cdk/portal';\nimport {\n AfterViewInit,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostListener,\n Input,\n OnInit,\n Output,\n QueryList,\n ViewChild,\n ViewChildren,\n} from '@angular/core';\nimport {\n AbstractControl,\n ControlValueAccessor,\n NG_VALIDATORS,\n NG_VALUE_ACCESSOR,\n ValidationErrors,\n Validator,\n} from '@angular/forms';\n\nimport { noop } from 'rxjs';\nimport { CustomSelectOptionComponent } from './custom-select-option.component';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { CustomSelectService } from './custom-select.service';\nimport { SharedHomeModule } from './shared-scroll-dropdown.module';\n\nexport interface CustomSelectEvent {\n source: CustomDropdownScrollComponent;\n selected: any;\n}\n\n@Component({\n selector: 'dropdown-scroll',\n templateUrl: './custom-dropdown-scroll.component.html',\n styleUrls: ['./custom-dropdown-scroll.component.scss'],\n standalone: true,\n imports: [SharedHomeModule],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => CustomDropdownScrollComponent),\n multi: true,\n },\n {\n provide: NG_VALIDATORS,\n multi: true,\n useExisting: CustomDropdownScrollComponent,\n },\n CustomSelectService,\n ],\n})\nexport class CustomDropdownScrollComponent implements OnInit, ControlValueAccessor, Validator, AfterViewInit {\n @Input('id') public inputId: string = '';\n\n @Input() public label: string = '';\n @Input() public bindLabel: string = '';\n @Input() public bindValue: string = '';\n @Input() public placeholder: string = '';\n @Input() public selectedIndex: number = -1;\n @Input() public required = false;\n @Input() public disabled = false;\n @Input() public error = false;\n @Input() public multiple = false;\n @Input() public search = false;\n\n @Input('aria-label') public ariaLabel = '';\n @Input('aria-labelledby') public ariaLabelledby = '';\n\n @Output() readonly change = new EventEmitter();\n @Input() items: any = [];\n @Output() eventScroll: EventEmitter = new EventEmitter();\n\n @ViewChild('select') public select!: ElementRef;\n @ViewChild(CdkPortal) public contentTemplate!: CdkPortal;\n @ViewChild(\"dropdownContainers\") dropdownContainers!: any;\n @ViewChild(\"InpudropdownContainer\") InpudropdownContainer!: any;\n @ContentChildren(CustomSelectOptionComponent)\n public options!: QueryList;\n itemsPerLoad = 50;\n public displayText!: SafeHtml;\n public displayX: boolean = false;\n private selectedOption: CustomSelectOptionComponent | any;\n private showPlaceholder: boolean = true;\n private overlayRef!: OverlayRef;\n filteredOptions: any = []; // Search results\n displayedOptions: any = []; // Shown on UI\n itemsPerPage = 10;\n currentPage = 1;\n showing?: boolean;\n\n constructor(\n private cd: ChangeDetectorRef,\n private domSanitizer: DomSanitizer,\n private overlay: Overlay,\n private selectService: CustomSelectService\n ) {\n this.selectService.register(this);\n }\n\n public onChangeFn: any = (_: any) => noop();\n\n public onTouchedFn: any = () => noop();\n\n public registerOnChange(fn: any): void {\n this.onChangeFn = fn;\n }\n\n public registerOnTouched(fn: any): void {\n this.onTouchedFn = fn;\n }\n\n public validate(control: AbstractControl): ValidationErrors | null {\n return null;\n }\n\n public ngOnInit(): void {\n if (!this.displayText) {\n this.displayText = this.domSanitizer.bypassSecurityTrustHtml(\n this.placeholder\n );\n }\n this.filteredOptions = [...this.items]; // Copy full list\n this.displayedOptions = this.filteredOptions.slice(0, this.itemsPerPage); // Show first 10\n }\n\n filterOptions(event: Event, bindLabel: any) {\n const input = (event.target as HTMLInputElement).value.toLowerCase();\n this.filteredOptions = this.items.filter((option: any) => option[bindLabel]?.toLowerCase()?.includes(input));\n this.currentPage = 1;\n this.displayedOptions = this.filteredOptions.slice(0, this.itemsPerPage);\n }\n\n loadMore() {\n const nextBatch = this.filteredOptions.slice(this.displayedOptions.length, this.displayedOptions.length + this.itemsPerPage);\n if (nextBatch.length > 0) {\n this.displayedOptions = [...this.displayedOptions, ...nextBatch];\n }\n }\n\n removeOldItems() {\n if (this.displayedOptions.length > this.itemsPerPage) {\n this.displayedOptions.splice(0, this.itemsPerPage); // Remove first 10 items\n }\n }\n\n hasMoreItems(): boolean {\n return this.displayedOptions.length < this.filteredOptions.length;\n }\n\n ngAfterViewInit() {\n console.log(this.contentTemplate, \"dropdownContainer\")\n }\n\n public writeValue(obj: any): void { }\n\n public onTouched(): void {\n this.onTouchedFn();\n }\n\n private onChange(): void {\n if (this.bindValue != '') {\n this.onChangeFn(this.selectedOption.value[this.bindValue]);\n this.change.emit({\n source: this,\n selected: this.selectedOption[this.bindValue],\n });\n } else {\n this.onChangeFn(this.selectedOption.value);\n this.change.emit({\n source: this,\n selected: this.selectedOption,\n });\n }\n }\n\n generateData(id: number) {\n return Array.from({ length: 5000 }, (_, i) => ({ name: `Item ${i + 1} - D${id}` })).slice(0, 50);\n }\n\n public mainSelectClasses(): { [key: string]: any } {\n return {\n mainSelect: true,\n error: this.error,\n disabled: this.disabled,\n placeholder: this.showPlaceholder,\n };\n }\n\n public onDropMenuIconClick(event: UIEvent): void {\n if (!this.disabled) {\n event.stopPropagation();\n this.select.nativeElement.focus();\n this.select.nativeElement.click();\n }\n }\n\n public selectOption(option: CustomSelectOptionComponent) {\n this.hide();\n if (this.selectedOption !== option) {\n this.selectedOption = option;\n this.onChange();\n this.updateDisplayText();\n }\n }\n\n private updateDisplayText(): void {\n if (this.selectedOption !== undefined) {\n this.displayText = this.domSanitizer.bypassSecurityTrustHtml(\n this.selectedOption.getOptionElement().innerHTML\n );\n this.showPlaceholder = false;\n } else {\n this.displayText = this.domSanitizer.bypassSecurityTrustHtml(\n this.placeholder\n );\n this.showPlaceholder = true;\n }\n }\n\n public onKeyDown(event: KeyboardEvent): void { }\n\n public showDropdown(): void {\n this.overlayRef = this.overlay.create(this.getOverlayConfig());\n this.overlayRef.attach(this.contentTemplate);\n this.syncWidth();\n this.overlayRef.backdropClick().subscribe(() => this.hide());\n this.showing = true;\n this.ngOnInit();\n }\n\n private hide(): void {\n this.overlayRef.detach();\n this.showing = false;\n }\n\n private syncWidth(): void {\n if (!this.overlayRef) {\n return;\n }\n\n const refRectWidth =\n this.select.nativeElement.getBoundingClientRect().width;\n this.overlayRef.updateSize({ width: refRectWidth });\n }\n\n private getOverlayConfig(): OverlayConfig {\n const positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(this.select.nativeElement)\n .withPush(true)\n .withPositions([{\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetY: 4,\n }, {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n offsetY: -4,\n }]);\n\n const scrollStrategy = this.overlay.scrollStrategies.reposition();\n return new OverlayConfig({\n positionStrategy: positionStrategy,\n scrollStrategy: scrollStrategy,\n hasBackdrop: true,\n backdropClass: 'cdk-overlay-transparent-backdrop',\n });\n }\n\n\n onScroll(index: number) {\n this.eventScroll.emit(index)\n this.loadMore()\n }\n\n // 🔥 Detect clicks outside the dropdown & close it\n @HostListener('document:click', ['$event'])\n closeDropdown(event: Event) {\n if (this.contentTemplate.templateRef.elementRef.nativeElement &&\n !this.contentTemplate.templateRef.elementRef.nativeElement.contains(event.target) &&\n this.select && this.InpudropdownContainer &&\n !this.InpudropdownContainer.nativeElement.contains(event.target) &&\n !this.select.nativeElement.contains(event.target)) {\n this.hide()\n }\n }\n\n selectedIndexfunc(item: any, index: any) {\n this.selectedIndex = index\n }\n\n}","\n
\n
\n
\n \n \n