croco-html 4.5.4 → 4.5.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/croco-html.mjs +57 -40
- package/fesm2022/croco-html.mjs.map +1 -1
- package/lib/components/editor/main-editor-block/components/defined-custom-editor-block/defined-custom-editor-block.component.d.ts +5 -5
- package/lib/components/editor/main-editor-block/main-editor-block.component.d.ts +7 -10
- package/lib/components/editor/text-editor/text-editor.component.d.ts +8 -5
- package/lib/index.d.ts +2 -2
- package/lib/models/editor-models.d.ts +4 -3
- package/lib/options/index.d.ts +1 -2
- package/package.json +1 -1
package/fesm2022/croco-html.mjs
CHANGED
|
@@ -2202,26 +2202,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2202
2202
|
|
|
2203
2203
|
class TextEditorComponent {
|
|
2204
2204
|
constructor() {
|
|
2205
|
+
this.unsubscribe = new Subject();
|
|
2205
2206
|
this.presentOrEdit = true;
|
|
2206
2207
|
this.TextAlignment = TextAlignment;
|
|
2207
2208
|
this._horizontalAlignment = TextAlignment.Left;
|
|
2208
2209
|
}
|
|
2209
|
-
set
|
|
2210
|
-
this.
|
|
2211
|
-
this.
|
|
2210
|
+
set tagService(data) {
|
|
2211
|
+
this._tagService = data;
|
|
2212
|
+
this._tagService.tag$
|
|
2213
|
+
.pipe(takeUntil(this.unsubscribe))
|
|
2214
|
+
.subscribe(tag => {
|
|
2215
|
+
this._tag = tag;
|
|
2216
|
+
});
|
|
2212
2217
|
this._horizontalAlignment = this._tag.attributes.hasOwnProperty(TextTagDataConsts.HAlign)
|
|
2213
2218
|
? this._tag.attributes[TextTagDataConsts.HAlign]
|
|
2214
2219
|
: TextAlignment.Left;
|
|
2215
2220
|
}
|
|
2216
2221
|
changeData() {
|
|
2217
2222
|
this._tag.attributes[TextTagDataConsts.HAlign] = this._horizontalAlignment;
|
|
2218
|
-
this.
|
|
2223
|
+
this._tagService.tag$.next(this._tag);
|
|
2219
2224
|
}
|
|
2220
2225
|
getInnerHtml() {
|
|
2221
2226
|
return `<${this._tag.tagDescription.tag}>${this._tag.innerHtml}<${this._tag.tagDescription.tag}/>`;
|
|
2222
2227
|
}
|
|
2228
|
+
ngOnDestroy() {
|
|
2229
|
+
this.unsubscribe.next();
|
|
2230
|
+
this.unsubscribe.complete();
|
|
2231
|
+
}
|
|
2223
2232
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2224
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TextEditorComponent, isStandalone: true, selector: "croco-html-text-editor", inputs: {
|
|
2233
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TextEditorComponent, isStandalone: true, selector: "croco-html-text-editor", inputs: { tagService: "tagService" }, ngImport: i0, template: "@if (presentOrEdit) {\n <div>\n <div style=\"height: 10px;\">\n </div>\n @if (_horizontalAlignment === TextAlignment.Left) {\n <div style=\"text-align: left;\" [innerHtml]=\"getInnerHtml()\">\n </div>\n }\n @else if (_horizontalAlignment === TextAlignment.Right) {\n <div style=\"text-align: right;\" [innerHtml]=\"getInnerHtml()\">\n </div>\n }\n @else if (_horizontalAlignment === TextAlignment.Center) {\n <div style=\"text-align: center;\" [innerHtml]=\"getInnerHtml()\">\n </div>\n }\n </div>\n}\n@else {\n <div>\n <div style=\"overflow-x: auto;\">\n <mat-button-toggle-group [(ngModel)]=\"_horizontalAlignment\" (ngModelChange)=\"changeData()\">\n <mat-button-toggle value=\"center\">\n \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\n </mat-button-toggle>\n <mat-button-toggle value=\"left\">\n \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\n </mat-button-toggle>\n <mat-button-toggle value=\"right\">\n \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n <div style=\"height: 10px;\">\n </div>\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430</mat-label>\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\n [(ngModel)]=\"_tag.innerHtml\" (ngModelChange)=\"changeData()\"></textarea>\n </mat-form-field>\n </div>\n </div>\n}\n", dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] }); }
|
|
2225
2234
|
}
|
|
2226
2235
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextEditorComponent, decorators: [{
|
|
2227
2236
|
type: Component,
|
|
@@ -2235,10 +2244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2235
2244
|
MatInput,
|
|
2236
2245
|
CdkTextareaAutosize
|
|
2237
2246
|
], template: "@if (presentOrEdit) {\n <div>\n <div style=\"height: 10px;\">\n </div>\n @if (_horizontalAlignment === TextAlignment.Left) {\n <div style=\"text-align: left;\" [innerHtml]=\"getInnerHtml()\">\n </div>\n }\n @else if (_horizontalAlignment === TextAlignment.Right) {\n <div style=\"text-align: right;\" [innerHtml]=\"getInnerHtml()\">\n </div>\n }\n @else if (_horizontalAlignment === TextAlignment.Center) {\n <div style=\"text-align: center;\" [innerHtml]=\"getInnerHtml()\">\n </div>\n }\n </div>\n}\n@else {\n <div>\n <div style=\"overflow-x: auto;\">\n <mat-button-toggle-group [(ngModel)]=\"_horizontalAlignment\" (ngModelChange)=\"changeData()\">\n <mat-button-toggle value=\"center\">\n \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\n </mat-button-toggle>\n <mat-button-toggle value=\"left\">\n \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\n </mat-button-toggle>\n <mat-button-toggle value=\"right\">\n \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n <div style=\"height: 10px;\">\n </div>\n <div>\n <mat-form-field class=\"w-100\">\n <mat-label>\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430</mat-label>\n <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\n [(ngModel)]=\"_tag.innerHtml\" (ngModelChange)=\"changeData()\"></textarea>\n </mat-form-field>\n </div>\n </div>\n}\n" }]
|
|
2238
|
-
}], propDecorators: {
|
|
2239
|
-
type: Input,
|
|
2240
|
-
args: [{ required: true }]
|
|
2241
|
-
}], presentOrEdit: [{
|
|
2247
|
+
}], propDecorators: { tagService: [{
|
|
2242
2248
|
type: Input,
|
|
2243
2249
|
args: [{ required: true }]
|
|
2244
2250
|
}] } });
|
|
@@ -2317,18 +2323,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2317
2323
|
}] } });
|
|
2318
2324
|
|
|
2319
2325
|
class DefinedCustomEditorBlockComponent {
|
|
2320
|
-
set
|
|
2321
|
-
this.
|
|
2322
|
-
this.
|
|
2326
|
+
set tagService(data) {
|
|
2327
|
+
this._tagService = data;
|
|
2328
|
+
this._tagService.tag$
|
|
2329
|
+
.pipe(takeUntil(this.unsubscribe))
|
|
2330
|
+
.subscribe(tag => {
|
|
2331
|
+
this._tag = tag;
|
|
2332
|
+
});
|
|
2323
2333
|
}
|
|
2324
2334
|
constructor(_options) {
|
|
2325
2335
|
this._options = _options;
|
|
2336
|
+
this.unsubscribe = new Subject();
|
|
2326
2337
|
this.useDynamicComponent = false;
|
|
2327
|
-
this.presentOrEdit = true;
|
|
2328
2338
|
}
|
|
2329
2339
|
getCustomComponent() {
|
|
2330
|
-
const
|
|
2331
|
-
const tagName = tag.tagDescription.tag;
|
|
2340
|
+
const tagName = this._tag.tagDescription.tag;
|
|
2332
2341
|
if (this._options.definedCustomTagViewRenderers.hasOwnProperty(tagName)) {
|
|
2333
2342
|
return this._options.definedCustomTagViewRenderers[tagName].editorComponent;
|
|
2334
2343
|
}
|
|
@@ -2340,15 +2349,16 @@ class DefinedCustomEditorBlockComponent {
|
|
|
2340
2349
|
this.useDynamicComponent = true;
|
|
2341
2350
|
this.viewContainerRef.remove();
|
|
2342
2351
|
this.dynamicContainerRef = this.viewContainerRef.createComponent(component);
|
|
2343
|
-
this.dynamicContainerRef.setInput("
|
|
2344
|
-
this.dynamicContainerRef.setInput("presentOrEdit", this.presentOrEdit);
|
|
2352
|
+
this.dynamicContainerRef.setInput("tagService", this._tagService);
|
|
2345
2353
|
}
|
|
2346
2354
|
}
|
|
2347
2355
|
ngOnDestroy() {
|
|
2348
2356
|
this.dynamicContainerRef.destroy();
|
|
2357
|
+
this.unsubscribe.next();
|
|
2358
|
+
this.unsubscribe.complete();
|
|
2349
2359
|
}
|
|
2350
2360
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DefinedCustomEditorBlockComponent, deps: [{ token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2351
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DefinedCustomEditorBlockComponent, isStandalone: true, selector: "croco-html-defined-custom-editor-block", inputs: {
|
|
2361
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DefinedCustomEditorBlockComponent, isStandalone: true, selector: "croco-html-defined-custom-editor-block", inputs: { tagService: "tagService" }, viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #container>\n @if (!useDynamicComponent) {\n <div>\n \u0420\u0435\u0434\u0430\u043A\u0442\u043E\u0440 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0438 \u0434\u043B\u044F {{_tag.tagDescription.tag}} \u043D\u0435 \u043E\u043F\u0438\u0441\u0430\u043D.\n </div>\n <div>\n \u0423\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u0435 CrocoHtmlOptions.definedCustomTagViewRenderers[{{_tag.tagDescription.tag}}].editorComponent\n </div>\n }\n</ng-container>" }); }
|
|
2352
2362
|
}
|
|
2353
2363
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DefinedCustomEditorBlockComponent, decorators: [{
|
|
2354
2364
|
type: Component,
|
|
@@ -2359,34 +2369,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2359
2369
|
}] }], propDecorators: { viewContainerRef: [{
|
|
2360
2370
|
type: ViewChild,
|
|
2361
2371
|
args: ['container', { read: ViewContainerRef, static: true }]
|
|
2362
|
-
}],
|
|
2363
|
-
type: Input,
|
|
2364
|
-
args: [{ required: true }]
|
|
2365
|
-
}], presentOrEdit: [{
|
|
2372
|
+
}], tagService: [{
|
|
2366
2373
|
type: Input,
|
|
2367
2374
|
args: [{ required: true }]
|
|
2368
2375
|
}] } });
|
|
2369
2376
|
|
|
2377
|
+
class TagEditorService {
|
|
2378
|
+
constructor() {
|
|
2379
|
+
this.tag$ = new BehaviorSubject(null);
|
|
2380
|
+
this.presentOrEdit$ = new BehaviorSubject(true);
|
|
2381
|
+
}
|
|
2382
|
+
}
|
|
2383
|
+
|
|
2370
2384
|
class MainEditorBlockComponent {
|
|
2371
2385
|
set tag(data) {
|
|
2372
2386
|
this._tag = data;
|
|
2373
|
-
this.
|
|
2374
|
-
this.
|
|
2387
|
+
this._tagService = new TagEditorService();
|
|
2388
|
+
this._tagService.tag$.next(this._tag);
|
|
2389
|
+
this._tagService.presentOrEdit$
|
|
2390
|
+
.pipe(takeUntil(this.unsubscribe))
|
|
2391
|
+
.subscribe(val => {
|
|
2392
|
+
this.presentOrEdit = val;
|
|
2393
|
+
});
|
|
2375
2394
|
}
|
|
2376
2395
|
constructor(_options) {
|
|
2377
2396
|
this._options = _options;
|
|
2378
2397
|
this.textTags = TextTags.allTextTags;
|
|
2398
|
+
this.unsubscribe = new Subject();
|
|
2379
2399
|
this.presentOrEdit = true;
|
|
2380
2400
|
this.onTagSaved = new EventEmitter();
|
|
2381
2401
|
this.onTagRemoved = new EventEmitter();
|
|
2382
2402
|
}
|
|
2383
|
-
tagUpdatedHandler(tag) {
|
|
2384
|
-
this._tagStorage.set(tag);
|
|
2385
|
-
}
|
|
2386
2403
|
save() {
|
|
2387
|
-
const tag = this.
|
|
2404
|
+
const tag = this._tagService.tag$.value;
|
|
2405
|
+
;
|
|
2388
2406
|
this.onTagSaved.emit(tag);
|
|
2389
|
-
this.presentOrEdit
|
|
2407
|
+
this._tagService.presentOrEdit$.next(true);
|
|
2408
|
+
}
|
|
2409
|
+
cancelSave() {
|
|
2410
|
+
this._tagService.presentOrEdit$.next(false);
|
|
2390
2411
|
}
|
|
2391
2412
|
isDefinedCustomTag() {
|
|
2392
2413
|
const tagName = this._tag.tagDescription.tag;
|
|
@@ -2398,8 +2419,12 @@ class MainEditorBlockComponent {
|
|
|
2398
2419
|
deleteItem() {
|
|
2399
2420
|
this.onTagRemoved.emit(this.tag);
|
|
2400
2421
|
}
|
|
2422
|
+
ngOnDestroy() {
|
|
2423
|
+
this.unsubscribe.next();
|
|
2424
|
+
this.unsubscribe.complete();
|
|
2425
|
+
}
|
|
2401
2426
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MainEditorBlockComponent, deps: [{ token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2402
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 [
|
|
2427
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 [tagService]=\"_tagService\">\n </croco-html-text-editor>\n </div>\n }\n @else if (_tag.tagDescription.tag === 'file-image') {\n <div>\n <croco-html-image-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n </croco-html-image-editor>\n </div>\n }\n @else if (_tag.tagDescription.tag === 'custom-widget') {\n <div>\n <croco-html-custom-widget-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n </croco-html-custom-widget-editor>\n </div>\n }\n @else if (_tag.tagDescription.tag === 'external-video') {\n <div>\n <croco-html-external-video-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n </croco-html-external-video-editor>\n </div>\n }\n @else if (_tag.tagDescription.tag === 'download-file-button') {\n <div>\n <croco-html-download-file-button-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n </croco-html-download-file-button-editor>\n </div>\n }\n @else if (_tag.tagDescription.tag === 'button') {\n <div>\n <croco-html-button-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n </croco-html-button-editor>\n </div>\n }\n @else if (_tag.tagDescription.tag === 'html-raw') {\n <div>\n <croco-html-html-raw-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n </croco-html-html-raw-editor>\n </div>\n }\n @else if (isDefinedCustomTag()) {\n <div>\n <croco-html-defined-custom-editor-block [tagService]=\"_tagService\"></croco-html-defined-custom-editor-block>\n </div>\n }\n @else {\n <div>\n {{_tag.tagDescription.tag}} \u043D\u0435 \u043F\u043E\u043A\u0430\u0437\u0430\u043D\n </div>\n <div>\n {{_tag | json}}\n </div>\n }\n\n </div>\n\n <div class=\"d-flex justify-content-between\">\n <div class=\"d-flex justify-content-end align-self-center\">\n <div style=\"margin-left: 16px;min-width: 96px\">\n @if (presentOrEdit) {\n <button (click)=\"cancelSave()\" 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\"\n 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\"\n fill=\"#323E8B\" />\n </svg>\n </button>\n }\n @else {\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\">\n <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\"\n 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\"\n fill=\"#F96666\" />\n </svg>\n </button>\n </div>\n </div>\n\n </div>\n</div>", styles: [".main-editor-block{display:flex;justify-content:space-between}.editor-container{flex-grow:1}@media screen and (max-width: 700px){.main-editor-block{display:flex;flex-direction:column}}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: ["tagService"] }, { kind: "component", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: DownloadFileButtonEditorComponent, selector: "croco-html-download-file-button-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: ExternalVideoEditorComponent, selector: "croco-html-external-video-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: ButtonEditorComponent, selector: "croco-html-button-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "component", type: CustomWidgetEditorComponent, selector: "croco-html-custom-widget-editor", inputs: ["tag", "presentOrEdit"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "component", type: DefinedCustomEditorBlockComponent, selector: "croco-html-defined-custom-editor-block", inputs: ["tagService"] }] }); }
|
|
2403
2428
|
}
|
|
2404
2429
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MainEditorBlockComponent, decorators: [{
|
|
2405
2430
|
type: Component,
|
|
@@ -2414,7 +2439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2414
2439
|
CustomWidgetEditorComponent,
|
|
2415
2440
|
JsonPipe,
|
|
2416
2441
|
DefinedCustomEditorBlockComponent
|
|
2417
|
-
], 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 [
|
|
2442
|
+
], 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 [tagService]=\"_tagService\">\n </croco-html-text-editor>\n </div>\n }\n @else if (_tag.tagDescription.tag === 'file-image') {\n <div>\n <croco-html-image-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n </croco-html-image-editor>\n </div>\n }\n @else if (_tag.tagDescription.tag === 'custom-widget') {\n <div>\n <croco-html-custom-widget-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n </croco-html-custom-widget-editor>\n </div>\n }\n @else if (_tag.tagDescription.tag === 'external-video') {\n <div>\n <croco-html-external-video-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n </croco-html-external-video-editor>\n </div>\n }\n @else if (_tag.tagDescription.tag === 'download-file-button') {\n <div>\n <croco-html-download-file-button-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n </croco-html-download-file-button-editor>\n </div>\n }\n @else if (_tag.tagDescription.tag === 'button') {\n <div>\n <croco-html-button-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n </croco-html-button-editor>\n </div>\n }\n @else if (_tag.tagDescription.tag === 'html-raw') {\n <div>\n <croco-html-html-raw-editor [presentOrEdit]=\"presentOrEdit\" [tag]=\"_tag\">\n </croco-html-html-raw-editor>\n </div>\n }\n @else if (isDefinedCustomTag()) {\n <div>\n <croco-html-defined-custom-editor-block [tagService]=\"_tagService\"></croco-html-defined-custom-editor-block>\n </div>\n }\n @else {\n <div>\n {{_tag.tagDescription.tag}} \u043D\u0435 \u043F\u043E\u043A\u0430\u0437\u0430\u043D\n </div>\n <div>\n {{_tag | json}}\n </div>\n }\n\n </div>\n\n <div class=\"d-flex justify-content-between\">\n <div class=\"d-flex justify-content-end align-self-center\">\n <div style=\"margin-left: 16px;min-width: 96px\">\n @if (presentOrEdit) {\n <button (click)=\"cancelSave()\" 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\"\n 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\"\n fill=\"#323E8B\" />\n </svg>\n </button>\n }\n @else {\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\">\n <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\"\n 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\"\n fill=\"#F96666\" />\n </svg>\n </button>\n </div>\n </div>\n\n </div>\n</div>", styles: [".main-editor-block{display:flex;justify-content:space-between}.editor-container{flex-grow:1}@media screen and (max-width: 700px){.main-editor-block{display:flex;flex-direction:column}}\n"] }]
|
|
2418
2443
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2419
2444
|
type: Inject,
|
|
2420
2445
|
args: [CrocoHtmlOptionsToken]
|
|
@@ -2426,14 +2451,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2426
2451
|
}], onTagRemoved: [{
|
|
2427
2452
|
type: Output
|
|
2428
2453
|
}] } });
|
|
2429
|
-
class SingleTagStorage {
|
|
2430
|
-
set(tag) {
|
|
2431
|
-
this._tag = tag;
|
|
2432
|
-
}
|
|
2433
|
-
get() {
|
|
2434
|
-
return this._tag;
|
|
2435
|
-
}
|
|
2436
|
-
}
|
|
2437
2454
|
|
|
2438
2455
|
class SpriteIconPathPipe {
|
|
2439
2456
|
transform(id) {
|
|
@@ -3049,5 +3066,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3049
3066
|
* Generated bundle index. Do not edit.
|
|
3050
3067
|
*/
|
|
3051
3068
|
|
|
3052
|
-
export { AddFilesBtnComponent, AngularMaterialTableMethods, BodyTagsExtensions, BootstrapTableMethods, ButtonTagDataConsts, ButtonTagService, CrocoHtmlFileOptionsService, CrocoHtmlModule, CrocoHtmlOptionsToken, CustomWidgetEditorComponent, CustomWidgetIconComponent, CustomWidgetTagDataConsts, CustomWidgetTagService, DefinedCustomEditorBlockComponent, DefinedCustomTagViewComponent, DownloadButtonTagDataConsts, DownloadButtonTagService, ExternalVideoEditorComponent, ExternalVideoPlayers, ExternalVideoSupportedTypes, ExternalVideoTagDataConsts, ExternalVideoTagService, FileIdSelectComponent, FileImageTagDataConsts, FileImageTagService, FileImageTagViewComponent, FileType, HtmlRawEditorComponent, HtmlRawTagDataConsts, HtmlRawTagService, HtmlRawViewComponent, HtmlViewComponent, HtmlViewController, ImageEditorComponent, ImageMethods, MainEditorBlockComponent, MainEditorComponent,
|
|
3069
|
+
export { AddFilesBtnComponent, AngularMaterialTableMethods, BodyTagsExtensions, BootstrapTableMethods, ButtonTagDataConsts, ButtonTagService, CrocoHtmlFileOptionsService, CrocoHtmlModule, CrocoHtmlOptionsToken, CustomWidgetEditorComponent, CustomWidgetIconComponent, CustomWidgetTagDataConsts, CustomWidgetTagService, DefinedCustomEditorBlockComponent, DefinedCustomTagViewComponent, DownloadButtonTagDataConsts, DownloadButtonTagService, ExternalVideoEditorComponent, ExternalVideoPlayers, ExternalVideoSupportedTypes, ExternalVideoTagDataConsts, ExternalVideoTagService, FileIdSelectComponent, FileImageTagDataConsts, FileImageTagService, FileImageTagViewComponent, FileType, HtmlRawEditorComponent, HtmlRawTagDataConsts, HtmlRawTagService, HtmlRawViewComponent, HtmlViewComponent, HtmlViewController, ImageEditorComponent, ImageMethods, MainEditorBlockComponent, MainEditorComponent, TableBuilder, TableMethods, TableTypes, TagEditorService, TagToSpanPipe, TextAlignment, TextEditorComponent, TextSimpleMethods, TextTag, TextTagDataConsts, TextTagHtmlMarkupTagService, TextTags, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe, ToPreviewPipe, UploadFilesBtnComponent, VisualEditorComponent, XmlExtensions, XmlTagCustomWidgetComponent, XmlTagExternalVideoComponent, XmlTagHeaderInnerTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHtmlViewComponent, XmlTagTextViewComponent, XmlTagViewComponent };
|
|
3053
3070
|
//# sourceMappingURL=croco-html.mjs.map
|