@qrvey/utils 1.2.9-15 → 1.2.9-19

package/dist/globalization/interfaces/index.js

@@ -1,4 +1,5 @@
 export * from './bucket_builder/index';
+export * from './calendar/index';
 export * from './chart_builder/index';
 export * from './columns/index';
 export * from './common/index';

package/dist/globalization/labels/calendar/I18N_CALENDAR.d.ts

@@ -0,0 +1,2 @@
+import { II18nCalendar } from "../../interfaces/calendar/II18nCalendar";
+export declare const I18N_CALENDAR: II18nCalendar;

package/dist/globalization/labels/calendar/I18N_CALENDAR.js

@@ -0,0 +1,7 @@
+export const I18N_CALENDAR = {
+    clear: "Clear",
+    hours: 'Hours',
+    minutes: 'Minutes',
+    seconds: 'Seconds',
+    today: "Today"
+};

package/dist/globalization/labels/calendar/index.d.ts

@@ -0,0 +1 @@
+export * from './I18N_CALENDAR';

package/dist/globalization/labels/calendar/index.js

@@ -0,0 +1 @@
+export * from './I18N_CALENDAR';

package/dist/globalization/labels/common/I18N_COMMON.js

@@ -1,4 +1,5 @@
 import { RELATIVE_UNIT_INFO } from "../../../dates/relative/constants/RELATIVE_UNIT_INFO";
+import { I18N_CALENDAR } from "../calendar";
 import { I18N_AGGREGATE_LABEL } from "./I18N_AGGREGATE_LABEL";
 import { I18N_COLUMN_LABEL } from "./I18N_COLUMN_LABEL";
 import { I18N_COLUMN_PROPERTY_LABEL } from "./I18N_COLUMN_PROPERTY_LABEL";
@@ -6,6 +7,7 @@ import { I18N_DATE_GROUPING } from "./I18N_DATE_GROUPING";
 import { I18N_DAY_NAMES } from "./I18N_DAY_NAMES";
 export const I18N_COMMON = {
     aggregate_labels: I18N_AGGREGATE_LABEL,
+    calendar: I18N_CALENDAR,
     column_types: I18N_COLUMN_LABEL,
     column_types_suffixes: {
         slidebar_one: 'Step',

package/dist/globalization/labels/common/I18N_DAY_NAMES.js

@@ -2,6 +2,13 @@ import { DATE_WEEK_DAYS } from "../../../dates/constants/DATE_WEEK_DAYS";
 import { DATE_WEEK_DAYS_DDDD } from "../../../dates/constants/DATE_WEEK_DAYS_DDDD";
 import { capitalize } from "../../../general/string/capitalize";
 export const I18N_DAY_NAMES = {
+    sunday_dd: capitalize(DATE_WEEK_DAYS[0].substring(0, 2)),
+    monday_dd: capitalize(DATE_WEEK_DAYS[1].substring(0, 2)),
+    tuesday_dd: capitalize(DATE_WEEK_DAYS[2].substring(0, 2)),
+    wednesday_dd: capitalize(DATE_WEEK_DAYS[3].substring(0, 2)),
+    thursday_dd: capitalize(DATE_WEEK_DAYS[4].substring(0, 2)),
+    friday_dd: capitalize(DATE_WEEK_DAYS[5].substring(0, 2)),
+    saturday_dd: capitalize(DATE_WEEK_DAYS[6].substring(0, 2)),
     sunday_ddd: capitalize(DATE_WEEK_DAYS[0]),
     monday_ddd: capitalize(DATE_WEEK_DAYS[1]),
     tuesday_ddd: capitalize(DATE_WEEK_DAYS[2]),

package/dist/globalization/labels/filters/I18N_FILTER.js

@@ -26,6 +26,12 @@ export const I18N_FILTER = {
     },
     scopes: I18N_FILTER_SCOPE,
     slidebar: I18N_SLIDEBAR,
+    token_box: {
+        data_tokens: 'DataTokens',
+        search: 'Search',
+        system_tokens: 'SystemTokens',
+        user_tokens: 'UserTokens',
+    },
     validators: I18N_FILTER_VALIDATOR,
     value_container: I18N_VALUE_CONTAINER,
 };

package/dist/globalization/labels/index.d.ts

@@ -1,4 +1,5 @@
 export * from './bucket_builder';
+export * from './calendar';
 export * from './chart_builder';
 export * from './columns';
 export * from './common';

package/dist/globalization/labels/index.js

@@ -1,4 +1,5 @@
 export * from './bucket_builder';
+export * from './calendar';
 export * from './chart_builder';
 export * from './columns';
 export * from './common';

package/dist/interfaces/format/IFormatConfig.Interface.d.ts

@@ -0,0 +1,5 @@
+export interface IFormatConfig {
+    lang?: string;
+    options?: object;
+    isMultiplied?: boolean;
+}

package/dist/interfaces/format/IFormatConfig.Interface.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/format/IFormatCurrency.Interface.d.ts

@@ -0,0 +1,4 @@
+export interface IFormatCurrency {
+    text: string;
+    label: string;
+}

package/dist/interfaces/format/IFormatCurrency.Interface.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/format/IFormatOutputFormat.Interface.d.ts

@@ -0,0 +1,8 @@
+import { IFormatCurrency } from "./IFormatCurrency.Interface";
+export interface IFormatOutputFormat {
+    format: string;
+    type: string;
+    decimals?: number;
+    currency?: IFormatCurrency;
+    backup_currency?: IFormatCurrency;
+}

package/dist/interfaces/format/IFormatOutputFormat.Interface.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/format/index.d.ts

@@ -0,0 +1,3 @@
+export * from './IFormatConfig.Interface';
+export * from './IFormatOutputFormat.Interface';
+export * from './IFormatCurrency.Interface';

package/dist/interfaces/format/index.js

@@ -0,0 +1,3 @@
+export * from './IFormatConfig.Interface';
+export * from './IFormatOutputFormat.Interface';
+export * from './IFormatCurrency.Interface';

package/dist/interfaces/general/IGeneralWidgetConfig.d.ts

@@ -3,8 +3,10 @@ export interface IGeneralWidgetConfig {
     apiKey?: string;
     qrveyid?: string;
     qv_token?: string;
+    locale?: string;
     timezoneControl?: string;
     isFromAN?: boolean;
     appid: string;
     userid: string;
+    lang?: string;
 }

package/dist/interfaces/index.d.ts

@@ -2,3 +2,4 @@ export * from './Chart.Interface';
 export * from './IChartBuilder.Interface';
 export * from './general';
 export * from './Qrvey.Interface';
+export * from './format';

package/dist/interfaces/index.js

@@ -2,3 +2,4 @@ export * from './Chart.Interface';
 export * from './IChartBuilder.Interface';
 export * from './general';
 export * from './Qrvey.Interface';
+export * from './format';

package/dist/qrvey/helpers/getValueWithSuffixes.d.ts

@@ -0,0 +1,9 @@
+import { IGetValueWithSuffixesSettings } from "../interfaces/IGetValueWithSuffixesSettings";
+/**
+ * Get a string value with suffixes if available.
+ * Add suffix into the value string. Prioritized for numeric values.
+ * @param value a number or string
+ * @param suffixes An object with singular or plural suffix string.
+ * @returns a string value with suffix
+ */
+export declare function getValueWithSuffixes(value: string | number, settings: IGetValueWithSuffixesSettings): string;

package/dist/qrvey/helpers/getValueWithSuffixes.js

@@ -0,0 +1,19 @@
+import { isEmpty } from "../../general/mix/isEmpty";
+import { isNaNV2 } from "../../general/mix/isNaNV2";
+/**
+ * Get a string value with suffixes if available.
+ * Add suffix into the value string. Prioritized for numeric values.
+ * @param value a number or string
+ * @param suffixes An object with singular or plural suffix string.
+ * @returns a string value with suffix
+ */
+export function getValueWithSuffixes(value, settings) {
+    let suffix = '';
+    if (!isNaNV2(value)) {
+        if (!isEmpty(settings.suffixTranslateLabel) && !isEmpty(settings.translate))
+            suffix = settings.translate(settings.suffixTranslateLabel, { count: +value });
+        if (!isEmpty(settings.suffixes))
+            suffix = (+value > 1 || +value === 0) ? settings.suffixes.plural : settings.suffixes.singular;
+    }
+    return value + (!isEmpty(suffix) ? ' ' + suffix : '');
+}

package/dist/qrvey/helpers/index.d.ts

@@ -1,2 +1,4 @@
 export * from './getColumnsLabel';
 export * from './getPropertyLabel';
+export * from './getValueWithSuffixes';
+export * from './transformValue';

package/dist/qrvey/helpers/index.js

@@ -1,2 +1,4 @@
 export * from './getColumnsLabel';
 export * from './getPropertyLabel';
+export * from './getValueWithSuffixes';
+export * from './transformValue';

package/dist/qrvey/helpers/transformValue.d.ts

@@ -0,0 +1,8 @@
+import { ITransformValueSettings } from "../interfaces/ITransformValueSettings";
+/**
+ * Transforms a value depending of localization/globalization and extras settings.
+ * @param value A value to transform
+ * @param settings The settings of the transformValue function
+ * @returns A transformed value
+ */
+export declare function transformValue(value: string, settings: ITransformValueSettings): string;

package/dist/qrvey/helpers/transformValue.js

@@ -0,0 +1,42 @@
+import { isDateColumn } from "../../columns/helpers/isDateColumn";
+import { isNumericalColumn } from "../../columns/helpers/isNumericalColumn";
+import { DATE_GROUPING_PROPERTY } from "../../dates/constants/DATE_GROUPING_PROPERTY";
+import { DATE_GROUPING_TIME_PROPERTY } from "../../dates/constants/DATE_GROUPING_TIME_PROPERTY";
+import { addFormat } from "../../format/format";
+import { getI18nDateGroupLabel } from "../../globalization/helpers/getI18nDateGroupLabel";
+import { getValueWithSuffixes } from "./getValueWithSuffixes";
+/**
+ * Transforms a value depending of localization/globalization and extras settings.
+ * @param value A value to transform
+ * @param settings The settings of the transformValue function
+ * @returns A transformed value
+ */
+export function transformValue(value, settings) {
+    const valueWithI18n = getI18nDateGroupLabel(value, settings.property, settings.translate);
+    const valueWithLocalization = addFormat(valueWithI18n, getOutputFormat(settings), getFormatConfig(settings));
+    return getValueWithSuffixes(valueWithLocalization, { suffixTranslateLabel: settings.suffixTranslateLabel, translate: settings.translate });
+}
+/**
+ * Gets the outputformat settings
+ * @param settings The settings of the transformValue function
+ * @returns the outputformat settings
+ */
+function getOutputFormat(settings) {
+    let type, format;
+    if (isDateColumn(settings.column) && [DATE_GROUPING_PROPERTY.DAY, DATE_GROUPING_TIME_PROPERTY.HOUR, DATE_GROUPING_TIME_PROPERTY.MINUTE, DATE_GROUPING_TIME_PROPERTY.SECOND].includes(settings.property)) {
+        type = 'DATE';
+        format = 'Default';
+    }
+    else if (isNumericalColumn(settings.column)) {
+        type = 'NUMERIC';
+    }
+    return { type, format };
+}
+/**
+ * Gets the format config
+ * @param settings The settings of the transformValue function
+ * @returns the format config
+ */
+function getFormatConfig(settings) {
+    return { lang: settings.locale };
+}

package/dist/qrvey/interfaces/IGetValueWithSuffixesSettings.d.ts

@@ -0,0 +1,11 @@
+import { II18nServiceTranslate } from "../../globalization/interfaces/II18nServiceTranslate";
+export interface IGetValueWithSuffixesSettings {
+    translate?: II18nServiceTranslate;
+    suffixTranslateLabel?: string;
+    suffixes?: IGetValueWithSuffixesSettingsSuffixes;
+}
+interface IGetValueWithSuffixesSettingsSuffixes {
+    singular: string;
+    plural: string;
+}
+export {};

package/dist/qrvey/interfaces/IGetValueWithSuffixesSettings.js

@@ -0,0 +1 @@
+export {};

package/dist/qrvey/interfaces/ITransformValueSettings.d.ts

@@ -0,0 +1,10 @@
+import { IColumn } from "../../columns/interfaces/IColumn";
+import { IColumnPropertyType } from "../../columns/interfaces/IColumnPropertyType";
+import { II18nServiceTranslate } from "../../globalization/interfaces/II18nServiceTranslate";
+export interface ITransformValueSettings {
+    column: IColumn;
+    property: IColumnPropertyType;
+    translate: II18nServiceTranslate;
+    locale: string;
+    suffixTranslateLabel?: string;
+}

package/dist/qrvey/interfaces/ITransformValueSettings.js

@@ -0,0 +1 @@
+export {};

package/dist/qrvey/interfaces/index.d.ts

@@ -3,3 +3,5 @@ export * from './ICalculation';
 export * from './ICalculationInfo';
 export * from './ICalculationType';
 export * from './IDataset';
+export * from './IGetValueWithSuffixesSettings';
+export * from './ITransformValueSettings';

package/dist/qrvey/interfaces/index.js

@@ -3,3 +3,5 @@ export * from './ICalculation';
 export * from './ICalculationInfo';
 export * from './ICalculationType';
 export * from './IDataset';
+export * from './IGetValueWithSuffixesSettings';
+export * from './ITransformValueSettings';

package/dist/services/api/getDatasetColumns.api.js

@@ -1,16 +1,18 @@
 import { CHART_ENDPOINT } from "../constants/CHART_ENDPOINT";
 import Request from "../helpers/Request";
 import { BDatasetsToUIDatasets } from "../adapters/BDatasetsToUIDatasets.adapter";
+import { chooseLang } from "../..";
 /**
    * Get a dataset by Qrvey ID
    * @param qrveyid The Qrvey ID
    * @returns a promise
    */
 export function getDatasetColumns(config, qrveyid) {
+    const lang = chooseLang(config);
     return Request.post(Object.assign(Object.assign({}, config), { qrveyid, endpoint: CHART_ENDPOINT }), '/question/list', {
         'optionsAttributes': ['id', 'text', 'type', 'property', 'linked', 'linkid', 'qrveyid', 'bucketId', 'formulaId', 'formulaType', 'geogroup', 'outputFormat'],
         'extend': true
-    })
+    }, { lang })
         .then(BDatasetsToUIDatasets)
         .catch(_e => []);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qrvey/utils",
-  "version": "1.2.9-15",
+  "version": "1.2.9-19",
   "description": "Helper, Utils for all Qrvey Projects",
   "homepage": "https://bitbucket.org/qrvey/qrvey_utils/wiki/Home",
   "main": "dist/index.js",

package/src/filters/helpers/builder/getFilterBuilderGeneralConfig.ts

@@ -11,6 +11,7 @@ export function getFilterBuilderGeneralConfig(config: any = {}): IFilterBuilderG
         apiKey: getAttribute(config, 'api_key') || config.apiKey,
         appid: getAttribute(config, 'app_id') || config.appid,
         domain: config.domain,
+        locale: config.locale,
         qv_token: config.qv_token,
         timezoneControl: getAttribute(config, 'timezone_control') || config.timezoneControl,
         userid: getAttribute(config, 'user_id') || config.userid,

package/src/filters/helpers/ui/index.ts

@@ -8,3 +8,4 @@ export * from './getUIFlatFiltersByParams';
 export * from './getUIFlatFiltersByScopes';
 export * from './getUIValues';
 export * from './getUpdatedUIFilters';
+export * from './transformFilterValues';

package/src/filters/helpers/ui/transformFilterValues.ts

@@ -0,0 +1,29 @@
+import { isEmpty } from "../../../general/mix/isEmpty";
+import { transformValue } from "../../../qrvey/helpers/transformValue";
+import { IFSFilter } from "../../interfaces/common/IFSFilter";
+import { IFSValue } from "../../interfaces/common/IFSValue";
+import { IFSValueRange } from "../../interfaces/common/IFSValueRange";
+import { IFValue } from "../../interfaces/IFValue";
+import { IFUTransformFilterValuesSettings } from "../../interfaces/ui/IFUTransformFilterValuesSettings";
+import { isRangeValidator } from "../common/isRangeValidator";
+import { isRegularValidator } from "../common/isRegularValidator";
+
+export function transformFilterValues(filter: IFSFilter, settings: IFUTransformFilterValuesSettings): IFValue[] {
+    const transformValueSettings = { ...settings, column: filter.column, property: filter.property };
+    if (isEmpty(filter)) return [];
+
+    if (isRegularValidator(filter.validator)) {
+        return (filter.values as IFSValue[]).map((value: IFSValue) => ({
+            ...value,
+            value: transformValue(value.value, transformValueSettings),
+         }));
+    } else if (isRangeValidator(filter.validator)) {
+        return (filter.values as IFSValueRange[]).map((value: IFSValueRange) => ({
+            ...value,
+            min: transformValue(value.min, transformValueSettings),
+            max: transformValue(value.max, transformValueSettings)
+         }));
+    } else {
+        return filter.values;
+    }
+}

package/src/filters/interfaces/builder/IFilterBuilderGeneralConfig.ts

@@ -6,6 +6,7 @@ export interface IFilterBuilderGeneralConfig {
     appid: string; // App ID
     domain: string; // The domain of the environment
     qv_token?: string; // Qrvey Token for RLS
-    timezoneControl?: string;
+    timezoneControl?: string; // Offset number for Timezone
+    locale?: string; // Localization setting
     userid: string; // User ID
 }

package/src/filters/interfaces/panel/IFilterPanelConfig.ts

@@ -8,4 +8,5 @@ import { IFUDataStore } from "../ui/IFUDataStore";
 export interface IFilterPanelConfig extends IFUDataStore {
     filterBuilderConfig?: IFilterBuilderConfig; // Filter Builder config object
     i18n?: IResourceI18n;
+    locale?: string; // Localization setting
 }

package/src/filters/interfaces/ui/IFUTransformFilterValuesSettings.ts

@@ -0,0 +1,7 @@
+import { II18nServiceTranslate } from "../../../globalization/interfaces/II18nServiceTranslate";
+
+export interface IFUTransformFilterValuesSettings {
+    translate: II18nServiceTranslate; // Function for getting translations
+    locale: string; // The locale string
+    suffixTranslateLabel?: string // The i18n label for the suffix values.
+}

package/src/filters/interfaces/ui/index.ts

@@ -19,7 +19,8 @@ export * from './IFUDataset';
 export * from './IFUFilter';
 export * from './IFUFilterExtras';
 export * from './IFUFlattenedFilter';
-export * from './IFUScope';
 export * from './IFUParamsToGetFilter';
-export * from './IFUValue';
+export * from './IFUScope';
+export * from './IFUTransformFilterValuesSettings';
 export * from './IFUUIValueSettings';
+export * from './IFUValue';

package/src/format/definition.ts

@@ -55,3 +55,48 @@ export function supportNumericFormatting(chartType: ChartType): boolean {
   }
 
 export const isTextColumn = (column: any): boolean => textFields.includes(column.type) || column.formulaType === 'string' || column.formulaType === 'boolean';
+
+export const currencyISO = [
+  { text: 'Default', label: 'USD' },
+  { text: '$ (USD)', label: 'USD' },
+  { text: '€ (EUR)', label: 'EUR' },
+  { text: '¥ (JPY)', label: 'JPY' },
+  { text: '£ (GBP)', label: 'GBP' },
+  { text: '₩ (WON)', label: 'WON' },
+  { text: '$ (AUD)', label: 'AUD' },
+  { text: '$ (CAD)', label: 'CAD' },
+  { text: 'CHF (CHF)', label: 'CHF' },
+  { text: '¥ (CNY)', label: 'CNY' },
+  { text: 'kr (SEK)', label: 'SEK' },
+  { text: '$ (MXN)', label: 'MXN' },
+  { text: '$ (NZD)', label: 'NZD' },
+  { text: '$ (SGD)', label: 'SGD' },
+  { text: '$ (HKD)', label: 'HKD' },
+  { text: 'kr (NOK)', label: 'NOK' },
+  { text: '₩ (KRW)', label: 'KRW' },
+  { text: '₺ (TRY)', label: 'TRY' },
+  { text: '₹ (INR)', label: 'INR' },
+  { text: '₽ (RUB)', label: 'RUB' },
+  { text: 'R$ (BRL)', label: 'BRL' },
+  { text: 'R (ZAR)', label: 'ZAR' },
+  { text: 'kr (DKK)', label: 'DKK' },
+  { text: 'zł (PLN)', label: 'PLN' },
+  { text: 'NT$ (TWD)', label: 'TWD' },
+  { text: '฿ (THB)', label: 'THB' },
+  { text: 'RM (MYR)', label: 'MYR' }
+];
+
+export const enum LOCALE_FORMATS {
+  DECIMAL = 'Decimal',
+  CURRENCY = 'Currency',
+  PERCENTAGE = 'Percentage',
+  SCIENTIFIC = 'Scientific',
+}
+export const enum LOCALE_STYLES {
+  DECIMAL = 'decimal',
+  PERCENT = 'percent',
+  CURRENCY = 'currency',
+  SCIENTIFIC = 'scientific',
+}
+
+export const LANG_DEFAULT = 'en-US';

package/src/format/format.ts

@@ -6,6 +6,8 @@ import { isEmpty } from '../general/mix/isEmpty';
 import { _get } from '../general/object/get';
 import { COLUMN } from '../columns/constants/COLUMN';
 import { FORMULA } from '../formulas/constants/FORMULA';
+import { IFormatConfig } from '..';
+import { formatWithLocale } from './localization';
 
 dayjs.extend(advancedFormat); // Add support to advanced formats https://day.js.org/docs/en/plugin/advanced-format
 
@@ -82,22 +84,24 @@ export function formatFileSize(bytes: number): string {
     return megaBytes < 10 ? `${fixDecimals(megaBytes)} MB` : `${Math.round(megaBytes)} MB`;
 }
 
-export const formatValue = (value: any, outputFormat: any = 'None', config?): any => {
-    if (isEmpty(value) || typeof value === 'object' && isEmpty(value[0])) return value;
-    switch (outputFormat.type) {
-        case 'DATE':
-        case 'DATETIME':
-            return formatDate(value, outputFormat.format);
-        case 'NUMERIC': {
-            const parse = parseFloat(value);
-            return isNaN(parse) ? value : formatNumber(parse, outputFormat, config);
-        }
-        case 'IMAGEUPLOAD':
-        case 'FILEUPLOAD':
-            return formatFileSize(parseFloat(value));
-        default:
-            return typeof value === 'number' ? value.toFixed(0) : value;
+export const addFormat = (value: any, outputFormat: any = 'None', config?: IFormatConfig): any => {
+  if (isEmpty(value) || typeof value === 'object' && isEmpty(value[0])) return value;
+  switch (outputFormat.type) {
+    case 'DATE':
+    case 'DATETIME':
+      return config?.lang && outputFormat.format === 'Default' ? formatWithLocale(value, outputFormat, config) : formatDate(value, outputFormat.format);
+    case 'NUMERIC': {
+      const parse = parseFloat(value);
+      const withLocale = outputFormat.format !== 'Abbreviated' && outputFormat !== 'None' && config?.lang;
+      return isNaN(parse) ? value : withLocale ? formatWithLocale(value, outputFormat, config)
+       : formatNumber(parse, outputFormat, config);
     }
+    case 'IMAGEUPLOAD':
+    case 'FILEUPLOAD':
+      return formatFileSize(parseFloat(value));
+    default:
+      return typeof value === 'number' ? value.toFixed(0) : value;
+  }
 };
 
 export const parseFormulaType = (type: string) => {

package/src/format/index.ts

@@ -1 +1,2 @@
 export * from './format';
+export * from './localization';

package/src/format/localization.ts

@@ -0,0 +1,62 @@
+import { IFormatConfig, IFormatOutputFormat } from '../interfaces';
+import { currencyISO, LOCALE_FORMATS, LOCALE_STYLES, LANG_DEFAULT } from './definition';
+
+export const getLang = (locale: string | Record<string, any>) => {
+    if (!locale) return;
+    else if(typeof locale === 'object') return locale;
+    else return { lang: locale === "browser" ? window.navigator.language : locale };
+};
+
+export const chooseLang = (config: Record<string, any>): string => {
+    const lang: string | Record<string, any> = (
+        config?.i18n?.lang ||
+        config?.i18n?.locale?.lang || 
+        config?.locale?.lang || 
+        config.lang
+    );
+    return (<any>lang)?.lang || lang || LANG_DEFAULT;
+};
+
+export const formatWithLocale = (value: any, outputFormat: IFormatOutputFormat, config: IFormatConfig = {}): any => {
+    switch (outputFormat.type) {
+      case 'DATE':
+      case 'DATETIME':
+        return formatLocaleDate(value, config);
+      case 'NUMERIC':
+        return formatLocaleNumber(value, outputFormat, config);
+    }
+};
+
+function formatLocaleDate(value: any, config: IFormatConfig) {
+    const { lang = LANG_DEFAULT, options } = config;
+    const dateParam = new Date(value);
+    try {
+        return new Intl.DateTimeFormat([lang, LANG_DEFAULT], options).format(dateParam);
+    } catch (error) {
+        return new Intl.DateTimeFormat(LANG_DEFAULT, options).format(dateParam);
+    }
+}
+
+function formatLocaleNumber(value: any, outputFormat: IFormatOutputFormat, config: IFormatConfig,) {
+    const { lang = LANG_DEFAULT, options } = config;
+    const langOpts = options || getLocaleOptions(outputFormat);
+    try {
+        return new Intl.NumberFormat([lang, LANG_DEFAULT], langOpts).format(value);
+    } catch (e) {
+        return new Intl.NumberFormat(LANG_DEFAULT, langOpts).format(value);
+    }
+}
+
+function getLocaleOptions(outputFormat: IFormatOutputFormat) {
+    const { format, decimals, currency, backup_currency } = outputFormat;
+    switch(format) {
+        case LOCALE_FORMATS.CURRENCY: {
+            const iso = currencyISO.find(item => item.text === (currency.text || backup_currency.text));
+            return { style: LOCALE_STYLES.CURRENCY, currency: iso.label, maximumFractionDigits: decimals, minimumFractionDigits: 0 };
+        }
+        case LOCALE_FORMATS.SCIENTIFIC: return { style: LOCALE_STYLES.DECIMAL,
+             notation: LOCALE_STYLES.SCIENTIFIC, maximumFractionDigits: decimals };
+        case LOCALE_FORMATS.PERCENTAGE: return { style: LOCALE_STYLES.PERCENT, maximumFractionDigits: decimals };
+        default: return { style: LOCALE_STYLES.DECIMAL, maximumFractionDigits: decimals };
+    }
+}