@firestitch/html-editor 12.5.6 → 12.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -31,7 +31,6 @@ export declare class FsHtmlEditorComponent implements OnInit, AfterViewInit, Con
31
31
  hasContent(): boolean;
32
32
  initialize(options?: any): void;
33
33
  private _processImageUpload;
34
- uninitializedClick(event: UIEvent): void;
35
34
  updateSize(): void;
36
35
  validate(control: AbstractControl): ValidationErrors | null;
37
36
  focus(options?: {
@@ -53,7 +52,6 @@ export declare class FsHtmlEditorComponent implements OnInit, AfterViewInit, Con
53
52
  private _listenLazyInit;
54
53
  private _contentChanged;
55
54
  private _setupFroala;
56
- private _getTextNode;
57
55
  static ɵfac: i0.ɵɵFactoryDeclaration<FsHtmlEditorComponent, [{ optional: true; }, null, null]>;
58
56
  static ɵcmp: i0.ɵɵComponentDeclaration<FsHtmlEditorComponent, "fs-html-editor", never, { "config": "config"; "hint": "hint"; }, {}, never, never>;
59
57
  }
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
2
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@firestitch/label'), require('@firestitch/skeleton'), require('@angular/forms'), require('@firestitch/file'), require('rxjs'), require('rxjs/operators'), require('lodash-es'), require('@firestitch/common'), require('@angular/platform-browser'), require('tributejs')) :
3
3
  typeof define === 'function' && define.amd ? define('@firestitch/html-editor', ['exports', '@angular/core', '@angular/common', '@firestitch/label', '@firestitch/skeleton', '@angular/forms', '@firestitch/file', 'rxjs', 'rxjs/operators', 'lodash-es', '@firestitch/common', '@angular/platform-browser', 'tributejs'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch["html-editor"] = {}), global.ng.core, global.ng.common, global.i2, global.i5, global.ng.forms, global.file, global.rxjs, global.rxjs.operators, global.lodashEs, global.common, global.ng.platformBrowser, global.Tribute));
5
- })(this, (function (exports, i0, i4, i2, i5, forms, file, rxjs, operators, lodashEs, common, i1, Tribute) { 'use strict';
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch["html-editor"] = {}), global.ng.core, global.ng.common, global.i2, global.i4, global.ng.forms, global.file, global.rxjs, global.rxjs.operators, global.lodashEs, global.common, global.ng.platformBrowser, global.Tribute));
5
+ })(this, (function (exports, i0, i3, i2, i4, forms, file, rxjs, operators, lodashEs, common, i1, Tribute) { 'use strict';
6
6
 
7
7
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
8
 
@@ -25,9 +25,9 @@
25
25
  }
26
26
 
27
27
  var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
28
- var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
28
+ var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
29
29
  var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
30
- var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
30
+ var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
31
31
  var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
32
32
  var Tribute__default = /*#__PURE__*/_interopDefaultLegacy(Tribute);
33
33
 
@@ -419,25 +419,26 @@
419
419
  });
420
420
  FsFroalaLoaderService.prototype._load = function () {
421
421
  var _this = this;
422
+ var baseDir = '/assets/froala/';
422
423
  this._sourceLoader.registerResources({
423
424
  froala: [
424
- '/assets/js/froala/froala_editor.min.js',
425
- '/assets/css/froala_editor.pkgd.min.css',
425
+ baseDir + "js/froala_editor.min.js",
426
+ baseDir + "css/froala_editor.pkgd.min.css",
426
427
  ],
427
- froala_align: '/assets/js/froala/plugins/align.min.js',
428
- froala_colors: '/assets/js/froala/plugins/colors.min.js',
429
- froala_image: '/assets/js/froala/plugins/image.min.js',
430
- froala_link: '/assets/js/froala/plugins/link.min.js',
431
- froala_lists: '/assets/js/froala/plugins/lists.min.js',
432
- froala_paragraph_format: '/assets/js/froala/plugins/paragraph_format.min.js',
433
- froala_table: '/assets/js/froala/plugins/table.min.js',
434
- froala_url: '/assets/js/froala/plugins/url.min.js',
435
- froala_video: '/assets/js/froala/plugins/video.min.js',
436
- froala_quote: '/assets/js/froala/plugins/quote.min.js',
437
- froala_draggable: '/assets/js/froala/plugins/draggable.min.js',
438
- froala_font_size: '/assets/js/froala/plugins/font_size.min.js',
439
- froala_quick_insert: '/assets/js/froala/plugins/quick_insert.min.js',
440
- froala_line_height: '/assets/js/froala/plugins/line_height.min.js'
428
+ froala_align: baseDir + "js/plugins/align.min.js",
429
+ froala_colors: baseDir + "js/plugins/colors.min.js",
430
+ froala_image: baseDir + "js/plugins/image.min.js",
431
+ froala_link: baseDir + "js/plugins/link.min.js",
432
+ froala_lists: baseDir + "js/plugins/lists.min.js",
433
+ froala_paragraph_format: baseDir + "js/plugins/paragraph_format.min.js",
434
+ froala_table: baseDir + "js/plugins/table.min.js",
435
+ froala_url: baseDir + "js/plugins/url.min.js",
436
+ froala_video: baseDir + "js/plugins/video.min.js",
437
+ froala_quote: baseDir + "js/plugins/quote.min.js",
438
+ froala_draggable: baseDir + "js/plugins/draggable.min.js",
439
+ froala_font_size: baseDir + "js/plugins/font_size.min.js",
440
+ froala_quick_insert: baseDir + "js/plugins/quick_insert.min.js",
441
+ froala_line_height: baseDir + "js/plugins/line_height.min.js"
441
442
  });
442
443
  this._sourceLoader.loadResource('froala')
443
444
  .pipe(operators.tap(function () {
@@ -464,7 +465,7 @@
464
465
  };
465
466
  return FsFroalaLoaderService;
466
467
  }());
467
- FsFroalaLoaderService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFroalaLoaderService, deps: [{ token: FS_HTML_EDITOR_CONFIG, optional: true }, { token: i4.DOCUMENT }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
468
+ FsFroalaLoaderService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFroalaLoaderService, deps: [{ token: FS_HTML_EDITOR_CONFIG, optional: true }, { token: i3.DOCUMENT }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
468
469
  FsFroalaLoaderService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFroalaLoaderService, providedIn: 'root' });
469
470
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFroalaLoaderService, decorators: [{
470
471
  type: i0.Injectable,
@@ -479,40 +480,10 @@
479
480
  args: [FS_HTML_EDITOR_CONFIG]
480
481
  }] }, { type: Document, decorators: [{
481
482
  type: i0.Inject,
482
- args: [i4.DOCUMENT]
483
+ args: [i3.DOCUMENT]
483
484
  }] }];
484
485
  } });
485
486
 
486
- var FsHtmlRendererComponent = /** @class */ (function () {
487
- function FsHtmlRendererComponent(sanitized, _cdRef) {
488
- this.sanitized = sanitized;
489
- this._cdRef = _cdRef;
490
- }
491
- Object.defineProperty(FsHtmlRendererComponent.prototype, "setHtml", {
492
- set: function (html) {
493
- this.trustedHtml = this.sanitized.bypassSecurityTrustHtml(html || '');
494
- this._cdRef.markForCheck();
495
- },
496
- enumerable: false,
497
- configurable: true
498
- });
499
- return FsHtmlRendererComponent;
500
- }());
501
- FsHtmlRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlRendererComponent, deps: [{ token: i1__namespace.DomSanitizer }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
502
- FsHtmlRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: { setHtml: ["html", "setHtml"] }, ngImport: i0__namespace, template: "<span class=\"fr-view fs-html-editor-default\" [innerHtml]=\"trustedHtml\"></span>\n", styles: [""], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
503
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlRendererComponent, decorators: [{
504
- type: i0.Component,
505
- args: [{
506
- selector: 'fs-html-renderer',
507
- templateUrl: 'html-renderer.component.html',
508
- styleUrls: ['html-renderer.component.scss'],
509
- changeDetection: i0.ChangeDetectionStrategy.OnPush,
510
- }]
511
- }], ctorParameters: function () { return [{ type: i1__namespace.DomSanitizer }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { setHtml: [{
512
- type: i0.Input,
513
- args: ['html']
514
- }] } });
515
-
516
487
  var FsHtmlEditorComponent = /** @class */ (function () {
517
488
  function FsHtmlEditorComponent(_defaultConfig, _cdRef, _fr) {
518
489
  this._defaultConfig = _defaultConfig;
@@ -559,14 +530,10 @@
559
530
  FsHtmlEditorComponent.prototype.ngOnInit = function () {
560
531
  this.config = this.config || {};
561
532
  this.config.autofocus = this.config.autofocus !== false && !this.config.disabled;
562
- this.initialized = !this.config.initOnClick;
563
533
  this._listenLazyInit();
564
534
  };
565
535
  FsHtmlEditorComponent.prototype.ngAfterViewInit = function () {
566
- if (!this.config.initOnClick || !this.hasContent()) {
567
- this.initialized = true;
568
- this._initialize$.next();
569
- }
536
+ this._initialize$.next();
570
537
  };
571
538
  FsHtmlEditorComponent.prototype.hasContent = function () {
572
539
  var el = document.createElement('div');
@@ -604,30 +571,6 @@
604
571
  return _this.config.image.upload(fsFile.file);
605
572
  }));
606
573
  };
607
- FsHtmlEditorComponent.prototype.uninitializedClick = function (event) {
608
- if (!event.defaultPrevented) {
609
- var target_1 = event.target;
610
- if (target_1 && target_1.nodeName === 'A' && target_1.getAttribute('href')) {
611
- var targetTarget_1 = target_1.getAttribute('target');
612
- target_1.setAttribute('target', '_blank');
613
- setTimeout(function () {
614
- if (targetTarget_1) {
615
- target_1.setAttribute('target', targetTarget_1);
616
- }
617
- else {
618
- target_1.removeAttribute('target');
619
- }
620
- });
621
- }
622
- else {
623
- if (this.config.initClick) {
624
- this.config.initClick(event);
625
- }
626
- this._initialize$.next();
627
- this.initialized = true;
628
- }
629
- }
630
- };
631
574
  FsHtmlEditorComponent.prototype.updateSize = function () {
632
575
  // Hack: To trigger the toolbar button size modes
633
576
  window.dispatchEvent(new Event('resize'));
@@ -894,6 +837,12 @@
894
837
  _this.classFocused = false;
895
838
  _this._cdRef.markForCheck();
896
839
  });
840
+ this._editor.events.on('click', function () {
841
+ if (_this.config.initOnClick && !_this.initialized) {
842
+ _this.initialized = true;
843
+ _this._cdRef.markForCheck();
844
+ }
845
+ });
897
846
  rxjs.fromEventPattern(function (handler) {
898
847
  _this._editor.events.on('contentChanged', handler);
899
848
  }, function () { })
@@ -901,12 +850,6 @@
901
850
  .subscribe(function () {
902
851
  _this._contentChanged();
903
852
  });
904
- // this._editor.events.on('contentChanged', () => {
905
- // console.log('test');
906
- // if (!this._firstChange) {
907
- // this._contentChanged();
908
- // }
909
- // });
910
853
  this._editor.events.on('paste.afterCleanup', function (html) {
911
854
  var div = document.createElement('div');
912
855
  div.innerHTML = html;
@@ -953,37 +896,10 @@
953
896
  if (this.el.querySelector('.fr-second-toolbar')) {
954
897
  this.el.querySelector('.fr-second-toolbar').remove();
955
898
  }
956
- var selection = options.selection;
957
- if (selection) {
958
- var node = Array.from(this.el.querySelectorAll('.fr-element *')).find(function (node) {
959
- return selection.node === node.textContent;
960
- });
961
- if (node) {
962
- var range = document.createRange();
963
- var sel = window.getSelection();
964
- range.setStart(this._getTextNode(node), selection.offset);
965
- range.collapse(true);
966
- sel.removeAllRanges();
967
- sel.addRange(range);
968
- }
969
- else if (this.config.autofocus) {
970
- this.focus();
971
- }
972
- }
973
- else if (this.config.autofocus) {
899
+ if (this.config.autofocus && !this.config.initOnClick) {
974
900
  this.focus();
975
901
  }
976
902
  };
977
- FsHtmlEditorComponent.prototype._getTextNode = function (node) {
978
- if (node) {
979
- if (node.nodeType === Node.TEXT_NODE) {
980
- return node;
981
- }
982
- if (node.childNodes) {
983
- return this._getTextNode(node.childNodes[0]);
984
- }
985
- }
986
- };
987
903
  return FsHtmlEditorComponent;
988
904
  }());
989
905
  FsHtmlEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlEditorComponent, deps: [{ token: FS_HTML_EDITOR_CONFIG, optional: true }, { token: i0__namespace.ChangeDetectorRef }, { token: FsFroalaLoaderService }], target: i0__namespace.ɵɵFactoryTarget.Component });
@@ -998,7 +914,7 @@
998
914
  useExisting: i0.forwardRef(function () { return FsHtmlEditorComponent; }),
999
915
  multi: true
1000
916
  },
1001
- ], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["elRef"], descendants: true }], ngImport: i0__namespace, template: "<fs-label-field>\n <fs-label *ngIf=\"config.label\">{{config.label}}</fs-label>\n <div class=\"fs-html-editor-default\">\n <ng-container *ngIf=\"initialized\">\n <ng-container *fsSkeleton=\"(froalaLoaded$ | async) !== false\">\n </ng-container>\n </ng-container>\n \n <div #elRef></div>\n \n <div class=\"bottom-line\"></div>\n <div class=\"disabled-line\"></div>\n <fs-html-renderer\n *ngIf=\"!initialized\"\n [html]=\"html\"\n (click)=\"uninitializedClick($event)\">\n </fs-html-renderer>\n </div>\n \n <fs-label-message>\n <div class=\"fs-form-message\">\n <div class=\"fs-form-hint\">{{hint}}</div>\n </div>\n </fs-label-message>\n</fs-label-field>\n", styles: [":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-toolbar:has(> .fr-active),:host ::ng-deep .fr-btn-wrap:has(> .fr-active){padding-bottom:125px}: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}:host.disabled ::ng-deep .disabled-line{display:block}::ng-deep .fr-popup{z-index:1001!important;transform:translate(-180px)}::ng-deep .fr-video-by-url-layer .fr-checkbox-line{display:none}.disabled-line{display:none;position:absolute;bottom:-1px;z-index:1;background-image:linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(0,0,0,.42) 33%,transparent 0);background-size:4px 100%;background-repeat:repeat-x;height:1px;width:100%}.bottom-line{opacity:0;transform-origin:50%;transform:scaleX(.5);transition:background-color .3s cubic-bezier(.55,0,.55,.2);width:100%;border-bottom:2px solid #949494;position:absolute;bottom:-1px;z-index:1}:host{position:relative;display:block}:host.focused .bottom-line{opacity:1;display:block;transform:scaleX(1);transition:transform .3s cubic-bezier(.25,.8,.25,1),opacity .1s cubic-bezier(.25,.8,.25,1),background-color .3s cubic-bezier(.25,.8,.25,1)}::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"], components: [{ type: i2__namespace.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i2__namespace.FsLabelComponent, selector: "fs-label" }, { type: FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: ["html"] }, { type: i2__namespace.FsLabelMessageComponent, selector: "fs-label-message" }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }], pipes: { "async": i4__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
917
+ ], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["elRef"], descendants: true }], ngImport: i0__namespace, template: "<fs-label-field>\n <fs-label *ngIf=\"config.label\">{{config.label}}</fs-label>\n <div \n class=\"html-editor-container fs-html-editor-default\" \n [ngClass]=\"{ \n initialized: initialized,\n 'init-on-click': config.initOnClick\n }\"> \n <ng-container *fsSkeleton=\"(froalaLoaded$ | async) !== false\"></ng-container> \n <div #elRef></div>\n \n <div class=\"bottom-line\"></div>\n <div class=\"disabled-line\"></div>\n </div>\n \n <fs-label-message>\n <div class=\"fs-form-message\">\n <div class=\"fs-form-hint\">{{hint}}</div>\n </div>\n </fs-label-message>\n</fs-label-field>\n", styles: [":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 ::ng-deep .html-editor-container.init-on-click:not(.initialized) .fr-toolbar{display:none}: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}:host.disabled ::ng-deep .disabled-line{display:block}::ng-deep .fr-popup{z-index:1001!important;transform:translate(-180px)}::ng-deep .fr-video-by-url-layer .fr-checkbox-line{display:none}.disabled-line{display:none;position:absolute;bottom:-1px;z-index:1;background-image:linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(0,0,0,.42) 33%,transparent 0);background-size:4px 100%;background-repeat:repeat-x;height:1px;width:100%}.bottom-line{opacity:0;transform-origin:50%;transform:scaleX(.5);transition:background-color .3s cubic-bezier(.55,0,.55,.2);width:100%;border-bottom:2px solid #949494;position:absolute;bottom:-1px;z-index:1}:host{position:relative;display:block}:host.focused .bottom-line{opacity:1;display:block;transform:scaleX(1);transition:transform .3s cubic-bezier(.25,.8,.25,1),opacity .1s cubic-bezier(.25,.8,.25,1),background-color .3s cubic-bezier(.25,.8,.25,1)}::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"], components: [{ type: i2__namespace.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i2__namespace.FsLabelComponent, selector: "fs-label" }, { type: i2__namespace.FsLabelMessageComponent, selector: "fs-label-message" }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
1002
918
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlEditorComponent, decorators: [{
1003
919
  type: i0.Component,
1004
920
  args: [{
@@ -1041,21 +957,51 @@
1041
957
  type: i0.Input
1042
958
  }] } });
1043
959
 
960
+ var FsHtmlRendererComponent = /** @class */ (function () {
961
+ function FsHtmlRendererComponent(sanitized, _cdRef) {
962
+ this.sanitized = sanitized;
963
+ this._cdRef = _cdRef;
964
+ }
965
+ Object.defineProperty(FsHtmlRendererComponent.prototype, "setHtml", {
966
+ set: function (html) {
967
+ this.trustedHtml = this.sanitized.bypassSecurityTrustHtml(html || '');
968
+ this._cdRef.markForCheck();
969
+ },
970
+ enumerable: false,
971
+ configurable: true
972
+ });
973
+ return FsHtmlRendererComponent;
974
+ }());
975
+ FsHtmlRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlRendererComponent, deps: [{ token: i1__namespace.DomSanitizer }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
976
+ FsHtmlRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: { setHtml: ["html", "setHtml"] }, ngImport: i0__namespace, template: "<span class=\"fr-view fs-html-editor-default\" [innerHtml]=\"trustedHtml\"></span>\n", styles: [""], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
977
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlRendererComponent, decorators: [{
978
+ type: i0.Component,
979
+ args: [{
980
+ selector: 'fs-html-renderer',
981
+ templateUrl: 'html-renderer.component.html',
982
+ styleUrls: ['html-renderer.component.scss'],
983
+ changeDetection: i0.ChangeDetectionStrategy.OnPush,
984
+ }]
985
+ }], ctorParameters: function () { return [{ type: i1__namespace.DomSanitizer }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { setHtml: [{
986
+ type: i0.Input,
987
+ args: ['html']
988
+ }] } });
989
+
1044
990
  var FsHtmlRendererModule = /** @class */ (function () {
1045
991
  function FsHtmlRendererModule() {
1046
992
  }
1047
993
  return FsHtmlRendererModule;
1048
994
  }());
1049
995
  FsHtmlRendererModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlRendererModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
1050
- FsHtmlRendererModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlRendererModule, declarations: [FsHtmlRendererComponent], imports: [i4.CommonModule], exports: [FsHtmlRendererComponent] });
996
+ FsHtmlRendererModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlRendererModule, declarations: [FsHtmlRendererComponent], imports: [i3.CommonModule], exports: [FsHtmlRendererComponent] });
1051
997
  FsHtmlRendererModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlRendererModule, imports: [[
1052
- i4.CommonModule,
998
+ i3.CommonModule,
1053
999
  ]] });
1054
1000
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlRendererModule, decorators: [{
1055
1001
  type: i0.NgModule,
1056
1002
  args: [{
1057
1003
  imports: [
1058
- i4.CommonModule,
1004
+ i3.CommonModule,
1059
1005
  ],
1060
1006
  exports: [
1061
1007
  FsHtmlRendererComponent,
@@ -1086,13 +1032,13 @@
1086
1032
  return FsHtmlEditorModule;
1087
1033
  }());
1088
1034
  FsHtmlEditorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlEditorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
1089
- FsHtmlEditorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlEditorModule, declarations: [FsHtmlEditorComponent], imports: [i4.CommonModule,
1090
- i5.FsSkeletonModule,
1035
+ FsHtmlEditorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlEditorModule, declarations: [FsHtmlEditorComponent], imports: [i3.CommonModule,
1036
+ i4.FsSkeletonModule,
1091
1037
  i2.FsLabelModule,
1092
1038
  FsHtmlRendererModule], exports: [FsHtmlEditorComponent] });
1093
1039
  FsHtmlEditorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlEditorModule, imports: [[
1094
- i4.CommonModule,
1095
- i5.FsSkeletonModule,
1040
+ i3.CommonModule,
1041
+ i4.FsSkeletonModule,
1096
1042
  i2.FsLabelModule,
1097
1043
  FsHtmlRendererModule,
1098
1044
  ]] });
@@ -1100,8 +1046,8 @@
1100
1046
  type: i0.NgModule,
1101
1047
  args: [{
1102
1048
  imports: [
1103
- i4.CommonModule,
1104
- i5.FsSkeletonModule,
1049
+ i3.CommonModule,
1050
+ i4.FsSkeletonModule,
1105
1051
  i2.FsLabelModule,
1106
1052
  FsHtmlRendererModule,
1107
1053
  ],