From 7e586780d3488f8b41bb8c244ea5ee40ee975c13 Mon Sep 17 00:00:00 2001 From: Alexander Friesen Date: Sun, 26 Nov 2023 16:12:00 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20remove=20ngStyle=20and=20n?= =?UTF-8?q?gClass?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ngx-mat-timepicker-control.component.html | 89 ++--- .../ngx-mat-timepicker-control.component.ts | 365 ++++++++++-------- ...mat-timepicker-dial-control.component.html | 48 +-- ...x-mat-timepicker-dial-control.component.ts | 4 +- .../ngx-mat-timepicker-dial.component.html | 8 +- .../ngx-mat-timepicker-dial.component.ts | 5 +- .../ngx-mat-timepicker-face.component.html | 14 +- .../ngx-mat-timepicker-face.component.ts | 4 +- .../ngx-mat-timepicker-field.component.html | 5 +- .../ngx-mat-timepicker-period.component.html | 4 +- .../ngx-mat-timepicker-period.component.ts | 45 ++- 11 files changed, 306 insertions(+), 285 deletions(-) diff --git a/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-control/ngx-mat-timepicker-control.component.html b/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-control/ngx-mat-timepicker-control.component.html index 0493dfd..118e431 100644 --- a/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-control/ngx-mat-timepicker-control.component.html +++ b/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-control/ngx-mat-timepicker-control.component.html @@ -1,44 +1,47 @@ - - -
- - - - - - - - - - - - -
+ + +
+ + + + + + + + + + + + +
diff --git a/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-control/ngx-mat-timepicker-control.component.ts b/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-control/ngx-mat-timepicker-control.component.ts index 18845d6..a178935 100644 --- a/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-control/ngx-mat-timepicker-control.component.ts +++ b/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-control/ngx-mat-timepicker-control.component.ts @@ -1,227 +1,252 @@ -import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from "@angular/core"; -import { NgClass } from "@angular/common"; -import { FormsModule } from "@angular/forms"; -import { MatInputModule } from "@angular/material/input"; -import {ThemePalette} from "@angular/material/core"; -import { FloatLabelType, MatFormFieldModule } from "@angular/material/form-field"; -// -import {NgxMatTimepickerUnits} from "../../models/ngx-mat-timepicker-units.enum"; -import {NgxMatTimepickerParserPipe} from "../../pipes/ngx-mat-timepicker-parser.pipe"; -import {NgxMatTimepickerClockFace} from "../../models/ngx-mat-timepicker-clock-face.interface"; -import {NgxMatTimepickerUtils} from "../../utils/ngx-mat-timepicker.utils"; -import { NgxMatTimepickerTimeLocalizerPipe } from "../../pipes/ngx-mat-timepicker-time-localizer.pipe"; +import { + ChangeDetectionStrategy, + Component, + EventEmitter, + Input, + OnChanges, + Output, + SimpleChanges, +} from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MatInputModule } from '@angular/material/input'; +import { ThemePalette } from '@angular/material/core'; +import { + FloatLabelType, + MatFormFieldModule, +} from '@angular/material/form-field'; + +import { NgxMatTimepickerUnits } from '../../models/ngx-mat-timepicker-units.enum'; +import { NgxMatTimepickerParserPipe } from '../../pipes/ngx-mat-timepicker-parser.pipe'; +import { NgxMatTimepickerClockFace } from '../../models/ngx-mat-timepicker-clock-face.interface'; +import { NgxMatTimepickerUtils } from '../../utils/ngx-mat-timepicker.utils'; +import { NgxMatTimepickerTimeLocalizerPipe } from '../../pipes/ngx-mat-timepicker-time-localizer.pipe'; function concatTime(currentTime: string, nextTime: string): number | undefined { - const isNumber = /\d/.test(nextTime); + const isNumber = /\d/.test(nextTime); - if (isNumber) { - const time = currentTime + nextTime; + if (isNumber) { + const time = currentTime + nextTime; - return +time; - } + return +time; + } - return undefined; + return undefined; } @Component({ - selector: "ngx-mat-timepicker-time-control", - templateUrl: "./ngx-mat-timepicker-control.component.html", - styleUrls: ["./ngx-mat-timepicker-control.component.scss"], - changeDetection: ChangeDetectionStrategy.OnPush, - providers: [NgxMatTimepickerParserPipe], - standalone: true, - imports: [MatFormFieldModule, NgClass, MatInputModule, FormsModule, NgxMatTimepickerParserPipe, NgxMatTimepickerTimeLocalizerPipe] + selector: 'ngx-mat-timepicker-time-control', + templateUrl: './ngx-mat-timepicker-control.component.html', + styleUrls: ['./ngx-mat-timepicker-control.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [NgxMatTimepickerParserPipe], + standalone: true, + imports: [ + MatFormFieldModule, + MatInputModule, + FormsModule, + NgxMatTimepickerParserPipe, + NgxMatTimepickerTimeLocalizerPipe, + ], }) - export class NgxMatTimepickerControlComponent implements OnChanges { + static nextId: number = 0; - static nextId: number = 0; - - @Input() - set color(newValue: ThemePalette) { - this._color = newValue; - } + @Input() + set color(newValue: ThemePalette) { + this._color = newValue; + } - get color(): ThemePalette { - return this._color; - } + get color(): ThemePalette { + return this._color; + } - @Input() disabled: boolean; + @Input() disabled: boolean; - @Input() - set floatLabel(newValue: FloatLabelType) { - this._floatLabel = newValue; - } + @Input() + set floatLabel(newValue: FloatLabelType) { + this._floatLabel = newValue; + } - get floatLabel(): FloatLabelType { - return this._floatLabel; - } + get floatLabel(): FloatLabelType { + return this._floatLabel; + } - id: number = NgxMatTimepickerControlComponent.nextId++; - isFocused: boolean; - @Input() max: number; - @Input() min: number; - @Input() placeholder: string; - @Input() preventTyping: boolean; + id: number = NgxMatTimepickerControlComponent.nextId++; + isFocused: boolean; + @Input() max: number; + @Input() min: number; + @Input() placeholder: string; + @Input() preventTyping: boolean; - @Input() time: number; + @Input() time: number; - @Output() timeChanged = new EventEmitter(); - @Input() timeList: NgxMatTimepickerClockFace[]; - @Input() timeUnit: NgxMatTimepickerUnits; + @Output() timeChanged = new EventEmitter(); + @Input() timeList: NgxMatTimepickerClockFace[]; + @Input() timeUnit: NgxMatTimepickerUnits; - private _color: ThemePalette = "primary"; - private _floatLabel: FloatLabelType = "auto"; - private _previousTime: number; + private _color: ThemePalette = 'primary'; + private _floatLabel: FloatLabelType = 'auto'; + private _previousTime: number; - constructor(private _timeParser: NgxMatTimepickerParserPipe) { - } + constructor(private _timeParser: NgxMatTimepickerParserPipe) {} - changeTime(event: InputEvent): void { - event.stopPropagation(); - const char = event.data; - const time = concatTime(String(this.time), char); + changeTime(event: InputEvent): void { + event.stopPropagation(); + const char = event.data; + const time = concatTime(String(this.time), char); - this._changeTimeIfValid(time); - } + this._changeTimeIfValid(time); + } - decrease(): void { - if (!this.disabled) { - let previousTime = +this.time - 1; + decrease(): void { + if (!this.disabled) { + let previousTime = +this.time - 1; - if (previousTime < this.min) { - previousTime = this.max; - } + if (previousTime < this.min) { + previousTime = this.max; + } - if (this._isSelectedTimeDisabled(previousTime)) { - previousTime = this._getAvailableTime(previousTime, this._getPrevAvailableTime.bind(this)); - } + if (this._isSelectedTimeDisabled(previousTime)) { + previousTime = this._getAvailableTime( + previousTime, + this._getPrevAvailableTime.bind(this), + ); + } - if (previousTime !== this.time) { - this.timeChanged.emit(previousTime); - } - } + if (previousTime !== this.time) { + this.timeChanged.emit(previousTime); + } } + } - increase(): void { - if (!this.disabled) { - let nextTime = +this.time + 1; + increase(): void { + if (!this.disabled) { + let nextTime = +this.time + 1; - if (nextTime > this.max) { - nextTime = this.min; - } + if (nextTime > this.max) { + nextTime = this.min; + } - if (this._isSelectedTimeDisabled(nextTime)) { - nextTime = this._getAvailableTime(nextTime, this._getNextAvailableTime.bind(this)); - } + if (this._isSelectedTimeDisabled(nextTime)) { + nextTime = this._getAvailableTime( + nextTime, + this._getNextAvailableTime.bind(this), + ); + } - if (nextTime !== this.time) { - this.timeChanged.emit(nextTime); - } - } + if (nextTime !== this.time) { + this.timeChanged.emit(nextTime); + } } + } - ngOnChanges(changes: SimpleChanges): void { - if (changes["timeList"] && this.time != null) { - if (this._isSelectedTimeDisabled(this.time)) { - this._setAvailableTime(); - } - } + ngOnChanges(changes: SimpleChanges): void { + if (changes['timeList'] && this.time != null) { + if (this._isSelectedTimeDisabled(this.time)) { + this._setAvailableTime(); + } } + } - onBlur(): void { - this.isFocused = false; + onBlur(): void { + this.isFocused = false; - if (this._previousTime !== this.time) { - this._changeTimeIfValid(+this.time); - } + if (this._previousTime !== this.time) { + this._changeTimeIfValid(+this.time); } + } - onFocus(): void { - this.isFocused = true; - this._previousTime = this.time; + onFocus(): void { + this.isFocused = true; + this._previousTime = this.time; + } + + onKeydown(event: KeyboardEvent): void { + event.stopPropagation(); + + if (!NgxMatTimepickerUtils.isDigit(event)) { + event.preventDefault(); } - onKeydown(event: any): void { - event.stopPropagation(); - - if (!NgxMatTimepickerUtils.isDigit(event)) { - event.preventDefault(); - } - - switch (event.key) { - case "ArrowUp": - this.increase(); - break; - case "ArrowDown": - this.decrease(); - break; - } - - if (this.preventTyping && event.key !== "Tab") { - event.preventDefault(); - } + switch (event.key) { + case 'ArrowUp': + this.increase(); + break; + case 'ArrowDown': + this.decrease(); + break; } - onModelChange(value: string): void { - this.time = +this._timeParser.transform(value, this.timeUnit); + if (this.preventTyping && event.key !== 'Tab') { + event.preventDefault(); } + } - private _changeTimeIfValid(value: number | undefined): void { - if (!isNaN(value)) { - this.time = value; + onModelChange(value: string): void { + this.time = +this._timeParser.transform(value, this.timeUnit); + } - if (this.time > this.max) { - const timeString = String(value); - this.time = +timeString[timeString.length - 1]; - } + private _changeTimeIfValid(value: number | undefined): void { + if (!isNaN(value)) { + this.time = value; - if (this.time < this.min) { - this.time = this.min; - } + if (this.time > this.max) { + const timeString = String(value); + this.time = +timeString[timeString.length - 1]; + } - this.timeChanged.emit(this.time); - } - } + if (this.time < this.min) { + this.time = this.min; + } - private _getAvailableTime(currentTime: number, fn: (index: number) => number | undefined): number | undefined { - const currentTimeIndex = this.timeList.findIndex(time => time.time === currentTime); - const availableTime = fn(currentTimeIndex); - - return availableTime != null ? availableTime : this.time; + this.timeChanged.emit(this.time); } + } - private _getNextAvailableTime(index: number): number | undefined { - const timeCollection = this.timeList; - const maxValue = timeCollection.length; - for (let i = index + 1; i < maxValue; i++) { - const time = timeCollection[i]; - if (!time.disabled) { - return time.time; - } - } - - return undefined; - } + private _getAvailableTime( + currentTime: number, + fn: (index: number) => number | undefined, + ): number | undefined { + const currentTimeIndex = this.timeList.findIndex( + (time) => time.time === currentTime, + ); + const availableTime = fn(currentTimeIndex); - private _getPrevAvailableTime(index: number): number | undefined { - for (let i = index; i >= 0; i--) { - const time = this.timeList[i]; - if (!time.disabled) { - return time.time; - } - } + return availableTime != null ? availableTime : this.time; + } - return undefined; + private _getNextAvailableTime(index: number): number | undefined { + const timeCollection = this.timeList; + const maxValue = timeCollection.length; + for (let i = index + 1; i < maxValue; i++) { + const time = timeCollection[i]; + if (!time.disabled) { + return time.time; + } } - private _isSelectedTimeDisabled(time: number): boolean { - return this.timeList.find((faceTime: NgxMatTimepickerClockFace) => faceTime.time === time).disabled; - } + return undefined; + } - private _setAvailableTime(): void { - this.time = this.timeList.find(t => !t.disabled).time; - this.timeChanged.emit(this.time); + private _getPrevAvailableTime(index: number): number | undefined { + for (let i = index; i >= 0; i--) { + const time = this.timeList[i]; + if (!time.disabled) { + return time.time; + } } -} + return undefined; + } + + private _isSelectedTimeDisabled(time: number): boolean { + return this.timeList.find( + (faceTime: NgxMatTimepickerClockFace) => faceTime.time === time, + ).disabled; + } + + private _setAvailableTime(): void { + this.time = this.timeList.find((t) => !t.disabled).time; + this.timeChanged.emit(this.time); + } +} diff --git a/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial-control/ngx-mat-timepicker-dial-control.component.html b/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial-control/ngx-mat-timepicker-dial-control.component.html index 300b503..ecf4e65 100644 --- a/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial-control/ngx-mat-timepicker-dial-control.component.html +++ b/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial-control/ngx-mat-timepicker-dial-control.component.html @@ -1,26 +1,28 @@ @if (!isEditable) { - + } @else { - + } diff --git a/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial-control/ngx-mat-timepicker-dial-control.component.ts b/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial-control/ngx-mat-timepicker-dial-control.component.ts index 6738dfd..d49165e 100644 --- a/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial-control/ngx-mat-timepicker-dial-control.component.ts +++ b/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial-control/ngx-mat-timepicker-dial-control.component.ts @@ -8,8 +8,7 @@ import { AfterViewInit, } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { NgClass } from '@angular/common'; -// + import { NgxMatTimepickerUnits } from '../../models/ngx-mat-timepicker-units.enum'; import { NgxMatTimepickerClockFace } from '../../models/ngx-mat-timepicker-clock-face.interface'; import { NgxMatTimepickerParserPipe } from '../../pipes/ngx-mat-timepicker-parser.pipe'; @@ -29,7 +28,6 @@ function retainSelection(this: HTMLInputElement) { standalone: true, imports: [ FormsModule, - NgClass, NgxMatTimepickerAutofocusDirective, NgxMatTimepickerParserPipe, NgxMatTimepickerTimeLocalizerPipe, diff --git a/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial/ngx-mat-timepicker-dial.component.html b/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial/ngx-mat-timepicker-dial.component.html index a67dbd3..83ca28f 100644 --- a/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial/ngx-mat-timepicker-dial.component.html +++ b/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial/ngx-mat-timepicker-dial.component.html @@ -44,16 +44,16 @@ } @if (isEditable || editableHintTmpl) { -
+
- * use arrows (⇅) to change the time + + * use arrows (⇅) to change the time +
} diff --git a/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial/ngx-mat-timepicker-dial.component.ts b/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial/ngx-mat-timepicker-dial.component.ts index 8d2978c..1014868 100644 --- a/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial/ngx-mat-timepicker-dial.component.ts +++ b/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial/ngx-mat-timepicker-dial.component.ts @@ -9,8 +9,8 @@ import { TemplateRef, } from '@angular/core'; import { ThemePalette } from '@angular/material/core'; -import { NgClass, NgTemplateOutlet } from '@angular/common'; -// +import { NgTemplateOutlet } from '@angular/common'; + import { NgxMatTimepickerFormatType } from '../../models/ngx-mat-timepicker-format.type'; import { NgxMatTimepickerPeriods } from '../../models/ngx-mat-timepicker-periods.enum'; import { NgxMatTimepickerUnits } from '../../models/ngx-mat-timepicker-units.enum'; @@ -29,7 +29,6 @@ import { DateTime, Info } from 'ts-luxon'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - NgClass, NgTemplateOutlet, NgxMatTimepickerDialControlComponent, NgxMatTimepickerPeriodComponent, diff --git a/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-face/ngx-mat-timepicker-face.component.html b/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-face/ngx-mat-timepicker-face.component.html index 09eb7ce..54c40cb 100644 --- a/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-face/ngx-mat-timepicker-face.component.html +++ b/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-face/ngx-mat-timepicker-face.component.html @@ -9,7 +9,7 @@ ? color : 'void' " - [ngStyle]="{ transform: 'rotateZ(-' + time.angle + 'deg)' }" + [style.transform]="'rotateZ(-' + time.angle + 'deg)'" [disabled]="time.disabled" > {{ time.time | timeLocalizer: timeUnit.HOUR }} @@ -22,7 +22,7 @@ @for (time of faceTime | slice: 0 : 12; track time.time) {
} @if (unit === timeUnit.MINUTE) { diff --git a/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-face/ngx-mat-timepicker-face.component.ts b/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-face/ngx-mat-timepicker-face.component.ts index e86664b..c11c566 100644 --- a/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-face/ngx-mat-timepicker-face.component.ts +++ b/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-face/ngx-mat-timepicker-face.component.ts @@ -13,7 +13,7 @@ import { ViewChild, ViewEncapsulation, } from '@angular/core'; -import { NgStyle, NgTemplateOutlet, NgClass, SlicePipe } from '@angular/common'; +import { NgTemplateOutlet, SlicePipe } from '@angular/common'; import { ThemePalette } from '@angular/material/core'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatButtonModule } from '@angular/material/button'; @@ -72,8 +72,6 @@ const CLOCK_HAND_STYLES = { encapsulation: ViewEncapsulation.None, standalone: true, imports: [ - NgClass, - NgStyle, NgTemplateOutlet, SlicePipe, MatButtonModule, diff --git a/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-field/ngx-mat-timepicker-field.component.html b/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-field/ngx-mat-timepicker-field.component.html index 8c55091..6b917a3 100644 --- a/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-field/ngx-mat-timepicker-field.component.html +++ b/projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-field/ngx-mat-timepicker-field.component.html @@ -1,7 +1,4 @@ -
+
{{ meridiems[0] }} @@ -14,7 +14,7 @@