@firestitch/html-editor 12.6.0 → 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
 
@@ -465,7 +465,7 @@
465
465
  };
466
466
  return FsFroalaLoaderService;
467
467
  }());
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: 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 });
469
469
  FsFroalaLoaderService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFroalaLoaderService, providedIn: 'root' });
470
470
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFroalaLoaderService, decorators: [{
471
471
  type: i0.Injectable,
@@ -480,40 +480,10 @@
480
480
  args: [FS_HTML_EDITOR_CONFIG]
481
481
  }] }, { type: Document, decorators: [{
482
482
  type: i0.Inject,
483
- args: [i4.DOCUMENT]
483
+ args: [i3.DOCUMENT]
484
484
  }] }];
485
485
  } });
486
486
 
487
- var FsHtmlRendererComponent = /** @class */ (function () {
488
- function FsHtmlRendererComponent(sanitized, _cdRef) {
489
- this.sanitized = sanitized;
490
- this._cdRef = _cdRef;
491
- }
492
- Object.defineProperty(FsHtmlRendererComponent.prototype, "setHtml", {
493
- set: function (html) {
494
- this.trustedHtml = this.sanitized.bypassSecurityTrustHtml(html || '');
495
- this._cdRef.markForCheck();
496
- },
497
- enumerable: false,
498
- configurable: true
499
- });
500
- return FsHtmlRendererComponent;
501
- }());
502
- 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 });
503
- 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 });
504
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlRendererComponent, decorators: [{
505
- type: i0.Component,
506
- args: [{
507
- selector: 'fs-html-renderer',
508
- templateUrl: 'html-renderer.component.html',
509
- styleUrls: ['html-renderer.component.scss'],
510
- changeDetection: i0.ChangeDetectionStrategy.OnPush,
511
- }]
512
- }], ctorParameters: function () { return [{ type: i1__namespace.DomSanitizer }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { setHtml: [{
513
- type: i0.Input,
514
- args: ['html']
515
- }] } });
516
-
517
487
  var FsHtmlEditorComponent = /** @class */ (function () {
518
488
  function FsHtmlEditorComponent(_defaultConfig, _cdRef, _fr) {
519
489
  this._defaultConfig = _defaultConfig;
@@ -560,14 +530,10 @@
560
530
  FsHtmlEditorComponent.prototype.ngOnInit = function () {
561
531
  this.config = this.config || {};
562
532
  this.config.autofocus = this.config.autofocus !== false && !this.config.disabled;
563
- this.initialized = !this.config.initOnClick;
564
533
  this._listenLazyInit();
565
534
  };
566
535
  FsHtmlEditorComponent.prototype.ngAfterViewInit = function () {
567
- if (!this.config.initOnClick || !this.hasContent()) {
568
- this.initialized = true;
569
- this._initialize$.next();
570
- }
536
+ this._initialize$.next();
571
537
  };
572
538
  FsHtmlEditorComponent.prototype.hasContent = function () {
573
539
  var el = document.createElement('div');
@@ -605,30 +571,6 @@
605
571
  return _this.config.image.upload(fsFile.file);
606
572
  }));
607
573
  };
608
- FsHtmlEditorComponent.prototype.uninitializedClick = function (event) {
609
- if (!event.defaultPrevented) {
610
- var target_1 = event.target;
611
- if (target_1 && target_1.nodeName === 'A' && target_1.getAttribute('href')) {
612
- var targetTarget_1 = target_1.getAttribute('target');
613
- target_1.setAttribute('target', '_blank');
614
- setTimeout(function () {
615
- if (targetTarget_1) {
616
- target_1.setAttribute('target', targetTarget_1);
617
- }
618
- else {
619
- target_1.removeAttribute('target');
620
- }
621
- });
622
- }
623
- else {
624
- if (this.config.initClick) {
625
- this.config.initClick(event);
626
- }
627
- this._initialize$.next();
628
- this.initialized = true;
629
- }
630
- }
631
- };
632
574
  FsHtmlEditorComponent.prototype.updateSize = function () {
633
575
  // Hack: To trigger the toolbar button size modes
634
576
  window.dispatchEvent(new Event('resize'));
@@ -895,6 +837,12 @@
895
837
  _this.classFocused = false;
896
838
  _this._cdRef.markForCheck();
897
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
+ });
898
846
  rxjs.fromEventPattern(function (handler) {
899
847
  _this._editor.events.on('contentChanged', handler);
900
848
  }, function () { })
@@ -948,37 +896,10 @@
948
896
  if (this.el.querySelector('.fr-second-toolbar')) {
949
897
  this.el.querySelector('.fr-second-toolbar').remove();
950
898
  }
951
- var selection = options.selection;
952
- if (selection) {
953
- var node = Array.from(this.el.querySelectorAll('.fr-element *')).find(function (node) {
954
- return selection.node === node.textContent;
955
- });
956
- if (node) {
957
- var range = document.createRange();
958
- var sel = window.getSelection();
959
- range.setStart(this._getTextNode(node), selection.offset);
960
- range.collapse(true);
961
- sel.removeAllRanges();
962
- sel.addRange(range);
963
- }
964
- else if (this.config.autofocus) {
965
- this.focus();
966
- }
967
- }
968
- else if (this.config.autofocus) {
899
+ if (this.config.autofocus && !this.config.initOnClick) {
969
900
  this.focus();
970
901
  }
971
902
  };
972
- FsHtmlEditorComponent.prototype._getTextNode = function (node) {
973
- if (node) {
974
- if (node.nodeType === Node.TEXT_NODE) {
975
- return node;
976
- }
977
- if (node.childNodes) {
978
- return this._getTextNode(node.childNodes[0]);
979
- }
980
- }
981
- };
982
903
  return FsHtmlEditorComponent;
983
904
  }());
984
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 });
@@ -993,7 +914,7 @@
993
914
  useExisting: i0.forwardRef(function () { return FsHtmlEditorComponent; }),
994
915
  multi: true
995
916
  },
996
- ], 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-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 });
997
918
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlEditorComponent, decorators: [{
998
919
  type: i0.Component,
999
920
  args: [{
@@ -1036,21 +957,51 @@
1036
957
  type: i0.Input
1037
958
  }] } });
1038
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
+
1039
990
  var FsHtmlRendererModule = /** @class */ (function () {
1040
991
  function FsHtmlRendererModule() {
1041
992
  }
1042
993
  return FsHtmlRendererModule;
1043
994
  }());
1044
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 });
1045
- 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] });
1046
997
  FsHtmlRendererModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlRendererModule, imports: [[
1047
- i4.CommonModule,
998
+ i3.CommonModule,
1048
999
  ]] });
1049
1000
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlRendererModule, decorators: [{
1050
1001
  type: i0.NgModule,
1051
1002
  args: [{
1052
1003
  imports: [
1053
- i4.CommonModule,
1004
+ i3.CommonModule,
1054
1005
  ],
1055
1006
  exports: [
1056
1007
  FsHtmlRendererComponent,
@@ -1081,13 +1032,13 @@
1081
1032
  return FsHtmlEditorModule;
1082
1033
  }());
1083
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 });
1084
- FsHtmlEditorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlEditorModule, declarations: [FsHtmlEditorComponent], imports: [i4.CommonModule,
1085
- 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,
1086
1037
  i2.FsLabelModule,
1087
1038
  FsHtmlRendererModule], exports: [FsHtmlEditorComponent] });
1088
1039
  FsHtmlEditorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlEditorModule, imports: [[
1089
- i4.CommonModule,
1090
- i5.FsSkeletonModule,
1040
+ i3.CommonModule,
1041
+ i4.FsSkeletonModule,
1091
1042
  i2.FsLabelModule,
1092
1043
  FsHtmlRendererModule,
1093
1044
  ]] });
@@ -1095,8 +1046,8 @@
1095
1046
  type: i0.NgModule,
1096
1047
  args: [{
1097
1048
  imports: [
1098
- i4.CommonModule,
1099
- i5.FsSkeletonModule,
1049
+ i3.CommonModule,
1050
+ i4.FsSkeletonModule,
1100
1051
  i2.FsLabelModule,
1101
1052
  FsHtmlRendererModule,
1102
1053
  ],