@firestitch/html-editor 12.7.2 → 12.7.4

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.
@@ -9,11 +9,12 @@ export declare class FsHtmlEditorComponent implements OnInit, AfterViewInit, Con
9
9
  private _cdRef;
10
10
  private _fr;
11
11
  classFocused: boolean;
12
- classDisabled: boolean;
13
12
  elRef: ElementRef;
14
13
  config: FsHtmlEditorConfig;
15
14
  hint: string;
15
+ disabled: boolean;
16
16
  initialized: boolean;
17
+ readonly containerID: string;
17
18
  private _editor;
18
19
  private _html;
19
20
  private _initialize$;
@@ -53,5 +54,5 @@ export declare class FsHtmlEditorComponent implements OnInit, AfterViewInit, Con
53
54
  private _contentChanged;
54
55
  private _setupFroala;
55
56
  static ɵfac: i0.ɵɵFactoryDeclaration<FsHtmlEditorComponent, [{ optional: true; }, null, null]>;
56
- static ɵcmp: i0.ɵɵComponentDeclaration<FsHtmlEditorComponent, "fs-html-editor", never, { "config": "config"; "hint": "hint"; }, {}, never, never>;
57
+ static ɵcmp: i0.ɵɵComponentDeclaration<FsHtmlEditorComponent, "fs-html-editor", never, { "config": "config"; "hint": "hint"; "disabled": "disabled"; }, {}, never, never>;
57
58
  }
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
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
- 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.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';
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/common'), require('@firestitch/file'), require('rxjs'), require('rxjs/operators'), require('lodash-es'), require('@angular/platform-browser'), require('tributejs')) :
3
+ typeof define === 'function' && define.amd ? define('@firestitch/html-editor', ['exports', '@angular/core', '@angular/common', '@firestitch/label', '@firestitch/skeleton', '@angular/forms', '@firestitch/common', '@firestitch/file', 'rxjs', 'rxjs/operators', 'lodash-es', '@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.i4, global.ng.forms, global.common, global.file, global.rxjs, global.rxjs.operators, global.lodashEs, global.ng.platformBrowser, global.Tribute));
5
+ })(this, (function (exports, i0, i3, i2, i4, forms, common, file, rxjs, operators, lodashEs, i1, Tribute) { 'use strict';
6
6
 
7
7
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
8
 
@@ -490,9 +490,10 @@
490
490
  this._cdRef = _cdRef;
491
491
  this._fr = _fr;
492
492
  this.classFocused = false;
493
- this.classDisabled = false;
494
493
  this.config = {};
494
+ this.disabled = false;
495
495
  this.initialized = false;
496
+ this.containerID = "fs-html-editor-" + common.guid('xxx');
496
497
  this._initialize$ = new rxjs.ReplaySubject();
497
498
  this._froalaReady$ = new rxjs.BehaviorSubject(null);
498
499
  this._destroy$ = new rxjs.Subject();
@@ -529,7 +530,7 @@
529
530
  });
530
531
  FsHtmlEditorComponent.prototype.ngOnInit = function () {
531
532
  this.config = this.config || {};
532
- this.config.autofocus = this.config.autofocus !== false && !this.config.disabled;
533
+ this.config.autofocus = this.config.autofocus !== false && (!this.config.disabled || !this.disabled);
533
534
  this._listenLazyInit();
534
535
  };
535
536
  FsHtmlEditorComponent.prototype.ngAfterViewInit = function () {
@@ -604,7 +605,7 @@
604
605
  this.writeValue('');
605
606
  };
606
607
  FsHtmlEditorComponent.prototype.disable = function () {
607
- this.classDisabled = true;
608
+ this.disabled = true;
608
609
  };
609
610
  FsHtmlEditorComponent.prototype.setHtml = function (html) {
610
611
  this.writeValue(html);
@@ -741,6 +742,7 @@
741
742
  imageDefaultWidth: 0,
742
743
  imageDefaultAlign: 'left',
743
744
  quickInsertEnabled: false,
745
+ scrollableContainer: "#" + this.containerID,
744
746
  paragraphDefaultSelection: 'Format',
745
747
  videoUpload: false,
746
748
  imagePaste: !!((_a = config.image) === null || _a === void 0 ? void 0 : _a.upload),
@@ -903,7 +905,7 @@
903
905
  return FsHtmlEditorComponent;
904
906
  }());
905
907
  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 });
906
- FsHtmlEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsHtmlEditorComponent, selector: "fs-html-editor", inputs: { config: "config", hint: "hint" }, host: { properties: { "class.focused": "this.classFocused", "class.disabled": "this.classDisabled" } }, providers: [
908
+ FsHtmlEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsHtmlEditorComponent, selector: "fs-html-editor", inputs: { config: "config", hint: "hint", disabled: "disabled" }, host: { properties: { "class.focused": "this.classFocused", "class.disabled": "this.disabled" } }, providers: [
907
909
  {
908
910
  provide: forms.NG_VALUE_ACCESSOR,
909
911
  useExisting: i0.forwardRef(function () { return FsHtmlEditorComponent; }),
@@ -914,7 +916,7 @@
914
916
  useExisting: i0.forwardRef(function () { return FsHtmlEditorComponent; }),
915
917
  multi: true
916
918
  },
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}::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 });
919
+ ], 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 [id]=\"containerID\"\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}::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 });
918
920
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHtmlEditorComponent, decorators: [{
919
921
  type: i0.Component,
920
922
  args: [{
@@ -945,9 +947,6 @@
945
947
  }, propDecorators: { classFocused: [{
946
948
  type: i0.HostBinding,
947
949
  args: ['class.focused']
948
- }], classDisabled: [{
949
- type: i0.HostBinding,
950
- args: ['class.disabled']
951
950
  }], elRef: [{
952
951
  type: i0.ViewChild,
953
952
  args: ['elRef']
@@ -955,6 +954,11 @@
955
954
  type: i0.Input
956
955
  }], hint: [{
957
956
  type: i0.Input
957
+ }], disabled: [{
958
+ type: i0.Input
959
+ }, {
960
+ type: i0.HostBinding,
961
+ args: ['class.disabled']
958
962
  }] } });
959
963
 
960
964
  var FsHtmlRendererComponent = /** @class */ (function () {