Merge pull request #24204 from abpframework/auto-merge/rel-9-3/4141

Merge branch rel-10.0 with rel-9.3

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts

@@ -170,20 +170,11 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
     this.asterisk = this.service.calcAsterisks(this.validators);
   }
 
-  private focusElement() {
-    try {
-      this.fieldRef.nativeElement.focus();
-      this.shouldFocus.set(false);
-    } catch (error) {
-      console.error('Error focusing field:', error);
-    }
-  }
-
   ngAfterViewInit() {
-    this.isViewReady.set(true);
-
-    if (this.isFirstGroup && this.first) {
-      this.shouldFocus.set(true);
+    if (this.isFirstGroup && this.first && this.fieldRef) {
+      requestAnimationFrame(() => {
+        this.fieldRef.nativeElement.focus();
+      });
     }
   }
 

npm/ng-packs/packages/theme-shared/src/lib/adapters/datepicker-i18n.adapter.ts

@@ -0,0 +1,38 @@
+import { formatDate } from '@angular/common';
+import { inject, Injectable, LOCALE_ID } from '@angular/core';
+import { NgbDatepickerI18n, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
+import { ConfigStateService } from '@abp/ng.core';
+
+@Injectable()
+export class DatepickerI18nAdapter extends NgbDatepickerI18n {
+  private configState = inject(ConfigStateService, { optional: true });
+  private defaultLocale = inject(LOCALE_ID);
+
+  private get locale(): string {
+    return this.configState?.getDeep('localization.currentCulture.cultureName') || this.defaultLocale;
+  }
+
+  getWeekdayLabel(weekday: number): string {
+    const date = new Date(2017, 0, weekday + 1); // Monday = 1
+    return formatDate(date, 'EEEEE', this.locale);
+  }
+
+  getWeekLabel(): string {
+    return '';
+  }
+
+  getMonthShortName(month: number): string {
+    const date = new Date(2017, month - 1, 1);
+    return formatDate(date, 'MMM', this.locale);
+  }
+
+  getMonthFullName(month: number): string {
+    const date = new Date(2017, month - 1, 1);
+    return formatDate(date, 'MMMM', this.locale);
+  }
+
+  getDayAriaLabel(date: NgbDateStruct): string {
+    const d = new Date(date.year, date.month - 1, date.day);
+    return formatDate(d, 'fullDate', this.locale);
+  }
+}

npm/ng-packs/packages/theme-shared/src/lib/adapters/index.ts

@@ -1,3 +1,5 @@
 export * from './date-time.adapter';
 export * from './date.adapter';
+export * from './datepicker-i18n.adapter';
 export * from './time.adapter';
+export * from './timepicker-i18n.adapter';

npm/ng-packs/packages/theme-shared/src/lib/adapters/timepicker-i18n.adapter.ts

@@ -0,0 +1,24 @@
+import { formatDate } from '@angular/common';
+import { inject, Injectable, LOCALE_ID } from '@angular/core';
+import { NgbTimepickerI18n } from '@ng-bootstrap/ng-bootstrap';
+import { ConfigStateService } from '@abp/ng.core';
+
+@Injectable()
+export class TimepickerI18nAdapter extends NgbTimepickerI18n {
+  private configState = inject(ConfigStateService, { optional: true });
+  private defaultLocale = inject(LOCALE_ID);
+
+  private get locale(): string {
+    return this.configState?.getDeep('localization.currentCulture.cultureName') || this.defaultLocale;
+  }
+
+  getMorningPeriod(): string {
+    const date = new Date(2000, 0, 1, 10, 0, 0);
+    return formatDate(date, 'a', this.locale);
+  }
+
+  getAfternoonPeriod(): string {
+    const date = new Date(2000, 0, 1, 22, 0, 0);
+    return formatDate(date, 'a', this.locale);
+  }
+}

npm/ng-packs/packages/theme-shared/src/lib/providers/ng-bootstrap-config.provider.ts

@@ -1,7 +1,16 @@
 import { inject, provideAppInitializer } from '@angular/core';
-import { NgbInputDatepickerConfig, NgbTypeaheadConfig } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDatepickerI18n, NgbInputDatepickerConfig, NgbTypeaheadConfig, NgbTimepickerI18n } from '@ng-bootstrap/ng-bootstrap';
+import { DatepickerI18nAdapter, TimepickerI18nAdapter } from '../adapters';
 
 export const NG_BOOTSTRAP_CONFIG_PROVIDERS = [
+  {
+    provide: NgbDatepickerI18n,
+    useClass: DatepickerI18nAdapter,
+  },
+  {
+    provide: NgbTimepickerI18n,
+    useClass: TimepickerI18nAdapter,
+  },
   provideAppInitializer(() => {
     configureNgBootstrap();
   }),