croco-html 3.0.3 → 3.0.5
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/esm2022/lib/components/add-files-btn/add-files-btn.component.mjs +2 -2
- package/esm2022/lib/components/editor/button-editor/button-editor.component.mjs +2 -2
- package/esm2022/lib/components/editor/custom-widget-editor/custom-widget-editor.component.mjs +2 -2
- package/esm2022/lib/components/editor/external-video-editor/embedded-video/code-video.component.mjs +9 -3
- package/esm2022/lib/components/editor/external-video-editor/external-video-editor.component.mjs +18 -7
- package/esm2022/lib/components/editor/external-video-editor/vk-video-player/vk-video-player.component.mjs +3 -3
- package/esm2022/lib/components/editor/external-video-editor/youtube-video-player/youtube-video-player.component.mjs +3 -3
- package/esm2022/lib/components/editor/html-raw-editor/html-raw-editor.component.mjs +16 -8
- package/esm2022/lib/components/editor/image-editor/image-editor.component.mjs +2 -10
- package/esm2022/lib/components/editor/main-editor-block/main-editor-block.component.mjs +3 -3
- package/esm2022/lib/components/editor/text-editor/text-editor.component.mjs +2 -2
- package/esm2022/lib/components/editor/visual-editor/DefaultTags.mjs +1 -1
- package/esm2022/lib/components/editor/visual-editor/visual-editor.component.mjs +20 -6
- package/esm2022/lib/components/xml-tags/html-raw-view/html-raw-view.component.mjs +3 -3
- package/esm2022/lib/components/xml-tags/xml-tag-external-video/xml-tag-external-video.component.mjs +6 -4
- package/esm2022/lib/extensions/BodyTagsExtensions.mjs +7 -3
- package/esm2022/lib/extensions/VideoMethods.mjs +3 -1
- package/esm2022/lib/options/index.mjs +1 -1
- package/esm2022/sprites-ids.type.mjs +1 -1
- package/fesm2022/croco-html.mjs +97 -59
- package/fesm2022/croco-html.mjs.map +1 -1
- package/lib/components/editor/external-video-editor/embedded-video/code-video.component.d.ts +3 -1
- package/lib/components/editor/external-video-editor/external-video-editor.component.d.ts +1 -0
- package/lib/components/editor/html-raw-editor/html-raw-editor.component.d.ts +8 -4
- package/lib/components/editor/visual-editor/visual-editor.component.d.ts +5 -0
- package/lib/extensions/VideoMethods.d.ts +2 -0
- package/lib/index.d.ts +10 -8
- package/lib/options/index.d.ts +9 -0
- package/package.json +1 -1
- package/sprites-ids.type.d.ts +1 -1
- package/src/assets/sprites/symbol/croco-html-svg-sprite.svg +1 -1
package/fesm2022/croco-html.mjs
CHANGED
|
@@ -15,21 +15,23 @@ import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
|
15
15
|
import * as i1$2 from '@angular/material/card';
|
|
16
16
|
import { MatCardModule, MatCard, MatCardContent } from '@angular/material/card';
|
|
17
17
|
import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
|
|
18
|
-
import { NgStyle, NgTemplateOutlet,
|
|
18
|
+
import { NgStyle, NgTemplateOutlet, CommonModule } from '@angular/common';
|
|
19
19
|
import * as i2$1 from '@angular/material/input';
|
|
20
20
|
import { MatInput, MatInputModule } from '@angular/material/input';
|
|
21
21
|
import * as i12 from '@angular/material/tooltip';
|
|
22
22
|
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
|
|
23
|
+
import * as i13 from '@angular/material/checkbox';
|
|
24
|
+
import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
|
|
23
25
|
import * as i3 from '@angular/cdk/text-field';
|
|
24
26
|
import { CdkTextareaAutosize } from '@angular/cdk/text-field';
|
|
25
27
|
import * as i2$2 from '@ng-select/ng-select';
|
|
26
28
|
import { NgSelectModule } from '@ng-select/ng-select';
|
|
27
29
|
import * as i29 from '@angular/material/button-toggle';
|
|
28
30
|
import { MatButtonToggleGroup, MatButtonToggle, MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
29
|
-
import * as i28 from '@angular/cdk/drag-drop';
|
|
30
|
-
import { CdkDragHandle, moveItemInArray, CdkDropList, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
|
|
31
31
|
import * as i22 from '@angular/material/slide-toggle';
|
|
32
32
|
import { MatSlideToggle, MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
33
|
+
import * as i28 from '@angular/cdk/drag-drop';
|
|
34
|
+
import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
|
|
33
35
|
import * as i24 from '@angular/material/core';
|
|
34
36
|
import { MatOption, MatNativeDateModule } from '@angular/material/core';
|
|
35
37
|
import * as i11 from '@angular/material/select';
|
|
@@ -41,8 +43,6 @@ import { MatTabsModule } from '@angular/material/tabs';
|
|
|
41
43
|
import * as i1$5 from 'ngx-clipboard';
|
|
42
44
|
import * as i2$3 from '@angular/material/snack-bar';
|
|
43
45
|
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
|
44
|
-
import * as i13 from '@angular/material/checkbox';
|
|
45
|
-
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
46
46
|
import * as i25 from '@angular/material/autocomplete';
|
|
47
47
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
48
48
|
import * as i14 from '@angular/material/chips';
|
|
@@ -533,6 +533,7 @@ class ExternalVideoTagDataConsts {
|
|
|
533
533
|
static { this.TagName = "external-video"; }
|
|
534
534
|
static { this.VideoTypeAttrName = "type"; }
|
|
535
535
|
static { this.LinkAttrName = "link"; }
|
|
536
|
+
static { this.UseResponsiveWrapperAttrName = "use-responsive-wrapper"; }
|
|
536
537
|
static { this.IframeAttrName = "iframe"; }
|
|
537
538
|
}
|
|
538
539
|
class ExternalVideoSupportedTypes {
|
|
@@ -561,6 +562,7 @@ class VideoMethods {
|
|
|
561
562
|
data: {
|
|
562
563
|
type: elem.getAttribute(ExternalVideoTagDataConsts.VideoTypeAttrName),
|
|
563
564
|
link: elem.getAttribute(ExternalVideoTagDataConsts.LinkAttrName),
|
|
565
|
+
useResponsiveWrapper: elem.getAttribute(ExternalVideoTagDataConsts.UseResponsiveWrapperAttrName) !== 'false',
|
|
564
566
|
innerHtml: elem.innerHTML
|
|
565
567
|
}
|
|
566
568
|
};
|
|
@@ -749,7 +751,11 @@ class BodyTagsExtensions {
|
|
|
749
751
|
return `<${x.tagDescription.tag} h-align="${x.attributes[TextTagDataConsts.HAlign]}">${x.innerHtml}</${x.tagDescription.tag}>`;
|
|
750
752
|
}
|
|
751
753
|
if (x.tagDescription.tag === ExternalVideoTagDataConsts.TagName) {
|
|
752
|
-
|
|
754
|
+
let useResponsiveWrapperAttr = '';
|
|
755
|
+
if (x.attributes[ExternalVideoTagDataConsts.VideoTypeAttrName] === ExternalVideoSupportedTypes.Code) {
|
|
756
|
+
useResponsiveWrapperAttr = `${ExternalVideoTagDataConsts.UseResponsiveWrapperAttrName}="${x.attributes[ExternalVideoTagDataConsts.UseResponsiveWrapperAttrName] || false}"`;
|
|
757
|
+
}
|
|
758
|
+
return `<${x.tagDescription.tag} ${useResponsiveWrapperAttr} type="${x.attributes[ExternalVideoTagDataConsts.VideoTypeAttrName]}" link="${x.attributes[ExternalVideoTagDataConsts.LinkAttrName]}">${x.innerHtml}</${x.tagDescription.tag}>`;
|
|
753
759
|
}
|
|
754
760
|
if (x.tagDescription.tag === "html-raw") {
|
|
755
761
|
return `<${x.tagDescription.tag}>${x.innerHtml}</${x.tagDescription.tag}>`;
|
|
@@ -1068,7 +1074,7 @@ class AddFilesBtnComponent {
|
|
|
1068
1074
|
ngOnInit() {
|
|
1069
1075
|
}
|
|
1070
1076
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: AddFilesBtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1071
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: AddFilesBtnComponent, isStandalone: true, selector: "croco-html-add-files-btn", outputs: { postFilesStarted: "postFilesStarted", filesTagsReady: "filesTagsReady" }, viewQueries: [{ propertyName: "fakeBtn", first: true, predicate: ["fakeBtn"], descendants: true }], ngImport: i0, template: "<div [hidden]=\"true\">\n <croco-app-upload-files-btn #fakeBtn (onFilesUploaded)=\"filesUploadedHandler($event)\"\n [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\" [createLocalCopiesNow]=\"true\"\n (postFilesStarted)=\"postFilesStartedEventHandler($event)\" [extAccepts]=\"'image/*'\"></croco-app-upload-files-btn>\n</div>\n\n<div>\n <button class=\"w-100\" (click)=\"handleClick()\" mat-stroked-button>\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</button>\n</div>",
|
|
1077
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: AddFilesBtnComponent, isStandalone: true, selector: "croco-html-add-files-btn", outputs: { postFilesStarted: "postFilesStarted", filesTagsReady: "filesTagsReady" }, viewQueries: [{ propertyName: "fakeBtn", first: true, predicate: ["fakeBtn"], descendants: true }], ngImport: i0, template: "<div [hidden]=\"true\">\n <croco-app-upload-files-btn #fakeBtn (onFilesUploaded)=\"filesUploadedHandler($event)\"\n [btnText]=\"'\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F'\" [createLocalCopiesNow]=\"true\"\n (postFilesStarted)=\"postFilesStartedEventHandler($event)\" [extAccepts]=\"'image/*'\"></croco-app-upload-files-btn>\n</div>\n\n<div>\n <button class=\"w-100\" (click)=\"handleClick()\" mat-stroked-button>\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F</button>\n</div>", dependencies: [{ kind: "component", type: UploadFilesBtnComponent, selector: "croco-app-upload-files-btn", inputs: ["extAccepts", "isMultiple", "btnText", "createLocalCopiesNow", "hidden"], outputs: ["postFilesStarted", "onFilesUploaded"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
1072
1078
|
}
|
|
1073
1079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: AddFilesBtnComponent, decorators: [{
|
|
1074
1080
|
type: Component,
|
|
@@ -1090,11 +1096,11 @@ class YoutubeVideoPlayerComponent {
|
|
|
1090
1096
|
this.sanitizer = sanitizer;
|
|
1091
1097
|
}
|
|
1092
1098
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: YoutubeVideoPlayerComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1093
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: YoutubeVideoPlayerComponent, isStandalone: true, selector: "youtube-video-player", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"video-player\">\n <iframe\n
|
|
1099
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: YoutubeVideoPlayerComponent, isStandalone: true, selector: "youtube-video-player", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"code-view video-player use-responsive\">\n <iframe\n [src]=\"safeUrl\"\n title=\"YouTube video player\"\n frameborder=\"0\"\n allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n</div>\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }); }
|
|
1094
1100
|
}
|
|
1095
1101
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: YoutubeVideoPlayerComponent, decorators: [{
|
|
1096
1102
|
type: Component,
|
|
1097
|
-
args: [{ selector: 'youtube-video-player', standalone: true, imports: [], template: "<div class=\"video-player\">\n <iframe\n
|
|
1103
|
+
args: [{ selector: 'youtube-video-player', standalone: true, imports: [], template: "<div class=\"code-view video-player use-responsive\">\n <iframe\n [src]=\"safeUrl\"\n title=\"YouTube video player\"\n frameborder=\"0\"\n allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n</div>\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
|
|
1098
1104
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { link: [{
|
|
1099
1105
|
type: Input
|
|
1100
1106
|
}] } });
|
|
@@ -1107,19 +1113,23 @@ class VkVideoPlayerComponent {
|
|
|
1107
1113
|
this.sanitizer = sanitizer;
|
|
1108
1114
|
}
|
|
1109
1115
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: VkVideoPlayerComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1110
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: VkVideoPlayerComponent, isStandalone: true, selector: "vk-video-player", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"video-player\">\n <iframe\n [src]=\"safeUrl\"\n
|
|
1116
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: VkVideoPlayerComponent, isStandalone: true, selector: "vk-video-player", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"code-view video-player use-responsive\">\n <iframe\n [src]=\"safeUrl\"\n allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n frameborder=\"0\"\n allowfullscreen></iframe>\n</div>\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }); }
|
|
1111
1117
|
}
|
|
1112
1118
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: VkVideoPlayerComponent, decorators: [{
|
|
1113
1119
|
type: Component,
|
|
1114
|
-
args: [{ selector: 'vk-video-player', standalone: true, imports: [], template: "<div class=\"video-player\">\n <iframe\n [src]=\"safeUrl\"\n
|
|
1120
|
+
args: [{ selector: 'vk-video-player', standalone: true, imports: [], template: "<div class=\"code-view video-player use-responsive\">\n <iframe\n [src]=\"safeUrl\"\n allow=\"autoplay; encrypted-media; fullscreen; picture-in-picture;\"\n frameborder=\"0\"\n allowfullscreen></iframe>\n</div>\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
|
|
1115
1121
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { link: [{
|
|
1116
1122
|
type: Input
|
|
1117
1123
|
}] } });
|
|
1118
1124
|
|
|
1119
1125
|
class CodeVideoComponent {
|
|
1126
|
+
set _useResponsiveWrapper(useResponsiveWrapper) {
|
|
1127
|
+
this.useResponsiveWrapper = useResponsiveWrapper;
|
|
1128
|
+
}
|
|
1120
1129
|
constructor(_sanitizer) {
|
|
1121
1130
|
this._sanitizer = _sanitizer;
|
|
1122
1131
|
this.code = "";
|
|
1132
|
+
this.useResponsiveWrapper = false;
|
|
1123
1133
|
}
|
|
1124
1134
|
ngOnChanges(changes) {
|
|
1125
1135
|
if (changes['code'] && changes['code'].currentValue !== changes['code'].previousValue) {
|
|
@@ -1127,13 +1137,15 @@ class CodeVideoComponent {
|
|
|
1127
1137
|
}
|
|
1128
1138
|
}
|
|
1129
1139
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CodeVideoComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1130
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: CodeVideoComponent, isStandalone: true, selector: "code-video", inputs: { code: "code" }, usesOnChanges: true, ngImport: i0, template: "@if (code) {\n <div class=\"video-player\" [innerHTML]=\"safeHtml\"></div>\n}\n", styles: [".video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.
|
|
1140
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: CodeVideoComponent, isStandalone: true, selector: "code-video", inputs: { code: "code", _useResponsiveWrapper: "_useResponsiveWrapper" }, usesOnChanges: true, ngImport: i0, template: "@if (code) {\n <div class=\"code-view video-player\" [class.use-responsive]=\"useResponsiveWrapper\" [innerHTML]=\"safeHtml\"></div>\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }); }
|
|
1131
1141
|
}
|
|
1132
1142
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CodeVideoComponent, decorators: [{
|
|
1133
1143
|
type: Component,
|
|
1134
|
-
args: [{ selector: 'code-video', standalone: true, imports: [], template: "@if (code) {\n <div class=\"video-player\" [innerHTML]=\"safeHtml\"></div>\n}\n", styles: [".video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.
|
|
1144
|
+
args: [{ selector: 'code-video', standalone: true, imports: [], template: "@if (code) {\n <div class=\"code-view video-player\" [class.use-responsive]=\"useResponsiveWrapper\" [innerHTML]=\"safeHtml\"></div>\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
|
|
1135
1145
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { code: [{
|
|
1136
1146
|
type: Input
|
|
1147
|
+
}], _useResponsiveWrapper: [{
|
|
1148
|
+
type: Input
|
|
1137
1149
|
}] } });
|
|
1138
1150
|
|
|
1139
1151
|
class XmlTagExternalVideoComponent {
|
|
@@ -1142,7 +1154,8 @@ class XmlTagExternalVideoComponent {
|
|
|
1142
1154
|
this._block = {
|
|
1143
1155
|
type: '',
|
|
1144
1156
|
link: '',
|
|
1145
|
-
innerHtml: ''
|
|
1157
|
+
innerHtml: '',
|
|
1158
|
+
useResponsiveWrapper: false
|
|
1146
1159
|
};
|
|
1147
1160
|
}
|
|
1148
1161
|
set data(value) {
|
|
@@ -1153,16 +1166,17 @@ class XmlTagExternalVideoComponent {
|
|
|
1153
1166
|
this._block = {
|
|
1154
1167
|
type: value.type,
|
|
1155
1168
|
link: value.link,
|
|
1169
|
+
useResponsiveWrapper: value.useResponsiveWrapper,
|
|
1156
1170
|
innerHtml: value.innerHtml
|
|
1157
1171
|
};
|
|
1158
1172
|
}
|
|
1159
1173
|
;
|
|
1160
1174
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagExternalVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1161
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: XmlTagExternalVideoComponent, isStandalone: true, selector: "croco-html-xml-tag-external-video", inputs: { data: "data", tagData: "tagData" }, ngImport: i0, template: "@switch (_block.type) {\n @case (ExternalVideoSupportedTypes.VkVideo) {\n <vk-video-player [link]=\"_block.link\"></vk-video-player>\n }\n @case (ExternalVideoSupportedTypes.Youtube) {\n <youtube-video-player [link]=\"_block.link\"></youtube-video-player>\n }\n @case (ExternalVideoSupportedTypes.Code) {\n <code-video [code]=\"_block.innerHtml\"></code-video>\n }\n}\n", styles: ["@media only screen and (min-width: 769px){.y-video{display:block;width:640px;height:360px;margin:0 auto}}@media only screen and (max-width: 827px){.y-video{display:block;width:100%;height:315px}}\n"], dependencies: [{ kind: "component", type: VkVideoPlayerComponent, selector: "vk-video-player", inputs: ["link"] }, { kind: "component", type: YoutubeVideoPlayerComponent, selector: "youtube-video-player", inputs: ["link"] }, { kind: "component", type: CodeVideoComponent, selector: "code-video", inputs: ["code"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1175
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: XmlTagExternalVideoComponent, isStandalone: true, selector: "croco-html-xml-tag-external-video", inputs: { data: "data", tagData: "tagData" }, ngImport: i0, template: "@switch (_block.type) {\n @case (ExternalVideoSupportedTypes.VkVideo) {\n <vk-video-player [link]=\"_block.link\"></vk-video-player>\n }\n @case (ExternalVideoSupportedTypes.Youtube) {\n <youtube-video-player [link]=\"_block.link\"></youtube-video-player>\n }\n @case (ExternalVideoSupportedTypes.Code) {\n <code-video [code]=\"_block.innerHtml\" [_useResponsiveWrapper]=\"_block.useResponsiveWrapper\"></code-video>\n }\n}\n", styles: ["@media only screen and (min-width: 769px){.y-video{display:block;width:640px;height:360px;margin:0 auto}}@media only screen and (max-width: 827px){.y-video{display:block;width:100%;height:315px}}\n"], dependencies: [{ kind: "component", type: VkVideoPlayerComponent, selector: "vk-video-player", inputs: ["link"] }, { kind: "component", type: YoutubeVideoPlayerComponent, selector: "youtube-video-player", inputs: ["link"] }, { kind: "component", type: CodeVideoComponent, selector: "code-video", inputs: ["code", "_useResponsiveWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1162
1176
|
}
|
|
1163
1177
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: XmlTagExternalVideoComponent, decorators: [{
|
|
1164
1178
|
type: Component,
|
|
1165
|
-
args: [{ selector: 'croco-html-xml-tag-external-video', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [VkVideoPlayerComponent, YoutubeVideoPlayerComponent, CodeVideoComponent], template: "@switch (_block.type) {\n @case (ExternalVideoSupportedTypes.VkVideo) {\n <vk-video-player [link]=\"_block.link\"></vk-video-player>\n }\n @case (ExternalVideoSupportedTypes.Youtube) {\n <youtube-video-player [link]=\"_block.link\"></youtube-video-player>\n }\n @case (ExternalVideoSupportedTypes.Code) {\n <code-video [code]=\"_block.innerHtml\"></code-video>\n }\n}\n", styles: ["@media only screen and (min-width: 769px){.y-video{display:block;width:640px;height:360px;margin:0 auto}}@media only screen and (max-width: 827px){.y-video{display:block;width:100%;height:315px}}\n"] }]
|
|
1179
|
+
args: [{ selector: 'croco-html-xml-tag-external-video', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [VkVideoPlayerComponent, YoutubeVideoPlayerComponent, CodeVideoComponent], template: "@switch (_block.type) {\n @case (ExternalVideoSupportedTypes.VkVideo) {\n <vk-video-player [link]=\"_block.link\"></vk-video-player>\n }\n @case (ExternalVideoSupportedTypes.Youtube) {\n <youtube-video-player [link]=\"_block.link\"></youtube-video-player>\n }\n @case (ExternalVideoSupportedTypes.Code) {\n <code-video [code]=\"_block.innerHtml\" [_useResponsiveWrapper]=\"_block.useResponsiveWrapper\"></code-video>\n }\n}\n", styles: ["@media only screen and (min-width: 769px){.y-video{display:block;width:640px;height:360px;margin:0 auto}}@media only screen and (max-width: 827px){.y-video{display:block;width:100%;height:315px}}\n"] }]
|
|
1166
1180
|
}], propDecorators: { data: [{
|
|
1167
1181
|
type: Input
|
|
1168
1182
|
}], tagData: [{
|
|
@@ -1448,11 +1462,11 @@ class HtmlRawViewComponent {
|
|
|
1448
1462
|
}
|
|
1449
1463
|
}
|
|
1450
1464
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlRawViewComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1451
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1465
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: HtmlRawViewComponent, isStandalone: true, selector: "croco-html-raw-view", inputs: { rawHtml: "rawHtml" }, usesOnChanges: true, ngImport: i0, template: "@if (rawHtml) {\n <div [innerHTML]=\"safeHtml\"></div>\n}\n" }); }
|
|
1452
1466
|
}
|
|
1453
1467
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlRawViewComponent, decorators: [{
|
|
1454
1468
|
type: Component,
|
|
1455
|
-
args: [{ selector: 'croco-html-raw-view', standalone: true, template: "<div [innerHTML]=\"safeHtml\"></div>\n" }]
|
|
1469
|
+
args: [{ selector: 'croco-html-raw-view', standalone: true, template: "@if (rawHtml) {\n <div [innerHTML]=\"safeHtml\"></div>\n}\n" }]
|
|
1456
1470
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { rawHtml: [{
|
|
1457
1471
|
type: Input
|
|
1458
1472
|
}] } });
|
|
@@ -1535,7 +1549,7 @@ class ButtonEditorComponent {
|
|
|
1535
1549
|
this.tag.attributes = this.tagData;
|
|
1536
1550
|
}
|
|
1537
1551
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ButtonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1538
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ButtonEditorComponent, isStandalone: true, selector: "croco-html-button-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "@if (tag.presentOrEdit) {\n <div>\n <div>\n \u0422\u0438\u043F: {{tagData.type}}\n </div>\n <div style=\"height: 10px;\"></div>\n <div>\n \u0422\u0435\u043A\u0441\u0442: {{tagData.text}}\n </div>\n <div style=\"height: 10px;\"></div>\n <div>\n \u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F: {{tagData.click}}\n </div>\n <div style=\"height: 10px;\"></div>\n <croco-html-xml-tag-button [tagData]=\"tagData\"></croco-html-xml-tag-button>\n </div>\n} @else {\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\n \u0422\u0438\u043F\n </mat-label>\n <input matInput placeholder=\"\u0422\u0438\u043F\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.type\"\n (ngModelChange)=\"linkChanged()\">\n </mat-form-field>\n\n <mat-form-field class=\"w-100\">\n <mat-label>\n \u0422\u0435\u043A\u0441\u0442\n </mat-label>\n <input matInput placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.text\"\n (ngModelChange)=\"linkChanged()\">\n </mat-form-field>\n\n <mat-form-field class=\"w-100\">\n <mat-label>\n \u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F\n </mat-label>\n <input matInput placeholder=\"\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.click\"\n (ngModelChange)=\"linkChanged()\">\n </mat-form-field>\n </div>\n}\n",
|
|
1552
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ButtonEditorComponent, isStandalone: true, selector: "croco-html-button-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "@if (tag.presentOrEdit) {\n <div>\n <div>\n \u0422\u0438\u043F: {{tagData.type}}\n </div>\n <div style=\"height: 10px;\"></div>\n <div>\n \u0422\u0435\u043A\u0441\u0442: {{tagData.text}}\n </div>\n <div style=\"height: 10px;\"></div>\n <div>\n \u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F: {{tagData.click}}\n </div>\n <div style=\"height: 10px;\"></div>\n <croco-html-xml-tag-button [tagData]=\"tagData\"></croco-html-xml-tag-button>\n </div>\n} @else {\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\n \u0422\u0438\u043F\n </mat-label>\n <input matInput placeholder=\"\u0422\u0438\u043F\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.type\"\n (ngModelChange)=\"linkChanged()\">\n </mat-form-field>\n\n <mat-form-field class=\"w-100\">\n <mat-label>\n \u0422\u0435\u043A\u0441\u0442\n </mat-label>\n <input matInput placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.text\"\n (ngModelChange)=\"linkChanged()\">\n </mat-form-field>\n\n <mat-form-field class=\"w-100\">\n <mat-label>\n \u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F\n </mat-label>\n <input matInput placeholder=\"\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A \u043D\u0430\u0436\u0430\u0442\u0438\u044F\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.click\"\n (ngModelChange)=\"linkChanged()\">\n </mat-form-field>\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: XmlTagButtonComponent, selector: "croco-html-xml-tag-button", inputs: ["data", "tagData"] }] }); }
|
|
1539
1553
|
}
|
|
1540
1554
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ButtonEditorComponent, decorators: [{
|
|
1541
1555
|
type: Component,
|
|
@@ -1634,14 +1648,19 @@ class ExternalVideoEditorComponent {
|
|
|
1634
1648
|
this.tagData = {
|
|
1635
1649
|
link: '',
|
|
1636
1650
|
innerHtml: '',
|
|
1637
|
-
type: ExternalVideoSupportedTypes.Youtube
|
|
1651
|
+
type: ExternalVideoSupportedTypes.Youtube,
|
|
1652
|
+
useResponsiveWrapper: false,
|
|
1638
1653
|
};
|
|
1639
1654
|
this.linkText = '';
|
|
1640
1655
|
}
|
|
1641
1656
|
ngOnInit() {
|
|
1642
|
-
|
|
1643
|
-
this.tagData
|
|
1644
|
-
|
|
1657
|
+
const { link, type, useResponsiveWrapper } = this.tag.attributes;
|
|
1658
|
+
this.tagData = {
|
|
1659
|
+
link,
|
|
1660
|
+
type,
|
|
1661
|
+
useResponsiveWrapper,
|
|
1662
|
+
innerHtml: this.tag.innerHtml
|
|
1663
|
+
};
|
|
1645
1664
|
switch (this.tagData.type) {
|
|
1646
1665
|
case ExternalVideoSupportedTypes.Youtube: {
|
|
1647
1666
|
this.linkText = 'Ссылка на YouTube';
|
|
@@ -1665,6 +1684,10 @@ class ExternalVideoEditorComponent {
|
|
|
1665
1684
|
this.tag.attributes = tagData;
|
|
1666
1685
|
this.tag.innerHtml = innerHtml;
|
|
1667
1686
|
}
|
|
1687
|
+
onCheck(checked) {
|
|
1688
|
+
this.tagData.useResponsiveWrapper = checked;
|
|
1689
|
+
this.linkChanged();
|
|
1690
|
+
}
|
|
1668
1691
|
createLinkByIFrame() {
|
|
1669
1692
|
const parser = new DOMParser();
|
|
1670
1693
|
const document = parser.parseFromString(this.tagData.link, "text/html");
|
|
@@ -1673,7 +1696,7 @@ class ExternalVideoEditorComponent {
|
|
|
1673
1696
|
this.tagData.link = src;
|
|
1674
1697
|
}
|
|
1675
1698
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ExternalVideoEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1676
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ExternalVideoEditorComponent, isStandalone: true, selector: "croco-html-external-video-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "@if (tag.presentOrEdit) {\n <div>\n <div>\n @switch (tagData.type) {\n @case (ExternalVideoSupportedTypes.VkVideo) {\n {{linkText}}: {{tagData.link}}\n }\n @case (ExternalVideoSupportedTypes.Youtube) {\n {{linkText}}: {{tagData.link}}\n }\n @case (ExternalVideoSupportedTypes.Code) {\n <div>\n \u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u043A\u043E\u0434 \u043F\u043B\u0435\u0435\u0440\u0430.\n </div>\n }\n }\n </div>\n <div style=\"height: 10px;\"></div>\n <croco-html-xml-tag-external-video [tagData]=\"tagData\"></croco-html-xml-tag-external-video>\n </div>\n}\n\n@if (!tag.presentOrEdit) {\n @if(tagData.type !== ExternalVideoSupportedTypes.Code) {\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\n {{linkText}}\n </mat-label>\n <input matInput placeholder=\"{{linkText}}\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.link\"\n (ngModelChange)=\"linkChanged()\">\n </mat-form-field>\n </div>\n } @else {\n <div>\n <mat-label>\n {{linkText}}\n </mat-label>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n <textarea\n #autosize=\"cdkTextareaAutosize\"\n matInput\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"1\"\n cdkAutosizeMaxRows=\"5\"\n placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n #textArea\n [(ngModel)]=\"tagData.innerHtml\"\n (ngModelChange)=\"linkChanged()\"\n ></textarea>\n </mat-form-field>\n </div>\n }\n}\n", styles: [".video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.
|
|
1699
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: ExternalVideoEditorComponent, isStandalone: true, selector: "croco-html-external-video-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "@if (tag.presentOrEdit) {\n <div>\n <div>\n @switch (tagData.type) {\n @case (ExternalVideoSupportedTypes.VkVideo) {\n {{linkText}}: {{tagData.link}}\n }\n @case (ExternalVideoSupportedTypes.Youtube) {\n {{linkText}}: {{tagData.link}}\n }\n @case (ExternalVideoSupportedTypes.Code) {\n <div>\n \u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u043A\u043E\u0434 \u043F\u043B\u0435\u0435\u0440\u0430.\n </div>\n }\n }\n </div>\n <div style=\"height: 10px;\"></div>\n <croco-html-xml-tag-external-video [tagData]=\"tagData\"></croco-html-xml-tag-external-video>\n </div>\n}\n\n@if (!tag.presentOrEdit) {\n @if(tagData.type !== ExternalVideoSupportedTypes.Code) {\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\n {{linkText}}\n </mat-label>\n <input matInput placeholder=\"{{linkText}}\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.link\"\n (ngModelChange)=\"linkChanged()\">\n </mat-form-field>\n </div>\n } @else {\n <div>\n <mat-label>\n {{linkText}}\n </mat-label>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n <textarea\n #autosize=\"cdkTextareaAutosize\"\n matInput\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"1\"\n cdkAutosizeMaxRows=\"5\"\n placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n #textArea\n [(ngModel)]=\"tagData.innerHtml\"\n (ngModelChange)=\"linkChanged()\"\n ></textarea>\n </mat-form-field>\n\n <mat-checkbox\n [checked]=\"tagData.useResponsiveWrapper\"\n (change)=\"onCheck($event.checked)\"\n >\n \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0430\u0434\u0430\u043F\u0442\u0438\u0432?\n </mat-checkbox>\n </div>\n }\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
|
|
1677
1700
|
}
|
|
1678
1701
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ExternalVideoEditorComponent, decorators: [{
|
|
1679
1702
|
type: Component,
|
|
@@ -1682,7 +1705,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1682
1705
|
MatInputModule,
|
|
1683
1706
|
FormsModule,
|
|
1684
1707
|
XmlTagExternalVideoComponent,
|
|
1685
|
-
|
|
1708
|
+
MatCheckbox,
|
|
1709
|
+
], template: "@if (tag.presentOrEdit) {\n <div>\n <div>\n @switch (tagData.type) {\n @case (ExternalVideoSupportedTypes.VkVideo) {\n {{linkText}}: {{tagData.link}}\n }\n @case (ExternalVideoSupportedTypes.Youtube) {\n {{linkText}}: {{tagData.link}}\n }\n @case (ExternalVideoSupportedTypes.Code) {\n <div>\n \u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u043A\u043E\u0434 \u043F\u043B\u0435\u0435\u0440\u0430.\n </div>\n }\n }\n </div>\n <div style=\"height: 10px;\"></div>\n <croco-html-xml-tag-external-video [tagData]=\"tagData\"></croco-html-xml-tag-external-video>\n </div>\n}\n\n@if (!tag.presentOrEdit) {\n @if(tagData.type !== ExternalVideoSupportedTypes.Code) {\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\n {{linkText}}\n </mat-label>\n <input matInput placeholder=\"{{linkText}}\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.link\"\n (ngModelChange)=\"linkChanged()\">\n </mat-form-field>\n </div>\n } @else {\n <div>\n <mat-label>\n {{linkText}}\n </mat-label>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n <textarea\n #autosize=\"cdkTextareaAutosize\"\n matInput\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"1\"\n cdkAutosizeMaxRows=\"5\"\n placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n #textArea\n [(ngModel)]=\"tagData.innerHtml\"\n (ngModelChange)=\"linkChanged()\"\n ></textarea>\n </mat-form-field>\n\n <mat-checkbox\n [checked]=\"tagData.useResponsiveWrapper\"\n (change)=\"onCheck($event.checked)\"\n >\n \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0430\u0434\u0430\u043F\u0442\u0438\u0432?\n </mat-checkbox>\n </div>\n }\n}\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
|
|
1686
1710
|
}], propDecorators: { tag: [{
|
|
1687
1711
|
type: Input
|
|
1688
1712
|
}], onTagUpdated: [{
|
|
@@ -1690,18 +1714,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1690
1714
|
}] } });
|
|
1691
1715
|
|
|
1692
1716
|
class HtmlRawEditorComponent {
|
|
1693
|
-
constructor() {
|
|
1717
|
+
constructor(_sanitizer) {
|
|
1718
|
+
this._sanitizer = _sanitizer;
|
|
1694
1719
|
this.onTagUpdated = new EventEmitter();
|
|
1695
1720
|
}
|
|
1696
|
-
|
|
1721
|
+
ngOnChanges(changes) {
|
|
1722
|
+
if (changes['tag'] && changes['tag'].currentValue !== changes['tag'].previousValue) {
|
|
1723
|
+
this.safeHtml = this._sanitizer.bypassSecurityTrustHtml(this.tag.innerHtml);
|
|
1724
|
+
}
|
|
1725
|
+
}
|
|
1726
|
+
onSafeHtmlChange() {
|
|
1727
|
+
this.safeHtml = this._sanitizer.bypassSecurityTrustHtml(this.tag.innerHtml);
|
|
1697
1728
|
}
|
|
1698
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlRawEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1699
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: HtmlRawEditorComponent, isStandalone: true, selector: "croco-html-html-raw-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "@if (tag.presentOrEdit) {\n
|
|
1729
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlRawEditorComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1730
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: HtmlRawEditorComponent, isStandalone: true, selector: "croco-html-html-raw-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, usesOnChanges: true, ngImport: i0, template: "@if (tag.presentOrEdit) {\n <div [innerHTML]=\"safeHtml\">\n </div>\n}\n@if (!tag.presentOrEdit) {\n <div>\n <div style=\"height: 10px;\">\n </div>\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\n \u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\n </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\u0433\u0430\"\n [(ngModel)]=\"tag.innerHtml\"\n (ngModelChange)=\"onSafeHtmlChange()\"\n ></textarea>\n </mat-form-field>\n </div>\n </div>\n}\n\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"], dependencies: [{ 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"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
1700
1731
|
}
|
|
1701
1732
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: HtmlRawEditorComponent, decorators: [{
|
|
1702
1733
|
type: Component,
|
|
1703
|
-
args: [{ selector: 'croco-html-html-raw-editor', standalone: true, imports: [MatFormField, MatLabel, MatInput, CdkTextareaAutosize, FormsModule], template: "@if (tag.presentOrEdit) {\n
|
|
1704
|
-
}], ctorParameters: () => [], propDecorators: { tag: [{
|
|
1734
|
+
args: [{ selector: 'croco-html-html-raw-editor', standalone: true, imports: [MatFormField, MatLabel, MatInput, CdkTextareaAutosize, FormsModule], template: "@if (tag.presentOrEdit) {\n <div [innerHTML]=\"safeHtml\">\n </div>\n}\n@if (!tag.presentOrEdit) {\n <div>\n <div style=\"height: 10px;\">\n </div>\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\n \u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u0433\u0430\n </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\u0433\u0430\"\n [(ngModel)]=\"tag.innerHtml\"\n (ngModelChange)=\"onSafeHtmlChange()\"\n ></textarea>\n </mat-form-field>\n </div>\n </div>\n}\n\n", styles: [".code-view.video-player{margin:0 auto;max-width:640px;width:100%;height:360px}.code-view.use-responsive ::ng-deep iframe{width:100%;height:100%}@media screen and (max-width: 760px){.code-view.use-responsive{height:300px}}@media screen and (max-width: 540px){.code-view.use-responsive{height:250px}}@media screen and (max-width: 450px){.code-view.use-responsive{height:200px}}@media screen and (max-width: 380px){.code-view.use-responsive{height:180px}}\n"] }]
|
|
1735
|
+
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { tag: [{
|
|
1705
1736
|
type: Input
|
|
1706
1737
|
}], onTagUpdated: [{
|
|
1707
1738
|
type: Output
|
|
@@ -1878,12 +1909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1878
1909
|
MatFormField,
|
|
1879
1910
|
MatLabel,
|
|
1880
1911
|
MatInput,
|
|
1881
|
-
CdkDragHandle,
|
|
1882
|
-
MatCard,
|
|
1883
|
-
MatCardContent,
|
|
1884
|
-
XmlTagExternalVideoComponent,
|
|
1885
1912
|
NgStyle,
|
|
1886
|
-
MatButton,
|
|
1887
1913
|
MatIconButton,
|
|
1888
1914
|
MatSlideToggle
|
|
1889
1915
|
], template: "<div>\n <div style=\"height: 10px;\">\n </div>\n\n @if (hasImageError) {\n <div class=\"error-block\">\n \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E \u043F\u043E \u0443\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u043C\u0443 \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E \u0444\u0430\u0439\u043B \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043B\u0438 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043D\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\n </div>\n }\n\n @if (hasFileId() && !hasImageError) {\n <div>\n <img\n [ngStyle]=\"{ 'max-height': imageMaxHeight ? imageMaxHeight + 'px' : '100%', 'max-width': imageMaxWidth ? imageMaxWidth + 'px' : '100%', }\"\n class=\"mx-auto d-block img-fluid\" [src]=\"getSrc()\" (error)=\"onErrorHandler()\" alt=\"photo\"/>\n </div>\n }\n\n @if (!hasFileId()) {\n <div>\n <h5>[\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E]</h5>\n </div>\n }\n\n @if(!tag.presentOrEdit) {\n <mat-slide-toggle style=\"padding: 10px 0\" [(ngModel)]=\"isShowMediaRequest\">\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u043C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B</mat-slide-toggle>\n }\n\n @if(isShowMediaRequest) {\n <div style=\"display: flex; flex-direction: column; gap: 20px\">\n <div class=\"media-request__header\">\n <span>\u041C\u0435\u0434\u0438\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u044B:</span>\n @if (!tag.presentOrEdit) {\n <button (click)=\"addNewMediaRequest()\" class=\"w-30\" mat-icon-button color=\"primary\">\n <mat-icon>add</mat-icon>\n </button>\n }\n </div>\n @for (request of requests; track $index) {\n <div class=\"media-request__container\">\n @if (tag.presentOrEdit) {\n <div style=\"display: flex; flex-direction: column; gap: 5px\">\n <span class=\"w-100\">\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.minScreenWidth}}</span>\n <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{request.maxScreenWidth}}</span>\n <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageHeight}}</span>\n <span class=\"w-100\">\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F: {{request.maxImageWidth}}</span>\n </div>\n }\n\n @if (!tag.presentOrEdit) {\n <div style=\"width: 100%\">\n <mat-form-field class=\"w-100\">\n <mat-label>\n \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n </mat-label>\n <input matInput placeholder=\"\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n autocomplete=\"off\"\n [(ngModel)]=\"request.minScreenWidth\"\n (ngModelChange)=\"requestChanged()\">\n </mat-form-field>\n\n <mat-form-field class=\"w-100\">\n <mat-label>\n \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430\n </mat-label>\n <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0433\u0440\u0430\u043D\u0438\u0446\u0430 \u0448\u0438\u0440\u0438\u043D\u044B\"\n autocomplete=\"off\"\n [(ngModel)]=\"request.maxScreenWidth\"\n (ngModelChange)=\"requestChanged()\">\n </mat-form-field>\n\n <mat-form-field class=\"w-100\">\n <mat-label>\n \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n </mat-label>\n <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n autocomplete=\"off\"\n [(ngModel)]=\"request.maxImageHeight\"\n (ngModelChange)=\"requestChanged()\">\n </mat-form-field>\n\n <mat-form-field class=\"w-100\">\n <mat-label>\n \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\n </mat-label>\n <input matInput placeholder=\"\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n autocomplete=\"off\"\n [(ngModel)]=\"request.maxImageWidth\"\n (ngModelChange)=\"requestChanged()\">\n </mat-form-field>\n </div>\n\n <button (click)=\"deleteMediaRequest($index)\" class=\"w-30\" mat-icon-button color=\"warn\">\n <mat-icon>delete</mat-icon>\n </button>\n }\n </div>\n }\n </div>\n }\n</div>\n\n@if (!tag.presentOrEdit) {\n <div>\n <div style=\"height: 10px;\"></div>\n <div style=\"overflow-x:auto;\">\n <mat-button-toggle-group [(ngModel)]=\"searchOrEdit\">\n <mat-button-toggle value=\"search\">\n \u0418\u0441\u043A\u0430\u0442\u044C \u0444\u0430\u0439\u043B <mat-icon>search</mat-icon>\n </mat-button-toggle>\n <mat-button-toggle value=\"edit\">\n \u0423\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E \u0438\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440\u0443 <mat-icon>settings</mat-icon>\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n <div style=\"height: 10px;\"></div>\n <div [hidden]=\"searchOrEdit !== 'search'\">\n <croco-html-file-id-select\n [labelText]=\"'\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B'\"\n [(fileId)]=\"fileId\"\n (onFileIdChanged)=\"onFileIdChanged($event)\">\n </croco-html-file-id-select>\n </div>\n <div [hidden]=\"searchOrEdit !== 'edit'\">\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\n \u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\n </mat-label>\n <input matInput placeholder=\"\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0444\u0430\u0439\u043B\u0430\" new-autocomplete=\"off\" autocomplete=\"off\"\n type=\"number\"\n [(ngModel)]=\"fileId\"\n (ngModelChange)=\"removeImageError()\">\n </mat-form-field>\n </div>\n </div>\n </div>\n}\n", styles: [".error-block{background-color:#f32323;color:#fff;text-align:center;border-radius:10px;padding:10px}.media-request__header{align-items:center;display:flex;width:100%;justify-content:space-between}.media-request__container{display:flex;align-items:center;border-bottom:1px solid rgba(128,128,128,.7);padding-bottom:10px}@media screen and (max-width: 700px){mat-button-toggle-group{display:flex;flex-direction:column}}\n"] }]
|
|
@@ -1964,7 +1990,7 @@ class TextEditorComponent {
|
|
|
1964
1990
|
return `<${this.tag.tagDescription.tag}>${this.tag.innerHtml}<${this.tag.tagDescription.tag}/>`;
|
|
1965
1991
|
}
|
|
1966
1992
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1967
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: TextEditorComponent, isStandalone: true, selector: "croco-html-text-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "@if (tag.presentOrEdit) {\n <div>\n <div style=\"height: 10px;\">\n </div>\n @if (tag.attributes['h-align'] === 'left') {\n <div style=\"text-align: left;\" [innerHtml]=\"getInnerHtml()\">\n </div>\n }\n @if (tag.attributes['h-align'] === 'right') {\n <div style=\"text-align: right;\" [innerHtml]=\"getInnerHtml()\">\n </div>\n }\n @if (tag.attributes['h-align'] === 'center') {\n <div style=\"text-align: center;\" [innerHtml]=\"getInnerHtml()\">\n </div>\n }\n </div>\n}\n\n@if (!tag.presentOrEdit) {\n <div>\n <div style=\"overflow-x: auto;\">\n <mat-button-toggle-group [(ngModel)]=\"tag.attributes['h-align']\">\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\"></textarea>\n </mat-form-field>\n </div>\n </div>\n}\n",
|
|
1993
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: TextEditorComponent, isStandalone: true, selector: "croco-html-text-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "@if (tag.presentOrEdit) {\n <div>\n <div style=\"height: 10px;\">\n </div>\n @if (tag.attributes['h-align'] === 'left') {\n <div style=\"text-align: left;\" [innerHtml]=\"getInnerHtml()\">\n </div>\n }\n @if (tag.attributes['h-align'] === 'right') {\n <div style=\"text-align: right;\" [innerHtml]=\"getInnerHtml()\">\n </div>\n }\n @if (tag.attributes['h-align'] === 'center') {\n <div style=\"text-align: center;\" [innerHtml]=\"getInnerHtml()\">\n </div>\n }\n </div>\n}\n\n@if (!tag.presentOrEdit) {\n <div>\n <div style=\"overflow-x: auto;\">\n <mat-button-toggle-group [(ngModel)]=\"tag.attributes['h-align']\">\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\"></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", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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"], 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"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] }); }
|
|
1968
1994
|
}
|
|
1969
1995
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TextEditorComponent, decorators: [{
|
|
1970
1996
|
type: Component,
|
|
@@ -1991,7 +2017,7 @@ class CustomWidgetEditorComponent {
|
|
|
1991
2017
|
this.tag.attributes = CustomWidgetMethods.ExtractCustomWidgetAttributes(this.tagData);
|
|
1992
2018
|
}
|
|
1993
2019
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CustomWidgetEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1994
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: CustomWidgetEditorComponent, isStandalone: true, selector: "croco-html-custom-widget-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "@if (tag.presentOrEdit) {\n <div>\n <div>\n <b>type:</b> {{tagData.type}}\n </div>\n <div style=\"height: 10px;\"></div>\n <div>\n <b>data-id:</b> {{tagData.dataId}}\n </div>\n <div style=\"height: 10px;\"></div>\n <div>\n <b>widget-id:</b> {{tagData.widgetId}}\n </div>\n <div style=\"height: 10px;\"></div>\n <croco-html-xml-tag-custom-widget [tagData]=\"tagData\"></croco-html-xml-tag-custom-widget>\n </div>\n} @else {\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\n type\n </mat-label>\n <input matInput\n placeholder=\"type\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.type\"\n (ngModelChange)=\"dataChanged()\">\n </mat-form-field>\n\n <mat-form-field class=\"w-100\">\n <mat-label>\n data-id\n </mat-label>\n <input matInput\n placeholder=\"data-id\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.dataId\"\n (ngModelChange)=\"dataChanged()\">\n </mat-form-field>\n\n <mat-form-field class=\"w-100\">\n <mat-label>\n widget-id\n </mat-label>\n <input matInput\n placeholder=\"widget-id\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.widgetId\"\n (ngModelChange)=\"dataChanged()\">\n </mat-form-field>\n </div>\n}\n",
|
|
2020
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: CustomWidgetEditorComponent, isStandalone: true, selector: "croco-html-custom-widget-editor", inputs: { tag: "tag" }, outputs: { onTagUpdated: "onTagUpdated" }, ngImport: i0, template: "@if (tag.presentOrEdit) {\n <div>\n <div>\n <b>type:</b> {{tagData.type}}\n </div>\n <div style=\"height: 10px;\"></div>\n <div>\n <b>data-id:</b> {{tagData.dataId}}\n </div>\n <div style=\"height: 10px;\"></div>\n <div>\n <b>widget-id:</b> {{tagData.widgetId}}\n </div>\n <div style=\"height: 10px;\"></div>\n <croco-html-xml-tag-custom-widget [tagData]=\"tagData\"></croco-html-xml-tag-custom-widget>\n </div>\n} @else {\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\n type\n </mat-label>\n <input matInput\n placeholder=\"type\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.type\"\n (ngModelChange)=\"dataChanged()\">\n </mat-form-field>\n\n <mat-form-field class=\"w-100\">\n <mat-label>\n data-id\n </mat-label>\n <input matInput\n placeholder=\"data-id\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.dataId\"\n (ngModelChange)=\"dataChanged()\">\n </mat-form-field>\n\n <mat-form-field class=\"w-100\">\n <mat-label>\n widget-id\n </mat-label>\n <input matInput\n placeholder=\"widget-id\"\n autocomplete=\"off\"\n [(ngModel)]=\"tagData.widgetId\"\n (ngModelChange)=\"dataChanged()\">\n </mat-form-field>\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: XmlTagCustomWidgetComponent, selector: "croco-html-xml-tag-custom-widget", inputs: ["tagData"] }] }); }
|
|
1995
2021
|
}
|
|
1996
2022
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CustomWidgetEditorComponent, decorators: [{
|
|
1997
2023
|
type: Component,
|
|
@@ -2026,7 +2052,7 @@ class MainEditorBlockComponent {
|
|
|
2026
2052
|
ngOnInit() {
|
|
2027
2053
|
}
|
|
2028
2054
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2029
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: MainEditorBlockComponent, isStandalone: true, selector: "croco-html-main-editor-block", inputs: { tag: "tag" }, outputs: { onTagSaved: "onTagSaved", onTagRemoved: "onTagRemoved" }, ngImport: i0, template: "<div class=\"main-editor-block\">\n <div class=\"editor-container\">\n @if (textTags.includes(tag.tagDescription.tag)) {\n <div>\n <croco-html-text-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-text-editor>\n </div>\n }\n
|
|
2055
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: MainEditorBlockComponent, isStandalone: true, selector: "croco-html-main-editor-block", inputs: { tag: "tag" }, outputs: { onTagSaved: "onTagSaved", onTagRemoved: "onTagRemoved" }, ngImport: i0, template: "<div class=\"main-editor-block\">\n <div class=\"editor-container\">\n @if (textTags.includes(tag.tagDescription.tag)) {\n <div>\n <croco-html-text-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-text-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'file-image') {\n <div>\n <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-image-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'custom-widget') {\n <div>\n <croco-html-custom-widget-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-custom-widget-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'external-video') {\n <div>\n <croco-html-external-video-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-external-video-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'download-file-button') {\n <div>\n <croco-html-download-file-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-download-file-button-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'button') {\n <div>\n <croco-html-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-button-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'html-raw') {\n <div>\n <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-html-raw-editor>\n </div>\n }\n\n </div>\n\n <div class=\"d-flex justify-content-between\">\n <div class=\"d-flex justify-content-end align-self-center\">\n <div style=\"margin-left: 16px;min-width: 96px\">\n @if (tag.presentOrEdit) {\n <button (click)=\"tag.presentOrEdit = false\" mat-icon-button>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M14.4374 0C15.0921 0 15.7197 0.261421 16.1781 0.723424L19.279 3.82432C19.7407 4.286 20.0001 4.91217 20.0001 5.56508C20.0001 6.21799 19.7407 6.84416 19.279 7.30584L7.95751 18.6238C7.25903 19.4295 6.2689 19.9245 5.1346 20.0023H0V19.0023L0.00324754 14.7873C0.0884381 13.7328 0.578667 12.7523 1.3265 12.0934L12.6954 0.72463C13.1564 0.260831 13.7834 0 14.4374 0ZM5.06401 18.0048C5.59823 17.967 6.09551 17.7184 6.49482 17.2616L14.0567 9.69971L10.3024 5.94518L2.69613 13.5496C2.29098 13.9079 2.04034 14.4092 2.00003 14.8678V18.0029L5.06401 18.0048ZM11.7167 4.53114L15.471 8.28549L17.8648 5.89162C17.9514 5.80502 18.0001 5.68756 18.0001 5.56508C18.0001 5.4426 17.9514 5.32514 17.8648 5.23854L14.7612 2.13486C14.6755 2.04855 14.559 2 14.4374 2C14.3158 2 14.1992 2.04855 14.1136 2.13486L11.7167 4.53114Z\" fill=\"#323E8B\"/>\n </svg>\n </button>\n }\n @if (!tag.presentOrEdit) {\n <button (click)=\"save()\" mat-icon-button>\n <svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\"\n aria-labelledby=\"saveIconTitle\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"square\"\n stroke-linejoin=\"miter\" fill=\"none\" color=\"#000000\"><title id=\"saveIconTitle\">Save</title>\n <path\n d=\"M17.2928932,3.29289322 L21,7 L21,20 C21,20.5522847 20.5522847,21 20,21 L4,21 C3.44771525,21 3,20.5522847 3,20 L3,4 C3,3.44771525 3.44771525,3 4,3 L16.5857864,3 C16.8510029,3 17.1053568,3.10535684 17.2928932,3.29289322 Z\"/>\n <rect width=\"10\" height=\"8\" x=\"7\" y=\"13\"/>\n <rect width=\"8\" height=\"5\" x=\"8\" y=\"3\"/>\n </svg>\n </button>\n }\n <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.49988 0.833332H12.4999C13.4204 0.833332 14.1665 1.57952 14.1665 2.5V3.33333H16.6665C17.587 3.33333 18.3332 4.07952 18.3332 4.99999V6.66666C18.3332 7.58714 17.587 8.33333 16.6665 8.33333H16.5998L15.8332 17.5C15.8332 18.4205 15.087 19.1667 14.1665 19.1667H5.8332C4.91272 19.1667 4.16653 18.4205 4.16941 17.5692L3.39975 8.33333H3.33317C2.4127 8.33333 1.6665 7.58714 1.6665 6.66666V4.99999C1.6665 4.07952 2.4127 3.33333 3.33317 3.33333H5.83321V2.5C5.83321 1.57952 6.5794 0.833332 7.49988 0.833332ZM5.83321 5V4.99999H3.33317V6.66666H16.6665V4.99999L14.1665 5H5.83321ZM5.83324 17.5L5.07198 8.33333H14.9276L14.1695 17.4308L14.1666 17.5H5.83324ZM12.4999 2.5V3.33334H7.49992V2.5H12.4999Z\" fill=\"#F96666\"/>\n </svg>\n </button>\n </div>\n </div>\n\n </div>\n</div>\n", styles: [".main-editor-block{display:flex;justify-content:space-between}.editor-container{flex-grow:1}@media screen and (max-width: 700px){.main-editor-block{display:flex;flex-direction:column}}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: DownloadFileButtonEditorComponent, selector: "croco-html-download-file-button-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: ExternalVideoEditorComponent, selector: "croco-html-external-video-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: ButtonEditorComponent, selector: "croco-html-button-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: CustomWidgetEditorComponent, selector: "croco-html-custom-widget-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }] }); }
|
|
2030
2056
|
}
|
|
2031
2057
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorBlockComponent, decorators: [{
|
|
2032
2058
|
type: Component,
|
|
@@ -2040,7 +2066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
2040
2066
|
ExternalVideoEditorComponent,
|
|
2041
2067
|
ButtonEditorComponent,
|
|
2042
2068
|
CustomWidgetEditorComponent
|
|
2043
|
-
], template: "<div class=\"main-editor-block\">\n <div class=\"editor-container\">\n @if (textTags.includes(tag.tagDescription.tag)) {\n <div>\n <croco-html-text-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-text-editor>\n </div>\n }\n
|
|
2069
|
+
], template: "<div class=\"main-editor-block\">\n <div class=\"editor-container\">\n @if (textTags.includes(tag.tagDescription.tag)) {\n <div>\n <croco-html-text-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-text-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'file-image') {\n <div>\n <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-image-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'custom-widget') {\n <div>\n <croco-html-custom-widget-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-custom-widget-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'external-video') {\n <div>\n <croco-html-external-video-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-external-video-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'download-file-button') {\n <div>\n <croco-html-download-file-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-download-file-button-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'button') {\n <div>\n <croco-html-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-button-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'html-raw') {\n <div>\n <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-html-raw-editor>\n </div>\n }\n\n </div>\n\n <div class=\"d-flex justify-content-between\">\n <div class=\"d-flex justify-content-end align-self-center\">\n <div style=\"margin-left: 16px;min-width: 96px\">\n @if (tag.presentOrEdit) {\n <button (click)=\"tag.presentOrEdit = false\" mat-icon-button>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M14.4374 0C15.0921 0 15.7197 0.261421 16.1781 0.723424L19.279 3.82432C19.7407 4.286 20.0001 4.91217 20.0001 5.56508C20.0001 6.21799 19.7407 6.84416 19.279 7.30584L7.95751 18.6238C7.25903 19.4295 6.2689 19.9245 5.1346 20.0023H0V19.0023L0.00324754 14.7873C0.0884381 13.7328 0.578667 12.7523 1.3265 12.0934L12.6954 0.72463C13.1564 0.260831 13.7834 0 14.4374 0ZM5.06401 18.0048C5.59823 17.967 6.09551 17.7184 6.49482 17.2616L14.0567 9.69971L10.3024 5.94518L2.69613 13.5496C2.29098 13.9079 2.04034 14.4092 2.00003 14.8678V18.0029L5.06401 18.0048ZM11.7167 4.53114L15.471 8.28549L17.8648 5.89162C17.9514 5.80502 18.0001 5.68756 18.0001 5.56508C18.0001 5.4426 17.9514 5.32514 17.8648 5.23854L14.7612 2.13486C14.6755 2.04855 14.559 2 14.4374 2C14.3158 2 14.1992 2.04855 14.1136 2.13486L11.7167 4.53114Z\" fill=\"#323E8B\"/>\n </svg>\n </button>\n }\n @if (!tag.presentOrEdit) {\n <button (click)=\"save()\" mat-icon-button>\n <svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\"\n aria-labelledby=\"saveIconTitle\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"square\"\n stroke-linejoin=\"miter\" fill=\"none\" color=\"#000000\"><title id=\"saveIconTitle\">Save</title>\n <path\n d=\"M17.2928932,3.29289322 L21,7 L21,20 C21,20.5522847 20.5522847,21 20,21 L4,21 C3.44771525,21 3,20.5522847 3,20 L3,4 C3,3.44771525 3.44771525,3 4,3 L16.5857864,3 C16.8510029,3 17.1053568,3.10535684 17.2928932,3.29289322 Z\"/>\n <rect width=\"10\" height=\"8\" x=\"7\" y=\"13\"/>\n <rect width=\"8\" height=\"5\" x=\"8\" y=\"3\"/>\n </svg>\n </button>\n }\n <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.49988 0.833332H12.4999C13.4204 0.833332 14.1665 1.57952 14.1665 2.5V3.33333H16.6665C17.587 3.33333 18.3332 4.07952 18.3332 4.99999V6.66666C18.3332 7.58714 17.587 8.33333 16.6665 8.33333H16.5998L15.8332 17.5C15.8332 18.4205 15.087 19.1667 14.1665 19.1667H5.8332C4.91272 19.1667 4.16653 18.4205 4.16941 17.5692L3.39975 8.33333H3.33317C2.4127 8.33333 1.6665 7.58714 1.6665 6.66666V4.99999C1.6665 4.07952 2.4127 3.33333 3.33317 3.33333H5.83321V2.5C5.83321 1.57952 6.5794 0.833332 7.49988 0.833332ZM5.83321 5V4.99999H3.33317V6.66666H16.6665V4.99999L14.1665 5H5.83321ZM5.83324 17.5L5.07198 8.33333H14.9276L14.1695 17.4308L14.1666 17.5H5.83324ZM12.4999 2.5V3.33334H7.49992V2.5H12.4999Z\" fill=\"#F96666\"/>\n </svg>\n </button>\n </div>\n </div>\n\n </div>\n</div>\n", styles: [".main-editor-block{display:flex;justify-content:space-between}.editor-container{flex-grow:1}@media screen and (max-width: 700px){.main-editor-block{display:flex;flex-direction:column}}\n"] }]
|
|
2044
2070
|
}], propDecorators: { tag: [{
|
|
2045
2071
|
type: Input
|
|
2046
2072
|
}], onTagSaved: [{
|
|
@@ -2049,6 +2075,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
2049
2075
|
type: Output
|
|
2050
2076
|
}] } });
|
|
2051
2077
|
|
|
2078
|
+
class SpriteIconPathPipe {
|
|
2079
|
+
transform(id) {
|
|
2080
|
+
return `assets/lib-sprites/symbol/croco-html-svg-sprite.svg#${id}`;
|
|
2081
|
+
}
|
|
2082
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SpriteIconPathPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
2083
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: SpriteIconPathPipe, isStandalone: true, name: "spriteIconPath" }); }
|
|
2084
|
+
}
|
|
2085
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SpriteIconPathPipe, decorators: [{
|
|
2086
|
+
type: Pipe,
|
|
2087
|
+
args: [{
|
|
2088
|
+
name: 'spriteIconPath',
|
|
2089
|
+
standalone: true,
|
|
2090
|
+
}]
|
|
2091
|
+
}] });
|
|
2092
|
+
|
|
2052
2093
|
const defaultLinkYouTube = "https://www.youtube.com/embed/4CtSAnJDfsI?si=scyBNJa0Hs2t5aLE";
|
|
2053
2094
|
const defaultLinkVk = "https://vk.com/video_ext.php?oid=-22822305&id=456241864&hd=2";
|
|
2054
2095
|
const defaultLinkForDownload = "https://storage.yandexcloud.net/mega-academy/presentation.pdf";
|
|
@@ -2080,6 +2121,7 @@ class VisualEditorComponent {
|
|
|
2080
2121
|
this.videoPlayers = ExternalVideoPlayers;
|
|
2081
2122
|
this.ExternalVideoTagDataConsts = ExternalVideoTagDataConsts;
|
|
2082
2123
|
this.HtmlRawTagDataConsts = HtmlRawTagDataConsts;
|
|
2124
|
+
this.ExternalVideoSupportedTypes = ExternalVideoSupportedTypes;
|
|
2083
2125
|
this.useHtmlRaw = true;
|
|
2084
2126
|
this.html = "";
|
|
2085
2127
|
this.onHtmlChanged = new EventEmitter();
|
|
@@ -2105,10 +2147,14 @@ class VisualEditorComponent {
|
|
|
2105
2147
|
}
|
|
2106
2148
|
else if (tagDescription.tag == ExternalVideoTagDataConsts.TagName) {
|
|
2107
2149
|
attrs[ExternalVideoTagDataConsts.VideoTypeAttrName] = this.selectedVideoPlayer;
|
|
2150
|
+
attrs[ExternalVideoTagDataConsts.UseResponsiveWrapperAttrName] = false;
|
|
2108
2151
|
attrs[ExternalVideoTagDataConsts.LinkAttrName] = this.selectedVideoPlayer === ExternalVideoSupportedTypes.Code ? '' :
|
|
2109
2152
|
this.selectedVideoPlayer === ExternalVideoSupportedTypes.VkVideo
|
|
2110
2153
|
? defaultLinkVk
|
|
2111
2154
|
: defaultLinkYouTube;
|
|
2155
|
+
if (this.selectedVideoPlayer === ExternalVideoSupportedTypes.Code) {
|
|
2156
|
+
innerHtml = this.htmlRaw;
|
|
2157
|
+
}
|
|
2112
2158
|
}
|
|
2113
2159
|
else if (tagDescription.tag == FileImageTagDataConsts.TagName) {
|
|
2114
2160
|
attrs[FileImageTagDataConsts.ScreenMediaRequest] = FileImageTagDataConsts.DefaultValueForFileImage;
|
|
@@ -2209,8 +2255,8 @@ class VisualEditorComponent {
|
|
|
2209
2255
|
this.bodyTags = BodyTagsExtensions.getBodyTags(this.html, this._options);
|
|
2210
2256
|
}
|
|
2211
2257
|
selectTag(data) {
|
|
2258
|
+
this.htmlRaw = '';
|
|
2212
2259
|
this.selectedValue = data.tag;
|
|
2213
|
-
console.log(this.selectedValue);
|
|
2214
2260
|
this.startAddingText(data.tag);
|
|
2215
2261
|
}
|
|
2216
2262
|
ngOnInit() {
|
|
@@ -2219,8 +2265,14 @@ class VisualEditorComponent {
|
|
|
2219
2265
|
this.selectedValue = this.tags[0].tag;
|
|
2220
2266
|
this.selectedVideoPlayer = this.videoPlayers[0].type;
|
|
2221
2267
|
}
|
|
2268
|
+
setTagButton(type) {
|
|
2269
|
+
return `tag-button-${type}`;
|
|
2270
|
+
}
|
|
2271
|
+
setAlignButton(type) {
|
|
2272
|
+
return `align-${type}`;
|
|
2273
|
+
}
|
|
2222
2274
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: VisualEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2223
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: VisualEditorComponent, isStandalone: true, selector: "croco-visual-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged", rendered: "rendered" }, viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }], ngImport: i0, template: "@if (isLoading) {\n <div>\n <div>\n <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n <div style=\"text-align: center;\">{{loadingText}}</div>\n </div>\n <div style=\"height: 10px;\"></div>\n </div>\n}\n<div [hidden]=\"isLoading\">\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n <mat-card-content>\n <div class=\"row d-flex align-items-center\">\n <div class=\"col-12\">\n <div class=\"w-100\" style=\"margin-bottom: 22px\">\n <div class=\"tags\">\n @for (tag of tags; track tag) {\n <span class=\"tag-item\" (click)=\"selectTag(tag)\" [class.active]=\"selectedValue === tag.tag\">\n <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n </ng-container>\n {{tag.displayValue}}\n </span>\n }\n </div>\n </div>\n </div>\n @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n <div class=\"col-12\">\n <mat-form-field class=\"w-100\" appearance=\"outline\">\n <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n <mat-option [value]=\"videoPlayer.type\">\n {{videoPlayer.displayValue}}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n }\n @if (selectedValue === HtmlRawTagDataConsts.TagName) {\n <div class=\"col-12\">\n <mat-form-field class=\"w-100\">\n <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n <textarea\n #autosize=\"cdkTextareaAutosize\"\n matInput\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"1\"\n cdkAutosizeMaxRows=\"5\"\n placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n #textArea\n [(ngModel)]=\"htmlRaw\"\n ></textarea>\n </mat-form-field>\n </div>\n }\n @if (selectedValue === 'text') {\n <div style=\"display: flex; justify-content: space-between; flex-wrap: wrap\">\n <div style=\"margin-bottom: 22px; overflow-x: auto;\">\n <mat-button-toggle-group\n [(ngModel)]=\"textTag\"\n [hideSingleSelectionIndicator]=\"true\"\n >\n @for (option of textTagOptions; track option) {\n <mat-button-toggle value=\"{{ option.tag }}\">\n {{ option.displayValue }}\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n </div>\n\n <div style=\"margin-bottom: 22px\">\n <mat-button-toggle-group\n [(ngModel)]=\"alignment\"\n [hideSingleSelectionIndicator]=\"true\"\n >\n @for (option of alignmentOptions; track option) {\n <mat-button-toggle value=\"{{ option.value }}\">\n <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n [ngTemplateOutletContext]=\"{icon: option.value}\">\n </ng-container>\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n </div>\n </div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0422\u0435\u043A\u0441\u0442</mat-label>\n <textarea\n #autosize=\"cdkTextareaAutosize\"\n matInput\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"1\"\n cdkAutosizeMaxRows=\"5\"\n placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n #textArea\n [(ngModel)]=\"text\"\n ></textarea>\n </mat-form-field>\n }\n <div class=\"col-12\">\n <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\n \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\n </button>\n </div>\n </div>\n </mat-card-content>\n </mat-card>\n\n <div style=\"height: 10px;\">\n </div>\n</div>\n<div [hidden]=\"isLoading\">\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n <mat-card-content>\n <div class=\"row d-flex align-items-center\">\n <div class=\"col-12\">\n <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\n (postFilesStarted)=\"postFilesStartedEventHandler($event)\" class=\"w-100\">\n </croco-html-add-files-btn>\n </div>\n </div>\n </mat-card-content>\n </mat-card>\n\n <div style=\"height: 10px;\">\n </div>\n</div>\n<div [hidden]=\"isLoading\">\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n @for (tag of bodyTags; track tag; let i = $index) {\n <div cdkDrag>\n <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n <mat-card-content>\n <div class=\"d-flex justify-content-between\">\n <div class=\"example-handle\" cdkDragHandle>\n <svg class=\"move-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer\">\n <path\n d=\"M14.6516 19.0984L12 21.75M12 21.75L9.34838 19.0984M12 21.75V15M4.90163 14.6516L2.25 12M2.25 12L4.90163 9.34838M2.25 12H9M19.0984 9.34838L21.75 12M21.75 12L19.0984 14.6516M21.75 12H15M9.34838 4.90163L12 2.25M12 2.25L14.6516 4.90163M12 2.25V9\"\n stroke=\"#323E8B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div>\n <div class=\"badge\" style=\"color:#323E8B\">\n <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n </ng-container>\n </div>\n </div>\n </div>\n <div style=\"height: 15px;\"></div>\n <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\n (onTagRemoved)=\"onTagRemovedHandler(i)\">\n </croco-html-main-editor-block>\n </mat-card-content>\n </mat-card>\n </div>\n }\n </div>\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n @if (icon === 'left') {\n <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3.12548 14.6875H13.125M3.12548 11.5625H16.875M3.125 8.4375H13.125M3.125 5.3125H16.875\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @if (icon === 'center') {\n <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.00024 14.6875H14.9998M3.12524 11.5625H16.8748M5 8.4375H15M3.125 5.3125H16.875\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @if (icon === 'right') {\n <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6.87548 14.6875H16.875M3.12548 11.5625H16.875M6.875 8.4375H16.875M3.125 5.3125H16.875\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n @if (icon === 'text') {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7.49952 15.6246H12.4995M9.99952 4.37459V15.6246M3.74951 6.87459V4.37459H16.2495V6.87459\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @else if (icon === 'html-raw') {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 6.875L18.75 10L15 13.125M5 6.875L1.25 10L5 13.125M12.5 3.125L7.5 16.875\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @else if (icon.indexOf('h') === 0) {\n {{icon.toUpperCase()}}\n }\n @else if (icon === 'external-video') {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14.375 8.75L18.75 6.25V13.75L14.375 11.25M1.875 4.6875H11.875C12.538 4.6875 13.1739 4.95089 13.6428 5.41973C14.1116 5.88857 14.375 6.52446 14.375 7.1875V14.6875C14.375 14.8533 14.3092 15.0122 14.1919 15.1294C14.0747 15.2467 13.9158 15.3125 13.75 15.3125H3.75C3.08696 15.3125 2.45107 15.0491 1.98223 14.5803C1.51339 14.1114 1.25 13.4755 1.25 12.8125V5.3125C1.25 5.14674 1.31585 4.98777 1.43306 4.87056C1.55027 4.75335 1.70924 4.6875 1.875 4.6875Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @else if (icon === 'file-image') {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.5 13.125L6.43305 9.19194C6.49108 9.1339 6.55998 9.08787 6.63581 9.05646C6.71164 9.02505 6.79291 9.00888 6.87499 9.00888C6.95706 9.00888 7.03834 9.02505 7.11417 9.05646C7.18999 9.08787 7.25889 9.1339 7.31693 9.19194L10.808 12.6831C10.8661 12.7411 10.935 12.7871 11.0108 12.8185C11.0866 12.8499 11.1679 12.8661 11.25 12.8661C11.3321 12.8661 11.4133 12.8499 11.4892 12.8185C11.565 12.7871 11.6339 12.7411 11.6919 12.6831L13.308 11.0669C13.3661 11.0089 13.435 10.9629 13.5108 10.9315C13.5866 10.9 13.6679 10.8839 13.75 10.8839C13.8321 10.8839 13.9133 10.9 13.9892 10.9315C14.065 10.9629 14.1339 11.0089 14.1919 11.0669L17.5 14.375M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75ZM13.125 7.8125C13.125 8.33027 12.7053 8.75 12.1875 8.75C11.6697 8.75 11.25 8.33027 11.25 7.8125C11.25 7.29473 11.6697 6.875 12.1875 6.875C12.7053 6.875 13.125 7.29473 13.125 7.8125Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @else if (icon === 'custom-widget') {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.25 15V16.25M13.75 12.5H16.25M11.25 16.25H13.75V11.25M11.25 11.25V13.75M4.375 11.25H8.125C8.47018 11.25 8.75 11.5298 8.75 11.875V15.625C8.75 15.9702 8.47018 16.25 8.125 16.25H4.375C4.02982 16.25 3.75 15.9702 3.75 15.625V11.875C3.75 11.5298 4.02982 11.25 4.375 11.25ZM11.875 3.75H15.625C15.9702 3.75 16.25 4.02982 16.25 4.375V8.125C16.25 8.47018 15.9702 8.75 15.625 8.75H11.875C11.5298 8.75 11.25 8.47018 11.25 8.125V4.375C11.25 4.02982 11.5298 3.75 11.875 3.75ZM4.375 3.75H8.125C8.47018 3.75 8.75 4.02982 8.75 4.375V8.125C8.75 8.47018 8.47018 8.75 8.125 8.75H4.375C4.02982 8.75 3.75 8.47018 3.75 8.125V4.375C3.75 4.02982 4.02982 3.75 4.375 3.75Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @else if (icon === 'button') {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.99939 3.75024V9.68775M13.7501 4.23695C14.9923 5.04536 15.9399 6.23353 16.4518 7.62435C16.9638 9.01517 17.0125 10.5342 16.5909 11.955C16.1693 13.3758 15.2998 14.6223 14.1121 15.5087C12.9244 16.3952 11.482 16.8741 9.99998 16.8741C8.51795 16.8741 7.07559 16.3951 5.88788 15.5087C4.70017 14.6223 3.83071 13.3757 3.40908 11.9549C2.98746 10.5341 3.03624 9.01513 3.54816 7.62432C4.06009 6.2335 5.00774 5.04534 6.24988 4.23693\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @else if (icon === 'download-file-button') {\n <svg style=\"fill:currentColor\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.42424 9.41667C3.49967 9.41667 2.75 10.1663 2.75 11.0909V19.5758C2.75 20.5003 3.49967 21.25 4.42424 21.25H19.5758C20.5003 21.25 21.25 20.5003 21.25 19.5758V11.0909C21.25 10.1663 20.5003 9.41667 19.5758 9.41667H15.9394C15.5252 9.41667 15.1894 9.08088 15.1894 8.66667C15.1894 8.25245 15.5252 7.91667 15.9394 7.91667H19.5758C21.3288 7.91667 22.75 9.33791 22.75 11.0909V19.5758C22.75 21.3288 21.3288 22.75 19.5758 22.75H4.42424C2.67124 22.75 1.25 21.3288 1.25 19.5758V11.0909C1.25 9.33791 2.67124 7.91667 4.42424 7.91667H8.06061C8.47482 7.91667 8.81061 8.25245 8.81061 8.66667C8.81061 9.08088 8.47482 9.41667 8.06061 9.41667H4.42424Z\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V15.9394C12.75 16.3536 12.4142 16.6894 12 16.6894C11.5858 16.6894 11.25 16.3536 11.25 15.9394V2C11.25 1.58579 11.5858 1.25 12 1.25Z\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.83331 12.9848C8.1262 12.6919 8.60107 12.6919 8.89397 12.9848L12 16.0909L15.106 12.9848C15.3989 12.6919 15.8738 12.6919 16.1667 12.9848C16.4596 13.2777 16.4596 13.7526 16.1667 14.0455L12.5303 17.6818C12.2374 17.9747 11.7626 17.9747 11.4697 17.6818L7.83331 14.0455C7.54041 13.7526 7.54041 13.2777 7.83331 12.9848Z\"/>\n </svg>\n }\n</ng-template>\n\n\n\n\n\n\n", styles: [":host{--mat-standard-button-toggle-selected-state-background-color: #323E8B;--mat-standard-button-toggle-text-color: #323E8B;--mat-standard-button-toggle-selected-state-text-color: white;--mat-standard-button-toggle-height: 36px;--mat-standard-button-toggle-divider-color: #323E8B;--mdc-outlined-button-label-text-weight: 400;--mdc-outlined-button-label-text-color: #333333 !important;--mdc-outlined-button-container-shape: 30px;--mdc-outlined-button-outline-width: 2px;--mdc-outlined-button-container-height: 44px}:host ::ng-deep .mat-button-toggle-appearance-standard span.mat-button-toggle-label-content{padding:0 8px;min-width:36px}.mat-button-toggle .text-align-icon{stroke:#323e8b}.mat-button-toggle:hover{color:#747ebf}.mat-button-toggle:hover .text-align-icon{stroke:#747ebf}.mat-button-toggle-checked .text-align-icon{stroke:#fff}.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)}.badge{width:44px;height:44px;border-radius:50%;border:1px solid #323E8B;display:flex;align-items:center;justify-content:center}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none;margin:2px 2px 10px}.tags{display:flex;gap:10px;flex-wrap:wrap}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:10px 20px;border:1px solid #323E8B;border-radius:30px;background-color:#fff;color:#23262a;transition:.2s ease-in-out}.tag-item svg{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:hover svg{color:#747ebf}.move-icon:hover{opacity:.7}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { 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"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: AddFilesBtnComponent, selector: "croco-html-add-files-btn", outputs: ["postFilesStarted", "filesTagsReady"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: ["tag"], outputs: ["onTagSaved", "onTagRemoved"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
2275
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: VisualEditorComponent, isStandalone: true, selector: "croco-visual-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged", rendered: "rendered" }, viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }], ngImport: i0, template: "@if (isLoading) {\n <div>\n <div>\n <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n <div style=\"text-align: center;\">{{loadingText}}</div>\n </div>\n <div style=\"height: 10px;\"></div>\n </div>\n}\n<div [hidden]=\"isLoading\">\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n <mat-card-content>\n <div class=\"row d-flex align-items-center\">\n <div class=\"col-12\">\n <div class=\"w-100\" style=\"margin-bottom: 22px\">\n <div class=\"tags\">\n @for (tag of tags; track tag) {\n <span class=\"tag-item\" (click)=\"selectTag(tag)\" [class.active]=\"selectedValue === tag.tag\">\n <span class=\"text-align-icon\">\n <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n </ng-container>\n </span>\n {{tag.displayValue}}\n </span>\n }\n </div>\n </div>\n </div>\n @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n <div class=\"col-12\">\n <mat-form-field class=\"w-100\" appearance=\"outline\">\n <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n <mat-option [value]=\"videoPlayer.type\">\n {{videoPlayer.displayValue}}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n @if (selectedVideoPlayer === ExternalVideoSupportedTypes.Code) {\n <div class=\"col-12\">\n <mat-form-field class=\"w-100\" appearance=\"outline\">\n <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n <input\n matInput\n placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n [(ngModel)]=\"htmlRaw\"\n >\n </mat-form-field>\n </div>\n }\n }\n @if (selectedValue === HtmlRawTagDataConsts.TagName) {\n <div class=\"col-12\">\n <mat-form-field class=\"w-100\">\n <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n <textarea\n #autosize=\"cdkTextareaAutosize\"\n matInput\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"1\"\n cdkAutosizeMaxRows=\"5\"\n placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n #textArea\n [(ngModel)]=\"htmlRaw\"\n ></textarea>\n </mat-form-field>\n </div>\n }\n @if (selectedValue === 'text') {\n <div style=\"display: flex; justify-content: space-between; flex-wrap: wrap\">\n <div style=\"margin-bottom: 22px; overflow-x: auto;\">\n <mat-button-toggle-group\n [(ngModel)]=\"textTag\"\n [hideSingleSelectionIndicator]=\"true\"\n >\n @for (option of textTagOptions; track option) {\n <mat-button-toggle value=\"{{ option.tag }}\">\n {{ option.displayValue }}\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n </div>\n\n <div style=\"margin-bottom: 22px\">\n <mat-button-toggle-group\n [(ngModel)]=\"alignment\"\n [hideSingleSelectionIndicator]=\"true\"\n >\n @for (option of alignmentOptions; track option) {\n <mat-button-toggle value=\"{{ option.value }}\">\n <span class=\"text-align-icon\">\n <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n [ngTemplateOutletContext]=\"{icon: option.value}\">\n </ng-container>\n </span>\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n </div>\n </div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0422\u0435\u043A\u0441\u0442</mat-label>\n <textarea\n #autosize=\"cdkTextareaAutosize\"\n matInput\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"1\"\n cdkAutosizeMaxRows=\"5\"\n placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n #textArea\n [(ngModel)]=\"text\"\n ></textarea>\n </mat-form-field>\n }\n <div class=\"col-12\">\n <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\n \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\n </button>\n </div>\n </div>\n </mat-card-content>\n </mat-card>\n\n <div style=\"height: 10px;\">\n </div>\n</div>\n<div [hidden]=\"isLoading\">\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n <mat-card-content>\n <div class=\"row d-flex align-items-center\">\n <div class=\"col-12\">\n <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\n (postFilesStarted)=\"postFilesStartedEventHandler($event)\" class=\"w-100\">\n </croco-html-add-files-btn>\n </div>\n </div>\n </mat-card-content>\n </mat-card>\n\n <div style=\"height: 10px;\">\n </div>\n</div>\n<div [hidden]=\"isLoading\">\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n @for (tag of bodyTags; track tag; let i = $index) {\n <div cdkDrag>\n <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n <mat-card-content>\n <div class=\"d-flex justify-content-between\">\n <div class=\"example-handle\" cdkDragHandle>\n <svg width=\"24\" height=\"24\" class=\"move-icon\">\n <use [attr.xlink:href]=\"'move-icon' | spriteIconPath\"></use>\n </svg>\n </div>\n <div>\n <div class=\"badge\" [matTooltip]=\"tag.tagDescription.tag\">\n <span class=\"text-align-icon\">\n <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n </ng-container>\n </span>\n </div>\n </div>\n </div>\n <div style=\"height: 15px;\"></div>\n <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\n (onTagRemoved)=\"onTagRemovedHandler(i)\">\n </croco-html-main-editor-block>\n </mat-card-content>\n </mat-card>\n </div>\n }\n </div>\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n <svg width=\"20\" height=\"20\">\n <use [attr.xlink:href]=\"setAlignButton(icon) | spriteIconPath\"></use>\n </svg>\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n @if (icon.indexOf('h') === 0 && icon.length === 2) {\n {{icon.toUpperCase()}}\n }\n @else {\n <svg width=\"20\" height=\"20\">\n <use [attr.xlink:href]=\"setTagButton(icon)| spriteIconPath\"></use>\n </svg>\n }\n</ng-template>\n\n\n\n\n\n\n", styles: [":host{--mat-standard-button-toggle-selected-state-background-color: #323E8B;--mat-standard-button-toggle-text-color: #323E8B;--mat-standard-button-toggle-selected-state-text-color: white;--mat-standard-button-toggle-height: 36px;--mat-standard-button-toggle-divider-color: #323E8B;--mdc-outlined-button-label-text-weight: 400;--mdc-outlined-button-label-text-color: #333333 !important;--mdc-outlined-button-container-shape: 30px;--mdc-outlined-button-outline-width: 2px;--mdc-outlined-button-container-height: 44px}:host ::ng-deep .mat-button-toggle-appearance-standard span.mat-button-toggle-label-content{padding:0 8px;min-width:36px}.text-align-icon,.mat-button-toggle .text-align-icon{color:#323e8b}.mat-button-toggle:hover,.mat-button-toggle:hover .text-align-icon{color:#747ebf}.mat-button-toggle-checked .text-align-icon{color:#fff}.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)}.badge{width:44px;height:44px;border-radius:50%;border:1px solid #323E8B;display:flex;align-items:center;justify-content:center;color:#323e8b}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none;margin:2px 2px 10px}.tags{display:flex;gap:10px;flex-wrap:wrap}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:10px 20px;border:1px solid #323E8B;border-radius:30px;background-color:#fff;color:#23262a;transition:.2s ease-in-out}.text-align-icon{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:hover svg{color:#747ebf}@media (max-width: 760px){.tag-item:hover{color:inherit;box-shadow:none}.tag-item:hover svg{color:inherit}.tag-item:active{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:active svg{color:#747ebf}}.move-icon:hover{cursor:pointer;opacity:.7}.cdk-drag.cdk-drag-placeholder,.cdk-drag-preview{opacity:.5;transition:opacity .2s}.example-handle{color:#323e8b}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { 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"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: AddFilesBtnComponent, selector: "croco-html-add-files-btn", outputs: ["postFilesStarted", "filesTagsReady"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: ["tag"], outputs: ["onTagSaved", "onTagRemoved"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: SpriteIconPathPipe, name: "spriteIconPath" }] }); }
|
|
2224
2276
|
}
|
|
2225
2277
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: VisualEditorComponent, decorators: [{
|
|
2226
2278
|
type: Component,
|
|
@@ -2244,8 +2296,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
2244
2296
|
MatButtonToggleGroup,
|
|
2245
2297
|
MatButtonToggle,
|
|
2246
2298
|
NgTemplateOutlet,
|
|
2247
|
-
|
|
2248
|
-
], template: "@if (isLoading) {\n <div>\n <div>\n <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n <div style=\"text-align: center;\">{{loadingText}}</div>\n </div>\n <div style=\"height: 10px;\"></div>\n </div>\n}\n<div [hidden]=\"isLoading\">\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n <mat-card-content>\n <div class=\"row d-flex align-items-center\">\n <div class=\"col-12\">\n <div class=\"w-100\" style=\"margin-bottom: 22px\">\n <div class=\"tags\">\n @for (tag of tags; track tag) {\n <span class=\"tag-item\" (click)=\"selectTag(tag)\" [class.active]=\"selectedValue === tag.tag\">\n <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n </ng-container>\n {{tag.displayValue}}\n </span>\n }\n </div>\n </div>\n </div>\n @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n <div class=\"col-12\">\n <mat-form-field class=\"w-100\" appearance=\"outline\">\n <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n <mat-option [value]=\"videoPlayer.type\">\n {{videoPlayer.displayValue}}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n }\n @if (selectedValue === HtmlRawTagDataConsts.TagName) {\n <div class=\"col-12\">\n <mat-form-field class=\"w-100\">\n <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n <textarea\n #autosize=\"cdkTextareaAutosize\"\n matInput\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"1\"\n cdkAutosizeMaxRows=\"5\"\n placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n #textArea\n [(ngModel)]=\"htmlRaw\"\n ></textarea>\n </mat-form-field>\n </div>\n }\n @if (selectedValue === 'text') {\n <div style=\"display: flex; justify-content: space-between; flex-wrap: wrap\">\n <div style=\"margin-bottom: 22px; overflow-x: auto;\">\n <mat-button-toggle-group\n [(ngModel)]=\"textTag\"\n [hideSingleSelectionIndicator]=\"true\"\n >\n @for (option of textTagOptions; track option) {\n <mat-button-toggle value=\"{{ option.tag }}\">\n {{ option.displayValue }}\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n </div>\n\n <div style=\"margin-bottom: 22px\">\n <mat-button-toggle-group\n [(ngModel)]=\"alignment\"\n [hideSingleSelectionIndicator]=\"true\"\n >\n @for (option of alignmentOptions; track option) {\n <mat-button-toggle value=\"{{ option.value }}\">\n <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n [ngTemplateOutletContext]=\"{icon: option.value}\">\n </ng-container>\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n </div>\n </div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0422\u0435\u043A\u0441\u0442</mat-label>\n <textarea\n #autosize=\"cdkTextareaAutosize\"\n matInput\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"1\"\n cdkAutosizeMaxRows=\"5\"\n placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n #textArea\n [(ngModel)]=\"text\"\n ></textarea>\n </mat-form-field>\n }\n <div class=\"col-12\">\n <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\n \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\n </button>\n </div>\n </div>\n </mat-card-content>\n </mat-card>\n\n <div style=\"height: 10px;\">\n </div>\n</div>\n<div [hidden]=\"isLoading\">\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n <mat-card-content>\n <div class=\"row d-flex align-items-center\">\n <div class=\"col-12\">\n <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\n (postFilesStarted)=\"postFilesStartedEventHandler($event)\" class=\"w-100\">\n </croco-html-add-files-btn>\n </div>\n </div>\n </mat-card-content>\n </mat-card>\n\n <div style=\"height: 10px;\">\n </div>\n</div>\n<div [hidden]=\"isLoading\">\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n @for (tag of bodyTags; track tag; let i = $index) {\n <div cdkDrag>\n <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n <mat-card-content>\n <div class=\"d-flex justify-content-between\">\n <div class=\"example-handle\" cdkDragHandle>\n <svg class=\"move-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer\">\n <path\n d=\"M14.6516 19.0984L12 21.75M12 21.75L9.34838 19.0984M12 21.75V15M4.90163 14.6516L2.25 12M2.25 12L4.90163 9.34838M2.25 12H9M19.0984 9.34838L21.75 12M21.75 12L19.0984 14.6516M21.75 12H15M9.34838 4.90163L12 2.25M12 2.25L14.6516 4.90163M12 2.25V9\"\n stroke=\"#323E8B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div>\n <div class=\"badge\" style=\"color:#323E8B\">\n <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n </ng-container>\n </div>\n </div>\n </div>\n <div style=\"height: 15px;\"></div>\n <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\n (onTagRemoved)=\"onTagRemovedHandler(i)\">\n </croco-html-main-editor-block>\n </mat-card-content>\n </mat-card>\n </div>\n }\n </div>\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n @if (icon === 'left') {\n <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3.12548 14.6875H13.125M3.12548 11.5625H16.875M3.125 8.4375H13.125M3.125 5.3125H16.875\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @if (icon === 'center') {\n <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.00024 14.6875H14.9998M3.12524 11.5625H16.8748M5 8.4375H15M3.125 5.3125H16.875\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @if (icon === 'right') {\n <svg class=\"text-align-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6.87548 14.6875H16.875M3.12548 11.5625H16.875M6.875 8.4375H16.875M3.125 5.3125H16.875\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n @if (icon === 'text') {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7.49952 15.6246H12.4995M9.99952 4.37459V15.6246M3.74951 6.87459V4.37459H16.2495V6.87459\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @else if (icon === 'html-raw') {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 6.875L18.75 10L15 13.125M5 6.875L1.25 10L5 13.125M12.5 3.125L7.5 16.875\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @else if (icon.indexOf('h') === 0) {\n {{icon.toUpperCase()}}\n }\n @else if (icon === 'external-video') {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14.375 8.75L18.75 6.25V13.75L14.375 11.25M1.875 4.6875H11.875C12.538 4.6875 13.1739 4.95089 13.6428 5.41973C14.1116 5.88857 14.375 6.52446 14.375 7.1875V14.6875C14.375 14.8533 14.3092 15.0122 14.1919 15.1294C14.0747 15.2467 13.9158 15.3125 13.75 15.3125H3.75C3.08696 15.3125 2.45107 15.0491 1.98223 14.5803C1.51339 14.1114 1.25 13.4755 1.25 12.8125V5.3125C1.25 5.14674 1.31585 4.98777 1.43306 4.87056C1.55027 4.75335 1.70924 4.6875 1.875 4.6875Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @else if (icon === 'file-image') {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.5 13.125L6.43305 9.19194C6.49108 9.1339 6.55998 9.08787 6.63581 9.05646C6.71164 9.02505 6.79291 9.00888 6.87499 9.00888C6.95706 9.00888 7.03834 9.02505 7.11417 9.05646C7.18999 9.08787 7.25889 9.1339 7.31693 9.19194L10.808 12.6831C10.8661 12.7411 10.935 12.7871 11.0108 12.8185C11.0866 12.8499 11.1679 12.8661 11.25 12.8661C11.3321 12.8661 11.4133 12.8499 11.4892 12.8185C11.565 12.7871 11.6339 12.7411 11.6919 12.6831L13.308 11.0669C13.3661 11.0089 13.435 10.9629 13.5108 10.9315C13.5866 10.9 13.6679 10.8839 13.75 10.8839C13.8321 10.8839 13.9133 10.9 13.9892 10.9315C14.065 10.9629 14.1339 11.0089 14.1919 11.0669L17.5 14.375M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75ZM13.125 7.8125C13.125 8.33027 12.7053 8.75 12.1875 8.75C11.6697 8.75 11.25 8.33027 11.25 7.8125C11.25 7.29473 11.6697 6.875 12.1875 6.875C12.7053 6.875 13.125 7.29473 13.125 7.8125Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @else if (icon === 'custom-widget') {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.25 15V16.25M13.75 12.5H16.25M11.25 16.25H13.75V11.25M11.25 11.25V13.75M4.375 11.25H8.125C8.47018 11.25 8.75 11.5298 8.75 11.875V15.625C8.75 15.9702 8.47018 16.25 8.125 16.25H4.375C4.02982 16.25 3.75 15.9702 3.75 15.625V11.875C3.75 11.5298 4.02982 11.25 4.375 11.25ZM11.875 3.75H15.625C15.9702 3.75 16.25 4.02982 16.25 4.375V8.125C16.25 8.47018 15.9702 8.75 15.625 8.75H11.875C11.5298 8.75 11.25 8.47018 11.25 8.125V4.375C11.25 4.02982 11.5298 3.75 11.875 3.75ZM4.375 3.75H8.125C8.47018 3.75 8.75 4.02982 8.75 4.375V8.125C8.75 8.47018 8.47018 8.75 8.125 8.75H4.375C4.02982 8.75 3.75 8.47018 3.75 8.125V4.375C3.75 4.02982 4.02982 3.75 4.375 3.75Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @else if (icon === 'button') {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.99939 3.75024V9.68775M13.7501 4.23695C14.9923 5.04536 15.9399 6.23353 16.4518 7.62435C16.9638 9.01517 17.0125 10.5342 16.5909 11.955C16.1693 13.3758 15.2998 14.6223 14.1121 15.5087C12.9244 16.3952 11.482 16.8741 9.99998 16.8741C8.51795 16.8741 7.07559 16.3951 5.88788 15.5087C4.70017 14.6223 3.83071 13.3757 3.40908 11.9549C2.98746 10.5341 3.03624 9.01513 3.54816 7.62432C4.06009 6.2335 5.00774 5.04534 6.24988 4.23693\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @else if (icon === 'download-file-button') {\n <svg style=\"fill:currentColor\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.42424 9.41667C3.49967 9.41667 2.75 10.1663 2.75 11.0909V19.5758C2.75 20.5003 3.49967 21.25 4.42424 21.25H19.5758C20.5003 21.25 21.25 20.5003 21.25 19.5758V11.0909C21.25 10.1663 20.5003 9.41667 19.5758 9.41667H15.9394C15.5252 9.41667 15.1894 9.08088 15.1894 8.66667C15.1894 8.25245 15.5252 7.91667 15.9394 7.91667H19.5758C21.3288 7.91667 22.75 9.33791 22.75 11.0909V19.5758C22.75 21.3288 21.3288 22.75 19.5758 22.75H4.42424C2.67124 22.75 1.25 21.3288 1.25 19.5758V11.0909C1.25 9.33791 2.67124 7.91667 4.42424 7.91667H8.06061C8.47482 7.91667 8.81061 8.25245 8.81061 8.66667C8.81061 9.08088 8.47482 9.41667 8.06061 9.41667H4.42424Z\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V15.9394C12.75 16.3536 12.4142 16.6894 12 16.6894C11.5858 16.6894 11.25 16.3536 11.25 15.9394V2C11.25 1.58579 11.5858 1.25 12 1.25Z\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.83331 12.9848C8.1262 12.6919 8.60107 12.6919 8.89397 12.9848L12 16.0909L15.106 12.9848C15.3989 12.6919 15.8738 12.6919 16.1667 12.9848C16.4596 13.2777 16.4596 13.7526 16.1667 14.0455L12.5303 17.6818C12.2374 17.9747 11.7626 17.9747 11.4697 17.6818L7.83331 14.0455C7.54041 13.7526 7.54041 13.2777 7.83331 12.9848Z\"/>\n </svg>\n }\n</ng-template>\n\n\n\n\n\n\n", styles: [":host{--mat-standard-button-toggle-selected-state-background-color: #323E8B;--mat-standard-button-toggle-text-color: #323E8B;--mat-standard-button-toggle-selected-state-text-color: white;--mat-standard-button-toggle-height: 36px;--mat-standard-button-toggle-divider-color: #323E8B;--mdc-outlined-button-label-text-weight: 400;--mdc-outlined-button-label-text-color: #333333 !important;--mdc-outlined-button-container-shape: 30px;--mdc-outlined-button-outline-width: 2px;--mdc-outlined-button-container-height: 44px}:host ::ng-deep .mat-button-toggle-appearance-standard span.mat-button-toggle-label-content{padding:0 8px;min-width:36px}.mat-button-toggle .text-align-icon{stroke:#323e8b}.mat-button-toggle:hover{color:#747ebf}.mat-button-toggle:hover .text-align-icon{stroke:#747ebf}.mat-button-toggle-checked .text-align-icon{stroke:#fff}.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)}.badge{width:44px;height:44px;border-radius:50%;border:1px solid #323E8B;display:flex;align-items:center;justify-content:center}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none;margin:2px 2px 10px}.tags{display:flex;gap:10px;flex-wrap:wrap}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:10px 20px;border:1px solid #323E8B;border-radius:30px;background-color:#fff;color:#23262a;transition:.2s ease-in-out}.tag-item svg{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:hover svg{color:#747ebf}.move-icon:hover{opacity:.7}\n"] }]
|
|
2299
|
+
MatTooltip,
|
|
2300
|
+
SpriteIconPathPipe,
|
|
2301
|
+
], template: "@if (isLoading) {\n <div>\n <div>\n <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\n <div style=\"text-align: center;\">{{loadingText}}</div>\n </div>\n <div style=\"height: 10px;\"></div>\n </div>\n}\n<div [hidden]=\"isLoading\">\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n <mat-card-content>\n <div class=\"row d-flex align-items-center\">\n <div class=\"col-12\">\n <div class=\"w-100\" style=\"margin-bottom: 22px\">\n <div class=\"tags\">\n @for (tag of tags; track tag) {\n <span class=\"tag-item\" (click)=\"selectTag(tag)\" [class.active]=\"selectedValue === tag.tag\">\n <span class=\"text-align-icon\">\n <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n [ngTemplateOutletContext]=\"{icon: tag.tag}\">\n </ng-container>\n </span>\n {{tag.displayValue}}\n </span>\n }\n </div>\n </div>\n </div>\n @if (selectedValue === ExternalVideoTagDataConsts.TagName) {\n <div class=\"col-12\">\n <mat-form-field class=\"w-100\" appearance=\"outline\">\n <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0438\u0434\u0435\u043E\u043F\u043B\u0435\u0435\u0440</mat-label>\n <mat-select [(ngModel)]=\"selectedVideoPlayer\">\n @for (videoPlayer of videoPlayers; track videoPlayer.type) {\n <mat-option [value]=\"videoPlayer.type\">\n {{videoPlayer.displayValue}}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n @if (selectedVideoPlayer === ExternalVideoSupportedTypes.Code) {\n <div class=\"col-12\">\n <mat-form-field class=\"w-100\" appearance=\"outline\">\n <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n <input\n matInput\n placeholder=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\"\n [(ngModel)]=\"htmlRaw\"\n >\n </mat-form-field>\n </div>\n }\n }\n @if (selectedValue === HtmlRawTagDataConsts.TagName) {\n <div class=\"col-12\">\n <mat-form-field class=\"w-100\">\n <mat-label>\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430</mat-label>\n <textarea\n #autosize=\"cdkTextareaAutosize\"\n matInput\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"1\"\n cdkAutosizeMaxRows=\"5\"\n placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n #textArea\n [(ngModel)]=\"htmlRaw\"\n ></textarea>\n </mat-form-field>\n </div>\n }\n @if (selectedValue === 'text') {\n <div style=\"display: flex; justify-content: space-between; flex-wrap: wrap\">\n <div style=\"margin-bottom: 22px; overflow-x: auto;\">\n <mat-button-toggle-group\n [(ngModel)]=\"textTag\"\n [hideSingleSelectionIndicator]=\"true\"\n >\n @for (option of textTagOptions; track option) {\n <mat-button-toggle value=\"{{ option.tag }}\">\n {{ option.displayValue }}\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n </div>\n\n <div style=\"margin-bottom: 22px\">\n <mat-button-toggle-group\n [(ngModel)]=\"alignment\"\n [hideSingleSelectionIndicator]=\"true\"\n >\n @for (option of alignmentOptions; track option) {\n <mat-button-toggle value=\"{{ option.value }}\">\n <span class=\"text-align-icon\">\n <ng-container [ngTemplateOutlet]=\"textAlignToggleIcons\"\n [ngTemplateOutletContext]=\"{icon: option.value}\">\n </ng-container>\n </span>\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n </div>\n </div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0422\u0435\u043A\u0441\u0442</mat-label>\n <textarea\n #autosize=\"cdkTextareaAutosize\"\n matInput\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"1\"\n cdkAutosizeMaxRows=\"5\"\n placeholder=\"\u0422\u0435\u043A\u0441\u0442\"\n #textArea\n [(ngModel)]=\"text\"\n ></textarea>\n </mat-form-field>\n }\n <div class=\"col-12\">\n <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\n \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\n </button>\n </div>\n </div>\n </mat-card-content>\n </mat-card>\n\n <div style=\"height: 10px;\">\n </div>\n</div>\n<div [hidden]=\"isLoading\">\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\n <mat-card-content>\n <div class=\"row d-flex align-items-center\">\n <div class=\"col-12\">\n <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\n (postFilesStarted)=\"postFilesStartedEventHandler($event)\" class=\"w-100\">\n </croco-html-add-files-btn>\n </div>\n </div>\n </mat-card-content>\n </mat-card>\n\n <div style=\"height: 10px;\">\n </div>\n</div>\n<div [hidden]=\"isLoading\">\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n @for (tag of bodyTags; track tag; let i = $index) {\n <div cdkDrag>\n <mat-card style=\"margin: 2px;\" class=\"mat-card special\">\n <mat-card-content>\n <div class=\"d-flex justify-content-between\">\n <div class=\"example-handle\" cdkDragHandle>\n <svg width=\"24\" height=\"24\" class=\"move-icon\">\n <use [attr.xlink:href]=\"'move-icon' | spriteIconPath\"></use>\n </svg>\n </div>\n <div>\n <div class=\"badge\" [matTooltip]=\"tag.tagDescription.tag\">\n <span class=\"text-align-icon\">\n <ng-container [ngTemplateOutlet]=\"tagButtonIcons\"\n [ngTemplateOutletContext]=\"{icon: tag.tagDescription.tag}\">\n </ng-container>\n </span>\n </div>\n </div>\n </div>\n <div style=\"height: 15px;\"></div>\n <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\n (onTagRemoved)=\"onTagRemovedHandler(i)\">\n </croco-html-main-editor-block>\n </mat-card-content>\n </mat-card>\n </div>\n }\n </div>\n</div>\n\n<ng-template #textAlignToggleIcons let-icon=\"icon\">\n <svg width=\"20\" height=\"20\">\n <use [attr.xlink:href]=\"setAlignButton(icon) | spriteIconPath\"></use>\n </svg>\n</ng-template>\n\n<ng-template #tagButtonIcons let-icon=\"icon\">\n @if (icon.indexOf('h') === 0 && icon.length === 2) {\n {{icon.toUpperCase()}}\n }\n @else {\n <svg width=\"20\" height=\"20\">\n <use [attr.xlink:href]=\"setTagButton(icon)| spriteIconPath\"></use>\n </svg>\n }\n</ng-template>\n\n\n\n\n\n\n", styles: [":host{--mat-standard-button-toggle-selected-state-background-color: #323E8B;--mat-standard-button-toggle-text-color: #323E8B;--mat-standard-button-toggle-selected-state-text-color: white;--mat-standard-button-toggle-height: 36px;--mat-standard-button-toggle-divider-color: #323E8B;--mdc-outlined-button-label-text-weight: 400;--mdc-outlined-button-label-text-color: #333333 !important;--mdc-outlined-button-container-shape: 30px;--mdc-outlined-button-outline-width: 2px;--mdc-outlined-button-container-height: 44px}:host ::ng-deep .mat-button-toggle-appearance-standard span.mat-button-toggle-label-content{padding:0 8px;min-width:36px}.text-align-icon,.mat-button-toggle .text-align-icon{color:#323e8b}.mat-button-toggle:hover,.mat-button-toggle:hover .text-align-icon{color:#747ebf}.mat-button-toggle-checked .text-align-icon{color:#fff}.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)}.badge{width:44px;height:44px;border-radius:50%;border:1px solid #323E8B;display:flex;align-items:center;justify-content:center;color:#323e8b}.mat-card.special{border:1px solid #747EBF;border-radius:8px;box-shadow:none;margin:2px 2px 10px}.tags{display:flex;gap:10px;flex-wrap:wrap}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:10px 20px;border:1px solid #323E8B;border-radius:30px;background-color:#fff;color:#23262a;transition:.2s ease-in-out}.text-align-icon{color:#323e8b}.tag-item.active{background-color:#323e8b;color:#fff}.tag-item.active svg{color:#fff}.tag-item:hover{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:hover svg{color:#747ebf}@media (max-width: 760px){.tag-item:hover{color:inherit;box-shadow:none}.tag-item:hover svg{color:inherit}.tag-item:active{color:#747ebf;box-shadow:0 0 4px #747ebf}.tag-item:active svg{color:#747ebf}}.move-icon:hover{cursor:pointer;opacity:.7}.cdk-drag.cdk-drag-placeholder,.cdk-drag-preview{opacity:.5;transition:opacity .2s}.example-handle{color:#323e8b}\n"] }]
|
|
2249
2302
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
2250
2303
|
type: Inject,
|
|
2251
2304
|
args: [CrocoHtmlOptionsToken]
|
|
@@ -2301,21 +2354,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
2301
2354
|
type: Input
|
|
2302
2355
|
}] } });
|
|
2303
2356
|
|
|
2304
|
-
class SpriteIconPathPipe {
|
|
2305
|
-
transform(id) {
|
|
2306
|
-
return `assets/lib-sprites/symbol/croco-html-svg-sprite.svg#${id}`;
|
|
2307
|
-
}
|
|
2308
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SpriteIconPathPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
2309
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: SpriteIconPathPipe, isStandalone: true, name: "spriteIconPath" }); }
|
|
2310
|
-
}
|
|
2311
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SpriteIconPathPipe, decorators: [{
|
|
2312
|
-
type: Pipe,
|
|
2313
|
-
args: [{
|
|
2314
|
-
name: 'spriteIconPath',
|
|
2315
|
-
standalone: true,
|
|
2316
|
-
}]
|
|
2317
|
-
}] });
|
|
2318
|
-
|
|
2319
2357
|
class MainEditorComponent {
|
|
2320
2358
|
constructor(_clipboardService, _snackBar, _cdref) {
|
|
2321
2359
|
this._clipboardService = _clipboardService;
|