croco-html 2.33.0 → 2.40.0
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/editor/main-editor/main-editor.component.mjs +8 -4
- package/esm2022/lib/components/editor/main-editor-block/main-editor-block.component.mjs +3 -3
- package/esm2022/lib/components/editor/visual-editor/DefaultTags.mjs +12 -12
- package/esm2022/lib/components/editor/visual-editor/visual-editor.component.mjs +45 -18
- package/esm2022/lib/extensions/BodyTagsExtensions.mjs +11 -11
- package/fesm2022/croco-html.mjs +71 -44
- package/fesm2022/croco-html.mjs.map +1 -1
- package/lib/components/editor/visual-editor/visual-editor.component.d.ts +4 -4
- package/lib/index.d.ts +7 -7
- package/package.json +1 -1
package/fesm2022/croco-html.mjs
CHANGED
|
@@ -15,7 +15,7 @@ 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, CommonModule } from '@angular/common';
|
|
18
|
+
import { NgStyle, NgTemplateOutlet, UpperCasePipe, 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';
|
|
@@ -716,20 +716,20 @@ class Tags {
|
|
|
716
716
|
class BodyTagsExtensions {
|
|
717
717
|
static getDescription(tagName) {
|
|
718
718
|
var descriptions = {
|
|
719
|
-
"text": "
|
|
720
|
-
"h1": "
|
|
721
|
-
"h2": "
|
|
722
|
-
"h3": "
|
|
723
|
-
"h4": "
|
|
724
|
-
"h5": "
|
|
725
|
-
"h6": "
|
|
719
|
+
"text": "T",
|
|
720
|
+
"h1": "H1",
|
|
721
|
+
"h2": "H2",
|
|
722
|
+
"h3": "H3",
|
|
723
|
+
"h4": "H4",
|
|
724
|
+
"h5": "H5",
|
|
725
|
+
"h6": "H6",
|
|
726
726
|
[FileImageTagDataConsts.TagName]: "Изображение",
|
|
727
|
-
[ExternalVideoTagDataConsts.TagName]: "
|
|
727
|
+
[ExternalVideoTagDataConsts.TagName]: "Видео",
|
|
728
728
|
[DownloadButtonTagDataConsts.TagName]: "Кнопка",
|
|
729
|
-
[HtmlRawTagDataConsts.TagName]: "
|
|
729
|
+
[HtmlRawTagDataConsts.TagName]: "Разметка",
|
|
730
730
|
[DownloadButtonTagDataConsts.TagName]: "Кнопка для скачивания",
|
|
731
731
|
[ButtonTagDataConsts.TagName]: "Кнопка",
|
|
732
|
-
[CustomWidgetTagDataConsts.TagName]: "
|
|
732
|
+
[CustomWidgetTagDataConsts.TagName]: "Виджет"
|
|
733
733
|
};
|
|
734
734
|
return descriptions[tagName];
|
|
735
735
|
}
|
|
@@ -1842,24 +1842,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1842
1842
|
|
|
1843
1843
|
class DefaultTags {
|
|
1844
1844
|
static { this.textTags = [
|
|
1845
|
-
{ tag: 'text', displayValue: '
|
|
1846
|
-
{ tag: 'h1', displayValue: '
|
|
1847
|
-
{ tag: 'h2', displayValue: '
|
|
1848
|
-
{ tag: 'h3', displayValue: '
|
|
1849
|
-
{ tag: 'h4', displayValue: '
|
|
1850
|
-
{ tag: 'h5', displayValue: '
|
|
1851
|
-
{ tag: 'h6', displayValue: '
|
|
1845
|
+
{ tag: 'text', displayValue: 'T' },
|
|
1846
|
+
{ tag: 'h1', displayValue: 'H1' },
|
|
1847
|
+
{ tag: 'h2', displayValue: 'H2' },
|
|
1848
|
+
{ tag: 'h3', displayValue: 'H3' },
|
|
1849
|
+
{ tag: 'h4', displayValue: 'H4' },
|
|
1850
|
+
{ tag: 'h5', displayValue: 'H5' },
|
|
1851
|
+
{ tag: 'h6', displayValue: 'H6' },
|
|
1852
1852
|
]; }
|
|
1853
1853
|
static { this.tags = [
|
|
1854
1854
|
{ tag: FileImageTagDataConsts.TagName, displayValue: 'Изображение' },
|
|
1855
|
-
{ tag: ExternalVideoTagDataConsts.TagName, displayValue: '
|
|
1855
|
+
{ tag: ExternalVideoTagDataConsts.TagName, displayValue: 'Видео' },
|
|
1856
1856
|
{ tag: DownloadButtonTagDataConsts.TagName, displayValue: 'Кнопка для скачивания' },
|
|
1857
1857
|
{ tag: ButtonTagDataConsts.TagName, displayValue: 'Кнопка' },
|
|
1858
|
-
{ tag: CustomWidgetTagDataConsts.TagName, displayValue: '
|
|
1859
|
-
|
|
1858
|
+
{ tag: CustomWidgetTagDataConsts.TagName, displayValue: 'Виджет' },
|
|
1859
|
+
{ tag: 'text', displayValue: 'Текст' },
|
|
1860
1860
|
]; }
|
|
1861
1861
|
static { this.htmlRawTag = {
|
|
1862
|
-
tag: HtmlRawTagDataConsts.TagName, displayValue: '
|
|
1862
|
+
tag: HtmlRawTagDataConsts.TagName, displayValue: 'Разметка'
|
|
1863
1863
|
}; }
|
|
1864
1864
|
static getTags(useHtmlRaw) {
|
|
1865
1865
|
var result = [...DefaultTags.tags];
|
|
@@ -1976,7 +1976,7 @@ class MainEditorBlockComponent {
|
|
|
1976
1976
|
ngOnInit() {
|
|
1977
1977
|
}
|
|
1978
1978
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1979
|
-
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>\n <div>\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\n @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\n @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\n @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\n @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\n @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\n @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>\n @if (tag.presentOrEdit) {\n <button (click)=\"tag.presentOrEdit = false\" mat-icon-button>\n <
|
|
1979
|
+
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\n @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\n @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\n @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\n @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\n @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\n @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\">\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}\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"] }] }); }
|
|
1980
1980
|
}
|
|
1981
1981
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorBlockComponent, decorators: [{
|
|
1982
1982
|
type: Component,
|
|
@@ -1990,7 +1990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1990
1990
|
ExternalVideoEditorComponent,
|
|
1991
1991
|
ButtonEditorComponent,
|
|
1992
1992
|
CustomWidgetEditorComponent
|
|
1993
|
-
], template: "<div>\n <div>\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\n @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\n @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\n @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\n @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\n @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\n @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>\n @if (tag.presentOrEdit) {\n <button (click)=\"tag.presentOrEdit = false\" mat-icon-button>\n <
|
|
1993
|
+
], 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\n @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\n @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\n @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\n @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\n @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\n @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\">\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}\n"] }]
|
|
1994
1994
|
}], propDecorators: { tag: [{
|
|
1995
1995
|
type: Input
|
|
1996
1996
|
}], onTagSaved: [{
|
|
@@ -2019,7 +2019,6 @@ class VisualEditorComponent {
|
|
|
2019
2019
|
this._options = _options;
|
|
2020
2020
|
this.isLoading = false;
|
|
2021
2021
|
this.loadingText = "Идёт загрузка";
|
|
2022
|
-
this.isActiveAddText = false;
|
|
2023
2022
|
this.text = '';
|
|
2024
2023
|
this.alignment = EAlignments.Left;
|
|
2025
2024
|
this.textTag = DefaultTags.textTags[0].tag;
|
|
@@ -2048,8 +2047,9 @@ class VisualEditorComponent {
|
|
|
2048
2047
|
let attrs = {};
|
|
2049
2048
|
let innerHtml = "";
|
|
2050
2049
|
if (TextTags.allTextTags.includes(tagDescription.tag)) {
|
|
2051
|
-
|
|
2052
|
-
|
|
2050
|
+
this.addTextTags();
|
|
2051
|
+
this.startAddingText();
|
|
2052
|
+
return;
|
|
2053
2053
|
}
|
|
2054
2054
|
else if (tagDescription.tag == ExternalVideoTagDataConsts.TagName) {
|
|
2055
2055
|
attrs[ExternalVideoTagDataConsts.VideoTypeAttrName] = this.selectedVideoPlayer;
|
|
@@ -2083,18 +2083,14 @@ class VisualEditorComponent {
|
|
|
2083
2083
|
});
|
|
2084
2084
|
this.recalculateHtml();
|
|
2085
2085
|
}
|
|
2086
|
-
|
|
2087
|
-
this.isActiveAddText = !this.isActiveAddText;
|
|
2086
|
+
startAddingText() {
|
|
2088
2087
|
this.saveBodyTags = JSON.parse(JSON.stringify(this.bodyTags));
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
});
|
|
2093
|
-
}
|
|
2088
|
+
setTimeout(() => {
|
|
2089
|
+
this.textArea.nativeElement.focus();
|
|
2090
|
+
});
|
|
2094
2091
|
this.resetTextStyle();
|
|
2095
2092
|
}
|
|
2096
|
-
|
|
2097
|
-
this.isActiveAddText = !this.isActiveAddText;
|
|
2093
|
+
finishAddingText() {
|
|
2098
2094
|
this.bodyTags = JSON.parse(JSON.stringify(this.saveBodyTags));
|
|
2099
2095
|
this.resetTextStyle();
|
|
2100
2096
|
}
|
|
@@ -2103,11 +2099,10 @@ class VisualEditorComponent {
|
|
|
2103
2099
|
this.alignment = EAlignments.Left;
|
|
2104
2100
|
this.textTag = DefaultTags.textTags[0].tag;
|
|
2105
2101
|
}
|
|
2106
|
-
|
|
2102
|
+
addTextTags() {
|
|
2107
2103
|
let lines = this.text.split('\n');
|
|
2108
2104
|
this.bodyTags = JSON.parse(JSON.stringify(this.saveBodyTags));
|
|
2109
|
-
let tagDescription = this.
|
|
2110
|
-
.find(x => x.tag === this.textTag);
|
|
2105
|
+
let tagDescription = this.textTagOptions?.find(x => x.tag === this.textTag);
|
|
2111
2106
|
for (let i = 0; i < lines.length; i++) {
|
|
2112
2107
|
if (lines[i].length > 0) {
|
|
2113
2108
|
this.bodyTags.push({
|
|
@@ -2156,6 +2151,15 @@ class VisualEditorComponent {
|
|
|
2156
2151
|
recalculateBodyTags() {
|
|
2157
2152
|
this.bodyTags = BodyTagsExtensions.getBodyTags(this.html, this._options);
|
|
2158
2153
|
}
|
|
2154
|
+
selectTag(data) {
|
|
2155
|
+
this.selectedValue = data.tag;
|
|
2156
|
+
if (data.tag === 'text') {
|
|
2157
|
+
this.startAddingText();
|
|
2158
|
+
}
|
|
2159
|
+
else {
|
|
2160
|
+
this.finishAddingText();
|
|
2161
|
+
}
|
|
2162
|
+
}
|
|
2159
2163
|
ngOnInit() {
|
|
2160
2164
|
this.recalculateBodyTags();
|
|
2161
2165
|
this.tags = DefaultTags.getTags(this.useHtmlRaw);
|
|
@@ -2163,11 +2167,32 @@ class VisualEditorComponent {
|
|
|
2163
2167
|
this.selectedVideoPlayer = this.videoPlayers[0].type;
|
|
2164
2168
|
}
|
|
2165
2169
|
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 }); }
|
|
2166
|
-
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 @if (!isActiveAddText) {\n <button (click)=\"addText()\" class=\"w-100\" mat-stroked-button>\n \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u043A\u0441\u0442\n </button>\n }\n @if (isActiveAddText) {\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 (ngModelChange)=\"modelChanged()\"\n ></textarea>\n </mat-form-field>\n <mat-form-field appearance=\"outline\" class=\"w-100\">\n <mat-label>\u0422\u0435\u0433 \u0434\u043B\u044F \u0442\u0435\u043A\u0441\u0442\u0430</mat-label>\n <mat-select [(ngModel)]=\"textTag\" (ngModelChange)=\"modelChanged()\">\n @for (option of textTagOptions; track option) {\n <mat-option value=\"{{ option.tag }}\">\n {{ option.displayValue }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n <mat-form-field appearance=\"outline\" class=\"w-100\">\n <mat-label>\u0413\u043E\u0440\u0438\u0437\u043E\u043D\u0442\u0430\u043B\u044C\u043D\u043E\u0435 \u0432\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435</mat-label>\n <mat-select [(ngModel)]=\"alignment\" (ngModelChange)=\"modelChanged()\">\n @for (option of alignmentOptions; track option) {\n <mat-option value=\"{{ option.value }}\">\n {{ option.text }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n }\n <div class=\"d-flex flex-nowrap justify-content-end w-100\">\n @if (isActiveAddText) {\n <button (click)=\"addText()\" class=\"w-20\" style=\"margin-right: 10px\" mat-flat-button color=\"primary\">\n \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C\n </button>\n }\n @if (isActiveAddText) {\n <button (click)=\"closeText()\" class=\"w-20\" mat-flat-button color=\"warn\" >\n \u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\n </button>\n }\n </div>\n\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 <mat-form-field class=\"w-100\" appearance=\"outline\">\n <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u0433</mat-label>\n <mat-select [(ngModel)]=\"selectedValue\">\n @for (tag of tags; track tag) {\n <mat-option [value]=\"tag.tag\">\n {{tag.displayValue}}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\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 <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\">\n <mat-card-content>\n <div class=\"d-flex justify-content-between\">\n <div class=\"example-handle\" cdkDragHandle>\n <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\">\n </path>\n <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n </svg>\n </div>\n <div>\n <div class=\"badge\">\n {{tag.tagDescription.displayValue}}\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 style=\"height: 10px;\">\n </div>\n </div>\n }\n </div>\n</div>\n\n\n\n\n\n", styles: [".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{background-color:#50a450;color:#fff;min-width:55px;height:25px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-weight:400}\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"] }] }); }
|
|
2170
|
+
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 === 'text') {\n <div style=\"display: flex; justify-content: space-between\">\n <div style=\"margin-bottom: 22px\">\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 style=\"height: 10px;\">\n </div>\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 @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 @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 @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 @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 @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 @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}.tags{display:flex;gap:10px;flex-wrap:wrap}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:5px 20px;border-radius:20px;background-color:#e0e0e0;color:#212121;transition:.2s ease-in-out}.tag-item.active{background-color:#323e8b;color:#fff}.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"] }] }); }
|
|
2167
2171
|
}
|
|
2168
2172
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: VisualEditorComponent, decorators: [{
|
|
2169
2173
|
type: Component,
|
|
2170
|
-
args: [{ selector: 'croco-visual-editor', standalone: true, imports: [
|
|
2174
|
+
args: [{ selector: 'croco-visual-editor', standalone: true, imports: [
|
|
2175
|
+
MatProgressSpinner,
|
|
2176
|
+
MatCard,
|
|
2177
|
+
MatCardContent,
|
|
2178
|
+
MatButton,
|
|
2179
|
+
MatFormField,
|
|
2180
|
+
MatLabel,
|
|
2181
|
+
MatInput,
|
|
2182
|
+
CdkTextareaAutosize,
|
|
2183
|
+
FormsModule,
|
|
2184
|
+
MatSelect,
|
|
2185
|
+
MatOption,
|
|
2186
|
+
AddFilesBtnComponent,
|
|
2187
|
+
CdkDropList,
|
|
2188
|
+
CdkDrag,
|
|
2189
|
+
CdkDragHandle,
|
|
2190
|
+
MainEditorBlockComponent,
|
|
2191
|
+
MatButtonToggleGroup,
|
|
2192
|
+
MatButtonToggle,
|
|
2193
|
+
NgTemplateOutlet,
|
|
2194
|
+
UpperCasePipe,
|
|
2195
|
+
], 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 === 'text') {\n <div style=\"display: flex; justify-content: space-between\">\n <div style=\"margin-bottom: 22px\">\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 style=\"height: 10px;\">\n </div>\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 @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 @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 @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 @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 @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 @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}.tags{display:flex;gap:10px;flex-wrap:wrap}.tag-item{display:flex;align-items:center;gap:5px;cursor:pointer;padding:5px 20px;border-radius:20px;background-color:#e0e0e0;color:#212121;transition:.2s ease-in-out}.tag-item.active{background-color:#323e8b;color:#fff}.move-icon:hover{opacity:.7}\n"] }]
|
|
2171
2196
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
2172
2197
|
type: Inject,
|
|
2173
2198
|
args: [CrocoHtmlOptionsToken]
|
|
@@ -2265,7 +2290,7 @@ class MainEditorComponent {
|
|
|
2265
2290
|
this.visualEditor.recalculateBodyTags();
|
|
2266
2291
|
}
|
|
2267
2292
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorComponent, deps: [{ token: i1$5.ClipboardService }, { token: i2$3.MatSnackBar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2268
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: MainEditorComponent, isStandalone: true, selector: "croco-html-main-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged" }, viewQueries: [{ propertyName: "visualEditor", first: true, predicate: ["visualEditor"], descendants: true, static: true }], ngImport: i0, template: "<mat-tab-group>\n <mat-tab label=\"\u0412\u0438\u0437\u0443\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0435\u0434\u0430\u043A\u0442\u043E\u0440\">\n\n <div style=\"height: 20px;\"></div>\n\n <croco-visual-editor #visualEditor\n [useHtmlRaw]=\"useHtmlRaw\"\n [html]=\"html\"\n (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n (rendered)=\"visualEditorRenderedHandler()\">\n </croco-visual-editor>\n\n <div style=\"height: 20px;\"></div>\n\n </mat-tab>\n\n <mat-tab label=\"\u0420\u0430\u0437\u043C\u0435\u0442\u043A\u0430\">\n <div style=\"height: 10px;\"></div>\n @if (visualEditorRendered) {\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n </mat-form-field>\n </div>\n }\n\n <button (click)=\"copyMarkUp()\"\n mat-raised-button color=\"primary\">\n \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n </button>\n </mat-tab>\n <mat-tab label=\"\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\">\n <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n <mat-card-content>\n <croco-html-view [html]=\"html\">\n </croco-html-view>\n </mat-card-content>\n </mat-card>\n </mat-tab>\n</mat-tab-group>\n", styles: [".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)}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], 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: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: HtmlViewComponent, selector: "croco-html-view", inputs: ["html"] }] }); }
|
|
2293
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: MainEditorComponent, isStandalone: true, selector: "croco-html-main-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged" }, viewQueries: [{ propertyName: "visualEditor", first: true, predicate: ["visualEditor"], descendants: true, static: true }], ngImport: i0, template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\">\n <mat-tab>\n <ng-template mat-tab-label>\n <svg class=\"custom-icon\" width=\"32\" height=\"26\" viewBox=\"0 0 32 26\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12.75 13.285C13.065 13.6 13.57 13.6 13.88 13.285L14.445 12.72C14.76 12.405 14.76 11.9 14.445 11.59L12.665 9.80001L14.45 8.01501C14.765 7.70001 14.765 7.19501 14.45 6.88501L13.885 6.32001C13.57 6.00501 13.065 6.00501 12.755 6.32001L9.84 9.23501C9.525 9.55001 9.525 10.055 9.84 10.365L12.76 13.28L12.75 13.285ZM17.55 12.72L18.115 13.285C18.43 13.6 18.935 13.6 19.245 13.285L22.16 10.37C22.475 10.055 22.475 9.55001 22.16 9.24001L19.245 6.32501C18.93 6.01001 18.425 6.01001 18.115 6.32501L17.55 6.89001C17.235 7.20501 17.235 7.71001 17.55 8.02001L19.34 9.80001L17.555 11.585C17.24 11.9 17.24 12.405 17.555 12.715L17.55 12.72ZM31.2 21H19.075C19.04 21.99 18.34 22.6 17.44 22.6H14.4C13.465 22.6 12.75 21.725 12.76 21H0.8C0.36 21 0 21.36 0 21.8V22.6C0 24.36 1.44 25.8 3.2 25.8H28.8C30.56 25.8 32 24.36 32 22.6V21.8C32 21.36 31.64 21 31.2 21ZM28.8 2.60001C28.8 1.28001 27.72 0.200012 26.4 0.200012H5.6C4.28 0.200012 3.2 1.28001 3.2 2.60001V19.4H28.8V2.60001ZM25.6 16.2H6.4V3.40001H25.6V16.2Z\"/>\n <rect width=\"32\" height=\"25.6\" fill=\"none\"/>\n </svg>\n </ng-template>\n\n <div style=\"height: 20px;\"></div>\n\n <croco-visual-editor #visualEditor\n [useHtmlRaw]=\"useHtmlRaw\"\n [html]=\"html\"\n (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n (rendered)=\"visualEditorRenderedHandler()\">\n </croco-visual-editor>\n\n <div style=\"height: 20px;\"></div>\n\n </mat-tab>\n\n <mat-tab>\n <ng-template mat-tab-label>\n <svg class=\"custom-icon\" width=\"30\" height=\"24\" viewBox=\"0 0 30 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.0746 23.9757L10.2152 23.146C9.91523 23.0617 9.74648 22.7476 9.83086 22.4476L16.2293 0.406986C16.3137 0.106985 16.6277 -0.0617645 16.9277 0.0226105L19.7871 0.852298C20.0871 0.936673 20.2559 1.25074 20.1715 1.55074L13.773 23.5914C13.684 23.8914 13.3746 24.0648 13.0746 23.9757ZM7.73086 18.7164L9.76992 16.5414C9.98555 16.3117 9.97148 15.946 9.73242 15.7351L5.48555 11.9992L9.73242 8.26324C9.97148 8.0523 9.99023 7.68667 9.76992 7.45699L7.73086 5.28199C7.51992 5.05699 7.16367 5.04292 6.93398 5.25855L0.179297 11.5867C-0.0597656 11.807 -0.0597656 12.1867 0.179297 12.407L6.93398 18.7398C7.16367 18.9554 7.51992 18.946 7.73086 18.7164ZM23.0684 18.7445L29.823 12.4117C30.0621 12.1914 30.0621 11.8117 29.823 11.5914L23.0684 5.25386C22.8434 5.04292 22.4871 5.0523 22.2715 5.2773L20.2324 7.4523C20.0168 7.68199 20.0309 8.04761 20.2699 8.25855L24.5168 11.9992L20.2699 15.7351C20.0309 15.946 20.0121 16.3117 20.2324 16.5414L22.2715 18.7164C22.4824 18.946 22.8387 18.9554 23.0684 18.7445Z\"/>\n </svg>\n </ng-template>\n\n <div style=\"height: 10px;\"></div>\n @if (visualEditorRendered) {\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n </mat-form-field>\n </div>\n }\n\n <button (click)=\"copyMarkUp()\"\n mat-raised-button color=\"primary\">\n \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n </button>\n </mat-tab>\n <mat-tab>\n <ng-template mat-tab-label>\n <svg class=\"custom-icon\" width=\"32\" height=\"30\" viewBox=\"0 0 32 30\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M31.8081 14.1889C28.797 8.31109 22.8303 4.33331 16.0026 4.33331C9.17479 4.33331 3.20813 8.31109 0.197015 14.1889C0.0700503 14.4404 0.00390625 14.7182 0.00390625 15C0.00390625 15.2817 0.0700503 15.5596 0.197015 15.8111C3.20813 21.6889 9.17479 25.6666 16.0026 25.6666C22.8303 25.6666 28.797 21.6889 31.8081 15.8111C31.9351 15.5596 32.0012 15.2817 32.0012 15C32.0012 14.7182 31.9351 14.4404 31.8081 14.1889ZM16.0026 23C14.4203 23 12.8736 22.5308 11.558 21.6517C10.2424 20.7727 9.21704 19.5233 8.61154 18.0614C8.00603 16.5996 7.84761 14.9911 8.15629 13.4393C8.46497 11.8874 9.2269 10.4619 10.3457 9.34313C11.4645 8.22431 12.89 7.46238 14.4418 7.1537C15.9937 6.84502 17.6022 7.00344 19.064 7.60894C20.5258 8.21444 21.7753 9.23982 22.6543 10.5554C23.5334 11.871 24.0026 13.4177 24.0026 15C24.0033 16.0508 23.7969 17.0914 23.3951 18.0623C22.9933 19.0332 22.4041 19.9154 21.6611 20.6585C20.918 21.4015 20.0358 21.9907 19.0649 22.3925C18.094 22.7943 17.0534 23.0007 16.0026 23ZM16.0026 9.66665C15.5267 9.67352 15.0539 9.74453 14.597 9.87776C14.9689 10.3904 15.1459 11.0188 15.096 11.6502C15.0461 12.2815 14.7726 12.8744 14.3248 13.3222C13.877 13.7701 13.2841 14.0435 12.6528 14.0934C12.0214 14.1433 11.393 13.9664 10.8803 13.5944C10.5886 14.6689 10.6413 15.8079 11.0308 16.8509C11.4203 17.8939 12.1271 18.7885 13.0518 19.4088C13.9764 20.029 15.0723 20.3436 16.1851 20.3084C17.2979 20.2732 18.3717 19.8898 19.2552 19.2123C20.1388 18.5348 20.7876 17.5973 21.1103 16.5317C21.4331 15.4661 21.4135 14.3261 21.0544 13.2722C20.6953 12.2183 20.0147 11.3036 19.1085 10.6568C18.2022 10.01 17.116 9.6637 16.0026 9.66665Z\"/>\n <rect width=\"32\" height=\"28.4444\" fill=\"none\"/>\n </svg>\n </ng-template>\n\n\n <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n <mat-card-content>\n <croco-html-view [html]=\"html\">\n </croco-html-view>\n </mat-card-content>\n </mat-card>\n </mat-tab>\n</mat-tab-group>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}.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)}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: ["showMarkUp", "useHtmlRaw", "html"], outputs: ["html", "onHtmlChanged", "rendered"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], 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: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: HtmlViewComponent, selector: "croco-html-view", inputs: ["html"] }] }); }
|
|
2269
2294
|
}
|
|
2270
2295
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MainEditorComponent, decorators: [{
|
|
2271
2296
|
type: Component,
|
|
@@ -2280,8 +2305,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
2280
2305
|
MatButton,
|
|
2281
2306
|
MatCardModule,
|
|
2282
2307
|
XmlTagViewComponent,
|
|
2283
|
-
HtmlViewComponent
|
|
2284
|
-
|
|
2308
|
+
HtmlViewComponent,
|
|
2309
|
+
MatIcon,
|
|
2310
|
+
NgTemplateOutlet
|
|
2311
|
+
], template: "<mat-tab-group mat-stretch-tabs=\"false\" mat-align-tabs=\"start\">\n <mat-tab>\n <ng-template mat-tab-label>\n <svg class=\"custom-icon\" width=\"32\" height=\"26\" viewBox=\"0 0 32 26\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12.75 13.285C13.065 13.6 13.57 13.6 13.88 13.285L14.445 12.72C14.76 12.405 14.76 11.9 14.445 11.59L12.665 9.80001L14.45 8.01501C14.765 7.70001 14.765 7.19501 14.45 6.88501L13.885 6.32001C13.57 6.00501 13.065 6.00501 12.755 6.32001L9.84 9.23501C9.525 9.55001 9.525 10.055 9.84 10.365L12.76 13.28L12.75 13.285ZM17.55 12.72L18.115 13.285C18.43 13.6 18.935 13.6 19.245 13.285L22.16 10.37C22.475 10.055 22.475 9.55001 22.16 9.24001L19.245 6.32501C18.93 6.01001 18.425 6.01001 18.115 6.32501L17.55 6.89001C17.235 7.20501 17.235 7.71001 17.55 8.02001L19.34 9.80001L17.555 11.585C17.24 11.9 17.24 12.405 17.555 12.715L17.55 12.72ZM31.2 21H19.075C19.04 21.99 18.34 22.6 17.44 22.6H14.4C13.465 22.6 12.75 21.725 12.76 21H0.8C0.36 21 0 21.36 0 21.8V22.6C0 24.36 1.44 25.8 3.2 25.8H28.8C30.56 25.8 32 24.36 32 22.6V21.8C32 21.36 31.64 21 31.2 21ZM28.8 2.60001C28.8 1.28001 27.72 0.200012 26.4 0.200012H5.6C4.28 0.200012 3.2 1.28001 3.2 2.60001V19.4H28.8V2.60001ZM25.6 16.2H6.4V3.40001H25.6V16.2Z\"/>\n <rect width=\"32\" height=\"25.6\" fill=\"none\"/>\n </svg>\n </ng-template>\n\n <div style=\"height: 20px;\"></div>\n\n <croco-visual-editor #visualEditor\n [useHtmlRaw]=\"useHtmlRaw\"\n [html]=\"html\"\n (onHtmlChanged)=\"onHtmlChangedHandler($event)\"\n (rendered)=\"visualEditorRenderedHandler()\">\n </croco-visual-editor>\n\n <div style=\"height: 20px;\"></div>\n\n </mat-tab>\n\n <mat-tab>\n <ng-template mat-tab-label>\n <svg class=\"custom-icon\" width=\"30\" height=\"24\" viewBox=\"0 0 30 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.0746 23.9757L10.2152 23.146C9.91523 23.0617 9.74648 22.7476 9.83086 22.4476L16.2293 0.406986C16.3137 0.106985 16.6277 -0.0617645 16.9277 0.0226105L19.7871 0.852298C20.0871 0.936673 20.2559 1.25074 20.1715 1.55074L13.773 23.5914C13.684 23.8914 13.3746 24.0648 13.0746 23.9757ZM7.73086 18.7164L9.76992 16.5414C9.98555 16.3117 9.97148 15.946 9.73242 15.7351L5.48555 11.9992L9.73242 8.26324C9.97148 8.0523 9.99023 7.68667 9.76992 7.45699L7.73086 5.28199C7.51992 5.05699 7.16367 5.04292 6.93398 5.25855L0.179297 11.5867C-0.0597656 11.807 -0.0597656 12.1867 0.179297 12.407L6.93398 18.7398C7.16367 18.9554 7.51992 18.946 7.73086 18.7164ZM23.0684 18.7445L29.823 12.4117C30.0621 12.1914 30.0621 11.8117 29.823 11.5914L23.0684 5.25386C22.8434 5.04292 22.4871 5.0523 22.2715 5.2773L20.2324 7.4523C20.0168 7.68199 20.0309 8.04761 20.2699 8.25855L24.5168 11.9992L20.2699 15.7351C20.0309 15.946 20.0121 16.3117 20.2324 16.5414L22.2715 18.7164C22.4824 18.946 22.8387 18.9554 23.0684 18.7445Z\"/>\n </svg>\n </ng-template>\n\n <div style=\"height: 10px;\"></div>\n @if (visualEditorRendered) {\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434</mat-label>\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n placeholder=\"\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434\" [(ngModel)]=\"html\"\n (ngModelChange)=\"textAreaModelChangedHandler()\"></textarea>\n </mat-form-field>\n </div>\n }\n\n <button (click)=\"copyMarkUp()\"\n mat-raised-button color=\"primary\">\n \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0443\n </button>\n </mat-tab>\n <mat-tab>\n <ng-template mat-tab-label>\n <svg class=\"custom-icon\" width=\"32\" height=\"30\" viewBox=\"0 0 32 30\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M31.8081 14.1889C28.797 8.31109 22.8303 4.33331 16.0026 4.33331C9.17479 4.33331 3.20813 8.31109 0.197015 14.1889C0.0700503 14.4404 0.00390625 14.7182 0.00390625 15C0.00390625 15.2817 0.0700503 15.5596 0.197015 15.8111C3.20813 21.6889 9.17479 25.6666 16.0026 25.6666C22.8303 25.6666 28.797 21.6889 31.8081 15.8111C31.9351 15.5596 32.0012 15.2817 32.0012 15C32.0012 14.7182 31.9351 14.4404 31.8081 14.1889ZM16.0026 23C14.4203 23 12.8736 22.5308 11.558 21.6517C10.2424 20.7727 9.21704 19.5233 8.61154 18.0614C8.00603 16.5996 7.84761 14.9911 8.15629 13.4393C8.46497 11.8874 9.2269 10.4619 10.3457 9.34313C11.4645 8.22431 12.89 7.46238 14.4418 7.1537C15.9937 6.84502 17.6022 7.00344 19.064 7.60894C20.5258 8.21444 21.7753 9.23982 22.6543 10.5554C23.5334 11.871 24.0026 13.4177 24.0026 15C24.0033 16.0508 23.7969 17.0914 23.3951 18.0623C22.9933 19.0332 22.4041 19.9154 21.6611 20.6585C20.918 21.4015 20.0358 21.9907 19.0649 22.3925C18.094 22.7943 17.0534 23.0007 16.0026 23ZM16.0026 9.66665C15.5267 9.67352 15.0539 9.74453 14.597 9.87776C14.9689 10.3904 15.1459 11.0188 15.096 11.6502C15.0461 12.2815 14.7726 12.8744 14.3248 13.3222C13.877 13.7701 13.2841 14.0435 12.6528 14.0934C12.0214 14.1433 11.393 13.9664 10.8803 13.5944C10.5886 14.6689 10.6413 15.8079 11.0308 16.8509C11.4203 17.8939 12.1271 18.7885 13.0518 19.4088C13.9764 20.029 15.0723 20.3436 16.1851 20.3084C17.2979 20.2732 18.3717 19.8898 19.2552 19.2123C20.1388 18.5348 20.7876 17.5973 21.1103 16.5317C21.4331 15.4661 21.4135 14.3261 21.0544 13.2722C20.6953 12.2183 20.0147 11.3036 19.1085 10.6568C18.2022 10.01 17.116 9.6637 16.0026 9.66665Z\"/>\n <rect width=\"32\" height=\"28.4444\" fill=\"none\"/>\n </svg>\n </ng-template>\n\n\n <mat-card style=\"padding: 2px;\" class=\"mat-card\">\n <mat-card-content>\n <croco-html-view [html]=\"html\">\n </croco-html-view>\n </mat-card-content>\n </mat-card>\n </mat-tab>\n</mat-tab-group>\n", styles: [":host ::ng-deep .mdc-tab.mat-mdc-tab{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab .custom-icon{fill:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover{background-color:#f7f7fa}:host ::ng-deep .mdc-tab.mat-mdc-tab:hover .custom-icon{fill:#747ebf}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active{background-color:#323e8b}:host ::ng-deep .mdc-tab.mat-mdc-tab.mdc-tab--active svg.custom-icon{fill:#fff}:host ::ng-deep div.mat-mdc-tab-labels{justify-content:center}.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)}\n"] }]
|
|
2285
2312
|
}], ctorParameters: () => [{ type: i1$5.ClipboardService }, { type: i2$3.MatSnackBar }, { type: i0.ChangeDetectorRef }], propDecorators: { visualEditor: [{
|
|
2286
2313
|
type: ViewChild,
|
|
2287
2314
|
args: ["visualEditor", { static: true }]
|