@firestitch/html-editor 15.0.0 → 16.0.0

package/{fesm2020 → fesm2022}/firestitch-html-editor.mjs

@@ -16,18 +16,21 @@ import { merge, debounce } from 'lodash-es';
 import Tribute from 'tributejs';
 
 class FsHtmlRendererComponent {
+    sanitized;
+    _cdRef;
     set setHtml(html) {
         this.trustedHtml = this.sanitized.bypassSecurityTrustHtml(html || '');
         this._cdRef.markForCheck();
     }
+    trustedHtml;
     constructor(sanitized, _cdRef) {
         this.sanitized = sanitized;
         this._cdRef = _cdRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlRendererComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: { setHtml: ["html", "setHtml"] }, ngImport: i0, template: "<span class=\"fr-view fs-html-editor-default\" [innerHtml]=\"trustedHtml\"></span>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-FsHtmlRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsHtmlRendererComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FsHtmlRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: { setHtml: ["html", "setHtml"] }, ngImport: i0, template: "<span class=\"fr-view fs-html-editor-default\" [innerHtml]=\"trustedHtml\"></span>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsHtmlRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-html-renderer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"fr-view fs-html-editor-default\" [innerHtml]=\"trustedHtml\"></span>\n" }]
         }], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { setHtml: [{
@@ -36,11 +39,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class FsHtmlRendererModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlRendererModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlRendererModule, declarations: [FsHtmlRendererComponent], imports: [CommonModule], exports: [FsHtmlRendererComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlRendererModule, imports: [CommonModule] });
 }
-FsHtmlRendererModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsHtmlRendererModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsHtmlRendererModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FsHtmlRendererModule, declarations: [FsHtmlRendererComponent], imports: [CommonModule], exports: [FsHtmlRendererComponent] });
-FsHtmlRendererModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsHtmlRendererModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsHtmlRendererModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlRendererModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -59,10 +62,10 @@ class FsHtmlEditorContainerDirective {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlEditorContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FsHtmlEditorContainerDirective, selector: "[fsHtmlEditorContainer]", ngImport: i0 });
 }
-FsHtmlEditorContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsHtmlEditorContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FsHtmlEditorContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsHtmlEditorContainerDirective, selector: "[fsHtmlEditorContainer]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsHtmlEditorContainerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlEditorContainerDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[fsHtmlEditorContainer]' }]
         }] });
@@ -71,16 +74,19 @@ const FS_HTML_EDITOR_DEFAULT_CONFIG = new InjectionToken('fs-html-editor.default
 const FS_HTML_EDITOR_CONFIG = new InjectionToken('fs-html-editor.config');
 
 class FsFroalaLoaderService {
+    _defaultConfig;
+    _document;
+    _froalaEditor;
+    _froalaLoaded = new BehaviorSubject(false);
+    _froalaPluginsLoaded = new BehaviorSubject(false);
+    _sourceLoader = fsSourceLoader;
+    _loaded$ = combineLatest([this._froalaLoaded, this._froalaPluginsLoaded])
+        .pipe(map(([FroalaReady, pluginsRead]) => {
+        return pluginsRead && FroalaReady;
+    }), shareReplay(1));
     constructor(_defaultConfig, _document) {
         this._defaultConfig = _defaultConfig;
         this._document = _document;
-        this._froalaLoaded = new BehaviorSubject(false);
-        this._froalaPluginsLoaded = new BehaviorSubject(false);
-        this._sourceLoader = fsSourceLoader;
-        this._loaded$ = combineLatest([this._froalaLoaded, this._froalaPluginsLoaded])
-            .pipe(map(([FroalaReady, pluginsRead]) => {
-            return pluginsRead && FroalaReady;
-        }), shareReplay(1));
         this._sourceLoader.setDocument(this._document);
         this._load();
     }
@@ -135,10 +141,10 @@ class FsFroalaLoaderService {
     _froalaPluginsDone() {
         this._froalaPluginsLoaded.next(true);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsFroalaLoaderService, deps: [{ token: FS_HTML_EDITOR_CONFIG, optional: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsFroalaLoaderService, providedIn: 'root' });
 }
-FsFroalaLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFroalaLoaderService, deps: [{ token: FS_HTML_EDITOR_CONFIG, optional: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-FsFroalaLoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFroalaLoaderService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsFroalaLoaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsFroalaLoaderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -190,18 +196,27 @@ const TextButtons = [
 ];
 
 class FsHtmlEditorComponent {
+    _defaultConfig;
+    _cdRef;
+    _fr;
+    htmlEditorContainer;
+    classFocused = false;
+    elRef;
+    config = {};
+    disabled = false;
+    initialized = false;
+    containerID = `fs-html-editor-${guid('xxx')}`;
+    onTouched;
+    onChange;
+    _editor;
+    _html;
+    _initialize$ = new ReplaySubject();
+    _froalaReady$ = new BehaviorSubject(null);
+    _destroy$ = new Subject();
     constructor(_defaultConfig, _cdRef, _fr) {
         this._defaultConfig = _defaultConfig;
         this._cdRef = _cdRef;
         this._fr = _fr;
-        this.classFocused = false;
-        this.config = {};
-        this.disabled = false;
-        this.initialized = false;
-        this.containerID = `fs-html-editor-${guid('xxx')}`;
-        this._initialize$ = new ReplaySubject();
-        this._froalaReady$ = new BehaviorSubject(null);
-        this._destroy$ = new Subject();
     }
     get el() {
         return this.elRef.nativeElement;
@@ -614,27 +629,27 @@ class FsHtmlEditorComponent {
             this.focus();
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlEditorComponent, deps: [{ token: FS_HTML_EDITOR_CONFIG, optional: true }, { token: i0.ChangeDetectorRef }, { token: FsFroalaLoaderService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FsHtmlEditorComponent, selector: "fs-html-editor", inputs: { config: "config", disabled: "disabled" }, host: { properties: { "class.focused": "this.classFocused", "class.disabled": "this.disabled", "class.initialized": "this.initialized" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => FsHtmlEditorComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => FsHtmlEditorComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "htmlEditorContainer", first: true, predicate: FsHtmlEditorContainerDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["elRef"], descendants: true }], ngImport: i0, template: "<fs-label-field>\n  <div class=\"outline\">\n    <div class=\"outline-overlay\"></div>\n    <fs-label *ngIf=\"config.label\">{{config.label}}</fs-label>\n    <ng-container *ngIf=\"htmlEditorContainer; else htmlEditorContainerTmpl\">\n      <ng-container \n        [ngTemplateOutlet]=\"htmlEditorContainer\" \n        [ngTemplateOutletContext]=\"{ template: htmlEditorContainerTmpl }\">\n      </ng-container>\n    </ng-container>\n    <ng-template #htmlEditorContainerTmpl>\n      <div\n          class=\"html-editor-container fs-html-editor-default\"\n          [id]=\"containerID\"\n          [ngClass]=\"{\n            'init-on-click': config.initOnClick\n          }\">\n        <ng-container *fsSkeleton=\"(froalaLoaded$ | async) !== false\"></ng-container>\n        <div #elRef></div>\n      </div>\n    </ng-template>\n  </div>\n\n  <fs-label-message>\n    <div class=\"fs-form-message\">\n      <div class=\"fs-form-hint\">{{config.hint}}</div>\n    </div>\n  </fs-label-message>\n</fs-label-field>\n", styles: [":host{position:relative;display:block}:host.initialized .outline-overlay{border:1px solid transparent;position:absolute;inset:-1px;border-width:2px}:host.initialized .outline,:host.initialized .outline-overlay{border-radius:5px}:host.initialized .outline{border:1px solid #E0E0E0;position:relative;padding:0 .75em}:host.initialized .outline fs-label{background:#fff;top:-5px;position:absolute;left:11px;padding:0 3px;z-index:5}:host.initialized:not(.focused):not(.disabled):hover .outline-overlay{border-color:#212121}:host:not(.initialized) ::ng-deep .fr-toolbar{display:none}:host ::ng-deep fs-label-field{margin:.25em 0}:host ::ng-deep .fr-wrapper{border:none!important}:host ::ng-deep .fr-toolbar.fr-top{margin-top:2px}:host ::ng-deep .fr-box.fr-basic .fr-wrapper{border:0;border-bottom:1px solid #949494;margin-bottom:1px;background-color:transparent}:host ::ng-deep .fr-box.fr-basic .fr-element{padding:0;font-family:inherit;color:inherit;font-size:inherit;line-height:inherit;min-height:auto}:host ::ng-deep .fr-more-toolbar,:host ::ng-deep .fr-toolbar,:host ::ng-deep .fr-dropdown:after,:host ::ng-deep .fr-dropdown-menu .fr-dropdown-wrapper{transition:none!important}:host ::ng-deep .fr-toolbar-open .fr-more-toolbar{display:block}:host ::ng-deep .fr-more-toolbar{display:none}:host ::ng-deep .fr-toolbar.fr-top{position:sticky;z-index:2;border-radius:0;background-color:#fff}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp{margin:0 20px 0 0}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:nth-child(1):after,:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:nth-child(2):after{content:\"\";position:absolute;top:9px;height:30px;border-left:1px solid #e5e5e5;margin-left:10px}:host ::ng-deep .fr-toolbar.fr-top div:first-of-type:before{border:none}:host ::ng-deep .fr-toolbar.fr-top.fr-toolbar-open .fr-newline{height:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:first-child{margin-left:0}:host ::ng-deep .fr-toolbar.fr-top.fr-top{border:0}:host ::ng-deep .fr-toolbar.fr-top .fr-newline{margin:0}:host ::ng-deep .fr-toolbar.fr-top .fr-more-toolbar{z-index:auto;display:flex;justify-content:center;padding-left:0!important}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn{z-index:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown:after{right:3px}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown.fr-selection span{margin-right:24px}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-open{border-radius:4px;margin:4px 2px}:host ::ng-deep .fr-view ol,:host ::ng-deep .fr-view ul{list-style-position:unset}:host.disabled ::ng-deep .fr-box.fr-basic{opacity:.5;pointer-events:none}:host.disabled ::ng-deep .fr-box.fr-basic .fr-wrapper{border:none}::ng-deep .fr-popup{z-index:1001!important}::ng-deep .fr-video-by-url-layer .fr-checkbox-line{display:none}::ng-deep .fs-html-editor-mention-container{position:absolute;top:0;left:0;height:auto;max-height:300px;max-width:500px;overflow:auto;display:block;z-index:999999;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;border-bottom-left-radius:4px;border-bottom-right-radius:4px;background:#fff}::ng-deep .fs-html-editor-mention-container ul{margin:0;padding:0;list-style:none}::ng-deep .fs-html-editor-mention-container li{padding:0 16px;cursor:pointer;line-height:48px}::ng-deep .fs-html-editor-mention-container li.highlight,::ng-deep .fs-html-editor-mention-container li:hover{background:#f5f5f5}::ng-deep .fs-html-editor-mention-container li.no-match{cursor:default}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i4.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i4.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: i4.FsLabelMessageComponent, selector: "fs-label-message" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], viewProviders: [
+            {
+                provide: ControlContainer,
+                deps: [[Optional, NgForm]],
+                useFactory: (ngForm) => ngForm,
+            },
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-FsHtmlEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsHtmlEditorComponent, deps: [{ token: FS_HTML_EDITOR_CONFIG, optional: true }, { token: i0.ChangeDetectorRef }, { token: FsFroalaLoaderService }], target: i0.ɵɵFactoryTarget.Component });
-FsHtmlEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FsHtmlEditorComponent, selector: "fs-html-editor", inputs: { config: "config", disabled: "disabled" }, host: { properties: { "class.focused": "this.classFocused", "class.disabled": "this.disabled", "class.initialized": "this.initialized" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => FsHtmlEditorComponent),
-            multi: true,
-        },
-        {
-            provide: NG_VALIDATORS,
-            useExisting: forwardRef(() => FsHtmlEditorComponent),
-            multi: true,
-        },
-    ], queries: [{ propertyName: "htmlEditorContainer", first: true, predicate: FsHtmlEditorContainerDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["elRef"], descendants: true }], ngImport: i0, template: "<fs-label-field>\n  <div class=\"outline\">\n    <div class=\"outline-overlay\"></div>\n    <fs-label *ngIf=\"config.label\">{{config.label}}</fs-label>\n    <ng-container *ngIf=\"htmlEditorContainer; else htmlEditorContainerTmpl\">\n      <ng-container \n        [ngTemplateOutlet]=\"htmlEditorContainer\" \n        [ngTemplateOutletContext]=\"{ template: htmlEditorContainerTmpl }\">\n      </ng-container>\n    </ng-container>\n    <ng-template #htmlEditorContainerTmpl>\n      <div\n          class=\"html-editor-container fs-html-editor-default\"\n          [id]=\"containerID\"\n          [ngClass]=\"{\n            'init-on-click': config.initOnClick\n          }\">\n        <ng-container *fsSkeleton=\"(froalaLoaded$ | async) !== false\"></ng-container>\n        <div #elRef></div>\n      </div>\n    </ng-template>\n  </div>\n\n  <fs-label-message>\n    <div class=\"fs-form-message\">\n      <div class=\"fs-form-hint\">{{config.hint}}</div>\n    </div>\n  </fs-label-message>\n</fs-label-field>\n", styles: [":host{position:relative;display:block}:host.initialized .outline-overlay{border:1px solid transparent;position:absolute;inset:-1px;border-width:2px}:host.initialized .outline,:host.initialized .outline-overlay{border-radius:5px}:host.initialized .outline{border:1px solid #E0E0E0;position:relative;padding:0 .75em}:host.initialized .outline fs-label{background:#fff;top:-5px;position:absolute;left:11px;padding:0 3px;z-index:5}:host.initialized:not(.focused):not(.disabled):hover .outline-overlay{border-color:#212121}:host:not(.initialized) ::ng-deep .fr-toolbar{display:none}:host ::ng-deep fs-label-field{margin:.25em 0}:host ::ng-deep .fr-wrapper{border:none!important}:host ::ng-deep .fr-toolbar.fr-top{margin-top:2px}:host ::ng-deep .fr-box.fr-basic .fr-wrapper{border:0;border-bottom:1px solid #949494;margin-bottom:1px;background-color:transparent}:host ::ng-deep .fr-box.fr-basic .fr-element{padding:0;font-family:inherit;color:inherit;font-size:inherit;line-height:inherit;min-height:auto}:host ::ng-deep .fr-more-toolbar,:host ::ng-deep .fr-toolbar,:host ::ng-deep .fr-dropdown:after,:host ::ng-deep .fr-dropdown-menu .fr-dropdown-wrapper{transition:none!important}:host ::ng-deep .fr-toolbar-open .fr-more-toolbar{display:block}:host ::ng-deep .fr-more-toolbar{display:none}:host ::ng-deep .fr-toolbar.fr-top{position:sticky;z-index:2;border-radius:0;background-color:#fff}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp{margin:0 20px 0 0}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:nth-child(1):after,:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:nth-child(2):after{content:\"\";position:absolute;top:9px;height:30px;border-left:1px solid #e5e5e5;margin-left:10px}:host ::ng-deep .fr-toolbar.fr-top div:first-of-type:before{border:none}:host ::ng-deep .fr-toolbar.fr-top.fr-toolbar-open .fr-newline{height:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:first-child{margin-left:0}:host ::ng-deep .fr-toolbar.fr-top.fr-top{border:0}:host ::ng-deep .fr-toolbar.fr-top .fr-newline{margin:0}:host ::ng-deep .fr-toolbar.fr-top .fr-more-toolbar{z-index:auto;display:flex;justify-content:center;padding-left:0!important}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn{z-index:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown:after{right:3px}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown.fr-selection span{margin-right:24px}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-open{border-radius:4px;margin:4px 2px}:host ::ng-deep .fr-view ol,:host ::ng-deep .fr-view ul{list-style-position:unset}:host.disabled ::ng-deep .fr-box.fr-basic{opacity:.5;pointer-events:none}:host.disabled ::ng-deep .fr-box.fr-basic .fr-wrapper{border:none}::ng-deep .fr-popup{z-index:1001!important}::ng-deep .fr-video-by-url-layer .fr-checkbox-line{display:none}::ng-deep .fs-html-editor-mention-container{position:absolute;top:0;left:0;height:auto;max-height:300px;max-width:500px;overflow:auto;display:block;z-index:999999;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;border-bottom-left-radius:4px;border-bottom-right-radius:4px;background:#fff}::ng-deep .fs-html-editor-mention-container ul{margin:0;padding:0;list-style:none}::ng-deep .fs-html-editor-mention-container li{padding:0 16px;cursor:pointer;line-height:48px}::ng-deep .fs-html-editor-mention-container li.highlight,::ng-deep .fs-html-editor-mention-container li:hover{background:#F5F5F5}::ng-deep .fs-html-editor-mention-container li.no-match{cursor:default}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i4.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i4.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: i4.FsLabelMessageComponent, selector: "fs-label-message" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], viewProviders: [
-        {
-            provide: ControlContainer,
-            deps: [[Optional, NgForm]],
-            useFactory: (ngForm) => ngForm,
-        },
-    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsHtmlEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-html-editor', providers: [
                         {
@@ -653,7 +668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             deps: [[Optional, NgForm]],
                             useFactory: (ngForm) => ngForm,
                         },
-                    ], template: "<fs-label-field>\n  <div class=\"outline\">\n    <div class=\"outline-overlay\"></div>\n    <fs-label *ngIf=\"config.label\">{{config.label}}</fs-label>\n    <ng-container *ngIf=\"htmlEditorContainer; else htmlEditorContainerTmpl\">\n      <ng-container \n        [ngTemplateOutlet]=\"htmlEditorContainer\" \n        [ngTemplateOutletContext]=\"{ template: htmlEditorContainerTmpl }\">\n      </ng-container>\n    </ng-container>\n    <ng-template #htmlEditorContainerTmpl>\n      <div\n          class=\"html-editor-container fs-html-editor-default\"\n          [id]=\"containerID\"\n          [ngClass]=\"{\n            'init-on-click': config.initOnClick\n          }\">\n        <ng-container *fsSkeleton=\"(froalaLoaded$ | async) !== false\"></ng-container>\n        <div #elRef></div>\n      </div>\n    </ng-template>\n  </div>\n\n  <fs-label-message>\n    <div class=\"fs-form-message\">\n      <div class=\"fs-form-hint\">{{config.hint}}</div>\n    </div>\n  </fs-label-message>\n</fs-label-field>\n", styles: [":host{position:relative;display:block}:host.initialized .outline-overlay{border:1px solid transparent;position:absolute;inset:-1px;border-width:2px}:host.initialized .outline,:host.initialized .outline-overlay{border-radius:5px}:host.initialized .outline{border:1px solid #E0E0E0;position:relative;padding:0 .75em}:host.initialized .outline fs-label{background:#fff;top:-5px;position:absolute;left:11px;padding:0 3px;z-index:5}:host.initialized:not(.focused):not(.disabled):hover .outline-overlay{border-color:#212121}:host:not(.initialized) ::ng-deep .fr-toolbar{display:none}:host ::ng-deep fs-label-field{margin:.25em 0}:host ::ng-deep .fr-wrapper{border:none!important}:host ::ng-deep .fr-toolbar.fr-top{margin-top:2px}:host ::ng-deep .fr-box.fr-basic .fr-wrapper{border:0;border-bottom:1px solid #949494;margin-bottom:1px;background-color:transparent}:host ::ng-deep .fr-box.fr-basic .fr-element{padding:0;font-family:inherit;color:inherit;font-size:inherit;line-height:inherit;min-height:auto}:host ::ng-deep .fr-more-toolbar,:host ::ng-deep .fr-toolbar,:host ::ng-deep .fr-dropdown:after,:host ::ng-deep .fr-dropdown-menu .fr-dropdown-wrapper{transition:none!important}:host ::ng-deep .fr-toolbar-open .fr-more-toolbar{display:block}:host ::ng-deep .fr-more-toolbar{display:none}:host ::ng-deep .fr-toolbar.fr-top{position:sticky;z-index:2;border-radius:0;background-color:#fff}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp{margin:0 20px 0 0}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:nth-child(1):after,:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:nth-child(2):after{content:\"\";position:absolute;top:9px;height:30px;border-left:1px solid #e5e5e5;margin-left:10px}:host ::ng-deep .fr-toolbar.fr-top div:first-of-type:before{border:none}:host ::ng-deep .fr-toolbar.fr-top.fr-toolbar-open .fr-newline{height:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:first-child{margin-left:0}:host ::ng-deep .fr-toolbar.fr-top.fr-top{border:0}:host ::ng-deep .fr-toolbar.fr-top .fr-newline{margin:0}:host ::ng-deep .fr-toolbar.fr-top .fr-more-toolbar{z-index:auto;display:flex;justify-content:center;padding-left:0!important}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn{z-index:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown:after{right:3px}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown.fr-selection span{margin-right:24px}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-open{border-radius:4px;margin:4px 2px}:host ::ng-deep .fr-view ol,:host ::ng-deep .fr-view ul{list-style-position:unset}:host.disabled ::ng-deep .fr-box.fr-basic{opacity:.5;pointer-events:none}:host.disabled ::ng-deep .fr-box.fr-basic .fr-wrapper{border:none}::ng-deep .fr-popup{z-index:1001!important}::ng-deep .fr-video-by-url-layer .fr-checkbox-line{display:none}::ng-deep .fs-html-editor-mention-container{position:absolute;top:0;left:0;height:auto;max-height:300px;max-width:500px;overflow:auto;display:block;z-index:999999;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;border-bottom-left-radius:4px;border-bottom-right-radius:4px;background:#fff}::ng-deep .fs-html-editor-mention-container ul{margin:0;padding:0;list-style:none}::ng-deep .fs-html-editor-mention-container li{padding:0 16px;cursor:pointer;line-height:48px}::ng-deep .fs-html-editor-mention-container li.highlight,::ng-deep .fs-html-editor-mention-container li:hover{background:#F5F5F5}::ng-deep .fs-html-editor-mention-container li.no-match{cursor:default}\n"] }]
+                    ], template: "<fs-label-field>\n  <div class=\"outline\">\n    <div class=\"outline-overlay\"></div>\n    <fs-label *ngIf=\"config.label\">{{config.label}}</fs-label>\n    <ng-container *ngIf=\"htmlEditorContainer; else htmlEditorContainerTmpl\">\n      <ng-container \n        [ngTemplateOutlet]=\"htmlEditorContainer\" \n        [ngTemplateOutletContext]=\"{ template: htmlEditorContainerTmpl }\">\n      </ng-container>\n    </ng-container>\n    <ng-template #htmlEditorContainerTmpl>\n      <div\n          class=\"html-editor-container fs-html-editor-default\"\n          [id]=\"containerID\"\n          [ngClass]=\"{\n            'init-on-click': config.initOnClick\n          }\">\n        <ng-container *fsSkeleton=\"(froalaLoaded$ | async) !== false\"></ng-container>\n        <div #elRef></div>\n      </div>\n    </ng-template>\n  </div>\n\n  <fs-label-message>\n    <div class=\"fs-form-message\">\n      <div class=\"fs-form-hint\">{{config.hint}}</div>\n    </div>\n  </fs-label-message>\n</fs-label-field>\n", styles: [":host{position:relative;display:block}:host.initialized .outline-overlay{border:1px solid transparent;position:absolute;inset:-1px;border-width:2px}:host.initialized .outline,:host.initialized .outline-overlay{border-radius:5px}:host.initialized .outline{border:1px solid #E0E0E0;position:relative;padding:0 .75em}:host.initialized .outline fs-label{background:#fff;top:-5px;position:absolute;left:11px;padding:0 3px;z-index:5}:host.initialized:not(.focused):not(.disabled):hover .outline-overlay{border-color:#212121}:host:not(.initialized) ::ng-deep .fr-toolbar{display:none}:host ::ng-deep fs-label-field{margin:.25em 0}:host ::ng-deep .fr-wrapper{border:none!important}:host ::ng-deep .fr-toolbar.fr-top{margin-top:2px}:host ::ng-deep .fr-box.fr-basic .fr-wrapper{border:0;border-bottom:1px solid #949494;margin-bottom:1px;background-color:transparent}:host ::ng-deep .fr-box.fr-basic .fr-element{padding:0;font-family:inherit;color:inherit;font-size:inherit;line-height:inherit;min-height:auto}:host ::ng-deep .fr-more-toolbar,:host ::ng-deep .fr-toolbar,:host ::ng-deep .fr-dropdown:after,:host ::ng-deep .fr-dropdown-menu .fr-dropdown-wrapper{transition:none!important}:host ::ng-deep .fr-toolbar-open .fr-more-toolbar{display:block}:host ::ng-deep .fr-more-toolbar{display:none}:host ::ng-deep .fr-toolbar.fr-top{position:sticky;z-index:2;border-radius:0;background-color:#fff}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp{margin:0 20px 0 0}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:nth-child(1):after,:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:nth-child(2):after{content:\"\";position:absolute;top:9px;height:30px;border-left:1px solid #e5e5e5;margin-left:10px}:host ::ng-deep .fr-toolbar.fr-top div:first-of-type:before{border:none}:host ::ng-deep .fr-toolbar.fr-top.fr-toolbar-open .fr-newline{height:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-btn-grp:first-child{margin-left:0}:host ::ng-deep .fr-toolbar.fr-top.fr-top{border:0}:host ::ng-deep .fr-toolbar.fr-top .fr-newline{margin:0}:host ::ng-deep .fr-toolbar.fr-top .fr-more-toolbar{z-index:auto;display:flex;justify-content:center;padding-left:0!important}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn{z-index:auto}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown:after{right:3px}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-dropdown.fr-selection span{margin-right:24px}:host ::ng-deep .fr-toolbar.fr-top .fr-command.fr-btn.fr-open{border-radius:4px;margin:4px 2px}:host ::ng-deep .fr-view ol,:host ::ng-deep .fr-view ul{list-style-position:unset}:host.disabled ::ng-deep .fr-box.fr-basic{opacity:.5;pointer-events:none}:host.disabled ::ng-deep .fr-box.fr-basic .fr-wrapper{border:none}::ng-deep .fr-popup{z-index:1001!important}::ng-deep .fr-video-by-url-layer .fr-checkbox-line{display:none}::ng-deep .fs-html-editor-mention-container{position:absolute;top:0;left:0;height:auto;max-height:300px;max-width:500px;overflow:auto;display:block;z-index:999999;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;border-bottom-left-radius:4px;border-bottom-right-radius:4px;background:#fff}::ng-deep .fs-html-editor-mention-container ul{margin:0;padding:0;list-style:none}::ng-deep .fs-html-editor-mention-container li{padding:0 16px;cursor:pointer;line-height:48px}::ng-deep .fs-html-editor-mention-container li.highlight,::ng-deep .fs-html-editor-mention-container li:hover{background:#f5f5f5}::ng-deep .fs-html-editor-mention-container li.no-match{cursor:default}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -694,19 +709,19 @@ class FsHtmlEditorModule {
             ],
         };
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlEditorModule, declarations: [FsHtmlEditorComponent,
+            FsHtmlEditorContainerDirective], imports: [CommonModule,
+            FsSkeletonModule,
+            FsLabelModule,
+            FsHtmlRendererModule], exports: [FsHtmlEditorComponent,
+            FsHtmlEditorContainerDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlEditorModule, imports: [CommonModule,
+            FsSkeletonModule,
+            FsLabelModule,
+            FsHtmlRendererModule] });
 }
-FsHtmlEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsHtmlEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsHtmlEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FsHtmlEditorModule, declarations: [FsHtmlEditorComponent,
-        FsHtmlEditorContainerDirective], imports: [CommonModule,
-        FsSkeletonModule,
-        FsLabelModule,
-        FsHtmlRendererModule], exports: [FsHtmlEditorComponent,
-        FsHtmlEditorContainerDirective] });
-FsHtmlEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsHtmlEditorModule, imports: [CommonModule,
-        FsSkeletonModule,
-        FsLabelModule,
-        FsHtmlRendererModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsHtmlEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsHtmlEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -747,11 +762,14 @@ function FsHtmlEditorConfigFactory(config) {
 }
 
 class Plugin {
+    config;
+    editor;
     initialize() { }
     destroy() { }
 }
 
 class ChecklistPlugin extends Plugin {
+    config;
     constructor(config = { name: 'checklist' }) {
         super();
         this.config = config;
@@ -790,6 +808,7 @@ class ChecklistPlugin extends Plugin {
 }
 
 class CodePlugin extends Plugin {
+    config;
     constructor(config = { name: 'code' }) {
         super();
         this.config = config;
@@ -856,17 +875,14 @@ class CodePlugin extends Plugin {
 }
 
 class MentionPlugin extends Plugin {
+    config;
+    static _currentGuid = null;
+    static _tributes = [];
+    _tribute;
+    _guid = guid();
     constructor(config) {
         super();
         this.config = config;
-        this._guid = guid();
-        this.selected = (event) => {
-            if (this.config.selected) {
-                if (MentionPlugin._currentGuid === this._guid) {
-                    this.config.selected(event.detail.item.original);
-                }
-            }
-        };
         this.config = {
             ...config,
             buttons: [
@@ -920,6 +936,13 @@ class MentionPlugin extends Plugin {
         }, true);
         this.editor.el.addEventListener("tribute-replaced", this.selected);
     }
+    selected = (event) => {
+        if (this.config.selected) {
+            if (MentionPlugin._currentGuid === this._guid) {
+                this.config.selected(event.detail.item.original);
+            }
+        }
+    };
     destroy() {
         this.editor.el.removeEventListener("tribute-replaced", this.selected);
     }
@@ -938,10 +961,9 @@ class MentionPlugin extends Plugin {
         });
     }
 }
-MentionPlugin._currentGuid = null;
-MentionPlugin._tributes = [];
 
 class RealtimePlugin extends Plugin {
+    config;
     constructor(config = { name: 'realtime' }) {
         super();
         this.config = config;
@@ -957,6 +979,8 @@ class RealtimePlugin extends Plugin {
 }
 
 class ScreenRecordPlugin extends Plugin {
+    config;
+    _activeEl;
     constructor(config = {}) {
         super();
         this.config = config;