@sd-angular/core 19.0.0-beta.96 → 19.0.0-beta.97

package/fesm2022/sd-angular-core-components-editor.mjs

@@ -212,6 +212,54 @@ const countTextLength = (content) => {
     doc.querySelectorAll('img, figure').forEach(el => el.remove());
     return doc.body.textContent?.length ?? 0;
 };
+const imageInlineStylesToClasses = (html) => {
+    if (!html)
+        return html;
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    doc.querySelectorAll('figure.image').forEach(figure => {
+        const styleMap = parseStyle(figure.getAttribute('style') || '');
+        const floatVal = styleMap.get('float') || '';
+        const marginVal = styleMap.get('margin') || '';
+        const widthVal = styleMap.get('width') || '';
+        const hasNumericWidth = /\d/.test(widthVal) && widthVal !== 'fit-content';
+        styleMap.delete('display');
+        styleMap.delete('max-width');
+        styleMap.delete('float');
+        styleMap.delete('margin');
+        if (widthVal === 'fit-content')
+            styleMap.delete('width');
+        figure.classList.remove('image-style-align-left', 'image-style-align-right', 'image-style-block-align-left', 'image-style-block-align-right');
+        if (floatVal === 'left') {
+            figure.classList.add('image-style-align-left');
+        }
+        else if (floatVal === 'right') {
+            figure.classList.add('image-style-align-right');
+        }
+        else if (marginVal === '0 auto 0 0') {
+            figure.classList.add(hasNumericWidth ? 'image-style-align-left' : 'image-style-block-align-left');
+        }
+        else if (marginVal === '0 0 0 auto') {
+            figure.classList.add(hasNumericWidth ? 'image-style-align-right' : 'image-style-block-align-right');
+        }
+        figure.setAttribute('style', serializeStyle(styleMap));
+        if (hasNumericWidth) {
+            const img = figure.querySelector('img');
+            if (img) {
+                const imgStyle = parseStyle(img.getAttribute('style') || '');
+                if (imgStyle.get('width') === '100%')
+                    imgStyle.delete('width');
+                if (imgStyle.get('height') === 'auto')
+                    imgStyle.delete('height');
+                const serialized = serializeStyle(imgStyle);
+                if (serialized)
+                    img.setAttribute('style', serialized);
+                else
+                    img.removeAttribute('style');
+            }
+        }
+    });
+    return doc.body.innerHTML;
+};
 const imageClassesToInlineStyles = (html) => {
     if (!html)
         return html;
@@ -635,8 +683,8 @@ class SdEditor {
     #i18n = inject(I18nService);
     // Input
     option = input({});
-    height = input('250px');
-    maxHeight = input('250px');
+    height = input('250px'); // Chiều dài height hiển thị mặc định
+    maxHeight = input('250px'); // Chiều dài tối đa mở rộng nếu nội dung vượt quá height mặc định
     maxlength = input(undefined);
     label = input();
     helperText = input();
@@ -754,16 +802,18 @@ class SdEditor {
         this.#setupSubscriptions();
         this.#setupDestroy();
     }
-    // Public API
     onReady = (editor) => {
         this.#editor = editor;
         const currentValue = this.valueModel();
-        if (currentValue)
-            this.#setContent(currentValue);
-        if (this.formControl.disabled)
+        if (currentValue) {
+            this.#setToEditor(currentValue);
+        }
+        if (this.formControl.disabled) {
             editor.enableReadOnlyMode('sd-editor');
-        if (this.readonly())
+        }
+        if (this.readonly()) {
             editor.enableReadOnlyMode('sd-editor-readonly');
+        }
         editor.model.document.registerPostFixer(writer => {
             let changed = false;
             for (const change of editor.model.document.differ.getChanges()) {
@@ -786,6 +836,159 @@ class SdEditor {
         });
     };
     focusEditor = () => this.#editor?.editing?.view?.focus?.();
+    /**
+     * Xử lý tải lên các file và trả về nội dung dữ liệu cuối cùng.
+     * * @description
+     * - Đối với các file upload chế độ 'deferred' (chỉ xử lý khi submit), cần @ViewChild component và gọi hàm upload() này.
+     * - Hỗ trợ two-way binding.
+     * - Hàm hỗ trợ trả ra data cuối cùng.
+     * * @returns {Promise<string>} Nội dung cuối cùng được trích xuất từ sd-editor.
+     */
+    upload = async () => {
+        await this.#uploadImages();
+        return this.#getFromEditor();
+    };
+    // Editor Content
+    #setToEditor(html) {
+        this.#editor?.setData?.(this.#normalizeHtmlForEditor(html));
+    }
+    #getFromEditor() {
+        return this.#editor ? this.#normalizeEditorToHtml(this.#editor.getData()) : '';
+    }
+    // Normalize HTML từ bên ngoài -> format CKEditor.
+    #normalizeHtmlForEditor = (html) => {
+        if (!html) {
+            return '';
+        }
+        let result = html;
+        result = imageInlineStylesToClasses(result);
+        return result;
+    };
+    // Normalize HTML từ CKEditor → format HTML.
+    #normalizeEditorToHtml = (html) => {
+        if (!html) {
+            return '';
+        }
+        let result = html;
+        result = imageClassesToInlineStyles(result);
+        return result;
+    };
+    // Xử lý binding 2 chiều
+    #onModelSignalChange(html) {
+        const v = html ?? '';
+        if (this.formControl.value === v) {
+            return;
+        }
+        this.formControl.setValue(v, { emitEvent: false });
+        this._textLength.set(countTextLength(v));
+        if (this.#editor) {
+            this.#setToEditor(v);
+        }
+    }
+    // Xử lý khi user soạn thảo
+    #onEditorUserInput(rawHtml) {
+        const out = imageClassesToInlineStyles(rawHtml);
+        this._textLength.set(countTextLength(out));
+        if (this.formControl.value !== out) {
+            this.formControl.setValue(out, { emitEvent: false });
+        }
+        this.formControl.updateValueAndValidity({ emitEvent: false });
+        this.formControl.sdChanges.next(true);
+        this.valueModel.set(out);
+        this.sdChange.emit(out);
+    }
+    // Xử lý nếu dev sử dụng form và set trực tiếp data
+    #onFormGroupExternalChange(html) {
+        const v = html ?? '';
+        this.valueModel.set(v);
+        this._textLength.set(countTextLength(v));
+        if (this.#editor) {
+            this.#setToEditor(v);
+        }
+    }
+    // Validators
+    #requiredValidator() {
+        return () => (this._textLength() ? null : { required: true });
+    }
+    #maxLengthValidator() {
+        return () => {
+            const max = this.maxlength();
+            const len = this._textLength();
+            return len > max ? { maxlength: { requiredLength: max, actualLength: len } } : null;
+        };
+    }
+    #inlineErrorValidator() {
+        return () => ({ inlineError: true });
+    }
+    #updateValidators() {
+        const validators = [];
+        const asyncValidators = [];
+        if (this.required()) {
+            validators.push(this.#requiredValidator());
+        }
+        if (this.maxlength() !== undefined) {
+            validators.push(this.#maxLengthValidator());
+        }
+        if (this.inlineError()) {
+            validators.push(this.#inlineErrorValidator());
+        }
+        const val = this.validator();
+        if (val) {
+            asyncValidators.push(HandleSdCustomValidator(val));
+        }
+        this.formControl.setValidators(validators.length ? validators : null);
+        this.formControl.setAsyncValidators(asyncValidators.length ? asyncValidators : null);
+        this.formControl.updateValueAndValidity({ emitEvent: false });
+    }
+    // Setup
+    #setupEffects() {
+        // Lắng nghe disabled
+        effect(() => {
+            this.disabled() ? this.formControl.disable({ emitEvent: false }) : this.formControl.enable({ emitEvent: false });
+        });
+        // Lắng nghe readonly
+        effect(() => {
+            if (!this.#editor) {
+                return;
+            }
+            if (this.readonly()) {
+                this.#editor.enableReadOnlyMode('sd-editor-readonly');
+            }
+            else {
+                this.#editor.disableReadOnlyMode('sd-editor-readonly');
+            }
+        });
+        // Lắng nghe binđing 2 chiều model
+        effect(() => this.#onModelSignalChange(this.valueModel()));
+        // Lắng nghe name form
+        effect(() => this.form()?.addControl(this.name(), this.formControl));
+        // Lắng nghe validators
+        effect(() => {
+            this.required();
+            this.maxlength();
+            this.inlineError();
+            this.validator();
+            this.#updateValidators();
+        });
+    }
+    #setupSubscriptions() {
+        // Đăng ký nếu dev sử dụng form để set data trực tiếp từ bên ngoài vào
+        this.formControl.valueChanges
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe((val) => this.#onFormGroupExternalChange(val));
+        this.formControl.sdChanges.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => this.#cdRef.markForCheck());
+        // Đăng ký user gõ trong editor
+        this.#contentChangeSubject
+            .pipe(debounceTime(100), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(rawHtml => this.#onEditorUserInput(rawHtml));
+    }
+    #setupDestroy() {
+        this.#destroyRef.onDestroy(() => {
+            this.form()?.removeControl(this.name());
+            this.#editor?.destroy?.();
+        });
+    }
+    // Helpers
     #uploadImages = async () => {
         const uploadMode = this.option()?.imageConfig?.uploadMode ?? 'deferred';
         // Early return nếu không phải 'deferred' mode.
@@ -823,77 +1026,18 @@ class SdEditor {
             throw new Error(`Upload failed for ${failedBatches.flat().length} image(s)`);
         }
     };
-    upload = async () => {
-        await this.#uploadImages();
-        return this.#getContent();
-    };
-    // Setup
-    #setupEffects = () => {
-        effect(() => {
-            this.disabled() ? this.formControl.disable({ emitEvent: false }) : this.formControl.enable({ emitEvent: false });
-        });
-        effect(() => {
-            if (!this.#editor)
-                return;
-            this.readonly() ? this.#editor.enableReadOnlyMode('sd-editor-readonly') : this.#editor.disableReadOnlyMode('sd-editor-readonly');
-        });
-        effect(() => {
-            const val = this.valueModel();
-            if (this.formControl.value !== val) {
-                this.formControl.setValue(val, { emitEvent: false });
-                if (this.#editor)
-                    this.#setContent(val);
-            }
-        });
-        effect(() => this.form()?.addControl(this.name(), this.formControl));
-        effect(() => {
-            this.required();
-            this.maxlength();
-            this.inlineError();
-            this.validator();
-            this.#updateValidators();
-        });
-    };
-    #setupSubscriptions = () => {
-        this.formControl.valueChanges.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((val) => {
-            const v = val ?? '';
-            this.valueModel.set(v);
-            this._textLength.set(countTextLength(v));
-            if (this.#editor) {
-                this.#setContent(v);
-            }
-        });
-        this.formControl.sdChanges.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => this.#cdRef.markForCheck());
-        this.#contentChangeSubject.pipe(debounceTime(100), takeUntilDestroyed(this.#destroyRef)).subscribe(content => {
-            const out = imageClassesToInlineStyles(content);
-            this._textLength.set(countTextLength(out));
-            if (this.formControl.value !== out)
-                this.formControl.setValue(out, { emitEvent: false });
-            this.formControl.updateValueAndValidity({ emitEvent: false });
-            this.formControl.sdChanges.next(true);
-            this.valueModel.set(out);
-            this.sdChange.emit(out);
-        });
-    };
-    #setupDestroy = () => {
-        this.#destroyRef.onDestroy(() => {
-            this.form()?.removeControl(this.name());
-            this.#editor?.destroy?.();
-        });
-    };
-    // Helpers
-    #setContent = (content) => this.#editor?.setData?.(content);
-    #getContent = () => (this.#editor ? imageClassesToInlineStyles(this.#editor.getData()) : '');
     #getConfigurations = () => {
         const config = this.#uploadConfig;
-        if (!config)
+        if (!config) {
             return [];
+        }
         return Array.isArray(config) ? config : [config];
     };
-    #validateDuplicateConfigKeys() {
+    #validateDuplicateConfigKeys = () => {
         const config = this.#uploadConfig;
-        if (!config)
+        if (!config) {
             return;
+        }
         const configurations = Array.isArray(config) ? config : [config];
         const seen = new Set();
         for (const cfg of configurations) {
@@ -904,42 +1048,23 @@ class SdEditor {
             }
             seen.add(normalizedKey);
         }
-    }
+    };
     #getSelectedConfig = () => {
         const configurations = this.#getConfigurations();
-        if (!configurations.length)
+        if (!configurations.length) {
             return undefined;
+        }
         return configurations.find(cfg => cfg.key === this.key());
     };
-    #buildUploadFn = () => this.option()?.imageConfig?.uploadFn ?? this.#getSelectedConfig()?.upload;
-    #updateValidators = () => {
-        const validators = [];
-        const asyncValidators = [];
-        if (this.required()) {
-            validators.push(() => (this._textLength() ? null : { required: true }));
-        }
-        const max = this.maxlength();
-        if (max !== undefined) {
-            validators.push(() => (this._textLength() > max ? { maxlength: { requiredLength: max, actualLength: this._textLength() } } : null));
-        }
-        const inl = this.inlineError();
-        if (inl) {
-            validators.push(() => ({ inlineError: true }));
-        }
-        const val = this.validator();
-        if (val) {
-            asyncValidators.push(HandleSdCustomValidator(val));
-        }
-        this.formControl.setValidators(validators.length ? validators : null);
-        this.formControl.setAsyncValidators(asyncValidators.length ? asyncValidators : null);
-        this.formControl.updateValueAndValidity({ emitEvent: false });
+    #buildUploadFn = () => {
+        return this.option()?.imageConfig?.uploadFn ?? this.#getSelectedConfig()?.upload;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdEditor, isStandalone: true, selector: "sd-editor", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hideInlineError: { classPropertyName: "hideInlineError", publicName: "hideInlineError", isSignal: true, isRequired: false, transformFunction: null }, inlineError: { classPropertyName: "inlineError", publicName: "inlineError", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange", sdChange: "sdChange", sdBlur: "sdBlur", sdFocus: "sdFocus" }, ngImport: i0, template: "@let lbl = label();\r\n@let hText = helperText();\r\n@let hideErr = hideInlineError();\r\n@let errMsg = errorMessage;\r\n@let req = required();\r\n@let maxLen = maxlength();\r\n@let showCounter = !!maxLen && !formControl.disabled && !hideErr;\r\n\r\n@if (lbl) {\r\n  <sd-label [label]=\"lbl\" [required]=\"req\" [helperText]=\"hText\"></sd-label>\r\n}\r\n\r\n<div\r\n  class=\"sd-editor\"\r\n  [class.sd-editor--readonly]=\"readonly()\"\r\n  [class.sd-editor--error]=\"formControl.invalid && formControl.touched\"\r\n  [class.has-counter]=\"showCounter\"\r\n  [style.--sd-editor-content-min-height]=\"height()\"\r\n  [style.--sd-editor-content-max-height]=\"maxHeight()\"\r\n  [attr.data-autoId]=\"autoId()\">\r\n  <ckeditor [editor]=\"Editor\" [config]=\"editorConfig()\" [disabled]=\"formControl.disabled\" (ready)=\"onReady($event)\"></ckeditor>\r\n\r\n  @if (showCounter) {\r\n    <div class=\"sd-editor-counter-row\">\r\n      <span class=\"sd-editor-counter\" [class.sd-editor-counter--over]=\"isOverLimit()\"> {{ _textLength() }}/{{ maxLen }} </span>\r\n    </div>\r\n  }\r\n\r\n  @if (hideErr && errMsg && formControl.touched) {\r\n    <mat-icon class=\"sd-error-icon\" [matTooltip]=\"errMsg\" matTooltipPosition=\"above\">error</mat-icon>\r\n  }\r\n</div>\r\n\r\n<div class=\"sd-editor-footer\">\r\n  @if (!hideErr && errMsg && formControl.touched) {\r\n    <mat-error>{{ errMsg }}</mat-error>\r\n  }\r\n</div>\r\n", styles: [".sd-editor{display:flex;flex-direction:column;width:100%;position:relative}.sd-editor-counter-row{display:flex;justify-content:flex-end;align-items:center;padding:4px 12px;border:1px solid var(--ck-color-base-border);border-top:none}.sd-editor-footer{min-height:20px;margin-top:4px}.sd-editor-footer mat-error{font-size:12px;color:var(--mdc-theme-error, #f44336)}.sd-error-icon{position:absolute;right:8px;bottom:8px;z-index:2;color:var(--mdc-theme-error, #f44336);height:20px;width:20px;font-size:20px;cursor:default}.sd-editor--readonly :host ::ng-deep .ck-editor__editable{background:#0000000a;cursor:default}.sd-editor-counter{font-size:12px;color:#0009}.sd-editor-counter--over{color:var(--mdc-theme-error, #f44336)}::ng-deep .ck-powered-by{display:none}:host ::ng-deep ckeditor,:host ::ng-deep .ck-editor{display:flex;flex-direction:column}:host ::ng-deep .ck-editor{--ck-content-font-size: 14px;--ck-content-line-height: 1.5}:host ::ng-deep .ck-editor__main{overflow:visible}:host ::ng-deep .ck-editor__editable{min-height:var(--sd-editor-content-min-height, 200px)!important;max-height:var(--sd-editor-content-max-height, none)!important;padding:24px!important;overflow-y:auto!important;border:1px solid var(--ck-color-base-border)!important}:host ::ng-deep .sd-editor.has-counter .ck-editor__editable{border-bottom:none!important}:host ::ng-deep .sd-editor--error .ck-editor__editable,:host ::ng-deep .sd-editor--error .ck-toolbar{border-color:var(--mdc-theme-error, #f44336)!important}:host ::ng-deep .sd-editor--error.has-counter .sd-editor-counter-row{border-color:var(--mdc-theme-error, #f44336)}:host ::ng-deep .ck-content p{margin-bottom:var(--ck-spacing-large);text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{margin-left:0!important;padding-left:20px!important}\n", ":host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content figure.image{position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto;overflow:visible}:host ::ng-deep .ck-content figure.image:hover,:host ::ng-deep .ck-content figure.image.ck-widget_selected{z-index:99999!important}:host ::ng-deep .ck-content figure.image.image-style-align-left{float:left;margin:0 1em 0 0}:host ::ng-deep .ck-content figure.image.image-style-align-left[style*=\"width:100\"]{float:none;margin:0 auto 0 0}:host ::ng-deep .ck-content figure.image.image-style-align-right{float:right;margin:0 0 0 1em}:host ::ng-deep .ck-content figure.image.image-style-align-right[style*=\"width:100\"]{float:none;margin:0 0 0 auto}:host ::ng-deep .ck-content figure.image.image-style-block-align-left{margin:0 auto 0 0}:host ::ng-deep .ck-content figure.image.image-style-block-align-right{margin:0 0 0 auto}:host ::ng-deep .ck-content figure.image .ck-progress-bar{position:absolute;bottom:0;left:0;width:30%!important;height:3px;background:var(--sd-color-primary, #1565c0);border-radius:2px;z-index:10;pointer-events:none;animation:sd-progress-indeterminate 1.4s ease-in-out infinite}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar){overflow:hidden}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar) img{filter:blur(1px) brightness(.85);transition:filter .3s ease}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar):after{content:\"\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:9;background:#ffffff40;border-radius:inherit}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar):before{content:\"\";position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:3px solid rgba(255,255,255,.5);border-top-color:var(--sd-color-primary, #1565c0);border-radius:50%;animation:sd-spinner .75s linear infinite;z-index:11;pointer-events:none}@keyframes sd-spinner{to{transform:rotate(360deg)}}@keyframes sd-progress-indeterminate{0%{left:-30%}to{left:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableWatchdog", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdEditor, isStandalone: true, selector: "sd-editor", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hideInlineError: { classPropertyName: "hideInlineError", publicName: "hideInlineError", isSignal: true, isRequired: false, transformFunction: null }, inlineError: { classPropertyName: "inlineError", publicName: "inlineError", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange", sdChange: "sdChange", sdBlur: "sdBlur", sdFocus: "sdFocus" }, ngImport: i0, template: "@let lbl = label();\r\n@let hText = helperText();\r\n@let hideErr = hideInlineError();\r\n@let errMsg = errorMessage;\r\n@let req = required();\r\n@let maxLen = maxlength();\r\n@let showCounter = !!maxLen && !formControl.disabled && !hideErr;\r\n\r\n@if (lbl) {\r\n  <sd-label [label]=\"lbl\" [required]=\"req\" [helperText]=\"hText\"></sd-label>\r\n}\r\n\r\n<div\r\n  class=\"sd-editor\"\r\n  [class.sd-editor--readonly]=\"readonly()\"\r\n  [class.sd-editor--error]=\"formControl.invalid && formControl.touched\"\r\n  [class.has-counter]=\"showCounter\"\r\n  [style.--sd-editor-content-min-height]=\"height()\"\r\n  [style.--sd-editor-content-max-height]=\"maxHeight()\"\r\n  [attr.data-autoId]=\"autoId()\">\r\n  <ckeditor [editor]=\"Editor\" [config]=\"editorConfig()\" [disabled]=\"formControl.disabled\" (ready)=\"onReady($event)\"></ckeditor>\r\n\r\n  @if (showCounter) {\r\n    <div class=\"sd-editor-counter-row\">\r\n      <span class=\"sd-editor-counter\" [class.sd-editor-counter--over]=\"isOverLimit()\"> {{ _textLength() }}/{{ maxLen }} </span>\r\n    </div>\r\n  }\r\n\r\n  @if (hideErr && errMsg && formControl.touched) {\r\n    <mat-icon class=\"sd-error-icon\" [matTooltip]=\"errMsg\" matTooltipPosition=\"above\">error</mat-icon>\r\n  }\r\n</div>\r\n\r\n<div class=\"sd-editor-footer\">\r\n  @if (!hideErr && errMsg && formControl.touched) {\r\n    <mat-error>{{ errMsg }}</mat-error>\r\n  }\r\n</div>\r\n", styles: [".sd-editor{display:flex;flex-direction:column;width:100%;position:relative}.sd-editor-counter-row{display:flex;justify-content:flex-end;align-items:center;padding:4px 12px;border:1px solid var(--ck-color-base-border);border-top:none}.sd-editor-footer{min-height:20px;margin-top:4px}.sd-editor-footer mat-error{font-size:12px;color:var(--mdc-theme-error, #f44336)}.sd-error-icon{position:absolute;right:8px;bottom:8px;z-index:2;color:var(--mdc-theme-error, #f44336);height:20px;width:20px;font-size:20px;cursor:default}.sd-editor--readonly :host ::ng-deep .ck-editor__editable{background:#0000000a;cursor:default}.sd-editor-counter{font-size:12px;color:#0009}.sd-editor-counter--over{color:var(--mdc-theme-error, #f44336)}::ng-deep .ck-powered-by,::ng-deep .ck-powered-by-balloon{display:none!important}:host ::ng-deep ckeditor,:host ::ng-deep .ck-editor{display:flex;flex-direction:column}:host ::ng-deep .ck-editor{--ck-content-font-size: 14px;--ck-content-line-height: 1.5}:host ::ng-deep .ck-editor__main{overflow:visible}:host ::ng-deep .ck-editor__editable{min-height:var(--sd-editor-content-min-height, 200px)!important;max-height:var(--sd-editor-content-max-height, none)!important;padding:24px!important;overflow-y:auto!important;border:1px solid var(--ck-color-base-border)!important}:host ::ng-deep .ck-editor__editable.ck-focused{box-shadow:none!important}:host ::ng-deep .sd-editor.has-counter .ck-editor__editable{border-bottom:none!important}:host ::ng-deep .sd-editor--error .ck-editor__editable,:host ::ng-deep .sd-editor--error .ck-toolbar{border-color:var(--mdc-theme-error, #f44336)!important}:host ::ng-deep .sd-editor--error.has-counter .sd-editor-counter-row{border-color:var(--mdc-theme-error, #f44336)}:host ::ng-deep .ck-content p{margin-bottom:var(--ck-spacing-large);text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{margin-left:0!important;padding-left:20px!important}\n", ":host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content figure.image{position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto;overflow:visible}:host ::ng-deep .ck-content figure.image:hover{z-index:99999!important}:host ::ng-deep .ck-content figure.image.image-style-align-left{float:left;margin:0 1em 0 0}:host ::ng-deep .ck-content figure.image.image-style-align-left[style*=\"width:100\"]{float:none;margin:0 auto 0 0}:host ::ng-deep .ck-content figure.image.image-style-align-right{float:right;margin:0 0 0 1em}:host ::ng-deep .ck-content figure.image.image-style-align-right[style*=\"width:100\"]{float:none;margin:0 0 0 auto}:host ::ng-deep .ck-content figure.image.image-style-block-align-left{margin:0 auto 0 0}:host ::ng-deep .ck-content figure.image.image-style-block-align-right{margin:0 0 0 auto}:host ::ng-deep .ck-content figure.image .ck-progress-bar{position:absolute;bottom:0;left:0;width:30%!important;height:3px;background:var(--sd-color-primary, #1565c0);border-radius:2px;z-index:10;pointer-events:none;animation:sd-progress-indeterminate 1.4s ease-in-out infinite}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar){overflow:hidden}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar) img{filter:blur(1px) brightness(.85);transition:filter .3s ease}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar):after{content:\"\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:9;background:#ffffff40;border-radius:inherit}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar):before{content:\"\";position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:3px solid rgba(255,255,255,.5);border-top-color:var(--sd-color-primary, #1565c0);border-radius:50%;animation:sd-spinner .75s linear infinite;z-index:11;pointer-events:none}@keyframes sd-spinner{to{transform:rotate(360deg)}}@keyframes sd-progress-indeterminate{0%{left:-30%}to{left:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableWatchdog", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdEditor, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CKEditorModule, SdLabel, MatFormFieldModule, MatIconModule, MatTooltipModule], template: "@let lbl = label();\r\n@let hText = helperText();\r\n@let hideErr = hideInlineError();\r\n@let errMsg = errorMessage;\r\n@let req = required();\r\n@let maxLen = maxlength();\r\n@let showCounter = !!maxLen && !formControl.disabled && !hideErr;\r\n\r\n@if (lbl) {\r\n  <sd-label [label]=\"lbl\" [required]=\"req\" [helperText]=\"hText\"></sd-label>\r\n}\r\n\r\n<div\r\n  class=\"sd-editor\"\r\n  [class.sd-editor--readonly]=\"readonly()\"\r\n  [class.sd-editor--error]=\"formControl.invalid && formControl.touched\"\r\n  [class.has-counter]=\"showCounter\"\r\n  [style.--sd-editor-content-min-height]=\"height()\"\r\n  [style.--sd-editor-content-max-height]=\"maxHeight()\"\r\n  [attr.data-autoId]=\"autoId()\">\r\n  <ckeditor [editor]=\"Editor\" [config]=\"editorConfig()\" [disabled]=\"formControl.disabled\" (ready)=\"onReady($event)\"></ckeditor>\r\n\r\n  @if (showCounter) {\r\n    <div class=\"sd-editor-counter-row\">\r\n      <span class=\"sd-editor-counter\" [class.sd-editor-counter--over]=\"isOverLimit()\"> {{ _textLength() }}/{{ maxLen }} </span>\r\n    </div>\r\n  }\r\n\r\n  @if (hideErr && errMsg && formControl.touched) {\r\n    <mat-icon class=\"sd-error-icon\" [matTooltip]=\"errMsg\" matTooltipPosition=\"above\">error</mat-icon>\r\n  }\r\n</div>\r\n\r\n<div class=\"sd-editor-footer\">\r\n  @if (!hideErr && errMsg && formControl.touched) {\r\n    <mat-error>{{ errMsg }}</mat-error>\r\n  }\r\n</div>\r\n", styles: [".sd-editor{display:flex;flex-direction:column;width:100%;position:relative}.sd-editor-counter-row{display:flex;justify-content:flex-end;align-items:center;padding:4px 12px;border:1px solid var(--ck-color-base-border);border-top:none}.sd-editor-footer{min-height:20px;margin-top:4px}.sd-editor-footer mat-error{font-size:12px;color:var(--mdc-theme-error, #f44336)}.sd-error-icon{position:absolute;right:8px;bottom:8px;z-index:2;color:var(--mdc-theme-error, #f44336);height:20px;width:20px;font-size:20px;cursor:default}.sd-editor--readonly :host ::ng-deep .ck-editor__editable{background:#0000000a;cursor:default}.sd-editor-counter{font-size:12px;color:#0009}.sd-editor-counter--over{color:var(--mdc-theme-error, #f44336)}::ng-deep .ck-powered-by{display:none}:host ::ng-deep ckeditor,:host ::ng-deep .ck-editor{display:flex;flex-direction:column}:host ::ng-deep .ck-editor{--ck-content-font-size: 14px;--ck-content-line-height: 1.5}:host ::ng-deep .ck-editor__main{overflow:visible}:host ::ng-deep .ck-editor__editable{min-height:var(--sd-editor-content-min-height, 200px)!important;max-height:var(--sd-editor-content-max-height, none)!important;padding:24px!important;overflow-y:auto!important;border:1px solid var(--ck-color-base-border)!important}:host ::ng-deep .sd-editor.has-counter .ck-editor__editable{border-bottom:none!important}:host ::ng-deep .sd-editor--error .ck-editor__editable,:host ::ng-deep .sd-editor--error .ck-toolbar{border-color:var(--mdc-theme-error, #f44336)!important}:host ::ng-deep .sd-editor--error.has-counter .sd-editor-counter-row{border-color:var(--mdc-theme-error, #f44336)}:host ::ng-deep .ck-content p{margin-bottom:var(--ck-spacing-large);text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{margin-left:0!important;padding-left:20px!important}\n", ":host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content figure.image{position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto;overflow:visible}:host ::ng-deep .ck-content figure.image:hover,:host ::ng-deep .ck-content figure.image.ck-widget_selected{z-index:99999!important}:host ::ng-deep .ck-content figure.image.image-style-align-left{float:left;margin:0 1em 0 0}:host ::ng-deep .ck-content figure.image.image-style-align-left[style*=\"width:100\"]{float:none;margin:0 auto 0 0}:host ::ng-deep .ck-content figure.image.image-style-align-right{float:right;margin:0 0 0 1em}:host ::ng-deep .ck-content figure.image.image-style-align-right[style*=\"width:100\"]{float:none;margin:0 0 0 auto}:host ::ng-deep .ck-content figure.image.image-style-block-align-left{margin:0 auto 0 0}:host ::ng-deep .ck-content figure.image.image-style-block-align-right{margin:0 0 0 auto}:host ::ng-deep .ck-content figure.image .ck-progress-bar{position:absolute;bottom:0;left:0;width:30%!important;height:3px;background:var(--sd-color-primary, #1565c0);border-radius:2px;z-index:10;pointer-events:none;animation:sd-progress-indeterminate 1.4s ease-in-out infinite}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar){overflow:hidden}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar) img{filter:blur(1px) brightness(.85);transition:filter .3s ease}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar):after{content:\"\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:9;background:#ffffff40;border-radius:inherit}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar):before{content:\"\";position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:3px solid rgba(255,255,255,.5);border-top-color:var(--sd-color-primary, #1565c0);border-radius:50%;animation:sd-spinner .75s linear infinite;z-index:11;pointer-events:none}@keyframes sd-spinner{to{transform:rotate(360deg)}}@keyframes sd-progress-indeterminate{0%{left:-30%}to{left:100%}}\n"] }]
+            args: [{ selector: 'sd-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CKEditorModule, SdLabel, MatFormFieldModule, MatIconModule, MatTooltipModule], template: "@let lbl = label();\r\n@let hText = helperText();\r\n@let hideErr = hideInlineError();\r\n@let errMsg = errorMessage;\r\n@let req = required();\r\n@let maxLen = maxlength();\r\n@let showCounter = !!maxLen && !formControl.disabled && !hideErr;\r\n\r\n@if (lbl) {\r\n  <sd-label [label]=\"lbl\" [required]=\"req\" [helperText]=\"hText\"></sd-label>\r\n}\r\n\r\n<div\r\n  class=\"sd-editor\"\r\n  [class.sd-editor--readonly]=\"readonly()\"\r\n  [class.sd-editor--error]=\"formControl.invalid && formControl.touched\"\r\n  [class.has-counter]=\"showCounter\"\r\n  [style.--sd-editor-content-min-height]=\"height()\"\r\n  [style.--sd-editor-content-max-height]=\"maxHeight()\"\r\n  [attr.data-autoId]=\"autoId()\">\r\n  <ckeditor [editor]=\"Editor\" [config]=\"editorConfig()\" [disabled]=\"formControl.disabled\" (ready)=\"onReady($event)\"></ckeditor>\r\n\r\n  @if (showCounter) {\r\n    <div class=\"sd-editor-counter-row\">\r\n      <span class=\"sd-editor-counter\" [class.sd-editor-counter--over]=\"isOverLimit()\"> {{ _textLength() }}/{{ maxLen }} </span>\r\n    </div>\r\n  }\r\n\r\n  @if (hideErr && errMsg && formControl.touched) {\r\n    <mat-icon class=\"sd-error-icon\" [matTooltip]=\"errMsg\" matTooltipPosition=\"above\">error</mat-icon>\r\n  }\r\n</div>\r\n\r\n<div class=\"sd-editor-footer\">\r\n  @if (!hideErr && errMsg && formControl.touched) {\r\n    <mat-error>{{ errMsg }}</mat-error>\r\n  }\r\n</div>\r\n", styles: [".sd-editor{display:flex;flex-direction:column;width:100%;position:relative}.sd-editor-counter-row{display:flex;justify-content:flex-end;align-items:center;padding:4px 12px;border:1px solid var(--ck-color-base-border);border-top:none}.sd-editor-footer{min-height:20px;margin-top:4px}.sd-editor-footer mat-error{font-size:12px;color:var(--mdc-theme-error, #f44336)}.sd-error-icon{position:absolute;right:8px;bottom:8px;z-index:2;color:var(--mdc-theme-error, #f44336);height:20px;width:20px;font-size:20px;cursor:default}.sd-editor--readonly :host ::ng-deep .ck-editor__editable{background:#0000000a;cursor:default}.sd-editor-counter{font-size:12px;color:#0009}.sd-editor-counter--over{color:var(--mdc-theme-error, #f44336)}::ng-deep .ck-powered-by,::ng-deep .ck-powered-by-balloon{display:none!important}:host ::ng-deep ckeditor,:host ::ng-deep .ck-editor{display:flex;flex-direction:column}:host ::ng-deep .ck-editor{--ck-content-font-size: 14px;--ck-content-line-height: 1.5}:host ::ng-deep .ck-editor__main{overflow:visible}:host ::ng-deep .ck-editor__editable{min-height:var(--sd-editor-content-min-height, 200px)!important;max-height:var(--sd-editor-content-max-height, none)!important;padding:24px!important;overflow-y:auto!important;border:1px solid var(--ck-color-base-border)!important}:host ::ng-deep .ck-editor__editable.ck-focused{box-shadow:none!important}:host ::ng-deep .sd-editor.has-counter .ck-editor__editable{border-bottom:none!important}:host ::ng-deep .sd-editor--error .ck-editor__editable,:host ::ng-deep .sd-editor--error .ck-toolbar{border-color:var(--mdc-theme-error, #f44336)!important}:host ::ng-deep .sd-editor--error.has-counter .sd-editor-counter-row{border-color:var(--mdc-theme-error, #f44336)}:host ::ng-deep .ck-content p{margin-bottom:var(--ck-spacing-large);text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{margin-left:0!important;padding-left:20px!important}\n", ":host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content figure.image{position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto;overflow:visible}:host ::ng-deep .ck-content figure.image:hover{z-index:99999!important}:host ::ng-deep .ck-content figure.image.image-style-align-left{float:left;margin:0 1em 0 0}:host ::ng-deep .ck-content figure.image.image-style-align-left[style*=\"width:100\"]{float:none;margin:0 auto 0 0}:host ::ng-deep .ck-content figure.image.image-style-align-right{float:right;margin:0 0 0 1em}:host ::ng-deep .ck-content figure.image.image-style-align-right[style*=\"width:100\"]{float:none;margin:0 0 0 auto}:host ::ng-deep .ck-content figure.image.image-style-block-align-left{margin:0 auto 0 0}:host ::ng-deep .ck-content figure.image.image-style-block-align-right{margin:0 0 0 auto}:host ::ng-deep .ck-content figure.image .ck-progress-bar{position:absolute;bottom:0;left:0;width:30%!important;height:3px;background:var(--sd-color-primary, #1565c0);border-radius:2px;z-index:10;pointer-events:none;animation:sd-progress-indeterminate 1.4s ease-in-out infinite}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar){overflow:hidden}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar) img{filter:blur(1px) brightness(.85);transition:filter .3s ease}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar):after{content:\"\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:9;background:#ffffff40;border-radius:inherit}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar):before{content:\"\";position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:3px solid rgba(255,255,255,.5);border-top-color:var(--sd-color-primary, #1565c0);border-radius:50%;animation:sd-spinner .75s linear infinite;z-index:11;pointer-events:none}@keyframes sd-spinner{to{transform:rotate(360deg)}}@keyframes sd-progress-indeterminate{0%{left:-30%}to{left:100%}}\n"] }]
         }], ctorParameters: () => [] });
 
 /**