ets-fe-ng-sdk 20.3.20 → 20.3.21

package/fesm2022/ets-fe-ng-sdk.mjs

@@ -57,7 +57,9 @@ import PerfectScrollbar from 'perfect-scrollbar';
 import { NGTelInputDirective } from '@serene-dev/ng-tel-input';
 import * as i2$3 from 'ngx-quill';
 import { QuillModule, QuillEditorComponent } from 'ngx-quill';
-import 'quill-mention';
+import Quill from 'quill';
+import { Mention } from 'quill-mention';
+import ImageResize from 'quill-resize-image';
 import { moveItemInArray, transferArrayItem, CdkDropList, CdkDrag, CdkDragPlaceholder, CdkDragHandle } from '@angular/cdk/drag-drop';
 import * as i1$4 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
@@ -15796,7 +15798,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                     ], template: "<div [formGroup]=\"form() | toAny\" class=\"row\">\n  @if (showLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showLabel]=\"showLabel()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <input\n    type=\"text\"\n    ngTelInput\n    [formControlName]=\"nameStrSignal()\"\n    [class]=\"inputClassSignal()\"\n    [ng2TelInputOptions]=\"config()\"\n    #pn\n    (ng2TelOutput)=\"getNumber($event)\"\n    (intlTelInputObject)=\"telInputObject($event)\"\n    (countryChange)=\"onCountrySelect.emit($event)\" />\n  @if (showValidationMsgSignal()) {\n    <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n  }\n  <!-- <input type=\"text\" [formControlName]=\"name|toAny\" [class]=\"inpCl|inputClass:valid:invalid:showValidation\" ng2TelInput\n    [ng2TelInputOptions]=\"config\" (hasError)=\"isValid($event)\" #pn (ng2TelOutput)=\"getNumber($event)\"\n    (intlTelInputObject)=\"telInputObject($event)\" (countryChange)=\"onCountryChange($event)\" /> -->\n</div>\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:0;height:100%;display:flex;align-items:center}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }] });
 
-// debugger;
+// Register Quill modules
+Quill.register('modules/mention', Mention);
+Quill.register('modules/imageResize', ImageResize);
 /**
  * Rich text editor component that integrates with Angular Reactive Forms.
  * Extends InputBasicComponent to provide form control functionality.
@@ -15815,7 +15819,7 @@ class RichTextEditorRFComponent extends InputBasicComponent {
          * Includes settings for resize, syntax highlighting, mentions, and toolbar options.
          */
         this.modules = signal({
-            resize: {},
+            imageResize: {},
             syntax: true,
             mention: {
                 allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
@@ -15867,7 +15871,7 @@ class RichTextEditorRFComponent extends InputBasicComponent {
         return this.iS.onContentChanged($event, this.form(), this.name());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RichTextEditorRFComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: RichTextEditorRFComponent, isStandalone: true, selector: "rich-text-editor-rf", viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (computedShowLabel()) {\n  <app-input-label\n    [colored]=\"coloredSignal()\"\n    [form]=\"form()\"\n    [hint]=\"hint()\"\n    [id]=\"idSignal()\"\n    [invalidCheckbox]=\"invalidCheckboxSignal()\"\n    [isRequired]=\"isRequiredSignal()\"\n    [label]=\"labelSignal()\"\n    [lblCl]=\"lblCl()\"\n    [light]=\"light()\"\n    [mini]=\"miniSignal()\"\n    [ngClass]=\"{ 'w-100': stackedSignal() }\"\n    [inlineHint]=\"inlineHint()\"\n    [showRequiredTag]=\"showRequiredTagSignal()\"\n    [showLabel]=\"showLabelSignal()\"\n    [small]=\"smallSignal()\"\n    [stacked]=\"stackedSignal()\"\n    [theme]=\"theme()\"\n    [xsmall]=\"xsmall()\" />\n}\n@if (!disabledSignal()) {\n  <div [formGroup]=\"form() | toAny\">\n    <quill-editor\n      [modules]=\"modules()\"\n      [formControlName]=\"nameStrSignal()\"\n      theme=\"snow\"\n      class=\"w-100\"\n      (onContentChanged)=\"onContentChanged($event)\" />\n  </div>\n} @else {\n  <quill-view-html [content]=\"valueSignal()\" theme=\"snow\" class=\"w-100\" />\n}\n\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [":host ::ng-deep .ql-container{border-radius:0 0 var(--border-radius) var(--border-radius)}:host ::ng-deep .ql-toolbar{border-radius:var(--border-radius) var(--border-radius) 0 0}:host ::ng-deep .ql-picker-label,:host ::ng-deep .ql-picker-options{border-radius:var(--border-radius)}:host ::ng-deep .ql-mention-list-container{height:300px}:host ::ng-deep .ngx-quill-view-html .ql-editor{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: QuillModule }, { kind: "component", type: i2$3.QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: i2$3.QuillViewHTMLComponent, selector: "quill-view-html", inputs: ["content", "theme", "sanitize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: RichTextEditorRFComponent, isStandalone: true, selector: "rich-text-editor-rf", viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (computedShowLabel()) {\n  <app-input-label\n    [colored]=\"coloredSignal()\"\n    [form]=\"form()\"\n    [hint]=\"hint()\"\n    [id]=\"idSignal()\"\n    [invalidCheckbox]=\"invalidCheckboxSignal()\"\n    [isRequired]=\"isRequiredSignal()\"\n    [label]=\"labelSignal()\"\n    [lblCl]=\"lblCl()\"\n    [light]=\"light()\"\n    [mini]=\"miniSignal()\"\n    [ngClass]=\"{ 'w-100': stackedSignal() }\"\n    [inlineHint]=\"inlineHint()\"\n    [showRequiredTag]=\"showRequiredTagSignal()\"\n    [showLabel]=\"showLabelSignal()\"\n    [small]=\"smallSignal()\"\n    [stacked]=\"stackedSignal()\"\n    [theme]=\"theme()\"\n    [xsmall]=\"xsmall()\" />\n}\n@if (!disabledSignal()) {\n  <div [formGroup]=\"form() | toAny\">\n    <quill-editor\n      [modules]=\"modules()\"\n      [formControlName]=\"nameStrSignal()\"\n      theme=\"snow\"\n      class=\"w-100\"\n      (onContentChanged)=\"onContentChanged($event)\" />\n  </div>\n} @else {\n  <quill-view-html [content]=\"valueSignal()\" theme=\"snow\" class=\"w-100\" />\n}\n\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [":host ::ng-deep .ql-container{border-radius:0 0 var(--border-radius) var(--border-radius)}:host ::ng-deep .ql-toolbar{border-radius:var(--border-radius) var(--border-radius) 0 0}:host ::ng-deep .ql-picker-label,:host ::ng-deep .ql-picker-options{border-radius:var(--border-radius)}:host ::ng-deep .ql-mention-list-container{height:300px}:host ::ng-deep .ngx-quill-view-html .ql-editor{padding:0}:host ::ng-deep .ql-snow .ql-tooltip{z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: QuillModule }, { kind: "component", type: i2$3.QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: i2$3.QuillViewHTMLComponent, selector: "quill-view-html", inputs: ["content", "theme", "sanitize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RichTextEditorRFComponent, decorators: [{
             type: Component,
@@ -15879,7 +15883,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         ToAnyPipe,
                         InputLabelComponent,
                         ValidationMessageComponent,
-                    ], template: "@if (computedShowLabel()) {\n  <app-input-label\n    [colored]=\"coloredSignal()\"\n    [form]=\"form()\"\n    [hint]=\"hint()\"\n    [id]=\"idSignal()\"\n    [invalidCheckbox]=\"invalidCheckboxSignal()\"\n    [isRequired]=\"isRequiredSignal()\"\n    [label]=\"labelSignal()\"\n    [lblCl]=\"lblCl()\"\n    [light]=\"light()\"\n    [mini]=\"miniSignal()\"\n    [ngClass]=\"{ 'w-100': stackedSignal() }\"\n    [inlineHint]=\"inlineHint()\"\n    [showRequiredTag]=\"showRequiredTagSignal()\"\n    [showLabel]=\"showLabelSignal()\"\n    [small]=\"smallSignal()\"\n    [stacked]=\"stackedSignal()\"\n    [theme]=\"theme()\"\n    [xsmall]=\"xsmall()\" />\n}\n@if (!disabledSignal()) {\n  <div [formGroup]=\"form() | toAny\">\n    <quill-editor\n      [modules]=\"modules()\"\n      [formControlName]=\"nameStrSignal()\"\n      theme=\"snow\"\n      class=\"w-100\"\n      (onContentChanged)=\"onContentChanged($event)\" />\n  </div>\n} @else {\n  <quill-view-html [content]=\"valueSignal()\" theme=\"snow\" class=\"w-100\" />\n}\n\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [":host ::ng-deep .ql-container{border-radius:0 0 var(--border-radius) var(--border-radius)}:host ::ng-deep .ql-toolbar{border-radius:var(--border-radius) var(--border-radius) 0 0}:host ::ng-deep .ql-picker-label,:host ::ng-deep .ql-picker-options{border-radius:var(--border-radius)}:host ::ng-deep .ql-mention-list-container{height:300px}:host ::ng-deep .ngx-quill-view-html .ql-editor{padding:0}\n"] }]
+                    ], template: "@if (computedShowLabel()) {\n  <app-input-label\n    [colored]=\"coloredSignal()\"\n    [form]=\"form()\"\n    [hint]=\"hint()\"\n    [id]=\"idSignal()\"\n    [invalidCheckbox]=\"invalidCheckboxSignal()\"\n    [isRequired]=\"isRequiredSignal()\"\n    [label]=\"labelSignal()\"\n    [lblCl]=\"lblCl()\"\n    [light]=\"light()\"\n    [mini]=\"miniSignal()\"\n    [ngClass]=\"{ 'w-100': stackedSignal() }\"\n    [inlineHint]=\"inlineHint()\"\n    [showRequiredTag]=\"showRequiredTagSignal()\"\n    [showLabel]=\"showLabelSignal()\"\n    [small]=\"smallSignal()\"\n    [stacked]=\"stackedSignal()\"\n    [theme]=\"theme()\"\n    [xsmall]=\"xsmall()\" />\n}\n@if (!disabledSignal()) {\n  <div [formGroup]=\"form() | toAny\">\n    <quill-editor\n      [modules]=\"modules()\"\n      [formControlName]=\"nameStrSignal()\"\n      theme=\"snow\"\n      class=\"w-100\"\n      (onContentChanged)=\"onContentChanged($event)\" />\n  </div>\n} @else {\n  <quill-view-html [content]=\"valueSignal()\" theme=\"snow\" class=\"w-100\" />\n}\n\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [":host ::ng-deep .ql-container{border-radius:0 0 var(--border-radius) var(--border-radius)}:host ::ng-deep .ql-toolbar{border-radius:var(--border-radius) var(--border-radius) 0 0}:host ::ng-deep .ql-picker-label,:host ::ng-deep .ql-picker-options{border-radius:var(--border-radius)}:host ::ng-deep .ql-mention-list-container{height:300px}:host ::ng-deep .ngx-quill-view-html .ql-editor{padding:0}:host ::ng-deep .ql-snow .ql-tooltip{z-index:1}\n"] }]
         }], propDecorators: { editor: [{
                 type: ViewChild,
                 args: [QuillEditorComponent]