@pepperi-addons/ngx-lib 0.4.2-beta.98 → 0.4.2-scroll.1

package/fesm2020/pepperi-addons-ngx-lib.mjs

@@ -6,11 +6,11 @@ import { HttpResponse, HTTP_INTERCEPTORS, HttpHeaders, HttpClientModule } from '
 import * as i3 from '@angular/forms';
 import { FormControl, Validators, ReactiveFormsModule, FormBuilder } from '@angular/forms';
 import { throwError, BehaviorSubject, Subject } from 'rxjs';
-import { catchError, filter, distinctUntilChanged, finalize, tap } from 'rxjs/operators';
+import { catchError, debounceTime, filter, distinctUntilChanged, finalize, tap } from 'rxjs/operators';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i1$1 from '@angular/platform-browser';
 import { coerceNumberProperty, _isNumberValue } from '@angular/cdk/coercion';
+import * as i1$1 from '@angular/platform-browser';
 import { createCustomElement } from '@angular/elements';
 import * as i6 from '@angular/router';
 import { Router } from '@angular/router';
@@ -52,7 +52,7 @@ class PepLoaderService {
     get onChanged$() {
         return this.showLoaderSubject
             .asObservable()
-            .pipe(filter(v => v !== undefined), distinctUntilChanged());
+            .pipe(debounceTime(500), filter(v => v !== undefined), distinctUntilChanged());
     }
     showLoaderChanged(show) {
         const eventData = {
@@ -382,606 +382,614 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: PepLayoutService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; } });
 
-class PepCapitalizePipe {
-    transform(value) {
-        if (value) {
-            return value.charAt(0).toUpperCase() + value.slice(1);
+class PepUtilitiesService {
+    constructor(translate = null) {
+        this.translate = translate;
+        this.culture = 'en-US';
+        this.culture = this.translate?.getBrowserCultureLang() || 'en-US';
+        // try {
+        //     import(`@angular/common/locales/global/${this.culture}`);
+        // } catch {}
+    }
+    prepareNumberToFormat(value, fallbackValue = 0) {
+        // If the decimal separator is ',' change it to '.'
+        if (value?.length > 0) {
+            // If the decimal separator is ',' change it to '.' for let the formatting works.
+            value = this.changeDecimalSeparatorWhenItsComma(value);
+            // console.log('coerceNumberProperty after change decimal separator value is', value);
         }
-        return value;
+        return coerceNumberProperty(value, fallbackValue);
     }
-}
-PepCapitalizePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-PepCapitalizePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepCapitalizePipe, name: "pepCapitalize" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCapitalizePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'pepCapitalize' }]
-        }] });
-class PepEncodePipe {
-    transform(value) {
-        if (value) {
-            const v = btoa(value);
-            return v;
+    // adapted from https://github.com/sindresorhus/parse-ms.
+    // moved to internal function because parse-ms is now pure ESM.
+    parseMs(milliseconds) {
+        if (typeof milliseconds !== 'number') {
+            throw new TypeError('Expected a number');
         }
-        return value;
+        return {
+            days: Math.trunc(milliseconds / 86400000),
+            hours: Math.trunc(milliseconds / 3600000) % 24,
+            minutes: Math.trunc(milliseconds / 60000) % 60,
+            seconds: Math.trunc(milliseconds / 1000) % 60,
+            milliseconds: Math.trunc(milliseconds) % 1000
+        };
     }
-}
-PepEncodePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepEncodePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-PepEncodePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepEncodePipe, name: "pepEncode" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepEncodePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'pepEncode' }]
-        }] });
-class PepEscapePipe {
-    transform(value) {
-        if (value) {
-            const v = escape(value);
-            return v;
+    // adapted from https://github.com/rafaelrinaldi/add-zero.
+    // moved to internal function b/c addZero is unmaintained (7+ years).
+    // stripped out negative sign logic since we're already doing it elsewhere.
+    addZero(value, digits = 2) {
+        digits = digits || 2;
+        let str = value.toString();
+        let size = 0;
+        size = digits - str.length + 1;
+        str = new Array(size).join('0').concat(str);
+        return str;
+    }
+    isCurrencyShouldBeOnRight(currencySymbol) {
+        let res = false;
+        if (currencySymbol == "€" ||
+            currencySymbol == "₪" ||
+            currencySymbol == "Ft" ||
+            currencySymbol == "Kč" ||
+            currencySymbol == "руб" ||
+            currencySymbol == "zł" ||
+            currencySymbol == "kr.") {
+            res = true;
         }
-        return value;
+        return res;
     }
-}
-PepEscapePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepEscapePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-PepEscapePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepEscapePipe, name: "pepEscape" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepEscapePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'pepEscape' }]
-        }] });
-class PepReplaceLineBreaksPipe {
-    transform(value) {
-        const newValue = value.replace(/(<br\ ?\/?>)/g, ' ');
-        return newValue;
+    cutValueByFractionDigits(value, maxFractionDigits) {
+        let res = value;
+        maxFractionDigits = maxFractionDigits || 2;
+        const decimalSeparator = this.getDecimalSeparator();
+        if (value.includes(decimalSeparator)) {
+            const valueArr = value.split(decimalSeparator);
+            // if (valueArr[1].length < maxFractionDigits) {
+            valueArr[1] = valueArr[1].padEnd(maxFractionDigits, '0');
+            // }
+            res = `${valueArr[0]}${decimalSeparator}${valueArr[1].slice(0, maxFractionDigits)}`;
+        }
+        return res;
     }
-}
-PepReplaceLineBreaksPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepReplaceLineBreaksPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-PepReplaceLineBreaksPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepReplaceLineBreaksPipe, name: "pepReplaceLineBreaks" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepReplaceLineBreaksPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'pepReplaceLineBreaks' }]
-        }] });
-class PepDateFormatterPipe {
-    transform(value, culture, showTime = false) {
-        let res = '';
-        value = new Date(value);
-        if (value) {
-            res = value.toLocaleDateString(culture || 'en-US');
-            if (showTime) {
-                res +=
-                    ' ' +
-                        value.toLocaleTimeString(culture || 'en-US', {
-                            hour: '2-digit',
-                            minute: '2-digit',
-                        });
+    parseDate(dateStr, showTime = false) {
+        let retVal = null;
+        if (dateStr !== '') {
+            retVal = new Date(dateStr);
+            // Convert to date with no offset.
+            if (!showTime) {
+                const index = dateStr.indexOf('T');
+                if (index > 0) {
+                    dateStr = dateStr.substring(0, index);
+                }
+                const dateText = dateStr.split('-');
+                if (dateText.length === 3) {
+                    const year = Number(dateText[0]);
+                    const month = Number(dateText[1]) - 1;
+                    const day = Number(dateText[2]);
+                    retVal = new Date(year, month, day, 0, retVal.getTimezoneOffset() * -1);
+                }
+            }
+            else {
+                retVal = new Date(retVal.getFullYear(), retVal.getMonth(), retVal.getDate(), retVal.getHours(), retVal.getMinutes() + retVal.getTimezoneOffset() * -1, retVal.getSeconds());
             }
         }
-        return res;
+        if (retVal && isNaN(retVal.getTime())) {
+            retVal = null;
+        }
+        return retVal;
     }
-}
-PepDateFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDateFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-PepDateFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepDateFormatterPipe, name: "pepDateFormatter" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDateFormatterPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'pepDateFormatter' }]
-        }] });
-class PepDateStringFormatterPipe {
-    transform(value, culture, showTime = false) {
-        let res = '';
-        const tmpDate = new Date(value);
-        if (value) {
-            res = tmpDate.toLocaleDateString(culture || 'en-US');
+    stringifyDate(date, showTime = false) {
+        if (date) {
             if (showTime) {
-                res += ' ' + tmpDate.toLocaleTimeString(culture || 'en-US');
+                return date.toISOString(); // include - offset
+            }
+            else {
+                const dateText = [];
+                dateText.push(date.getFullYear(), '-', date.getMonth() + 1, '-', date.getDate());
+                return dateText.join('');
             }
         }
-        return res;
+        else {
+            return '';
+        }
     }
-}
-PepDateStringFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDateStringFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-PepDateStringFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepDateStringFormatterPipe, name: "pepDateStringFormatter" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDateStringFormatterPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'pepDateStringFormatter' }]
-        }] });
-class PepSafeHtmlPipe {
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
+    isValueHtml(value) {
+        let res = false;
+        const REGEXP = /<\/?[a-z][\s\S]*>/i;
+        res = REGEXP.test(value);
+        return res;
     }
-    transform(html) {
-        return this.sanitizer.bypassSecurityTrustHtml(html);
+    isJsonString(str) {
+        try {
+            JSON.parse(str);
+        }
+        catch (e) {
+            return false;
+        }
+        return true;
     }
-}
-PepSafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSafeHtmlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-PepSafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepSafeHtmlPipe, name: "pepSafeHtml" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSafeHtmlPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'pepSafeHtml' }]
-        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
-class PepSafePipe {
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
+    getSvgElementFromString(document, svgContent) {
+        const div = document.createElement('DIV');
+        // div.className = 'svg-icon';
+        // Add class svg-icon
+        if (svgContent?.length > 0) {
+            div.innerHTML = svgContent.replace('<svg ', '<svg class="svg-icon" ');
+        }
+        return (div.querySelector('svg') ||
+            document.createElementNS('http://www.w3.org/2000/svg', 'path'));
     }
-    transform(value, type) {
-        switch (type) {
-            case 'html':
-                return this.sanitizer.bypassSecurityTrustHtml(value);
-            case 'style':
-                return this.sanitizer.bypassSecurityTrustStyle(value);
-            case 'script':
-                return this.sanitizer.bypassSecurityTrustScript(value);
-            case 'url':
-                return this.sanitizer.bypassSecurityTrustUrl(value);
-            case 'resourceUrl':
-                return this.sanitizer.bypassSecurityTrustResourceUrl(value);
-            default:
-                throw new Error(`Invalid safe type specified: ${type}`);
+    // formatPercent(value: any, digitsInfo = '1.0-2') {
+    formatPercent(value, minFractionDigits = 0, maxFractionDigits = 2) {
+        minFractionDigits = coerceNumberProperty(minFractionDigits, null);
+        maxFractionDigits = coerceNumberProperty(maxFractionDigits, null);
+        value = this.cutValueByFractionDigits(value?.toString(), Math.max(minFractionDigits, maxFractionDigits));
+        const number = this.prepareNumberToFormat(value);
+        if (number === 0) {
+            return '0%';
+        }
+        else {
+            // return formatPercent(number / 100, this.culture, digitsInfo);
+            return new Intl.NumberFormat(this.culture, {
+                style: 'percent',
+                minimumFractionDigits: minFractionDigits || 0,
+                maximumFractionDigits: maxFractionDigits || Math.max(2, minFractionDigits),
+            }).format(number / 100);
         }
     }
-}
-PepSafePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSafePipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-PepSafePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepSafePipe, name: "pepSafe" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSafePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'pepSafe' }]
-        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
-class PepSplitUppercasePipe {
-    transform(value) {
-        const newValue = value.replace(/([a-z])([A-Z])/g, '$1 $2');
-        return newValue;
-    }
-}
-PepSplitUppercasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSplitUppercasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-PepSplitUppercasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepSplitUppercasePipe, name: "pepSplitUppercase" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSplitUppercasePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'pepSplitUppercase' }]
-        }] });
-class PepToNumberPipe {
-    transform(value) {
-        return parseInt(value);
-    }
-}
-PepToNumberPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepToNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-PepToNumberPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepToNumberPipe, name: "pepToNumber" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepToNumberPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'pepToNumber' }]
-        }] });
-
-class DateAgoPipe {
-    constructor(translateService) {
-        this.translateService = translateService;
-    }
-    getCounterTranslation(counter, key) {
-        const intervalText = this.translateService.get(`DATE_AGO.${key.toUpperCase()}`) || key;
-        const agoText = this.translateService.get(counter === 1 ? 'DATE_AGO.SINGULAR' : 'DATE_AGO.PLURAL') || counter === 1 ? ' ago' : 's ago';
-        return `${intervalText}${agoText}`;
-    }
-    transform(value, args) {
-        if (value) {
-            const seconds = Math.floor((+new Date() - +new Date(value)) / 1000);
-            if (seconds < 29) // less than 30 seconds ago will show as 'Just now'
-                return this.translateService.get('DATE_AGO.JUST_NOW') || 'Just now';
-            const intervals = {
-                'year': 31536000,
-                'month': 2592000,
-                'week': 604800,
-                'day': 86400,
-                'hour': 3600,
-                'minute': 60,
-                'second': 1
-            };
-            let counter;
-            for (const i in intervals) {
-                counter = Math.floor(seconds / intervals[i]);
-                if (counter > 0) {
-                    this.getCounterTranslation(counter, i);
-                }
-            }
+    // formatCurrency(value: any, currencySign = '', digitsInfo = '1.2-2') {
+    formatCurrency(value, currencySign = '', minFractionDigits = 2, maxFractionDigits = 2, useGrouping = true) {
+        minFractionDigits = coerceNumberProperty(minFractionDigits, null);
+        maxFractionDigits = coerceNumberProperty(maxFractionDigits, null);
+        let res = '';
+        // If the decimal separator is the last digit
+        // if (value.length > 0 && value.indexOf(this.getDecimalSeparator()) === value.length -1) {
+        //     res = value;
+        // } else {
+        value = this.cutValueByFractionDigits(value?.toString(), Math.max(minFractionDigits, maxFractionDigits));
+        const number = this.prepareNumberToFormat(value);
+        const styleOptions = {
+            // style: 'currency',
+            // currencySign: currencySign,
+            useGrouping: useGrouping,
+            minimumFractionDigits: minFractionDigits || Math.min(2, maxFractionDigits || 2),
+            maximumFractionDigits: maxFractionDigits || Math.max(2, minFractionDigits),
+        };
+        if (number === 0) {
+            // return formatCurrency(0, this.culture, currencySign, undefined, digitsInfo);
+            res = new Intl.NumberFormat(this.culture, styleOptions).format(0);
         }
-        return value;
-    }
-}
-DateAgoPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DateAgoPipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
-DateAgoPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: DateAgoPipe, name: "dateAgo" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DateAgoPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'dateAgo'
-                }]
-        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; } });
-
-class PepInputAutoWidthDirective {
-    constructor(renderer, el) {
-        this.renderer = renderer;
-        this.el = el;
-        this.includePadding = true;
-        this.input = null;
+        else {
+            // return formatCurrency(value, this.culture, currencySign, undefined, digitsInfo);
+            res = new Intl.NumberFormat(this.culture, styleOptions).format(number);
+        }
+        if (currencySign.length > 0) {
+            res = this.isCurrencyShouldBeOnRight(currencySign) ? `${res} ${currencySign}` : `${currencySign} ${res}`;
+        }
+        // }
+        return res;
     }
-    ngAfterViewInit() {
-        if (this.el.nativeElement.tagName.toLowerCase() === 'input') {
-            this.input = this.el;
+    // formatDecimal(value: any, digitsInfo = '1.2-2') {
+    formatDecimal(value, minFractionDigits = 2, maxFractionDigits = 2, useGrouping = true) {
+        minFractionDigits = coerceNumberProperty(minFractionDigits, null);
+        // console.log('formatDecimal minFractionDigits value is', minFractionDigits);
+        maxFractionDigits = coerceNumberProperty(maxFractionDigits, null);
+        // console.log('formatDecimal minFractionDigits value is', maxFractionDigits);
+        value = this.cutValueByFractionDigits(value?.toString(), Math.max(minFractionDigits, maxFractionDigits));
+        const number = this.prepareNumberToFormat(value);
+        // console.log('number value is', number);
+        if (number === 0) {
+            return '0';
         }
         else {
-            const list = this.el.nativeElement.querySelectorAll('input');
-            this.input = list.length > 0 ? list[0] : null;
+            // return formatNumber(value, this.culture, digitsInfo);
+            const res = new Intl.NumberFormat(this.culture, {
+                useGrouping: useGrouping,
+                minimumFractionDigits: minFractionDigits || Math.min(2, maxFractionDigits || 2),
+                maximumFractionDigits: maxFractionDigits || Math.max(2, minFractionDigits),
+            }).format(number);
+            // console.log('Intl.NumberFormat value is', res);
+            return res;
         }
-        if (this.input) {
-            this.input.addEventListener('blur', this.setWidthUsingText.bind(this));
-            this.input.addEventListener('keyup', this.setWidthUsingText.bind(this));
+    }
+    // formatNumber(value: any, digitsInfo = '1.0-0'): string {
+    formatNumber(value, useGrouping = true) {
+        const number = this.prepareNumberToFormat(value);
+        if (number === 0) {
+            return '0';
+        }
+        else {
+            // return formatNumber(value, this.culture, digitsInfo);
+            return new Intl.NumberFormat(this.culture, {
+                useGrouping: useGrouping,
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 0,
+            }).format(number);
         }
-        this.setWidthUsingText();
     }
-    ngOnDestroy() {
-        this.input.removeEventListener('blur', this.setWidthUsingText.bind(this));
-        this.input.removeEventListener('keyup', this.setWidthUsingText.bind(this));
+    /**
+     * Convert a number in milliseconds to a standard duration string.
+     * @param {number} value - duration in milliseconds
+     * @param {object} options - formatDuration options object
+     * @param {boolean} [options.leading=false] - add leading zero
+     * @returns string - formatted duration string
+    */
+    formatDuration(value, options = {}) {
+        const isNumber = _isNumberValue(value);
+        if (!isNumber) {
+            return value;
+        }
+        else {
+            let number = this.prepareNumberToFormat(value);
+            const leading = options?.leading || true;
+            const duration = options?.duration || 'milliseconds';
+            if (duration === 'seconds') {
+                number = number * 1000;
+            }
+            const unsignedMs = number < 0 ? -number : number;
+            const sign = number <= -1000 ? '-' : '';
+            const t = this.parseMs(unsignedMs);
+            const seconds = this.addZero(t.seconds);
+            if (t.days) {
+                return sign + t.days + ':' + this.addZero(t.hours) + ':' + this.addZero(t.minutes) + ':' + seconds;
+            }
+            if (t.hours) {
+                return sign + (leading ? this.addZero(t.hours) : t.hours) + ':' + this.addZero(t.minutes) + ':' + seconds;
+            }
+            return sign + (leading ? this.addZero(t.minutes) : t.minutes) + ':' + seconds;
+        }
     }
-    get paddingWidth() {
-        return this.includePadding
-            ? this._sumPropertyValues(['padding-left', 'padding-right'])
-            : 0;
+    incrementNumber(value) {
+        let numberValue = coerceNumberProperty(value, 0);
+        return (++numberValue).toString();
     }
-    get style() {
-        return getComputedStyle(this.input, '');
+    decrementNumber(value) {
+        let numberValue = coerceNumberProperty(value, 0);
+        return (--numberValue).toString();
     }
-    setWidth(width) {
-        this.renderer.setStyle(this.input, 'width', width + 'px');
+    getDecimalSeparator() {
+        const numberWithDecimalSeparator = 1.1;
+        return numberWithDecimalSeparator
+            .toLocaleString(this.culture)
+            .substring(1, 2);
     }
-    setWidthUsingText() {
-        if (this.input) {
-            const text = this.input.value;
-            this.setWidth(this.textWidth(text) + this.paddingWidth);
+    changeDecimalSeparatorWhenItsComma(value, reverse = false) {
+        // If the decimal separator is ','
+        if (this.getDecimalSeparator() === ',') {
+            // In case that the value isn't string.
+            value = value?.toString() || '';
+            // If reverse change the number from '.' to ',' else do the opposite.
+            value = reverse ? value.replace('.', ',') : value.replace(',', '.');
         }
+        return value;
     }
-    _sumPropertyValues(properties) {
-        return properties
-            .map((property) => parseInt(this.style.getPropertyValue(property), 10))
-            .reduce((a, b) => a + b, 0);
-    }
-    textWidth(value) {
-        const ctx = this.renderer.createElement('canvas').getContext('2d');
-        const { fontStyle, fontVariant, fontWeight, fontSize, fontFamily, } = this.style;
-        // font string format: {normal, normal, 700, 20px, Roboto, "Helvetica Neue", sans-serif}
-        ctx.font =
-            fontStyle +
-                ' ' +
-                fontVariant +
-                ' ' +
-                fontWeight +
-                ' ' +
-                fontSize +
-                ' ' +
-                fontFamily;
-        return ctx ? ctx.measureText(value).width : 0;
+    isEqualNumber(numberAsString, numberAsString2) {
+        const number = this.prepareNumberToFormat(numberAsString);
+        const number2 = this.prepareNumberToFormat(numberAsString2);
+        return number === number2;
     }
 }
-PepInputAutoWidthDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepInputAutoWidthDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-PepInputAutoWidthDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: PepInputAutoWidthDirective, selector: "[pepAutoWidth]", inputs: { includePadding: "includePadding" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepInputAutoWidthDirective, decorators: [{
-            type: Directive,
+PepUtilitiesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepUtilitiesService, deps: [{ token: i1.TranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+PepUtilitiesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepUtilitiesService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepUtilitiesService, decorators: [{
+            type: Injectable,
             args: [{
-                    selector: '[pepAutoWidth]',
+                    providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { includePadding: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () { return [{ type: i1.TranslateService, decorators: [{
+                    type: Optional
+                }] }]; } });
 
-class PepButtonBlurDirective {
-    constructor(element) {
-        this.element = element;
-    }
-    onClick() {
-        setTimeout(() => {
-            this.element.nativeElement.blur();
-        }, 0);
+class PepCapitalizePipe {
+    transform(value) {
+        if (value) {
+            return value.charAt(0).toUpperCase() + value.slice(1);
+        }
+        return value;
     }
 }
-PepButtonBlurDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepButtonBlurDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-PepButtonBlurDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: PepButtonBlurDirective, selector: "[pepButtonBlur]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepButtonBlurDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[pepButtonBlur]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-class PepUtilitiesService {
-    constructor(translate = null) {
-        this.translate = translate;
-        this.culture = 'en-US';
-        this.culture = this.translate?.getBrowserCultureLang() || 'en-US';
-        // try {
-        //     import(`@angular/common/locales/global/${this.culture}`);
-        // } catch {}
-    }
-    prepareNumberToFormat(value, fallbackValue = 0) {
-        // If the decimal separator is ',' change it to '.'
-        if (value?.length > 0) {
-            // If the decimal separator is ',' change it to '.' for let the formatting works.
-            value = this.changeDecimalSeparatorWhenItsComma(value);
-            // console.log('coerceNumberProperty after change decimal separator value is', value);
+PepCapitalizePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+PepCapitalizePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepCapitalizePipe, name: "pepCapitalize" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCapitalizePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'pepCapitalize' }]
+        }] });
+class PepEncodePipe {
+    transform(value) {
+        if (value) {
+            const v = btoa(value);
+            return v;
         }
-        return coerceNumberProperty(value, fallbackValue);
+        return value;
     }
-    // adapted from https://github.com/sindresorhus/parse-ms.
-    // moved to internal function because parse-ms is now pure ESM.
-    parseMs(milliseconds) {
-        if (typeof milliseconds !== 'number') {
-            throw new TypeError('Expected a number');
+}
+PepEncodePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepEncodePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+PepEncodePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepEncodePipe, name: "pepEncode" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepEncodePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'pepEncode' }]
+        }] });
+class PepEscapePipe {
+    transform(value) {
+        if (value) {
+            const v = escape(value);
+            return v;
         }
-        return {
-            days: Math.trunc(milliseconds / 86400000),
-            hours: Math.trunc(milliseconds / 3600000) % 24,
-            minutes: Math.trunc(milliseconds / 60000) % 60,
-            seconds: Math.trunc(milliseconds / 1000) % 60,
-            milliseconds: Math.trunc(milliseconds) % 1000
-        };
+        return value;
     }
-    // adapted from https://github.com/rafaelrinaldi/add-zero.
-    // moved to internal function b/c addZero is unmaintained (7+ years).
-    // stripped out negative sign logic since we're already doing it elsewhere.
-    addZero(value, digits = 2) {
-        digits = digits || 2;
-        let str = value.toString();
-        let size = 0;
-        size = digits - str.length + 1;
-        str = new Array(size).join('0').concat(str);
-        return str;
+}
+PepEscapePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepEscapePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+PepEscapePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepEscapePipe, name: "pepEscape" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepEscapePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'pepEscape' }]
+        }] });
+class PepReplaceLineBreaksPipe {
+    transform(value) {
+        const newValue = value.replace(/(<br\ ?\/?>)/g, ' ');
+        return newValue;
     }
-    isCurrencyShouldBeOnRight(currencySymbol) {
-        let res = false;
-        if (currencySymbol == "€" ||
-            currencySymbol == "₪" ||
-            currencySymbol == "Ft" ||
-            currencySymbol == "Kč" ||
-            currencySymbol == "руб" ||
-            currencySymbol == "zł" ||
-            currencySymbol == "kr.") {
-            res = true;
+}
+PepReplaceLineBreaksPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepReplaceLineBreaksPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+PepReplaceLineBreaksPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepReplaceLineBreaksPipe, name: "pepReplaceLineBreaks" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepReplaceLineBreaksPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'pepReplaceLineBreaks' }]
+        }] });
+class PepDateFormatterPipe {
+    transform(value, culture, showTime = false) {
+        let res = '';
+        value = new Date(value);
+        if (value) {
+            res = value.toLocaleDateString(culture || 'en-US');
+            if (showTime) {
+                res +=
+                    ' ' +
+                        value.toLocaleTimeString(culture || 'en-US', {
+                            hour: '2-digit',
+                            minute: '2-digit',
+                        });
+            }
         }
         return res;
     }
-    cutValueByFractionDigits(value, maxFractionDigits) {
-        let res = value;
-        maxFractionDigits = maxFractionDigits || 2;
-        const decimalSeparator = this.getDecimalSeparator();
-        if (value.includes(decimalSeparator)) {
-            const valueArr = value.split(decimalSeparator);
-            // if (valueArr[1].length < maxFractionDigits) {
-            valueArr[1] = valueArr[1].padEnd(maxFractionDigits, '0');
-            // }
-            res = `${valueArr[0]}${decimalSeparator}${valueArr[1].slice(0, maxFractionDigits)}`;
+}
+PepDateFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDateFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+PepDateFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepDateFormatterPipe, name: "pepDateFormatter" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDateFormatterPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'pepDateFormatter' }]
+        }] });
+class PepDateStringFormatterPipe {
+    transform(value, culture, showTime = false) {
+        let res = '';
+        const tmpDate = new Date(value);
+        if (value) {
+            res = tmpDate.toLocaleDateString(culture || 'en-US');
+            if (showTime) {
+                res += ' ' + tmpDate.toLocaleTimeString(culture || 'en-US');
+            }
         }
         return res;
     }
-    parseDate(dateStr, showTime = false) {
-        let retVal = null;
-        if (dateStr !== '') {
-            retVal = new Date(dateStr);
-            // Convert to date with no offset.
-            if (!showTime) {
-                const index = dateStr.indexOf('T');
-                if (index > 0) {
-                    dateStr = dateStr.substring(0, index);
-                }
-                const dateText = dateStr.split('-');
-                if (dateText.length === 3) {
-                    const year = Number(dateText[0]);
-                    const month = Number(dateText[1]) - 1;
-                    const day = Number(dateText[2]);
-                    retVal = new Date(year, month, day, 0, retVal.getTimezoneOffset() * -1);
-                }
-            }
-            else {
-                retVal = new Date(retVal.getFullYear(), retVal.getMonth(), retVal.getDate(), retVal.getHours(), retVal.getMinutes() + retVal.getTimezoneOffset() * -1, retVal.getSeconds());
-            }
-        }
-        if (retVal && isNaN(retVal.getTime())) {
-            retVal = null;
-        }
-        return retVal;
+}
+PepDateStringFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDateStringFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+PepDateStringFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepDateStringFormatterPipe, name: "pepDateStringFormatter" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDateStringFormatterPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'pepDateStringFormatter' }]
+        }] });
+class PepSafeHtmlPipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
     }
-    stringifyDate(date, showTime = false) {
-        if (date) {
-            if (showTime) {
-                return date.toISOString(); // include - offset
-            }
-            else {
-                const dateText = [];
-                dateText.push(date.getFullYear(), '-', date.getMonth() + 1, '-', date.getDate());
-                return dateText.join('');
-            }
-        }
-        else {
-            return '';
-        }
+    transform(html) {
+        return this.sanitizer.bypassSecurityTrustHtml(html);
     }
-    isValueHtml(value) {
-        let res = false;
-        const REGEXP = /<\/?[a-z][\s\S]*>/i;
-        res = REGEXP.test(value);
-        return res;
+}
+PepSafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSafeHtmlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+PepSafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepSafeHtmlPipe, name: "pepSafeHtml" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'pepSafeHtml' }]
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
+class PepSafePipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
     }
-    isJsonString(str) {
-        try {
-            JSON.parse(str);
-        }
-        catch (e) {
-            return false;
+    transform(value, type) {
+        switch (type) {
+            case 'html':
+                return this.sanitizer.bypassSecurityTrustHtml(value);
+            case 'style':
+                return this.sanitizer.bypassSecurityTrustStyle(value);
+            case 'script':
+                return this.sanitizer.bypassSecurityTrustScript(value);
+            case 'url':
+                return this.sanitizer.bypassSecurityTrustUrl(value);
+            case 'resourceUrl':
+                return this.sanitizer.bypassSecurityTrustResourceUrl(value);
+            default:
+                throw new Error(`Invalid safe type specified: ${type}`);
         }
-        return true;
     }
-    getSvgElementFromString(document, svgContent) {
-        const div = document.createElement('DIV');
-        // div.className = 'svg-icon';
-        // Add class svg-icon
-        if (svgContent?.length > 0) {
-            div.innerHTML = svgContent.replace('<svg ', '<svg class="svg-icon" ');
-        }
-        return (div.querySelector('svg') ||
-            document.createElementNS('http://www.w3.org/2000/svg', 'path'));
+}
+PepSafePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSafePipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+PepSafePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepSafePipe, name: "pepSafe" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSafePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'pepSafe' }]
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
+class PepSplitUppercasePipe {
+    transform(value) {
+        const newValue = value.replace(/([a-z])([A-Z])/g, '$1 $2');
+        return newValue;
+    }
+}
+PepSplitUppercasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSplitUppercasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+PepSplitUppercasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepSplitUppercasePipe, name: "pepSplitUppercase" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSplitUppercasePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'pepSplitUppercase' }]
+        }] });
+class PepToNumberPipe {
+    constructor(utilitiesService) {
+        this.utilitiesService = utilitiesService;
+    }
+    transform(value) {
+        const decimalSeparator = this.utilitiesService.getDecimalSeparator();
+        // We need to remove the thousands separator so - If the decimal separator is '.' we need to remove the ',' from the value else we remove the '.'.
+        value = decimalSeparator === '.' ? value.replace(/,/g, '') : value.replace(/./g, '');
+        const numberValue = coerceNumberProperty(value);
+        return numberValue;
+        // return parseInt(value);
+    }
+}
+PepToNumberPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepToNumberPipe, deps: [{ token: PepUtilitiesService }], target: i0.ɵɵFactoryTarget.Pipe });
+PepToNumberPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepToNumberPipe, name: "pepToNumber" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepToNumberPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'pepToNumber' }]
+        }], ctorParameters: function () { return [{ type: PepUtilitiesService }]; } });
+
+class DateAgoPipe {
+    constructor(translateService) {
+        this.translateService = translateService;
+    }
+    getCounterTranslation(counter, key) {
+        const intervalText = this.translateService.get(`DATE_AGO.${key.toUpperCase()}`) || key;
+        const agoText = this.translateService.get(counter === 1 ? 'DATE_AGO.SINGULAR' : 'DATE_AGO.PLURAL') || counter === 1 ? ' ago' : 's ago';
+        return `${intervalText}${agoText}`;
     }
-    // formatPercent(value: any, digitsInfo = '1.0-2') {
-    formatPercent(value, minFractionDigits = 0, maxFractionDigits = 2) {
-        minFractionDigits = coerceNumberProperty(minFractionDigits, null);
-        maxFractionDigits = coerceNumberProperty(maxFractionDigits, null);
-        value = this.cutValueByFractionDigits(value?.toString(), Math.max(minFractionDigits, maxFractionDigits));
-        const number = this.prepareNumberToFormat(value);
-        if (number === 0) {
-            return '0%';
-        }
-        else {
-            // return formatPercent(number / 100, this.culture, digitsInfo);
-            return new Intl.NumberFormat(this.culture, {
-                style: 'percent',
-                minimumFractionDigits: minFractionDigits || 0,
-                maximumFractionDigits: maxFractionDigits || Math.max(2, minFractionDigits),
-            }).format(number / 100);
+    transform(value, args) {
+        if (value) {
+            const seconds = Math.floor((+new Date() - +new Date(value)) / 1000);
+            if (seconds < 29) // less than 30 seconds ago will show as 'Just now'
+                return this.translateService.get('DATE_AGO.JUST_NOW') || 'Just now';
+            const intervals = {
+                'year': 31536000,
+                'month': 2592000,
+                'week': 604800,
+                'day': 86400,
+                'hour': 3600,
+                'minute': 60,
+                'second': 1
+            };
+            let counter;
+            for (const i in intervals) {
+                counter = Math.floor(seconds / intervals[i]);
+                if (counter > 0) {
+                    this.getCounterTranslation(counter, i);
+                }
+            }
         }
+        return value;
     }
-    // formatCurrency(value: any, currencySign = '', digitsInfo = '1.2-2') {
-    formatCurrency(value, currencySign = '', minFractionDigits = 2, maxFractionDigits = 2, useGrouping = true) {
-        minFractionDigits = coerceNumberProperty(minFractionDigits, null);
-        maxFractionDigits = coerceNumberProperty(maxFractionDigits, null);
-        let res = '';
-        // If the decimal separator is the last digit
-        // if (value.length > 0 && value.indexOf(this.getDecimalSeparator()) === value.length -1) {
-        //     res = value;
-        // } else {
-        value = this.cutValueByFractionDigits(value?.toString(), Math.max(minFractionDigits, maxFractionDigits));
-        const number = this.prepareNumberToFormat(value);
-        const styleOptions = {
-            // style: 'currency',
-            // currencySign: currencySign,
-            useGrouping: useGrouping,
-            minimumFractionDigits: minFractionDigits || Math.min(2, maxFractionDigits || 2),
-            maximumFractionDigits: maxFractionDigits || Math.max(2, minFractionDigits),
-        };
-        if (number === 0) {
-            // return formatCurrency(0, this.culture, currencySign, undefined, digitsInfo);
-            res = new Intl.NumberFormat(this.culture, styleOptions).format(0);
-        }
-        else {
-            // return formatCurrency(value, this.culture, currencySign, undefined, digitsInfo);
-            res = new Intl.NumberFormat(this.culture, styleOptions).format(number);
-        }
-        if (currencySign.length > 0) {
-            res = this.isCurrencyShouldBeOnRight(currencySign) ? `${res} ${currencySign}` : `${currencySign} ${res}`;
-        }
-        // }
-        return res;
+}
+DateAgoPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DateAgoPipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
+DateAgoPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: DateAgoPipe, name: "dateAgo" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DateAgoPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dateAgo'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; } });
+
+class PepInputAutoWidthDirective {
+    constructor(renderer, el) {
+        this.renderer = renderer;
+        this.el = el;
+        this.includePadding = true;
+        this.input = null;
     }
-    // formatDecimal(value: any, digitsInfo = '1.2-2') {
-    formatDecimal(value, minFractionDigits = 2, maxFractionDigits = 2, useGrouping = true) {
-        minFractionDigits = coerceNumberProperty(minFractionDigits, null);
-        // console.log('formatDecimal minFractionDigits value is', minFractionDigits);
-        maxFractionDigits = coerceNumberProperty(maxFractionDigits, null);
-        // console.log('formatDecimal minFractionDigits value is', maxFractionDigits);
-        value = this.cutValueByFractionDigits(value?.toString(), Math.max(minFractionDigits, maxFractionDigits));
-        const number = this.prepareNumberToFormat(value);
-        // console.log('number value is', number);
-        if (number === 0) {
-            return '0';
+    ngAfterViewInit() {
+        if (this.el.nativeElement.tagName.toLowerCase() === 'input') {
+            this.input = this.el;
         }
         else {
-            // return formatNumber(value, this.culture, digitsInfo);
-            const res = new Intl.NumberFormat(this.culture, {
-                useGrouping: useGrouping,
-                minimumFractionDigits: minFractionDigits || Math.min(2, maxFractionDigits || 2),
-                maximumFractionDigits: maxFractionDigits || Math.max(2, minFractionDigits),
-            }).format(number);
-            // console.log('Intl.NumberFormat value is', res);
-            return res;
-        }
-    }
-    // formatNumber(value: any, digitsInfo = '1.0-0'): string {
-    formatNumber(value, useGrouping = true) {
-        const number = this.prepareNumberToFormat(value);
-        if (number === 0) {
-            return '0';
+            const list = this.el.nativeElement.querySelectorAll('input');
+            this.input = list.length > 0 ? list[0] : null;
         }
-        else {
-            // return formatNumber(value, this.culture, digitsInfo);
-            return new Intl.NumberFormat(this.culture, {
-                useGrouping: useGrouping,
-                minimumFractionDigits: 0,
-                maximumFractionDigits: 0,
-            }).format(number);
+        if (this.input) {
+            this.input.addEventListener('blur', this.setWidthUsingText.bind(this));
+            this.input.addEventListener('keyup', this.setWidthUsingText.bind(this));
         }
+        this.setWidthUsingText();
     }
-    /**
-     * Convert a number in milliseconds to a standard duration string.
-     * @param {number} value - duration in milliseconds
-     * @param {object} options - formatDuration options object
-     * @param {boolean} [options.leading=false] - add leading zero
-     * @returns string - formatted duration string
-    */
-    formatDuration(value, options = {}) {
-        const isNumber = _isNumberValue(value);
-        if (!isNumber) {
-            return value;
-        }
-        else {
-            let number = this.prepareNumberToFormat(value);
-            const leading = options?.leading || true;
-            const duration = options?.duration || 'milliseconds';
-            if (duration === 'seconds') {
-                number = number * 1000;
-            }
-            const unsignedMs = number < 0 ? -number : number;
-            const sign = number <= -1000 ? '-' : '';
-            const t = this.parseMs(unsignedMs);
-            const seconds = this.addZero(t.seconds);
-            if (t.days) {
-                return sign + t.days + ':' + this.addZero(t.hours) + ':' + this.addZero(t.minutes) + ':' + seconds;
-            }
-            if (t.hours) {
-                return sign + (leading ? this.addZero(t.hours) : t.hours) + ':' + this.addZero(t.minutes) + ':' + seconds;
-            }
-            return sign + (leading ? this.addZero(t.minutes) : t.minutes) + ':' + seconds;
-        }
+    ngOnDestroy() {
+        this.input.removeEventListener('blur', this.setWidthUsingText.bind(this));
+        this.input.removeEventListener('keyup', this.setWidthUsingText.bind(this));
     }
-    incrementNumber(value) {
-        let numberValue = coerceNumberProperty(value, 0);
-        return (++numberValue).toString();
+    get paddingWidth() {
+        return this.includePadding
+            ? this._sumPropertyValues(['padding-left', 'padding-right'])
+            : 0;
     }
-    decrementNumber(value) {
-        let numberValue = coerceNumberProperty(value, 0);
-        return (--numberValue).toString();
+    get style() {
+        return getComputedStyle(this.input, '');
     }
-    getDecimalSeparator() {
-        const numberWithDecimalSeparator = 1.1;
-        return numberWithDecimalSeparator
-            .toLocaleString(this.culture)
-            .substring(1, 2);
+    setWidth(width) {
+        this.renderer.setStyle(this.input, 'width', width + 'px');
     }
-    changeDecimalSeparatorWhenItsComma(value, reverse = false) {
-        // If the decimal separator is ','
-        if (this.getDecimalSeparator() === ',') {
-            // In case that the value isn't string.
-            value = value?.toString() || '';
-            // If reverse change the number from '.' to ',' else do the opposite.
-            value = reverse ? value.replace('.', ',') : value.replace(',', '.');
+    setWidthUsingText() {
+        if (this.input) {
+            const text = this.input.value;
+            this.setWidth(this.textWidth(text) + this.paddingWidth);
         }
-        return value;
     }
-    isEqualNumber(numberAsString, numberAsString2) {
-        const number = this.prepareNumberToFormat(numberAsString);
-        const number2 = this.prepareNumberToFormat(numberAsString2);
-        return number === number2;
+    _sumPropertyValues(properties) {
+        return properties
+            .map((property) => parseInt(this.style.getPropertyValue(property), 10))
+            .reduce((a, b) => a + b, 0);
+    }
+    textWidth(value) {
+        const ctx = this.renderer.createElement('canvas').getContext('2d');
+        const { fontStyle, fontVariant, fontWeight, fontSize, fontFamily, } = this.style;
+        // font string format: {normal, normal, 700, 20px, Roboto, "Helvetica Neue", sans-serif}
+        ctx.font =
+            fontStyle +
+                ' ' +
+                fontVariant +
+                ' ' +
+                fontWeight +
+                ' ' +
+                fontSize +
+                ' ' +
+                fontFamily;
+        return ctx ? ctx.measureText(value).width : 0;
     }
 }
-PepUtilitiesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepUtilitiesService, deps: [{ token: i1.TranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-PepUtilitiesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepUtilitiesService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepUtilitiesService, decorators: [{
-            type: Injectable,
+PepInputAutoWidthDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepInputAutoWidthDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+PepInputAutoWidthDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: PepInputAutoWidthDirective, selector: "[pepAutoWidth]", inputs: { includePadding: "includePadding" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepInputAutoWidthDirective, decorators: [{
+            type: Directive,
             args: [{
-                    providedIn: 'root',
+                    selector: '[pepAutoWidth]',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.TranslateService, decorators: [{
-                    type: Optional
-                }] }]; } });
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { includePadding: [{
+                type: Input
+            }] } });
+
+class PepButtonBlurDirective {
+    constructor(element) {
+        this.element = element;
+    }
+    onClick() {
+        setTimeout(() => {
+            this.element.nativeElement.blur();
+        }, 0);
+    }
+}
+PepButtonBlurDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepButtonBlurDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+PepButtonBlurDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: PepButtonBlurDirective, selector: "[pepButtonBlur]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepButtonBlurDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pepButtonBlur]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
 
 class PepButtonLoaderDirective {
     constructor(renderer, element, utilitiesService, document) {
@@ -1806,6 +1814,7 @@ class PepCustomizationService {
                 field.disabled ? formControl.disable() : formControl.enable();
                 const validators = field.getValidators();
                 formControl.setValidators(validators);
+                formControl.updateValueAndValidity();
             }
         }
     }
@@ -4318,6 +4327,12 @@ class PepFieldBase {
         if (this.maxFieldCharacters > 0) {
             validators.push(Validators.maxLength(this.maxFieldCharacters));
         }
+        if (this.minValue) {
+            validators.push(Validators.min(this.minValue));
+        }
+        if (this.maxValue) {
+            validators.push(Validators.max(this.maxValue));
+        }
         return validators;
     }
     getValidators() {