From 8a3b28c604f31808a798c2b20f7b10f847211d74 Mon Sep 17 00:00:00 2001 From: skrustev Date: Tue, 8 Jul 2025 10:41:17 +0300 Subject: [PATCH 1/2] refactor(*): New localization initial implementation. --- .../action-strip/action-strip.component.ts | 7 +- .../src/lib/banner/banner.component.ts | 7 +- .../src/lib/calendar/calendar-base.ts | 5 + .../src/lib/carousel/carousel.component.ts | 4 + .../src/lib/chips/chip.component.ts | 7 +- .../src/lib/combo/combo.common.ts | 7 +- .../src/lib/core/i18n/resources.ts | 62 ++++---- .../igniteui-angular/src/lib/core/utils.ts | 70 ++++++++- .../lib/data-operations/filtering-strategy.ts | 6 +- .../lib/date-picker/date-picker.component.ts | 4 + .../date-range-picker.component.ts | 4 + .../src/lib/grids/cell.component.ts | 16 +-- .../src/lib/grids/common/pipes.ts | 47 +++++- .../advanced-filtering-dialog.component.ts | 11 +- .../excel-style-filtering.component.ts | 6 +- .../src/lib/grids/grid-base.directive.ts | 8 +- .../lib/grids/grid/grid-filtering-ui.spec.ts | 6 +- .../grids/pivot-grid/pivot-grid-dimensions.ts | 4 + .../grids/summaries/summary-cell.component.ts | 4 +- .../lib/input-group/input-group.component.ts | 4 + .../src/lib/list/list.component.ts | 4 + .../src/lib/paginator/paginator.component.ts | 9 +- .../query-builder-header.component.ts | 7 + .../query-builder-tree.component.ts | 14 +- .../query-builder/query-builder.component.ts | 4 + .../lib/time-picker/time-picker.component.ts | 4 + .../lib/tree/tree-node/tree-node.component.ts | 4 + projects/igniteui-angular/src/public_api.ts | 2 +- .../grid-localization.sample.html | 21 ++- .../grid-localization.sample.ts | 7 +- src/app/shared/financialData.ts | 135 ++++++++++++------ tsconfig.json | 5 +- 32 files changed, 375 insertions(+), 130 deletions(-) diff --git a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts index ff848fa4846..6c35d4f2d1e 100644 --- a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts +++ b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts @@ -29,6 +29,7 @@ import { getCurrentResourceStrings } from '../core/i18n/resources'; import { IgxIconButtonDirective } from '../directives/button/icon-button.directive'; import { IgxActionStripToken } from './token'; import { trackByIdentity } from '../core/utils'; +import { getI18nManager } from 'igniteui-i18n-core'; @Directive({ selector: '[igxActionStripMenuItem]', @@ -197,7 +198,11 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterConten protected el: ElementRef, /** @hidden @internal **/ public cdr: ChangeDetectorRef, - ) { } + ) { + getI18nManager().onResourceChange(() => { + this._resourceStrings = getCurrentResourceStrings(ActionStripResourceStringsEN, false); + }); + } /** * Menu Items list. diff --git a/projects/igniteui-angular/src/lib/banner/banner.component.ts b/projects/igniteui-angular/src/lib/banner/banner.component.ts index b6055d350a1..38a85b56499 100644 --- a/projects/igniteui-angular/src/lib/banner/banner.component.ts +++ b/projects/igniteui-angular/src/lib/banner/banner.component.ts @@ -20,6 +20,7 @@ import { IgxExpansionPanelBodyComponent } from '../expansion-panel/expansion-pan import { IgxExpansionPanelComponent } from '../expansion-panel/expansion-panel.component'; import { BannerResourceStringsEN, IBannerResourceStrings } from '../core/i18n/banner-resources'; import { getCurrentResourceStrings } from '../core/i18n/resources'; +import { getI18nManager } from 'igniteui-i18n-core'; export interface BannerEventArgs extends IBaseEventArgs { event?: Event; @@ -237,7 +238,11 @@ export class IgxBannerComponent implements IToggleView { private _animationSettings: ToggleAnimationSettings; private _resourceStrings = getCurrentResourceStrings(BannerResourceStringsEN); - constructor(public elementRef: ElementRef) { } + constructor(public elementRef: ElementRef) { + getI18nManager().onResourceChange(() => { + this._resourceStrings = getCurrentResourceStrings(BannerResourceStringsEN, false); + }); + } /** * Opens the banner diff --git a/projects/igniteui-angular/src/lib/calendar/calendar-base.ts b/projects/igniteui-angular/src/lib/calendar/calendar-base.ts index 94f0a85d2a0..af4e6405242 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar-base.ts +++ b/projects/igniteui-angular/src/lib/calendar/calendar-base.ts @@ -11,6 +11,7 @@ import { getCurrentResourceStrings } from '../core/i18n/resources'; import { KeyboardNavigationService } from './calendar.services'; import { getYearRange, isDateInRanges } from './common/helpers'; import { CalendarDay } from './common/model'; +import { getI18nManager } from 'igniteui-i18n-core'; /** @hidden @internal */ @Directive({ @@ -659,6 +660,10 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor { this.locale = _localeId; this.viewDate = this.viewDate ? this.viewDate : new Date(); this.initFormatters(); + + getI18nManager().onResourceChange(() => { + this._resourceStrings = getCurrentResourceStrings(CalendarResourceStringsEN, false); + }); } /** diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts index 8f740c49d02..f90d14542be 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts @@ -40,6 +40,7 @@ import { getCurrentResourceStrings } from '../core/i18n/resources'; import { HammerGesturesManager } from '../core/touch'; import { CarouselAnimationType, CarouselIndicatorsOrientation } from './enums'; import { IgxDirectionality } from '../services/direction/directionality'; +import { getI18nManager } from 'igniteui-i18n-core'; let NEXT_ID = 0; @@ -576,6 +577,9 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On ) { super(animationService, cdr); this.differ = this.iterableDiffers.find([]).create(null); + getI18nManager().onResourceChange(() => { + this._resourceStrings = getCurrentResourceStrings(CarouselResourceStringsEN, false); + }); } /** @hidden */ diff --git a/projects/igniteui-angular/src/lib/chips/chip.component.ts b/projects/igniteui-angular/src/lib/chips/chip.component.ts index b4ef3466e29..d62fe35f970 100644 --- a/projects/igniteui-angular/src/lib/chips/chip.component.ts +++ b/projects/igniteui-angular/src/lib/chips/chip.component.ts @@ -24,6 +24,7 @@ import { IgxIconComponent } from '../icon/icon.component'; import { NgClass, NgTemplateOutlet } from '@angular/common'; import { getCurrentResourceStrings } from '../core/i18n/resources'; import { Size } from '../grids/common/enums'; +import { getI18nManager } from 'igniteui-i18n-core'; export const IgxChipTypeVariant = { PRIMARY: 'primary', @@ -610,7 +611,11 @@ export class IgxChipComponent implements OnInit, OnDestroy { public cdr: ChangeDetectorRef, private ref: ElementRef, private renderer: Renderer2, - @Inject(DOCUMENT) public document: any) { } + @Inject(DOCUMENT) public document: any) { + getI18nManager().onResourceChange(() => { + this._resourceStrings = getCurrentResourceStrings(ChipResourceStringsEN, false); + }); + } /** * @hidden diff --git a/projects/igniteui-angular/src/lib/combo/combo.common.ts b/projects/igniteui-angular/src/lib/combo/combo.common.ts index 6084b0ef637..28e8032ba94 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.common.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.common.ts @@ -47,6 +47,7 @@ import { IComboItemAdditionEvent, IComboSearchInputEventArgs } from './public_ap import { ComboResourceStringsEN, IComboResourceStrings } from '../core/i18n/combo-resources'; import { getCurrentResourceStrings } from '../core/i18n/resources'; import { isEqual } from 'lodash-es'; +import { getI18nManager } from 'igniteui-i18n-core'; export const IGX_COMBO_COMPONENT = /*@__PURE__*/new InjectionToken('IgxComboComponentToken'); @@ -967,7 +968,11 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh @Optional() @Inject(IGX_INPUT_GROUP_TYPE) protected _inputGroupType: IgxInputGroupType, @Optional() protected _injector: Injector, @Optional() @Inject(IgxIconService) protected _iconService?: IgxIconService, - ) { } + ) { + getI18nManager().onResourceChange(() => { + this._resourceStrings = getCurrentResourceStrings(ComboResourceStringsEN, false); + }); + } public ngAfterViewChecked() { const targetElement = this.inputGroup.element.nativeElement.querySelector('.igx-input-group__bundle') as HTMLElement; diff --git a/projects/igniteui-angular/src/lib/core/i18n/resources.ts b/projects/igniteui-angular/src/lib/core/i18n/resources.ts index e8eed61033f..a89cd40b074 100644 --- a/projects/igniteui-angular/src/lib/core/i18n/resources.ts +++ b/projects/igniteui-angular/src/lib/core/i18n/resources.ts @@ -13,48 +13,54 @@ import { IActionStripResourceStrings } from './action-strip-resources'; import { IQueryBuilderResourceStrings } from './query-builder-resources'; import { IComboResourceStrings } from './combo-resources'; import { IBannerResourceStrings } from './banner-resources'; +import { + registerI18n, + getCurrentResourceStrings as getCurrentResourceStringsCore, + IResourceStrings as IResourceStringsCore +} from 'igniteui-i18n-core'; export interface IResourceStrings extends IGridResourceStrings, ITimePickerResourceStrings, ICalendarResourceStrings, ICarouselResourceStrings, IChipResourceStrings, IComboResourceStrings, IInputResourceStrings, IDatePickerResourceStrings, IDateRangePickerResourceStrings, IListResourceStrings, IPaginatorResourceStrings, ITreeResourceStrings, IActionStripResourceStrings, IQueryBuilderResourceStrings, IBannerResourceStrings { } -export class igxI18N { - private static _instance: igxI18N; - - private _currentResourceStrings: IResourceStrings = { }; - - private constructor() { } - - public static instance() { - return this._instance || (this._instance = new this()); +function igxRegisterI18n(resourceStrings: IResourceStrings) { + // Remove `igx_` prefix for compatibility with older versions. + const genericResourceStrings: IResourceStringsCore = {}; + for (const key of Object.keys(resourceStrings)) { + let stringKey = key; + if (stringKey.startsWith("igx_")) { + stringKey = stringKey.replace("igx_", ""); + } + genericResourceStrings[stringKey] = resourceStrings[key]; } + registerI18n(genericResourceStrings); +} - /** - * Changes the resource strings for all components in the application - * ``` - * @param resourceStrings to be applied - */ - public changei18n(resourceStrings: IResourceStrings) { - for (const key of Object.keys(resourceStrings)) { - this._currentResourceStrings[key] = resourceStrings[key]; - } +/** Get current resource strings based on default. Result is truncated result, containing only relevant locale strings. */ +export function getCurrentResourceStrings(defaultEN: T, init = true) { + const igxResourceStringKeys = Object.keys(defaultEN); + if (init) { + igxRegisterI18n(defaultEN); } - public getCurrentResourceStrings(en: IResourceStrings): IResourceStrings { - for (const key of Object.keys(en)) { - if (!this._currentResourceStrings[key]) { - this._currentResourceStrings[key] = en[key]; - } + // Append back `igx_` prefix for compatibility with older versions. + const resourceStrings = getCurrentResourceStringsCore(); + const normalizedResourceStrings: T = {} as T; + const resourceStringsKeys = Object.keys(resourceStrings); + for (const key of resourceStringsKeys) { + let stringKey = key; + if (!stringKey.startsWith("igx_")) { + stringKey = "igx_" + stringKey; + } + if (igxResourceStringKeys.includes(stringKey)) { + normalizedResourceStrings[stringKey] = resourceStrings[key]; } - return this._currentResourceStrings; } -} -export function getCurrentResourceStrings(en: IResourceStrings) { - return igxI18N.instance().getCurrentResourceStrings(en); + return normalizedResourceStrings; } export function changei18n(resourceStrings: IResourceStrings) { - igxI18N.instance().changei18n(resourceStrings); + igxRegisterI18n(resourceStrings); } diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts index a787a9cdcd5..c3c6ad5ef42 100644 --- a/projects/igniteui-angular/src/lib/core/utils.ts +++ b/projects/igniteui-angular/src/lib/core/utils.ts @@ -5,6 +5,7 @@ import { NEVER, Observable } from 'rxjs'; import { setImmediate } from './setImmediate'; import { isDevMode } from '@angular/core'; import type { IgxTheme } from '../services/theme/theme.token'; +import { getI18nManager } from 'igniteui-i18n-core'; /** @hidden @internal */ export const ELEMENTS_TOKEN = /*@__PURE__*/new InjectionToken('elements environment'); @@ -579,14 +580,75 @@ export const isConstructor = (ref: any) => typeof ref === 'function' && Boolean( * Similar to Angular's formatDate. However it will not throw on `undefined | null | ''` instead * coalescing to an empty string. */ -export const formatDate = (value: string | number | Date, format: string, locale: string, timezone?: string): string => { +export function formatDate(value: Date | string | number | null | undefined, format: string, locale: string, timezone?: string): string { if (value === null || value === undefined || value === '') { return ''; } - return _formatDate(value, format, locale, timezone); -}; + if (typeof value === "string") { + value = new Date(value); + } + const options: Intl.DateTimeFormatOptions = { + timeZone: timezone + }; + return getI18nManager().formatDateTime(value, locale, options); +} + +function parseDigitsInfo(value: string) { + let minIntegerDigits = undefined, minFractionDigits = undefined, maxFractionDigits = undefined; + if (value) { + const parts = value.split("-"); + const innerParts = parts[0].split("."); + if (innerParts[0] !== "1") { + minIntegerDigits = parseInt(innerParts[0]); + } + if (innerParts.length == 2 && innerParts[1] !== "0") { + minFractionDigits = parseInt(innerParts[1]); + } + if (parts.length == 2 && parts[1] !== "3") { + maxFractionDigits = parseInt(parts[1]); + } + } + return { minIntegerDigits, minFractionDigits, maxFractionDigits }; +} -export const formatCurrency = new CurrencyPipe(undefined).transform; +function formatNumberGeneric(value: number | string | null | undefined, style?: 'decimal' | 'percent' | 'currency', locale?: string, digitsInfo?: string, currencyCode?: string, display?: 'code' | 'symbol' | 'symbol-narrow' | string) { + if (value === null || value === undefined || value === '') { + return ''; + } + if (typeof value === "string") { + value = parseFloat(value); + } + const parsedDigitsInfo = parseDigitsInfo(digitsInfo); + let currencyDisplay: keyof Intl.NumberFormatOptionsCurrencyDisplayRegistry; + if (display !== 'code' && display !== 'symbol' && display !== 'symbol-narrow' && display !== 'narrowSymbol' && display !== "name") { + currencyDisplay = 'symbol'; + } else if (display === 'symbol-narrow') { + currencyDisplay = 'narrowSymbol'; + } else { + currencyCode = display || undefined; + } + const options: Intl.NumberFormatOptions = { + style: style, + currency: currencyCode, + currencyDisplay: currencyDisplay, + minimumIntegerDigits: parsedDigitsInfo.minIntegerDigits, + minimumFractionDigits: parsedDigitsInfo.minFractionDigits, + maximumFractionDigits: parsedDigitsInfo.maxFractionDigits + }; + return getI18nManager().formatNumber(value, locale, options); +} + +export function formatNumber(value: number | string | null | undefined, locale?: string, digitsInfo?: string): string { + return formatNumberGeneric(value, "decimal", locale, digitsInfo); +} + +export function formatPercent(value: number | string | null | undefined, locale?: string, digitsInfo?: string) { + return formatNumberGeneric(value, "percent", locale, digitsInfo); +} + +export function formatCurrency(value: number | string | null | undefined, locale?: string, display?: 'code' | 'symbol' | 'symbol-narrow' | string, currencyCode?: string, digitsInfo?: string): string | null { + return formatNumberGeneric(value, "currency", locale, digitsInfo, currencyCode, display); +} /** Converts pixel values to their rem counterparts for a base value */ export const rem = (value: number | string) => { diff --git a/projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts index 6a5f0c932fa..2d6ccfb1716 100644 --- a/projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts +++ b/projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts @@ -1,10 +1,10 @@ import { FilteringLogic, type IFilteringExpression } from './filtering-expression.interface'; import { FilteringExpressionsTree, type IFilteringExpressionsTree } from './filtering-expressions-tree'; -import { resolveNestedPath, parseDate, formatDate, formatCurrency, columnFieldPath } from '../core/utils'; +import { resolveNestedPath, parseDate, formatDate, formatCurrency, columnFieldPath, formatNumber, formatPercent } from '../core/utils'; import type { ColumnType, EntityType, GridType } from '../grids/common/grid.interface'; import { GridColumnDataType } from './data-util'; import { SortingDirection } from './sorting-strategy'; -import { formatNumber, formatPercent, getLocaleCurrencyCode } from '@angular/common'; +import { getLocaleCurrencyCode } from '@angular/common'; import type { IFilteringState } from './filtering-state.interface'; import { isTree } from './expressions-tree-util'; import type { IgxHierarchicalGridComponent } from '../grids/hierarchical-grid/hierarchical-grid.component'; @@ -170,7 +170,7 @@ export abstract class BaseFilteringStrategy implements IFilteringStrategy { case GridColumnDataType.Time: return formatDate(value, format, locale, timezone); case GridColumnDataType.Currency: - return formatCurrency(value, currencyCode || getLocaleCurrencyCode(locale), display, digitsInfo, locale); + return formatCurrency(value, locale, display, currencyCode || getLocaleCurrencyCode(locale), digitsInfo); case GridColumnDataType.Number: return formatNumber(value, locale, digitsInfo); case GridColumnDataType.Percent: diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts index a3a6935af7d..c6a6dc3586f 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts @@ -68,6 +68,7 @@ import { IgxIconComponent } from '../icon/icon.component'; import { IgxTextSelectionDirective } from '../directives/text-selection/text-selection.directive'; import { getCurrentResourceStrings } from '../core/i18n/resources'; import { fadeIn, fadeOut } from 'igniteui-angular/animations'; +import { getI18nManager } from 'igniteui-i18n-core'; let NEXT_ID = 0; @@ -517,6 +518,9 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr @Optional() @Inject(IGX_INPUT_GROUP_TYPE) _inputGroupType?: IgxInputGroupType) { super(element, _localeId, _inputGroupType); this.locale = this.locale || this._localeId; + getI18nManager().onResourceChange(() => { + this._resourceStrings = getCurrentResourceStrings(DatePickerResourceStringsEN, false); + }); } /** @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts index e6b5edca0ba..f3567a21b8b 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts @@ -35,6 +35,7 @@ import { IgxPrefixDirective } from '../directives/prefix/prefix.directive'; import { IgxIconComponent } from '../icon/icon.component'; import { getCurrentResourceStrings } from '../core/i18n/resources'; import { fadeIn, fadeOut } from 'igniteui-angular/animations'; +import { getI18nManager } from 'igniteui-i18n-core'; const SingleInputDatesConcatenationString = ' - '; @@ -476,6 +477,9 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective @Optional() @Inject(IGX_INPUT_GROUP_TYPE) _inputGroupType?: IgxInputGroupType) { super(element, _localeId, _inputGroupType); this.locale = this.locale || this._localeId; + getI18nManager().onResourceChange(() => { + this._resourceStrings = getCurrentResourceStrings(DateRangePickerResourceStringsEN, false); + }); } /** @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts index eaacd3064e5..bad343e68d2 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/cell.component.ts @@ -19,14 +19,14 @@ AfterViewInit, booleanAttribute } from '@angular/core'; -import { formatPercent, NgClass, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe, getLocaleCurrencyCode, getCurrencySymbol } from '@angular/common'; +import { NgClass, NgTemplateOutlet, getLocaleCurrencyCode, getCurrencySymbol } from '@angular/common'; import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; import { first, takeUntil, takeWhile } from 'rxjs/operators'; import { Subject } from 'rxjs'; import { IgxTextHighlightDirective } from '../directives/text-highlight/text-highlight.directive'; -import { formatCurrency, formatDate, PlatformUtil } from '../core/utils'; +import { formatCurrency, formatDate, formatPercent, PlatformUtil } from '../core/utils'; import { IgxGridSelectionService } from './selection/selection.service'; import { HammerGesturesManager } from '../core/touch'; import { GridSelectionMode } from './common/enums'; @@ -38,7 +38,7 @@ import { IgxGridCell } from './grid-public-cell'; import { ISelectionNode } from './common/types'; import { AutoPositionStrategy, HorizontalAlignment, IgxOverlayService } from '../services/public_api'; import { IgxIconComponent } from '../icon/icon.component'; -import { IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe } from './common/pipes'; +import { IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, IgxNumberFormatterPipe, IgxDateFormatterPipe, IgxCurrencyFormatterPipe, IgxPercentFormatterPipe } from './common/pipes'; import { IgxTooltipDirective } from '../directives/tooltip/tooltip.directive'; import { IgxTooltipTargetDirective } from '../directives/tooltip/tooltip-target.directive'; import { IgxSuffixDirective } from '../directives/suffix/suffix.directive'; @@ -74,10 +74,10 @@ import { IgxChipComponent } from '../chips/chip.component'; imports: [ NgClass, NgTemplateOutlet, - DecimalPipe, - PercentPipe, - CurrencyPipe, - DatePipe, + IgxNumberFormatterPipe, + IgxPercentFormatterPipe, + IgxCurrencyFormatterPipe, + IgxDateFormatterPipe, ReactiveFormsModule, IgxChipComponent, IgxTextHighlightDirective, @@ -404,7 +404,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT case GridColumnDataType.Percent: return formatPercent(this.value, locale, args.digitsInfo); case GridColumnDataType.Currency: - return formatCurrency(this.value, this.currencyCode, args.display, args.digitsInfo, locale); + return formatCurrency(this.value, locale, args.display, this.currencyCode, args.digitsInfo); case GridColumnDataType.Date: case GridColumnDataType.DateTime: case GridColumnDataType.Time: diff --git a/projects/igniteui-angular/src/lib/grids/common/pipes.ts b/projects/igniteui-angular/src/lib/grids/common/pipes.ts index 818a0ea3854..89e8eaa7b58 100644 --- a/projects/igniteui-angular/src/lib/grids/common/pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/common/pipes.ts @@ -1,6 +1,6 @@ import { Pipe, PipeTransform, Inject } from '@angular/core'; import { DataUtil } from '../../data-operations/data-util'; -import { cloneArray, columnFieldPath, resolveNestedPath } from '../../core/utils'; +import { cloneArray, columnFieldPath, formatCurrency, formatDate, formatNumber, formatPercent, resolveNestedPath } from '../../core/utils'; import { GridType, IGX_GRID_BASE, RowType } from './grid.interface'; import { IgxAddRow } from './crud.service'; import { IgxSummaryOperand, IgxSummaryResult } from '../summaries/grid-summary'; @@ -379,6 +379,51 @@ export class IgxColumnFormatterPipe implements PipeTransform { } } +@Pipe({ + name: 'date', + standalone: true +}) +export class IgxDateFormatterPipe implements PipeTransform { + + public transform(value: Date | string | number | null | undefined, format?: string, timezone?: string, locale?: string) { + return formatDate(value, format, locale, timezone); + } +} + +@Pipe({ + name: 'number', + standalone: true +}) +export class IgxNumberFormatterPipe implements PipeTransform { + + public transform(value: number | string | null | undefined, digitsInfo?: string, locale?: string) { + return formatNumber(value, locale, digitsInfo); + } +} + +@Pipe({ + name: 'percent', + standalone: true +}) +export class IgxPercentFormatterPipe implements PipeTransform { + + public transform(value: number | string | null | undefined, digitsInfo?: string, locale?: string) { + return formatPercent(value, locale, digitsInfo); + } +} + +@Pipe({ + name: 'currency', + standalone: true +}) +export class IgxCurrencyFormatterPipe implements PipeTransform { + + public transform(value: number | string | null | undefined, currencyCode?: string, display?: 'code' | 'symbol' | 'symbol-narrow' | string , digitsInfo?: string, locale?: string) { + + return formatCurrency(value, locale, display, currencyCode, digitsInfo); + } +} + @Pipe({ name: 'summaryFormatter', standalone: true diff --git a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts index e334ede030b..770dbffa219 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts @@ -17,6 +17,7 @@ import { getCurrentResourceStrings } from '../../../core/i18n/resources'; import { QueryBuilderResourceStringsEN } from '../../../core/i18n/query-builder-resources'; import { IgxHierarchicalGridComponent } from '../../hierarchical-grid/hierarchical-grid.component'; import { IgxRowIslandComponent } from '../../hierarchical-grid/row-island.component'; +import { getI18nManager } from 'igniteui-i18n-core'; /** * A component used for presenting advanced filtering UI for a Grid. @@ -62,7 +63,11 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes private _overlayService: IgxOverlayService; private _grid: GridType; - constructor(public cdr: ChangeDetectorRef, protected platform: PlatformUtil) { } + constructor(public cdr: ChangeDetectorRef, protected platform: PlatformUtil) { + getI18nManager().onResourceChange(() => { + this.assignResourceStrings(false); + }); + } /** * @hidden @internal */ @@ -222,13 +227,13 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes } } - private assignResourceStrings() { + private assignResourceStrings(init = true) { // If grid has custom resource strings set for the advanced filtering, // they are passed to the query builder resource strings. const gridRS = this.grid.resourceStrings; if (gridRS !== GridResourceStringsEN) { - const queryBuilderRS = getCurrentResourceStrings(QueryBuilderResourceStringsEN); + const queryBuilderRS = getCurrentResourceStrings(QueryBuilderResourceStringsEN, init); Object.keys(gridRS).forEach((prop) => { const reg = /^igx_grid_(advanced_)?filter_(row_)?/; if (!reg.test(prop)) { diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts index fc77989a402..e71c98bd3d9 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts @@ -21,12 +21,12 @@ import { DOCUMENT } from '@angular/core'; import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../../data-operations/filtering-expressions-tree'; -import { PlatformUtil, formatDate, formatCurrency } from '../../../core/utils'; +import { PlatformUtil, formatDate, formatCurrency, formatNumber, formatPercent } from '../../../core/utils'; import { GridColumnDataType } from '../../../data-operations/data-util'; import { Subscription } from 'rxjs'; import { GridSelectionMode } from '../../common/enums'; import { IgxFilterItem } from '../../../data-operations/filtering-strategy'; -import { formatNumber, formatPercent, getLocaleCurrencyCode, NgClass } from '@angular/common'; +import { getLocaleCurrencyCode, NgClass } from '@angular/common'; import { BaseFilteringComponent } from './base-filtering.component'; import { ExpressionUI, FilterListItem, generateExpressionsList } from './common'; import { ColumnType, GridType, IGX_GRID_BASE } from '../../common/grid.interface'; @@ -737,7 +737,7 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent case GridColumnDataType.Time: return formatDate(value, format, locale, timezone); case GridColumnDataType.Currency: - return formatCurrency(value, currencyCode || getLocaleCurrencyCode(locale), display, digitsInfo, locale); + return formatCurrency(value, locale, display, currencyCode || getLocaleCurrencyCode(locale), digitsInfo); case GridColumnDataType.Number: return formatNumber(value, locale, digitsInfo); case GridColumnDataType.Percent: diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 8850116fa16..edd427a7c4d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -1,4 +1,4 @@ -import { formatNumber, getLocaleNumberFormat, NumberFormatStyle } from '@angular/common'; +import { getLocaleNumberFormat, NumberFormatStyle } from '@angular/common'; import { AfterContentInit, AfterViewInit, @@ -33,7 +33,7 @@ import { ViewContainerRef, DOCUMENT } from '@angular/core'; -import { columnFieldPath, formatDate, resizeObservable } from '../core/utils'; +import { columnFieldPath, formatDate, formatNumber, resizeObservable } from '../core/utils'; import { IgcTrialWatermark } from 'igniteui-trial-watermark'; import { Subject, pipe, fromEvent, animationFrameScheduler, merge } from 'rxjs'; import { takeUntil, first, filter, throttleTime, map, shareReplay, takeWhile } from 'rxjs/operators'; @@ -184,6 +184,7 @@ import { IgxGridValidationService } from './grid/grid-validation.service'; import { getCurrentResourceStrings } from '../core/i18n/resources'; import { isTree, recreateTree, recreateTreeFromFields } from '../data-operations/expressions-tree-util'; import { getUUID } from './common/random'; +import { getI18nManager } from 'igniteui-i18n-core'; interface IMatchInfoCache { row: any; @@ -3505,6 +3506,9 @@ export abstract class IgxGridBaseDirective implements GridType, this.selectedRowsChange.emit(args); }); IgcTrialWatermark.register(); + getI18nManager().onResourceChange(() => { + this._resourceStrings = getCurrentResourceStrings(GridResourceStringsEN, false); + }); } /** diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index 14f470ce4ef..13e9833b2e0 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -22,7 +22,6 @@ import { IgxBadgeComponent } from '../../badge/badge.component'; import { IgxIconComponent } from '../../icon/icon.component'; import { DefaultSortingStrategy, SortingDirection } from '../../data-operations/sorting-strategy'; import { IgxGridHeaderGroupComponent } from '../headers/grid-header-group.component'; -import { igxI18N } from '../../core/i18n/resources'; import { DatePipe, registerLocaleData } from '@angular/common'; import localeDe from '@angular/common/locales/de'; import localeFr from '@angular/common/locales/fr'; @@ -56,6 +55,7 @@ import { GridResourceStringsEN } from '../../core/i18n/grid-resources'; import { setElementSize } from '../../test-utils/helper-utils.spec'; import { IgxDateTimeEditorDirective } from '../../directives/date-time-editor/date-time-editor.directive'; import { IgxTimePickerComponent } from '../../time-picker/time-picker.component'; +import { changei18n } from '../../core/i18n/resources'; const DEBOUNCE_TIME = 30; const FILTER_UI_ROW = 'igx-grid-filtering-row'; @@ -1209,7 +1209,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { const strings = GridResourceStringsEN; strings.igx_grid_filter = 'My filter'; strings.igx_grid_filter_row_close = 'My close'; - igxI18N.instance().changei18n(strings); + changei18n(strings); fix.detectChanges(); const initialChips = GridFunctions.getFilteringChips(fix); @@ -1227,7 +1227,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { expect(close.nativeElement.childNodes[1].textContent.trim()).toBe('My close'); expect(reset.nativeElement.childNodes[1].textContent.trim()).toBe('Reset'); - igxI18N.instance().changei18n({ + changei18n({ igx_grid_filter: 'Filter', igx_grid_filter_row_close: 'Close' }); diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-dimensions.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-dimensions.ts index 65d461bca17..3e1cadda963 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-dimensions.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-dimensions.ts @@ -1,3 +1,4 @@ +import { getI18nManager } from 'igniteui-i18n-core'; import { GridResourceStringsEN, IGridResourceStrings } from '../../core/i18n/grid-resources'; import { getCurrentResourceStrings } from '../../core/i18n/resources'; import { GridColumnDataType } from '../../data-operations/data-util'; @@ -131,6 +132,9 @@ export class IgxPivotDateDimension implements IPivotDimension { if (this.baseDimension && this.options) { this.initialize(this.baseDimension, this.options); } + getI18nManager().onResourceChange(() => { + this._resourceStrings = getCurrentResourceStrings(GridResourceStringsEN, false); + }); } protected initialize(inBaseDimension, inOptions) { diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts index 8f4da37f72e..fa23e5e59a6 100644 --- a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts @@ -4,10 +4,10 @@ import { IgxSummaryResult } from './grid-summary'; import { GridColumnDataType } from '../../data-operations/data-util'; -import { formatCurrency, formatDate, formatNumber, formatPercent, getLocaleCurrencyCode, getLocaleCurrencySymbol, NgTemplateOutlet } from '@angular/common'; +import { getLocaleCurrencyCode, getLocaleCurrencySymbol, NgTemplateOutlet } from '@angular/common'; import { ISelectionNode } from '../common/types'; import { ColumnType } from '../common/grid.interface'; -import { trackByIdentity } from '../../core/utils'; +import { formatCurrency, formatDate, formatNumber, formatPercent, trackByIdentity } from '../../core/utils'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts index 93b8a4579cf..38bd4cb4f32 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts @@ -28,6 +28,7 @@ import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from './inputGroupType'; import { IgxIconComponent } from '../icon/icon.component'; import { getCurrentResourceStrings } from '../core/i18n/resources'; import { IgxTheme, THEME_TOKEN, ThemeToken } from '../services/theme/theme.token'; +import { getI18nManager } from 'igniteui-i18n-core'; @Component({ selector: 'igx-input-group', @@ -226,6 +227,9 @@ export class IgxInputGroupComponent implements IgxInputGroupBase { } }); this._destroyRef.onDestroy(() => themeChange.unsubscribe()); + getI18nManager().onResourceChange(() => { + this._resourceStrings = getCurrentResourceStrings(InputResourceStringsEN, false); + }); } /** @hidden */ diff --git a/projects/igniteui-angular/src/lib/list/list.component.ts b/projects/igniteui-angular/src/lib/list/list.component.ts index 32b4d00b75d..c977ea2f6f9 100644 --- a/projects/igniteui-angular/src/lib/list/list.component.ts +++ b/projects/igniteui-angular/src/lib/list/list.component.ts @@ -30,6 +30,7 @@ import { import { IBaseEventArgs } from '../core/utils'; import { IListResourceStrings, ListResourceStringsEN } from '../core/i18n/list-resources'; import { getCurrentResourceStrings } from '../core/i18n/resources'; +import { getI18nManager } from 'igniteui-i18n-core'; let NEXT_ID = 0; @@ -462,6 +463,9 @@ export class IgxListComponent extends IgxListBaseDirective { constructor(public element: ElementRef) { super(element); + getI18nManager().onResourceChange(() => { + this._resourceStrings = getCurrentResourceStrings(ListResourceStringsEN, false); + }); } /** diff --git a/projects/igniteui-angular/src/lib/paginator/paginator.component.ts b/projects/igniteui-angular/src/lib/paginator/paginator.component.ts index 0a702ce25d8..8d35581e21e 100644 --- a/projects/igniteui-angular/src/lib/paginator/paginator.component.ts +++ b/projects/igniteui-angular/src/lib/paginator/paginator.component.ts @@ -10,6 +10,7 @@ import { IgxRippleDirective } from '../directives/ripple/ripple.directive'; import { getCurrentResourceStrings } from '../core/i18n/resources'; import { IgxIconButtonDirective } from '../directives/button/icon-button.directive'; import { IgxPaginatorToken } from './token'; +import { getI18nManager } from 'igniteui-i18n-core'; @Directive({ selector: '[igxPaginatorContent],igx-paginator-content', @@ -122,7 +123,7 @@ export class IgxPaginatorComponent implements IgxPaginatorToken { protected _selectOptions = [5, 10, 15, 25, 50, 100, 500]; protected _perPage = 15; - private _resourceStrings = getCurrentResourceStrings(PaginatorResourceStringsEN); + private _resourceStrings = getCurrentResourceStrings(PaginatorResourceStringsEN, true); private _overlaySettings: OverlaySettings = {}; private defaultSelectValues = [5, 10, 15, 25, 50, 100, 500]; @@ -260,7 +261,11 @@ export class IgxPaginatorComponent implements IgxPaginatorToken { return this._resourceStrings; } - constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef) { } + constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef) { + getI18nManager().onResourceChange(() => { + this._resourceStrings = getCurrentResourceStrings(PaginatorResourceStringsEN, false); + }); + } /** * Returns if the current page is the last page. diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder-header.component.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder-header.component.ts index 714dc83c16f..52aa6d604dd 100644 --- a/projects/igniteui-angular/src/lib/query-builder/query-builder-header.component.ts +++ b/projects/igniteui-angular/src/lib/query-builder/query-builder-header.component.ts @@ -1,6 +1,7 @@ import { Component, HostBinding, Input } from '@angular/core'; import { IQueryBuilderResourceStrings, QueryBuilderResourceStringsEN } from '../core/i18n/query-builder-resources'; import { getCurrentResourceStrings } from '../core/i18n/resources'; +import { getI18nManager } from 'igniteui-i18n-core'; @Component({ selector: 'igx-query-builder-header', @@ -57,4 +58,10 @@ export class IgxQueryBuilderHeaderComponent { public get resourceStrings(): IQueryBuilderResourceStrings { return this._resourceStrings; } + + constructor() { + getI18nManager().onResourceChange(() => { + this._resourceStrings = getCurrentResourceStrings(QueryBuilderResourceStringsEN, false); + }); + } } diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts index 7a59165e80c..29c50c4a394 100644 --- a/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts +++ b/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts @@ -55,6 +55,7 @@ import { IgxDropDownItemNavigationDirective } from '../drop-down/drop-down-navig import { IgxQueryBuilderDragService } from './query-builder-drag.service'; import { isTree } from '../data-operations/expressions-tree-util'; import { ExpressionGroupItem, ExpressionItem, ExpressionOperandItem, IgxFieldFormatterPipe } from './query-builder.common'; +import { getI18nManager } from 'igniteui-i18n-core'; const DEFAULT_PIPE_DATE_FORMAT = 'mediumDate'; const DEFAULT_PIPE_TIME_FORMAT = 'mediumTime'; @@ -172,9 +173,9 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { @Input() public set fields(fields: FieldType[]) { this._fields = fields; - + this._fields = this._fields?.map(f => ({...f, filters: this.getFilters(f), pipeArgs: this.getPipeArgs(f) })); - + if (!this._fields && this.isAdvancedFiltering()) { this._fields = this.entities[0].fields; } @@ -547,6 +548,9 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { @Inject(LOCALE_ID) protected _localeId: string) { this.locale = this.locale || this._localeId; this.dragService.register(this, elRef); + getI18nManager().onResourceChange(() => { + this._resourceStrings = getCurrentResourceStrings(QueryBuilderResourceStringsEN, false); + }); } /** @@ -560,7 +564,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { this.returnFieldSelectOverlaySettings.outlet = this.overlayOutlet; this.addExpressionDropDownOverlaySettings.outlet = this.overlayOutlet; this.groupContextMenuDropDownOverlaySettings.outlet = this.overlayOutlet; - + if (this.isAdvancedFiltering() && this.entities?.length === 1) { this.selectedEntity = this.entities[0].name; if (this._selectedEntity.fields.find(f => f.field === this.expectedReturnField)) { @@ -967,7 +971,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { this.selectedField.filters.condition(this.selectedCondition)?.isUnary ); } - + /** * @hidden @internal */ @@ -1530,7 +1534,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { DEFAULT_PIPE_TIME_FORMAT : field.dataType === DataType.DateTime ? DEFAULT_PIPE_DATE_TIME_FORMAT : DEFAULT_PIPE_DATE_FORMAT; } - + return pipeArgs; } diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts index 2f101085378..2718077527b 100644 --- a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts +++ b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts @@ -13,6 +13,7 @@ import { IgxIconService } from '../icon/icon.service'; import { editor } from '@igniteui/material-icons-extended'; import { IgxQueryBuilderSearchValueTemplateDirective } from './query-builder.directives'; import { recreateTree } from '../data-operations/expressions-tree-util'; +import { getI18nManager } from 'igniteui-i18n-core'; /** * A component used for operating with complex filters by creating or editing conditions @@ -186,6 +187,9 @@ export class IgxQueryBuilderComponent implements OnDestroy { constructor(protected iconService: IgxIconService) { this.registerSVGIcons(); + getI18nManager().onResourceChange(() => { + this._resourceStrings = getCurrentResourceStrings(QueryBuilderResourceStringsEN, false); + }); } /** diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts index c5174302fec..f062c29da54 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts @@ -60,6 +60,7 @@ import { IgxIconComponent } from '../icon/icon.component'; import { IgxPrefixDirective } from '../directives/prefix/prefix.directive'; import { getCurrentResourceStrings } from '../core/i18n/resources'; import { IgxDividerDirective } from '../directives/divider/divider.directive'; +import { getI18nManager } from 'igniteui-i18n-core'; let NEXT_ID = 0; export interface IgxTimePickerValidationFailedEventArgs extends IBaseEventArgs { @@ -624,6 +625,9 @@ export class IgxTimePickerComponent extends PickerBaseDirective ) { super(element, _localeId, _inputGroupType); this.locale = this.locale || this._localeId; + getI18nManager().onResourceChange(() => { + this._resourceStrings = getCurrentResourceStrings(TimePickerResourceStringsEN, false); + }); } /** @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.ts b/projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.ts index 36955bd179f..69c95db5416 100644 --- a/projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.ts +++ b/projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.ts @@ -40,6 +40,7 @@ import { IgxCheckboxComponent } from '../../checkbox/checkbox.component'; import { IgxIconComponent } from '../../icon/icon.component'; import { NgTemplateOutlet, NgClass } from '@angular/common'; import { getCurrentResourceStrings } from '../../core/i18n/resources'; +import { getI18nManager } from 'igniteui-i18n-core'; // TODO: Implement aria functionality /** @@ -395,6 +396,9 @@ export class IgxTreeNodeComponent extends ToggleAnimationPlayer implements Ig @Optional() @SkipSelf() @Inject(IGX_TREE_NODE_COMPONENT) public parentNode: IgxTreeNode ) { super(animationService); + getI18nManager().onResourceChange(() => { + this._resourceStrings = getCurrentResourceStrings(TreeResourceStringsEN, false); + }); } /** diff --git a/projects/igniteui-angular/src/public_api.ts b/projects/igniteui-angular/src/public_api.ts index 0e844761ba2..430901a5eba 100644 --- a/projects/igniteui-angular/src/public_api.ts +++ b/projects/igniteui-angular/src/public_api.ts @@ -121,7 +121,7 @@ export { CancelableEventArgs, CancelableBrowserEventArgs } from './lib/core/util /** * i18n */ -export { igxI18N, IResourceStrings, changei18n } from './lib/core/i18n/resources'; +export { IResourceStrings, changei18n } from './lib/core/i18n/resources'; export { ICarouselResourceStrings, CarouselResourceStringsEN } from './lib/core/i18n/carousel-resources'; export { IGridResourceStrings, GridResourceStringsEN } from './lib/core/i18n/grid-resources'; export { IComboResourceStrings, ComboResourceStringsEN } from './lib/core/i18n/combo-resources'; diff --git a/src/app/grid-localization/grid-localization.sample.html b/src/app/grid-localization/grid-localization.sample.html index 28cff2ae551..77979567132 100644 --- a/src/app/grid-localization/grid-localization.sample.html +++ b/src/app/grid-localization/grid-localization.sample.html @@ -1,7 +1,7 @@
+ [allowFiltering]="true" [locale]="locale" [primaryKey]="'Type'"> Grid with Localization @@ -12,17 +12,14 @@ } - - - - - - - - - - + + + + + + + +
diff --git a/src/app/grid-localization/grid-localization.sample.ts b/src/app/grid-localization/grid-localization.sample.ts index d760416129b..5a227eb5b3a 100644 --- a/src/app/grid-localization/grid-localization.sample.ts +++ b/src/app/grid-localization/grid-localization.sample.ts @@ -19,13 +19,13 @@ import { IgxResourceStringsBG, IgxResourceStringsDE, IgxResourceStringsES, IgxResourceStringsFR, IgxResourceStringsIT, IgxResourceStringsJA, IgxResourceStringsKO, IgxResourceStringsZHHANS, IgxResourceStringsZHHANT } from 'igniteui-angular-i18n'; -import { IResourceStrings, GridResourceStringsEN, IgxColumnComponent, IgxGridComponent, IgxSelectComponent, IgxSelectItemComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular'; +import { IResourceStrings, GridResourceStringsEN, IgxColumnComponent, IgxGridComponent, IgxSelectComponent, IgxSelectItemComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxPaginatorComponent, changei18n } from 'igniteui-angular'; @Component({ selector: 'app-grid-localization', styleUrls: ['./grid-localization.sample.scss'], templateUrl: 'grid-localization.sample.html', - imports: [IgxGridComponent, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxSelectComponent, FormsModule, IgxSelectItemComponent] + imports: [IgxGridComponent, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxSelectComponent, FormsModule, IgxSelectItemComponent, IgxPaginatorComponent] }) export class GridLocalizationSampleComponent implements OnInit { @@ -82,6 +82,7 @@ export class GridLocalizationSampleComponent implements OnInit { public updateLocale() { const newLocale = this.locales.find(x => x.type === this.locale).resource; - this.grid.resourceStrings = newLocale; + //this.grid.resourceStrings = newLocale; + changei18n(newLocale); } } diff --git a/src/app/shared/financialData.ts b/src/app/shared/financialData.ts index 88513178f50..85f0791ab4b 100644 --- a/src/app/shared/financialData.ts +++ b/src/app/shared/financialData.ts @@ -86,7 +86,8 @@ export const DATA: any[] = [ 'High(Y)': 1306, 'Low(Y)': 1047.20, 'Start(Y)': 1176.60, - 'Change On Year(%)': 8.8502 + 'Change On Year(%)': 8.8502, + LastOrderDate:new Date('2020-03-17'), }, { Category: 'Metal', @@ -104,7 +105,8 @@ export const DATA: any[] = [ 'High(Y)': 18.06, 'Low(Y)': 13.73, 'Start(Y)': 15.895, - 'Change On Year(%)': 9.5942 + 'Change On Year(%)': 9.5942, + LastOrderDate: new Date('2024-05-07').toISOString(), }, { Category: 'Metal', @@ -122,7 +124,8 @@ export const DATA: any[] = [ 'High(Y)': 2.94, 'Low(Y)': 1.96, 'Start(Y)': 2.45, - 'Change On Year(%)': -13.7551 + 'Change On Year(%)': -13.7551, + LastOrderDate: new Date(2019, 2, 12, 14, 4, 50).toISOString(), }, { Category: 'Metal', @@ -140,7 +143,8 @@ export const DATA: any[] = [ 'High(Y)': 1120.60, 'Low(Y)': 812.40, 'Start(Y)': 966.50, - 'Change On Year(%)': 10.8225 + 'Change On Year(%)': 10.8225, + LastOrderDate: new Date(2020, 8, 25, 14, 4, 50), }, { Category: 'Metal', @@ -158,7 +162,8 @@ export const DATA: any[] = [ 'High(Y)': 690, 'Low(Y)': 458.6, 'Start(Y)': 574.3, - 'Change On Year(%)': 4.6492 + 'Change On Year(%)': 4.6492, + LastOrderDate: new Date('2009-02-13').toISOString(), }, { Category: 'Oil', @@ -176,7 +181,8 @@ export const DATA: any[] = [ 'High(Y)': 65.28, 'Low(Y)': 30.79, 'Start(Y)': 48.035, - 'Change On Year(%)': -4.6739 + 'Change On Year(%)': -4.6739, + LastOrderDate: new Date('2014-06-17').toISOString(), }, { Category: 'Oil', @@ -194,7 +200,8 @@ export const DATA: any[] = [ 'High(Y)': 71.14, 'Low(Y)': 30.02, 'Start(Y)': 50.58, - 'Change On Year(%)': -8.9561 + 'Change On Year(%)': -8.9561, + LastOrderDate: new Date('2015-11-01').toISOString(), }, { Category: 'Oil', @@ -212,7 +219,8 @@ export const DATA: any[] = [ 'High(Y)': 3.20, 'Low(Y)': 1.84, 'Start(Y)': 2.52, - 'Change On Year(%)': -16.5079 + 'Change On Year(%)': -16.5079, + LastOrderDate: new Date('2013-04-18').toISOString(), }, { Category: 'Oil', @@ -230,7 +238,8 @@ export const DATA: any[] = [ 'High(Y)': 2.05, 'Low(Y)': 1.15, 'Start(Y)': 1.60, - 'Change On Year(%)': 22.0727 + 'Change On Year(%)': 22.0727, + LastOrderDate: new Date('2017-12-24').toISOString(), }, { Category: 'Oil', @@ -248,7 +257,8 @@ export const DATA: any[] = [ 'High(Y)': 2.11, 'Low(Y)': 0.92, 'Start(Y)': 1.515, - 'Change On Year(%)': -10.4026 + 'Change On Year(%)': -10.4026, + LastOrderDate: new Date('2020-05-22').toISOString(), }, { Category: 'Oil', @@ -266,7 +276,8 @@ export const DATA: any[] = [ 'High(Y)': 2.7538, 'Low(Y)': 1.1168, 'Start(Y)': 1.475, - 'Change On Year(%)': 86.7011 + 'Change On Year(%)': 86.7011, + LastOrderDate: new Date('2016-08-08').toISOString(), }, { Category: 'Oil', @@ -284,7 +295,8 @@ export const DATA: any[] = [ 'High(Y)': 29.32, 'Low(Y)': 21.28, 'Start(Y)': 25.30, - 'Change On Year(%)': 9.0119 + 'Change On Year(%)': 9.0119, + LastOrderDate: new Date('2022-07-15').toISOString(), }, { Category: 'Oil', @@ -302,7 +314,8 @@ export const DATA: any[] = [ 'High(Y)': 0.4841, 'Low(Y)': 0.3954, 'Start(Y)': 0.4398, - 'Change On Year(%)': -5.3326 + 'Change On Year(%)': -5.3326, + LastOrderDate: new Date('2023-11-29').toISOString(), }, { Category: 'Agriculture', @@ -320,7 +333,8 @@ export const DATA: any[] = [ 'High(Y)': 628.50, 'Low(Y)': 449.50, 'Start(Y)': 539.00, - 'Change On Year(%)': -13.6327 + 'Change On Year(%)': -13.6327, + LastOrderDate: new Date('2025-03-11').toISOString(), }, { Category: 'Agriculture', @@ -338,7 +352,8 @@ export const DATA: any[] = [ 'High(Y)': 471.25, 'Low(Y)': 351.25, 'Start(Y)': 411.25, - 'Change On Year(%)': -7.6468 + 'Change On Year(%)': -7.6468, + LastOrderDate: new Date('2005-01-19').toISOString(), }, { Category: 'Agriculture', @@ -356,7 +371,8 @@ export const DATA: any[] = [ 'High(Y)': 16.87, 'Low(Y)': 11.37, 'Start(Y)': 14.12, - 'Change On Year(%)': 3.9249 + 'Change On Year(%)': 3.9249, + LastOrderDate: new Date('2006-05-10').toISOString(), }, { Category: 'Agriculture', @@ -374,7 +390,8 @@ export const DATA: any[] = [ 'High(Y)': 1057.00, 'Low(Y)': 859.50, 'Start(Y)': 958.25, - 'Change On Year(%)': 8.3869 + 'Change On Year(%)': 8.3869, + LastOrderDate: new Date('2007-04-06').toISOString(), }, { Category: 'Agriculture', @@ -392,7 +409,8 @@ export const DATA: any[] = [ 'High(Y)': 35.43, 'Low(Y)': 26.61, 'Start(Y)': 31.02, - 'Change On Year(%)': 8.8692 + 'Change On Year(%)': 8.8692, + LastOrderDate: new Date('2011-07-23').toISOString(), }, { Category: 'Agriculture', @@ -410,7 +428,8 @@ export const DATA: any[] = [ 'High(Y)': 353.40, 'Low(Y)': 261.70, 'Start(Y)': 307.55, - 'Change On Year(%)': 11.403 + 'Change On Year(%)': 11.403, + LastOrderDate: new Date('2012-08-12').toISOString(), }, { Category: 'Agriculture', @@ -428,7 +447,8 @@ export const DATA: any[] = [ 'High(Y)': 155.95, 'Low(Y)': 113.00, 'Start(Y)': 134.475, - 'Change On Year(%)': 4.2493 + 'Change On Year(%)': 4.2493, + LastOrderDate: new Date('2012-03-24').toISOString(), }, { Category: 'Agriculture', @@ -446,7 +466,8 @@ export const DATA: any[] = [ 'High(Y)': 155.75, 'Low(Y)': 115.35, 'Start(Y)': 135.55, - 'Change On Year(%)': -7.2741 + 'Change On Year(%)': -7.2741, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Agriculture', @@ -464,7 +485,8 @@ export const DATA: any[] = [ 'High(Y)': 3406.00, 'Low(Y)': 2746.00, 'Start(Y)': 3076.00, - 'Change On Year(%)': 0.001 + 'Change On Year(%)': 0.001, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Agriculture', @@ -482,7 +504,8 @@ export const DATA: any[] = [ 'High(Y)': 14.14, 'Low(Y)': 9.70, 'Start(Y)': 11.92, - 'Change On Year(%)': -12.6228 + 'Change On Year(%)': -12.6228, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Agriculture', @@ -500,7 +523,8 @@ export const DATA: any[] = [ 'High(Y)': 241.25, 'Low(Y)': 183.75, 'Start(Y)': 212.50, - 'Change On Year(%)': -8.6034 + 'Change On Year(%)': -8.6034, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Agriculture', @@ -518,7 +542,8 @@ export const DATA: any[] = [ 'High(Y)': 16.96, 'Low(Y)': 12.81, 'Start(Y)': 14.885, - 'Change On Year(%)': -13.6043 + 'Change On Year(%)': -13.6043, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Agriculture', @@ -536,7 +561,8 @@ export const DATA: any[] = [ 'High(Y)': 67.59, 'Low(Y)': 54.33, 'Start(Y)': 60.96, - 'Change On Year(%)': 1.3123 + 'Change On Year(%)': 1.3123, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Agriculture', @@ -554,7 +580,8 @@ export const DATA: any[] = [ 'High(Y)': 317.10, 'Low(Y)': 236.00, 'Start(Y)': 276.55, - 'Change On Year(%)': 10.1426 + 'Change On Year(%)': 10.1426, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Livestock', @@ -572,7 +599,8 @@ export const DATA: any[] = [ 'High(Y)': 147.98, 'Low(Y)': 113.90, 'Start(Y)': 130.94, - 'Change On Year(%)': -7.8166 + 'Change On Year(%)': -7.8166, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Livestock', @@ -590,7 +618,8 @@ export const DATA: any[] = [ 'High(Y)': 190.00, 'Low(Y)': 138.10, 'Start(Y)': 164.05, - 'Change On Year(%)': -9.4139 + 'Change On Year(%)': -9.4139, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Livestock', @@ -608,7 +637,8 @@ export const DATA: any[] = [ 'High(Y)': 83.98, 'Low(Y)': 70.25, 'Start(Y)': 77.115, - 'Change On Year(%)': 6.0943 + 'Change On Year(%)': 6.0943, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Currencies', @@ -626,7 +656,8 @@ export const DATA: any[] = [ 'High(Y)': 100.70, 'Low(Y)': 91.88, 'Start(Y)': 96.29, - 'Change On Year(%)': -2.6151 + 'Change On Year(%)': -2.6151, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Currencies', @@ -644,7 +675,8 @@ export const DATA: any[] = [ 'High(Y)': 9483.00, 'Low(Y)': 0.93, 'Start(Y)': 4741.965, - 'Change On Year(%)': 95.6432 + 'Change On Year(%)': 95.6432, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Currencies', @@ -662,7 +694,8 @@ export const DATA: any[] = [ 'High(Y)': 1.59, 'Low(Y)': 1.1941, 'Start(Y)': 1.485, - 'Change On Year(%)': -19.59 + 'Change On Year(%)': -19.59, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Currencies', @@ -680,7 +713,8 @@ export const DATA: any[] = [ 'High(Y)': 0.79, 'Low(Y)': 0.68, 'Start(Y)': 0.735, - 'Change On Year(%)': 1.2789 + 'Change On Year(%)': 1.2789, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Currencies', @@ -698,7 +732,8 @@ export const DATA: any[] = [ 'High(Y)': 0.9545, 'Low(Y)': 0.68, 'Start(Y)': 0.755, - 'Change On Year(%)': 26.4295 + 'Change On Year(%)': 26.4295, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Currencies', @@ -716,7 +751,8 @@ export const DATA: any[] = [ 'High(Y)': 1.11, 'Low(Y)': 0.98, 'Start(Y)': 1.045, - 'Change On Year(%)': -0.1244 + 'Change On Year(%)': -0.1244, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Index', @@ -734,7 +770,8 @@ export const DATA: any[] = [ 'High(Y)': 18083.00, 'Low(Y)': 15299.00, 'Start(Y)': 16691.00, - 'Change On Year(%)': 6.118 + 'Change On Year(%)': 6.118, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Index', @@ -752,7 +789,8 @@ export const DATA: any[] = [ 'High(Y)': 2105.50, 'Low(Y)': 1794.50, 'Start(Y)': 1950.00, - 'Change On Year(%)': 5.4668 + 'Change On Year(%)': 5.4668, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Index', @@ -770,7 +808,8 @@ export const DATA: any[] = [ 'High(Y)': 4719.75, 'Low(Y)': 3867.75, 'Start(Y)': 4293.75, - 'Change On Year(%)': 1.107 + 'Change On Year(%)': 1.107, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Index', @@ -788,7 +827,8 @@ export const DATA: any[] = [ 'High(Y)': 1527.30, 'Low(Y)': 1236.00, 'Start(Y)': 1381.65, - 'Change On Year(%)': 5.3654 + 'Change On Year(%)': 5.3654, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Index', @@ -806,7 +846,8 @@ export const DATA: any[] = [ 'High(Y)': 620.32, 'Low(Y)': 595.90, 'Start(Y)': 608.11, - 'Change On Year(%)': 13.1177 + 'Change On Year(%)': 13.1177, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Interest Rate', @@ -824,7 +865,8 @@ export const DATA: any[] = [ 'High(Y)': 169.38, 'Low(Y)': 151.47, 'Start(Y)': 160.425, - 'Change On Year(%)': 2.3271 + 'Change On Year(%)': 2.3271, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Interest Rate', @@ -842,7 +884,8 @@ export const DATA: any[] = [ 'High(Y)': 109.80, 'Low(Y)': 108.62, 'Start(Y)': 109.21, - 'Change On Year(%)': 0.1634 + 'Change On Year(%)': 0.1634, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Interest Rate', @@ -860,7 +903,8 @@ export const DATA: any[] = [ 'High(Y)': 132.64, 'Low(Y)': 125.48, 'Start(Y)': 129.06, - 'Change On Year(%)': 1.1797 + 'Change On Year(%)': 1.1797, + LastOrderDate: new Date('2003-03-17').toISOString(), }, { Category: 'Interest Rate', @@ -878,7 +922,8 @@ export const DATA: any[] = [ 'High(Y)': 99.38, 'Low(Y)': 98.41, 'Start(Y)': 98.895, - 'Change On Year(%)': 0.2781 + 'Change On Year(%)': 0.2781, + LastOrderDate: new Date('2003-03-17').toISOString(), } ]; diff --git a/tsconfig.json b/tsconfig.json index 62e16156d56..82493d4e46c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -29,7 +29,10 @@ ], "igniteui-angular-i18n": [ "projects/igniteui-angular-i18n/src/index.ts" - ] + ], + "igniteui-i18n-core": [ + "../node_modules/igniteui-i18n-core/" + ], }, "rootDir": ".", "useDefineForClassFields": false, From 0b31b3d1cc6f43c46dd07cc7501de99faedd3be9 Mon Sep 17 00:00:00 2001 From: skrustev Date: Tue, 8 Jul 2025 12:04:37 +0300 Subject: [PATCH 2/2] refactor(locale): Replace any other occurances of formatting pipes. --- .../src/lib/calendar/calendar.component.ts | 5 +++-- .../month-picker/month-picker.component.ts | 5 +++-- projects/igniteui-angular/src/lib/core/utils.ts | 15 ++++++++++++++- .../lib/grids/grid/expandable-cell.component.ts | 10 +++++++--- .../src/lib/grids/grid/groupby-row.component.ts | 12 ++++++------ .../hierarchical-cell.component.ts | 11 ++++++++--- .../lib/grids/tree-grid/tree-cell.component.ts | 12 ++++++------ 7 files changed, 47 insertions(+), 23 deletions(-) diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts index 301ff268f53..7650812bc2e 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts @@ -13,7 +13,7 @@ import { booleanAttribute, HostListener, } from '@angular/core'; -import { NgTemplateOutlet, DatePipe } from '@angular/common'; +import { NgTemplateOutlet } from '@angular/common'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { @@ -34,6 +34,7 @@ import { areSameMonth, formatToParts, getClosestActiveDate, isDateInRanges } fro import { CalendarDay } from './common/model'; import { IgxCalendarBaseDirective } from './calendar-base'; import { KeyboardNavigationService } from './calendar.services'; +import { IgxDateFormatterPipe } from '../grids/common/pipes'; let NEXT_ID = 0; @@ -71,7 +72,7 @@ let NEXT_ID = 0; ], selector: 'igx-calendar', templateUrl: 'calendar.component.html', - imports: [NgTemplateOutlet, IgxCalendarScrollPageDirective, IgxIconComponent, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, DatePipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar] + imports: [NgTemplateOutlet, IgxCalendarScrollPageDirective, IgxIconComponent, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, IgxDateFormatterPipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar] }) export class IgxCalendarComponent extends IgxCalendarBaseDirective implements AfterViewInit, OnDestroy { /** diff --git a/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts b/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts index 1929f51da7c..82fcb371ba7 100644 --- a/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts @@ -9,7 +9,7 @@ import { OnDestroy, OnInit, } from "@angular/core"; -import { NgTemplateOutlet, DatePipe } from "@angular/common"; +import { NgTemplateOutlet } from "@angular/common"; import { NG_VALUE_ACCESSOR } from "@angular/forms"; import { IgxMonthsViewComponent } from "../months-view/months-view.component"; @@ -21,6 +21,7 @@ import { CalendarDay } from "../common/model"; import { IgxCalendarBaseDirective } from "../calendar-base"; import { KeyboardNavigationService } from "../calendar.services"; import { formatToParts } from "../common/helpers"; +import { IgxDateFormatterPipe } from '../../grids/common/pipes'; let NEXT_ID = 0; @Component({ @@ -39,7 +40,7 @@ let NEXT_ID = 0; templateUrl: "month-picker.component.html", imports: [ NgTemplateOutlet, - DatePipe, + IgxDateFormatterPipe, IgxIconComponent, IgxMonthsViewComponent, IgxYearsViewComponent, diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts index c3c6ad5ef42..ea2e1eb9127 100644 --- a/projects/igniteui-angular/src/lib/core/utils.ts +++ b/projects/igniteui-angular/src/lib/core/utils.ts @@ -1,4 +1,4 @@ -import { CurrencyPipe, formatDate as _formatDate, isPlatformBrowser } from '@angular/common'; +import { formatDate as _formatDate, isPlatformBrowser } from '@angular/common'; import { Inject, Injectable, InjectionToken, PLATFORM_ID, inject } from '@angular/core'; import { mergeWith } from 'lodash-es'; import { NEVER, Observable } from 'rxjs'; @@ -587,7 +587,20 @@ export function formatDate(value: Date | string | number | null | undefined, for if (typeof value === "string") { value = new Date(value); } + let dateStyle = undefined, timeStyle = undefined; + if (format === 'short' || format === 'medium' || format === 'long' || format === 'full') { + dateStyle = format; + timeStyle = format; + } else if (format.includes('Date')) { + dateStyle = format.replace('Date', ''); + } else if (format.includes('Time')) { + dateStyle = format.replace('Time', ''); + } else { + // Match with Angular custom formatting? + } const options: Intl.DateTimeFormatOptions = { + dateStyle, + timeStyle, timeZone: timezone }; return getI18nManager().formatDateTime(value, locale, options); diff --git a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.ts b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.ts index 98e933fe227..88a96d35020 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.ts @@ -13,12 +13,12 @@ import { } from '@angular/core'; import { IgxGridCellComponent } from '../cell.component'; import { PlatformUtil } from '../../core/utils'; -import { NgClass, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe } from '@angular/common'; +import { NgClass, NgTemplateOutlet } from '@angular/common'; import { IgxGridSelectionService } from '../selection/selection.service'; import { HammerGesturesManager } from '../../core/touch'; import { GridType, IGX_GRID_BASE } from '../common/grid.interface'; import { IgxOverlayService } from '../../services/public_api'; -import { IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe } from '../common/pipes'; +import { IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, IgxNumberFormatterPipe, IgxPercentFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe } from '../common/pipes'; import { IgxTooltipDirective } from '../../directives/tooltip/tooltip.directive'; import { IgxTooltipTargetDirective } from '../../directives/tooltip/tooltip-target.directive'; import { IgxSuffixDirective } from '../../directives/suffix/suffix.directive'; @@ -40,7 +40,11 @@ import { IgxChipComponent } from '../../chips/chip.component'; selector: 'igx-expandable-grid-cell', templateUrl: 'expandable-cell.component.html', providers: [HammerGesturesManager], - imports: [IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxCheckboxComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe] + imports: [IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule, + IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxCheckboxComponent, IgxDatePickerComponent, + IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet, + IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe, + IgxColumnFormatterPipe, IgxNumberFormatterPipe, IgxPercentFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe] }) export class IgxGridExpandableCellComponent extends IgxGridCellComponent implements OnInit { /** diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts index 4928dda109a..bf503fd8304 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts @@ -11,7 +11,7 @@ import { OnDestroy, Inject } from '@angular/core'; -import { NgTemplateOutlet, DecimalPipe, DatePipe, getLocaleCurrencyCode, PercentPipe, CurrencyPipe } from '@angular/common'; +import { NgTemplateOutlet,getLocaleCurrencyCode } from '@angular/common'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; @@ -27,7 +27,7 @@ import { ISelectionNode } from '../common/types'; import { IgxCheckboxComponent } from '../../checkbox/checkbox.component'; import { IgxBadgeComponent } from '../../badge/badge.component'; import { IgxIconComponent } from '../../icon/icon.component'; -import { IgxColumnFormatterPipe } from '../common/pipes'; +import { IgxColumnFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe, IgxNumberFormatterPipe, IgxPercentFormatterPipe } from '../common/pipes'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, @@ -35,10 +35,10 @@ import { IgxColumnFormatterPipe } from '../common/pipes'; templateUrl: './groupby-row.component.html', imports: [ NgTemplateOutlet, - DecimalPipe, - DatePipe, - PercentPipe, - CurrencyPipe, + IgxNumberFormatterPipe, + IgxDateFormatterPipe, + IgxPercentFormatterPipe, + IgxCurrencyFormatterPipe, IgxIconComponent, IgxBadgeComponent, IgxCheckboxComponent, diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts index 1ce7118cd4a..91f40769cfe 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts @@ -5,7 +5,7 @@ import { HammerGesturesManager } from '../../core/touch'; import { PlatformUtil } from '../../core/utils'; import { GridType, IGX_GRID_BASE } from '../common/grid.interface'; import { IgxOverlayService } from '../../services/public_api'; -import { IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe } from '../common/pipes'; +import { IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, IgxNumberFormatterPipe, IgxPercentFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe } from '../common/pipes'; import { IgxTooltipDirective } from '../../directives/tooltip/tooltip.directive'; import { IgxTooltipTargetDirective } from '../../directives/tooltip/tooltip-target.directive'; import { IgxSuffixDirective } from '../../directives/suffix/suffix.directive'; @@ -22,14 +22,19 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { IgxIconComponent } from '../../icon/icon.component'; import { IgxTextHighlightDirective } from '../../directives/text-highlight/text-highlight.directive'; import { IgxChipComponent } from '../../chips/chip.component'; -import { NgClass, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe } from '@angular/common'; +import { NgClass, NgTemplateOutlet } from '@angular/common'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid-cell', templateUrl: '../cell.component.html', providers: [HammerGesturesManager], - imports: [IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxTextSelectionDirective, IgxCheckboxComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe] + imports: [IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule, + IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxTextSelectionDirective, IgxCheckboxComponent, + IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, + IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, + IgxStringReplacePipe, IgxColumnFormatterPipe, IgxNumberFormatterPipe, IgxPercentFormatterPipe, + IgxCurrencyFormatterPipe, IgxDateFormatterPipe] }) export class IgxHierarchicalGridCellComponent extends IgxGridCellComponent implements OnInit { // protected hSelection; diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts index e27d68065ba..a8a0e95a222 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts @@ -3,13 +3,13 @@ import { Component, Input } from '@angular/core'; -import { NgClass, NgStyle, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe } from '@angular/common'; +import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common'; import { HammerGesturesManager } from '../../core/touch'; import { IgxGridExpandableCellComponent } from '../grid/expandable-cell.component'; import { IgxTreeGridRow } from '../grid-public-row'; import { RowType } from '../common/grid.interface'; -import { IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe } from '../common/pipes'; +import { IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, IgxNumberFormatterPipe, IgxPercentFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe } from '../common/pipes'; import { IgxTooltipDirective } from '../../directives/tooltip/tooltip.directive'; import { IgxTooltipTargetDirective } from '../../directives/tooltip/tooltip-target.directive'; import { IgxCircularProgressBarComponent } from '../../progressbar/progressbar.component'; @@ -37,10 +37,10 @@ import { IgxTextSelectionDirective } from '../../directives/text-selection/text- NgClass, NgStyle, NgTemplateOutlet, - DecimalPipe, - PercentPipe, - CurrencyPipe, - DatePipe, + IgxNumberFormatterPipe, + IgxPercentFormatterPipe, + IgxCurrencyFormatterPipe, + IgxDateFormatterPipe, IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent,