@sdcorejs/angular 19.0.0 → 20.0.0-rc.2

package/fesm2022/sdcorejs-angular-components-editor.mjs

@@ -684,50 +684,60 @@ class SdEditor {
     #notifyService = inject(SdNotifyService);
     #i18n = inject(I18nService);
     // Input
-    option = input({});
-    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();
-    required = input(false, { transform: booleanAttribute });
-    disabled = input(false, { transform: booleanAttribute });
-    readonly = input(false, { transform: booleanAttribute });
-    hideInlineError = input(false, { transform: booleanAttribute });
-    inlineError = input();
-    placeholder = input();
-    validator = input();
-    form = input(undefined, {
-        transform: (val) => {
-            if (!val)
+    option = input({}, ...(ngDevMode ? [{ debugName: "option" }] : []));
+    height = input('250px', ...(ngDevMode ? [{ debugName: "height" }] : [])); // Chiều dài height hiển thị mặc định
+    maxHeight = input('250px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : [])); // 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, ...(ngDevMode ? [{ debugName: "maxlength" }] : []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    helperText = input(...(ngDevMode ? [undefined, { debugName: "helperText" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    hideInlineError = input(false, ...(ngDevMode ? [{ debugName: "hideInlineError", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    inlineError = input(...(ngDevMode ? [undefined, { debugName: "inlineError" }] : []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+    validator = input(...(ngDevMode ? [undefined, { debugName: "validator" }] : []));
+    form = input(undefined, ...(ngDevMode ? [{ debugName: "form", transform: (val) => {
+                if (!val)
+                    return undefined;
+                if (val instanceof NgForm)
+                    return val.form;
+                if (val instanceof FormGroup)
+                    return val;
+                if (val?.form instanceof FormGroup)
+                    return val.form;
                 return undefined;
-            if (val instanceof NgForm)
-                return val.form;
-            if (val instanceof FormGroup)
-                return val;
-            if (val?.form instanceof FormGroup)
-                return val.form;
-            return undefined;
-        },
-    });
-    key = input(undefined);
-    autoIdInput = input(undefined, { alias: 'autoId' });
-    autoId = computed(() => (this.autoIdInput() ? `components-editor-${this.autoIdInput()}` : undefined));
-    dataDisabled = computed(() => (this.disabled() ? 'true' : 'false'));
-    dataEmpty = computed(() => (sdIsEmpty(this.valueModel()) ? 'true' : 'false'));
-    name = input(uuid.v4());
-    valueModel = model('', { alias: 'model' });
+            } }] : [{
+            transform: (val) => {
+                if (!val)
+                    return undefined;
+                if (val instanceof NgForm)
+                    return val.form;
+                if (val instanceof FormGroup)
+                    return val;
+                if (val?.form instanceof FormGroup)
+                    return val.form;
+                return undefined;
+            },
+        }]));
+    key = input(undefined, ...(ngDevMode ? [{ debugName: "key" }] : []));
+    autoIdInput = input(undefined, ...(ngDevMode ? [{ debugName: "autoIdInput", alias: 'autoId' }] : [{ alias: 'autoId' }]));
+    autoId = computed(() => (this.autoIdInput() ? `components-editor-${this.autoIdInput()}` : undefined), ...(ngDevMode ? [{ debugName: "autoId" }] : []));
+    dataDisabled = computed(() => (this.disabled() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "dataDisabled" }] : []));
+    dataEmpty = computed(() => (sdIsEmpty(this.valueModel()) ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "dataEmpty" }] : []));
+    name = input(uuid.v4(), ...(ngDevMode ? [{ debugName: "name" }] : []));
+    valueModel = model('', ...(ngDevMode ? [{ debugName: "valueModel", alias: 'model' }] : [{ alias: 'model' }]));
     // Output
     sdChange = output();
     sdBlur = output();
     sdFocus = output();
     // State
-    _textLength = signal(0);
+    _textLength = signal(0, ...(ngDevMode ? [{ debugName: "_textLength" }] : []));
     formControl = new SdFormControl();
     isOverLimit = computed(() => {
         const max = this.maxlength();
         return max !== undefined && this._textLength() > max;
-    });
+    }, ...(ngDevMode ? [{ debugName: "isOverLimit" }] : []));
     get errorMessage() {
         const errors = this.formControl.errors;
         if (!errors)
@@ -799,7 +809,7 @@ class SdEditor {
             };
         }
         return config;
-    });
+    }, ...(ngDevMode ? [{ debugName: "editorConfig" }] : []));
     constructor() {
         this.#validateDuplicateConfigKeys();
         this.#setupEffects();
@@ -1063,13 +1073,13 @@ class SdEditor {
     #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: "<sd-ckeditor-styles />\n@let lbl = label();\n@let hText = helperText();\n@let hideErr = hideInlineError();\n@let errMsg = errorMessage;\n@let req = required();\n@let maxLen = maxlength();\n@let showCounter = !!maxLen && !formControl.disabled && !hideErr;\n\n@if (lbl) {\n  <sd-label [label]=\"lbl\" [required]=\"req\" [helperText]=\"hText\"></sd-label>\n}\n\n<div\n  class=\"sd-editor\"\n  [class.sd-editor--readonly]=\"readonly()\"\n  [class.sd-editor--error]=\"formControl.invalid && formControl.touched\"\n  [class.has-counter]=\"showCounter\"\n  [style.--sd-editor-content-min-height]=\"height()\"\n  [style.--sd-editor-content-max-height]=\"maxHeight()\"\n  [attr.data-autoId]=\"autoId()\"\n  [attr.data-disabled]=\"dataDisabled()\"\n  [attr.data-empty]=\"dataEmpty()\">\n  <ckeditor [editor]=\"Editor\" [config]=\"editorConfig()\" [disabled]=\"formControl.disabled\" (ready)=\"onReady($event)\"></ckeditor>\n\n  @if (showCounter) {\n    <div class=\"sd-editor-counter-row\">\n      <span class=\"sd-editor-counter\" [class.sd-editor-counter--over]=\"isOverLimit()\"> {{ _textLength() }}/{{ maxLen }} </span>\n    </div>\n  }\n\n  @if (hideErr && errMsg && formControl.touched) {\n    <mat-icon class=\"sd-error-icon\" [matTooltip]=\"errMsg\" matTooltipPosition=\"above\">error</mat-icon>\n  }\n</div>\n\n<div class=\"sd-editor-footer\">\n  @if (!hideErr && errMsg && formControl.touched) {\n    <mat-error>{{ errMsg }}</mat-error>\n  }\n</div>\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: "component", type: SdCKEditorStyles, selector: "sd-ckeditor-styles" }, { 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", 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: "<sd-ckeditor-styles />\n@let lbl = label();\n@let hText = helperText();\n@let hideErr = hideInlineError();\n@let errMsg = errorMessage;\n@let req = required();\n@let maxLen = maxlength();\n@let showCounter = !!maxLen && !formControl.disabled && !hideErr;\n\n@if (lbl) {\n  <sd-label [label]=\"lbl\" [required]=\"req\" [helperText]=\"hText\"></sd-label>\n}\n\n<div\n  class=\"sd-editor\"\n  [class.sd-editor--readonly]=\"readonly()\"\n  [class.sd-editor--error]=\"formControl.invalid && formControl.touched\"\n  [class.has-counter]=\"showCounter\"\n  [style.--sd-editor-content-min-height]=\"height()\"\n  [style.--sd-editor-content-max-height]=\"maxHeight()\"\n  [attr.data-autoId]=\"autoId()\"\n  [attr.data-disabled]=\"dataDisabled()\"\n  [attr.data-empty]=\"dataEmpty()\">\n  <ckeditor [editor]=\"Editor\" [config]=\"editorConfig()\" [disabled]=\"formControl.disabled\" (ready)=\"onReady($event)\"></ckeditor>\n\n  @if (showCounter) {\n    <div class=\"sd-editor-counter-row\">\n      <span class=\"sd-editor-counter\" [class.sd-editor-counter--over]=\"isOverLimit()\"> {{ _textLength() }}/{{ maxLen }} </span>\n    </div>\n  }\n\n  @if (hideErr && errMsg && formControl.touched) {\n    <mat-icon class=\"sd-error-icon\" [matTooltip]=\"errMsg\" matTooltipPosition=\"above\">error</mat-icon>\n  }\n</div>\n\n<div class=\"sd-editor-footer\">\n  @if (!hideErr && errMsg && formControl.touched) {\n    <mat-error>{{ errMsg }}</mat-error>\n  }\n</div>\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: "component", type: SdCKEditorStyles, selector: "sd-ckeditor-styles" }, { 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdEditor, decorators: [{
             type: Component,
             args: [{ selector: 'sd-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CKEditorModule, SdLabel, SdCKEditorStyles, MatFormFieldModule, MatIconModule, MatTooltipModule], template: "<sd-ckeditor-styles />\n@let lbl = label();\n@let hText = helperText();\n@let hideErr = hideInlineError();\n@let errMsg = errorMessage;\n@let req = required();\n@let maxLen = maxlength();\n@let showCounter = !!maxLen && !formControl.disabled && !hideErr;\n\n@if (lbl) {\n  <sd-label [label]=\"lbl\" [required]=\"req\" [helperText]=\"hText\"></sd-label>\n}\n\n<div\n  class=\"sd-editor\"\n  [class.sd-editor--readonly]=\"readonly()\"\n  [class.sd-editor--error]=\"formControl.invalid && formControl.touched\"\n  [class.has-counter]=\"showCounter\"\n  [style.--sd-editor-content-min-height]=\"height()\"\n  [style.--sd-editor-content-max-height]=\"maxHeight()\"\n  [attr.data-autoId]=\"autoId()\"\n  [attr.data-disabled]=\"dataDisabled()\"\n  [attr.data-empty]=\"dataEmpty()\">\n  <ckeditor [editor]=\"Editor\" [config]=\"editorConfig()\" [disabled]=\"formControl.disabled\" (ready)=\"onReady($event)\"></ckeditor>\n\n  @if (showCounter) {\n    <div class=\"sd-editor-counter-row\">\n      <span class=\"sd-editor-counter\" [class.sd-editor-counter--over]=\"isOverLimit()\"> {{ _textLength() }}/{{ maxLen }} </span>\n    </div>\n  }\n\n  @if (hideErr && errMsg && formControl.touched) {\n    <mat-icon class=\"sd-error-icon\" [matTooltip]=\"errMsg\" matTooltipPosition=\"above\">error</mat-icon>\n  }\n</div>\n\n<div class=\"sd-editor-footer\">\n  @if (!hideErr && errMsg && formControl.touched) {\n    <mat-error>{{ errMsg }}</mat-error>\n  }\n</div>\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: () => [] });
+        }], ctorParameters: () => [], propDecorators: { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hideInlineError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideInlineError", required: false }] }], inlineError: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineError", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], validator: [{ type: i0.Input, args: [{ isSignal: true, alias: "validator", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], valueModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], sdChange: [{ type: i0.Output, args: ["sdChange"] }], sdBlur: [{ type: i0.Output, args: ["sdBlur"] }], sdFocus: [{ type: i0.Output, args: ["sdFocus"] }] } });
 
 /**
  * Generated bundle index. Do not edit.