@bnsights/bbsf-controls 1.0.149 → 1.0.151

package/fesm2022/bnsights-bbsf-controls.mjs

@@ -52,7 +52,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';
 import * as i3 from '@bnsights/bbsf-utilities';
 import { RequestOptionsModel, environment as environment$1, BBSFUtilitiesModule, UtilityService, ConfigurationService, EnvironmentService, AuthService } from '@bnsights/bbsf-utilities';
-import { Subject, noop as noop$1, of, Observable, EMPTY, Subscription } from 'rxjs';
+import { Subject, noop as noop$1, of, Observable, EMPTY, Subscription, switchMap as switchMap$1 } from 'rxjs';
 import { map, tap, switchMap } from 'rxjs/operators';
 import * as i6 from '@angular/cdk/bidi';
 import dayGridPlugin from '@fullcalendar/daygrid';
@@ -68,6 +68,8 @@ import { ScriptLoaderModule } from 'ngx-script-loader';
 import * as i8$2 from '@angular/google-maps';
 import { GoogleMapsModule } from '@angular/google-maps';
 import { plainToClass } from 'class-transformer';
+import * as i8$4 from 'ngx-markdown-editor';
+import { LMarkdownEditorModule } from 'ngx-markdown-editor';
 import { Title } from '@angular/platform-browser';
 import { saveAs } from 'file-saver';
 
@@ -7023,7 +7025,6 @@ class TextAreaComponent {
         this.minCharsLimit = -1; //To disable chars limit feature by default
         this.maxLimitWarningMsg = "";
         this.isMicOn = false;
-        this.isSpeechLanguageOpened = false;
         this.resetError = () => {
             this.controlValidationService.removeGlobalError();
         };
@@ -7207,6 +7208,7 @@ class TextAreaComponent {
             this.loadSelectedSpeechLanguage();
         }
         this.group.get(languageControlName).setValue(this.options.selectedSpeechLanguage);
+        this.selectedSpeechLanguageDisplayText = this.options.speechLanguages.find(l => l.dialect == this.options.selectedSpeechLanguage).prefix;
     }
     loadSelectedSpeechLanguage() {
         if (!this.options.selectedSpeechLanguage) {
@@ -7226,6 +7228,8 @@ class TextAreaComponent {
             this.utilityService.notifyErrorMessage(this.utilityService.getResourceValue("BrowserNotSupportSpeechRecognition"));
             return;
         }
+        //Disable Select Language
+        this.enableOrDisableLanguageSelect(false);
         this.isMicOn = true;
         this.subscription = this.speechRecognitionService.startListening(this.options.selectedSpeechLanguage).subscribe({
             next: (transcript) => {
@@ -7248,11 +7252,14 @@ class TextAreaComponent {
                 this.stopSpeechRecognition();
             },
             complete: () => {
+                //Enable Select Language
+                this.enableOrDisableLanguageSelect();
                 this.isMicOn = false;
             }
         });
     }
     stopSpeechRecognition() {
+        this.enableOrDisableLanguageSelect();
         if (!this.speechRecognitionService.isSupported) {
             return;
         }
@@ -7266,28 +7273,32 @@ class TextAreaComponent {
         this.stopSpeechRecognition();
     }
     onSpeechLanguageChange(event) {
-        this.isSpeechLanguageOpened = false;
-        let selectedLang = event.target.value;
-        this.options.selectedSpeechLanguage = selectedLang;
+        let selectedLang_Dialect = event.target.value;
+        this.selectedSpeechLanguageDisplayText = this.options.speechLanguages.find(l => l.dialect == selectedLang_Dialect).prefix;
+        this.options.selectedSpeechLanguage = selectedLang_Dialect;
         const languageControlName = this.options.name + 'Language';
-        this.group.get(languageControlName).setValue(selectedLang);
+        let select = this.group.get(languageControlName);
+        select.setValue(selectedLang_Dialect);
         if (this.options.autoSaveSpeechLanguagetoLocalStorage) {
-            localStorage.setItem("speechLanguage", selectedLang);
+            localStorage.setItem("speechLanguage", selectedLang_Dialect);
         }
     }
-    onSpeechLanguageBlur() {
-        setTimeout(() => this.isSpeechLanguageOpened = false, 200);
-    }
-    // Handle on click (on open)
-    onSpeechLanguageMouseDown() {
-        this.isSpeechLanguageOpened = true;
+    enableOrDisableLanguageSelect(isEnabled = true) {
+        const languageControlName = this.options.name + 'Language';
+        let select = this.group.get(languageControlName);
+        if (isEnabled) {
+            select.enable();
+        }
+        else {
+            select.disable();
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TextAreaComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: i3.SpeechRecognitionService }, { token: i3.LanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: TextAreaComponent, selector: "BBSF-TextArea", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-textarea\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n      {{options.labelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n        class=\"text-danger\">*</span>\r\n    </label>\r\n    <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\" [ngClass]=\"{\r\n      'p-120px': options.enableSpeechRecognition && options.enableCopyToClipboard,\r\n      'p-80px': options.enableSpeechRecognition && !options.enableCopyToClipboard,\r\n      'p-40px': !options.enableSpeechRecognition && options.enableCopyToClipboard\r\n    }\">\r\n      <!--input-->\r\n      <textarea class=\"form-control {{options.extraClasses}}\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n        [dir]=\"textDir\" aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.name}}\"\r\n        [class.is-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" autocomplete=\"{{options.autoComplete}}\"\r\n        (change)=\"trimControlValue()\" rows=\"{{options.rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.cols}}\"\r\n        maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\" [(ngModel)]=\"options.value\"\r\n        (keydown)=\"wordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n        #TextAreainput></textarea>\r\n      <!--CopyToClipboard-->\r\n      <div class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </div>\r\n      <div [ngClass]=\"{'expanded': isFocused}\" class=\"language-container {{options.extraClassMicLanguage}}\" *ngIf=\"options.enableSpeechRecognition\">\r\n        <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"options.iconMic? options.iconMic : './src/assets/images/mic.svg'\" (click)=\"startSpeechRecognition()\"\r\n            *ngIf=\"!isMicOn\">\r\n        </span>\r\n        <span class=\"svg-icon svg-icon-5\"  [inlineSVG]=\"options.iconMicOff? options.iconMicOff : './src/assets/images/mic-off.svg'\" (click)=\"stopSpeechRecognition()\"\r\n            *ngIf=\"isMicOn\">\r\n        </span>\r\n        <select (blur)=\"onSpeechLanguageBlur()\" (mousedown)=\"onSpeechLanguageMouseDown()\"\r\n                [ngClass]=\"{'speechlanguage-open': isSpeechLanguageOpened}\"   class=\"language-select\" [formControlName]=\"options.name + 'Language'\" (change)=\"onSpeechLanguageChange($event)\">\r\n          <option *ngFor=\"let language of options.speechLanguages\" [value]=\"language.dialect\">\r\n            {{ isSpeechLanguageOpened ? language.name : language.prefix }}\r\n          </option>\r\n        </select>\r\n\r\n    </div>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\">{{options.value}}</span>\r\n    </div>\r\n    <div class=\"subtext-container\">\r\n      <!--wordCount-->\r\n      <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowWordCount\">\r\n        {{wordCount}}/{{options.maxWordCount}} Words</div>\r\n      <!-- CharsLimitMsg-->\r\n      <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n        [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n        {{maxLimitWarningMsg}}\r\n      </div>\r\n      <!-- LabelDescription-->\r\n      <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n      <!-- requiredText-->\r\n      <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\">\r\n        {{getErrorValidation(textAreaFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n      {{resetError()}}</div>\r\n  </div>\r\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i7.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8$3.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: TextAreaComponent, selector: "BBSF-TextArea", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-textarea\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n      {{options.labelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n        class=\"text-danger\">*</span>\r\n    </label>\r\n    <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\" [ngClass]=\"{\r\n      'p-120px': options.enableSpeechRecognition && options.enableCopyToClipboard,\r\n      'p-80px': options.enableSpeechRecognition && !options.enableCopyToClipboard,\r\n      'p-40px': !options.enableSpeechRecognition && options.enableCopyToClipboard\r\n    }\">\r\n      <!--input-->\r\n      <textarea class=\"form-control {{options.extraClasses}}\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n        [dir]=\"textDir\" aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.name}}\"\r\n        [class.is-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" autocomplete=\"{{options.autoComplete}}\"\r\n        (change)=\"trimControlValue()\" rows=\"{{options.rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.cols}}\"\r\n        maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\" [(ngModel)]=\"options.value\"\r\n        (keydown)=\"wordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n        #TextAreainput></textarea>\r\n      <!--CopyToClipboard-->\r\n      <div class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </div>\r\n      <div [ngClass]=\"{'expanded': isFocused}\" class=\"language-container {{options.extraClassMicLanguage}}\" *ngIf=\"options.enableSpeechRecognition\">\r\n        <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"options.iconMic? options.iconMic : './src/assets/images/mic.svg'\" (click)=\"startSpeechRecognition()\"\r\n              *ngIf=\"!isMicOn\">\r\n        </span>\r\n        <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"options.iconMicOff? options.iconMicOff : './src/assets/images/mic-off.svg'\" (click)=\"stopSpeechRecognition()\"\r\n              *ngIf=\"isMicOn\">\r\n        </span>\r\n        <div>\r\n          <span class=\"language-text\">{{ selectedSpeechLanguageDisplayText }}</span>\r\n          <select class=\"language-select\" [formControlName]=\"options.name + 'Language'\" (change)=\"onSpeechLanguageChange($event)\">\r\n            <option *ngFor=\"let language of options.speechLanguages\" [value]=\"language.dialect\">\r\n              {{language.name}}\r\n            </option>\r\n          </select>\r\n\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\">{{options.value}}</span>\r\n    </div>\r\n    <div class=\"subtext-container\">\r\n      <!--wordCount-->\r\n      <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowWordCount\">\r\n        {{wordCount}}/{{options.maxWordCount}} Words</div>\r\n      <!-- CharsLimitMsg-->\r\n      <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n        [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n        {{maxLimitWarningMsg}}\r\n      </div>\r\n      <!-- LabelDescription-->\r\n      <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n      <!-- requiredText-->\r\n      <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\">\r\n        {{getErrorValidation(textAreaFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n      {{resetError()}}</div>\r\n  </div>\r\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i7.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8$3.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'BBSF-TextArea', template: "<div class=\"form-group bbsf-control bbsf-textarea\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n      {{options.labelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n        class=\"text-danger\">*</span>\r\n    </label>\r\n    <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\" [ngClass]=\"{\r\n      'p-120px': options.enableSpeechRecognition && options.enableCopyToClipboard,\r\n      'p-80px': options.enableSpeechRecognition && !options.enableCopyToClipboard,\r\n      'p-40px': !options.enableSpeechRecognition && options.enableCopyToClipboard\r\n    }\">\r\n      <!--input-->\r\n      <textarea class=\"form-control {{options.extraClasses}}\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n        [dir]=\"textDir\" aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.name}}\"\r\n        [class.is-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" autocomplete=\"{{options.autoComplete}}\"\r\n        (change)=\"trimControlValue()\" rows=\"{{options.rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.cols}}\"\r\n        maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\" [(ngModel)]=\"options.value\"\r\n        (keydown)=\"wordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n        #TextAreainput></textarea>\r\n      <!--CopyToClipboard-->\r\n      <div class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </div>\r\n      <div [ngClass]=\"{'expanded': isFocused}\" class=\"language-container {{options.extraClassMicLanguage}}\" *ngIf=\"options.enableSpeechRecognition\">\r\n        <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"options.iconMic? options.iconMic : './src/assets/images/mic.svg'\" (click)=\"startSpeechRecognition()\"\r\n            *ngIf=\"!isMicOn\">\r\n        </span>\r\n        <span class=\"svg-icon svg-icon-5\"  [inlineSVG]=\"options.iconMicOff? options.iconMicOff : './src/assets/images/mic-off.svg'\" (click)=\"stopSpeechRecognition()\"\r\n            *ngIf=\"isMicOn\">\r\n        </span>\r\n        <select (blur)=\"onSpeechLanguageBlur()\" (mousedown)=\"onSpeechLanguageMouseDown()\"\r\n                [ngClass]=\"{'speechlanguage-open': isSpeechLanguageOpened}\"   class=\"language-select\" [formControlName]=\"options.name + 'Language'\" (change)=\"onSpeechLanguageChange($event)\">\r\n          <option *ngFor=\"let language of options.speechLanguages\" [value]=\"language.dialect\">\r\n            {{ isSpeechLanguageOpened ? language.name : language.prefix }}\r\n          </option>\r\n        </select>\r\n\r\n    </div>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\">{{options.value}}</span>\r\n    </div>\r\n    <div class=\"subtext-container\">\r\n      <!--wordCount-->\r\n      <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowWordCount\">\r\n        {{wordCount}}/{{options.maxWordCount}} Words</div>\r\n      <!-- CharsLimitMsg-->\r\n      <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n        [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n        {{maxLimitWarningMsg}}\r\n      </div>\r\n      <!-- LabelDescription-->\r\n      <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n      <!-- requiredText-->\r\n      <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\">\r\n        {{getErrorValidation(textAreaFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n      {{resetError()}}</div>\r\n  </div>\r\n" }]
+            args: [{ selector: 'BBSF-TextArea', template: "<div class=\"form-group bbsf-control bbsf-textarea\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n      {{options.labelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n        class=\"text-danger\">*</span>\r\n    </label>\r\n    <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\" [ngClass]=\"{\r\n      'p-120px': options.enableSpeechRecognition && options.enableCopyToClipboard,\r\n      'p-80px': options.enableSpeechRecognition && !options.enableCopyToClipboard,\r\n      'p-40px': !options.enableSpeechRecognition && options.enableCopyToClipboard\r\n    }\">\r\n      <!--input-->\r\n      <textarea class=\"form-control {{options.extraClasses}}\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n        [dir]=\"textDir\" aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.name}}\"\r\n        [class.is-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" autocomplete=\"{{options.autoComplete}}\"\r\n        (change)=\"trimControlValue()\" rows=\"{{options.rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.cols}}\"\r\n        maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\" [(ngModel)]=\"options.value\"\r\n        (keydown)=\"wordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n        #TextAreainput></textarea>\r\n      <!--CopyToClipboard-->\r\n      <div class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </div>\r\n      <div [ngClass]=\"{'expanded': isFocused}\" class=\"language-container {{options.extraClassMicLanguage}}\" *ngIf=\"options.enableSpeechRecognition\">\r\n        <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"options.iconMic? options.iconMic : './src/assets/images/mic.svg'\" (click)=\"startSpeechRecognition()\"\r\n              *ngIf=\"!isMicOn\">\r\n        </span>\r\n        <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"options.iconMicOff? options.iconMicOff : './src/assets/images/mic-off.svg'\" (click)=\"stopSpeechRecognition()\"\r\n              *ngIf=\"isMicOn\">\r\n        </span>\r\n        <div>\r\n          <span class=\"language-text\">{{ selectedSpeechLanguageDisplayText }}</span>\r\n          <select class=\"language-select\" [formControlName]=\"options.name + 'Language'\" (change)=\"onSpeechLanguageChange($event)\">\r\n            <option *ngFor=\"let language of options.speechLanguages\" [value]=\"language.dialect\">\r\n              {{language.name}}\r\n            </option>\r\n          </select>\r\n\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\">{{options.value}}</span>\r\n    </div>\r\n    <div class=\"subtext-container\">\r\n      <!--wordCount-->\r\n      <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowWordCount\">\r\n        {{wordCount}}/{{options.maxWordCount}} Words</div>\r\n      <!-- CharsLimitMsg-->\r\n      <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n        [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n        {{maxLimitWarningMsg}}\r\n      </div>\r\n      <!-- LabelDescription-->\r\n      <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n      <!-- requiredText-->\r\n      <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\">\r\n        {{getErrorValidation(textAreaFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n      {{resetError()}}</div>\r\n  </div>\r\n" }]
         }], ctorParameters: () => [{ type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
                     type: Optional
                 }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }, { type: i3.SpeechRecognitionService }, { type: i3.LanguageService }], propDecorators: { group: [{
@@ -8317,6 +8328,248 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
                 args: ['delete', { static: false }]
             }] } });
 
+var MarkdownMode;
+(function (MarkdownMode) {
+    MarkdownMode["editor"] = "editor";
+    MarkdownMode["preview"] = "preview";
+})(MarkdownMode || (MarkdownMode = {}));
+var MarkDownIcons;
+(function (MarkDownIcons) {
+    MarkDownIcons["Bold"] = "Bold";
+    MarkDownIcons["Italic"] = "Italic";
+    MarkDownIcons["Heading"] = "Heading";
+    MarkDownIcons["Reference"] = "Reference";
+    MarkDownIcons["Link"] = "Link";
+    MarkDownIcons["Image"] = "Image";
+    MarkDownIcons["Ul"] = "Ul";
+    MarkDownIcons["Ol"] = "Ol";
+    MarkDownIcons["Code"] = "Code";
+    MarkDownIcons["TogglePreview"] = "TogglePreview";
+    MarkDownIcons["FullScreen"] = "FullScreen";
+})(MarkDownIcons || (MarkDownIcons = {}));
+
+class MarkdownEditorComponent {
+    static { this.controlContainerstatic = null; }
+    constructor(utilityService, globalSettings, controlValidationService, controlUtility, markdownEditorControlHost, scriptService, controlContainer) {
+        this.utilityService = utilityService;
+        this.globalSettings = globalSettings;
+        this.controlValidationService = controlValidationService;
+        this.controlUtility = controlUtility;
+        this.markdownEditorControlHost = markdownEditorControlHost;
+        this.scriptService = scriptService;
+        this.controlContainer = controlContainer;
+        this.OnChange = new EventEmitter();
+        this.hideToolbar = false;
+        this.validationRules = [];
+        this.validationRulesasync = [];
+        this.markAllAsTouched = false;
+        this.showMarkdown = false;
+        this.btnsText = {
+            Buttons: {
+                Bold: { title: this.utilityService.getResourceValue('Bold') },
+                Italic: { title: this.utilityService.getResourceValue('Italic') },
+                Heading: { title: this.utilityService.getResourceValue('Heading') },
+                Reference: { title: this.utilityService.getResourceValue('Reference') },
+                Link: { title: this.utilityService.getResourceValue('Link') },
+                Image: { title: this.utilityService.getResourceValue('Image') },
+                UnorderedList: { title: this.utilityService.getResourceValue('UnorderedList') },
+                OrderedList: { title: this.utilityService.getResourceValue('OrderedList') },
+                CodeBlock: { title: this.utilityService.getResourceValue('CodeBlock') },
+                ShowPreview: { title: this.utilityService.getResourceValue('ShowPreview') },
+                HidePreview: { title: this.utilityService.getResourceValue('HidePreview') },
+                Fullscreen: { title: this.utilityService.getResourceValue('Fullscreen') }
+            },
+            Upload: {
+                Drag: this.utilityService.getResourceValue('DragHere'),
+                Uploading: this.utilityService.getResourceValue('Uploading')
+            }
+        };
+        this.locales = {
+            en: this.btnsText,
+            ar: this.btnsText
+        };
+        this.resetError = () => {
+            this.controlValidationService.removeGlobalError();
+        };
+        //External Method
+        this.removeRequiredValidation = () => {
+            this.controlUtility.removeRequiredValidation(this.markdownEditorFormControl, this.validationRules, this.options);
+        };
+        //External Method
+        this.addRequiredValidation = () => {
+            this.controlUtility.addRequiredValidation(this.markdownEditorFormControl, this.validationRules, this.options);
+        };
+        //External Method
+        this.removeCustomValidation = (customValidation) => {
+            this.controlUtility.removeCustomValidation(this.markdownEditorFormControl, this.validationRules, customValidation);
+        };
+        //External Method
+        this.addCustomValidation = (customValidation) => {
+            this.controlUtility.addCustomValidation(this.markdownEditorFormControl, this.validationRules, customValidation);
+        };
+        //External Method
+        this.isValid = () => {
+            this.controlUtility.isValid(this.markdownEditorFormControl);
+        };
+        MarkdownEditorComponent.controlContainerstatic = this.controlContainer;
+        this.currentLocale = this.utilityService.getCurrentLanguage();
+    }
+    loadAllScripts() {
+        return this.scriptService.loadScript('assets/ace-builds/ace.js').pipe(switchMap$1(() => this.scriptService.loadScript('assets/ace-builds/mode-markdown.js')), switchMap$1(() => this.scriptService.loadScript('assets/ngx-markdown-editor/marked.min.js')), switchMap$1(() => this.scriptService.loadScript('assets/ngx-markdown-editor/highlight.js/highlight.min.js')));
+    }
+    ngOnInit() {
+        this.loadAllScripts()
+            .subscribe({
+            next: () => this.showMarkdown = true,
+            error: (err) => console.error('Error loading scripts', err)
+        });
+        this.mode = this.options.isReadonly ? MarkdownMode.preview : MarkdownMode.editor;
+        this.editorOptions = {
+            hideIcons: this.options.hideIcons,
+            showPreviewPanel: this.options.showPreviewPanelOnLoad,
+            resizable: false,
+            enablePreviewContentClick: this.options.isReadonly,
+            markedjsOpt: {
+                breaks: true,
+                sanitize: true,
+                smartypants: true,
+                xhtml: true,
+            },
+            customRender: this.options.customRender,
+            placeholder: this.options.placeholder,
+            locales: this.locales,
+            customIcons: {
+                CodeBlock: {
+                    fontClass: 'fa fa-file-code'
+                }
+            }
+        };
+        this.controlValidationService.isCreatedBefor = false;
+        this.group.addControl(this.options.name, new FormControl(''));
+        this.markdownEditorFormControl = this.group.controls[this.options.name]; //  new FormControl('',validationRules);
+        this.markdownEditorFormControl.setValue(this.options.value);
+        if (!this.options.viewType)
+            this.options.viewType = this.globalSettings.viewType;
+        if (this.options.customValidation.length > 0) {
+            let validations = this.options.customValidation;
+            for (let index = 0; index < validations.length; index++) {
+                const Validation = validations[index];
+                this.validationRules.push(Validation.functionBody);
+            }
+        }
+        if (this.options.labelKey != null && this.options.labelKey != "")
+            this.options.labelValue = this.utilityService.getResourceValue(this.options.labelKey);
+        if (this.options.minLength > 0) {
+            this.validationRules.push(Validators.minLength(this.options.minLength));
+        }
+        if (this.options.maxLength > 0) {
+            this.validationRules.push(Validators.maxLength(this.options.maxLength));
+        }
+        if (this.options.isRequired) {
+            this.validationRules.push(Validators.required);
+        }
+        this.markdownEditorFormControl.setValidators(this.validationRules);
+        this.markdownEditorFormControl.setAsyncValidators(this.validationRulesasync);
+        if (this.options.isDisabled) {
+            this.markdownEditorFormControl.disable();
+        }
+        this.markdownEditorControlHost.ngSubmit.subscribe((value) => {
+            this.group.markAllAsTouched();
+            this.markAllAsTouched = true;
+        });
+    }
+    uploadImg(evt) {
+        if (!evt)
+            return;
+        const file = evt.target.files[0];
+        const reader = new FileReader();
+        reader.addEventListener('load', () => {
+            this.options.value += `![](${reader.result})`;
+        }, false);
+        if (file)
+            reader.readAsDataURL(file);
+    }
+    onPreviewDomChanged(dom) {
+        this.OnChange.emit(dom);
+    }
+    showGlobalError() {
+        this.controlUtility.showGlobalError();
+    }
+    getErrorValidation(ErrorList) {
+        if (this.markAllAsTouched && this.group.invalid) {
+            this.showGlobalError();
+            this.markAllAsTouched = false;
+        }
+        return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
+    }
+    //Fires on markdown editor has been loaded
+    onEditorLoaded(editor) {
+        if (this.options.isDisabled) {
+            const textarea = editor.renderer.textarea;
+            if (textarea && this.options.isDisabled) {
+                textarea.setAttribute('disabled', 'true');
+            }
+            this.hideToolbar = true;
+        }
+    }
+    //The doUpload method handles file uploads when users add images or other files to the editor.
+    //This method should be implemented to manage file uploads to a server or cloud storage and return the result to the editor.
+    //fires on drag and drop or copy paste
+    //if not set will can't add files or images using this way
+    onDragFile(files) {
+        const results = [];
+        // Function to handle a single file
+        const processFile = (file) => {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = () => {
+                    const fileUrl = reader.result;
+                    const result = {
+                        name: file.name,
+                        url: fileUrl,
+                        isImg: file.type.startsWith('image/')
+                    };
+                    resolve(result);
+                };
+                reader.onerror = (error) => {
+                    reject(error);
+                };
+                // Read the file as a data URL
+                reader.readAsDataURL(file);
+            });
+        };
+        //  // Iterate over files and process each one
+        const processAllFiles = async () => {
+            for (const file of files) {
+                try {
+                    const result = await processFile(file);
+                    results.push(result);
+                }
+                catch (error) {
+                    console.error('Error processing file:', error);
+                }
+            }
+            return results;
+        };
+        //Return the promise that resolves when all files are processed
+        return processAllFiles();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MarkdownEditorComponent, deps: [{ token: i3.UtilityService }, { token: GlobalSettings }, { token: i3.ControlValidationService }, { token: ControlUtility }, { token: i2.FormGroupDirective }, { token: i5$2.ScriptService }, { token: i2.ControlContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: MarkdownEditorComponent, selector: "BBSF-MarkdownEditor", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange" }, ngImport: i0, template: "<ng-container *ngIf=\"showMarkdown\">\r\n  <div class=\"form-group bbsf-control bbsf-htmleditor\" [formGroup]=\"group\">\r\n    <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n      <!--label-->\r\n      <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n        {{options.labelValue}}\r\n        <!--Asterisk-->\r\n        <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n          class=\"text-danger\">*</span>\r\n      </label>\r\n      <div  class=\"bbsf-input-container {{options.extraClasses}}\">\r\n          <md-editor   id=\"{{options.name}}\" formControlName=\"{{options.name}}\"\r\n         (onPreviewDomChanged)=\"onPreviewDomChanged($event)\"\r\n         [(ngModel)]=\"options.value\" [mode]=\"mode\" [options]=\"editorOptions\"  [attr.required]=\"options.isRequired ? true : null\" [upload]=\"onDragFile\" \r\n          [maxlength]=\"options.maxLength\" [height]=\"options.height\"  [locale]=\"currentLocale\"  (onEditorLoaded)=\"onEditorLoaded($event)\" [hideToolbar]=\"hideToolbar\">\r\n           <!-- [ngStyle]=\"{ 'direction': textDirection, 'text-align': textDirection === 'rtl' ? 'right' : 'left' }\" -->\r\n           <div custom-btns>\r\n            <input #imgInput type=\"file\" style=\"display: none\" (change)=\"uploadImg($event)\" />\r\n            <button type=\"button\" class=\"btn btn-sm btn-default\" (click)=\"imgInput.click()\">\r\n              {{utilityService.getResourceValue(\"UploadImg\")}}\r\n            </button>\r\n          </div>\r\n        </md-editor>\r\n      </div>\r\n\r\n      <div class=\"subtext-container\">\r\n        <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n        <div class=\"bbsf-validation\" *ngIf=\"(markdownEditorFormControl.invalid && markdownEditorFormControl.touched)\">\r\n          {{getErrorValidation(markdownEditorFormControl.errors|keyvalue)}}\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n        {{resetError()}}</div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$4.MarkdownEditorComponent, selector: "md-editor", inputs: ["hideToolbar", "height", "preRender", "postRender", "upload", "locale", "maxlength", "mode", "options"], outputs: ["onEditorLoaded", "onPreviewDomChanged"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: MarkdownEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'BBSF-MarkdownEditor', template: "<ng-container *ngIf=\"showMarkdown\">\r\n  <div class=\"form-group bbsf-control bbsf-htmleditor\" [formGroup]=\"group\">\r\n    <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n      <!--label-->\r\n      <label *ngIf=\"!options.hideLabel\" class=\"bbsf-label {{options.labelExtraClasses}}\">\r\n        {{options.labelValue}}\r\n        <!--Asterisk-->\r\n        <span *ngIf=\"((options.showAsterisk&&options.isRequired)||(options.isRequired))&&!options.isReadonly\"\r\n          class=\"text-danger\">*</span>\r\n      </label>\r\n      <div  class=\"bbsf-input-container {{options.extraClasses}}\">\r\n          <md-editor   id=\"{{options.name}}\" formControlName=\"{{options.name}}\"\r\n         (onPreviewDomChanged)=\"onPreviewDomChanged($event)\"\r\n         [(ngModel)]=\"options.value\" [mode]=\"mode\" [options]=\"editorOptions\"  [attr.required]=\"options.isRequired ? true : null\" [upload]=\"onDragFile\" \r\n          [maxlength]=\"options.maxLength\" [height]=\"options.height\"  [locale]=\"currentLocale\"  (onEditorLoaded)=\"onEditorLoaded($event)\" [hideToolbar]=\"hideToolbar\">\r\n           <!-- [ngStyle]=\"{ 'direction': textDirection, 'text-align': textDirection === 'rtl' ? 'right' : 'left' }\" -->\r\n           <div custom-btns>\r\n            <input #imgInput type=\"file\" style=\"display: none\" (change)=\"uploadImg($event)\" />\r\n            <button type=\"button\" class=\"btn btn-sm btn-default\" (click)=\"imgInput.click()\">\r\n              {{utilityService.getResourceValue(\"UploadImg\")}}\r\n            </button>\r\n          </div>\r\n        </md-editor>\r\n      </div>\r\n\r\n      <div class=\"subtext-container\">\r\n        <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n        <div class=\"bbsf-validation\" *ngIf=\"(markdownEditorFormControl.invalid && markdownEditorFormControl.touched)\">\r\n          {{getErrorValidation(markdownEditorFormControl.errors|keyvalue)}}\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n        {{resetError()}}</div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [{ type: i3.UtilityService }, { type: GlobalSettings }, { type: i3.ControlValidationService }, { type: ControlUtility }, { type: i2.FormGroupDirective }, { type: i5$2.ScriptService }, { type: i2.ControlContainer, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { group: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], OnChange: [{
+                type: Output
+            }] } });
+
 let options;
 class BBSFControlsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: BBSFControlsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -8352,7 +8605,8 @@ class BBSFControlsModule {
             BBSFDatePipe,
             BTagsInputComponent,
             RecaptchaComponent,
-            PageHeaderComponentComponent], imports: [CommonModule,
+            PageHeaderComponentComponent,
+            MarkdownEditorComponent], imports: [CommonModule,
             InfiniteScrollModule,
             NgSelectModule,
             FullCalendarModule,
@@ -8373,7 +8627,8 @@ class BBSFControlsModule {
             AutocompleteLibModule,
             BBSFUtilitiesModule, i8$3.InlineSVGModule, SweetAlert2Module,
             ScriptLoaderModule,
-            GoogleMapsModule], exports: [DateInputComponent,
+            GoogleMapsModule,
+            LMarkdownEditorModule], exports: [DateInputComponent,
             FileUploadComponent,
             MultiLingualTextBoxComponent,
             TextboxComponent,
@@ -8405,7 +8660,8 @@ class BBSFControlsModule {
             BBSFDateTimePipe,
             BBSFDatePipe,
             RecaptchaComponent,
-            PageHeaderComponentComponent] }); }
+            PageHeaderComponentComponent,
+            MarkdownEditorComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: BBSFControlsModule, providers: [
             ErrorMassageValidation,
             ControlUtility,
@@ -8450,7 +8706,8 @@ class BBSFControlsModule {
             InlineSVGModule.forRoot(),
             SweetAlert2Module,
             ScriptLoaderModule,
-            GoogleMapsModule] }); }
+            GoogleMapsModule,
+            LMarkdownEditorModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: BBSFControlsModule, decorators: [{
             type: NgModule,
@@ -8488,7 +8745,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
                         BBSFDatePipe,
                         BTagsInputComponent,
                         RecaptchaComponent,
-                        PageHeaderComponentComponent
+                        PageHeaderComponentComponent,
+                        MarkdownEditorComponent
                     ],
                     imports: [
                         CommonModule,
@@ -8523,7 +8781,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
                         InlineSVGModule.forRoot(),
                         SweetAlert2Module,
                         ScriptLoaderModule,
-                        GoogleMapsModule
+                        GoogleMapsModule,
+                        LMarkdownEditorModule
                     ],
                     providers: [
                         ErrorMassageValidation,
@@ -8576,7 +8835,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
                         BBSFDateTimePipe,
                         BBSFDatePipe,
                         RecaptchaComponent,
-                        PageHeaderComponentComponent
+                        PageHeaderComponentComponent,
+                        MarkdownEditorComponent
                     ]
                 }]
         }] });
@@ -9264,6 +9524,29 @@ class BreadCrumb {
     }
 }
 
+class MarkdownEditorOptions extends ControlOptionsBase {
+    constructor() {
+        super(...arguments);
+        /**To set  value  to MarkdownEditor */
+        this.value = '';
+        //Enable viewing preview panel
+        this.showPreviewPanelOnLoad = true;
+        /**
+         * Array of icons to be hidden from the toolbar.
+         *
+         * You can populate this array with icon names from the `MarkDownIcons` enum.
+         * This allows you to customize the toolbar by hiding specific icons based on your requirements.
+         *
+         * @example
+         * // Hide the Bold and Italic icons
+         * hideIcons: [MarkDownIcons.Bold, MarkDownIcons.Italic];
+         */
+        this.hideIcons = [];
+        /** Set Height For MarkdownEditor ,default=400px */
+        this.height = '400px';
+    }
+}
+
 var MenuListType;
 (function (MenuListType) {
     MenuListType[MenuListType["AdminType"] = 1] = "AdminType";
@@ -9595,5 +9878,5 @@ var FileType;
  * Generated bundle index. Do not edit.
  */
 
-export { AddButton, AppBaseComponent, Attribute, AutocompleteDTO, AutocompleteOptions, AutocompleteTextBoxComponent, BBSFControlsModule, BBSFDatePipe, BBSFDateTimePipe, BreadCrumb, BreadCrumbModel, CalendarComponent, CalendarEventDTO, CalendarOptions, CalendarView, CancelDTO, CheckBoxComponent, CheckBoxOptions, ConfirmationModalComponent, ConfirmationModalOptions, ControlFilterItem, ControlLayout, ControlOptionsBase, ControlUtility, Country, CustomValidation, CustomValidator, DataType, DateInputComponent, DatePickerOptions, DefaultIntl, DeleteButton, DropdownActionItem, DropdownActions, DropdownListComponent, DropdownListItem, DropdownOptions, EditButton, EditPersonalImage, EnglishArabicDTO, ErrorMassageValidation, ExportButton, FileDTO, FileType, FileUploadComponent, FileUploadModel, FileUploadOptions, FilterItem, FilterOptions, FilterType, FiltersButton, FontSize, ForceDirection, FormComponent, FormOptions, GlobalSettings, GridViewModel, HtmlEditorComponent, HtmlEditorOptions, IconPosition, ImageType, ImageUploadOptions, ImageUploaderComponent, InputType, Insert, JwPaginationComponent, LanguageMode, LanguageValidation, MapAutoCompleteComponent, MapAutoCompleteOptions, MapAutocompleteDTO, MapSearchTypes, MenuListType, Misc, MultiLingualHtmlEditorComponent, MultiLingualHtmlEditorOptions, MultiLingualTextAreaComponent, MultiLingualTextAreaOptions, MultiLingualTextBoxComponent, MultiLingualTextBoxOptions, MultilingualControlOptionsBase, MultipleFileUploadModel, NgTemplateNameDirective, OnPagingFiltersChangeService, PageHeaderComponentComponent, PageHeaderOptions, PagingActionMode, PagingComponent, PagingDTO, PagingOptions, Para, PermissionSets, PhoneComponent, PhoneOptions, PickerType, ProfileImageUploadOptions, ProfileImageUploaderComponent, ProfilePictureDTO, RadioButtonComponent, RadioButtonItem, RadioButtonOptions, RangeNumber, RecaptchaComponent, RecaptchaModel, RecaptchaOptions, RenderComponentService, RepeaterComponent, RepeaterField, RepeaterFieldBuilderComponent, RepeaterItemFieldComponent, RepeaterOptions, RepeaterTableComponent, SaveDTO, SelectMode, StartView, Style, StyleConfirmationMode, TagInputView, TagsInputComponent, TagsInputDTO, TagsInputOptions, TextAreaComponent, TextAreaOptions, TextBoxModel, TextBoxOptions, TextboxComponent, ToggleSlideOptions, ToggleslideComponent, UploadPersonalImage, environment, options };
+export { AddButton, AppBaseComponent, Attribute, AutocompleteDTO, AutocompleteOptions, AutocompleteTextBoxComponent, BBSFControlsModule, BBSFDatePipe, BBSFDateTimePipe, BreadCrumb, BreadCrumbModel, CalendarComponent, CalendarEventDTO, CalendarOptions, CalendarView, CancelDTO, CheckBoxComponent, CheckBoxOptions, ConfirmationModalComponent, ConfirmationModalOptions, ControlFilterItem, ControlLayout, ControlOptionsBase, ControlUtility, Country, CustomValidation, CustomValidator, DataType, DateInputComponent, DatePickerOptions, DefaultIntl, DeleteButton, DropdownActionItem, DropdownActions, DropdownListComponent, DropdownListItem, DropdownOptions, EditButton, EditPersonalImage, EnglishArabicDTO, ErrorMassageValidation, ExportButton, FileDTO, FileType, FileUploadComponent, FileUploadModel, FileUploadOptions, FilterItem, FilterOptions, FilterType, FiltersButton, FontSize, ForceDirection, FormComponent, FormOptions, GlobalSettings, GridViewModel, HtmlEditorComponent, HtmlEditorOptions, IconPosition, ImageType, ImageUploadOptions, ImageUploaderComponent, InputType, Insert, JwPaginationComponent, LanguageMode, LanguageValidation, MapAutoCompleteComponent, MapAutoCompleteOptions, MapAutocompleteDTO, MapSearchTypes, MarkDownIcons, MarkdownEditorComponent, MarkdownEditorOptions, MarkdownMode, MenuListType, Misc, MultiLingualHtmlEditorComponent, MultiLingualHtmlEditorOptions, MultiLingualTextAreaComponent, MultiLingualTextAreaOptions, MultiLingualTextBoxComponent, MultiLingualTextBoxOptions, MultilingualControlOptionsBase, MultipleFileUploadModel, NgTemplateNameDirective, OnPagingFiltersChangeService, PageHeaderComponentComponent, PageHeaderOptions, PagingActionMode, PagingComponent, PagingDTO, PagingOptions, Para, PermissionSets, PhoneComponent, PhoneOptions, PickerType, ProfileImageUploadOptions, ProfileImageUploaderComponent, ProfilePictureDTO, RadioButtonComponent, RadioButtonItem, RadioButtonOptions, RangeNumber, RecaptchaComponent, RecaptchaModel, RecaptchaOptions, RenderComponentService, RepeaterComponent, RepeaterField, RepeaterFieldBuilderComponent, RepeaterItemFieldComponent, RepeaterOptions, RepeaterTableComponent, SaveDTO, SelectMode, StartView, Style, StyleConfirmationMode, TagInputView, TagsInputComponent, TagsInputDTO, TagsInputOptions, TextAreaComponent, TextAreaOptions, TextBoxModel, TextBoxOptions, TextboxComponent, ToggleSlideOptions, ToggleslideComponent, UploadPersonalImage, environment, options };
 //# sourceMappingURL=bnsights-bbsf-controls.mjs.map