18.0.4, there is no alignment in the dial

[ig-semenov]

Please find attached.

[dhutaryan]

Could you provide a minimal repro or link to repo?

[ig-semenov]

thank you for a quick response!. I don't have a repo to share at this moment. I can provide some settings:
"dependencies": {
"@angular/animations": "18.2.9",
"@angular/cdk": "18.2.14",
"@angular/common": "18.2.9",
"@angular/compiler": "18.2.9",
"@angular/core": "18.2.9",
"@angular/forms": "18.2.9",
"@angular/material": "18.2.14",
"@angular/platform-browser": "18.2.9",
"@angular/platform-browser-dynamic": "18.2.9",
"@angular/router": "18.2.9",
"@cds/angular": "^6.12.0",
"@cds/core": "^6.12.0",
"@clr/angular": "^17.3.1",
"@clr/ui": "^17.3.1",
"@dhutaryan/ngx-mat-timepicker": "^18.0.4",
"@ngbracket/ngx-layout": "^17.0.1",
"@ngrx/operators": "^18.1.1",
"@ngrx/signals": "^18.1.1",
"big-integer": "^1.6.52",
"d3": "^7.9.0",
"ip-num": "^1.5.1",
"keycloak-angular": "16.0.1",
"keycloak-js": "25.0.6",
"moment": "^2.30.1",
"ngx-spinner": "^17.0.0",
"normalize.css": "^8.0.1",
"papaparse": "^5.4.1",
"rxjs": "^7.8.1",
"tslib": "^2.6.0",
"zone.js": "^0.14.7"
},
html:

<mat-form-field style="margin-left: 2px;">
              <mat-label>Choose a time</mat-label>
              <input type="text" matInput [matTimepicker]="timepicker" formControlName="startTime" (timeChange)="onTimeChange($event, 'startDate')" />
              <mat-timepicker-toggle matSuffix [for]="timepicker"></mat-timepicker-toggle>
              <mat-timepicker #timepicker></mat-timepicker>
              <mat-hint>Pick the starting time.</mat-hint>
              <mat-error *ngIf="hasError('startTime', 'matDatepickerMin')">Date cannot be earlier than today.</mat-error>
              <mat-error *ngIf="hasError('startTime', 'required')">Start time is required.</mat-error>
            </mat-form-field>

class

@Component({
  selector: 'app-maintenance-outage',
  standalone: true,
  imports: [
    CommonModule, ClrCheckboxModule, ClrCommonFormsModule, ClrWizardModule,
    MatToolbar, ReactiveFormsModule, MatFormField, MatError, MatHint, MatInput, MatLabel, MatRippleModule, MatInputModule,
    MatNativeDateModule, MatIconModule, MatDatepickerModule, MatTimepickerModule, IvantiCustomerSelectFormComponent, ClrDatagridModule, ClrIconModule
  ],
  templateUrl: './outage.component.html',
  styleUrls: ['./outage.component.scss'],
  providers: [provideNativeDateTimeAdapter(), provideNativeDateAdapter()
})
export class OutageComponent 

styles:

@use '@angular/material' as mat;
@use '@dhutaryan/ngx-mat-timepicker' as mat-timepicker;

@include mat.all-component-typographies();
@include mat.core();

$tools-mart-primary: mat.m2-define-palette(mat.$m2-blue-palette, 700);
$tools-mart-accent: mat.m2-define-palette(mat.$m2-deep-purple-palette, A400);
$tools-mart-warn: mat.m2-define-palette(mat.$m2-red-palette);
$tools-typography: mat.m2-define-typography-config($font-family: 'Comic Sans');


$tools-mart-theme: mat.m2-define-light-theme(
    (
      color: (
        primary: $tools-mart-primary,
        accent: $tools-mart-accent,
        warn: $tools-mart-warn,
      ),
      typography: $tools-typography,
      density: 0,
    )
);

$tools-mart-dark-theme: mat.m2-define-dark-theme(
    (
      color: (
        primary: $tools-mart-primary,
        accent: $tools-mart-accent,
        warn: $tools-mart-warn,
      ),
      typography: mat.m2-define-typography-config(),
      density: 0,
    )
);

.dark-theme {
  @include mat.all-component-colors($tools-mart-dark-theme);
}


@include mat.all-component-themes($tools-mart-theme);

@include mat-timepicker.timepicker-theme($tools-mart-theme);
@include mat.strong-focus-indicators-theme($tools-mart-theme);

Sorry in advance, I understand that this is not convenient and perhaps not worth considering.

[ig-semenov]

In any case if you don't have this issue and it's only mine then could you provide some steps how to figure out the cause of the issue, thanks.

[dhutaryan]

I tried to reproduce and all good to me. Maybe something overrides styles somehow. Check your console for errors.

[ig-semenov]

There is no any errors in the console.

[ig-semenov]

One more question: is it possible to stop propagation for Esc, if use this component in a dialog window it closes the window too.

[SaltySource]

I am also experiencing the same misalignment in v17. Reducing the size of the mat-clock-dial to 13rem fixes the alignment issue for me.

.mat-clock-dial { width: 13rem !important; height: 13rem !important; }