croco-html 20.5.1 → 20.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/croco-html.mjs
CHANGED
|
@@ -3615,7 +3615,7 @@ class TextEditorComponent {
|
|
|
3615
3615
|
const t = this.tag();
|
|
3616
3616
|
if (!t)
|
|
3617
3617
|
return '';
|
|
3618
|
-
return `<${t.tagDescription.tag}>${t.innerHtml}
|
|
3618
|
+
return `<${t.tagDescription.tag}>${t.innerHtml}</${t.tagDescription.tag}>`;
|
|
3619
3619
|
}, ...(ngDevMode ? [{ debugName: "previewHtml" }] : /* istanbul ignore next */ []));
|
|
3620
3620
|
this.TextAlignment = TextAlignment;
|
|
3621
3621
|
}
|
|
@@ -3634,17 +3634,20 @@ class TextEditorComponent {
|
|
|
3634
3634
|
this.presentOrEdit.set(val);
|
|
3635
3635
|
});
|
|
3636
3636
|
}
|
|
3637
|
-
onInnerHtmlChange() {
|
|
3637
|
+
onInnerHtmlChange(newInnerHtml) {
|
|
3638
3638
|
const tag = this.tag();
|
|
3639
3639
|
if (tag) {
|
|
3640
|
-
|
|
3640
|
+
const updated = { ...tag, innerHtml: newInnerHtml, attributes: { ...tag.attributes } };
|
|
3641
|
+
this.tag.set(updated);
|
|
3642
|
+
this._currentService.tag$.next(updated);
|
|
3641
3643
|
}
|
|
3642
3644
|
}
|
|
3643
3645
|
onAlignmentChange() {
|
|
3644
3646
|
const tag = this.tag();
|
|
3645
3647
|
if (tag && tag.attributes) {
|
|
3646
|
-
tag.attributes[TextTagDataConsts.HAlign]
|
|
3647
|
-
this.
|
|
3648
|
+
const updated = { ...tag, attributes: { ...tag.attributes, [TextTagDataConsts.HAlign]: this.horizontalAlignment() } };
|
|
3649
|
+
this.tag.set(updated);
|
|
3650
|
+
this._currentService.tag$.next(updated);
|
|
3648
3651
|
}
|
|
3649
3652
|
}
|
|
3650
3653
|
ngOnDestroy() {
|
|
@@ -3652,7 +3655,7 @@ class TextEditorComponent {
|
|
|
3652
3655
|
this._destroy$.complete();
|
|
3653
3656
|
}
|
|
3654
3657
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.26", ngImport: i0, type: TextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3655
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.26", type: TextEditorComponent, isStandalone: true, selector: "croco-html-text-editor", inputs: { tagService: "tagService" }, ngImport: i0, template: "@if (presentOrEdit()) {\n <div>\n <div style=\"height: 10px;\">\n </div>\n @if (horizontalAlignment() === TextAlignment.Left) {\n <div style=\"text-align: left;\" [innerHtml]=\"previewHtml()\">\n </div>\n }\n @else if (horizontalAlignment() === TextAlignment.Right) {\n <div style=\"text-align: right;\" [innerHtml]=\"previewHtml()\">\n </div>\n }\n @else if (horizontalAlignment() === TextAlignment.Center) {\n <div style=\"text-align: center;\" [innerHtml]=\"previewHtml()\">\n </div>\n }\n </div>\n}\n@else {\n <div>\n <div style=\"overflow-x: auto;\">\n <mat-button-toggle-group [(ngModel)]=\"horizontalAlignment\" (ngModelChange)=\"onAlignmentChange()\">\n <mat-button-toggle value=\"center\">\n \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\n </mat-button-toggle>\n <mat-button-toggle value=\"left\">\n \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\n </mat-button-toggle>\n <mat-button-toggle value=\"right\">\n \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n <div style=\"height: 10px;\">\n </div>\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430</mat-label>\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\n [
|
|
3658
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.26", type: TextEditorComponent, isStandalone: true, selector: "croco-html-text-editor", inputs: { tagService: "tagService" }, ngImport: i0, template: "@if (presentOrEdit()) {\n <div>\n <div style=\"height: 10px;\">\n </div>\n @if (horizontalAlignment() === TextAlignment.Left) {\n <div style=\"text-align: left;\" [innerHtml]=\"previewHtml()\">\n </div>\n }\n @else if (horizontalAlignment() === TextAlignment.Right) {\n <div style=\"text-align: right;\" [innerHtml]=\"previewHtml()\">\n </div>\n }\n @else if (horizontalAlignment() === TextAlignment.Center) {\n <div style=\"text-align: center;\" [innerHtml]=\"previewHtml()\">\n </div>\n }\n </div>\n}\n@else {\n <div>\n <div style=\"overflow-x: auto;\">\n <mat-button-toggle-group [(ngModel)]=\"horizontalAlignment\" (ngModelChange)=\"onAlignmentChange()\">\n <mat-button-toggle value=\"center\">\n \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\n </mat-button-toggle>\n <mat-button-toggle value=\"left\">\n \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\n </mat-button-toggle>\n <mat-button-toggle value=\"right\">\n \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n <div style=\"height: 10px;\">\n </div>\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430</mat-label>\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\n [ngModel]=\"tag()!.innerHtml\" (ngModelChange)=\"onInnerHtmlChange($event)\"></textarea>\n </mat-form-field>\n </div>\n </div>\n}\n", dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3656
3659
|
}
|
|
3657
3660
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.26", ngImport: i0, type: TextEditorComponent, decorators: [{
|
|
3658
3661
|
type: Component,
|
|
@@ -3665,7 +3668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.26", ngImpo
|
|
|
3665
3668
|
MatLabel,
|
|
3666
3669
|
MatInput,
|
|
3667
3670
|
CdkTextareaAutosize
|
|
3668
|
-
], template: "@if (presentOrEdit()) {\n <div>\n <div style=\"height: 10px;\">\n </div>\n @if (horizontalAlignment() === TextAlignment.Left) {\n <div style=\"text-align: left;\" [innerHtml]=\"previewHtml()\">\n </div>\n }\n @else if (horizontalAlignment() === TextAlignment.Right) {\n <div style=\"text-align: right;\" [innerHtml]=\"previewHtml()\">\n </div>\n }\n @else if (horizontalAlignment() === TextAlignment.Center) {\n <div style=\"text-align: center;\" [innerHtml]=\"previewHtml()\">\n </div>\n }\n </div>\n}\n@else {\n <div>\n <div style=\"overflow-x: auto;\">\n <mat-button-toggle-group [(ngModel)]=\"horizontalAlignment\" (ngModelChange)=\"onAlignmentChange()\">\n <mat-button-toggle value=\"center\">\n \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\n </mat-button-toggle>\n <mat-button-toggle value=\"left\">\n \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\n </mat-button-toggle>\n <mat-button-toggle value=\"right\">\n \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n <div style=\"height: 10px;\">\n </div>\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430</mat-label>\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\n [
|
|
3671
|
+
], template: "@if (presentOrEdit()) {\n <div>\n <div style=\"height: 10px;\">\n </div>\n @if (horizontalAlignment() === TextAlignment.Left) {\n <div style=\"text-align: left;\" [innerHtml]=\"previewHtml()\">\n </div>\n }\n @else if (horizontalAlignment() === TextAlignment.Right) {\n <div style=\"text-align: right;\" [innerHtml]=\"previewHtml()\">\n </div>\n }\n @else if (horizontalAlignment() === TextAlignment.Center) {\n <div style=\"text-align: center;\" [innerHtml]=\"previewHtml()\">\n </div>\n }\n </div>\n}\n@else {\n <div>\n <div style=\"overflow-x: auto;\">\n <mat-button-toggle-group [(ngModel)]=\"horizontalAlignment\" (ngModelChange)=\"onAlignmentChange()\">\n <mat-button-toggle value=\"center\">\n \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\n </mat-button-toggle>\n <mat-button-toggle value=\"left\">\n \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\n </mat-button-toggle>\n <mat-button-toggle value=\"right\">\n \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n <div style=\"height: 10px;\">\n </div>\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430</mat-label>\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\n [ngModel]=\"tag()!.innerHtml\" (ngModelChange)=\"onInnerHtmlChange($event)\"></textarea>\n </mat-form-field>\n </div>\n </div>\n}\n" }]
|
|
3669
3672
|
}], propDecorators: { tagService: [{
|
|
3670
3673
|
type: Input,
|
|
3671
3674
|
args: [{ required: true }]
|