ngx-dev-toolbar 4.0.0 → 4.2.0

package/index.d.ts

@@ -1,4 +1,4 @@
-export { TOOLBAR_CONFIG, TOOLBAR_FEATURE_FLAGS, TOOLBAR_PERMISSIONS, TOOLBAR_LANGUAGE, TOOLBAR_APP_FEATURES, } from './tokens';
+export { TOOLBAR_CONFIG, TOOLBAR_FEATURE_FLAGS, TOOLBAR_PERMISSIONS, TOOLBAR_APP_FEATURES, } from './tokens';
 export { provideToolbar } from './provide-toolbar';
 export * from './components/icons/icon.component';
 export * from './components/icons/icon.models';
@@ -7,6 +7,7 @@ export * from './components/list-item/list-item.component';
 export * from './components/toolbar-tool/toolbar-tool.component';
 export * from './components/toolbar-tool/toolbar-tool.models';
 export * from './components/button/button.component';
+export * from './components/icon-button/icon-button.component';
 export * from './components/input/input.component';
 export * from './components/select/select.component';
 export * from './components/card/card.component';
@@ -17,11 +18,14 @@ export * from './components/step-view/step-view.directive';
 export * from './toolbar.component';
 export * from './models/toolbar.interface';
 export * from './models/toolbar-config.interface';
+export * from './models/toolbar-position.model';
 export * from './models/tool-view-state.models';
 export * from './tools/feature-flags-tool/feature-flags.models';
 export * from './tools/feature-flags-tool/feature-flags.service';
-export * from './tools/language-tool/language.models';
-export * from './tools/language-tool/language.service';
+export * from './tools/i18n-tool/i18n.models';
+export * from './tools/i18n-tool/i18n.service';
+export * from './tools/i18n-tool/i18n-formatting.utils';
+export * from './tools/i18n-tool/i18n-tool.component';
 export * from './tools/app-features-tool/app-features.models';
 export * from './tools/app-features-tool/app-features.service';
 export * from './tools/app-features-tool/app-features-tool.component';

package/models/tool-view-state.models.d.ts

@@ -9,4 +9,6 @@ export interface ToolViewState {
     filter: string;
     /** Sort order for list items (currently only 'asc' supported, reserved for future use) */
     sortOrder: 'asc' | 'desc';
+    /** IDs of pinned items that should appear at the top of the list */
+    pinnedIds?: string[];
 }

package/models/toolbar-config.interface.d.ts

@@ -1,8 +1,14 @@
+import { ToolbarPosition } from './toolbar-position.model';
 /**
  * Configuration options for the Angular Toolbar component.
  * All tool flags are optional and default to true if not specified.
  */
 export interface ToolbarConfig {
+    /**
+     * Position of the toolbar on the viewport edge.
+     * @default 'bottom'
+     */
+    position?: ToolbarPosition;
     /**
      * Master switch to enable/disable the entire toolbar.
      * When disabled:
@@ -13,10 +19,10 @@ export interface ToolbarConfig {
      */
     enabled?: boolean;
     /**
-     * Show/hide the Language tool
+     * Show/hide the i18n tool (locale, timezone, currency, pseudo-localization, RTL)
      * @default true
      */
-    showLanguageTool?: boolean;
+    showI18nTool?: boolean;
     /**
      * Show/hide the Feature Flags tool
      * @default true
@@ -37,4 +43,28 @@ export interface ToolbarConfig {
      * @default true
      */
     showPresetsTool?: boolean;
+    /**
+     * Callback to persist a forced feature flag value to the actual source.
+     * When provided, an "Apply to source" button appears on each forced flag.
+     * @param flagId - The ID of the feature flag
+     * @param value - The current forced boolean value
+     * @deprecated Use `ToolbarFeatureFlagService.setApplyToSource()` instead. Config callbacks will be removed in v5.
+     */
+    onApplyFeatureFlag?: (flagId: string, value: boolean) => Promise<void>;
+    /**
+     * Callback to persist a forced permission value to the actual source.
+     * When provided, an "Apply to source" button appears on each forced permission.
+     * @param permissionId - The ID of the permission
+     * @param value - The current forced boolean value (granted = true, denied = false)
+     * @deprecated Use `ToolbarPermissionsService.setApplyToSource()` instead. Config callbacks will be removed in v5.
+     */
+    onApplyPermission?: (permissionId: string, value: boolean) => Promise<void>;
+    /**
+     * Callback to persist a forced app feature value to the actual source.
+     * When provided, an "Apply to source" button appears on each forced feature.
+     * @param featureId - The ID of the app feature
+     * @param value - The current forced boolean value
+     * @deprecated Use `ToolbarAppFeaturesService.setApplyToSource()` instead. Config callbacks will be removed in v5.
+     */
+    onApplyAppFeature?: (featureId: string, value: boolean) => Promise<void>;
 }

package/models/toolbar-position.model.d.ts

@@ -0,0 +1,3 @@
+export type ToolbarPosition = 'top' | 'right' | 'bottom' | 'left';
+export declare const TOOLBAR_POSITIONS: readonly ToolbarPosition[];
+export declare function isHorizontalPosition(position: ToolbarPosition): boolean;

package/models/toolbar.interface.d.ts

@@ -1,4 +1,8 @@
 import { Observable } from 'rxjs';
+/**
+ * State of an apply-to-source operation for a single item.
+ */
+export type ApplyToSourceState = 'idle' | 'loading' | 'success' | 'error';
 /**
  * Interface that should be implemented by any tool service that is used in the dev toolbar
  */
@@ -36,4 +40,19 @@ export interface ToolbarService<OptionType> {
      * ```
      */
     getValues(): Observable<OptionType[]>;
+    /**
+     * Registers a callback to persist a forced value back to the actual data source.
+     * When set, an "apply to source" button appears on each forced item in the toolbar UI.
+     *
+     * @param callback - Async function that receives the item ID and its forced boolean value.
+     *                   Should persist the value (e.g., via API call) and throw on failure.
+     *
+     * @example
+     * ```typescript
+     * this.toolbarService.setApplyToSource(async (id, value) => {
+     *   await this.api.updateFlag(id, value);
+     * });
+     * ```
+     */
+    setApplyToSource?(callback: (id: string, value: boolean) => Promise<void>): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-dev-toolbar",
-  "version": "4.0.0",
+  "version": "4.2.0",
   "keywords": [
     "devtools",
     "development-toolbar",
@@ -11,12 +11,11 @@
     "signals"
   ],
   "peerDependencies": {
-    "@angular/core": ">=18.0.0 ",
-    "@angular/common": ">=18.0.0",
-    "@angular/forms": ">=18.0.0",
-    "@angular/animations": ">=18.0.0",
-    "@angular/cdk": ">=18.0.0",
-    "rxjs": "^6.0.0 || ^7.0.0"
+    "@angular/core": ">=19.0.0",
+    "@angular/common": ">=19.0.0",
+    "@angular/forms": ">=19.0.0",
+    "@angular/cdk": ">=19.0.0",
+    "rxjs": ">=7.8.0"
   },
   "sideEffects": false,
   "module": "fesm2022/ngx-dev-toolbar.mjs",

package/tokens.d.ts

@@ -3,7 +3,6 @@ import { ToolbarConfig } from './models/toolbar-config.interface';
 import { ToolbarService } from './models/toolbar.interface';
 import { ToolbarAppFeature } from './tools/app-features-tool/app-features.models';
 import { ToolbarFlag } from './tools/feature-flags-tool/feature-flags.models';
-import { Language } from './tools/language-tool/language.models';
 import { ToolbarPermission } from './tools/permissions-tool/permissions.models';
 /**
  * InjectionToken for the Toolbar configuration.
@@ -46,23 +45,6 @@ export declare const TOOLBAR_FEATURE_FLAGS: InjectionToken<ToolbarService<Toolba
  * ```
  */
 export declare const TOOLBAR_PERMISSIONS: InjectionToken<ToolbarService<ToolbarPermission>>;
-/**
- * InjectionToken for the Language service.
- *
- * Use this token for tree-shakeable injection of the language service.
- * When using dynamic imports, this token enables complete tree-shaking of
- * the toolbar in production builds.
- *
- * @example
- * ```typescript
- * // In your service
- * private devToolbar = inject(TOOLBAR_LANGUAGE, { optional: true });
- *
- * // Safe to call - no-op if toolbar is not provided
- * this.devToolbar?.setAvailableOptions(languages);
- * ```
- */
-export declare const TOOLBAR_LANGUAGE: InjectionToken<ToolbarService<Language>>;
 /**
  * InjectionToken for the App Features service.
  *

package/toolbar-state.service.d.ts

@@ -1,30 +1,31 @@
 import { ToolbarConfig } from './models/toolbar-config.interface';
+import { ToolbarPosition } from './models/toolbar-position.model';
 import * as i0 from "@angular/core";
 export declare class ToolbarStateService {
+    private storageService;
     private state;
     readonly isVisible: import("@angular/core").Signal<boolean>;
     readonly isDarkTheme: import("@angular/core").Signal<boolean>;
     readonly activeToolId: import("@angular/core").Signal<string | null>;
     readonly hasActiveTool: import("@angular/core").Signal<boolean>;
     readonly error: import("@angular/core").Signal<string | null>;
-    readonly theme: import("@angular/core").Signal<"dark" | "light">;
-    /**
-     * The delay to hide the toolbar
-     */
+    readonly theme: import("@angular/core").Signal<"light" | "dark">;
     readonly delay: import("@angular/core").Signal<number>;
     readonly config: import("@angular/core").Signal<ToolbarConfig>;
-    /**
-     * Indicates if the toolbar is enabled based on config.
-     * When disabled, toolbar UI won't render and services won't return forced values.
-     * @default true
-     */
     readonly isEnabled: import("@angular/core").Signal<boolean>;
+    readonly position: import("@angular/core").Signal<ToolbarPosition>;
+    readonly isCompletelyHidden: import("@angular/core").Signal<boolean>;
+    constructor();
     setVisibility(isVisible: boolean): void;
     setTheme(theme: 'light' | 'dark'): void;
     setActiveTool(toolId: string | null): void;
     toggleTool(toolId: string | null): void;
     toggleVisibility(): void;
     setConfig(config: ToolbarConfig): void;
+    setPosition(position: ToolbarPosition): void;
+    toggleCompletelyHidden(): void;
+    private loadPersistedState;
+    private persistState;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarStateService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ToolbarStateService>;
 }

package/toolbar.component.d.ts

@@ -11,6 +11,7 @@ export declare class ToolbarComponent implements OnInit, OnDestroy {
     config: import("@angular/core").InputSignal<ToolbarConfig>;
     private globalStyleElement?;
     private keyboardShortcut;
+    private hideShortcut;
     private mouseLeave;
     constructor();
     ngOnInit(): void;

package/tools/app-features-tool/app-features-internal.service.d.ts

@@ -1,4 +1,5 @@
 import { Observable } from 'rxjs';
+import { ApplyToSourceState } from '../../models/toolbar.interface';
 import { ToolbarAppFeature, ForcedAppFeaturesState } from './app-features.models';
 import * as i0 from "@angular/core";
 /**
@@ -73,6 +74,11 @@ export declare class ToolbarInternalAppFeaturesService {
      * @returns Current forced features state
      */
     getCurrentForcedState(): ForcedAppFeaturesState;
+    readonly applyCallback: import("@angular/core").WritableSignal<((id: string, value: boolean) => Promise<void>) | null>;
+    readonly applyStates: import("@angular/core").WritableSignal<Record<string, ApplyToSourceState>>;
+    readonly hasApplyCallback: import("@angular/core").Signal<boolean>;
+    setApplyToSource(callback: (id: string, value: boolean) => Promise<void>): void;
+    applyToSource(id: string, value: boolean): Promise<void>;
     /**
      * Merge natural app features with forced state.
      *

package/tools/app-features-tool/app-features-tool.component.d.ts

@@ -21,6 +21,7 @@ export declare class ToolbarAppFeaturesToolComponent {
     private readonly VIEW_STATE_KEY;
     protected readonly activeFilter: import("@angular/core").WritableSignal<AppFeatureFilter>;
     protected readonly searchQuery: import("@angular/core").WritableSignal<string>;
+    protected readonly pinnedIds: import("@angular/core").WritableSignal<Set<string>>;
     constructor();
     private loadViewState;
     protected readonly features: import("@angular/core").Signal<ToolbarAppFeature[]>;
@@ -37,6 +38,9 @@ export declare class ToolbarAppFeaturesToolComponent {
         value: string;
         label: string;
     }[];
+    protected readonly hasApplyCallback: import("@angular/core").Signal<boolean>;
+    protected getApplyState(featureId: string): 'idle' | 'loading' | 'success' | 'error';
+    protected onApplyToSource(featureId: string, value: boolean): void;
     /**
      * Handle filter dropdown change.
      * Updates the active filter to show all/forced/enabled/disabled features.
@@ -54,6 +58,7 @@ export declare class ToolbarAppFeaturesToolComponent {
      * Updates the search query to filter features by name/description.
      */
     onSearchChange(query: string): void;
+    togglePin(featureId: string): void;
     /**
      * Get the dropdown value for a feature's current state.
      * - Returns empty string if not forced (natural state)

package/tools/app-features-tool/app-features.service.d.ts

@@ -170,6 +170,13 @@ export declare class ToolbarAppFeaturesService implements ToolbarService<Toolbar
      * ```
      */
     getCurrentForcedState(): ForcedAppFeaturesState;
+    /**
+     * Registers a callback to persist a forced app feature value back to the actual data source.
+     * When set, an "apply to source" button appears on each forced feature in the toolbar UI.
+     *
+     * @param callback - Async function that receives the feature ID and its forced boolean value
+     */
+    setApplyToSource(callback: (id: string, value: boolean) => Promise<void>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarAppFeaturesService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ToolbarAppFeaturesService>;
 }

package/tools/feature-flags-tool/feature-flags-internal.service.d.ts

@@ -1,4 +1,5 @@
 import { Observable } from 'rxjs';
+import { ApplyToSourceState } from '../../models/toolbar.interface';
 import { ToolbarFlag } from './feature-flags.models';
 import * as i0 from "@angular/core";
 interface ForcedFlagsState {
@@ -31,6 +32,11 @@ export declare class ToolbarInternalFeatureFlagService {
      * Returns the raw state of enabled and disabled flag IDs
      */
     getCurrentForcedState(): ForcedFlagsState;
+    readonly applyCallback: import("@angular/core").WritableSignal<((id: string, value: boolean) => Promise<void>) | null>;
+    readonly applyStates: import("@angular/core").WritableSignal<Record<string, ApplyToSourceState>>;
+    readonly hasApplyCallback: import("@angular/core").Signal<boolean>;
+    setApplyToSource(callback: (id: string, value: boolean) => Promise<void>): void;
+    applyToSource(id: string, value: boolean): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarInternalFeatureFlagService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ToolbarInternalFeatureFlagService>;
 }

package/tools/feature-flags-tool/feature-flags-tool.component.d.ts

@@ -7,6 +7,7 @@ export declare class ToolbarFeatureFlagsToolComponent {
     private readonly VIEW_STATE_KEY;
     protected readonly activeFilter: import("@angular/core").WritableSignal<FeatureFlagFilter>;
     protected readonly searchQuery: import("@angular/core").WritableSignal<string>;
+    protected readonly pinnedIds: import("@angular/core").WritableSignal<Set<string>>;
     constructor();
     private loadViewState;
     protected readonly flags: import("@angular/core").Signal<ToolbarFlag[]>;
@@ -23,9 +24,13 @@ export declare class ToolbarFeatureFlagsToolComponent {
         value: string;
         label: string;
     }[];
+    protected readonly hasApplyCallback: import("@angular/core").Signal<boolean>;
+    protected getApplyState(flagId: string): 'idle' | 'loading' | 'success' | 'error';
+    protected onApplyToSource(flagId: string, value: boolean): void;
     onFilterChange(value: string | undefined): void;
     onFlagChange(flagId: string, value: string): void;
     onSearchChange(query: string): void;
+    togglePin(flagId: string): void;
     protected getFlagValue(flag: ToolbarFlag): string;
     protected getFlagPlaceholder(flag: ToolbarFlag): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarFeatureFlagsToolComponent, never>;

package/tools/feature-flags-tool/feature-flags.service.d.ts

@@ -38,6 +38,13 @@ export declare class ToolbarFeatureFlagService implements ToolbarService<Toolbar
      * ```
      */
     getValues(): Observable<ToolbarFlag[]>;
+    /**
+     * Registers a callback to persist a forced flag value back to the actual data source.
+     * When set, an "apply to source" button appears on each forced flag in the toolbar UI.
+     *
+     * @param callback - Async function that receives the flag ID and its forced boolean value
+     */
+    setApplyToSource(callback: (id: string, value: boolean) => Promise<void>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarFeatureFlagService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ToolbarFeatureFlagService>;
 }

package/tools/home-tool/home-tool.component.d.ts

@@ -1,4 +1,5 @@
 import { ToolbarWindowOptions } from '../../components/toolbar-tool/toolbar-tool.models';
+import { ToolbarPosition } from '../../models/toolbar-position.model';
 import { ToolbarStateService } from '../../toolbar-state.service';
 import * as i0 from "@angular/core";
 export declare class ToolbarHomeToolComponent {
@@ -7,6 +8,7 @@ export declare class ToolbarHomeToolComponent {
     private readonly storageService;
     readonly badge: import("@angular/core").InputSignal<string | number | undefined>;
     readonly title = "Angular Toolbar";
+    readonly positions: readonly ToolbarPosition[];
     readonly options: ToolbarWindowOptions;
     readonly links: readonly [{
         readonly icon: "bug";
@@ -29,6 +31,7 @@ export declare class ToolbarHomeToolComponent {
         readonly url: "https://discord.com/invite/angular";
         readonly label: "Community";
     }];
+    onPositionChange(position: ToolbarPosition): void;
     onExportSettings(): void;
     onImportSettings(): void;
     onResetSettings(): void;

package/tools/home-tool/settings.models.d.ts

@@ -1,3 +1,6 @@
+import { ToolbarPosition } from '../../models/toolbar-position.model';
 export interface Settings {
     isDarkMode: boolean;
+    position: ToolbarPosition;
+    isCompletelyHidden: boolean;
 }

package/tools/i18n-tool/i18n-formatting.utils.d.ts

@@ -0,0 +1,10 @@
+export declare function formatNumber(locale: string, value: number): string;
+export declare function formatDate(locale: string, timezone: string, date: Date): string;
+export declare function formatTime(locale: string, timezone: string, date: Date): string;
+export declare function formatCurrency(locale: string, currency: string, value: number): string;
+export declare function pseudoLocalize(text: string): string;
+export type I18nDateFormatType = 'locale-default' | 'MM/DD/YYYY' | 'DD/MM/YYYY' | 'YYYY-MM-DD';
+export type I18nNumberFormatType = 'locale-default' | 'period-comma' | 'comma-period' | 'space-comma';
+export declare function formatCustomDate(date: Date, format: I18nDateFormatType, locale: string, timezone: string): string;
+export declare function formatCustomNumber(value: number, format: I18nNumberFormatType, locale: string): string;
+export declare function expandText(text: string, factor?: number): string;

package/tools/i18n-tool/i18n-internal.service.d.ts

@@ -0,0 +1,86 @@
+import { Observable } from 'rxjs';
+import { I18nCurrency, I18nDateFormat, I18nFirstDayOfWeek, I18nLocale, I18nNumberFormat, I18nPresetConfig, I18nState, I18nTimezone, I18nToolConfig, I18nUnitSystem } from './i18n.models';
+import * as i0 from "@angular/core";
+export declare class ToolbarInternalI18nService {
+    private readonly STORAGE_LOCALE;
+    private readonly STORAGE_TIMEZONE;
+    private readonly STORAGE_CURRENCY;
+    private readonly STORAGE_UNIT_SYSTEM;
+    private readonly STORAGE_DATE_FORMAT;
+    private readonly STORAGE_FIRST_DAY;
+    private readonly STORAGE_NUMBER_FORMAT;
+    private readonly STORAGE_PSEUDO_LOC;
+    private readonly STORAGE_RTL;
+    private readonly OLD_LANGUAGE_KEY;
+    private readonly storageService;
+    private readonly stateService;
+    private readonly document;
+    private locales$;
+    private timezones$;
+    private currencies$;
+    private forcedLocale$;
+    private forcedTimezone$;
+    private forcedCurrency$;
+    private forcedUnitSystem$;
+    private forcedDateFormat$;
+    private forcedFirstDayOfWeek$;
+    private forcedNumberFormat$;
+    private toolConfig$;
+    private pseudoLocEnabled$;
+    private rtlEnabled$;
+    locales: import("@angular/core").Signal<I18nLocale[]>;
+    timezones: import("@angular/core").Signal<I18nTimezone[]>;
+    availableCurrencies: import("@angular/core").Signal<I18nCurrency[]>;
+    forcedLocale: import("@angular/core").Signal<I18nLocale | null>;
+    forcedTimezone: import("@angular/core").Signal<I18nTimezone | null>;
+    forcedCurrency: import("@angular/core").Signal<I18nCurrency | null>;
+    forcedUnitSystem: import("@angular/core").Signal<I18nUnitSystem | null>;
+    forcedDateFormat: import("@angular/core").Signal<I18nDateFormat | null>;
+    forcedFirstDayOfWeek: import("@angular/core").Signal<I18nFirstDayOfWeek | null>;
+    forcedNumberFormat: import("@angular/core").Signal<I18nNumberFormat | null>;
+    toolConfig: import("@angular/core").Signal<I18nToolConfig | {}>;
+    pseudoLocEnabled: import("@angular/core").Signal<boolean>;
+    rtlEnabled: import("@angular/core").Signal<boolean>;
+    constructor();
+    setAvailableLocales(locales: I18nLocale[]): void;
+    getAvailableLocales(): Observable<I18nLocale[]>;
+    setForcedLocale(locale: I18nLocale): void;
+    getForcedLocale(): Observable<I18nLocale[]>;
+    removeForcedLocale(): void;
+    setAvailableTimezones(timezones: I18nTimezone[]): void;
+    getAvailableTimezones(): Observable<I18nTimezone[]>;
+    setForcedTimezone(timezone: I18nTimezone): void;
+    getForcedTimezone(): Observable<I18nTimezone | null>;
+    removeForcedTimezone(): void;
+    setAvailableCurrencies(currencies: I18nCurrency[]): void;
+    getAvailableCurrencies(): Observable<I18nCurrency[]>;
+    setForcedCurrency(currency: I18nCurrency): void;
+    getForcedCurrency(): Observable<I18nCurrency | null>;
+    removeForcedCurrency(): void;
+    setForcedUnitSystem(unitSystem: I18nUnitSystem): void;
+    getForcedUnitSystem(): Observable<I18nUnitSystem | null>;
+    removeForcedUnitSystem(): void;
+    setForcedDateFormat(dateFormat: I18nDateFormat): void;
+    getForcedDateFormat(): Observable<I18nDateFormat | null>;
+    removeForcedDateFormat(): void;
+    setForcedFirstDayOfWeek(firstDay: I18nFirstDayOfWeek): void;
+    getForcedFirstDayOfWeek(): Observable<I18nFirstDayOfWeek | null>;
+    removeForcedFirstDayOfWeek(): void;
+    setForcedNumberFormat(numberFormat: I18nNumberFormat): void;
+    getForcedNumberFormat(): Observable<I18nNumberFormat | null>;
+    removeForcedNumberFormat(): void;
+    setToolConfig(config: I18nToolConfig): void;
+    setPseudoLocEnabled(enabled: boolean): void;
+    getPseudoLocEnabled(): Observable<boolean>;
+    setRtlEnabled(enabled: boolean): void;
+    getRtlEnabled(): Observable<boolean>;
+    applyPresetLocale(localeId: string | null): Promise<void>;
+    applyPresetI18n(config: I18nPresetConfig | undefined): void;
+    getCurrentI18nState(): I18nState;
+    getCurrentForcedLocaleId(): string | null;
+    private loadFromStorage;
+    private migrateOldLanguageKey;
+    private applyRtl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarInternalI18nService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ToolbarInternalI18nService>;
+}

package/tools/i18n-tool/i18n-tool.component.d.ts

@@ -0,0 +1,66 @@
+import { ToolbarWindowOptions } from '../../components/toolbar-tool/toolbar-tool.models';
+import { I18nToolConfig } from './i18n.models';
+import * as i0 from "@angular/core";
+export declare class ToolbarI18nToolComponent {
+    private readonly i18nService;
+    protected readonly options: ToolbarWindowOptions;
+    readonly unitSystemOptions: {
+        value: string;
+        label: string;
+    }[];
+    readonly dateFormatOptions: {
+        value: string;
+        label: string;
+    }[];
+    readonly firstDayOptions: {
+        value: string;
+        label: string;
+    }[];
+    readonly numberFormatOptions: {
+        value: string;
+        label: string;
+    }[];
+    activeLocale: import("@angular/core").WritableSignal<string>;
+    activeTimezone: import("@angular/core").WritableSignal<string>;
+    activeCurrency: import("@angular/core").WritableSignal<string>;
+    activeUnitSystem: import("@angular/core").WritableSignal<string>;
+    activeDateFormat: import("@angular/core").WritableSignal<string>;
+    activeFirstDayOfWeek: import("@angular/core").WritableSignal<string>;
+    activeNumberFormat: import("@angular/core").WritableSignal<string>;
+    pseudoLocEnabled: import("@angular/core").Signal<boolean>;
+    rtlEnabled: import("@angular/core").Signal<boolean>;
+    toolConfig: import("@angular/core").Signal<I18nToolConfig>;
+    localeOptions: import("@angular/core").Signal<{
+        value: string;
+        label: string;
+    }[]>;
+    timezoneOptions: import("@angular/core").Signal<{
+        value: string;
+        label: string;
+    }[]>;
+    currencyOptions: import("@angular/core").Signal<{
+        value: string;
+        label: string;
+    }[]>;
+    private currentLocaleCode;
+    private currentTimezone;
+    private currentCurrencyCode;
+    private readonly previewDate_;
+    previewNumber: import("@angular/core").Signal<string>;
+    previewDate: import("@angular/core").Signal<string>;
+    previewTime: import("@angular/core").Signal<string>;
+    previewCurrencyValue: import("@angular/core").Signal<string>;
+    pseudoPreview: import("@angular/core").Signal<string>;
+    constructor();
+    onLocaleChange(localeId: string): void;
+    onTimezoneChange(timezoneId: string): void;
+    onCurrencyChange(currencyCode: string): void;
+    onUnitSystemChange(unitSystem: string): void;
+    onPseudoLocToggle(event: Event): void;
+    onRtlToggle(event: Event): void;
+    onDateFormatChange(value: string): void;
+    onFirstDayOfWeekChange(value: string): void;
+    onNumberFormatChange(value: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarI18nToolComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarI18nToolComponent, "ndt-i18n-tool", never, {}, {}, never, never, true, never>;
+}

package/tools/i18n-tool/i18n.models.d.ts

@@ -0,0 +1,55 @@
+export interface I18nLocale {
+    id: string;
+    name: string;
+    code: string;
+}
+export interface I18nTimezone {
+    id: string;
+    name: string;
+    offset: string;
+}
+export interface I18nCurrency {
+    code: string;
+    name: string;
+    symbol: string;
+}
+export type I18nUnitSystem = 'metric' | 'imperial';
+export type I18nDateFormat = 'locale-default' | 'MM/DD/YYYY' | 'DD/MM/YYYY' | 'YYYY-MM-DD';
+export type I18nFirstDayOfWeek = 'locale-default' | 'sunday' | 'monday' | 'saturday';
+export type I18nNumberFormat = 'locale-default' | 'period-comma' | 'comma-period' | 'space-comma';
+export interface I18nState {
+    locale: I18nLocale | null;
+    timezone: I18nTimezone | null;
+    currency: I18nCurrency | null;
+    unitSystem: I18nUnitSystem | null;
+    dateFormat: I18nDateFormat | null;
+    firstDayOfWeek: I18nFirstDayOfWeek | null;
+    numberFormat: I18nNumberFormat | null;
+    pseudoLocEnabled: boolean;
+    rtlEnabled: boolean;
+}
+export interface I18nPresetConfig {
+    locale?: string | null;
+    timezone?: string | null;
+    currency?: string | null;
+    unitSystem?: string | null;
+    dateFormat?: string | null;
+    firstDayOfWeek?: string | null;
+    numberFormat?: string | null;
+    pseudoLocEnabled?: boolean;
+    rtlEnabled?: boolean;
+}
+export interface I18nToolConfig {
+    showLocale?: boolean;
+    showTimezone?: boolean;
+    showCurrency?: boolean;
+    showUnits?: boolean;
+    showDateFormat?: boolean;
+    showFirstDayOfWeek?: boolean;
+    showNumberFormat?: boolean;
+    showFormattingPreview?: boolean;
+    showStressTesting?: boolean;
+}
+export declare const DEFAULT_TIMEZONES: I18nTimezone[];
+export declare const DEFAULT_CURRENCIES: I18nCurrency[];
+export declare const CURRENCY_SYMBOLS: Record<string, string>;