croco-html 0.2.15 → 0.2.17
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/esm2020/lib/components/editor/visual-editor/visual-editor.component.mjs +3 -3
- package/esm2020/lib/components/xml-tags/html-raw-view/html-raw-view.component.mjs +23 -0
- package/esm2020/lib/components/xml-tags/index.mjs +2 -1
- package/esm2020/lib/components/xml-tags/xml-tag-view/xml-tag-view.component.mjs +4 -3
- package/esm2020/lib/croco-html.module.mjs +48 -47
- package/esm2020/lib/index.mjs +4 -2
- package/fesm2015/croco-html.mjs +44 -24
- package/fesm2015/croco-html.mjs.map +1 -1
- package/fesm2020/croco-html.mjs +44 -24
- package/fesm2020/croco-html.mjs.map +1 -1
- package/lib/components/xml-tags/html-raw-view/html-raw-view.component.d.ts +13 -0
- package/lib/components/xml-tags/index.d.ts +1 -0
- package/lib/croco-html.module.d.ts +49 -48
- package/lib/index.d.ts +3 -2
- package/package.json +1 -1
package/fesm2020/croco-html.mjs
CHANGED
|
@@ -43,35 +43,35 @@ import * as i8 from '@angular/material/chips';
|
|
|
43
43
|
import { MatChipsModule } from '@angular/material/chips';
|
|
44
44
|
import * as i2$3 from '@angular/material/table';
|
|
45
45
|
import { MatTableModule } from '@angular/material/table';
|
|
46
|
-
import * as
|
|
46
|
+
import * as i36 from '@angular/material/tooltip';
|
|
47
47
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
48
|
-
import * as
|
|
48
|
+
import * as i37 from '@angular/material/checkbox';
|
|
49
49
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
50
|
-
import * as
|
|
50
|
+
import * as i49 from '@angular/material/autocomplete';
|
|
51
51
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
52
|
-
import * as
|
|
52
|
+
import * as i44 from '@angular/material/datepicker';
|
|
53
53
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
54
|
-
import * as
|
|
54
|
+
import * as i42 from '@angular/material/dialog';
|
|
55
55
|
import { MatDialogModule } from '@angular/material/dialog';
|
|
56
|
-
import * as
|
|
56
|
+
import * as i27 from '@angular/material/expansion';
|
|
57
57
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
58
|
-
import * as
|
|
58
|
+
import * as i45 from '@angular/material/grid-list';
|
|
59
59
|
import { MatGridListModule } from '@angular/material/grid-list';
|
|
60
|
-
import * as
|
|
60
|
+
import * as i39 from '@angular/material/list';
|
|
61
61
|
import { MatListModule } from '@angular/material/list';
|
|
62
|
-
import * as
|
|
62
|
+
import * as i33 from '@angular/material/menu';
|
|
63
63
|
import { MatMenuModule } from '@angular/material/menu';
|
|
64
|
-
import * as
|
|
64
|
+
import * as i43 from '@angular/material/paginator';
|
|
65
65
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
66
|
-
import * as
|
|
66
|
+
import * as i30 from '@angular/material/progress-bar';
|
|
67
67
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
68
|
-
import * as
|
|
68
|
+
import * as i50 from '@angular/material/sidenav';
|
|
69
69
|
import { MatSidenavModule } from '@angular/material/sidenav';
|
|
70
|
-
import * as
|
|
70
|
+
import * as i46 from '@angular/material/slide-toggle';
|
|
71
71
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
72
|
-
import * as
|
|
72
|
+
import * as i47 from '@angular/material/tree';
|
|
73
73
|
import { MatTreeModule } from '@angular/material/tree';
|
|
74
|
-
import * as
|
|
74
|
+
import * as i25 from '@angular/material/badge';
|
|
75
75
|
import { MatBadgeModule } from '@angular/material/badge';
|
|
76
76
|
|
|
77
77
|
class FileImageTagDataConsts {
|
|
@@ -553,16 +553,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
553
553
|
type: Input
|
|
554
554
|
}] } });
|
|
555
555
|
|
|
556
|
+
class HtmlRawViewComponent {
|
|
557
|
+
constructor(_sanitizer) {
|
|
558
|
+
this._sanitizer = _sanitizer;
|
|
559
|
+
this.rawHtml = "";
|
|
560
|
+
this.isInitialized = false;
|
|
561
|
+
}
|
|
562
|
+
ngOnInit() {
|
|
563
|
+
this._sanitizer.bypassSecurityTrustHtml(this.rawHtml);
|
|
564
|
+
}
|
|
565
|
+
}
|
|
566
|
+
HtmlRawViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HtmlRawViewComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
567
|
+
HtmlRawViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: HtmlRawViewComponent, selector: "croco-html-raw-view", inputs: { rawHtml: "rawHtml" }, ngImport: i0, template: "<div *ngIf=\"isInitialized\" [innerHTML]=\"safeHtml\">\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
568
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HtmlRawViewComponent, decorators: [{
|
|
569
|
+
type: Component,
|
|
570
|
+
args: [{ selector: 'croco-html-raw-view', template: "<div *ngIf=\"isInitialized\" [innerHTML]=\"safeHtml\">\n</div>" }]
|
|
571
|
+
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { rawHtml: [{
|
|
572
|
+
type: Input
|
|
573
|
+
}] } });
|
|
574
|
+
|
|
556
575
|
class XmlTagViewComponent {
|
|
557
576
|
constructor() {
|
|
558
577
|
this.data = [];
|
|
559
578
|
}
|
|
560
579
|
}
|
|
561
580
|
XmlTagViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
562
|
-
XmlTagViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: XmlTagViewComponent, selector: "croco-html-xml-tag-view", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"\">\r\n <div class=\"row\" *ngFor=\"let item of data\">\r\n <div *ngIf=\"item.type === 'text'\">\r\n <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\r\n </div>\r\n <
|
|
581
|
+
XmlTagViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: XmlTagViewComponent, selector: "croco-html-xml-tag-view", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"\">\r\n <div class=\"row\" *ngFor=\"let item of data\">\r\n <div *ngIf=\"item.type === 'text'\">\r\n <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\r\n </div>\r\n <croco-html-raw-view *ngIf=\"item.type === 'html-raw'\" [rawHtml]=\"item.data.innerHTML\">\r\n </croco-html-raw-view>\r\n <div *ngIf=\"item.type === 'h1' || item.type === 'h2' || item.type === 'h3' || item.type === 'h4' || item.type === 'h5' || item.type === 'h6'\">\r\n <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\r\n </div>\r\n <div *ngIf=\"item.type === 'file-image'\">\r\n <img class=\"mx-auto d-block img-fluid\" [src]=\"item.data.src\"/>\r\n </div>\r\n <div *ngIf=\"item.type === 'table'\">\r\n \r\n <croco-html-xml-tag-html-view *ngIf=\"item.validationResult.isSucceeded\" [html]=\"item.bootstrapHtml\">\r\n </croco-html-xml-tag-html-view>\r\n \r\n <app-tutor-baseapiresponse-banner \r\n *ngIf=\"item.validationResult && !item.validationResult.isSucceeded\" \r\n [message]=\"item.validationResult.message\">\r\n </app-tutor-baseapiresponse-banner>\r\n </div>\r\n \r\n <div *ngIf=\"item.type === 'rich-text'\">\r\n <croco-html-xml-tag-text-view [richTextData]=\"item\"></croco-html-xml-tag-text-view>\r\n </div>\r\n <div *ngIf=\"item.type === 'external-video'\">\r\n <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\r\n </div>\r\n <div *ngIf=\"item.type === 'unsupported-tag'\" class=\"red\" style=\"margin-top: 10px;\" >\r\n <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\r\n <span>\r\n {{item.data.tagString}}\r\n </span>\r\n </div>\r\n </div>\r\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: ["html"] }, { kind: "component", type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: ["item"] }, { kind: "component", type: XmlTagHeaderTextViewComponent, selector: "croco-html-xml-tag-header-text-view", inputs: ["item"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }, { kind: "component", type: HtmlRawViewComponent, selector: "croco-html-raw-view", inputs: ["rawHtml"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
563
582
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagViewComponent, decorators: [{
|
|
564
583
|
type: Component,
|
|
565
|
-
args: [{ selector: 'croco-html-xml-tag-view', encapsulation: ViewEncapsulation.None, template: "<div class=\"\">\r\n <div class=\"row\" *ngFor=\"let item of data\">\r\n <div *ngIf=\"item.type === 'text'\">\r\n <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\r\n </div>\r\n <
|
|
584
|
+
args: [{ selector: 'croco-html-xml-tag-view', encapsulation: ViewEncapsulation.None, template: "<div class=\"\">\r\n <div class=\"row\" *ngFor=\"let item of data\">\r\n <div *ngIf=\"item.type === 'text'\">\r\n <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\r\n </div>\r\n <croco-html-raw-view *ngIf=\"item.type === 'html-raw'\" [rawHtml]=\"item.data.innerHTML\">\r\n </croco-html-raw-view>\r\n <div *ngIf=\"item.type === 'h1' || item.type === 'h2' || item.type === 'h3' || item.type === 'h4' || item.type === 'h5' || item.type === 'h6'\">\r\n <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\r\n </div>\r\n <div *ngIf=\"item.type === 'file-image'\">\r\n <img class=\"mx-auto d-block img-fluid\" [src]=\"item.data.src\"/>\r\n </div>\r\n <div *ngIf=\"item.type === 'table'\">\r\n \r\n <croco-html-xml-tag-html-view *ngIf=\"item.validationResult.isSucceeded\" [html]=\"item.bootstrapHtml\">\r\n </croco-html-xml-tag-html-view>\r\n \r\n <app-tutor-baseapiresponse-banner \r\n *ngIf=\"item.validationResult && !item.validationResult.isSucceeded\" \r\n [message]=\"item.validationResult.message\">\r\n </app-tutor-baseapiresponse-banner>\r\n </div>\r\n \r\n <div *ngIf=\"item.type === 'rich-text'\">\r\n <croco-html-xml-tag-text-view [richTextData]=\"item\"></croco-html-xml-tag-text-view>\r\n </div>\r\n <div *ngIf=\"item.type === 'external-video'\">\r\n <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\r\n </div>\r\n <div *ngIf=\"item.type === 'unsupported-tag'\" class=\"red\" style=\"margin-top: 10px;\" >\r\n <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\r\n <span>\r\n {{item.data.tagString}}\r\n </span>\r\n </div>\r\n </div>\r\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"] }]
|
|
566
585
|
}], ctorParameters: function () { return []; }, propDecorators: { data: [{
|
|
567
586
|
type: Input
|
|
568
587
|
}] } });
|
|
@@ -1280,10 +1299,10 @@ class VisualEditorComponent {
|
|
|
1280
1299
|
}
|
|
1281
1300
|
}
|
|
1282
1301
|
VisualEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: VisualEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1283
|
-
VisualEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged", rendered: "rendered" }, ngImport: i0, template: "<div *ngIf=\"isLoading\">\r\n <div>\r\n <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\r\n <div style=\"text-align: center;\">{{loadingText}}</div>\r\n </div>\r\n <div style=\"height: 10px;\"></div>\r\n</div>\r\n\r\n<div [hidden]=\"isLoading\">\r\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n <div *ngFor=\"let tag of bodyTags; let i = index\" cdkDrag>\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"example-handle\" cdkDragHandle>\r\n <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path\r\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\">\r\n </path>\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n </svg>\r\n </div>\r\n <div>\r\n <mat-chip-listbox aria-label=\"Tag display value\">\r\n <mat-chip-option color=\"primary\"\r\n selected>{{tag.tagDescription.displayValue}}</mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n </div>\r\n\r\n <div style=\"height: 15px;\"></div>\r\n\r\n <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\r\n (onTagRemoved)=\"onTagRemovedHandler(i)\">\r\n </croco-html-main-editor-block>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<div [hidden]=\"isLoading\">\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"row d-flex align-items-center\">\r\n <div class=\"col-12\">\r\n <mat-form-field class=\"w-100\" appearance=\"
|
|
1302
|
+
VisualEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: VisualEditorComponent, selector: "croco-visual-editor", inputs: { showMarkUp: "showMarkUp", useHtmlRaw: "useHtmlRaw", html: "html" }, outputs: { html: "html", onHtmlChanged: "onHtmlChanged", rendered: "rendered" }, ngImport: i0, template: "<div *ngIf=\"isLoading\">\r\n <div>\r\n <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\r\n <div style=\"text-align: center;\">{{loadingText}}</div>\r\n </div>\r\n <div style=\"height: 10px;\"></div>\r\n</div>\r\n\r\n<div [hidden]=\"isLoading\">\r\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n <div *ngFor=\"let tag of bodyTags; let i = index\" cdkDrag>\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"example-handle\" cdkDragHandle>\r\n <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path\r\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\">\r\n </path>\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n </svg>\r\n </div>\r\n <div>\r\n <mat-chip-listbox aria-label=\"Tag display value\">\r\n <mat-chip-option color=\"primary\"\r\n selected>{{tag.tagDescription.displayValue}}</mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n </div>\r\n\r\n <div style=\"height: 15px;\"></div>\r\n\r\n <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\r\n (onTagRemoved)=\"onTagRemovedHandler(i)\">\r\n </croco-html-main-editor-block>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<div [hidden]=\"isLoading\">\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"row d-flex align-items-center\">\r\n <div class=\"col-12\">\r\n <mat-form-field class=\"w-100\" appearance=\"outline\">\r\n <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u0433</mat-label>\r\n <mat-select [(ngModel)]=\"selectedValue\">\r\n <mat-option *ngFor=\"let tag of tags\" [value]=\"tag.tag\">\r\n {{tag.displayValue}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-12\">\r\n <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\r\n \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\r\n </button>\r\n </div>\r\n </div>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n</div>\r\n\r\n<div [hidden]=\"isLoading\">\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"row d-flex align-items-center\">\r\n <div class=\"col-12\">\r\n <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\r\n (postFilesStarted)=\"postFilesStartedEventHandler($event)\" class=\"w-100\">\r\n </croco-html-add-files-btn>\r\n </div>\r\n </div>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n</div>", styles: [".example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:white;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:white;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: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i5$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i5$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i10.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: i10.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: i10.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MainEditorBlockComponent, selector: "croco-html-main-editor-block", inputs: ["tag"], outputs: ["onTagSaved", "onTagRemoved"] }, { kind: "component", type: AddFilesBtnComponent, selector: "croco-html-add-files-btn", outputs: ["postFilesStarted", "filesTagsReady"] }] });
|
|
1284
1303
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: VisualEditorComponent, decorators: [{
|
|
1285
1304
|
type: Component,
|
|
1286
|
-
args: [{ selector: 'croco-visual-editor', template: "<div *ngIf=\"isLoading\">\r\n <div>\r\n <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\r\n <div style=\"text-align: center;\">{{loadingText}}</div>\r\n </div>\r\n <div style=\"height: 10px;\"></div>\r\n</div>\r\n\r\n<div [hidden]=\"isLoading\">\r\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n <div *ngFor=\"let tag of bodyTags; let i = index\" cdkDrag>\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"example-handle\" cdkDragHandle>\r\n <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path\r\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\">\r\n </path>\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n </svg>\r\n </div>\r\n <div>\r\n <mat-chip-listbox aria-label=\"Tag display value\">\r\n <mat-chip-option color=\"primary\"\r\n selected>{{tag.tagDescription.displayValue}}</mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n </div>\r\n\r\n <div style=\"height: 15px;\"></div>\r\n\r\n <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\r\n (onTagRemoved)=\"onTagRemovedHandler(i)\">\r\n </croco-html-main-editor-block>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<div [hidden]=\"isLoading\">\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"row d-flex align-items-center\">\r\n <div class=\"col-12\">\r\n <mat-form-field class=\"w-100\" appearance=\"
|
|
1305
|
+
args: [{ selector: 'croco-visual-editor', template: "<div *ngIf=\"isLoading\">\r\n <div>\r\n <mat-spinner style=\"margin:0 auto;\"></mat-spinner>\r\n <div style=\"text-align: center;\">{{loadingText}}</div>\r\n </div>\r\n <div style=\"height: 10px;\"></div>\r\n</div>\r\n\r\n<div [hidden]=\"isLoading\">\r\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n <div *ngFor=\"let tag of bodyTags; let i = index\" cdkDrag>\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"example-handle\" cdkDragHandle>\r\n <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path\r\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\">\r\n </path>\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n </svg>\r\n </div>\r\n <div>\r\n <mat-chip-listbox aria-label=\"Tag display value\">\r\n <mat-chip-option color=\"primary\"\r\n selected>{{tag.tagDescription.displayValue}}</mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n </div>\r\n\r\n <div style=\"height: 15px;\"></div>\r\n\r\n <croco-html-main-editor-block [tag]=\"tag\" (onTagSaved)=\"onTagSavedHandler($event)\"\r\n (onTagRemoved)=\"onTagRemovedHandler(i)\">\r\n </croco-html-main-editor-block>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<div [hidden]=\"isLoading\">\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"row d-flex align-items-center\">\r\n <div class=\"col-12\">\r\n <mat-form-field class=\"w-100\" appearance=\"outline\">\r\n <mat-label>\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u0433</mat-label>\r\n <mat-select [(ngModel)]=\"selectedValue\">\r\n <mat-option *ngFor=\"let tag of tags\" [value]=\"tag.tag\">\r\n {{tag.displayValue}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-12\">\r\n <button (click)=\"addTag()\" class=\"w-100\" mat-stroked-button>\r\n \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u0433\r\n </button>\r\n </div>\r\n </div>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n</div>\r\n\r\n<div [hidden]=\"isLoading\">\r\n <mat-card style=\"margin: 2px;\" class=\"mat-card\">\r\n <mat-card-content>\r\n <div class=\"row d-flex align-items-center\">\r\n <div class=\"col-12\">\r\n <croco-html-add-files-btn (filesTagsReady)=\"filesTagsReadyHandler($event)\"\r\n (postFilesStarted)=\"postFilesStartedEventHandler($event)\" class=\"w-100\">\r\n </croco-html-add-files-btn>\r\n </div>\r\n </div>\r\n </mat-card-content>\r\n </mat-card>\r\n\r\n <div style=\"height: 10px;\">\r\n </div>\r\n</div>", styles: [".example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:white;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:white;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"] }]
|
|
1287
1306
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { showMarkUp: [{
|
|
1288
1307
|
type: Input
|
|
1289
1308
|
}], useHtmlRaw: [{
|
|
@@ -1527,7 +1546,8 @@ const XmlComponents = [
|
|
|
1527
1546
|
XmlTagTextViewComponent,
|
|
1528
1547
|
XmlTagHeaderTextViewComponent,
|
|
1529
1548
|
XmlTagHeaderInnerTextViewComponent,
|
|
1530
|
-
XmlTagExternalVideoComponent
|
|
1549
|
+
XmlTagExternalVideoComponent,
|
|
1550
|
+
HtmlRawViewComponent
|
|
1531
1551
|
];
|
|
1532
1552
|
const CrocoPipes = [
|
|
1533
1553
|
RichTextToHtmlPipe,
|
|
@@ -1577,10 +1597,10 @@ const MaterialModules = [
|
|
|
1577
1597
|
class CrocoHtmlModule {
|
|
1578
1598
|
}
|
|
1579
1599
|
CrocoHtmlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CrocoHtmlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1580
|
-
CrocoHtmlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: CrocoHtmlModule, declarations: [UploadFilesBtnComponent, XmlTagTableViewComponent, XmlTagViewComponent, XmlTagRichTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHeaderInnerTextViewComponent, XmlTagExternalVideoComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ExternalVideoBlockComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, RichTextToHtmlPipe, TagToSpanPipe, ToPreviewPipe, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe], imports: [CommonModule,
|
|
1600
|
+
CrocoHtmlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: CrocoHtmlModule, declarations: [UploadFilesBtnComponent, XmlTagTableViewComponent, XmlTagViewComponent, XmlTagRichTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHeaderInnerTextViewComponent, XmlTagExternalVideoComponent, HtmlRawViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ExternalVideoBlockComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, RichTextToHtmlPipe, TagToSpanPipe, ToPreviewPipe, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe], imports: [CommonModule,
|
|
1581
1601
|
FormsModule,
|
|
1582
1602
|
ReactiveFormsModule,
|
|
1583
|
-
NgSelectModule,
|
|
1603
|
+
NgSelectModule, i25.MatBadgeModule, i2$3.MatTableModule, i27.MatExpansionModule, i3$1.MatFormFieldModule, i2$2.MatSnackBarModule, i30.MatProgressBarModule, i4$1.MatProgressSpinnerModule, i6$2.MatTabsModule, i33.MatMenuModule, i5$2.MatCardModule, i6$1.MatSelectModule, i36.MatTooltipModule, i37.MatCheckboxModule, i8.MatChipsModule, i39.MatListModule, i2.MatButtonModule, i4.MatInputModule, i42.MatDialogModule, i43.MatPaginatorModule, i44.MatDatepickerModule, i45.MatGridListModule, i46.MatSlideToggleModule, i47.MatTreeModule, i7.MatNativeDateModule, i49.MatAutocompleteModule, i50.MatSidenavModule, i5$1.MatIconModule, i10.DragDropModule, i6.MatButtonToggleModule, YouTubePlayerModule], exports: [UploadFilesBtnComponent, XmlTagTableViewComponent, XmlTagViewComponent, XmlTagRichTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHeaderInnerTextViewComponent, XmlTagExternalVideoComponent, HtmlRawViewComponent, MainEditorComponent, FileIdSelectComponent, TextEditorComponent, ExternalVideoBlockComponent, ImageEditorComponent, MainEditorBlockComponent, VisualEditorComponent, AddFilesBtnComponent, HtmlRawEditorComponent, RichTextToHtmlPipe, TagToSpanPipe, ToPreviewPipe, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe] });
|
|
1584
1604
|
CrocoHtmlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CrocoHtmlModule, imports: [CommonModule,
|
|
1585
1605
|
FormsModule,
|
|
1586
1606
|
ReactiveFormsModule,
|
|
@@ -1589,7 +1609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1589
1609
|
type: NgModule,
|
|
1590
1610
|
args: [{
|
|
1591
1611
|
declarations: [
|
|
1592
|
-
...CrocoHtmlDeclarations
|
|
1612
|
+
...CrocoHtmlDeclarations,
|
|
1593
1613
|
],
|
|
1594
1614
|
exports: [
|
|
1595
1615
|
...CrocoHtmlDeclarations,
|
|
@@ -1613,5 +1633,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1613
1633
|
* Generated bundle index. Do not edit.
|
|
1614
1634
|
*/
|
|
1615
1635
|
|
|
1616
|
-
export { AddFilesBtnComponent, AngularMaterialTableMethods, BodyTagsExtensions, BootstrapTableMethods, CrocoHtmlModule, ExternalVideoBlockComponent, ExternalVideoSupportedTypes, ExternalVideoTagDataConsts, FileIdSelectComponent, FileImageTagDataConsts, HtmlRawEditorComponent, ImageEditorComponent, ImageMethods, MainEditorBlockComponent, MainEditorComponent, RichTextToHtmlPipe, TableBuilder, TableMethods, TableTypes, TagToSpanPipe, TextEditorComponent, TextMethods, TextSimpleMethods, TextTag, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe, ToPreviewPipe, UploadFilesBtnComponent, VideoMethods, VisualEditorComponent, XmlExtensions, XmlTagExternalVideoComponent, XmlTagHeaderInnerTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHtmlViewComponent, XmlTagRichTextViewComponent, XmlTagTableViewComponent, XmlTagTextViewComponent, XmlTagViewComponent };
|
|
1636
|
+
export { AddFilesBtnComponent, AngularMaterialTableMethods, BodyTagsExtensions, BootstrapTableMethods, CrocoHtmlModule, ExternalVideoBlockComponent, ExternalVideoSupportedTypes, ExternalVideoTagDataConsts, FileIdSelectComponent, FileImageTagDataConsts, HtmlRawEditorComponent, HtmlRawViewComponent, ImageEditorComponent, ImageMethods, MainEditorBlockComponent, MainEditorComponent, RichTextToHtmlPipe, TableBuilder, TableMethods, TableTypes, TagToSpanPipe, TextEditorComponent, TextMethods, TextSimpleMethods, TextTag, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe, ToPreviewPipe, UploadFilesBtnComponent, VideoMethods, VisualEditorComponent, XmlExtensions, XmlTagExternalVideoComponent, XmlTagHeaderInnerTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHtmlViewComponent, XmlTagRichTextViewComponent, XmlTagTableViewComponent, XmlTagTextViewComponent, XmlTagViewComponent };
|
|
1617
1637
|
//# sourceMappingURL=croco-html.mjs.map
|