[BUG] - Disabled buttons appearance

[MaximBolduc]

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.

[MaximBolduc]

I tried adding global style as suggested in #57 and the same behavior continues.

.mat-mdc-fab.mat-accent, .mat-mdc-mini-fab.mat-accent { --mdc-fab-container-color: transparent; --mat-mdc-button-persistent-ripple-color: transparent; box-shadow: none; }

[achapman009]

In my apps case i had to be very specific in the overrides, this is what i did to get it looking properly...

I understand this snippet does not follow all best practices, but it is working for now. I hope it helps.

Results:

[MaximBolduc]

Hi @achapman009,

I just tested your snippet and it fixes the minutes dialog, but not the hours one in my case. If I put my picker in 12h display everything work as intended with your suggested edit. I'll search in that direction and find what I need to fix the 24h hour page.

I'll leave the issue open since having it not consistent on the main example page is still an issue though.

Thanks for guiding me in the right direction and the quick reply!

Edit: If anyone has trouble with the 24h format, based on @achapman009 answer, I added this to my global style to fix the issue. `.timepicker { .timepickermain-content > .timepickerbody {

• ngx-mat-timepicker-24-hours-face > * > .clock-face > .clock-facecontainer { .clock-facenumber { .mdc-fab { box-shadow: none !important; } }

  .clock-face__number--inner {
    > .mdc-fab {
      box-shadow: none !important;
    }
  }
}

> ngx-mat-timepicker-minutes-face > ngx-mat-timepicker-face > .clock-face {
  > .clock-face__container > .clock-face__number > .mdc-fab {
    &.mat-mdc-mini-fab {
      &.mdc-fab--mini {
        height: 0;
        width: 0;
      }
    }
  }
}

} } `

[achapman009]

@MaximBolduc

I took a glance, i think i got it figured out.. please look at line 24, i added a 24 hour variant

[MaximBolduc]

@MaximBolduc

I took a glance, i think i got it figured out.. please look at line 24, i added a 24 hour variant

We arrived basically at the same conclusion. I edited my last post a couple minutes ago to add the --inner field and the 24h variant. I'll update my styling for all my projects that use this library.

Thanks for taking the time to look at it a little more.

Have a nice day!

[tonysamperi]

Ok guys. Thanks, now I get the problem. Another guy raised the issue, but he didn't say anything on how to reproduce. It's about the disabled buttons. When no minute is suitable (in the example the max hour is 4, so when you have 4 as hour, you can only have 0 as minute, so all the rest will be disabled). Fixing this tomorrow morning.

Thanks

[tonysamperi]

Fixed in v 17.0.1