UNPKG

@salimzakari/ngx-time-picker

Version:

An angular time picker component that allows user to select time.

1 lines 14.5 kB
{"version":3,"file":"salimzakari-ngx-time-picker.mjs","sources":["../../../../projects/ngx-time-picker/src/lib/ngx-time-picker.component.ts","../../../../projects/ngx-time-picker/src/lib/ngx-time-picker.component.html","../../../../projects/ngx-time-picker/src/lib/ngx-time-picker.module.ts","../../../../projects/ngx-time-picker/src/public-api.ts","../../../../projects/ngx-time-picker/src/salimzakari-ngx-time-picker.ts"],"sourcesContent":["import { Component, ElementRef, EventEmitter, HostListener, Input, Optional, Output, QueryList, Self, ViewChild, ViewChildren } from '@angular/core';\nimport { NgControl } from '@angular/forms';\n\n@Component({\n standalone: false,\n selector: 'ngx-time-picker',\n templateUrl: './ngx-time-picker.component.html',\n styleUrl: './ngx-time-picker.component.scss'\n})\nexport class NgxTimePickerComponent {\n @Input() placeholder: string = \"\"\n @Input() inputClass: string = \"\"\n @Input() selectedClass: string = \"\"\n @Input() dropdownClass: string = \"\"\n @Output() selectInputChange = new EventEmitter();\n\n top = 0\n left = 0\n selectedHour = \"00\"\n selectedMinute = \"00\"\n dropdownOpen: boolean = false;\n selectedOption: SelectOptionItem | null = null;\n hours = Array.from(new Array(24).keys()).map((_, i) => `${i < 10 ? '0' : ''}${i}`);\n minutes = Array.from(new Array(60).keys()).map((_, i) => `${i < 10 ? '0' : ''}${i}`);\n\n @ViewChild('input') input: ElementRef | undefined;\n @ViewChildren('hour') hourElements: QueryList<ElementRef> | undefined;\n @ViewChildren('minute') minuteElements: QueryList<ElementRef> | undefined;\n @ViewChild('hourContainer') hourContainer: ElementRef | undefined;\n @ViewChild('minuteContainer') minuteContainer: ElementRef | undefined;\n\n private onTouched: Function = () => { };\n private onChanged: Function = (item: SelectOptionItem | null) => { };\n\n constructor(private el: ElementRef, @Self() @Optional() public control: NgControl) {\n if (this.control)\n this.control.valueAccessor = this;\n }\n\n public get invalid(): boolean | null {\n return this.control ? this.control.invalid : false;\n }\n\n public get disabled(): boolean | null {\n return this.control ? this.control.disabled : false;\n }\n\n public get showError(): boolean | null {\n if (!this.control) {\n return false;\n }\n\n const { dirty, touched } = this.control;\n return this.invalid ? (dirty || touched) : false;\n }\n\n writeValue(item: string | null): void {\n this.selectedHour = (item as string)?.split(':')[0] || \"00\"\n this.selectedMinute = (item as string)?.split(':')[1] || \"00\"\n\n if (this.hourContainer && this.minuteContainer && this.hourElements && this.minuteElements)\n this.scrollToPosition();\n\n }\n\n scrollToPosition() {\n const scrollTop = this.hourContainer?.nativeElement.scrollTop\n const containerRect = this.hourContainer?.nativeElement.getBoundingClientRect();\n const top = this.hourElements?.get(+this.selectedHour)?.nativeElement?.getBoundingClientRect()?.top;\n const scrollPosition = top - containerRect?.top + scrollTop\n\n this.hourContainer?.nativeElement?.scrollTo({\n top: scrollPosition,\n behavior: \"smooth\"\n })\n\n const m_scrollTop = this.minuteContainer?.nativeElement.scrollTop\n const m_containerRect = this.minuteContainer?.nativeElement.getBoundingClientRect();\n const m_top = this.minuteElements?.get(+this.selectedMinute)?.nativeElement?.getBoundingClientRect()?.top;\n const m_scrollPosition = m_top - m_containerRect?.top + m_scrollTop\n\n this.minuteContainer?.nativeElement?.scrollTo({\n top: m_scrollPosition,\n behavior: \"smooth\"\n })\n\n }\n\n registerOnChange(fn: any): void {\n this.onChanged = fn;\n }\n\n registerOnTouched(fn: any): void {\n this.onTouched = fn;\n }\n\n selectHour(hour: string) {\n this.selectedHour = hour;\n const value = this.selectedHour + \":\" + this.selectedMinute\n this.onTouched();\n this.writeValue(value)\n this.onChanged(value);\n }\n\n selectMinute(minute: string) {\n this.selectedMinute = minute;\n const value = this.selectedHour + \":\" + this.selectedMinute\n this.onTouched();\n this.writeValue(value)\n this.onChanged(value);\n }\n\n @HostListener('document:click', ['$event'])\n clickout(event: any) {\n if (!this.el.nativeElement.contains(event.target) && this.dropdownOpen) {\n this.dropdownOpen = false;\n this.onTouched() //Calls onTouched whenever dropdown is closed, check if there's a validation error\n }\n }\n\n @HostListener('window:resize', ['$event'])\n onResize() {\n this.updatePosition()\n }\n\n @HostListener('window:scroll', ['$event'])\n onScroll() {\n this.updatePosition()\n }\n\n toggleDropdown() {\n if (this.dropdownOpen) this.onTouched() //Calls onTouched whenever dropdown is closed, check if there's a validation error\n this.dropdownOpen = !this.dropdownOpen\n if (this.dropdownOpen) {\n setTimeout(() => {\n this.scrollToPosition()\n }, 10)\n this.updatePosition()\n }\n }\n\n selectNow() {\n const date = new Date()\n this.selectHour(date.toTimeString().split(\":\")[0])\n this.selectMinute(date.toTimeString().split(\":\")[1])\n this.toggleDropdown()\n }\n\n emitChange() {\n this.onTouched()\n this.selectInputChange.emit();\n }\n\n updatePosition = () => {\n this.top = this.input?.nativeElement.getBoundingClientRect().top + this.input?.nativeElement.getBoundingClientRect().height\n this.left = this.input?.nativeElement.getBoundingClientRect().left\n }\n\n ngAfterViewInit(): void {\n setTimeout(() => {\n this.updatePosition()\n }, 0);\n\n }\n}\n\nexport interface SelectOptionItem {\n label: string,\n value: string\n}\n","<div class=\"ngx-time-picker\">\n <input #input [ngClass]=\"{'ngx-time-picker-error': showError}\" (click)=\"toggleDropdown()\" type=\"text\"\n [readOnly]=\"true\" [value]=\"selectedHour || selectedMinute ? selectedHour+':'+selectedMinute : null\"\n [placeholder]=\"placeholder\" [disabled]=\"disabled\" (change)=\"emitChange()\" class=\"time-picker-input\"\n [class]=\"inputClass\" />\n <div *ngIf=\"dropdownOpen\" class=\"ngx-time-picker-dropdown\" [style.top]=\"top+'px'\" [style.left]=\"left+'px'\"\n [class]=\"dropdownClass\">\n <div class=\"ngx-time-picker-time-options\">\n <ul #hourContainer>\n <li #hour *ngFor=\"let hour of hours\" class=\"time-option\" (click)=\"selectHour(hour)\"\n [ngClass]=\" hour == selectedHour && selectedClass.length != 0 ? selectedClass : hour == selectedHour ? 'ngx-time-picker-selected' : ''\">\n {{hour}}\n </li>\n </ul>\n <ul #minuteContainer>\n <li #minute *ngFor=\"let minute of minutes\" class=\"time-option\" (click)=\"selectMinute(minute)\"\n [ngClass]=\" minute == selectedMinute && selectedClass.length != 0 ? selectedClass : minute == selectedMinute ? 'ngx-time-picker-selected' : ''\">\n {{minute}}\n </li>\n </ul>\n </div>\n <div class=\"ngx-time-picker-selected\">\n <button type=\"button\" (click)=\"toggleDropdown()\">Ok</button>\n </div>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { NgxTimePickerComponent } from './ngx-time-picker.component';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n declarations: [\n NgxTimePickerComponent\n ],\n imports: [\n CommonModule\n ],\n exports: [\n NgxTimePickerComponent,\n ]\n})\nexport class NgxTimePickerModule { }\n","/*\n * Public API Surface of ngx-time-picker\n */\n\nexport * from './lib/ngx-time-picker.component';\nexport * from './lib/ngx-time-picker.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}