tonysamperi / ngx-mat-timepicker

A true material timepicker

Hi there 👋

ngx-mat-timepicker's Issues

[BUG] - Toggle Button Icon is not at the button center

Describe the bug

When using the <ngx-mat-timepicker-field> the toggle icon is not at the center of the toggle button.
In the Image you can roughly see that the icon is not centered. the top of the icon touches the green line.

To Reproduce
simply using:

<ngx-mat-timepicker-field [defaultTime]="'11:11 AM'"></ngx-mat-timepicker-field>
or stackblitz
Expected behavior
The green line should intersect the icon in the middle. If that is the case the icon is centered!

Screenshots

Desktop (if execution):

• OS: Linux Mint
• Browser: Chrome

** Versions

• ngx-mat-timepicker version [ ^13.0.0]
• "material-design-icons": "^3.0.1",
• @angular/core version ^13.2.2
• @angular/material version [^13.2.2]
• typescript version [^4.5.5]

problem in change button text

hi,
I want to know how to customize buttons text? or localize them?

Thanks

[BUG] - ExpressionChangedAfterItHasBeenCheckedError when used in dialog

Describe the bug
When using picker placed in other dialog, closing it is causing ExpressionChangedAfterItHasBeenCheckedError

I've saw there is already some hack to solve other ExpressionChanged issue in the code btw but I think this is different issue.

To Reproduce

• stackblitz
• Click the button to open dialog
• click the watch to open nxg-mat-timepicker (note styles broken at slackbitz but ignore that)
• close that picker dialog (cancel or OK)
• see console: Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'mat-focused': 'true'. Current value: 'false'.

** Versions

• ngx-mat-timepicker "16.0.2"
• @angular/core 16.1.4
• @angular/material 16.1.4
• typescript 4.0.2

Time dial not correctly stylized

When I display the time picker, the time dial is not correctly displayed; see the attached screenshots. If I add the following to my styles.scss, it helps but is still not perfect:

.mat-mdc-mini-fab {
  background-color: rgba(0,0,0,0)!important;
  color: black!important;
}

Am I doing something wrong?

Desktop (if execution):

• OS: Windows 10
• Browser: Chrome

** Versions

• ngx-mat-timepicker version 17.0.3
• @angular/core version 17.2.2
• @angular/material version 17.2.1
• typescript version 5.3.3

** Screenshots

[BUG] - Keyboard input in v15.1.4 is difficult to use

Describe the bug
I believe changes made to fix #49 made it more difficult to enter time with the keyboard.

To Reproduce
Stackblitz: https://stackblitz.com/github/cjohnston-nuvalence/ngx-mat-timepicker-keyboard

If I want to enter a time with "35" as the minutes by the keyboard, for example, there are a couple of ways to do it and each has issues.

All scenarios assume a timepicker with [enableKeyboardInput]="true" set.

Scenario 1:

1. Click the input field to open the clicker
2. The hours field is selected by default
3. Tab to move the keyboard entry to the minutes field or click at the end of the minutes input field
4. The cursor is at the end of the input field
5. Type "35"
6. The minutes input field contains "0035" and the control's time setting is not changed

Scenario 2:

1. Click the input field to open the clicker
2. The hours field is selected by default
3. Click at the beginning of the minutes input field
4. The cursor is at the beginning of the input field
5. Type "35"
6. The minutes input field changes to "30" after entering the 3 and the 5 is ignored

Scenario 3:

1. Click the input field to open the clicker
2. The hours field is selected by default
3. Click at the middle of the minutes input field
4. The cursor is between the 0s in the input field
5. Type "35"
6. The minutes input field changes to "03" after entering the 3 and the 5 is ignored

Expected behavior
In all scenarios the minutes should be set as 35

Desktop (if execution):

• OS: MacOS
• Browser: chrome, safari

** Versions

• ngx-mat-timepicker version [15.1.4]
• @angular/core version [15.1.0]
• @angular/material version [15.1.0]
• typescript version [4.9.4]

[BUG] - "InvalidDateTime" when keyboard input enabled

Describe the bug
When keyboard input is enabled, it is possible to easily trigger a "InvalidDateTime" error in the input area

To Reproduce

1. See https://github.com/cjohnston-nuvalence/ngx-mat-timepicker-keyboard (I couldn't figure out how to get it hooked up to Stackblitz) or simply set [enableKeyboardInput]="true" on a time picker.
2. Click in the input field to open the picker
3. In the minutes input, click at the left of the input so the cursor is before the digits
4. Start entering numbers
5. Any number >= 1 will immediately trigger the InvalidDateTime error
6. Any number of 0s may be entered, but the first non-zero number will trigger the InvalidDateTime error

Expected behavior
No error when editing values via keyboard.

Screenshots

Desktop (if execution):

• OS: [MacOS, Windows, iOS]
• Browser [chrome, safari]

** Versions

• ngx-mat-timepicker version 15.1.2
• @angular/core version 15.1.0
• @angular/material version 15.1.0
• typescript version 4.9.4

[BUG] - wrong appearance

Describe the bug
if you use ngx-mat-timepicker in lazy loading material dialog, it has wrong look.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://github.com/GlebStepenko/ngx-timepicker-bug
2. ng serve
3. Click on Open lazy
4. Click on component

Screenshots

Desktop (if execution):

• OS: [Windows]

• Browser [e.g. chrome]

** Versions

• ngx-mat-timepicker version [e.g. 15.1.3]
• @angular/core version [e.g. 15.1.0]
• @angular/material version [e.g. 15.1.5]
• typescript version [es. 4.9.4]

[BUG] - ESC input for timepicker seems not implemented

Describe the bug
The documentation states to use ESC input for NgxMatTimepickerComponent for closing the timepicker by Esc-key.
Setting this input results in a compile error error NG8002: Can't bind to 'ESC' since it isn't a known property of 'ngx-mat-timepicker'..
Current behaviour is that the timepicker does not close when using the Esc-key,

Versions

• ngx-mat-timepicker version 16.0.3
• @angular/core version 16.1.4
• @angular/material version 16.2.0
• typescript version 4.9.5

[BUG] - Unable to pass string type value when input time value in input field

Describe the bug
The time value that input manually instead of choosing from timepicker dialog will pass the time value as object but not string

which will hit the TypeError: time.split is not a function

To Reproduce
remove the readonly in html input and type the time value in input field.

Expected behavior
A string type time value should be able to pass to the ngx-mat-timepicker.js

Desktop (if execution):

• OS: [Windows 10]
• Browser [chrome]

** Versions

• ngx-mat-timepicker version [11.0.5]
• @angular/core version [11.2.4]
• @angular/material version [11.2.3]
• typescript version [4.0.3]

[BUG] - Append to Input does not work

Describe the bug
Having a timepicker that appends to the input will still open a dialog in the middle of the screen with the buttons. The timepicker will not have a background either.

To Reproduce

<mat-form-field appearance="outline">
  <mat-label>{{ item.label }}</mat-label>
  <input type="text" matInput [ngxMatTimepicker]="timepicker" format="24"
         [matTooltip]="item.toolTip" [required]="required" readonly [formControl]="formControlItem">

    <!-- Clear Timefield -->
    <button mat-icon-button matSuffix
            *ngIf="formControlItem.value && !formControlItem.disabled && !required" (click)="onClear($event)">
      <mat-icon>close</mat-icon>
    </button>

    <button mat-icon-button [disabled]="formControlItem.disabled" (click)="openFromIcon()" matSuffix>
      <mat-icon>
        watch_later_outlined
      </mat-icon>
    </button>
</mat-form-field>

<ngx-mat-timepicker [appendToInput]="true" #timepicker [append]></ngx-mat-timepicker>

import { NgxMatTimepickerComponent } from 'ngx-mat-timepicker/lib/components/ngx-mat-timepicker/ngx-mat-timepicker.component';

  @ViewChild('timepicker') public timepicker: NgxMatTimepickerComponent;

  /**
   * Lets the user click on the icon in the input.
   */
  public openFromIcon() {
    if (!this.formControlItem.disabled){
      this.timepicker.open();
    }
  }

  /**
   * Function to clear FormControl's value, called from the HTML template using the clear button
   *
   * @param $event - The Event's data object
   */
  public onClear($event: Event) {
    this.formControlItem.setValue(null);
  }

Expected behavior
The timepicker should append to the input like it does in the demo of the original package.
https://agranom.github.io/ngx-material-timepicker/ Refer to the Append to input section.

Screenshots

Desktop (if execution):

• OS: MacOS Big Sur
• Browser: Brave (Chromium)

** Versions

• ngx-mat-timepicker version [10.0.0] (My project uses angular version 10)
• @angular/core version [10.2.4]
• @angular/material version [10.2.7]
• typescript version [3.9.5]

Additional context (optional)
I would like to request two features aswell.

1. Export NgxMatTimepickerComponent and NgxMatTimepickerRef from the public api, so it removes the need for a deep import.
2. Make it possible to assign different colors from the Theme to different elements of the timepicker. For example, making the dial warn or making the numbers accent. Since the solution of the old package is not supported in yours.

Feature request: Show time picker control in place instead of modal

I'm currently working on an Ionic application (for desktop and tablet use) which mainly will be used outdoor and has an input assistance service helping the user will data inputs of all kinds by providing default values and reducing the amount of typing needed. This input assistance should be displayed consistently over all types of data (text fields, select lists, date inputs, time inputs, ...) in an aside window (I'm using the Material SideNav component for this).

The https://tiaguinho.github.io/material-community-components/timer-picker can be used directly without a popover or other kind of modal but is lacking some needed features which this one has. I.e. it is limited to 5 minutes steps and steps cannot be configured (e. g. 1 minute or 15 minutes). Those features are supported by this component, though.

So my request is a component which provides the UI to embed at the place where it is used in the markup. Basically it should contain everything inside the <div mat-dialog-content></div> of ngx-mat-timepicker-dialog plus related styles and logic.

Question - license: smp core utils

Hello, I've got a question regarding one of the dependcies you are using. The smp-core-utils

What licence does this project have? The picker it self seems to be MIT. But your dependcy, which you seems to be the author as well, is not clear.

Could you shed some light regarding the licensing issue?

[BUG] - Version mismatch of ts-luxon

NOTE

Describe the bug
With Version 5.1.3 the ts-luxon version in the main package.json has been updated to ^4.2.1 ( https://github.com/tonysamperi/ngx-mat-timepicker/blob/master/package.json#L52 )

But in the package.json of the package that will be used for the npm package ngx-mat-picker it is still ^3.0.1 ( https://github.com/tonysamperi/ngx-mat-timepicker/blob/master/projects/ngx-mat-timepicker/package.json#L27 ), is that on purpose?

Additional context (optional)
The problem is, that we use Angular 15 with your package @ngx-tonysamperi/ts-luxon-date-adapter which uses also ^4.0.1 as peerDependency.
When we want to use the libraries together this leads to errors because of different versions of ts-luxon and incompatibilities of the DateTime classes / instances.

[Question] Internationalization for text when using keyboard?

Describe the bug
Hi, I've configured internationalization like documentation, but one text stay in english.
I've do in app.module this : NgxMatTimepickerModule.setLocale('fr-FR') (in the imports array)

Expected behavior
The text use arrows (⇅) to change the time should adapt to selected language.

Screenshots

** Versions

• ngx-mat-timepicker version : ^16.1.2
• @angular/core version : ^16.0.0
• @angular/material version : ^16.2.9
• typescript version : ~5.0.2

Additional context
Sorry if you think it is not a bug.
In that case, could you tell me how to update this text ?

Bug - Time picker not preserving selected time when using "appendToInput"

In my application, users are often importing data, so [defaultTime] works as an initial starting point. However there are occasions where they will want to update the time more than once in a session. If they select a new time [defaultTime] does not capture the time change. The documentation didn't seem to catch this scenario. From a very cursory overview of the code, I see a couple ways this could be addressed:

1. Create a new input that will take an observable or behavior subject that can update the time
2. Enable open() to take a partial config object.

If there is already a pretty simple way to accomplish this, enlighten me.

EDIT: While this is accomplishable through using ngx-mat-timepicker-field, forcing the timepicker itself to be a form-control removes the user's agency to have this capability with their own easily configurable input styling.

[BUG] - NullInjectorError: No provider for NgxMatTimepickerLocaleService

Describe the bug
We are getting following error on runtime.

NullInjectorError: R3InjectorError(ZoneModule)[NgxMatTimepickerLocaleService -> NgxMatTimepickerLocaleService -> NgxMatTimepickerLocaleService -> NgxMatTimepickerLocaleService]: NullInjectorError: No provider for NgxMatTimepickerLocaleService!

Screenshots

Desktop (if execution):

• OS: MacOS
• Browser: Chrome

** Versions

• ngx-mat-timepicker version - 14.0.1
• @angular/core version - 14.0.2
• @angular/material version - 14.0.2
• typescript version - 4.7.4

support seconds

Does it support seconds?

[BUG] - Invalid DateTime appears in both inputs when cursor is moved to the beginning and user wants to enter specific values

Describe the bug
Assume a timepicker with [enableKeyboardInput]="true" set.
In the hour input, when cursor is moved to the beginning and current value of input is 00, 01 or 02 [for 24h picker] when someone tries to enter e.g. 1, input value changes to Invalid DateTime.
In the minutes input, when cursor is moved to the beginning and current value of input is 00, 01, 02, 03, 04, 05 when someone tries to enter e.g. 1, input value changes to Invalid DateTime.

To Reproduce

Steps to reproduce the behavior:

1. Click the input field to open the clicker
2. Select hours input in 12h mode
3. Enter e.g. 01
4. Move the cursor to the beginning of the input
5. Try to enter e.g. 1 by keyboard
6. The hours input field contains Invalid DateTime

Expected behavior
Block user input, as in the rest of cases (e.g. 04 for hours in 12h mode)

Screenshots
Ad 2.
Ad 3.
Ad 4.
Ad 6.

Desktop:

• OS: Windows
• Browser: Chrome, Firefox

**Versions

• ngx-mat-timepicker version 17.0.2 (but also appears on 17.0.3)
• @angular/core version 17.0.5
• @angular/material version 17.0.2
• typescript version 5.2.2

Additional context
Seems like for 12h picker and hours input the problem is with entering values: 1 and 2.
Seems like for 24h picker and hours input the problem is with entering values: 1,2 and 3.
Seems like for minutes input the problem is with entering values: 1-9.

[BUG] - error TS2322: Type 'string' is not assignable to type 'number'.

Describe the bug
When trying out the 24h example (https://tonysamperi.github.io/ngx-mat-timepicker/) with format="24" I get the error

- error TS2322: Type 'string' is not assignable to type 'number'

To Reproduce
https://angular-1rz8wv.stackblitz.io

Expected behavior
format should accept string instead of number

Desktop (if execution):

• OS: Ubuntu 22.04
• Browser: chrome

** Versions

• ngx-mat-timepicker version 15.1.+
• @angular/core version 15.2.8
• @angular/material version 15.2.8

[BUG] - Minute increase/decrease generating incorrect time when used with 24 hour format with no default value

Describe the bug
Issue is with "ngx-mat-timepicker-field" component when using for 24 hour format with no default value.
In 24 hour format with no default value when user increase/decrease the minute. Time is getting generated as 12:01 or 12:59. Which should not be the case, time should be generated as 00:01 or 00:59.

Steps to reproduce the behaviour:

1. Clone the code
2. Run npm i --force
3. open the project in VS code or any other code editor
4. Open ngx-mat-timepicker-field.component.ts , path: projects -> ngx-mat-timepicker -> src -> lib -> components -> ngx-mat-timepicker-field -> ngx-mat-timepicker-field.component.ts
5. Search for _changeTime() function definition.
6. Put a console.log inside _changeTime() on line 256(might be on different line for you) for time or this.timepickerTime and save it.
7. Open demo.component.html, path: projects -> ngx-mat-timepicker-repo -> src -> app -> components -> demo -> demo.component.html
8. Search for format = 24, and look for below code
   <ngx-mat-timepicker-field color="warn" [format]="24" [defaultTime]="'23:11'">
9. Remove defaultTime attribute from above element or replace it with below code and save it.
   <ngx-mat-timepicker-field color="warn" [format]="24">
10. Do ng serve.
11. open http://localhost:4200/
12. Open console of the web browser and look for ngx-mat-timepicker-field section on the page.
13. Under format = 24 of ngx-mat-timepicker-field section. Increase or decrease the minute.
14. On console you will be able to see the issue with the time. It is not coming as expected.

Expected behaviour
For 24 hour format with no default value. When user is increase or decrease the minute the time should be generated as 00:01 or 00:59.

Desktop (if execution):

• OS: Mac OS
• Browser Chrome

** Versions**

• ngx-mat-timepicker version 16.0..0
• @angular/core version 14.0.0
• @angular/material version 14.0.0
• typescript version 5.0.0

Setting locale dynamically

I'm trying to set the locale dynamically in my module:

{
  provide: NGX_MAT_TIMEPICKER_LOCALE,
  useExisting: LOCALE_ID
}

I'm getting the following error though:

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'ngx-mat-timepicker/lib/tokens/ngx-mat-timepicker-time-locale.token'

https://stackblitz.com/edit/angular-m9pxhu?file=src%2Fapp%2Fapp.module.ts

Could NGX_MAT_TIMEPICKER_LOCALE be included in the package's exports to allow this to be supported or alternatively default to use LOCALE_ID instead of en-US?

Thanks!

[BUG] InvalidDateTime with 12H, Chrome 110 issue with ts-luxon v3.x

Describe the bug
Getting Cannot parse time - NaN on Chrome with Angular 13

To Reproduce
Getting Cannot parse time - NaN on Chrome with Angular 13

Expected behavior

Screenshots

Desktop (if execution):

• OS: Windows 11
• Browser Chrome

** Versions

• ngx-mat-timepicker version : 13.2.6
• @angular/core version : v13
• @angular/material version: v13
• typescript version : 4.6.2

Additional context (optional)
It's working in firefox only causing issue in chrome

[BUG] - Timepicker toggle is styled differently than official Google datepicker toggle

Describe the bug
The design of the timepicker toggle, although seems analogous to how Google has designed their official datepicker toggle, does not look the same, especially when used side-by-side.

I understand a workaround is to create our own matSuffix element, but based on the fact that the timepicker toggle is a public component and that the component is mostly similar to the datepicker toggle, I assume they would be able to be used the same way.

To Reproduce
See https://stackblitz.com/edit/ngx-mat-timepicker-rzjnxj?file=src/app/app.component.html

Expected behavior
The toggle to be similar (in size and behavior) to the official Material datepicker toggle. Specifically for behavior that the ripple would be much smaller than what is used for a mat-mini-fab.

Desktop (if execution):

• OS: MacOS
• Chrome and safari

Versions

• ngx-mat-timepicker version ^13.0.0
• @angular/core version 13.3.7
• @angular/material version 13.3.7
• typescript version 4.6.4

Additional context (optional)
If needed, I can make a pull request. However, I don't think it'll be very backwards compatible look-wise.

[BUG] InvalidDateTime with 12H, Chrome 110 issue with ts-luxon v2.x

It works fine on 24h format. It does not work in Chrome only. Please refer to the error stated

• Browser: chromium derived

** Versions

• ngx-mat-timepicker version: 9.x
• @angular/core version: not relevant
• @angular/material version: not relevant
• typescript version: not relevant
• ts-luxon version: 2.0.3

[BUG] - Wrong time in dialog after selection

Describe the bug
With "appendToInput" attribute is true, after click 'OK' in the picker dialog, the time is correct shown on the input, but not in the picker if you open picker again.

To Reproduce
It's also happened in your demo site 'Append to input' block.

Expected behavior
The select time should be correct in picker as well.

Screenshots

Desktop (if execution):

• OS: Mac
• Browser chrome

** Versions

• ngx-mat-timepicker version 12.1.0
• @angular/core version 12.2.15
• @angular/material version 12.2.13
• typescript version 4.2.4

Additional context (optional)
The source is empty.

[BUG] - Can't compile Angular 13 project because of smp-core-utils

Describe the bug
The angular build is failing showing this error:

./node_modules/smp-core-utils/fesm2020/smp-core-utils.mjs:203:16-21 - Error: export 'first' (imported as 'first') was not found in 'rxjs' (possible exports: ArgumentOutOfRangeError, AsyncSubject, BehaviorSubject, ConnectableObservable, EMPTY, EmptyError, GroupedObservable, NEVER, Notification, NotificationKind, ObjectUnsubscribedError, Observable, ReplaySubject, Scheduler, Subject, Subscriber, Subscription, TimeoutError, UnsubscriptionError, VirtualAction, VirtualTimeScheduler, animationFrameScheduler, asapScheduler, asyncScheduler, bindCallback, bindNodeCallback, combineLatest, concat, config, defer, empty, forkJoin, from, fromEvent, fromEventPattern, generate, identity, iif, interval, isObservable, merge, never, noop, observable, of, onErrorResumeNext, pairs, partition, pipe, queueScheduler, race, range, scheduled, throwError, timer, using, zip)

To Reproduce
Just added ngx-mat-timepicker to the project and trying to build and test

Expected behavior
Build should be successful out of the box

** Versions

• ngx-mat-timepicker version - 13.0.0
• @angular/core version - 13.1.2
• @angular/material version - 13.1.2
• typescript version - 4.5.4

[BUG] - Change to 24 hour mode breaks ngx-mat-timepicker-field component

Describe the bug
When trying to change to 24 hour time in ngx-mat-timepicker-field <ngx-mat-timepicker-field [format]="24"></ngx-mat-timepicker-field> the component doesn´t initialize successfully.

The error message shown in the js console is: ERROR Error: mat-form-field must contain a MatFormFieldControl

The bug cames from the code <mat-form-field class="period-select ngx-mat-timepicker__control--forth" [color]="color"> <mat-select [disabled]="disabled || isChangePeriodDisabled" *ngIf="format !== 24" (selectionChange)="changePeriod($event)" [ngModel]="period"> <mat-option *ngFor="let option of periods" [value]="option">{{option}}</mat-option> </mat-select> </mat-form-field> in ngx-mat-timepicker-field.component.html (lines 30-38).
When format is set to 24 the mat-select component is not added to outer mat-form-field and so that mat-form-field ends with no control inside.

To fix it should move the *ngIf directive to parent mat-form-field

** Versions

• ngx-mat-timepicker version 12.0.0
• @angular/core version 12.1.1
• @angular/material version 12.1.1
• typescript version 4.3.2

[BUG] - Doesn't Show Clock Popup Well on Small Screens

Describe the bug
On a small screen (anything at 340 pixels wide or less) the clock face popup acquires a scroll bar and doesn't display properly. As this is a really good control to use on mobile devices, I would expect that the clock popup dialog would just stretch further out on the screen rather than have a maximum width and then get a scroll bar. I would expect that at the least this control would look nice on an iPhone 5 which has a pixel width of 320px. It looks like the control would naturely work on a device of 300px if the max-width limitation was removed. I don't expect it to work on anything less than 300px but I would think it should handle 320px at a minimum and I would suggest targeting 300px and larger to work.

The problem is caused by the element:

<div id="cdk-overlay-0" class="cdk-overlay-pane ngx-mat-timepicker-dialog" style="max-width: 80vw;position: static;">

See how it is setting the max-width to 80vw? That is causing the problem. If you just get rid of that then you can see it fixes the issue.

I don't know how you want to handle it but maybe adding the max-width as an input parameter to the main component directives?

To Reproduce
Use Google Chrome's "device toolbar" in the developer tools window and switch to other device views, like the iPhone 5. I would also recommend setting it to response and go through all of the pixels to watch what happens. You will notice that there are 2 points when the clock popup gets a scrollbar: anything at or less than 340px as well as between 381 pixels and 360 pixels wide. So go to the demo site https://tonysamperi.github.io/ngx-mat-timepicker/ and play with the device size emulator thing in google chrome to see what is going on.

Expected behavior
See the description of the bug. The expected behaviors is outlined there.

Screenshots

Other Info
See this link for a potential work around / description of the general problem with the cdk-overlay https://www.gitmemory.com/issue/angular/components/9823/528824405

Timepicker dialog auto-focus on '00'/'12' upon initialization

Describe the bug
The timepicker dialog will always auto focus on the '00'/'12' button after it has been opened.

To Reproduce
Just open the any ngx-mat-timepicker

Expected behavior
Should not focus on any button

Screenshots

(The focus shadow at '00')

** Versions

• ngx-mat-timepicker version [e.g. 9.0.0]
• @angular/core version [e.g. 10.2.3]
• @angular/material version [e.g. 10.2.7]
• typescript version [es. 3.9.2]

Additional context (optional)
I suspect it is due to the cdkTrapFocus and cdkTrapFocusAutoCapture in the ngx-mat-timepicker-dialog.component.html. Removing it will solve the issue.

[BUG] - When Min Max is set for time picker, the validation growl is cropped

Steps:

1. Set Min Max value for the time picker, Say Min - 2PM, Max 4PM
2. On the time picker, click on AM
3. See the error growl gets cropped/ i see is scroll

Expectation:
can the error be shown without user having to scroll?

Screenshot:

Desktop (if execution):

• OS: Windows
• Browser chrome

** Versions

• ngx-mat-timepicker version 14.2.0
• @angular/core version 14.2.0
• @angular/material version 14.2.0
• typescript version 4.8.2

[BUG] - error with min set when changing value with keyboard arrow below the min

NOTE

Describe the bug
minimal value create error on consol when set the value below with the arrow and you can go below with the arrow

To Reproduce

Steps to reproduce the behavior:
1 define min on timepicker
2 go under the min with the arrow

Expected behavior
lock on min from the arrow and don't set error on console

Screenshots

Desktop (if execution):

• Browser chrome

** Versions

• ngx-mat-timepicker@^14.0.5

[BUG] - Mannual change of the input attached to the time picker results in error

Describe the bug
If the input attached to the time picker componet is mannualy changed the NgxMatTimepickerDirective.UpdateValue fails with error. This also prevents the [(ngModel)] to work properly (or formControl ).

To Reproduce
Reproducable with the code in the demo: remove readonly="true" and add [disableClick]="true" (for convinience).
Changing the value in the input (mannually with out the picker) will trigger the described error.

Expected behavior
No error to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

** Versions

• ngx-mat-timepicker version 12.0.0
• @angular/core version [e.g. 12.0.0]

Extra context:
The value recieved by the directive is an event and not a string in the form "11:00"

[BUG] - Missing dependency smp-core-utils

Describe the bug
Missing dependency in latest version refuses to build the application.

To Reproduce
Run ng build without having the smp-core-utils dependency.

Expected behavior
The package should automatically install this dependency or not require it's installation.

Screenshots

Desktop (if execution):

• OS: MacOS
• Browser: Brave

** Versions

• ngx-mat-timepicker version [10.0.2]
• @angular/core version [10.2.4]
• @angular/material version [10.2.7]
• tslib version [2.0.0]

Incorrect installation guide at readme.md and demo

HI, thanks for maintaining this great repo all the time.

Found out that the install guide in readme.md is not updated:
npm i --save luxon ngx-mat-timepicker (should be ts-luxon)

as well in the demo webpage which showing:
npm i @popperjs/core
npm i ngx-popperjs

Apart form this, any plan for making ts-luxon as part of the library dependency instead of as peer-dependency? It would be great just to do it like:
npm i --save ngx-mat-timepicker

without to worry install a wrong version of ts-luxon

Let me know if you need any helps from my side, tq

[BUG] - Timepicker hover section diverges when selecting time

Steps to reproduce the behavior:

1. Go to Demo page
2. Open Timepicker
3. Hover over some hour / minute
4. Select the hour / minute

Expected behavior
Selected hour has to be the same as the "preview / hover" hour.

Actual behavior
Selected hour diverges from the "preview / hover" hour.

Screenshots

Versions

• ngx-mat-timepicker version 17.0.2
• @angular/core version 17.0.8
• @angular/material version 17.0.7
• typescript version 5.2.2

Additional context (optional)
The selected hour after click coincides with user's mouse. Which means that the problem is in the preview / hover projection.

If I keep hold the up and down array then hours and minutes are not changing it just change by 1 only when I leave click

Hi,

I was using this ngx-mat-timepicker-field, I found one unusual problem. If I keep hold the arrow svg then hours and minutes are not changing fast they are increasing only once when I leave the svg click. Please check below image for reference.

Expected - It should increase/decrease immediately till when I'm holding keys up/down svg. It should behave same as up and down keyboard arrow keys.
Kinda like this (Try to check inline timepicker and when you hover on hour and minute then arrow keys will come and try to hold arrow keys.

Thank you.

[BUG] InvalidDateTime with 12H, Chrome 110 issue with ts-luxon v4.x

I don't know when this happened, but the picker has just stopped working. It looks like it may be related to the Chrome browser as it still works for me in Firefox and Edge. The version of Chrome that I am using is the latest version (Version 110.0.5481.78 (Official Build) (64-bit)). It seems to still be working in Firefox and Edge.

You can even see this on the demo (https://tonysamperi.github.io/ngx-mat-timepicker/). Just try picking any time under "Picker with 12h format". It will say "Invalid DateTime".

NOTE: This is also happening with https://agranom.github.io/ngx-material-timepicker/ which I believe this project was forked from?

[BUG] - Local cannot be set in standalone components

Describe the bug
When I try to use the picker in a standalone component, I am unable to set the locale, i got the error:

Type 'ModuleWithProviders<NgxMatTimepickerModule>' is not assignable to type 'any[] | Type<any>

** Versions

• ngx-mat-timepicker version [14.0.2]
• @angular/core version [14.1.3]
• @angular/material version [14.1.3]
• typescript version [4.7.2]

[BUG] - NgxMatTimepickerLocaleService break compatibility with Angular 13

Describe the bug
I recently integrated your package to one of our applications and got stuck by #34. I was using v13.0.0, and I updated to v13.2.2 to try fixing the problem. I noticed the publication has latest-ng13 tag, but build gives me this error:

./node_modules/ngx-mat-timepicker/fesm2015/ngx-mat-timepicker.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
TypeError: Cannot create property 'message' on string 'x:\workspaces\trinity\esaportal-front\node_modules\ngx-mat-timepicker\fesm2015\ngx-mat-timepicker.mjs: This application depends upon a library published using Angular version 14.0.1, which requires Angular version 14.0.0 or newer to work correctly.
Consider upgrading your application to use a more recent version of Angular.
  412 | }
  413 | NgxMatTimepickerBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: NgxMatTimepickerBaseDirective, deps: [{ token: NgxMatTimepickerService }, { token: NgxMatTimepickerEventService }, { token: NgxMatTimepickerLocaleService }, { token: NGX_MAT_TIMEPICKER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
> 414 | NgxMatTimepickerBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: NgxMatTimepickerBaseDirective, selector: "[ngxMatTimepickerBase]", inputs: { color: "color", defaultTime: "defaultTime" }, host: { listeners: { "keydown": "onKeydown($event)" } },39m ngImport: i0 });
      |                                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^[39m^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^[39m^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  415 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: NgxMatTimepickerBaseDirective, decorators: [{
  416 |             type: Directive,
  417 |             args: [{'

To Reproduce

• Make a new angular v13 application
• Add ngx-mat-timepicker v13.2.2 and use it in a template
• Build angular application

Expected behavior
Build run with success

Versions

• ngx-mat-timepicker version 13.2.2
• @angular/core version 13.3.0
• @angular/material version 13.3.0
• typescript version 4.5.4

[BUG] InvalidDateTime with 12H, Chrome 110 issue with ts-luxon v4.x

Whenever I try to use ngx-time-picker package, the user will click the input box and a menu will pop up where they can select the time. However after selecting the time "Invalid DateTime". This only happens with Brave Browser. However , whenever I try it on Google Chrome or Microsoft Edge, the ngx-time-picker works just fine as the time selected by the user from the popup menu is the time displayed in the input box. What might be causing this?

https://stackoverflow.com/questions/75393607/ngx-mat-timepicker-shows-invaliddatetime-in-brave-browser-but-works-fine-in-ch

[BUG] - ngx-mat-timepicker-field does not fire timechange when starting from 00:00

If ngx-mat-timepicker-field start from 00:00 timechange is not fired, it only works when hour and minutes are greater than zero or starting from one.

You can reproduce it here:
https://stackblitz.com/edit/uomhvz-sbpbeu?file=src%2Fexample%2Fcard-overview-example.ts

I will open a PR for the fix. It was pretty simple to solved.

[BUG] - Disabled buttons appearance

Describe the bug
The visual is not the same if you select different hours. I had this bug in a project I use and found the same one in the online examples.

In my own project I also get the same visual problem with the hours display

In the example page of the project (https://tonysamperi.github.io/ngx-mat-timepicker/), the bug is present in the minutes section of the 12 hour format when you select "4 hours"

To Reproduce
The error is present on the main example page as shown in the fallowing video.
https://github.com/tonysamperi/ngx-mat-timepicker/assets/22448486/39a563cb-c397-42ee-b3c2-335c78771ccc

Expected behavior
Same visual for all different hours and no as crowded in the minute page.
This image shows what I would expect

Screenshots

Desktop (if execution):

• Brave
• Edge
• Probably others

** Versions

• ngx-mat-timepicker version 17.0.0
• @angular/core version 17.0.4
• @angular/material version 17.0.1
• typescript version 5.2.2

Additional context (optional)
Thank you for the amazing package. It has been a game changer for time input in my different projetcts.

[BUG] - (v16) After Keyboard Input I get TypeError: time.match is not a function

Cannot set time manually

After a manual input with the keyboard of the time, I get the console error: TypeError: time.match is not a function.
You would get that if time would not be a string.
The error points to your function:

    static parseTime(time, opts) {
        .........
        if (time.match(/\s/g)) {

To Reproduce
Enter the time with keyboard and press enter.

Expected behavior
Manual Time Input is possible.

Desktop (if execution):

• Windows
• Chrome

** Versions

• ngx-mat-timepicker version 16.0.0
• @angular/core version 16.0.3
• @angular/material version 16.0.2
• typescript version 4.9.5

[FEAT]: Automatically reset value to null /undefined

Description
I would expect a different behavior after clear time value.

Steps to reproduce the behavior:

1. Open Link to stackblitz
2. Select any value, for example: 18:30 (ngModel value is 18:30)
3. Clear hour and minutes by backspace - ngModel value is 00:00 but time controls shows empty values (placeholder HH / MM is visible)

Expected behavior
ngModel value should be empty value (null or undefined or empty string)

Disable Ivy throw error in prod mode

When I add this

"angularCompilerOptions": {
    "enableIvy": false
  }

to tsconfig.app.json I causes me error to build in prod mode

Directive NgxMatTimepickerDirective, Expected 1 arguments, but got 0.

Update peer dependencies in `projects/ngx-mat-timepicker/package.json`

Describe the bug
The peer dependencies for the exported package still points to an old version of Angular

Expected behavior
Peer dependencies should match the updated dependencies of the project and point to Angular 14

Screenshots
If applicable, add screenshots to help explain your problem.

Versions

• ngx-mat-timepicker version 14.0.0

I don't know if you prefer issues or PRs for this type of change, but thought I would point out that the peer dependencies need to be updated.
No hurry, and thank you for your service keeping this project up to date 👍

[BUG] - TimeSet event issue from NgxMatTimepickerComponent

Describe the bug
I'm using inside my app the time-picker widget set to 12h format . And I'm trying to get use of (timeSet) event but it doesn't work accordingly. Every time the event is triggered, the emitted value is always set to 'AM' even if I set it to be 'PM'.

Screenshots

Desktop (if execution):

• Browser: Chrome

** Versions

• ngx-mat-timepicker version: ^14.0.5
• @angular/core: ^14.2.6
• @angular/material: ^14.2.5
• typescript: ~4.8.4

Dynamically set min-max values

I'm trying to implement a timepicker that sets the max attribute on open
But i cannot find a way to do so

Incorrect values w/ timezone: Austin, TX - DST

Timezone issue 2 is not shown on clock. Daylight saving time (DST) not support.

[Feature request] Dots on minute gaps

First of all: I acutally really feel bad to abuse the Bug-Report for a Feature-Request - but how to contact you? At least it isn't for an Angular-Version-Update ...

Right now I'm using the (discontinued) angular-material-picker (https://github.com/IliaIdakiev/angular-material-timepicker). This one showed some dots between the minutes that (imho) looked pretty great:

Have you even tought about implementing these, too? Or would a PR be welcome containing it?

BR

Tristan