croco-html 20.4.1 → 20.4.3
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 +18 -5
- package/fesm2022/croco-html.mjs.map +1 -1
- package/index.d.ts +45 -41
- package/package.json +1 -1
package/fesm2022/croco-html.mjs
CHANGED
|
@@ -2878,6 +2878,8 @@ class NullVisualEditorLogger {
|
|
|
2878
2878
|
}
|
|
2879
2879
|
onRemove(_) {
|
|
2880
2880
|
}
|
|
2881
|
+
onHtmlChanged(html) {
|
|
2882
|
+
}
|
|
2881
2883
|
}
|
|
2882
2884
|
|
|
2883
2885
|
class ConsoleVisualEditorLogger {
|
|
@@ -2892,6 +2894,9 @@ class ConsoleVisualEditorLogger {
|
|
|
2892
2894
|
onRemove(index) {
|
|
2893
2895
|
console.log("onRemove", index);
|
|
2894
2896
|
}
|
|
2897
|
+
onHtmlChanged(html) {
|
|
2898
|
+
console.log("onHtmlChanged", html);
|
|
2899
|
+
}
|
|
2895
2900
|
}
|
|
2896
2901
|
|
|
2897
2902
|
class XmlTagViewComponent {
|
|
@@ -3879,7 +3884,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3879
3884
|
type: ViewChild,
|
|
3880
3885
|
args: ['imageUploadBtn']
|
|
3881
3886
|
}], showMarkUp: [{
|
|
3882
|
-
type: Input
|
|
3887
|
+
type: Input,
|
|
3888
|
+
args: [{ required: false }]
|
|
3883
3889
|
}], logger: [{
|
|
3884
3890
|
type: Input,
|
|
3885
3891
|
args: [{ required: false }]
|
|
@@ -3986,6 +3992,7 @@ class MainEditorComponent {
|
|
|
3986
3992
|
this.visualEditorRendered = false;
|
|
3987
3993
|
this.showMarkUp = true;
|
|
3988
3994
|
this.useHtmlRaw = false;
|
|
3995
|
+
this.logger = new NullVisualEditorLogger();
|
|
3989
3996
|
this.html = "";
|
|
3990
3997
|
this.onHtmlChanged = new EventEmitter();
|
|
3991
3998
|
this.showSettingsButton = false;
|
|
@@ -4011,6 +4018,7 @@ class MainEditorComponent {
|
|
|
4011
4018
|
this.html = html;
|
|
4012
4019
|
this.onHtmlChanged.emit(html);
|
|
4013
4020
|
this._cdref.markForCheck();
|
|
4021
|
+
this.logger.onHtmlChanged(html);
|
|
4014
4022
|
}
|
|
4015
4023
|
textAreaModelChangedHandler() {
|
|
4016
4024
|
this.recalculateBodyTags();
|
|
@@ -4045,7 +4053,7 @@ class MainEditorComponent {
|
|
|
4045
4053
|
});
|
|
4046
4054
|
}
|
|
4047
4055
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MainEditorComponent, deps: [{ token: i1$5.ClipboardService }, { token: i2$4.MatSnackBar }, { token: i0.ChangeDetectorRef }, { token: i2$3.MatDialog }, { token: CrocoHtmlFileOptionsService }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4048
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MainEditorComponent, isStandalone: true, selector: "croco-html-main-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged" }, viewQueries: [{ propertyName: "visualEditor", first: true, predicate: ["visualEditor"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\" style=\"position: relative\">\n <mat-tab>\n <ng-template mat-tab-label>\n <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n </svg>\n </ng-template>\n\n <div style=\"height: 20px;\"></div>\n\n <croco-visual-editor #visualEditor [useHtmlRaw]=\"true\" [html]=\"html\" (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n (rendered)=\"visualEditorRenderedHandler()\">\n </croco-visual-editor>\n </mat-tab>\n\n <mat-tab>\n <ng-template mat-tab-label>\n <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n </svg>\n </ng-template>\n\n <div style=\"height: 10px;\"></div>\n @if (visualEditorRendered) {\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\n placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\" (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n </mat-form-field>\n </div>\n }\n\n <button (click)=\"copyMarkUp()\" mat-raised-button color=\"primary\">\n \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n </button>\n </mat-tab>\n <mat-tab>\n <ng-template mat-tab-label>\n <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n </svg>\n </ng-template>\n\n\n <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n <mat-card-content>\n <croco-html-view [html]=\"html\" [isEditor]=\"true\">\n </croco-html-view>\n </mat-card-content>\n </mat-card>\n </mat-tab>\n</mat-tab-group>\n\n<div [hidden]=\"!showSettingsButton\">\n <mat-icon class=\"settings\" (click)=\"openSettingsModal()\">settings</mat-icon>\n</div>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}:host{position:relative;width:100%;display:block;overflow-x:hidden}:host ::ng-deep .mat-expansion-panel,:host ::ng-deep .mat-mdc-tab-body-content,:host ::ng-deep .mat-mdc-tab-body,:host ::ng-deep .mat-mdc-tab-body-wrapper{overflow:visible}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.settings{position:absolute;top:20px;right:20px;cursor:pointer;z-index:1000}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i5.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "logger", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { 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"] }, { 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: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: HtmlViewComponent, selector: "croco-html-view", inputs: ["html", "isEditor", "dataController"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4056
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MainEditorComponent, isStandalone: true, selector: "croco-html-main-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", logger: "logger", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged" }, viewQueries: [{ propertyName: "visualEditor", first: true, predicate: ["visualEditor"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\" style=\"position: relative\">\n <mat-tab>\n <ng-template mat-tab-label>\n <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n </svg>\n </ng-template>\n\n <div style=\"height: 20px;\"></div>\n\n <croco-visual-editor #visualEditor [useHtmlRaw]=\"true\" [logger]=\"logger\" [html]=\"html\" (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n (rendered)=\"visualEditorRenderedHandler()\">\n </croco-visual-editor>\n </mat-tab>\n\n <mat-tab>\n <ng-template mat-tab-label>\n <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n </svg>\n </ng-template>\n\n <div style=\"height: 10px;\"></div>\n @if (visualEditorRendered) {\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\n placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\" (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n </mat-form-field>\n </div>\n }\n\n <button (click)=\"copyMarkUp()\" mat-raised-button color=\"primary\">\n \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n </button>\n </mat-tab>\n <mat-tab>\n <ng-template mat-tab-label>\n <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n </svg>\n </ng-template>\n\n\n <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n <mat-card-content>\n <croco-html-view [html]=\"html\" [isEditor]=\"true\">\n </croco-html-view>\n </mat-card-content>\n </mat-card>\n </mat-tab>\n</mat-tab-group>\n\n<div [hidden]=\"!showSettingsButton\">\n <mat-icon class=\"settings\" (click)=\"openSettingsModal()\">settings</mat-icon>\n</div>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}:host{position:relative;width:100%;display:block;overflow-x:hidden}:host ::ng-deep .mat-expansion-panel,:host ::ng-deep .mat-mdc-tab-body-content,:host ::ng-deep .mat-mdc-tab-body,:host ::ng-deep .mat-mdc-tab-body-wrapper{overflow:visible}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.settings{position:absolute;top:20px;right:20px;cursor:pointer;z-index:1000}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i5.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "logger", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { 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"] }, { 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: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: HtmlViewComponent, selector: "croco-html-view", inputs: ["html", "isEditor", "dataController"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4049
4057
|
}
|
|
4050
4058
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MainEditorComponent, decorators: [{
|
|
4051
4059
|
type: Component,
|
|
@@ -4062,7 +4070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
4062
4070
|
HtmlViewComponent,
|
|
4063
4071
|
SpriteIconPathPipe,
|
|
4064
4072
|
MatIcon
|
|
4065
|
-
], template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\" style=\"position: relative\">\n <mat-tab>\n <ng-template mat-tab-label>\n <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n </svg>\n </ng-template>\n\n <div style=\"height: 20px;\"></div>\n\n <croco-visual-editor #visualEditor [useHtmlRaw]=\"true\" [html]=\"html\" (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n (rendered)=\"visualEditorRenderedHandler()\">\n </croco-visual-editor>\n </mat-tab>\n\n <mat-tab>\n <ng-template mat-tab-label>\n <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n </svg>\n </ng-template>\n\n <div style=\"height: 10px;\"></div>\n @if (visualEditorRendered) {\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\n placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\" (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n </mat-form-field>\n </div>\n }\n\n <button (click)=\"copyMarkUp()\" mat-raised-button color=\"primary\">\n \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n </button>\n </mat-tab>\n <mat-tab>\n <ng-template mat-tab-label>\n <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n </svg>\n </ng-template>\n\n\n <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n <mat-card-content>\n <croco-html-view [html]=\"html\" [isEditor]=\"true\">\n </croco-html-view>\n </mat-card-content>\n </mat-card>\n </mat-tab>\n</mat-tab-group>\n\n<div [hidden]=\"!showSettingsButton\">\n <mat-icon class=\"settings\" (click)=\"openSettingsModal()\">settings</mat-icon>\n</div>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}:host{position:relative;width:100%;display:block;overflow-x:hidden}:host ::ng-deep .mat-expansion-panel,:host ::ng-deep .mat-mdc-tab-body-content,:host ::ng-deep .mat-mdc-tab-body,:host ::ng-deep .mat-mdc-tab-body-wrapper{overflow:visible}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.settings{position:absolute;top:20px;right:20px;cursor:pointer;z-index:1000}\n"] }]
|
|
4073
|
+
], template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\" style=\"position: relative\">\n <mat-tab>\n <ng-template mat-tab-label>\n <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n <use [attr.xlink:href]=\"'visual-editor-tab' | spriteIconPath\"></use>\n </svg>\n </ng-template>\n\n <div style=\"height: 20px;\"></div>\n\n <croco-visual-editor #visualEditor [useHtmlRaw]=\"true\" [logger]=\"logger\" [html]=\"html\" (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n (rendered)=\"visualEditorRenderedHandler()\">\n </croco-visual-editor>\n </mat-tab>\n\n <mat-tab>\n <ng-template mat-tab-label>\n <svg class=\"custom-icon\" width=\"32\" height=\"26\">\n <use [attr.xlink:href]=\"'source-code-tab' | spriteIconPath\"></use>\n </svg>\n </ng-template>\n\n <div style=\"height: 10px;\"></div>\n @if (visualEditorRendered) {\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\n placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\" (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n </mat-form-field>\n </div>\n }\n\n <button (click)=\"copyMarkUp()\" mat-raised-button color=\"primary\">\n \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n </button>\n </mat-tab>\n <mat-tab>\n <ng-template mat-tab-label>\n <svg class=\"custom-icon\" width=\"32\" height=\"30\">\n <use [attr.xlink:href]=\"'viewer-tab' | spriteIconPath\"></use>\n </svg>\n </ng-template>\n\n\n <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n <mat-card-content>\n <croco-html-view [html]=\"html\" [isEditor]=\"true\">\n </croco-html-view>\n </mat-card-content>\n </mat-card>\n </mat-tab>\n</mat-tab-group>\n\n<div [hidden]=\"!showSettingsButton\">\n <mat-icon class=\"settings\" (click)=\"openSettingsModal()\">settings</mat-icon>\n</div>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}:host{position:relative;width:100%;display:block;overflow-x:hidden}:host ::ng-deep .mat-expansion-panel,:host ::ng-deep .mat-mdc-tab-body-content,:host ::ng-deep .mat-mdc-tab-body,:host ::ng-deep .mat-mdc-tab-body-wrapper{overflow:visible}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.settings{position:absolute;top:20px;right:20px;cursor:pointer;z-index:1000}\n"] }]
|
|
4066
4074
|
}], ctorParameters: () => [{ type: i1$5.ClipboardService }, { type: i2$4.MatSnackBar }, { type: i0.ChangeDetectorRef }, { type: i2$3.MatDialog }, { type: CrocoHtmlFileOptionsService }, { type: undefined, decorators: [{
|
|
4067
4075
|
type: Inject,
|
|
4068
4076
|
args: [CrocoHtmlOptionsToken]
|
|
@@ -4070,9 +4078,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
4070
4078
|
type: ViewChild,
|
|
4071
4079
|
args: ["visualEditor", { static: true }]
|
|
4072
4080
|
}], showMarkUp: [{
|
|
4073
|
-
type: Input
|
|
4081
|
+
type: Input,
|
|
4082
|
+
args: [{ required: false }]
|
|
4074
4083
|
}], useHtmlRaw: [{
|
|
4075
|
-
type: Input
|
|
4084
|
+
type: Input,
|
|
4085
|
+
args: [{ required: false }]
|
|
4086
|
+
}], logger: [{
|
|
4087
|
+
type: Input,
|
|
4088
|
+
args: [{ required: false }]
|
|
4076
4089
|
}], html: [{
|
|
4077
4090
|
type: Input
|
|
4078
4091
|
}, {
|