@porscheinformatik/clr-addons 18.1.9 → 18.2.0

package/fesm2022/clr-addons.mjs

@@ -4,9 +4,9 @@ import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, getLocaleDateFormat, FormatWidth } from '@angular/common';
 import { ClarityIcons, arrowIcon, angleIcon, timesIcon, trashIcon, plusCircleIcon, exclamationCircleIcon, searchIcon, ellipsisVerticalIcon, pencilIcon, historyIcon, treeViewIcon, organizationIcon, calendarIcon, checkCircleIcon, windowCloseIcon, exclamationTriangleIcon } from '@cds/core/icon';
 import * as i2 from '@clr/angular';
-import { ClarityModule, ClrFormsModule, ClrDropdown, ClrForm, ClrAlert, ClrAxis, ClrSide, ClrAlignment, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService, ClrIconModule, ClrDropdownModule, ClrDatagridSortOrder, DatagridPropertyComparator, ClrDatagridPagination, ClrDatagridFilter, ClrDateContainer, ClrLabel, ClrControlHelper, ClrControlError, ClrControlSuccess, ClrDatepickerModule } from '@clr/angular';
+import { ClarityModule, ClrFormsModule, ClrDropdown, ClrForm, ClrAlert, ClrAxis, ClrSide, ClrAlignment, ClrPopoverToggleService, ClrPopoverEventsService, ClrPopoverPositionService, ClrIconModule, ClrDropdownModule, ClrDatagridSortOrder, DatagridPropertyComparator, ClrDatagridPagination, ClrDatagridFilter, ClrDatagridColumn, ClrDateContainer, ClrLabel, ClrControlHelper, ClrControlError, ClrControlSuccess, ClrDatepickerModule } from '@clr/angular';
 import * as i3$1 from '@angular/forms';
-import { FormsModule, NG_VALIDATORS, NgControl, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, NG_VALIDATORS, NgControl, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, NgModel } from '@angular/forms';
 import { Subject, BehaviorSubject, timer, asyncScheduler, interval, takeUntil as takeUntil$1, of, ReplaySubject, delay } from 'rxjs';
 import { takeUntil, take, observeOn } from 'rxjs/operators';
 import * as i3 from '@angular/router';
@@ -2294,7 +2294,132 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
  */
 
 /*
- * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+const entityMap = new Map([
+    ['&', '&'],
+    ['<', '&lt;'],
+    ['>', '&gt;'],
+    ['"', '&quot;'],
+    ["'", '&#39;'],
+    ['/', '&#x2F;'],
+]);
+function escapeHtml(source) {
+    return source.replace(/[&<>"'/]/g, s => entityMap.get(s));
+}
+function escapeRegex(s) {
+    return String(s).replace(/[\\^$*+?.()|[\]{}]/g, '\\$&');
+}
+
+const NEGATIVE$1 = '-';
+const NUMBERS$1 = new Set(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']);
+function formatNumber(value, finalFormatting, decimalSeparator, groupingSeparator, decimalPlaces, autofillDecimals) {
+    let result = strip(value, finalFormatting, decimalSeparator, groupingSeparator, decimalPlaces);
+    /* add grouping separator */
+    const decimalIndex = result.indexOf(decimalSeparator);
+    const isNegative = result[0] === NEGATIVE$1;
+    let i = decimalIndex > -1 ? decimalIndex : result.length;
+    while (i > (isNegative ? 4 : 3)) {
+        i -= 3;
+        result = result.substring(0, i) + groupingSeparator + result.substring(i, result.length);
+    }
+    if (finalFormatting) {
+        if (decimalPlaces > 0 && !!result) {
+            /* autofill decimal places */
+            let actualDecimalIndex = result.indexOf(decimalSeparator);
+            if (autofillDecimals) {
+                if (actualDecimalIndex === -1) {
+                    actualDecimalIndex = result.length;
+                    result += decimalSeparator;
+                }
+                result = addMissingLeadingZero(result, actualDecimalIndex);
+                actualDecimalIndex = result.indexOf(decimalSeparator);
+                const actualDecimalPlaces = result.length - actualDecimalIndex - 1;
+                for (let j = 0; j < decimalPlaces - actualDecimalPlaces; j++) {
+                    result += '0';
+                }
+            }
+            else {
+                result = addMissingLeadingZero(result, actualDecimalIndex);
+            }
+        }
+    }
+    return result;
+}
+function addMissingLeadingZero(result, actualDecimalIndex) {
+    const isNegative = result[0] === NEGATIVE$1;
+    /* autoadd a zero before decimal separator, when it's missing */
+    if (actualDecimalIndex === 0) {
+        result = '0' + result;
+    }
+    /* autoadd a zero before decimal separator, when it's missing, for negative values */
+    if (actualDecimalIndex === 1 && isNegative) {
+        result = result[0] + '0' + result.substring(1, result.length);
+    }
+    return result;
+}
+function strip(value, removeLeadingZeros = false, decimalSeparator, groupingSeparator, decimalPlaces) {
+    const allowedKeys = new Set(NUMBERS$1);
+    allowedKeys.add(NEGATIVE$1);
+    allowedKeys.add(decimalSeparator);
+    let result = '';
+    let indexDecimalSep = -1;
+    let j = -1;
+    let ignoredChars = 0;
+    for (const char of value) {
+        j++;
+        if (allowedKeys.has(char)) {
+            if (char === decimalSeparator) {
+                if (decimalPlaces === 0) {
+                    /* dismiss content after a decimal separator, when no places allowed */
+                    break;
+                }
+                else if (indexDecimalSep > -1) {
+                    /* ignore subsequent decimal separators */
+                    continue;
+                }
+                indexDecimalSep = j;
+            }
+            if (char === '0' && removeLeadingZeros) {
+                /* remove leading zero only if it's not the only zero in the 'value' string */
+                if ((result.length === 0 && j + 1 !== value.length) || result === NEGATIVE$1) {
+                    ignoredChars++;
+                    continue;
+                }
+            }
+            if (char === NEGATIVE$1 && j > 0) {
+                /* dismiss content after a negative sign not on first position */
+                break;
+            }
+            if (indexDecimalSep > -1 && result.length + ignoredChars > indexDecimalSep + decimalPlaces) {
+                /* dismiss content after maximum decimal places reached */
+                break;
+            }
+            result += char;
+        }
+        else if (char === groupingSeparator) {
+            if (indexDecimalSep === -1) {
+                ignoredChars++;
+            }
+        }
+        else {
+            /* dismiss content after a invalid character */
+            break;
+        }
+    }
+    return result;
+}
+
+/*
+ * Copyright (c) 2018 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+/*
+ * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -2429,114 +2554,21 @@ class ClrNumericField {
         this.injectUnitSymbol();
     }
     handleInputChanged() {
-        this.updateInput(this.formatNumber(this._numericValue.toString().replace(new RegExp('[.]', 'g'), this.decimalSeparator), true), true);
+        this.updateInput(formatNumber(this._numericValue.toString().replace(new RegExp('[.]', 'g'), this.decimalSeparator), true, this.decimalSeparator, this.groupingSeparator, this.decimalPlaces, this.autofillDecimals), true);
     }
     formatInput(element, finalFormatting) {
         const cursorPos = element.selectionStart;
         const length = element.value.length;
         const setCursor = this.displayValue !== element.value;
-        this.updateInput(this.formatNumber(element.value, finalFormatting), false);
+        this.updateInput(formatNumber(element.value, finalFormatting, this.decimalSeparator, this.groupingSeparator, this.decimalPlaces, this.autofillDecimals), false);
         if (setCursor) {
             element.selectionStart = element.selectionEnd = Math.max(cursorPos + element.value.length - length, 0);
         }
     }
-    formatNumber(value, finalFormatting) {
-        let result = this.strip(value, finalFormatting);
-        /* add grouping separator */
-        const decimalIndex = result.indexOf(this.decimalSeparator);
-        const isNegative = result[0] === NEGATIVE;
-        let i = decimalIndex > -1 ? decimalIndex : result.length;
-        while (i > (isNegative ? 4 : 3)) {
-            i -= 3;
-            result = result.substring(0, i) + this.groupingSeparator + result.substring(i, result.length);
-        }
-        if (finalFormatting) {
-            if (this.decimalPlaces > 0 && !!result) {
-                /* autofill decimal places */
-                let actualDecimalIndex = result.indexOf(this.decimalSeparator);
-                if (this.autofillDecimals) {
-                    if (actualDecimalIndex === -1) {
-                        actualDecimalIndex = result.length;
-                        result += this.decimalSeparator;
-                    }
-                    result = this.addMissingLeadingZero(result, actualDecimalIndex);
-                    actualDecimalIndex = result.indexOf(this.decimalSeparator);
-                    const actualDecimalPlaces = result.length - actualDecimalIndex - 1;
-                    for (let j = 0; j < this.decimalPlaces - actualDecimalPlaces; j++) {
-                        result += '0';
-                    }
-                }
-                else {
-                    result = this.addMissingLeadingZero(result, actualDecimalIndex);
-                }
-            }
-        }
-        return result;
-    }
-    addMissingLeadingZero(result, actualDecimalIndex) {
-        const isNegative = result[0] === NEGATIVE;
-        /* autoadd a zero before decimal separator, when it's missing */
-        if (actualDecimalIndex === 0) {
-            result = '0' + result;
-        }
-        /* autoadd a zero before decimal separator, when it's missing, for negative values */
-        if (actualDecimalIndex === 1 && isNegative) {
-            result = result[0] + '0' + result.substring(1, result.length);
-        }
-        return result;
-    }
-    strip(value, removeLeadingZeros = false) {
-        let result = '';
-        let indexDecimalSep = -1;
-        let j = -1;
-        let ignoredChars = 0;
-        for (const char of value) {
-            j++;
-            if (this.allowedKeys.has(char)) {
-                if (char === this.decimalSeparator) {
-                    if (this.decimalPlaces === 0) {
-                        /* dismiss content after a decimal separator, when no places allowed */
-                        break;
-                    }
-                    else if (indexDecimalSep > -1) {
-                        /* ignore subsequent decimal separators */
-                        continue;
-                    }
-                    indexDecimalSep = j;
-                }
-                if (char === '0' && removeLeadingZeros) {
-                    /* remove leading zero only if it's not the only zero in the 'value' string */
-                    if ((result.length === 0 && j + 1 !== value.length) || result === NEGATIVE) {
-                        ignoredChars++;
-                        continue;
-                    }
-                }
-                if (char === NEGATIVE && j > 0) {
-                    /* dismiss content after a negative sign not on first position */
-                    break;
-                }
-                if (indexDecimalSep > -1 && result.length + ignoredChars > indexDecimalSep + this.decimalPlaces) {
-                    /* dismiss content after maximum decimal places reached */
-                    break;
-                }
-                result += char;
-            }
-            else if (char === this.groupingSeparator) {
-                if (indexDecimalSep === -1) {
-                    ignoredChars++;
-                }
-            }
-            else {
-                /* dismiss content after a invalid character */
-                break;
-            }
-        }
-        return result;
-    }
     updateInput(value, updateAsync) {
         this.displayValue = value;
         this.inputEl.nativeElement.value = value;
-        this._numericValue = parseFloat(this.strip(value).replace(this.decimalSeparator, '.'));
+        this._numericValue = parseFloat(strip(value, false, this.decimalSeparator, this.groupingSeparator, this.decimalPlaces).replace(this.decimalSeparator, '.'));
         if (this._numericValue !== this.roundOrTruncate(this.originalValue)) {
             this.originalValue = this._numericValue;
             if (updateAsync) {
@@ -5932,6 +5964,10 @@ class StatePersistenceKeyDirective {
         this.initFilter(volatileDataState);
         this.initSorting(localStorageState);
         this.initDatagridPersister();
+        const columnWidthPersistenceEnabled = this.options.persistColumnWidths ?? false;
+        if (columnWidthPersistenceEnabled) {
+            this.initColumnWidths(localStorageState);
+        }
         const paginationPersistenceEnabled = this.options.persistPagination ?? true;
         if (this.pagination?.page && paginationPersistenceEnabled) {
             this.initPageSizePersister(localStorageState);
@@ -5954,7 +5990,7 @@ class StatePersistenceKeyDirective {
         this.pagination.page.sizeChange.pipe(takeUntil(this.destroy$)).subscribe(pageSize => {
             const state = this.getLocalStorageState();
             state.pageSize = pageSize;
-            localStorage.setItem(this.options.key, JSON.stringify(state));
+            this.saveLocalStorageState(state);
         });
         /* init page size of datagrid if already persisted in local storage */
         if (savedState.pageSize) {
@@ -6000,6 +6036,20 @@ class StatePersistenceKeyDirective {
             });
         }
     }
+    initColumnWidths(savedState) {
+        const columnWidthsByField = savedState?.columns
+            ? Object.fromEntries(Object.entries(savedState.columns).map(([key, value]) => [key, value.width]))
+            : undefined;
+        if (this.gridColumns && this.gridColumnRefs && columnWidthsByField !== undefined) {
+            for (let i = 0; i < this.gridColumns.length; i++) {
+                const col = this.gridColumns.get(i);
+                const el = this.gridColumnRefs.get(i)?.nativeElement;
+                if ((col?.field && columnWidthsByField[col.field]) || el) {
+                    el.style.width = columnWidthsByField[col.field];
+                }
+            }
+        }
+    }
     initDatagridPersister() {
         // delay is needed, as onDestroy the filters emit empty values.
         // So delay it to the end of the current cycle, so the directive is also destroyed before it gets the next values
@@ -6015,6 +6065,9 @@ class StatePersistenceKeyDirective {
     persistFiltersAndCurrentPage(dgState) {
         const filterPersistenceEnabled = this.options.persistFilters ?? true;
         const paginationPersistenceEnabled = this.options.persistPagination ?? true;
+        if (!filterPersistenceEnabled && !paginationPersistenceEnabled) {
+            return;
+        }
         const state = this.getVolatileDataState();
         state.columns = state.columns || {};
         if (paginationPersistenceEnabled) {
@@ -6030,7 +6083,7 @@ class StatePersistenceKeyDirective {
                 }
             });
         }
-        (this.useLocalStoreOnly ? localStorage : sessionStorage).setItem(this.options.key, JSON.stringify(state));
+        this.saveVolatileDataState(state);
     }
     persistSorting(dgState) {
         const sortPersistenceEnabled = this.options.persistSort ?? true;
@@ -6038,7 +6091,23 @@ class StatePersistenceKeyDirective {
             const state = this.getLocalStorageState();
             state.sortBy = this.getSortProperty(dgState.sort?.by);
             state.sortReverse = dgState.sort?.reverse;
-            localStorage.setItem(this.options.key, JSON.stringify(state));
+            this.saveLocalStorageState(state);
+        }
+    }
+    persistColumnWidths() {
+        const columnWidthPersistenceEnabled = this.options?.persistColumnWidths ?? false;
+        if (columnWidthPersistenceEnabled) {
+            const state = this.getLocalStorageState();
+            state.columns = state.columns || {};
+            for (let i = 0; i < this.gridColumns.length; i++) {
+                const col = this.gridColumns.get(i);
+                const el = this.gridColumnRefs.get(i)?.nativeElement;
+                if (el?.style?.width && el.style.width !== '0px' && col?.field) {
+                    state.columns[col.field] ||= {};
+                    state.columns[col.field].width = el.style.width;
+                }
+            }
+            this.saveLocalStorageState(state);
         }
     }
     /**
@@ -6068,11 +6137,23 @@ class StatePersistenceKeyDirective {
      * Gets the state of volatile data. This can be influenced by clrUseLocalStoreOnly.
      */
     getVolatileDataState() {
-        return JSON.parse((this.useLocalStoreOnly ? localStorage : sessionStorage).getItem(this.options.key)) || {};
+        return JSON.parse(this.getStorageBasedOnInputFlag().getItem(this.options.key)) || {};
     }
     getLocalStorageState() {
         return JSON.parse(localStorage.getItem(this.options.key)) || {};
     }
+    /**
+     * Save the state of volatile data. This can be influenced by clrUseLocalStoreOnly.
+     */
+    saveVolatileDataState(state) {
+        this.getStorageBasedOnInputFlag().setItem(this.options.key, JSON.stringify(state));
+    }
+    saveLocalStorageState(state) {
+        localStorage.setItem(this.options.key, JSON.stringify(state));
+    }
+    getStorageBasedOnInputFlag() {
+        return this.useLocalStoreOnly ? localStorage : sessionStorage;
+    }
     /**
      * As a date is serialized as string, but not deserialized as date
      * we need to add some meta information to do that manually later
@@ -6118,11 +6199,12 @@ class StatePersistenceKeyDirective {
         return undefined;
     }
     ngOnDestroy() {
+        this.persistColumnWidths();
         this.destroy$.next();
         this.destroy$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: StatePersistenceKeyDirective, deps: [{ token: i2.ClrDatagrid }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: StatePersistenceKeyDirective, selector: "[clrStatePersistenceKey]", inputs: { options: ["clrStatePersistenceKey", "options"], useLocalStoreOnly: ["clrUseLocalStoreOnly", "useLocalStoreOnly"], paginationDescription: ["clrPaginationDescription", "paginationDescription"] }, queries: [{ propertyName: "pagination", first: true, predicate: ClrDatagridPagination, descendants: true }, { propertyName: "paginationElem", first: true, predicate: ClrDatagridPagination, descendants: true, read: ElementRef }, { propertyName: "customFilters", predicate: ClrDatagridFilter, descendants: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: StatePersistenceKeyDirective, selector: "[clrStatePersistenceKey]", inputs: { options: ["clrStatePersistenceKey", "options"], useLocalStoreOnly: ["clrUseLocalStoreOnly", "useLocalStoreOnly"], paginationDescription: ["clrPaginationDescription", "paginationDescription"] }, host: { listeners: { "window:beforeunload": "persistColumnWidths()" } }, queries: [{ propertyName: "pagination", first: true, predicate: ClrDatagridPagination, descendants: true }, { propertyName: "paginationElem", first: true, predicate: ClrDatagridPagination, descendants: true, read: ElementRef }, { propertyName: "customFilters", predicate: ClrDatagridFilter, descendants: true }, { propertyName: "gridColumnRefs", predicate: ClrDatagridColumn, read: ElementRef }, { propertyName: "gridColumns", predicate: ClrDatagridColumn }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: StatePersistenceKeyDirective, decorators: [{
             type: Directive,
@@ -6147,6 +6229,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }], customFilters: [{
                 type: ContentChildren,
                 args: [ClrDatagridFilter, { descendants: true }]
+            }], gridColumnRefs: [{
+                type: ContentChildren,
+                args: [ClrDatagridColumn, { read: ElementRef }]
+            }], gridColumns: [{
+                type: ContentChildren,
+                args: [ClrDatagridColumn]
+            }], persistColumnWidths: [{
+                type: HostListener,
+                args: ['window:beforeunload']
             }] } });
 
 class ColumnHiddenStatePersistenceDirective {
@@ -8841,6 +8932,164 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 }]
         }] });
 
+class ClrReadonlyDirective {
+    constructor(elementRef, renderer, injector) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.injector = injector;
+        this.isMultiSelect = false;
+        this.unitPosition = 'right';
+        this.property = null;
+        this.clrReadOnly = true;
+        this.unit = '';
+        this.decimalPlaces = 2;
+        this.roundValue = false;
+        this.autofillDecimals = false;
+        this.decimalSeparator = ',';
+        this.groupingSeparator = '.';
+        this.isInitialized = false;
+    }
+    ngOnInit() {
+        const ngControl = this.injector.get(NgControl, null);
+        if (this.clrReadOnly) {
+            this.renderAsSpan(ngControl);
+        }
+    }
+    ngOnChanges() {
+        if (this.isInitialized) {
+            const ngControl = this.injector.get(NgControl, null);
+            if (this.clrReadOnly) {
+                this.renderAsSpan(ngControl);
+            }
+            else {
+                this.resetReadonly();
+            }
+        }
+    }
+    ngAfterViewInit() {
+        this.isInitialized = true;
+    }
+    resetReadonly() {
+        const parentElement = this.elementRef.nativeElement.parentElement;
+        this.renderer.removeClass(parentElement, 'clr-readonly-parent');
+        const spanElement = this.elementRef.nativeElement.parentElement.querySelector('span.clr-readonly');
+        if (spanElement != null) {
+            this.renderer.removeChild(parentElement, spanElement);
+        }
+    }
+    renderAsSpan(ngControl) {
+        const parentElement = this.elementRef.nativeElement.parentElement;
+        if (!parentElement) {
+            return;
+        }
+        // Create a new span element to display the readonly value.
+        const span = this.renderer.createElement('span');
+        const formattedValue = this.formatControlValue(ngControl);
+        const textNode = this.renderer.createText(formattedValue);
+        // Add text and classes to the span element.
+        this.renderer.appendChild(span, textNode);
+        this.renderer.setAttribute(span, 'class', 'clr-readonly');
+        this.renderer.addClass(parentElement, 'clr-readonly-parent');
+        this.renderer.appendChild(parentElement, span);
+    }
+    determineControlType() {
+        if (this.elementRef.nativeElement.attributes['clrnumeric']) {
+            return 'numeric';
+        }
+        else if (this.elementRef.nativeElement.tagName.toLowerCase() === 'select') {
+            return 'select';
+        }
+        else {
+            return '';
+        }
+    }
+    formatControlValue(ngControl) {
+        const controlType = this.determineControlType();
+        const controlValue = ngControl instanceof NgModel ? ngControl.model : ngControl.control?.value;
+        if (controlValue == null || controlValue === '') {
+            return '';
+        }
+        if (controlType === 'numeric') {
+            return this.formatNumericValue(controlValue);
+        }
+        else if (this.isMultiSelect) {
+            return this.formatMultiSelectValue(controlValue);
+        }
+        else if (controlType === 'select') {
+            return this.formatListValue(controlValue);
+        }
+        return controlValue ?? '';
+    }
+    formatNumericValue(controlValue) {
+        const result = formatNumber(controlValue + '', true, this.decimalSeparator, this.groupingSeparator, this.decimalPlaces, this.autofillDecimals);
+        return this.unitPosition === 'left' ? `${this.unit} ${result}` : `${result} ${this.unit}`;
+    }
+    formatMultiSelectValue(controlValue) {
+        return controlValue.map((item) => item[this.property]).join(', ');
+    }
+    formatListValue(controlValue) {
+        const options = this.elementRef.nativeElement.querySelectorAll('option');
+        const matchingOption = Array.from(options).find(option => option.value === controlValue);
+        if (matchingOption) {
+            return matchingOption.innerHTML;
+        }
+        else {
+            return '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrReadonlyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: ClrReadonlyDirective, selector: "[clrReadonly]", inputs: { isMultiSelect: ["clrMulti", "isMultiSelect"], unitPosition: ["clrUnitPosition", "unitPosition"], property: ["clrReadOnlyProperty", "property"], clrReadOnly: ["clrReadonly", "clrReadOnly"], unit: ["clrUnit", "unit"], decimalPlaces: ["clrDecimalPlaces", "decimalPlaces"], roundValue: ["clrRoundDisplayValue", "roundValue"], autofillDecimals: ["clrAutofillDecimals", "autofillDecimals"], decimalSeparator: ["clrDecimalSep", "decimalSeparator"], groupingSeparator: ["clrGroupingSep", "groupingSeparator"] }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrReadonlyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clrReadonly]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }], propDecorators: { isMultiSelect: [{
+                type: Input,
+                args: ['clrMulti']
+            }], unitPosition: [{
+                type: Input,
+                args: ['clrUnitPosition']
+            }], property: [{
+                type: Input,
+                args: ['clrReadOnlyProperty']
+            }], clrReadOnly: [{
+                type: Input,
+                args: ['clrReadonly']
+            }], unit: [{
+                type: Input,
+                args: ['clrUnit']
+            }], decimalPlaces: [{
+                type: Input,
+                args: ['clrDecimalPlaces']
+            }], roundValue: [{
+                type: Input,
+                args: ['clrRoundDisplayValue']
+            }], autofillDecimals: [{
+                type: Input,
+                args: ['clrAutofillDecimals']
+            }], decimalSeparator: [{
+                type: Input,
+                args: ['clrDecimalSep']
+            }], groupingSeparator: [{
+                type: Input,
+                args: ['clrGroupingSep']
+            }] } });
+
+class ClrReadonlyDirectiveModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrReadonlyDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: ClrReadonlyDirectiveModule, declarations: [ClrReadonlyDirective], exports: [ClrReadonlyDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrReadonlyDirectiveModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrReadonlyDirectiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ClrReadonlyDirective],
+                    exports: [ClrReadonlyDirective],
+                }]
+        }] });
+
 /*
  * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
@@ -8880,7 +9129,8 @@ class ClrAddonsModule {
             ClrDateFilterModule,
             ClrDaterangepickerModule,
             ClrIfWarningModule,
-            ClrActionPanelModule] }); }
+            ClrActionPanelModule,
+            ClrReadonlyDirectiveModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrAddonsModule, imports: [ClrViewEditSectionModule,
             ClrPagerModule,
             ClrDotPagerModule,
@@ -8913,7 +9163,8 @@ class ClrAddonsModule {
             ClrDateFilterModule,
             ClrDaterangepickerModule,
             ClrIfWarningModule,
-            ClrActionPanelModule] }); }
+            ClrActionPanelModule,
+            ClrReadonlyDirectiveModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ClrAddonsModule, decorators: [{
             type: NgModule,
@@ -8952,32 +9203,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         ClrDaterangepickerModule,
                         ClrIfWarningModule,
                         ClrActionPanelModule,
+                        ClrReadonlyDirectiveModule,
                     ],
                 }]
         }] });
 
 /*
- * Copyright (c) 2018 Porsche Informatik. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-const entityMap = new Map([
-    ['&', '&amp;'],
-    ['<', '&lt;'],
-    ['>', '&gt;'],
-    ['"', '&quot;'],
-    ["'", '&#39;'],
-    ['/', '&#x2F;'],
-]);
-function escapeHtml(source) {
-    return source.replace(/[&<>"'/]/g, s => entityMap.get(s));
-}
-function escapeRegex(s) {
-    return String(s).replace(/[\\^$*+?.()|[\]{}]/g, '\\$&');
-}
-
-/*
- * Copyright (c) 2018 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -8992,5 +9224,5 @@ function escapeRegex(s) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACShape, AcceptanceDateShape, AcceptedBrands, AccessoriesShape, AccessoryPartsShape, AudiBrandShape, AwardWinnerPremiumShape, BIG_ENDIAN, BlocksGroupForwardShape, BrochureShape, BundleForwardShape, BusinessCustomersCommercialShape, BusinessCustomersPrivateShape, BusinessPartnerWithCar, CLR_BLANK_OPTION, CONTENT_PROVIDER, CalculatorForwardShape, CaliforniaServiceShape, CaliforniaSpecialistShape, CampaignOutdatedShape, CampaignShape, CarOffSite, CarOnSite, CarPickupServiceShape, CarWashShape, CertifiedRepairShape, CertifiedRetailerShape, ClrActionPanel, ClrActionPanelContainer, ClrActionPanelContainerContent, ClrActionPanelContainerFooter, ClrActionPanelModule, ClrActiveNotification, ClrAddonsIconShapes, ClrAddonsLabel, ClrAddonsModule, ClrAutocompleteOff, ClrAutocompleteOffModule, ClrBackButton, ClrBackButtonModule, ClrBrandAvatar, ClrBrandAvatarModule, ClrBreadcrumb, ClrBreadcrumbModule, ClrBreadcrumbService, ClrCollapseExpandSection, ClrCollapseExpandSectionModule, ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter, ClrContentPanelModule, ClrContentRef, ClrDataListPredefinedValidatorDirective, ClrDataListValidatorModule, ClrDataListValidators, ClrDatagridStatePersistenceModule, ClrDateFilterComponent, ClrDateFilterModule, ClrDateTimeContainer, ClrDateTimeModule, ClrDaterangeMaxValidator, ClrDaterangeMinValidator, ClrDaterangeOrderValidator, ClrDaterangeRequiredValidator, ClrDaterangepickerContainerComponent, ClrDaterangepickerDirective, ClrDaterangepickerModule, ClrDotPager, ClrDotPagerModule, ClrDropdownOverflowDirective, ClrDropdownOverflowModule, ClrEnumFilterComponent, ClrEnumFilterModule, ClrFlowBar, ClrFlowBarModule, ClrFormModule, ClrGenericQuickList, ClrGenericQuickListModule, ClrHistory, ClrHistoryModule, ClrHistoryPinned, ClrHistoryService, ClrIfDaterangeErrorDirective, ClrIfWarning, ClrIfWarningModule, ClrLetterAvatar, ClrLetterAvatarModule, ClrLocationBarModule, ClrMainNavGroup, ClrMainNavGroupItem, ClrMainNavGroupModule, ClrMaxNumeric, ClrMinNumeric, ClrMultilingualInput, ClrMultilingualInputValidators, ClrMultilingualModule, ClrMultilingualSelector, ClrMultilingualTextarea, ClrNotification, ClrNotificationModule, ClrNotificationRef, ClrNotificationService, ClrNumericField, ClrNumericFieldModule, ClrNumericFieldValidators, ClrPagedSearchResultList, ClrPagedSearchResultListModule, ClrPager, ClrPagerModule, ClrProgressSpinnerComponent, ClrProgressSpinnerModule, ClrQuickList, ClrQuickListModule, ClrRequiredAllMultilang, ClrRequiredOneMultilang, ClrSearchField, ClrSearchFieldModule, ClrTimeInput, ClrTreetable, ClrTreetableActionOverflow, ClrTreetableCell, ClrTreetableColumn, ClrTreetableModule, ClrTreetablePlaceholder, ClrTreetableRow, ClrViewEditSection, ClrViewEditSectionModule, ColumnHiddenStatePersistenceDirective, CompletedByDateShape, ConfiguratorCommercialShape, ConfiguratorPrivateShape, ConsumptionShape, ContactDealerShape, CupraBrandShape, CustomersCenterShape, DATE, DELIMITER_REGEX, DWABrandShape, DatagridFieldDirective, DayModel, DieselShape, DollarBillForwardShape, DollarBillPartialShape, DriversAssistanceShape, EfficiencyShape, ElectricCarsServiceShape, ElectricCarsShape, ElectricityShape, EmissionShape, EnergyShape, EngineShape, ExpressServiceShape, ExteriorShape, ExternalPartForwardShape, FindACarShape, FleetServiceCommercialShape, FleetServicePrivateShape, GasCarsServiceShape, GasShape, HISTORY_NOTIFICATION_URL_PROVIDER, HISTORY_PROVIDER, HistoryProvider, HybridShape, InternalPartForwardShape, InvoiceReadyShape, InvoiceShape, ItemsForwardShape, ItemsReceiveShape, LITTLE_ENDIAN, LITTLE_ENDIAN_REGEX, LoadingVolumeShape, LocateShape, LocationBarComponent, LocationBarContentProvider, LocationBarNode, MIDDLE_ENDIAN, MIDDLE_ENDIAN_REGEX, MONTH, NewCarCommercialShape, NewCarPrivateShape, NewCarUtilityVehicleShape, NightServiceShape, NodeId, OffersShape, OnCallDutyShape, OpenSatShape, PaintMaterialForwardShape, PaintMaterialShape, PaintShopShape, ParkingLocation, PartNonStockForwardShape, PartsForwardShape, PartsNonStockShape, PartsShape, PayloadShape, PerformanceShape, PetrolShape, PlusServiceShape, PopoverPositions, PorscheBrandShape, PowerShape, PowerTrainShape, PriceTypeSwitchShape, QualifiedWorkshopShape, RepeatRepairShape, ReturnDateShape, RoadsideAssistanceShape, RouteShape, SEPARATOR_TEXT_DEFAULT, SeatAirShape, SeatBrandShape, SeatShape, ServiceBellShape, ServiceShape, SizeShape, SkodaBrandShape, StatePersistenceKeyDirective, StockLocatorCommercialShape, StockLocatorPrivateShape, TRANSLATIONS, TaskAndAppointment, TaxiDealerShape, TextForward, TimeModel, TopcardShape, TouaregServiceShape, TransmissionAutomaticShape, TransmissionManualShape, TreetableCellRenderer, TreetableHeaderRenderer, TreetableMainRenderer, TreetableRowRenderer, USER_INPUT_REGEX, UsedCarCommercialShape, UsedCarPrivateShape, VWBrandShape, VWNBrandShape, VWShape, VehicleConversionShape, View360Shape, VinShape, VirtualRealityShape, VsfSearchShape, WCPShape, WheelToWheelShape, WindscreenWashShape, WrenchForward, YEAR, acceptanceDateIcon, accessoriesIcon, accessoryPartsIcon, airConditionerIcon, allIcons, audiBrandIcon, awardWinnerPremiumIcon, blocksGroupForwardIcon, brochureIcon, bundleForwardIcon, businessCustomersCommercialIcon, businessCustomersPrivateIcon, businessPartnerWithCarIcon, calculatorForwardIcon, californiaServiceIcon, californiaSpecialistIcon, campaignIcon, campaignOutdatedIcon, carOffSite, carOnSite, carPickupServiceIcon, carWashIcon, certifiedRepairIcon, certifiedRetailerIcon, clrIconSVG, completedByDateIcon, configuratorCommercialIcon, configuratorPrivateIcon, consumptionIcon, contactDealerIcon, cupraBrandIcon, customersCenterIcon, dieselIcon, dollarBillForwardIcon, dollarBillPartialIcon, driversAssistanceIcon, dwaBrandIcon, efficiencyIcon, electricCarsIcon, electricCarsServiceIcon, electricityIcon, emissionIcon, energyIcon, engineIcon, escapeHtml, escapeRegex, expressServiceIcon, exteriorIcon, externalPartForwardIcon, findACarIcon, fleetServiceCommercialIcon, fleetServicePrivateIcon, gasCarsServiceIcon, gasIcon, hybridIcon, internalPartForwardIcon, invoiceIcon, invoiceReadyIcon, itemsForwardIcon, itemsRecieveIcon, loadingVolumeIcon, locateIcon, newCarCommercialIcon, newCarPrivateIcon, newCarUtilityVehicleIcon, nightServiceIcon, offersIcon, onCallDutyIcon, openSatIcon, paintMaterialForwardIcon, paintMaterialIcon, paintShopIcon, parkingLocationIcon, partsForwardIcon, partsIcon, partsNonStockForwardIcon, partsNonStockIcon, payloadIcon, performanceIcon, petrolIcon, plusServiceIcon, porscheBrandIcon, powerIcon, powerTrainIcon, priceTypeSwitchIcon, qualifiedWorkshopIcon, repeatRepairIcon, returnDateIcon, roadsideAssistanceIcon, routeIcon, seatAirIcon, seatBrandIcon, seatIcon, serviceBellIcon, serviceIcon, sizeIcon, skodaBrandIcon, stockLocatorCommercialIcon, stockLocatorPrivateIcon, taskAndAppointmentIcon, taxiDealerIcon, textForwardIcon, topcardIcon, touaregServiceIcon, transmissionAutomaticIcon, transmissionManualIcon, usedCarCommercialIcon, usedCarPrivateIcon, vehicleConversionIcon, view360Icon, vinIcon, virtualRealityIcon, volkswagenIcon, vsfSearchIcon, vwBrandIcon, vwnBrandIcon, wcpIcon, wheelToWheelIcon, windscreenWashIcon, wrenchForwardIcon };
+export { ACShape, AcceptanceDateShape, AcceptedBrands, AccessoriesShape, AccessoryPartsShape, AudiBrandShape, AwardWinnerPremiumShape, BIG_ENDIAN, BlocksGroupForwardShape, BrochureShape, BundleForwardShape, BusinessCustomersCommercialShape, BusinessCustomersPrivateShape, BusinessPartnerWithCar, CLR_BLANK_OPTION, CONTENT_PROVIDER, CalculatorForwardShape, CaliforniaServiceShape, CaliforniaSpecialistShape, CampaignOutdatedShape, CampaignShape, CarOffSite, CarOnSite, CarPickupServiceShape, CarWashShape, CertifiedRepairShape, CertifiedRetailerShape, ClrActionPanel, ClrActionPanelContainer, ClrActionPanelContainerContent, ClrActionPanelContainerFooter, ClrActionPanelModule, ClrActiveNotification, ClrAddonsIconShapes, ClrAddonsLabel, ClrAddonsModule, ClrAutocompleteOff, ClrAutocompleteOffModule, ClrBackButton, ClrBackButtonModule, ClrBrandAvatar, ClrBrandAvatarModule, ClrBreadcrumb, ClrBreadcrumbModule, ClrBreadcrumbService, ClrCollapseExpandSection, ClrCollapseExpandSectionModule, ClrContentPanel, ClrContentPanelContainer, ClrContentPanelContainerContent, ClrContentPanelContainerFooter, ClrContentPanelModule, ClrContentRef, ClrDataListPredefinedValidatorDirective, ClrDataListValidatorModule, ClrDataListValidators, ClrDatagridStatePersistenceModule, ClrDateFilterComponent, ClrDateFilterModule, ClrDateTimeContainer, ClrDateTimeModule, ClrDaterangeMaxValidator, ClrDaterangeMinValidator, ClrDaterangeOrderValidator, ClrDaterangeRequiredValidator, ClrDaterangepickerContainerComponent, ClrDaterangepickerDirective, ClrDaterangepickerModule, ClrDotPager, ClrDotPagerModule, ClrDropdownOverflowDirective, ClrDropdownOverflowModule, ClrEnumFilterComponent, ClrEnumFilterModule, ClrFlowBar, ClrFlowBarModule, ClrFormModule, ClrGenericQuickList, ClrGenericQuickListModule, ClrHistory, ClrHistoryModule, ClrHistoryPinned, ClrHistoryService, ClrIfDaterangeErrorDirective, ClrIfWarning, ClrIfWarningModule, ClrLetterAvatar, ClrLetterAvatarModule, ClrLocationBarModule, ClrMainNavGroup, ClrMainNavGroupItem, ClrMainNavGroupModule, ClrMaxNumeric, ClrMinNumeric, ClrMultilingualInput, ClrMultilingualInputValidators, ClrMultilingualModule, ClrMultilingualSelector, ClrMultilingualTextarea, ClrNotification, ClrNotificationModule, ClrNotificationRef, ClrNotificationService, ClrNumericField, ClrNumericFieldModule, ClrNumericFieldValidators, ClrPagedSearchResultList, ClrPagedSearchResultListModule, ClrPager, ClrPagerModule, ClrProgressSpinnerComponent, ClrProgressSpinnerModule, ClrQuickList, ClrQuickListModule, ClrReadonlyDirective, ClrReadonlyDirectiveModule, ClrRequiredAllMultilang, ClrRequiredOneMultilang, ClrSearchField, ClrSearchFieldModule, ClrTimeInput, ClrTreetable, ClrTreetableActionOverflow, ClrTreetableCell, ClrTreetableColumn, ClrTreetableModule, ClrTreetablePlaceholder, ClrTreetableRow, ClrViewEditSection, ClrViewEditSectionModule, ColumnHiddenStatePersistenceDirective, CompletedByDateShape, ConfiguratorCommercialShape, ConfiguratorPrivateShape, ConsumptionShape, ContactDealerShape, CupraBrandShape, CustomersCenterShape, DATE, DELIMITER_REGEX, DWABrandShape, DatagridFieldDirective, DayModel, DieselShape, DollarBillForwardShape, DollarBillPartialShape, DriversAssistanceShape, EfficiencyShape, ElectricCarsServiceShape, ElectricCarsShape, ElectricityShape, EmissionShape, EnergyShape, EngineShape, ExpressServiceShape, ExteriorShape, ExternalPartForwardShape, FindACarShape, FleetServiceCommercialShape, FleetServicePrivateShape, GasCarsServiceShape, GasShape, HISTORY_NOTIFICATION_URL_PROVIDER, HISTORY_PROVIDER, HistoryProvider, HybridShape, InternalPartForwardShape, InvoiceReadyShape, InvoiceShape, ItemsForwardShape, ItemsReceiveShape, LITTLE_ENDIAN, LITTLE_ENDIAN_REGEX, LoadingVolumeShape, LocateShape, LocationBarComponent, LocationBarContentProvider, LocationBarNode, MIDDLE_ENDIAN, MIDDLE_ENDIAN_REGEX, MONTH, NewCarCommercialShape, NewCarPrivateShape, NewCarUtilityVehicleShape, NightServiceShape, NodeId, OffersShape, OnCallDutyShape, OpenSatShape, PaintMaterialForwardShape, PaintMaterialShape, PaintShopShape, ParkingLocation, PartNonStockForwardShape, PartsForwardShape, PartsNonStockShape, PartsShape, PayloadShape, PerformanceShape, PetrolShape, PlusServiceShape, PopoverPositions, PorscheBrandShape, PowerShape, PowerTrainShape, PriceTypeSwitchShape, QualifiedWorkshopShape, RepeatRepairShape, ReturnDateShape, RoadsideAssistanceShape, RouteShape, SEPARATOR_TEXT_DEFAULT, SeatAirShape, SeatBrandShape, SeatShape, ServiceBellShape, ServiceShape, SizeShape, SkodaBrandShape, StatePersistenceKeyDirective, StockLocatorCommercialShape, StockLocatorPrivateShape, TRANSLATIONS, TaskAndAppointment, TaxiDealerShape, TextForward, TimeModel, TopcardShape, TouaregServiceShape, TransmissionAutomaticShape, TransmissionManualShape, TreetableCellRenderer, TreetableHeaderRenderer, TreetableMainRenderer, TreetableRowRenderer, USER_INPUT_REGEX, UsedCarCommercialShape, UsedCarPrivateShape, VWBrandShape, VWNBrandShape, VWShape, VehicleConversionShape, View360Shape, VinShape, VirtualRealityShape, VsfSearchShape, WCPShape, WheelToWheelShape, WindscreenWashShape, WrenchForward, YEAR, acceptanceDateIcon, accessoriesIcon, accessoryPartsIcon, airConditionerIcon, allIcons, audiBrandIcon, awardWinnerPremiumIcon, blocksGroupForwardIcon, brochureIcon, bundleForwardIcon, businessCustomersCommercialIcon, businessCustomersPrivateIcon, businessPartnerWithCarIcon, calculatorForwardIcon, californiaServiceIcon, californiaSpecialistIcon, campaignIcon, campaignOutdatedIcon, carOffSite, carOnSite, carPickupServiceIcon, carWashIcon, certifiedRepairIcon, certifiedRetailerIcon, clrIconSVG, completedByDateIcon, configuratorCommercialIcon, configuratorPrivateIcon, consumptionIcon, contactDealerIcon, cupraBrandIcon, customersCenterIcon, dieselIcon, dollarBillForwardIcon, dollarBillPartialIcon, driversAssistanceIcon, dwaBrandIcon, efficiencyIcon, electricCarsIcon, electricCarsServiceIcon, electricityIcon, emissionIcon, energyIcon, engineIcon, escapeHtml, escapeRegex, expressServiceIcon, exteriorIcon, externalPartForwardIcon, findACarIcon, fleetServiceCommercialIcon, fleetServicePrivateIcon, formatNumber, gasCarsServiceIcon, gasIcon, hybridIcon, internalPartForwardIcon, invoiceIcon, invoiceReadyIcon, itemsForwardIcon, itemsRecieveIcon, loadingVolumeIcon, locateIcon, newCarCommercialIcon, newCarPrivateIcon, newCarUtilityVehicleIcon, nightServiceIcon, offersIcon, onCallDutyIcon, openSatIcon, paintMaterialForwardIcon, paintMaterialIcon, paintShopIcon, parkingLocationIcon, partsForwardIcon, partsIcon, partsNonStockForwardIcon, partsNonStockIcon, payloadIcon, performanceIcon, petrolIcon, plusServiceIcon, porscheBrandIcon, powerIcon, powerTrainIcon, priceTypeSwitchIcon, qualifiedWorkshopIcon, repeatRepairIcon, returnDateIcon, roadsideAssistanceIcon, routeIcon, seatAirIcon, seatBrandIcon, seatIcon, serviceBellIcon, serviceIcon, sizeIcon, skodaBrandIcon, stockLocatorCommercialIcon, stockLocatorPrivateIcon, strip, taskAndAppointmentIcon, taxiDealerIcon, textForwardIcon, topcardIcon, touaregServiceIcon, transmissionAutomaticIcon, transmissionManualIcon, usedCarCommercialIcon, usedCarPrivateIcon, vehicleConversionIcon, view360Icon, vinIcon, virtualRealityIcon, volkswagenIcon, vsfSearchIcon, vwBrandIcon, vwnBrandIcon, wcpIcon, wheelToWheelIcon, windscreenWashIcon, wrenchForwardIcon };
 //# sourceMappingURL=clr-addons.mjs.map