@datarailsshared/datarailsshared 1.5.284 → 1.5.286

package/fesm2022/datarailsshared-datarailsshared.mjs

@@ -8,7 +8,7 @@ import { MAT_DATE_FORMATS, DateAdapter, MAT_DATE_LOCALE, MatNativeDateModule } f
 import moment from 'moment';
 import * as i1$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { Observable, BehaviorSubject, Subject, noop as noop$2, from, merge as merge$1, fromEvent, throwError } from 'rxjs';
+import { Observable, BehaviorSubject, Subject, noop as noop$3, from, merge as merge$1, fromEvent, throwError } from 'rxjs';
 import * as _ from 'lodash';
 import { find, reduce, isObject, isNil, map, isNumber, merge, forEach, some, orderBy, cloneDeep, filter as filter$1, includes, indexOf, pull, concat, isString, isBoolean } from 'lodash';
 import { skip, takeUntil, debounceTime, filter, distinctUntilChanged, startWith, switchMap, first, catchError, tap, finalize } from 'rxjs/operators';
@@ -21,6 +21,7 @@ import { ComponentPortal } from '@angular/cdk/portal';
 import * as i3 from '@ng-select/ng-select';
 import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
 import * as i1$5 from '@angular/platform-browser';
+import * as CodeMirror from 'codemirror';
 import * as i2 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i1$6 from '@angular/material/legacy-dialog';
@@ -28,6 +29,10 @@ import { MAT_LEGACY_DIALOG_DATA, MatLegacyDialogModule, MatLegacyDialogRef } fro
 import * as i1$7 from 'ngx-toastr';
 import { Toast, ToastrModule } from 'ngx-toastr';
 import { MatLegacyTooltipModule } from '@angular/material/legacy-tooltip';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/addon/hint/show-hint';
+import '@codemirror/autocomplete';
 
 class AnyTagComponent {
     constructor() {
@@ -194,6 +199,9 @@ class DrSharedUtils {
             resizeObserver.disconnect();
         };
     }); }
+    static { this.normalizeLineEndings = (str) => {
+        return str ? str.replace(/\r\n|\r/g, '\n') : str;
+    }; }
 }
 
 class DrDatePickerService {
@@ -1029,7 +1037,8 @@ class DrDatePickerCustomHeaderComponent {
         this.calendarView = CalendarView;
         _calendar.stateChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this.setPeriodLabels());
         this.datePickerService.format$.pipe(takeUntil(this._destroyed)).subscribe(value => {
-            this.selectedTimeframe = this.timeframeOptions.filter(option => option.format === value)[0].value;
+            const timeframe = this.datePickerService.getTimeframe(value);
+            this.selectedTimeframe = this.timeframeOptions.filter(option => option.timeframe === timeframe)[0].value;
             _calendar.currentView = this.selectedTimeframe;
             this.setPeriodLabels();
             if (this.selectedTimeframe === CalendarView.FOR_QUARTERS) {
@@ -1189,7 +1198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['drDatePickerFormat']
             }] } });
 
-const noop$1 = () => {
+const noop$2 = () => {
 };
 class DrDatePickerComponent {
     set min(minDate) {
@@ -1226,8 +1235,8 @@ class DrDatePickerComponent {
         this.timeframeOption = TimeframeOption;
         this.innerValue = null;
         this.destroyed$ = new Subject();
-        this.onTouchedCallback = noop$1;
-        this.onChangeCallback = noop$1;
+        this.onTouchedCallback = noop$2;
+        this.onChangeCallback = noop$2;
         // Should be as arrow function to avoid lose scope
         this.dateFilter = (moment) => {
             if (this.datepickerFilter && moment) {
@@ -1251,7 +1260,17 @@ class DrDatePickerComponent {
     }
     ngOnChanges(changes) {
         if (changes.format?.currentValue && changes.format.currentValue !== changes.format.previousValue) {
-            this.datePickerService.updateTimeframeAndFormat(changes.format.currentValue);
+            let timeframe;
+            let format = this.datePickerService.getConfiguredFormat(this.format);
+            if (format) {
+                timeframe = this.format;
+            }
+            else {
+                format = this.datePickerService.normalizeValue(this.format);
+                timeframe = this.datePickerService.getTimeframe(format);
+            }
+            this.datePickerService.timeframe = timeframe;
+            this.datePickerService.format$.next(format);
         }
     }
     /**
@@ -2262,8 +2281,8 @@ class DrInputComponent {
         this.clearHandler = new EventEmitter();
         this.buttonHandler = new EventEmitter();
         this.tabindex = -1;
-        this.onChangeCallback = noop$2;
-        this.onTouchedCallback = noop$2;
+        this.onChangeCallback = noop$3;
+        this.onTouchedCallback = noop$3;
         this.onChange = () => {
         };
         this.onTouched = () => {
@@ -3217,6 +3236,11 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
             });
         }
     }
+    ngOnChanges(changes) {
+        if (changes.format?.currentValue && changes.format.currentValue !== changes.format.previousValue) {
+            this.datePickerService.updateTimeframeAndFormat(changes.format.currentValue);
+        }
+    }
     pagingClicked(forward) {
         if (this.pagingSetup[this.datePickerService.timeframe]) {
             const nextValue = this.pagingSetup[this.datePickerService.timeframe](forward);
@@ -3268,7 +3292,7 @@ class DrDatePickerWithTimeframeComponent extends DrDatePickerComponent {
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrDatePickerWithTimeframeComponent, selector: "dr-date-picker-with-timeframe", inputs: { isDashboardDatepicker: "isDashboardDatepicker", dateFormatConfig: "dateFormatConfig", canSelectTimeframe: "canSelectTimeframe", availableTimeframes: "availableTimeframes", paginationDebounce: "paginationDebounce", isUsingDateTagPresets: "isUsingDateTagPresets", presetTag: "presetTag" }, outputs: { onChangeFormat: "onChangeFormat", onChangePresetTag: "onChangePresetTag" }, host: { properties: { "class.dr-date-picker-on-dashboard": "this.isDashboardClassDisplayed" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: DrDatePickerWithTimeframeComponent, multi: true },
             { provide: DrDatePickerService }
-        ], usesInheritance: true, ngImport: i0, template: "<dr-button [disabled]=\"isPrevDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-left\" (click)=\"pagingClicked(false)\"></dr-button>\n<div class=\"dr-datepicker-input-container\">\n    <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n\n    <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n        <span *ngIf=\"presetTagSelected && datePickerService.isUsingDateTagPresets\"> {{ presetTagSelected }} </span>\n        <span>{{ presetTagSelected && datePickerService.isUsingDateTagPresets ? '(' + displayedFormattedValue + ')' : displayedFormattedValue }}</span>\n    </div>\n    <input\n            #datepickerInput\n            [(ngModel)]=\"value\"\n            (click)=\"datePicker.open()\"\n            [matDatepicker]=\"datePicker\"\n            [readonly]=\"readonly\"\n            [min]=\"_min\"\n            [max]=\"_max\"\n    />\n</div>\n<dr-button [disabled]=\"isNextDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n                class=\"dr-timeframe-datepicker\"\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n                [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\"\n                >\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.disabled{background:transparent;color:#aeabac}:host.disabled.dr-date-picker-on-dashboard{border:none;padding:0 8px}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#aeabac;font-weight:400}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container i{color:#aeabac}:host.dr-date-picker-on-dashboard{width:-moz-fit-content;width:fit-content;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard:after{visibility:hidden}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;text-decoration-line:underline}:host .dr-datepicker-input-container__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;text-decoration-line:underline;color:#4646ce}::ng-deep .date-picker-preset-tag{width:386px!important}::ng-deep .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: DrButtonComponent, selector: "dr-button", inputs: ["theme", "icon", "iconColor", "iconSize", "iconAfter", "iconAfterColor", "iconAfterSize", "disabled", "isLoading", "isActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<dr-button [disabled]=\"isPrevDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-left\" (click)=\"pagingClicked(false)\"></dr-button>\n<div class=\"dr-datepicker-input-container\">\n    <i *ngIf=\"isDashboardDatepicker\" class=\"dr-icon-date\"></i>\n\n    <div class=\"dr-datepicker-input-container__formatted-value-display\" (click)=\"datepickerInput.click()\">\n        <span *ngIf=\"presetTagSelected && datePickerService.isUsingDateTagPresets\"> {{ presetTagSelected }} </span>\n        <span>{{ presetTagSelected && datePickerService.isUsingDateTagPresets ? '(' + displayedFormattedValue + ')' : displayedFormattedValue }}</span>\n    </div>\n    <input\n            #datepickerInput\n            [(ngModel)]=\"value\"\n            (click)=\"datePicker.open()\"\n            [matDatepicker]=\"datePicker\"\n            [readonly]=\"readonly\"\n            [min]=\"_min\"\n            [max]=\"_max\"\n    />\n</div>\n<dr-button [disabled]=\"isNextDateDisabled\" *ngIf=\"!disabled\" theme=\"icon\" icon=\"dr-icon-arrow-right\" (click)=\"pagingClicked(true)\"></dr-button>\n<mat-datepicker #datePicker\n                class=\"dr-timeframe-datepicker\"\n                [calendarHeaderComponent]=\"customHeader\"\n                (yearSelected)=\"chosenPeriodHandler($event, timeframeOption.YEAR)\"\n                (monthSelected)=\"chosenPeriodHandler($event, timeframeOption.MONTH)\"\n                [panelClass]=\"datePickerService.isUsingDateTagPresets ? 'date-picker-preset-tag' : 'dr-timeframe-datepicker'\"\n                >\n</mat-datepicker>\n", styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:Poppins,sans-serif;background-color:#fff;border:1px solid #9EA1AA;border-radius:6px;color:#333;overflow:hidden;outline:none;cursor:pointer}:host:hover{border-color:#9ea1aa}:host.active,:host:focus-within{border-color:#4646ce!important;color:#333}:host.disabled{pointer-events:none;border:1px solid #AEABAC;background:#f0f1f4;color:#aeabac}:host.disabled:after{color:#aeabac}:host.ng-valid.ng-dirty{border-color:#037c5a}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#bf1d30!important}:host.ng-untouched.ng-valid{border-color:#9ea1aa}:host:after,:host:before{position:absolute;display:flex;border-color:#6D6E6F transparent transparent;color:#6d6e6f}:host:after{font-family:DataRails!important;content:\"\\ea13\";font-size:24px;color:#6d6e6f;top:0;bottom:0;right:8px;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:center}:host i{display:flex;align-items:center;position:absolute;color:#6d6e6f;left:8px;top:0;bottom:0}:host input{display:flex;flex-grow:1;height:100%;border:none;text-align:left;padding-left:35px;padding-right:25px;cursor:pointer!important;outline:none}:host input.when-quarter{position:absolute;visibility:hidden}:host input:disabled{border:none;color:#aeabac;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host input::placeholder{color:#6d6e6f;font-size:14px;line-height:18px}::ng-deep .mat-datepicker-popup .mat-datepicker-content{margin:7px 0;box-shadow:0 4px 8px 1px #00000040;border-radius:12px!important}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]{border:inherit;color:inherit;background-color:inherit}::ng-deep .mat-datepicker-popup .mat-datepicker-content button[disabled]:hover{border:inherit}::ng-deep .mat-datepicker-popup .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),::ng-deep .mat-datepicker-popup .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff}::ng-deep .mat-datepicker-popup .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background:#f2f2fb;color:#4646ce;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-selected{background-color:#4646ce;color:#f2f2fb;font-weight:600}::ng-deep .mat-datepicker-popup .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:none}::ng-deep .mat-datepicker-popup .mat-button-focus-overlay{background:#f5f5f5}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:1!important;background:#f5f5f5;transition:opacity .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-controls .mat-calendar-period-button:hover{background:#f5f5f5;transition:background .2s cubic-bezier(.35,0,.25,1)}::ng-deep .mat-datepicker-popup .mat-calendar-table-header th{font-size:14px;font-weight:600;color:#333}::ng-deep .mat-datepicker-popup .mat-calendar-table-header-divider{display:none}::ng-deep .mat-datepicker-popup .mat-calendar-body-label{color:#fff;padding:0}:host{border:none;display:flex;align-items:center}:host.disabled{background:transparent;color:#aeabac}:host.disabled.dr-date-picker-on-dashboard{border:none;padding:0 8px}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{text-decoration:none;color:#aeabac;font-weight:400}:host.disabled.dr-date-picker-on-dashboard .dr-datepicker-input-container i{color:#aeabac}:host.dr-date-picker-on-dashboard{width:-moz-fit-content;width:fit-content;justify-content:space-between}:host.dr-date-picker-on-dashboard mat-datepicker{position:absolute}:host.dr-date-picker-on-dashboard:after{visibility:hidden}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-left:-10px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container__formatted-value-display{font-weight:600;width:auto;margin-left:5px}:host.dr-date-picker-on-dashboard .dr-datepicker-input-container .dr-icon-date{display:block;position:relative;top:0;margin-right:8px;color:#4e566c}:host .dr-datepicker-input-container input{visibility:hidden;position:absolute;width:100%}:host .dr-datepicker-input-container__formatted-value-display{width:90px;height:22px;padding-left:0;text-align:center;line-height:22px;color:#0c142b;text-decoration-line:underline}:host .dr-datepicker-input-container__formatted-value-display:hover{background-color:#f2f2fb;border-radius:5px;cursor:pointer;text-decoration-line:underline;color:#4646ce}::ng-deep .date-picker-preset-tag{width:386px!important}::ng-deep .date-picker-preset-tag .mat-calendar-content{padding-left:32px!important;padding-right:32px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: DrButtonComponent, selector: "dr-button", inputs: ["theme", "icon", "iconColor", "iconSize", "iconAfter", "iconAfterColor", "iconAfterSize", "disabled", "isLoading", "isActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrDatePickerWithTimeframeComponent, decorators: [{
             type: Component,
@@ -3299,7 +3323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-const noop = () => { };
+const noop$1 = () => { };
 class DrDatePickerRangeComponent {
     get defaultValue() {
         return {
@@ -3340,8 +3364,8 @@ class DrDatePickerRangeComponent {
         this.labelTo = 'To';
         this.placeholderFrom = 'Select...';
         this.placeholderTo = 'Select...';
-        this.onTouchedCallback = noop;
-        this.onChangeCallback = noop;
+        this.onTouchedCallback = noop$1;
+        this.onChangeCallback = noop$1;
         this.innerValue = this.defaultValue;
         this.innerValueFrom = null;
         this.innerValueTo = null;
@@ -4423,6 +4447,551 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['class']
             }] } });
 
+class CodeEditorHintWrapperComponent {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CodeEditorHintWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CodeEditorHintWrapperComponent, selector: "dr-code-editor-hint-wrapper", ngImport: i0, template: ` <span [innerHTML]="content" [drTooltip]="tooltip"></span> `, isInline: true, dependencies: [{ kind: "directive", type: DrTooltipDirective, selector: "[drTooltip]", inputs: ["drTooltip", "drTooltipContext", "drTooltipPosition", "drTooltipClass", "drTooltipTheme", "drTooltipMousleaveTimeout", "drTooltipMouseEnterTimeout", "drTooltipOptions", "drTooltipShow"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CodeEditorHintWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dr-code-editor-hint-wrapper',
+                    template: ` <span [innerHTML]="content" [drTooltip]="tooltip"></span> `,
+                }]
+        }] });
+
+class DrCodemirrorComponent {
+    set options(value) {
+        this._options = value;
+        if (!this._differ && value) {
+            this._differ = this._differs.find(value).create();
+        }
+    }
+    constructor(_differs, _ngZone) {
+        this._differs = _differs;
+        this._ngZone = _ngZone;
+        this.className = '';
+        this.name = 'codemirror';
+        this.autoFocus = false;
+        this.preserveScrollPosition = false;
+        this.cursorActivity = new EventEmitter();
+        this.focusChange = new EventEmitter();
+        this.scroll = new EventEmitter();
+        this.drop = new EventEmitter();
+        this.codeMirrorLoaded = new EventEmitter();
+        this.value = '';
+        this.disabled = false;
+        this.isFocused = false;
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+    }
+    get codeMirrorGlobal() {
+        if (this._codeMirror) {
+            return this._codeMirror;
+        }
+        this._codeMirror = CodeMirror;
+        return this._codeMirror;
+    }
+    ngAfterViewInit() {
+        this._ngZone.runOutsideAngular(async () => {
+            const codeMirrorObj = await this.codeMirrorGlobal;
+            const codeMirror = codeMirrorObj?.default ? codeMirrorObj.default : codeMirrorObj;
+            this.codeMirror = codeMirror.fromTextArea(this.ref.nativeElement, this._options);
+            this.codeMirror.on('cursorActivity', cm => this._ngZone.run(() => this.cursorActive(cm)));
+            this.codeMirror.on('scroll', this.scrollChanged.bind(this));
+            this.codeMirror.on('blur', () => this._ngZone.run(() => this.focusChanged(false)));
+            this.codeMirror.on('focus', () => this._ngZone.run(() => this.focusChanged(true)));
+            this.codeMirror.on('change', (cm, change) => this._ngZone.run(() => this.codemirrorValueChanged(cm, change)));
+            this.codeMirror.on('drop', (cm, e) => {
+                this._ngZone.run(() => this.dropFiles(cm, e));
+            });
+            this.codeMirror.setValue(this.value);
+            this.codeMirrorLoaded.emit(this);
+        });
+    }
+    ngDoCheck() {
+        if (!this._differ) {
+            return;
+        }
+        // check options have not changed
+        const changes = this._differ.diff(this._options);
+        if (changes) {
+            changes.forEachChangedItem(option => this.setOptionIfChanged(option.key, option.currentValue));
+            changes.forEachAddedItem(option => this.setOptionIfChanged(option.key, option.currentValue));
+            changes.forEachRemovedItem(option => this.setOptionIfChanged(option.key, option.currentValue));
+        }
+    }
+    ngOnDestroy() {
+        // is there a lighter-weight way to remove the cm instance?
+        if (this.codeMirror) {
+            this.codeMirror.toTextArea();
+        }
+    }
+    codemirrorValueChanged(cm, change) {
+        const cmVal = cm.getValue();
+        if (this.value !== cmVal) {
+            this.value = cmVal;
+            this.onChange(this.value);
+        }
+    }
+    setOptionIfChanged(optionName, newValue) {
+        if (!this.codeMirror) {
+            return;
+        }
+        // cast to any to handle strictly typed option names
+        // could possibly import settings strings available in the future
+        this.codeMirror.setOption(optionName, newValue);
+    }
+    focusChanged(focused) {
+        this.onTouched();
+        this.isFocused = focused;
+        this.focusChange.emit(focused);
+    }
+    scrollChanged(cm) {
+        this.scroll.emit(cm.getScrollInfo());
+    }
+    cursorActive(cm) {
+        this.cursorActivity.emit(cm);
+    }
+    dropFiles(cm, e) {
+        this.drop.emit([cm, e]);
+    }
+    writeValue(value) {
+        if (value === null || value === undefined) {
+            return;
+        }
+        if (!this.codeMirror) {
+            this.value = value;
+            return;
+        }
+        const cur = this.codeMirror.getValue();
+        if (value !== cur && DrSharedUtils.normalizeLineEndings(cur) !== DrSharedUtils.normalizeLineEndings(value)) {
+            this.value = value;
+            if (this.preserveScrollPosition) {
+                const prevScrollPosition = this.codeMirror.getScrollInfo();
+                this.codeMirror.setValue(this.value);
+                this.codeMirror.scrollTo(prevScrollPosition.left, prevScrollPosition.top);
+            }
+            else {
+                this.codeMirror.setValue(this.value);
+            }
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.setOptionIfChanged('readOnly', this.disabled);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrCodemirrorComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrCodemirrorComponent, selector: "dr-codemirror", inputs: { className: "className", name: "name", autoFocus: "autoFocus", options: "options", preserveScrollPosition: "preserveScrollPosition" }, outputs: { cursorActivity: "cursorActivity", focusChange: "focusChange", scroll: "scroll", drop: "drop", codeMirrorLoaded: "codeMirrorLoaded" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef((() => DrCodemirrorComponent)),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true }], ngImport: i0, template: `
+    <textarea
+      [name]="name"
+      class="dr-codemirror {{ className }}"
+      [class.dr-codemirror--focused]="isFocused"
+      autocomplete="off"
+      [autofocus]="autoFocus"
+      #ref
+    >
+    </textarea>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrCodemirrorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dr-codemirror',
+                    template: `
+    <textarea
+      [name]="name"
+      class="dr-codemirror {{ className }}"
+      [class.dr-codemirror--focused]="isFocused"
+      autocomplete="off"
+      [autofocus]="autoFocus"
+      #ref
+    >
+    </textarea>
+  `,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef((() => DrCodemirrorComponent)),
+                            multi: true,
+                        },
+                    ],
+                    preserveWhitespaces: false,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: i0.NgZone }]; }, propDecorators: { className: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], autoFocus: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], preserveScrollPosition: [{
+                type: Input
+            }], cursorActivity: [{
+                type: Output
+            }], focusChange: [{
+                type: Output
+            }], scroll: [{
+                type: Output
+            }], drop: [{
+                type: Output
+            }], codeMirrorLoaded: [{
+                type: Output
+            }], ref: [{
+                type: ViewChild,
+                args: ['ref']
+            }] } });
+
+class DrErrorComponent {
+    constructor(formGroupDirective) {
+        this.formGroupDirective = formGroupDirective;
+        this.label = 'Field error';
+        this.errorTooltipPosition = 'top';
+        this.displayAsLabel = false;
+        this.noIcon = false;
+    }
+    set control(value) {
+        if (value) {
+            this._control = value;
+        }
+    }
+    set controlName(value) {
+        if (!value || typeof value !== 'string')
+            return;
+        if (!this.formGroupDirective) {
+            throw new Error('You must provide a formGroupDirective to use this input');
+        }
+        this.control = this.formGroupDirective.control.get(value);
+    }
+    get errorString() {
+        if (this._control.hasError('required')) {
+            return 'Field is required!';
+        }
+        return this._control.errors?.errorString || null;
+    }
+    get isWarning() {
+        return this._control.errors?.isWarning;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrErrorComponent, deps: [{ token: i1$2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrErrorComponent, selector: "dr-error", inputs: { control: "control", controlName: "controlName", label: "label", errorTooltipPosition: "errorTooltipPosition", displayAsLabel: "displayAsLabel", noIcon: "noIcon" }, host: { properties: { "class.no-icon": "this.noIcon" } }, ngImport: i0, template: "<div *ngIf=\"_control.status === 'INVALID' && !_control.pristine\"\n     [drTooltip]=\"displayAsLabel ? null : errorString\"\n     [drTooltipPosition]=\"errorTooltipPosition\"\n     class=\"error-container\"\n     [class.error-container--cursor-pointer]=\"!displayAsLabel\"\n     [class.warning]=\"isWarning\">\n    <i *ngIf=\"!noIcon\" class=\"dr-icon-status-error\"></i>\n    <span>{{ displayAsLabel ? errorString : label }}</span>\n</div>\n", styles: [":host{display:flex;margin-top:8px}:host:empty{display:none}:host .error-container{display:flex;align-items:center;width:auto;color:#bf1d30}:host .error-container i{font-size:16px;margin-right:2px}:host .error-container span{font-family:Poppins,sans-serif;font-style:normal;font-weight:400;font-size:11px;line-height:20px}:host .error-container.warning{color:#ffb800}:host .error-container.warning span{color:#9e5f00}:host .error-container--cursor-pointer{cursor:pointer}:host.no-icon{margin-top:2px}:host.no-icon .error-container span{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DrTooltipDirective, selector: "[drTooltip]", inputs: ["drTooltip", "drTooltipContext", "drTooltipPosition", "drTooltipClass", "drTooltipTheme", "drTooltipMousleaveTimeout", "drTooltipMouseEnterTimeout", "drTooltipOptions", "drTooltipShow"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrErrorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dr-error', template: "<div *ngIf=\"_control.status === 'INVALID' && !_control.pristine\"\n     [drTooltip]=\"displayAsLabel ? null : errorString\"\n     [drTooltipPosition]=\"errorTooltipPosition\"\n     class=\"error-container\"\n     [class.error-container--cursor-pointer]=\"!displayAsLabel\"\n     [class.warning]=\"isWarning\">\n    <i *ngIf=\"!noIcon\" class=\"dr-icon-status-error\"></i>\n    <span>{{ displayAsLabel ? errorString : label }}</span>\n</div>\n", styles: [":host{display:flex;margin-top:8px}:host:empty{display:none}:host .error-container{display:flex;align-items:center;width:auto;color:#bf1d30}:host .error-container i{font-size:16px;margin-right:2px}:host .error-container span{font-family:Poppins,sans-serif;font-style:normal;font-weight:400;font-size:11px;line-height:20px}:host .error-container.warning{color:#ffb800}:host .error-container.warning span{color:#9e5f00}:host .error-container--cursor-pointer{cursor:pointer}:host.no-icon{margin-top:2px}:host.no-icon .error-container span{font-size:12px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { control: [{
+                type: Input
+            }], controlName: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], errorTooltipPosition: [{
+                type: Input
+            }], displayAsLabel: [{
+                type: Input
+            }], noIcon: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.no-icon']
+            }] } });
+
+const noop = () => { };
+class DrCodeEditorComponent {
+    constructor(cdr, cfr, injector) {
+        this.cdr = cdr;
+        this.cfr = cfr;
+        this.injector = injector;
+        this.innerValue = '';
+        this.onTouchedCallback = noop;
+        this.onChangeCallback = noop;
+        this.parenthesesMarkers = [];
+        this.parenthesisColors = [
+            '#2F3E48',
+            '#1f68cc',
+            '#9480CD',
+            '#4D9944',
+            '#B03E84',
+            '#B64900',
+            '#267392',
+            '#326AC7',
+        ];
+        this.parenthesesMap = {
+            '}': '{',
+            ']': '[',
+            ')': '(',
+            '{': '}',
+            '[': ']',
+            '(': ')',
+        };
+        this._hints = [];
+        this.hintRefsStack = [];
+        this.codeMirrorOptions = {
+            lineWrapping: true,
+            matchBrackets: true,
+            autoRefresh: true,
+            lineNumbers: false,
+            mode: 'javascript',
+            extraKeys: { 'Ctrl-Space': 'autocomplete' },
+            autoCloseBrackets: true,
+            hintOptions: {
+                container: window.document.body,
+                completeSingle: false,
+            },
+        };
+        this.highlightHints = false;
+    }
+    set hints(values) {
+        if (values?.length) {
+            this._hints = values;
+            this.registerHints(values);
+        }
+    }
+    get value() {
+        return this.innerValue;
+    }
+    set value(v) {
+        if (v !== this.innerValue) {
+            this.innerValue = v;
+            this.onChangeCallback(v);
+            this.highlightCustomFunctionsInEditor();
+            this.colorizeParentheses();
+            if (this.highlightHints) {
+                this.updateHighlightHints();
+            }
+        }
+    }
+    writeValue(value) {
+        if (value !== this.innerValue) {
+            this.innerValue = value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    focusChanged(bool) {
+        this.isFocused = bool;
+    }
+    afterCodeMirrorLoaded() {
+        this.doc = this.codeEditor.codeMirror.getDoc();
+        if (this._hints.length) {
+            this.codeEditor.codeMirror.on('keyup', (cm, event) => {
+                if ((!event.ctrlKey && event.keyCode >= 65 && event.keyCode <= 90) ||
+                    (event.keyCode >= 97 && event.keyCode <= 122) ||
+                    (event.keyCode >= 46 && event.keyCode <= 57) ||
+                    event.keyCode === 32) {
+                    // @ts-ignore
+                    CodeMirror.commands.autocomplete(this.codeEditor.codeMirror);
+                }
+            });
+            this.codeEditor.codeMirror.on('focus', (cm, event) => {
+                setTimeout(() => {
+                    if (this.isFocused) {
+                        // @ts-ignore
+                        CodeMirror.commands.autocomplete(this.codeEditor.codeMirror);
+                    }
+                }, 200);
+            });
+        }
+        setTimeout(() => {
+            if (this.highlightHints) {
+                this.updateHighlightHints();
+            }
+        });
+    }
+    isClosedParenthesis(parenthesis) {
+        return ['}', ')', ']'].some((value) => value === parenthesis);
+    }
+    colorizeParentheses() {
+        const string = this.doc.getValue();
+        const stack = [];
+        const result = [];
+        let line = 0;
+        let ch = 0;
+        this.parenthesesMarkers.forEach((marker) => marker.clear());
+        this.parenthesesMarkers = [];
+        for (let index = 0; index < string.length; index++) {
+            const char = string.charAt(index);
+            if (char === '\n') {
+                line++;
+                ch = 0;
+                continue;
+            }
+            if (this.parenthesesMap[char]) {
+                const peek = stack ? stack[stack.length - 1] : null;
+                if (!this.isClosedParenthesis(char)) {
+                    let colorIndex = (peek?.colorIndex + 1) || 0;
+                    colorIndex = colorIndex > this.parenthesisColors.length - 1 ? 0 : colorIndex;
+                    stack.push({ value: char, color: this.parenthesisColors[colorIndex], colorIndex });
+                    result[index] = { value: char, color: this.parenthesisColors[colorIndex], colorIndex };
+                }
+                if (stack?.length && peek?.value === this.parenthesesMap[char]) {
+                    result[index] = { value: char, color: peek.color, colorIndex: peek.colorIndex };
+                    stack.pop();
+                }
+            }
+            if (result[index]) {
+                this.parenthesesMarkers.push(this.doc.markText({
+                    line,
+                    ch,
+                }, {
+                    line,
+                    ch: ch + 1,
+                }, {
+                    css: `color: ${result[index].color}`,
+                }));
+            }
+            ch++;
+        }
+    }
+    highlightCustomFunctionsInEditor() {
+        const markers = this.markers || [];
+        const existMarkers = this.existMarkers || [];
+        existMarkers.forEach((m) => m.clear());
+        this.doc.eachLine((line) => {
+            markers.forEach((marker) => {
+                const searchStr = marker.name + '\\(';
+                const matches = line.text.matchAll(new RegExp(searchStr, 'g'));
+                for (const match of matches) {
+                    existMarkers.push(this.doc.markText({
+                        line: line.lineNo(),
+                        ch: match.index,
+                    }, {
+                        line: line.lineNo(),
+                        ch: match.index + marker.name.length,
+                    }, {
+                        className: 'marker',
+                        title: marker.title,
+                    }));
+                }
+            });
+        });
+    }
+    pasteText(text, goCharLeft) {
+        this.doc.replaceSelection(text);
+        this.doc.cm.focus();
+        if (goCharLeft) {
+            this.doc.cm.execCommand('goCharLeft');
+        }
+    }
+    registerHints(dictionary = []) {
+        const hintRegexp = /[\w$]|[ &'"#%$@]/;
+        CodeMirror.registerHelper('hint', 'dictionaryHint', (editor) => {
+            const cursor = editor.getCursor();
+            const currentLine = editor.getLine(cursor.line);
+            let start = cursor.ch;
+            let end = cursor.ch;
+            while (end < currentLine.length && hintRegexp.test(currentLine.charAt(end)))
+                ++end;
+            while (start && hintRegexp.test(currentLine.charAt(start - 1)))
+                --start;
+            const currentWord = (start !== end && currentLine.slice(start, end)) || '';
+            const filteredDictionary = (!currentWord
+                ? dictionary
+                : dictionary.filter((item) => item.value.toLowerCase().includes(currentWord.toLowerCase()))).sort() || [];
+            const hintsList = filteredDictionary.map((item) => {
+                const displayText = item.value;
+                let text = item.value;
+                if (currentLine[start - 1] !== '[') {
+                    text = '[' + text;
+                }
+                if (currentLine[end] !== ']') {
+                    text += ']';
+                }
+                return {
+                    text,
+                    displayText,
+                    render: (element, data, current) => {
+                        const startIndex = current.displayText.toLowerCase().indexOf(currentWord.toLowerCase());
+                        const stringToReplace = current.displayText.slice(startIndex, startIndex + currentWord.length);
+                        const hintHTML = `${item.icon} ` + current.displayText.replace(stringToReplace, `<b>${stringToReplace}</b>`);
+                        const componentFactory = this.cfr.resolveComponentFactory(CodeEditorHintWrapperComponent);
+                        const componentRef = componentFactory.create(this.injector);
+                        componentRef.instance.content = hintHTML;
+                        componentRef.instance.tooltip = item.hint;
+                        componentRef.changeDetectorRef.detectChanges();
+                        element.appendChild(componentRef.location.nativeElement);
+                        this.hintRefsStack.push(componentRef);
+                    },
+                };
+            });
+            return {
+                list: hintsList,
+                from: CodeMirror.Pos(cursor.line, start),
+                to: CodeMirror.Pos(cursor.line, end),
+            };
+        });
+        // @ts-ignore
+        CodeMirror.commands.autocomplete = (cm) => {
+            this.destroyHints();
+            // @ts-ignore
+            CodeMirror.showHint(cm, CodeMirror.hint.dictionaryHint);
+        };
+    }
+    destroyHints() {
+        this.hintRefsStack.forEach((ref) => ref.destroy());
+        this.hintRefsStack = [];
+    }
+    updateHighlightHints() {
+        const hints = this._hints || [];
+        const highlightedHints = this.highlightedHints || [];
+        highlightedHints.forEach((m) => m.clear());
+        this.doc.eachLine((line) => {
+            const matches = line.text.matchAll(/(?:\[).+?(?=\])/gm);
+            for (const match of matches) {
+                const hint = hints.find((h) => h.value === match[0].replace('[', ''));
+                if (hint) {
+                    highlightedHints.push(this.doc.markText({
+                        line: line.lineNo(),
+                        ch: match.index + 1,
+                    }, {
+                        line: line.lineNo(),
+                        ch: match.index + 1 + hint.value.length,
+                    }, {
+                        className: 'hint-variable',
+                        title: hint.value,
+                    }));
+                }
+            }
+        });
+        this.cdr.markForCheck();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrCodeEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrCodeEditorComponent, selector: "dr-code-editor", inputs: { markers: "markers", highlightHints: "highlightHints", hints: "hints", control: "control" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => DrCodeEditorComponent)), multi: true }], viewQueries: [{ propertyName: "codeEditor", first: true, predicate: ["codeEditor"], descendants: true }], ngImport: i0, template: "<dr-codemirror\n    #codeEditor\n    [(ngModel)]=\"value\"\n    [options]=\"codeMirrorOptions\"\n    [class.mark-hints]=\"highlightHints\"\n    [class.mirror-error]=\"control.status === 'INVALID' && !control.pristine\"\n    (focusChange)=\"focusChanged($event)\"\n    (codeMirrorLoaded)=\"afterCodeMirrorLoaded()\"></dr-codemirror>\n<span *ngIf=\"!isFocused && !innerValue\" class=\"codemirror-placeholder\"\n    >Start typing your formula here. We support (+,-,*,/). <br />\n    For Example: [Feb-22] - [Jan-22]</span\n>\n<dr-error [control]=\"control\" label=\"Formula error\"></dr-error>\n", styles: ["dr-codemirror ::ng-deep .CodeMirror{height:10rem;border:1px solid #9EA1AA;border-radius:6px}dr-codemirror ::ng-deep .CodeMirror-focused{border-color:#4646ce!important}dr-codemirror ::ng-deep .CodeMirror-line{font-family:Poppins,sans-serif;font-size:12px;line-height:20px;font-weight:500;font-weight:400}dr-codemirror ::ng-deep .CodeMirror .CodeMirror-scroll{padding:0}dr-codemirror ::ng-deep .CodeMirror .marker{color:#fff;background:#20a452}dr-codemirror ::ng-deep .CodeMirror .marker:first-child,dr-codemirror ::ng-deep .CodeMirror .cm-variable:not(.marker)+.marker{padding-left:2px;margin-left:2px}dr-codemirror ::ng-deep .CodeMirror .marker+.cm-variable:not(.marker){margin-left:2px}dr-codemirror ::ng-deep .CodeMirror-matchingbracket{color:#0f0!important}:host::ng-deep{position:relative}:host::ng-deep .mirror-error .CodeMirror{border:1px solid #BF1D30}:host::ng-deep .mark-hints .hint-variable{color:#4646ce}dr-error{position:absolute;bottom:5px;left:7px;background:#fff;margin:0}dr-error:not(:last-child){display:none}.codemirror-placeholder{color:#6d6e6f;position:absolute;top:10px;left:10px;font-size:12px;pointer-events:none}::ng-deep .CodeMirror-hints{background:#fff;border:1px solid #e5e6ea;box-shadow:0 4px 8px 1px #00000040;border-radius:6px;z-index:100;padding:8px 0}::ng-deep .CodeMirror-hints .CodeMirror-hint{font-family:Poppins,sans-serif;font-size:12px;line-height:20px;font-weight:500;font-weight:400;padding:0 12px;display:flex;align-items:center;height:32px;background:#fff;color:#333}::ng-deep .CodeMirror-hints .CodeMirror-hint,::ng-deep .CodeMirror-hints .CodeMirror-hint-active{background:#fff;color:#333}::ng-deep .CodeMirror-hints:not(:hover) .CodeMirror-hint-active,::ng-deep .CodeMirror-hints .CodeMirror-hint:hover{background:#eaeaff;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DrErrorComponent, selector: "dr-error", inputs: ["control", "controlName", "label", "errorTooltipPosition", "displayAsLabel", "noIcon"] }, { kind: "component", type: DrCodemirrorComponent, selector: "dr-codemirror", inputs: ["className", "name", "autoFocus", "options", "preserveScrollPosition"], outputs: ["cursorActivity", "focusChange", "scroll", "drop", "codeMirrorLoaded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrCodeEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dr-code-editor', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => DrCodeEditorComponent)), multi: true }], template: "<dr-codemirror\n    #codeEditor\n    [(ngModel)]=\"value\"\n    [options]=\"codeMirrorOptions\"\n    [class.mark-hints]=\"highlightHints\"\n    [class.mirror-error]=\"control.status === 'INVALID' && !control.pristine\"\n    (focusChange)=\"focusChanged($event)\"\n    (codeMirrorLoaded)=\"afterCodeMirrorLoaded()\"></dr-codemirror>\n<span *ngIf=\"!isFocused && !innerValue\" class=\"codemirror-placeholder\"\n    >Start typing your formula here. We support (+,-,*,/). <br />\n    For Example: [Feb-22] - [Jan-22]</span\n>\n<dr-error [control]=\"control\" label=\"Formula error\"></dr-error>\n", styles: ["dr-codemirror ::ng-deep .CodeMirror{height:10rem;border:1px solid #9EA1AA;border-radius:6px}dr-codemirror ::ng-deep .CodeMirror-focused{border-color:#4646ce!important}dr-codemirror ::ng-deep .CodeMirror-line{font-family:Poppins,sans-serif;font-size:12px;line-height:20px;font-weight:500;font-weight:400}dr-codemirror ::ng-deep .CodeMirror .CodeMirror-scroll{padding:0}dr-codemirror ::ng-deep .CodeMirror .marker{color:#fff;background:#20a452}dr-codemirror ::ng-deep .CodeMirror .marker:first-child,dr-codemirror ::ng-deep .CodeMirror .cm-variable:not(.marker)+.marker{padding-left:2px;margin-left:2px}dr-codemirror ::ng-deep .CodeMirror .marker+.cm-variable:not(.marker){margin-left:2px}dr-codemirror ::ng-deep .CodeMirror-matchingbracket{color:#0f0!important}:host::ng-deep{position:relative}:host::ng-deep .mirror-error .CodeMirror{border:1px solid #BF1D30}:host::ng-deep .mark-hints .hint-variable{color:#4646ce}dr-error{position:absolute;bottom:5px;left:7px;background:#fff;margin:0}dr-error:not(:last-child){display:none}.codemirror-placeholder{color:#6d6e6f;position:absolute;top:10px;left:10px;font-size:12px;pointer-events:none}::ng-deep .CodeMirror-hints{background:#fff;border:1px solid #e5e6ea;box-shadow:0 4px 8px 1px #00000040;border-radius:6px;z-index:100;padding:8px 0}::ng-deep .CodeMirror-hints .CodeMirror-hint{font-family:Poppins,sans-serif;font-size:12px;line-height:20px;font-weight:500;font-weight:400;padding:0 12px;display:flex;align-items:center;height:32px;background:#fff;color:#333}::ng-deep .CodeMirror-hints .CodeMirror-hint,::ng-deep .CodeMirror-hints .CodeMirror-hint-active{background:#fff;color:#333}::ng-deep .CodeMirror-hints:not(:hover) .CodeMirror-hint-active,::ng-deep .CodeMirror-hints .CodeMirror-hint:hover{background:#eaeaff;cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }]; }, propDecorators: { markers: [{
+                type: Input
+            }], highlightHints: [{
+                type: Input
+            }], hints: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], codeEditor: [{
+                type: ViewChild,
+                args: ['codeEditor']
+            }] } });
+
 var Scenario;
 (function (Scenario) {
     Scenario["ACTUALS"] = "Actuals";
@@ -6205,61 +6774,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
-class DrErrorComponent {
-    constructor(formGroupDirective) {
-        this.formGroupDirective = formGroupDirective;
-        this.label = 'Field error';
-        this.errorTooltipPosition = 'top';
-        this.displayAsLabel = false;
-        this.noIcon = false;
-    }
-    set control(value) {
-        if (value) {
-            this._control = value;
-        }
-    }
-    set controlName(value) {
-        if (!value || typeof value !== 'string')
-            return;
-        if (!this.formGroupDirective) {
-            throw new Error('You must provide a formGroupDirective to use this input');
-        }
-        this.control = this.formGroupDirective.control.get(value);
-    }
-    get errorString() {
-        if (this._control.hasError('required')) {
-            return 'Field is required!';
-        }
-        return this._control.errors?.errorString || null;
-    }
-    get isWarning() {
-        return this._control.errors?.isWarning;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrErrorComponent, deps: [{ token: i1$2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrErrorComponent, selector: "dr-error", inputs: { control: "control", controlName: "controlName", label: "label", errorTooltipPosition: "errorTooltipPosition", displayAsLabel: "displayAsLabel", noIcon: "noIcon" }, host: { properties: { "class.no-icon": "this.noIcon" } }, ngImport: i0, template: "<div *ngIf=\"_control.status === 'INVALID' && !_control.pristine\"\n     [drTooltip]=\"displayAsLabel ? null : errorString\"\n     [drTooltipPosition]=\"errorTooltipPosition\"\n     class=\"error-container\"\n     [class.error-container--cursor-pointer]=\"!displayAsLabel\"\n     [class.warning]=\"isWarning\">\n    <i *ngIf=\"!noIcon\" class=\"dr-icon-status-error\"></i>\n    <span>{{ displayAsLabel ? errorString : label }}</span>\n</div>\n", styles: [":host{display:flex;margin-top:8px}:host:empty{display:none}:host .error-container{display:flex;align-items:center;width:auto;color:#bf1d30}:host .error-container i{font-size:16px;margin-right:2px}:host .error-container span{font-family:Poppins,sans-serif;font-style:normal;font-weight:400;font-size:11px;line-height:20px}:host .error-container.warning{color:#ffb800}:host .error-container.warning span{color:#9e5f00}:host .error-container--cursor-pointer{cursor:pointer}:host.no-icon{margin-top:2px}:host.no-icon .error-container span{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DrTooltipDirective, selector: "[drTooltip]", inputs: ["drTooltip", "drTooltipContext", "drTooltipPosition", "drTooltipClass", "drTooltipTheme", "drTooltipMousleaveTimeout", "drTooltipMouseEnterTimeout", "drTooltipOptions", "drTooltipShow"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrErrorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dr-error', template: "<div *ngIf=\"_control.status === 'INVALID' && !_control.pristine\"\n     [drTooltip]=\"displayAsLabel ? null : errorString\"\n     [drTooltipPosition]=\"errorTooltipPosition\"\n     class=\"error-container\"\n     [class.error-container--cursor-pointer]=\"!displayAsLabel\"\n     [class.warning]=\"isWarning\">\n    <i *ngIf=\"!noIcon\" class=\"dr-icon-status-error\"></i>\n    <span>{{ displayAsLabel ? errorString : label }}</span>\n</div>\n", styles: [":host{display:flex;margin-top:8px}:host:empty{display:none}:host .error-container{display:flex;align-items:center;width:auto;color:#bf1d30}:host .error-container i{font-size:16px;margin-right:2px}:host .error-container span{font-family:Poppins,sans-serif;font-style:normal;font-weight:400;font-size:11px;line-height:20px}:host .error-container.warning{color:#ffb800}:host .error-container.warning span{color:#9e5f00}:host .error-container--cursor-pointer{cursor:pointer}:host.no-icon{margin-top:2px}:host.no-icon .error-container span{font-size:12px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.FormGroupDirective, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { control: [{
-                type: Input
-            }], controlName: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], errorTooltipPosition: [{
-                type: Input
-            }], displayAsLabel: [{
-                type: Input
-            }], noIcon: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.no-icon']
-            }] } });
-
 class DrDetailsListComponent {
     set items(val) {
         if (!val) {
@@ -7419,6 +7933,12 @@ var FeedbackSentiment;
 })(FeedbackSentiment || (FeedbackSentiment = {}));
 ;
 
+var ICodeEditorHintIcon;
+(function (ICodeEditorHintIcon) {
+    ICodeEditorHintIcon["VALUE"] = "#";
+    ICodeEditorHintIcon["CALCULATED_VALUE"] = "=";
+})(ICodeEditorHintIcon || (ICodeEditorHintIcon = {}));
+
 class DrToastrService {
     constructor(toastr) {
         this.toastr = toastr;
@@ -8249,11 +8769,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class DrCodeEditorModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrCodeEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DrCodeEditorModule, declarations: [DrCodemirrorComponent, DrCodeEditorComponent, CodeEditorHintWrapperComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            DrTooltipModule,
+            DrErrorModule], exports: [DrCodemirrorComponent, DrCodeEditorComponent, CodeEditorHintWrapperComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrCodeEditorModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            DrTooltipModule,
+            DrErrorModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrCodeEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        DrTooltipModule,
+                        DrErrorModule
+                    ],
+                    exports: [DrCodemirrorComponent, DrCodeEditorComponent, CodeEditorHintWrapperComponent],
+                    providers: [],
+                    declarations: [DrCodemirrorComponent, DrCodeEditorComponent, CodeEditorHintWrapperComponent],
+                }]
+        }] });
+
 /* components */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AnyTagComponent, BadgeStatus, CHAT_MESSAGE_TYPE, CalendarView, ChatMessage, ChatRole, CheckboxComponent, ClickOutsideDirective, ClickOutsideModule, CustomDateFormat, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DateTags, DayTagComponent, DefaultToastrComponent, DefaultTreeviewEventParser, DefaultTreeviewI18n, DialogModalWrapperComponent, DialogService, DialogWrapperComponent, DownlineTreeviewEventParser, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAlertComponent, DrAlertModule, DrAlertTheme, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrAvatarService, DrBadgeStatusComponent, DrBadgeStatusModule, DrButtonComponent, DrChatAlertComponent, DrChatComponent, DrChatCustomMessageDirective, DrChatFormComponent, DrChatMessageComponent, DrChatMessageFileComponent, DrChatMessageTextComponent, DrChatModule, DrChatSuggestionsComponent, DrDatePickerComponent, DrDatePickerCustomHeaderComponent, DrDatePickerFormatDirective, DrDatePickerRangeComponent, DrDatePickerWithTimeframeComponent, DrDetailsListComponent, DrDetailsListModule, DrDialogModule, DrDotFlashingComponent, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrErrorComponent, DrErrorModule, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrScenarioConfigurationComponent, DrScenarioModule, DrScenarioTagConfigurationComponent, DrSelectAddItemComponent, DrSelectComponent, DrSharedUtils, DrShowTimeframePipe, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrStepperModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrTagsConstructorComponent, DrTagsConstructorModule, DrToastrModule, DrToastrService, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, FeedbackSentiment, ForecastTagComponent, IMAGE_TYPES, ListTagComponent, ListTagModule, MonthTagComponent, OrderDownlineTreeviewEventParser, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, Scenario, ScenarioService, StepperComponent, TagTypes, TagsConfigSubType, TagsConstructorService, TimeframeOption, ToastrStatus, ToastrStatusIcon, ToggleButtonMode, TooltipComponent, TooltipDefaultComponent, TooltipInfoComponent, TooltipInfoSimpleComponent, TooltipNoBodyComponent, TooltipPosition, TooltipProcessDefaultComponent, TooltipTheme, TreeviewComponent, TreeviewConfig, TreeviewEventParser, TreeviewHelper, TreeviewI18n, TreeviewItem, TreeviewModule, TreeviewPipe, WeekTagComponent, YearTagComponent };
+export { AnyTagComponent, BadgeStatus, CHAT_MESSAGE_TYPE, CalendarView, ChatMessage, ChatRole, CheckboxComponent, ClickOutsideDirective, ClickOutsideModule, CodeEditorHintWrapperComponent, CustomDateFormat, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DateTags, DayTagComponent, DefaultToastrComponent, DefaultTreeviewEventParser, DefaultTreeviewI18n, DialogModalWrapperComponent, DialogService, DialogWrapperComponent, DownlineTreeviewEventParser, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAlertComponent, DrAlertModule, DrAlertTheme, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrAvatarService, DrBadgeStatusComponent, DrBadgeStatusModule, DrButtonComponent, DrChatAlertComponent, DrChatComponent, DrChatCustomMessageDirective, DrChatFormComponent, DrChatMessageComponent, DrChatMessageFileComponent, DrChatMessageTextComponent, DrChatModule, DrChatSuggestionsComponent, DrCodeEditorComponent, DrCodeEditorModule, DrCodemirrorComponent, DrDatePickerComponent, DrDatePickerCustomHeaderComponent, DrDatePickerFormatDirective, DrDatePickerRangeComponent, DrDatePickerWithTimeframeComponent, DrDetailsListComponent, DrDetailsListModule, DrDialogModule, DrDotFlashingComponent, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrErrorComponent, DrErrorModule, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrScenarioConfigurationComponent, DrScenarioModule, DrScenarioTagConfigurationComponent, DrSelectAddItemComponent, DrSelectComponent, DrSharedUtils, DrShowTimeframePipe, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrStepperModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrTagsConstructorComponent, DrTagsConstructorModule, DrToastrModule, DrToastrService, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, FeedbackSentiment, ForecastTagComponent, ICodeEditorHintIcon, IMAGE_TYPES, ListTagComponent, ListTagModule, MonthTagComponent, OrderDownlineTreeviewEventParser, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, Scenario, ScenarioService, StepperComponent, TagTypes, TagsConfigSubType, TagsConstructorService, TimeframeOption, ToastrStatus, ToastrStatusIcon, ToggleButtonMode, TooltipComponent, TooltipDefaultComponent, TooltipInfoComponent, TooltipInfoSimpleComponent, TooltipNoBodyComponent, TooltipPosition, TooltipProcessDefaultComponent, TooltipTheme, TreeviewComponent, TreeviewConfig, TreeviewEventParser, TreeviewHelper, TreeviewI18n, TreeviewItem, TreeviewModule, TreeviewPipe, WeekTagComponent, YearTagComponent };
 //# sourceMappingURL=datarailsshared-datarailsshared.mjs.map