@kolkov/angular-editor 3.0.0-beta.1 → 3.0.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.
Files changed (35) hide show
  1. package/CHANGELOG.md +57 -1
  2. package/README.md +75 -16
  3. package/assets/icons/icons.svg +2 -2
  4. package/fesm2022/kolkov-angular-editor.mjs +1360 -0
  5. package/fesm2022/kolkov-angular-editor.mjs.map +1 -0
  6. package/index.d.ts +412 -0
  7. package/package.json +10 -16
  8. package/themes/default.scss +22 -0
  9. package/esm2020/kolkov-angular-editor.mjs +0 -5
  10. package/esm2020/lib/ae-button/ae-button.component.mjs +0 -21
  11. package/esm2020/lib/ae-select/ae-select.component.mjs +0 -185
  12. package/esm2020/lib/ae-toolbar-set/ae-toolbar-set.component.mjs +0 -14
  13. package/esm2020/lib/angular-editor-toolbar.component.mjs +0 -365
  14. package/esm2020/lib/angular-editor.component.mjs +0 -415
  15. package/esm2020/lib/angular-editor.module.mjs +0 -27
  16. package/esm2020/lib/angular-editor.service.mjs +0 -275
  17. package/esm2020/lib/config.mjs +0 -36
  18. package/esm2020/lib/utils.mjs +0 -4
  19. package/esm2020/public-api.mjs +0 -11
  20. package/fesm2015/kolkov-angular-editor.mjs +0 -1324
  21. package/fesm2015/kolkov-angular-editor.mjs.map +0 -1
  22. package/fesm2020/kolkov-angular-editor.mjs +0 -1318
  23. package/fesm2020/kolkov-angular-editor.mjs.map +0 -1
  24. package/kolkov-angular-editor.d.ts +0 -5
  25. package/lib/ae-button/ae-button.component.d.ts +0 -7
  26. package/lib/ae-select/ae-select.component.d.ts +0 -46
  27. package/lib/ae-toolbar-set/ae-toolbar-set.component.d.ts +0 -6
  28. package/lib/angular-editor-toolbar.component.d.ts +0 -97
  29. package/lib/angular-editor.component.d.ts +0 -133
  30. package/lib/angular-editor.module.d.ts +0 -13
  31. package/lib/angular-editor.service.d.ts +0 -87
  32. package/lib/config.d.ts +0 -39
  33. package/lib/utils.d.ts +0 -1
  34. package/public-api.d.ts +0 -8
  35. package/src/lib/style.scss +0 -290
@@ -1,1318 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { Injectable, Inject, Component, ViewEncapsulation, Input, EventEmitter, forwardRef, HostBinding, Output, ViewChild, HostListener, SecurityContext, Attribute, ContentChild, NgModule } from '@angular/core';
3
- import * as i1$1 from '@angular/common';
4
- import { DOCUMENT, CommonModule } from '@angular/common';
5
- import * as i1 from '@angular/common/http';
6
- import * as i6 from '@angular/forms';
7
- import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
8
- import * as i2 from '@angular/platform-browser';
9
-
10
- class AngularEditorService {
11
- constructor(http, doc) {
12
- this.http = http;
13
- this.doc = doc;
14
- /**
15
- * save selection when the editor is focussed out
16
- */
17
- this.saveSelection = () => {
18
- if (this.doc.getSelection) {
19
- const sel = this.doc.getSelection();
20
- if (sel.getRangeAt && sel.rangeCount) {
21
- this.savedSelection = sel.getRangeAt(0);
22
- this.selectedText = sel.toString();
23
- }
24
- }
25
- else if (this.doc.getSelection && this.doc.createRange) {
26
- this.savedSelection = document.createRange();
27
- }
28
- else {
29
- this.savedSelection = null;
30
- }
31
- };
32
- }
33
- /**
34
- * Executed command from editor header buttons exclude toggleEditorMode
35
- * @param command string from triggerCommand
36
- * @param value
37
- */
38
- executeCommand(command, value) {
39
- const commands = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre'];
40
- if (commands.includes(command)) {
41
- this.doc.execCommand('formatBlock', false, command);
42
- return;
43
- }
44
- this.doc.execCommand(command, false, value);
45
- }
46
- /**
47
- * Create URL link
48
- * @param url string from UI prompt
49
- */
50
- createLink(url) {
51
- if (!url.includes('http')) {
52
- this.doc.execCommand('createlink', false, url);
53
- }
54
- else {
55
- const newUrl = '<a href="' + url + '" target="_blank">' + this.selectedText + '</a>';
56
- this.insertHtml(newUrl);
57
- }
58
- }
59
- /**
60
- * insert color either font or background
61
- *
62
- * @param color color to be inserted
63
- * @param where where the color has to be inserted either text/background
64
- */
65
- insertColor(color, where) {
66
- const restored = this.restoreSelection();
67
- if (restored) {
68
- if (where === 'textColor') {
69
- this.doc.execCommand('foreColor', false, color);
70
- }
71
- else {
72
- this.doc.execCommand('hiliteColor', false, color);
73
- }
74
- }
75
- }
76
- /**
77
- * Set font name
78
- * @param fontName string
79
- */
80
- setFontName(fontName) {
81
- this.doc.execCommand('fontName', false, fontName);
82
- }
83
- /**
84
- * Set font size
85
- * @param fontSize string
86
- */
87
- setFontSize(fontSize) {
88
- this.doc.execCommand('fontSize', false, fontSize);
89
- }
90
- /**
91
- * Create raw HTML
92
- * @param html HTML string
93
- */
94
- insertHtml(html) {
95
- const isHTMLInserted = this.doc.execCommand('insertHTML', false, html);
96
- if (!isHTMLInserted) {
97
- throw new Error('Unable to perform the operation');
98
- }
99
- }
100
- /**
101
- * restore selection when the editor is focused in
102
- *
103
- * saved selection when the editor is focused out
104
- */
105
- restoreSelection() {
106
- if (this.savedSelection) {
107
- if (this.doc.getSelection) {
108
- const sel = this.doc.getSelection();
109
- sel.removeAllRanges();
110
- sel.addRange(this.savedSelection);
111
- return true;
112
- }
113
- else if (this.doc.getSelection /*&& this.savedSelection.select*/) {
114
- // this.savedSelection.select();
115
- return true;
116
- }
117
- }
118
- else {
119
- return false;
120
- }
121
- }
122
- /**
123
- * setTimeout used for execute 'saveSelection' method in next event loop iteration
124
- */
125
- executeInNextQueueIteration(callbackFn, timeout = 1e2) {
126
- setTimeout(callbackFn, timeout);
127
- }
128
- /** check any selection is made or not */
129
- checkSelection() {
130
- const selectedText = this.savedSelection.toString();
131
- if (selectedText.length === 0) {
132
- throw new Error('No Selection Made');
133
- }
134
- return true;
135
- }
136
- /**
137
- * Upload file to uploadUrl
138
- * @param file The file
139
- */
140
- uploadImage(file) {
141
- const uploadData = new FormData();
142
- uploadData.append('file', file, file.name);
143
- return this.http.post(this.uploadUrl, uploadData, {
144
- reportProgress: true,
145
- observe: 'events',
146
- withCredentials: this.uploadWithCredentials,
147
- });
148
- }
149
- /**
150
- * Insert image with Url
151
- * @param imageUrl The imageUrl.
152
- */
153
- insertImage(imageUrl) {
154
- this.doc.execCommand('insertImage', false, imageUrl);
155
- }
156
- setDefaultParagraphSeparator(separator) {
157
- this.doc.execCommand('defaultParagraphSeparator', false, separator);
158
- }
159
- createCustomClass(customClass) {
160
- let newTag = this.selectedText;
161
- if (customClass) {
162
- const tagName = customClass.tag ? customClass.tag : 'span';
163
- newTag = '<' + tagName + ' class="' + customClass.class + '">' + this.selectedText + '</' + tagName + '>';
164
- }
165
- this.insertHtml(newTag);
166
- }
167
- insertVideo(videoUrl) {
168
- if (videoUrl.match('www.youtube.com')) {
169
- this.insertYouTubeVideoTag(videoUrl);
170
- }
171
- if (videoUrl.match('vimeo.com')) {
172
- this.insertVimeoVideoTag(videoUrl);
173
- }
174
- }
175
- insertYouTubeVideoTag(videoUrl) {
176
- const id = videoUrl.split('v=')[1];
177
- const imageUrl = `https://img.youtube.com/vi/${id}/0.jpg`;
178
- const thumbnail = `
179
- <div style='position: relative'>
180
- <a href='${videoUrl}' target='_blank'>
181
- <img src="${imageUrl}" alt="click to watch"/>
182
- <img style='position: absolute; left:200px; top:140px'
183
- src="https://img.icons8.com/color/96/000000/youtube-play.png"/>
184
- </a>
185
- </div>`;
186
- this.insertHtml(thumbnail);
187
- }
188
- insertVimeoVideoTag(videoUrl) {
189
- const sub = this.http.get(`https://vimeo.com/api/oembed.json?url=${videoUrl}`).subscribe(data => {
190
- const imageUrl = data.thumbnail_url_with_play_button;
191
- const thumbnail = `<div>
192
- <a href='${videoUrl}' target='_blank'>
193
- <img src="${imageUrl}" alt="${data.title}"/>
194
- </a>
195
- </div>`;
196
- this.insertHtml(thumbnail);
197
- sub.unsubscribe();
198
- });
199
- }
200
- nextNode(node) {
201
- if (node.hasChildNodes()) {
202
- return node.firstChild;
203
- }
204
- else {
205
- while (node && !node.nextSibling) {
206
- node = node.parentNode;
207
- }
208
- if (!node) {
209
- return null;
210
- }
211
- return node.nextSibling;
212
- }
213
- }
214
- getRangeSelectedNodes(range, includePartiallySelectedContainers) {
215
- let node = range.startContainer;
216
- const endNode = range.endContainer;
217
- let rangeNodes = [];
218
- // Special case for a range that is contained within a single node
219
- if (node === endNode) {
220
- rangeNodes = [node];
221
- }
222
- else {
223
- // Iterate nodes until we hit the end container
224
- while (node && node !== endNode) {
225
- rangeNodes.push(node = this.nextNode(node));
226
- }
227
- // Add partially selected nodes at the start of the range
228
- node = range.startContainer;
229
- while (node && node !== range.commonAncestorContainer) {
230
- rangeNodes.unshift(node);
231
- node = node.parentNode;
232
- }
233
- }
234
- // Add ancestors of the range container, if required
235
- if (includePartiallySelectedContainers) {
236
- node = range.commonAncestorContainer;
237
- while (node) {
238
- rangeNodes.push(node);
239
- node = node.parentNode;
240
- }
241
- }
242
- return rangeNodes;
243
- }
244
- getSelectedNodes() {
245
- const nodes = [];
246
- if (this.doc.getSelection) {
247
- const sel = this.doc.getSelection();
248
- for (let i = 0, len = sel.rangeCount; i < len; ++i) {
249
- nodes.push.apply(nodes, this.getRangeSelectedNodes(sel.getRangeAt(i), true));
250
- }
251
- }
252
- return nodes;
253
- }
254
- replaceWithOwnChildren(el) {
255
- const parent = el.parentNode;
256
- while (el.hasChildNodes()) {
257
- parent.insertBefore(el.firstChild, el);
258
- }
259
- parent.removeChild(el);
260
- }
261
- removeSelectedElements(tagNames) {
262
- const tagNamesArray = tagNames.toLowerCase().split(',');
263
- this.getSelectedNodes().forEach((node) => {
264
- if (node.nodeType === 1 &&
265
- tagNamesArray.indexOf(node.tagName.toLowerCase()) > -1) {
266
- // Remove the node and replace it with its children
267
- this.replaceWithOwnChildren(node);
268
- }
269
- });
270
- }
271
- }
272
- AngularEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorService, deps: [{ token: i1.HttpClient }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
273
- AngularEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorService });
274
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorService, decorators: [{
275
- type: Injectable
276
- }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: undefined, decorators: [{
277
- type: Inject,
278
- args: [DOCUMENT]
279
- }] }]; } });
280
-
281
- const angularEditorConfig = {
282
- editable: true,
283
- spellcheck: true,
284
- height: 'auto',
285
- minHeight: '0',
286
- maxHeight: 'auto',
287
- width: 'auto',
288
- minWidth: '0',
289
- translate: 'yes',
290
- enableToolbar: true,
291
- showToolbar: true,
292
- placeholder: 'Enter text here...',
293
- defaultParagraphSeparator: '',
294
- defaultFontName: '',
295
- defaultFontSize: '',
296
- fonts: [
297
- { class: 'arial', name: 'Arial' },
298
- { class: 'times-new-roman', name: 'Times New Roman' },
299
- { class: 'calibri', name: 'Calibri' },
300
- { class: 'comic-sans-ms', name: 'Comic Sans MS' }
301
- ],
302
- uploadUrl: 'v1/image',
303
- uploadWithCredentials: false,
304
- sanitize: true,
305
- toolbarPosition: 'top',
306
- outline: true,
307
- /*toolbarHiddenButtons: [
308
- ['bold', 'italic', 'underline', 'strikeThrough', 'superscript', 'subscript'],
309
- ['heading', 'fontName', 'fontSize', 'color'],
310
- ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'indent', 'outdent'],
311
- ['cut', 'copy', 'delete', 'removeFormat', 'undo', 'redo'],
312
- ['paragraph', 'blockquote', 'removeBlockquote', 'horizontalLine', 'orderedList', 'unorderedList'],
313
- ['link', 'unlink', 'image', 'video']
314
- ]*/
315
- };
316
-
317
- function isDefined(value) {
318
- return value !== undefined && value !== null;
319
- }
320
-
321
- class AeToolbarSetComponent {
322
- constructor() { }
323
- }
324
- AeToolbarSetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeToolbarSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
325
- AeToolbarSetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AeToolbarSetComponent, selector: "ae-toolbar-set, [aeToolbarSet]", host: { classAttribute: "angular-editor-toolbar-set" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], encapsulation: i0.ViewEncapsulation.None });
326
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeToolbarSetComponent, decorators: [{
327
- type: Component,
328
- args: [{ selector: 'ae-toolbar-set, [aeToolbarSet]', encapsulation: ViewEncapsulation.None, host: {
329
- 'class': 'angular-editor-toolbar-set'
330
- }, template: "<ng-content></ng-content>\n", styles: [""] }]
331
- }], ctorParameters: function () { return []; } });
332
-
333
- class AeButtonComponent {
334
- constructor() {
335
- this.iconName = '';
336
- }
337
- }
338
- AeButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
339
- AeButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AeButtonComponent, selector: "ae-button, button[aeButton]", inputs: { iconName: "iconName" }, host: { properties: { "tabIndex": "-1", "type": "\"button\"" }, classAttribute: "angular-editor-button" }, ngImport: i0, template: "<ng-container *ngIf=\"iconName; else contentTemplate\">\n <svg>\n <use [attr.href]=\"'assets/ae-icons/icons.svg#' + iconName\" [attr.xlink:href]=\"'assets/ae-icons/icons.svg#' + iconName\"></use>\n </svg>\n</ng-container>\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["a{cursor:pointer}.angular-editor-textarea{min-height:150px;overflow:auto;margin-top:5px;resize:vertical}.angular-editor-textarea:after{content:\"\";position:absolute;bottom:0;right:0;display:block;width:8px;height:8px;cursor:nwse-resize;background-color:#ffffff80}.angular-editor-toolbar{font:100 14px/15px Roboto,Arial,sans-serif;background-color:#f5f5f5;font-size:.8rem;padding:.2rem;border:1px solid #ddd;display:flex;flex-wrap:wrap;gap:4px}.angular-editor-toolbar .angular-editor-toolbar-set{display:flex;gap:1px;width:fit-content;vertical-align:baseline}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button{background-color:#fff;vertical-align:middle;border:1px solid #ddd;padding:.4rem;float:left;width:2rem;height:2rem}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:focus,.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.focus{outline:0}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled>.color-label{pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled>.color-label.foreground :after{background:#555555}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled>.color-label.background{background:#555555}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.active{background:#fff5b9}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.active:hover{background-color:#fffa98}.angular-editor-toolbar .angular-editor-toolbar-set select{font-size:11px;width:90px;vertical-align:middle;background-color:transparent;border:.5px solid rgba(255,255,255,0);border-radius:5px;outline:none;padding:.4rem;cursor:pointer}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading{display:inline-block;width:90px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-heading optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading option{border:1px solid;background-color:#fff}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .default{font-size:16px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h1{font-size:24px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h2{font-size:20px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h3{font-size:16px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h4{font-size:15px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h5{font-size:14px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h6{font-size:13px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .div,.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .pre{font-size:12px}}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .select-font{display:inline-block;width:90px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-font optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font option{border:1px solid;background-color:#fff}}.angular-editor-toolbar .angular-editor-toolbar-set .select-font:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-font:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size{display:inline-block;width:50px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size option{border:1px solid;background-color:#fff}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size1{font-size:10px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size2{font-size:12px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size3{font-size:14px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size4{font-size:16px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size5{font-size:18px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size6{font-size:20px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size7{font-size:22px}}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style{display:inline-block;width:90px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style option{border:1px solid;background-color:#fff}}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .color-label{position:relative;cursor:pointer}.angular-editor-toolbar .angular-editor-toolbar-set .background{font-size:smaller;background:#1b1b1b;color:#fff;padding:3px}.angular-editor-toolbar .angular-editor-toolbar-set .foreground :after{position:absolute;content:\"\";inset:auto auto -3px -1px;width:15px;height:2px;z-index:0;background:#1b1b1b}.select-button{display:inline-block}.select-button.disabled{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
340
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeButtonComponent, decorators: [{
341
- type: Component,
342
- args: [{ selector: 'ae-button, button[aeButton]', encapsulation: ViewEncapsulation.None, host: {
343
- 'class': 'angular-editor-button',
344
- '[tabIndex]': '-1',
345
- '[type]': '"button"',
346
- }, template: "<ng-container *ngIf=\"iconName; else contentTemplate\">\n <svg>\n <use [attr.href]=\"'assets/ae-icons/icons.svg#' + iconName\" [attr.xlink:href]=\"'assets/ae-icons/icons.svg#' + iconName\"></use>\n </svg>\n</ng-container>\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["a{cursor:pointer}.angular-editor-textarea{min-height:150px;overflow:auto;margin-top:5px;resize:vertical}.angular-editor-textarea:after{content:\"\";position:absolute;bottom:0;right:0;display:block;width:8px;height:8px;cursor:nwse-resize;background-color:#ffffff80}.angular-editor-toolbar{font:100 14px/15px Roboto,Arial,sans-serif;background-color:#f5f5f5;font-size:.8rem;padding:.2rem;border:1px solid #ddd;display:flex;flex-wrap:wrap;gap:4px}.angular-editor-toolbar .angular-editor-toolbar-set{display:flex;gap:1px;width:fit-content;vertical-align:baseline}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button{background-color:#fff;vertical-align:middle;border:1px solid #ddd;padding:.4rem;float:left;width:2rem;height:2rem}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:focus,.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.focus{outline:0}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled>.color-label{pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled>.color-label.foreground :after{background:#555555}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled>.color-label.background{background:#555555}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.active{background:#fff5b9}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.active:hover{background-color:#fffa98}.angular-editor-toolbar .angular-editor-toolbar-set select{font-size:11px;width:90px;vertical-align:middle;background-color:transparent;border:.5px solid rgba(255,255,255,0);border-radius:5px;outline:none;padding:.4rem;cursor:pointer}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading{display:inline-block;width:90px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-heading optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading option{border:1px solid;background-color:#fff}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .default{font-size:16px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h1{font-size:24px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h2{font-size:20px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h3{font-size:16px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h4{font-size:15px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h5{font-size:14px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h6{font-size:13px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .div,.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .pre{font-size:12px}}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .select-font{display:inline-block;width:90px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-font optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font option{border:1px solid;background-color:#fff}}.angular-editor-toolbar .angular-editor-toolbar-set .select-font:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-font:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size{display:inline-block;width:50px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size option{border:1px solid;background-color:#fff}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size1{font-size:10px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size2{font-size:12px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size3{font-size:14px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size4{font-size:16px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size5{font-size:18px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size6{font-size:20px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size7{font-size:22px}}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style{display:inline-block;width:90px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style option{border:1px solid;background-color:#fff}}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .color-label{position:relative;cursor:pointer}.angular-editor-toolbar .angular-editor-toolbar-set .background{font-size:smaller;background:#1b1b1b;color:#fff;padding:3px}.angular-editor-toolbar .angular-editor-toolbar-set .foreground :after{position:absolute;content:\"\";inset:auto auto -3px -1px;width:15px;height:2px;z-index:0;background:#1b1b1b}.select-button{display:inline-block}.select-button.disabled{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}\n"] }]
347
- }], ctorParameters: function () { return []; }, propDecorators: { iconName: [{
348
- type: Input
349
- }] } });
350
-
351
- class AeSelectComponent {
352
- constructor(elRef, r) {
353
- this.elRef = elRef;
354
- this.r = r;
355
- this.options = [];
356
- this.disabled = false;
357
- this.optionId = 0;
358
- this.opened = false;
359
- this.hidden = 'inline-block';
360
- // eslint-disable-next-line @angular-eslint/no-output-native, @angular-eslint/no-output-rename
361
- this.changeEvent = new EventEmitter();
362
- this.onChange = () => {
363
- };
364
- this.onTouched = () => {
365
- };
366
- }
367
- get label() {
368
- return this.selectedOption && this.selectedOption.hasOwnProperty('label') ? this.selectedOption.label : 'Select';
369
- }
370
- get value() {
371
- return this.selectedOption.value;
372
- }
373
- ngOnInit() {
374
- this.selectedOption = this.options[0];
375
- if (isDefined(this.isHidden) && this.isHidden) {
376
- this.hide();
377
- }
378
- }
379
- hide() {
380
- this.hidden = 'none';
381
- }
382
- optionSelect(option, event) {
383
- event.stopPropagation();
384
- this.setValue(option.value);
385
- this.onChange(this.selectedOption.value);
386
- this.changeEvent.emit(this.selectedOption.value);
387
- this.onTouched();
388
- this.opened = false;
389
- }
390
- toggleOpen(event) {
391
- // event.stopPropagation();
392
- if (this.disabled) {
393
- return;
394
- }
395
- this.opened = !this.opened;
396
- }
397
- onClick($event) {
398
- if (!this.elRef.nativeElement.contains($event.target)) {
399
- this.close();
400
- }
401
- }
402
- close() {
403
- this.opened = false;
404
- }
405
- get isOpen() {
406
- return this.opened;
407
- }
408
- writeValue(value) {
409
- if (!value || typeof value !== 'string') {
410
- return;
411
- }
412
- this.setValue(value);
413
- }
414
- setValue(value) {
415
- let index = 0;
416
- const selectedEl = this.options.find((el, i) => {
417
- index = i;
418
- return el.value === value;
419
- });
420
- if (selectedEl) {
421
- this.selectedOption = selectedEl;
422
- this.optionId = index;
423
- }
424
- }
425
- registerOnChange(fn) {
426
- this.onChange = fn;
427
- }
428
- registerOnTouched(fn) {
429
- this.onTouched = fn;
430
- }
431
- setDisabledState(isDisabled) {
432
- this.labelButton.nativeElement.disabled = isDisabled;
433
- const div = this.labelButton.nativeElement;
434
- const action = isDisabled ? 'addClass' : 'removeClass';
435
- this.r[action](div, 'disabled');
436
- this.disabled = isDisabled;
437
- }
438
- handleKeyDown($event) {
439
- if (!this.opened) {
440
- return;
441
- }
442
- // console.log($event.key);
443
- // if (KeyCode[$event.key]) {
444
- switch ($event.key) {
445
- case 'ArrowDown':
446
- this._handleArrowDown($event);
447
- break;
448
- case 'ArrowUp':
449
- this._handleArrowUp($event);
450
- break;
451
- case 'Space':
452
- this._handleSpace($event);
453
- break;
454
- case 'Enter':
455
- this._handleEnter($event);
456
- break;
457
- case 'Tab':
458
- this._handleTab($event);
459
- break;
460
- case 'Escape':
461
- this.close();
462
- $event.preventDefault();
463
- break;
464
- case 'Backspace':
465
- this._handleBackspace();
466
- break;
467
- }
468
- // } else if ($event.key && $event.key.length === 1) {
469
- // this._keyPress$.next($event.key.toLocaleLowerCase());
470
- // }
471
- }
472
- _handleArrowDown($event) {
473
- if (this.optionId < this.options.length - 1) {
474
- this.optionId++;
475
- }
476
- }
477
- _handleArrowUp($event) {
478
- if (this.optionId >= 1) {
479
- this.optionId--;
480
- }
481
- }
482
- _handleSpace($event) {
483
- }
484
- _handleEnter($event) {
485
- this.optionSelect(this.options[this.optionId], $event);
486
- }
487
- _handleTab($event) {
488
- }
489
- _handleBackspace() {
490
- }
491
- }
492
- AeSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
493
- AeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AeSelectComponent, selector: "ae-select", inputs: { options: "options", isHidden: ["hidden", "isHidden"] }, outputs: { changeEvent: "change" }, host: { listeners: { "document:click": "onClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "style.display": "this.hidden" } }, providers: [
494
- {
495
- provide: NG_VALUE_ACCESSOR,
496
- useExisting: forwardRef(() => AeSelectComponent),
497
- multi: true,
498
- }
499
- ], viewQueries: [{ propertyName: "labelButton", first: true, predicate: ["labelButton"], descendants: true, static: true }], ngImport: i0, template: "<span class=\"ae-font ae-picker\" [ngClass]=\"{'ae-expanded':isOpen}\">\n <button [tabIndex]=\"-1\" #labelButton tabindex=\"0\" type=\"button\" role=\"button\" class=\"ae-picker-label\" (click)=\"toggleOpen($event);\">{{label}}\n <svg>\n <use [attr.href]=\"'assets/ae-icons/icons.svg#sort'\" [attr.xlink:href]=\"'assets/ae-icons/icons.svg#sort'\"></use>\n </svg>\n </button>\n <span class=\"ae-picker-options\">\n <button tabindex=\"-1\" type=\"button\" role=\"button\" class=\"ae-picker-item\"\n *ngFor=\"let item of options; let i = index\"\n [ngClass]=\"{'selected': item.value === value, 'focused': i === optionId}\"\n (click)=\"optionSelect(item, $event)\">\n {{item.label}}\n </button>\n <span class=\"dropdown-item\" *ngIf=\"!options.length\">No items for select</span>\n </span>\n</span>\n", styles: [".ae-font.ae-picker{color:#444;display:inline-block;float:left;width:100%;position:relative;vertical-align:middle}.ae-font .ae-picker-label{cursor:pointer;display:inline-block;padding-left:8px;padding-right:10px;position:relative;width:100%;line-height:1.8rem;vertical-align:middle;font-size:85%;text-align:left;background-color:#fff;min-width:2rem;float:left;border:1px solid #ddd;text-overflow:clip;overflow:hidden;white-space:nowrap;height:2rem}.ae-font .ae-picker-label:before{content:\"\";position:absolute;right:0;top:0;width:20px;height:100%;background:linear-gradient(to right,white,#ffffff 100%)}.ae-font .ae-picker-label:focus{outline:none}.ae-font .ae-picker-label:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.ae-font .ae-picker-label:hover:before{background:linear-gradient(to right,#f5f5f5 100%,#ffffff 100%)}.ae-font .ae-picker-label:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.ae-font .ae-picker-label:disabled:before{background:linear-gradient(to right,#f5f5f5 100%,#ffffff 100%)}.ae-font .ae-picker-label svg{position:absolute;right:0;width:1rem}.ae-font .ae-picker-label svg:not(:root){overflow:hidden}.ae-font .ae-picker-label svg .ae-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ae-font .ae-picker-options{background-color:#fff;display:none;min-width:100%;position:absolute;white-space:nowrap;z-index:3;border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ae-font .ae-picker-options .ae-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px;padding-left:5px;z-index:3;text-align:left;background-color:transparent;min-width:2rem;width:100%;border:0 solid #ddd}.ae-font .ae-picker-options .ae-picker-item.selected{color:#06c;background-color:#fff4c2}.ae-font .ae-picker-options .ae-picker-item.focused,.ae-font .ae-picker-options .ae-picker-item:hover{background-color:#fffa98}.ae-font.ae-expanded{display:block;margin-top:-1px;z-index:1}.ae-font.ae-expanded .ae-picker-label{color:#ccc;z-index:2}.ae-font.ae-expanded .ae-picker-label svg{color:#ccc;z-index:2}.ae-font.ae-expanded .ae-picker-label svg .ae-stroke{stroke:#ccc}.ae-font.ae-expanded .ae-picker-options{display:block;margin-top:-1px;top:100%;z-index:3;border-color:#ccc}svg{width:100%;height:100%}\n"], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
500
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeSelectComponent, decorators: [{
501
- type: Component,
502
- args: [{ selector: 'ae-select', encapsulation: ViewEncapsulation.None, providers: [
503
- {
504
- provide: NG_VALUE_ACCESSOR,
505
- useExisting: forwardRef(() => AeSelectComponent),
506
- multi: true,
507
- }
508
- ], template: "<span class=\"ae-font ae-picker\" [ngClass]=\"{'ae-expanded':isOpen}\">\n <button [tabIndex]=\"-1\" #labelButton tabindex=\"0\" type=\"button\" role=\"button\" class=\"ae-picker-label\" (click)=\"toggleOpen($event);\">{{label}}\n <svg>\n <use [attr.href]=\"'assets/ae-icons/icons.svg#sort'\" [attr.xlink:href]=\"'assets/ae-icons/icons.svg#sort'\"></use>\n </svg>\n </button>\n <span class=\"ae-picker-options\">\n <button tabindex=\"-1\" type=\"button\" role=\"button\" class=\"ae-picker-item\"\n *ngFor=\"let item of options; let i = index\"\n [ngClass]=\"{'selected': item.value === value, 'focused': i === optionId}\"\n (click)=\"optionSelect(item, $event)\">\n {{item.label}}\n </button>\n <span class=\"dropdown-item\" *ngIf=\"!options.length\">No items for select</span>\n </span>\n</span>\n", styles: [".ae-font.ae-picker{color:#444;display:inline-block;float:left;width:100%;position:relative;vertical-align:middle}.ae-font .ae-picker-label{cursor:pointer;display:inline-block;padding-left:8px;padding-right:10px;position:relative;width:100%;line-height:1.8rem;vertical-align:middle;font-size:85%;text-align:left;background-color:#fff;min-width:2rem;float:left;border:1px solid #ddd;text-overflow:clip;overflow:hidden;white-space:nowrap;height:2rem}.ae-font .ae-picker-label:before{content:\"\";position:absolute;right:0;top:0;width:20px;height:100%;background:linear-gradient(to right,white,#ffffff 100%)}.ae-font .ae-picker-label:focus{outline:none}.ae-font .ae-picker-label:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.ae-font .ae-picker-label:hover:before{background:linear-gradient(to right,#f5f5f5 100%,#ffffff 100%)}.ae-font .ae-picker-label:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.ae-font .ae-picker-label:disabled:before{background:linear-gradient(to right,#f5f5f5 100%,#ffffff 100%)}.ae-font .ae-picker-label svg{position:absolute;right:0;width:1rem}.ae-font .ae-picker-label svg:not(:root){overflow:hidden}.ae-font .ae-picker-label svg .ae-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ae-font .ae-picker-options{background-color:#fff;display:none;min-width:100%;position:absolute;white-space:nowrap;z-index:3;border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ae-font .ae-picker-options .ae-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px;padding-left:5px;z-index:3;text-align:left;background-color:transparent;min-width:2rem;width:100%;border:0 solid #ddd}.ae-font .ae-picker-options .ae-picker-item.selected{color:#06c;background-color:#fff4c2}.ae-font .ae-picker-options .ae-picker-item.focused,.ae-font .ae-picker-options .ae-picker-item:hover{background-color:#fffa98}.ae-font.ae-expanded{display:block;margin-top:-1px;z-index:1}.ae-font.ae-expanded .ae-picker-label{color:#ccc;z-index:2}.ae-font.ae-expanded .ae-picker-label svg{color:#ccc;z-index:2}.ae-font.ae-expanded .ae-picker-label svg .ae-stroke{stroke:#ccc}.ae-font.ae-expanded .ae-picker-options{display:block;margin-top:-1px;top:100%;z-index:3;border-color:#ccc}svg{width:100%;height:100%}\n"] }]
509
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { options: [{
510
- type: Input
511
- }], isHidden: [{
512
- type: Input,
513
- args: ['hidden']
514
- }], hidden: [{
515
- type: HostBinding,
516
- args: ['style.display']
517
- }], changeEvent: [{
518
- type: Output,
519
- args: ['change']
520
- }], labelButton: [{
521
- type: ViewChild,
522
- args: ['labelButton', { static: true }]
523
- }], onClick: [{
524
- type: HostListener,
525
- args: ['document:click', ['$event']]
526
- }], handleKeyDown: [{
527
- type: HostListener,
528
- args: ['keydown', ['$event']]
529
- }] } });
530
-
531
- class AngularEditorToolbarComponent {
532
- constructor(r, editorService, er, doc) {
533
- this.r = r;
534
- this.editorService = editorService;
535
- this.er = er;
536
- this.doc = doc;
537
- this.htmlMode = false;
538
- this.linkSelected = false;
539
- this.block = 'default';
540
- this.fontName = 'Times New Roman';
541
- this.fontSize = '3';
542
- this.headings = [
543
- {
544
- label: 'Heading 1',
545
- value: 'h1',
546
- },
547
- {
548
- label: 'Heading 2',
549
- value: 'h2',
550
- },
551
- {
552
- label: 'Heading 3',
553
- value: 'h3',
554
- },
555
- {
556
- label: 'Heading 4',
557
- value: 'h4',
558
- },
559
- {
560
- label: 'Heading 5',
561
- value: 'h5',
562
- },
563
- {
564
- label: 'Heading 6',
565
- value: 'h6',
566
- },
567
- {
568
- label: 'Heading 7',
569
- value: 'h7',
570
- },
571
- {
572
- label: 'Paragraph',
573
- value: 'p',
574
- },
575
- {
576
- label: 'Predefined',
577
- value: 'pre'
578
- },
579
- {
580
- label: 'Standard',
581
- value: 'div'
582
- },
583
- {
584
- label: 'default',
585
- value: 'default'
586
- }
587
- ];
588
- this.fontSizes = [
589
- {
590
- label: '1',
591
- value: '1',
592
- },
593
- {
594
- label: '2',
595
- value: '2',
596
- },
597
- {
598
- label: '3',
599
- value: '3',
600
- },
601
- {
602
- label: '4',
603
- value: '4',
604
- },
605
- {
606
- label: '5',
607
- value: '5',
608
- },
609
- {
610
- label: '6',
611
- value: '6',
612
- },
613
- {
614
- label: '7',
615
- value: '7',
616
- }
617
- ];
618
- this.customClassId = '-1';
619
- this.customClassList = [{ label: '', value: '' }];
620
- // uploadUrl: string;
621
- this.tagMap = {
622
- BLOCKQUOTE: 'indent',
623
- A: 'link'
624
- };
625
- this.select = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'PRE', 'DIV'];
626
- this.buttons = ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'justifyLeft', 'justifyCenter',
627
- 'justifyRight', 'justifyFull', 'indent', 'outdent', 'insertUnorderedList', 'insertOrderedList', 'link'];
628
- this.fonts = [{ label: '', value: '' }];
629
- this.execute = new EventEmitter();
630
- }
631
- set customClasses(classes) {
632
- if (classes) {
633
- this._customClasses = classes;
634
- this.customClassList = this._customClasses.map((x, i) => ({ label: x.name, value: i.toString() }));
635
- this.customClassList.unshift({ label: 'Clear Class', value: '-1' });
636
- }
637
- }
638
- set defaultFontName(value) {
639
- if (value) {
640
- this.fontName = value;
641
- }
642
- }
643
- set defaultFontSize(value) {
644
- if (value) {
645
- this.fontSize = value;
646
- }
647
- }
648
- get isLinkButtonDisabled() {
649
- return this.htmlMode || !Boolean(this.editorService.selectedText);
650
- }
651
- /**
652
- * Trigger command from editor header buttons
653
- * @param command string from toolbar buttons
654
- */
655
- triggerCommand(command) {
656
- this.execute.emit(command);
657
- }
658
- /**
659
- * highlight editor buttons when cursor moved or positioning
660
- */
661
- triggerButtons() {
662
- if (!this.showToolbar) {
663
- return;
664
- }
665
- this.buttons.forEach(e => {
666
- const result = this.doc.queryCommandState(e);
667
- const elementById = this.doc.getElementById(e + '-' + this.id);
668
- if (result) {
669
- this.r.addClass(elementById, 'active');
670
- }
671
- else {
672
- this.r.removeClass(elementById, 'active');
673
- }
674
- });
675
- }
676
- /**
677
- * trigger highlight editor buttons when cursor moved or positioning in block
678
- */
679
- triggerBlocks(nodes) {
680
- if (!this.showToolbar) {
681
- return;
682
- }
683
- this.linkSelected = nodes.findIndex(x => x.nodeName === 'A') > -1;
684
- let found = false;
685
- this.select.forEach(y => {
686
- const node = nodes.find(x => x.nodeName === y);
687
- if (node !== undefined && y === node.nodeName) {
688
- if (found === false) {
689
- this.block = node.nodeName.toLowerCase();
690
- found = true;
691
- }
692
- }
693
- else if (found === false) {
694
- this.block = 'default';
695
- }
696
- });
697
- found = false;
698
- if (this._customClasses) {
699
- this._customClasses.forEach((y, index) => {
700
- const node = nodes.find(x => {
701
- if (x instanceof Element) {
702
- return x.className === y.class;
703
- }
704
- });
705
- if (node !== undefined) {
706
- if (found === false) {
707
- this.customClassId = index.toString();
708
- found = true;
709
- }
710
- }
711
- else if (found === false) {
712
- this.customClassId = '-1';
713
- }
714
- });
715
- }
716
- Object.keys(this.tagMap).map(e => {
717
- const elementById = this.doc.getElementById(this.tagMap[e] + '-' + this.id);
718
- const node = nodes.find(x => x.nodeName === e);
719
- if (node !== undefined && e === node.nodeName) {
720
- this.r.addClass(elementById, 'active');
721
- }
722
- else {
723
- this.r.removeClass(elementById, 'active');
724
- }
725
- });
726
- this.foreColour = this.doc.queryCommandValue('ForeColor');
727
- this.fontSize = this.doc.queryCommandValue('FontSize');
728
- this.fontName = this.doc.queryCommandValue('FontName').replace(/"/g, '');
729
- this.backColor = this.doc.queryCommandValue('backColor');
730
- }
731
- /**
732
- * insert URL link
733
- */
734
- insertUrl() {
735
- let url = 'https:\/\/';
736
- const selection = this.editorService.savedSelection;
737
- if (selection && selection.commonAncestorContainer.parentElement.nodeName === 'A') {
738
- const parent = selection.commonAncestorContainer.parentElement;
739
- if (parent.href !== '') {
740
- url = parent.href;
741
- }
742
- }
743
- url = prompt('Insert URL link', url);
744
- if (url && url !== '' && url !== 'https://') {
745
- this.editorService.createLink(url);
746
- }
747
- }
748
- /**
749
- * insert Video link
750
- */
751
- insertVideo() {
752
- this.execute.emit('');
753
- const url = prompt('Insert Video link', `https://`);
754
- if (url && url !== '' && url !== `https://`) {
755
- this.editorService.insertVideo(url);
756
- }
757
- }
758
- /** insert color */
759
- insertColor(color, where) {
760
- this.editorService.insertColor(color, where);
761
- this.execute.emit('');
762
- }
763
- /**
764
- * set font Name/family
765
- * @param foreColor string
766
- */
767
- setFontName(foreColor) {
768
- this.editorService.setFontName(foreColor);
769
- this.execute.emit('');
770
- }
771
- /**
772
- * set font Size
773
- * @param fontSize string
774
- */
775
- setFontSize(fontSize) {
776
- this.editorService.setFontSize(fontSize);
777
- this.execute.emit('');
778
- }
779
- /**
780
- * toggle editor mode (WYSIWYG or SOURCE)
781
- * @param m boolean
782
- */
783
- setEditorMode(m) {
784
- const toggleEditorModeButton = this.doc.getElementById('toggleEditorMode' + '-' + this.id);
785
- if (m) {
786
- this.r.addClass(toggleEditorModeButton, 'active');
787
- }
788
- else {
789
- this.r.removeClass(toggleEditorModeButton, 'active');
790
- }
791
- this.htmlMode = m;
792
- }
793
- /**
794
- * Upload image when file is selected.
795
- */
796
- onFileChanged(event) {
797
- const file = event.target.files[0];
798
- if (file.type.includes('image/')) {
799
- if (this.upload) {
800
- this.upload(file).subscribe((response) => this.watchUploadImage(response, event));
801
- }
802
- else if (this.uploadUrl) {
803
- this.editorService.uploadImage(file).subscribe((response) => this.watchUploadImage(response, event));
804
- }
805
- else {
806
- const reader = new FileReader();
807
- reader.onload = (e) => {
808
- const fr = e.currentTarget;
809
- this.editorService.insertImage(fr.result.toString());
810
- };
811
- reader.readAsDataURL(file);
812
- }
813
- }
814
- }
815
- watchUploadImage(response, event) {
816
- const { imageUrl } = response.body;
817
- this.editorService.insertImage(imageUrl);
818
- event.srcElement.value = null;
819
- }
820
- /**
821
- * Set custom class
822
- */
823
- setCustomClass(classId) {
824
- if (classId === '-1') {
825
- this.execute.emit('clear');
826
- }
827
- else {
828
- this.editorService.createCustomClass(this._customClasses[+classId]);
829
- }
830
- }
831
- isButtonHidden(name) {
832
- if (!name) {
833
- return false;
834
- }
835
- if (!(this.hiddenButtons instanceof Array)) {
836
- return false;
837
- }
838
- let result;
839
- for (const arr of this.hiddenButtons) {
840
- if (arr instanceof Array) {
841
- result = arr.find(item => item === name);
842
- }
843
- if (result) {
844
- break;
845
- }
846
- }
847
- return result !== undefined;
848
- }
849
- focus() {
850
- this.execute.emit('focus');
851
- console.log('focused');
852
- }
853
- }
854
- AngularEditorToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorToolbarComponent, deps: [{ token: i0.Renderer2 }, { token: AngularEditorService }, { token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
855
- AngularEditorToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AngularEditorToolbarComponent, selector: "angular-editor-toolbar", inputs: { id: "id", uploadUrl: "uploadUrl", upload: "upload", showToolbar: "showToolbar", fonts: "fonts", customClasses: "customClasses", defaultFontName: "defaultFontName", defaultFontSize: "defaultFontSize", hiddenButtons: "hiddenButtons" }, outputs: { execute: "execute" }, viewQueries: [{ propertyName: "myInputFile", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"angular-editor-toolbar\" *ngIf=\"showToolbar\">\n <div aeToolbarSet>\n <button aeButton title=\"Undo\" iconName=\"undo\" (click)=\"triggerCommand('undo')\" [hidden]=\"isButtonHidden('undo')\">\n </button>\n <button aeButton title=\"Redo\" iconName=\"redo\" (click)=\"triggerCommand('redo')\"\n [hidden]=\"isButtonHidden('redo')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'bold-'+id\" aeButton title=\"Bold\" iconName=\"bold\" (click)=\"triggerCommand('bold')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('bold')\">\n </button>\n <button [id]=\"'italic-'+id\" aeButton iconName=\"italic\" title=\"Italic\" (click)=\"triggerCommand('italic')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('italic')\">\n </button>\n <button [id]=\"'underline-'+id\" aeButton title=\"Underline\" iconName=\"underline\"\n (click)=\"triggerCommand('underline')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('underline')\">\n </button>\n <button [id]=\"'strikeThrough-'+id\" aeButton iconName=\"strikeThrough\" title=\"Strikethrough\"\n (click)=\"triggerCommand('strikeThrough')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('strikeThrough')\">\n </button>\n <button [id]=\"'subscript-'+id\" aeButton title=\"Subscript\" iconName=\"subscript\"\n (click)=\"triggerCommand('subscript')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('subscript')\">\n </button>\n <button [id]=\"'superscript-'+id\" aeButton iconName=\"superscript\" title=\"Superscript\"\n (click)=\"triggerCommand('superscript')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('superscript')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'justifyLeft-'+id\" aeButton iconName=\"justifyLeft\" title=\"Justify Left\"\n (click)=\"triggerCommand('justifyLeft')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('justifyLeft')\">\n </button>\n <button [id]=\"'justifyCenter-'+id\" aeButton iconName=\"justifyCenter\" title=\"Justify Center\"\n (click)=\"triggerCommand('justifyCenter')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('justifyCenter')\">\n </button>\n <button [id]=\"'justifyRight-'+id\" aeButton iconName=\"justifyRight\" title=\"Justify Right\"\n (click)=\"triggerCommand('justifyRight')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('justifyRight')\">\n </button>\n <button [id]=\"'justifyFull-'+id\" aeButton iconName=\"justifyFull\" title=\"Justify Full\"\n (click)=\"triggerCommand('justifyFull')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('justifyFull')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'indent-'+id\" aeButton iconName=\"indent\" title=\"Indent\"\n (click)=\"triggerCommand('indent')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('indent')\">\n </button>\n <button [id]=\"'outdent-'+id\" aeButton iconName=\"outdent\" title=\"Outdent\"\n (click)=\"triggerCommand('outdent')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('outdent')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'insertUnorderedList-'+id\" aeButton iconName=\"unorderedList\" title=\"Unordered List\"\n (click)=\"triggerCommand('insertUnorderedList')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('insertUnorderedList')\">\n </button>\n <button [id]=\"'insertOrderedList-'+id\" aeButton iconName=\"orderedList\" title=\"Ordered List\"\n (click)=\"triggerCommand('insertOrderedList')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('insertOrderedList')\">\n </button>\n </div>\n <div aeToolbarSet>\n <ae-select class=\"select-heading\" [options]=\"headings\"\n [(ngModel)]=\"block\"\n (change)=\"triggerCommand(block)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('heading')\"\n tabindex=\"-1\"></ae-select>\n </div>\n <div aeToolbarSet>\n <ae-select class=\"select-font\" [options]=\"fonts\"\n [(ngModel)]=\"fontName\"\n (change)=\"setFontName(fontName)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('fontName')\"\n tabindex=\"-1\"></ae-select>\n </div>\n <div aeToolbarSet>\n <ae-select class=\"select-font-size\" [options]=\"fontSizes\"\n [(ngModel)]=\"fontSize\"\n (change)=\"setFontSize(fontSize)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('fontSize')\"\n tabindex=\"-1\">\n </ae-select>\n </div>\n <div aeToolbarSet>\n <input\n style=\"display: none\"\n type=\"color\" (change)=\"insertColor(fgInput.value, 'textColor')\"\n #fgInput>\n <button [id]=\"'foregroundColorPicker-'+id\" aeButton iconName=\"textColor\"\n (click)=\"focus(); ; fgInput.click()\"\n title=\"Text Color\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('textColor')\">\n </button>\n <input\n style=\"display: none\"\n type=\"color\" (change)=\"insertColor(bgInput.value, 'backgroundColor')\"\n #bgInput>\n <button [id]=\"'backgroundColorPicker-'+id\" aeButton iconName=\"backgroundColor\"\n (click)=\"focus(); ; bgInput.click()\"\n title=\"Background Color\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('backgroundColor')\">\n </button>\n </div>\n <div *ngIf=\"_customClasses\" aeToolbarSet>\n <ae-select class=\"select-custom-style\" [options]=\"customClassList\"\n [(ngModel)]=\"customClassId\"\n (change)=\"setCustomClass(customClassId)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('customClasses')\"\n tabindex=\"-1\"></ae-select>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'link-'+id\" aeButton iconName=\"link\" (click)=\"insertUrl()\"\n title=\"Insert Link\" [disabled]=\"isLinkButtonDisabled\" [hidden]=\"isButtonHidden('link')\">\n </button>\n <button [id]=\"'unlink-'+id\" aeButton iconName=\"unlink\" (click)=\"triggerCommand('unlink')\"\n title=\"Unlink\" [disabled]=\"htmlMode || !linkSelected\" [hidden]=\"isButtonHidden('unlink')\">\n </button>\n <input\n style=\"display: none\"\n accept=\"image/*\"\n type=\"file\" (change)=\"onFileChanged($event)\"\n #fileInput>\n <button [id]=\"'insertImage-'+id\" aeButton iconName=\"image\" (click)=\"focus(); fileInput.click()\"\n title=\"Insert Image\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('insertImage')\">\n </button>\n <button [id]=\"'insertVideo-'+id\" aeButton iconName=\"video\"\n (click)=\"insertVideo()\" title=\"Insert Video\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('insertVideo')\">\n </button>\n <button [id]=\"'insertHorizontalRule-'+id\" aeButton iconName=\"horizontalLine\" title=\"Horizontal Line\"\n (click)=\"triggerCommand('insertHorizontalRule')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('insertHorizontalRule')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'clearFormatting-'+id\" aeButton iconName=\"removeFormat\" title=\"Clear Formatting\"\n class=\"angular-editor-button\"\n (click)=\"triggerCommand('removeFormat')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('removeFormat')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'toggleEditorMode-'+id\" aeButton iconName=\"htmlCode\" title=\"HTML Code\"\n (click)=\"triggerCommand('toggleEditorMode')\" [hidden]=\"isButtonHidden('toggleEditorMode')\">\n </button>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: ["a{cursor:pointer}.angular-editor-textarea{min-height:150px;overflow:auto;margin-top:5px;resize:vertical}.angular-editor-textarea:after{content:\"\";position:absolute;bottom:0;right:0;display:block;width:8px;height:8px;cursor:nwse-resize;background-color:#ffffff80}.angular-editor-toolbar{font:100 14px/15px Roboto,Arial,sans-serif;background-color:#f5f5f5;font-size:.8rem;padding:.2rem;border:1px solid #ddd;display:flex;flex-wrap:wrap;gap:4px}.angular-editor-toolbar .angular-editor-toolbar-set{display:flex;gap:1px;width:fit-content;vertical-align:baseline}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button{background-color:#fff;vertical-align:middle;border:1px solid #ddd;padding:.4rem;float:left;width:2rem;height:2rem}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:focus,.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.focus{outline:0}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled>.color-label{pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled>.color-label.foreground :after{background:#555555}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled>.color-label.background{background:#555555}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.active{background:#fff5b9}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.active:hover{background-color:#fffa98}.angular-editor-toolbar .angular-editor-toolbar-set select{font-size:11px;width:90px;vertical-align:middle;background-color:transparent;border:.5px solid rgba(255,255,255,0);border-radius:5px;outline:none;padding:.4rem;cursor:pointer}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading{display:inline-block;width:90px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-heading optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading option{border:1px solid;background-color:#fff}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .default{font-size:16px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h1{font-size:24px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h2{font-size:20px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h3{font-size:16px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h4{font-size:15px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h5{font-size:14px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h6{font-size:13px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .div,.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .pre{font-size:12px}}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .select-font{display:inline-block;width:90px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-font optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font option{border:1px solid;background-color:#fff}}.angular-editor-toolbar .angular-editor-toolbar-set .select-font:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-font:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size{display:inline-block;width:50px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size option{border:1px solid;background-color:#fff}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size1{font-size:10px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size2{font-size:12px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size3{font-size:14px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size4{font-size:16px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size5{font-size:18px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size6{font-size:20px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size7{font-size:22px}}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style{display:inline-block;width:90px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style option{border:1px solid;background-color:#fff}}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .color-label{position:relative;cursor:pointer}.angular-editor-toolbar .angular-editor-toolbar-set .background{font-size:smaller;background:#1b1b1b;color:#fff;padding:3px}.angular-editor-toolbar .angular-editor-toolbar-set .foreground :after{position:absolute;content:\"\";inset:auto auto -3px -1px;width:15px;height:2px;z-index:0;background:#1b1b1b}\n"], components: [{ type: AeToolbarSetComponent, selector: "ae-toolbar-set, [aeToolbarSet]" }, { type: AeButtonComponent, selector: "ae-button, button[aeButton]", inputs: ["iconName"] }, { type: AeSelectComponent, selector: "ae-select", inputs: ["options", "hidden"], outputs: ["change"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
856
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorToolbarComponent, decorators: [{
857
- type: Component,
858
- args: [{ selector: 'angular-editor-toolbar', template: "<div class=\"angular-editor-toolbar\" *ngIf=\"showToolbar\">\n <div aeToolbarSet>\n <button aeButton title=\"Undo\" iconName=\"undo\" (click)=\"triggerCommand('undo')\" [hidden]=\"isButtonHidden('undo')\">\n </button>\n <button aeButton title=\"Redo\" iconName=\"redo\" (click)=\"triggerCommand('redo')\"\n [hidden]=\"isButtonHidden('redo')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'bold-'+id\" aeButton title=\"Bold\" iconName=\"bold\" (click)=\"triggerCommand('bold')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('bold')\">\n </button>\n <button [id]=\"'italic-'+id\" aeButton iconName=\"italic\" title=\"Italic\" (click)=\"triggerCommand('italic')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('italic')\">\n </button>\n <button [id]=\"'underline-'+id\" aeButton title=\"Underline\" iconName=\"underline\"\n (click)=\"triggerCommand('underline')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('underline')\">\n </button>\n <button [id]=\"'strikeThrough-'+id\" aeButton iconName=\"strikeThrough\" title=\"Strikethrough\"\n (click)=\"triggerCommand('strikeThrough')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('strikeThrough')\">\n </button>\n <button [id]=\"'subscript-'+id\" aeButton title=\"Subscript\" iconName=\"subscript\"\n (click)=\"triggerCommand('subscript')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('subscript')\">\n </button>\n <button [id]=\"'superscript-'+id\" aeButton iconName=\"superscript\" title=\"Superscript\"\n (click)=\"triggerCommand('superscript')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('superscript')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'justifyLeft-'+id\" aeButton iconName=\"justifyLeft\" title=\"Justify Left\"\n (click)=\"triggerCommand('justifyLeft')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('justifyLeft')\">\n </button>\n <button [id]=\"'justifyCenter-'+id\" aeButton iconName=\"justifyCenter\" title=\"Justify Center\"\n (click)=\"triggerCommand('justifyCenter')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('justifyCenter')\">\n </button>\n <button [id]=\"'justifyRight-'+id\" aeButton iconName=\"justifyRight\" title=\"Justify Right\"\n (click)=\"triggerCommand('justifyRight')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('justifyRight')\">\n </button>\n <button [id]=\"'justifyFull-'+id\" aeButton iconName=\"justifyFull\" title=\"Justify Full\"\n (click)=\"triggerCommand('justifyFull')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('justifyFull')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'indent-'+id\" aeButton iconName=\"indent\" title=\"Indent\"\n (click)=\"triggerCommand('indent')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('indent')\">\n </button>\n <button [id]=\"'outdent-'+id\" aeButton iconName=\"outdent\" title=\"Outdent\"\n (click)=\"triggerCommand('outdent')\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('outdent')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'insertUnorderedList-'+id\" aeButton iconName=\"unorderedList\" title=\"Unordered List\"\n (click)=\"triggerCommand('insertUnorderedList')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('insertUnorderedList')\">\n </button>\n <button [id]=\"'insertOrderedList-'+id\" aeButton iconName=\"orderedList\" title=\"Ordered List\"\n (click)=\"triggerCommand('insertOrderedList')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('insertOrderedList')\">\n </button>\n </div>\n <div aeToolbarSet>\n <ae-select class=\"select-heading\" [options]=\"headings\"\n [(ngModel)]=\"block\"\n (change)=\"triggerCommand(block)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('heading')\"\n tabindex=\"-1\"></ae-select>\n </div>\n <div aeToolbarSet>\n <ae-select class=\"select-font\" [options]=\"fonts\"\n [(ngModel)]=\"fontName\"\n (change)=\"setFontName(fontName)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('fontName')\"\n tabindex=\"-1\"></ae-select>\n </div>\n <div aeToolbarSet>\n <ae-select class=\"select-font-size\" [options]=\"fontSizes\"\n [(ngModel)]=\"fontSize\"\n (change)=\"setFontSize(fontSize)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('fontSize')\"\n tabindex=\"-1\">\n </ae-select>\n </div>\n <div aeToolbarSet>\n <input\n style=\"display: none\"\n type=\"color\" (change)=\"insertColor(fgInput.value, 'textColor')\"\n #fgInput>\n <button [id]=\"'foregroundColorPicker-'+id\" aeButton iconName=\"textColor\"\n (click)=\"focus(); ; fgInput.click()\"\n title=\"Text Color\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('textColor')\">\n </button>\n <input\n style=\"display: none\"\n type=\"color\" (change)=\"insertColor(bgInput.value, 'backgroundColor')\"\n #bgInput>\n <button [id]=\"'backgroundColorPicker-'+id\" aeButton iconName=\"backgroundColor\"\n (click)=\"focus(); ; bgInput.click()\"\n title=\"Background Color\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('backgroundColor')\">\n </button>\n </div>\n <div *ngIf=\"_customClasses\" aeToolbarSet>\n <ae-select class=\"select-custom-style\" [options]=\"customClassList\"\n [(ngModel)]=\"customClassId\"\n (change)=\"setCustomClass(customClassId)\"\n [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('customClasses')\"\n tabindex=\"-1\"></ae-select>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'link-'+id\" aeButton iconName=\"link\" (click)=\"insertUrl()\"\n title=\"Insert Link\" [disabled]=\"isLinkButtonDisabled\" [hidden]=\"isButtonHidden('link')\">\n </button>\n <button [id]=\"'unlink-'+id\" aeButton iconName=\"unlink\" (click)=\"triggerCommand('unlink')\"\n title=\"Unlink\" [disabled]=\"htmlMode || !linkSelected\" [hidden]=\"isButtonHidden('unlink')\">\n </button>\n <input\n style=\"display: none\"\n accept=\"image/*\"\n type=\"file\" (change)=\"onFileChanged($event)\"\n #fileInput>\n <button [id]=\"'insertImage-'+id\" aeButton iconName=\"image\" (click)=\"focus(); fileInput.click()\"\n title=\"Insert Image\"\n [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('insertImage')\">\n </button>\n <button [id]=\"'insertVideo-'+id\" aeButton iconName=\"video\"\n (click)=\"insertVideo()\" title=\"Insert Video\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('insertVideo')\">\n </button>\n <button [id]=\"'insertHorizontalRule-'+id\" aeButton iconName=\"horizontalLine\" title=\"Horizontal Line\"\n (click)=\"triggerCommand('insertHorizontalRule')\" [disabled]=\"htmlMode\"\n [hidden]=\"isButtonHidden('insertHorizontalRule')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'clearFormatting-'+id\" aeButton iconName=\"removeFormat\" title=\"Clear Formatting\"\n class=\"angular-editor-button\"\n (click)=\"triggerCommand('removeFormat')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('removeFormat')\">\n </button>\n </div>\n <div aeToolbarSet>\n <button [id]=\"'toggleEditorMode-'+id\" aeButton iconName=\"htmlCode\" title=\"HTML Code\"\n (click)=\"triggerCommand('toggleEditorMode')\" [hidden]=\"isButtonHidden('toggleEditorMode')\">\n </button>\n </div>\n <ng-content></ng-content>\n</div>\n", styles: ["a{cursor:pointer}.angular-editor-textarea{min-height:150px;overflow:auto;margin-top:5px;resize:vertical}.angular-editor-textarea:after{content:\"\";position:absolute;bottom:0;right:0;display:block;width:8px;height:8px;cursor:nwse-resize;background-color:#ffffff80}.angular-editor-toolbar{font:100 14px/15px Roboto,Arial,sans-serif;background-color:#f5f5f5;font-size:.8rem;padding:.2rem;border:1px solid #ddd;display:flex;flex-wrap:wrap;gap:4px}.angular-editor-toolbar .angular-editor-toolbar-set{display:flex;gap:1px;width:fit-content;vertical-align:baseline}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button{background-color:#fff;vertical-align:middle;border:1px solid #ddd;padding:.4rem;float:left;width:2rem;height:2rem}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:focus,.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.focus{outline:0}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled>.color-label{pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled>.color-label.foreground :after{background:#555555}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled>.color-label.background{background:#555555}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.active{background:#fff5b9}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.active:hover{background-color:#fffa98}.angular-editor-toolbar .angular-editor-toolbar-set select{font-size:11px;width:90px;vertical-align:middle;background-color:transparent;border:.5px solid rgba(255,255,255,0);border-radius:5px;outline:none;padding:.4rem;cursor:pointer}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading{display:inline-block;width:90px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-heading optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading option{border:1px solid;background-color:#fff}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .default{font-size:16px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h1{font-size:24px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h2{font-size:20px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h3{font-size:16px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h4{font-size:15px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h5{font-size:14px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h6{font-size:13px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .div,.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .pre{font-size:12px}}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .select-font{display:inline-block;width:90px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-font optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font option{border:1px solid;background-color:#fff}}.angular-editor-toolbar .angular-editor-toolbar-set .select-font:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-font:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size{display:inline-block;width:50px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size option{border:1px solid;background-color:#fff}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size1{font-size:10px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size2{font-size:12px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size3{font-size:14px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size4{font-size:16px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size5{font-size:18px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size6{font-size:20px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size7{font-size:22px}}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style{display:inline-block;width:90px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style option{border:1px solid;background-color:#fff}}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .color-label{position:relative;cursor:pointer}.angular-editor-toolbar .angular-editor-toolbar-set .background{font-size:smaller;background:#1b1b1b;color:#fff;padding:3px}.angular-editor-toolbar .angular-editor-toolbar-set .foreground :after{position:absolute;content:\"\";inset:auto auto -3px -1px;width:15px;height:2px;z-index:0;background:#1b1b1b}\n"] }]
859
- }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: AngularEditorService }, { type: i0.ElementRef }, { type: undefined, decorators: [{
860
- type: Inject,
861
- args: [DOCUMENT]
862
- }] }]; }, propDecorators: { id: [{
863
- type: Input
864
- }], uploadUrl: [{
865
- type: Input
866
- }], upload: [{
867
- type: Input
868
- }], showToolbar: [{
869
- type: Input
870
- }], fonts: [{
871
- type: Input
872
- }], customClasses: [{
873
- type: Input
874
- }], defaultFontName: [{
875
- type: Input
876
- }], defaultFontSize: [{
877
- type: Input
878
- }], hiddenButtons: [{
879
- type: Input
880
- }], execute: [{
881
- type: Output
882
- }], myInputFile: [{
883
- type: ViewChild,
884
- args: ['fileInput', { static: true }]
885
- }] } });
886
-
887
- class AngularEditorComponent {
888
- constructor(r, editorService, doc, sanitizer, cdRef, defaultTabIndex, autoFocus) {
889
- this.r = r;
890
- this.editorService = editorService;
891
- this.doc = doc;
892
- this.sanitizer = sanitizer;
893
- this.cdRef = cdRef;
894
- this.autoFocus = autoFocus;
895
- this.modeVisual = true;
896
- this.showPlaceholder = false;
897
- this.disabled = false;
898
- this.focused = false;
899
- this.touched = false;
900
- this.changed = false;
901
- this.id = '';
902
- this.config = angularEditorConfig;
903
- this.placeholder = '';
904
- this.executeCommandFn = this.executeCommand.bind(this);
905
- this.viewMode = new EventEmitter();
906
- /** emits `blur` event when focused out from the textarea */
907
- // eslint-disable-next-line @angular-eslint/no-output-native, @angular-eslint/no-output-rename
908
- this.blurEvent = new EventEmitter();
909
- /** emits `focus` event when focused in to the textarea */
910
- // eslint-disable-next-line @angular-eslint/no-output-rename, @angular-eslint/no-output-native
911
- this.focusEvent = new EventEmitter();
912
- this.tabindex = -1;
913
- const parsedTabIndex = Number(defaultTabIndex);
914
- this.tabIndex = (parsedTabIndex || parsedTabIndex === 0) ? parsedTabIndex : null;
915
- }
916
- onFocus() {
917
- this.focus();
918
- }
919
- ngOnInit() {
920
- this.config.toolbarPosition = this.config.toolbarPosition ? this.config.toolbarPosition : angularEditorConfig.toolbarPosition;
921
- }
922
- ngAfterViewInit() {
923
- if (isDefined(this.autoFocus)) {
924
- this.focus();
925
- }
926
- }
927
- onPaste(event) {
928
- if (this.config.rawPaste) {
929
- event.preventDefault();
930
- const text = event.clipboardData.getData('text/plain');
931
- document.execCommand('insertHTML', false, text);
932
- return text;
933
- }
934
- }
935
- /**
936
- * Executed command from editor header buttons
937
- * @param command string from triggerCommand
938
- * @param value
939
- */
940
- executeCommand(command, value) {
941
- this.focus();
942
- if (command === 'focus') {
943
- return;
944
- }
945
- if (command === 'toggleEditorMode') {
946
- this.toggleEditorMode(this.modeVisual);
947
- }
948
- else if (command !== '') {
949
- if (command === 'clear') {
950
- this.editorService.removeSelectedElements(this.getCustomTags());
951
- this.onContentChange(this.textArea.nativeElement);
952
- }
953
- else if (command === 'default') {
954
- this.editorService.removeSelectedElements('h1,h2,h3,h4,h5,h6,p,pre');
955
- this.onContentChange(this.textArea.nativeElement);
956
- }
957
- else {
958
- this.editorService.executeCommand(command, value);
959
- }
960
- this.exec();
961
- }
962
- }
963
- /**
964
- * focus event
965
- */
966
- onTextAreaFocus(event) {
967
- if (this.focused) {
968
- event.stopPropagation();
969
- return;
970
- }
971
- this.focused = true;
972
- this.focusEvent.emit(event);
973
- if (!this.touched || !this.changed) {
974
- this.editorService.executeInNextQueueIteration(() => {
975
- this.configure();
976
- this.touched = true;
977
- });
978
- }
979
- }
980
- /**
981
- * @description fires when cursor leaves textarea
982
- */
983
- onTextAreaMouseOut(event) {
984
- this.editorService.saveSelection();
985
- }
986
- /**
987
- * blur event
988
- */
989
- onTextAreaBlur(event) {
990
- /**
991
- * save selection if focussed out
992
- */
993
- this.editorService.executeInNextQueueIteration(this.editorService.saveSelection);
994
- if (typeof this.onTouched === 'function') {
995
- this.onTouched();
996
- }
997
- if (event.relatedTarget !== null) {
998
- const parent = event.relatedTarget.parentElement;
999
- if (!parent.classList.contains('angular-editor-toolbar-set') && !parent.classList.contains('ae-picker')) {
1000
- this.blurEvent.emit(event);
1001
- this.focused = false;
1002
- }
1003
- }
1004
- }
1005
- /**
1006
- * focus the text area when the editor is focused
1007
- */
1008
- focus() {
1009
- if (this.modeVisual) {
1010
- this.textArea.nativeElement.focus();
1011
- }
1012
- else {
1013
- const sourceText = this.doc.getElementById('sourceText' + this.id);
1014
- sourceText.focus();
1015
- this.focused = true;
1016
- }
1017
- }
1018
- /**
1019
- * Executed from the contenteditable section while the input property changes
1020
- * @param element html element from contenteditable
1021
- */
1022
- onContentChange(element) {
1023
- let html = '';
1024
- if (this.modeVisual) {
1025
- html = element.innerHTML;
1026
- }
1027
- else {
1028
- html = element.innerText;
1029
- }
1030
- if ((!html || html === '<br>')) {
1031
- html = '';
1032
- }
1033
- if (typeof this.onChange === 'function') {
1034
- this.onChange(this.config.sanitize || this.config.sanitize === undefined ?
1035
- this.sanitizer.sanitize(SecurityContext.HTML, html) : html);
1036
- if ((!html) !== this.showPlaceholder) {
1037
- this.togglePlaceholder(this.showPlaceholder);
1038
- }
1039
- }
1040
- this.changed = true;
1041
- }
1042
- /**
1043
- * Set the function to be called
1044
- * when the control receives a change event.
1045
- *
1046
- * @param fn a function
1047
- */
1048
- registerOnChange(fn) {
1049
- this.onChange = e => (e === '<br>' ? fn('') : fn(e));
1050
- }
1051
- /**
1052
- * Set the function to be called
1053
- * when the control receives a touch event.
1054
- *
1055
- * @param fn a function
1056
- */
1057
- registerOnTouched(fn) {
1058
- this.onTouched = fn;
1059
- }
1060
- /**
1061
- * Write a new value to the element.
1062
- *
1063
- * @param value value to be executed when there is a change in contenteditable
1064
- */
1065
- writeValue(value) {
1066
- if ((!value || value === '<br>' || value === '') !== this.showPlaceholder) {
1067
- this.togglePlaceholder(this.showPlaceholder);
1068
- }
1069
- if (value === undefined || value === '' || value === '<br>') {
1070
- value = null;
1071
- }
1072
- this.refreshView(value);
1073
- }
1074
- /**
1075
- * refresh view/HTML of the editor
1076
- *
1077
- * @param value html string from the editor
1078
- */
1079
- refreshView(value) {
1080
- const normalizedValue = value === null ? '' : value;
1081
- this.r.setProperty(this.textArea.nativeElement, 'innerHTML', normalizedValue);
1082
- return;
1083
- }
1084
- /**
1085
- * toggles placeholder based on input string
1086
- *
1087
- * @param value A HTML string from the editor
1088
- */
1089
- togglePlaceholder(value) {
1090
- if (!value) {
1091
- this.r.addClass(this.editorWrapper.nativeElement, 'show-placeholder');
1092
- this.showPlaceholder = true;
1093
- }
1094
- else {
1095
- this.r.removeClass(this.editorWrapper.nativeElement, 'show-placeholder');
1096
- this.showPlaceholder = false;
1097
- }
1098
- }
1099
- /**
1100
- * Implements disabled state for this element
1101
- *
1102
- * @param isDisabled Disabled flag
1103
- */
1104
- setDisabledState(isDisabled) {
1105
- const div = this.textArea.nativeElement;
1106
- const action = isDisabled ? 'addClass' : 'removeClass';
1107
- this.r[action](div, 'disabled');
1108
- this.disabled = isDisabled;
1109
- }
1110
- /**
1111
- * toggles editor mode based on bToSource bool
1112
- *
1113
- * @param bToSource A boolean value from the editor
1114
- */
1115
- toggleEditorMode(bToSource) {
1116
- let oContent;
1117
- const editableElement = this.textArea.nativeElement;
1118
- if (bToSource) {
1119
- oContent = this.r.createText(editableElement.innerHTML);
1120
- this.r.setProperty(editableElement, 'innerHTML', '');
1121
- this.r.setProperty(editableElement, 'contentEditable', false);
1122
- const oPre = this.r.createElement('pre');
1123
- this.r.setStyle(oPre, 'margin', '0');
1124
- this.r.setStyle(oPre, 'outline', 'none');
1125
- const oCode = this.r.createElement('code');
1126
- this.r.setProperty(oCode, 'id', 'sourceText' + this.id);
1127
- this.r.setStyle(oCode, 'display', 'block');
1128
- this.r.setStyle(oCode, 'white-space', 'pre-wrap');
1129
- this.r.setStyle(oCode, 'word-break', 'keep-all');
1130
- this.r.setStyle(oCode, 'outline', 'none');
1131
- this.r.setStyle(oCode, 'margin', '0');
1132
- this.r.setStyle(oCode, 'background-color', '#fff5b9');
1133
- this.r.setProperty(oCode, 'contentEditable', true);
1134
- this.r.appendChild(oCode, oContent);
1135
- this.focusInstance = this.r.listen(oCode, 'focus', (event) => this.onTextAreaFocus(event));
1136
- this.blurInstance = this.r.listen(oCode, 'blur', (event) => this.onTextAreaBlur(event));
1137
- this.r.appendChild(oPre, oCode);
1138
- this.r.appendChild(editableElement, oPre);
1139
- // ToDo move to service
1140
- this.doc.execCommand('defaultParagraphSeparator', false, 'div');
1141
- this.modeVisual = false;
1142
- this.viewMode.emit(false);
1143
- oCode.focus();
1144
- }
1145
- else {
1146
- if (this.doc.querySelectorAll) {
1147
- this.r.setProperty(editableElement, 'innerHTML', editableElement.innerText);
1148
- }
1149
- else {
1150
- oContent = this.doc.createRange();
1151
- oContent.selectNodeContents(editableElement.firstChild);
1152
- this.r.setProperty(editableElement, 'innerHTML', oContent.toString());
1153
- }
1154
- this.r.setProperty(editableElement, 'contentEditable', true);
1155
- this.modeVisual = true;
1156
- this.viewMode.emit(true);
1157
- this.onContentChange(editableElement);
1158
- editableElement.focus();
1159
- }
1160
- this.editorToolbar.setEditorMode(!this.modeVisual);
1161
- }
1162
- /**
1163
- * toggles editor buttons when cursor moved or positioning
1164
- *
1165
- * Send a node array from the contentEditable of the editor
1166
- */
1167
- exec() {
1168
- this.editorToolbar.triggerButtons();
1169
- let userSelection;
1170
- if (this.doc.getSelection) {
1171
- userSelection = this.doc.getSelection();
1172
- this.editorService.executeInNextQueueIteration(this.editorService.saveSelection);
1173
- }
1174
- let a = userSelection.focusNode;
1175
- const els = [];
1176
- while (a && a.id !== 'editor') {
1177
- els.unshift(a);
1178
- a = a.parentNode;
1179
- }
1180
- this.editorToolbar.triggerBlocks(els);
1181
- }
1182
- configure() {
1183
- this.editorService.uploadUrl = this.config.uploadUrl;
1184
- this.editorService.uploadWithCredentials = this.config.uploadWithCredentials;
1185
- if (this.config.defaultParagraphSeparator) {
1186
- this.editorService.setDefaultParagraphSeparator(this.config.defaultParagraphSeparator);
1187
- }
1188
- if (this.config.defaultFontName) {
1189
- this.editorService.setFontName(this.config.defaultFontName);
1190
- }
1191
- if (this.config.defaultFontSize) {
1192
- this.editorService.setFontSize(this.config.defaultFontSize);
1193
- }
1194
- }
1195
- getFonts() {
1196
- const fonts = this.config.fonts ? this.config.fonts : angularEditorConfig.fonts;
1197
- return fonts.map(x => {
1198
- return { label: x.name, value: x.name };
1199
- });
1200
- }
1201
- getCustomTags() {
1202
- const tags = ['span'];
1203
- this.config.customClasses.forEach(x => {
1204
- if (x.tag !== undefined) {
1205
- if (!tags.includes(x.tag)) {
1206
- tags.push(x.tag);
1207
- }
1208
- }
1209
- });
1210
- return tags.join(',');
1211
- }
1212
- ngOnDestroy() {
1213
- if (this.blurInstance) {
1214
- this.blurInstance();
1215
- }
1216
- if (this.focusInstance) {
1217
- this.focusInstance();
1218
- }
1219
- }
1220
- filterStyles(html) {
1221
- html = html.replace('position: fixed;', '');
1222
- return html;
1223
- }
1224
- }
1225
- AngularEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorComponent, deps: [{ token: i0.Renderer2 }, { token: AngularEditorService }, { token: DOCUMENT }, { token: i2.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: 'tabindex', attribute: true }, { token: 'autofocus', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
1226
- AngularEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AngularEditorComponent, selector: "angular-editor", inputs: { id: "id", config: "config", placeholder: "placeholder", tabIndex: "tabIndex" }, outputs: { html: "html", viewMode: "viewMode", blurEvent: "blur", focusEvent: "focus" }, host: { listeners: { "focus": "onFocus()" }, properties: { "attr.tabindex": "this.tabindex" } }, providers: [
1227
- {
1228
- provide: NG_VALUE_ACCESSOR,
1229
- useExisting: forwardRef(() => AngularEditorComponent),
1230
- multi: true
1231
- },
1232
- AngularEditorService
1233
- ], queries: [{ propertyName: "customButtonsTemplateRef", first: true, predicate: ["customButtons"], descendants: true }], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["editor"], descendants: true, static: true }, { propertyName: "editorWrapper", first: true, predicate: ["editorWrapper"], descendants: true, static: true }, { propertyName: "editorToolbar", first: true, predicate: ["editorToolbar"], descendants: true }], ngImport: i0, template: "<div\n class=\"angular-editor\"\n #angularEditor\n [style.width]=\"config.width\"\n [style.minWidth]=\"config.minWidth\"\n>\n <angular-editor-toolbar\n *ngIf=\"config.toolbarPosition === 'top'\"\n #editorToolbar\n [id]=\"id\"\n [uploadUrl]=\"config.uploadUrl\"\n [upload]=\"config.upload\"\n [showToolbar]=\"config.showToolbar !== undefined ? config.showToolbar : true\"\n [fonts]=\"getFonts()\"\n [customClasses]=\"config.customClasses\"\n [defaultFontName]=\"config.defaultFontName\"\n [defaultFontSize]=\"config.defaultFontSize\"\n [hiddenButtons]=\"config.toolbarHiddenButtons\"\n (execute)=\"executeCommand($event)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"customButtonsTemplateRef\"\n [ngTemplateOutletContext]=\"{ executeCommandFn: this.executeCommandFn}\"\n >\n </ng-container>\n </angular-editor-toolbar>\n\n <div\n class=\"angular-editor-wrapper\"\n #editorWrapper\n >\n <div\n #editor\n class=\"angular-editor-textarea\"\n [attr.contenteditable]=\"config.editable\"\n [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n [attr.translate]=\"config.translate\"\n [attr.spellcheck]=\"config.spellcheck\"\n [style.height]=\"config.height\"\n [style.minHeight]=\"config.minHeight\"\n [style.maxHeight]=\"config.maxHeight\"\n [style.outline]=\"config.outline === false ? 'none': undefined\"\n (input)=\"onContentChange($event.target)\"\n (focus)=\"onTextAreaFocus($event)\"\n (blur)=\"onTextAreaBlur($event)\"\n (click)=\"exec()\"\n (keyup)=\"exec()\"\n (mouseout)=\"onTextAreaMouseOut($event)\"\n (paste)=\"onPaste($event)\"\n >\n </div>\n <span class=\"angular-editor-placeholder\">{{ placeholder || config['placeholder'] }}</span>\n </div>\n <angular-editor-toolbar\n *ngIf=\"config.toolbarPosition === 'bottom'\"\n #editorToolbar\n [id]=\"id\"\n [uploadUrl]=\"config.uploadUrl\"\n [upload]=\"config.upload\"\n [showToolbar]=\"config.showToolbar !== undefined ? config.showToolbar : true\"\n [fonts]=\"getFonts()\"\n [customClasses]=\"config.customClasses\"\n [defaultFontName]=\"config.defaultFontName\"\n [defaultFontSize]=\"config.defaultFontSize\"\n [hiddenButtons]=\"config.toolbarHiddenButtons\"\n (execute)=\"executeCommand($event)\"\n ></angular-editor-toolbar>\n</div>\n", styles: ["a{cursor:pointer}.angular-editor-textarea{min-height:150px;overflow:auto;margin-top:5px;resize:vertical}.angular-editor-textarea:after{content:\"\";position:absolute;bottom:0;right:0;display:block;width:8px;height:8px;cursor:nwse-resize;background-color:#ffffff80}.angular-editor-toolbar{font:100 14px/15px Roboto,Arial,sans-serif;background-color:#f5f5f5;font-size:.8rem;padding:.2rem;border:1px solid #ddd;display:flex;flex-wrap:wrap;gap:4px}.angular-editor-toolbar .angular-editor-toolbar-set{display:flex;gap:1px;width:fit-content;vertical-align:baseline}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button{background-color:#fff;vertical-align:middle;border:1px solid #ddd;padding:.4rem;float:left;width:2rem;height:2rem}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:focus,.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.focus{outline:0}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled>.color-label{pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled>.color-label.foreground :after{background:#555555}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled>.color-label.background{background:#555555}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.active{background:#fff5b9}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.active:hover{background-color:#fffa98}.angular-editor-toolbar .angular-editor-toolbar-set select{font-size:11px;width:90px;vertical-align:middle;background-color:transparent;border:.5px solid rgba(255,255,255,0);border-radius:5px;outline:none;padding:.4rem;cursor:pointer}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading{display:inline-block;width:90px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-heading optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading option{border:1px solid;background-color:#fff}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .default{font-size:16px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h1{font-size:24px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h2{font-size:20px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h3{font-size:16px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h4{font-size:15px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h5{font-size:14px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h6{font-size:13px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .div,.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .pre{font-size:12px}}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .select-font{display:inline-block;width:90px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-font optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font option{border:1px solid;background-color:#fff}}.angular-editor-toolbar .angular-editor-toolbar-set .select-font:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-font:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size{display:inline-block;width:50px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size option{border:1px solid;background-color:#fff}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size1{font-size:10px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size2{font-size:12px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size3{font-size:14px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size4{font-size:16px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size5{font-size:18px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size6{font-size:20px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size7{font-size:22px}}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style{display:inline-block;width:90px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style option{border:1px solid;background-color:#fff}}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .color-label{position:relative;cursor:pointer}.angular-editor-toolbar .angular-editor-toolbar-set .background{font-size:smaller;background:#1b1b1b;color:#fff;padding:3px}.angular-editor-toolbar .angular-editor-toolbar-set .foreground :after{position:absolute;content:\"\";inset:auto auto -3px -1px;width:15px;height:2px;z-index:0;background:#1b1b1b}.angular-editor{display:flex;flex-direction:column}.angular-editor ::ng-deep [contenteditable=true]:empty:before{content:attr(placeholder);color:#868e96;opacity:1}.angular-editor .angular-editor-wrapper{position:relative}.angular-editor .angular-editor-wrapper .angular-editor-textarea{min-height:5rem;padding:.5rem .8rem 1rem;border:1px solid #ddd;background-color:transparent;overflow-x:hidden;overflow-y:auto;position:relative}.angular-editor .angular-editor-wrapper .angular-editor-textarea ::ng-deep blockquote{margin-left:1rem;border-left:.2em solid #dfe2e5;padding-left:.5rem}.angular-editor .angular-editor-wrapper ::ng-deep p{margin-bottom:0}.angular-editor .angular-editor-wrapper .angular-editor-placeholder{display:none;position:absolute;top:0;padding:.9rem .8rem 1rem .9rem;color:#6c757d;opacity:.75}.angular-editor .angular-editor-wrapper.show-placeholder .angular-editor-placeholder{display:block}.angular-editor .angular-editor-wrapper.disabled{cursor:not-allowed;opacity:.5;pointer-events:none}\n"], components: [{ type: AngularEditorToolbarComponent, selector: "angular-editor-toolbar", inputs: ["id", "uploadUrl", "upload", "showToolbar", "fonts", "customClasses", "defaultFontName", "defaultFontSize", "hiddenButtons"], outputs: ["execute"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
1234
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorComponent, decorators: [{
1235
- type: Component,
1236
- args: [{ selector: 'angular-editor', providers: [
1237
- {
1238
- provide: NG_VALUE_ACCESSOR,
1239
- useExisting: forwardRef(() => AngularEditorComponent),
1240
- multi: true
1241
- },
1242
- AngularEditorService
1243
- ], template: "<div\n class=\"angular-editor\"\n #angularEditor\n [style.width]=\"config.width\"\n [style.minWidth]=\"config.minWidth\"\n>\n <angular-editor-toolbar\n *ngIf=\"config.toolbarPosition === 'top'\"\n #editorToolbar\n [id]=\"id\"\n [uploadUrl]=\"config.uploadUrl\"\n [upload]=\"config.upload\"\n [showToolbar]=\"config.showToolbar !== undefined ? config.showToolbar : true\"\n [fonts]=\"getFonts()\"\n [customClasses]=\"config.customClasses\"\n [defaultFontName]=\"config.defaultFontName\"\n [defaultFontSize]=\"config.defaultFontSize\"\n [hiddenButtons]=\"config.toolbarHiddenButtons\"\n (execute)=\"executeCommand($event)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"customButtonsTemplateRef\"\n [ngTemplateOutletContext]=\"{ executeCommandFn: this.executeCommandFn}\"\n >\n </ng-container>\n </angular-editor-toolbar>\n\n <div\n class=\"angular-editor-wrapper\"\n #editorWrapper\n >\n <div\n #editor\n class=\"angular-editor-textarea\"\n [attr.contenteditable]=\"config.editable\"\n [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n [attr.translate]=\"config.translate\"\n [attr.spellcheck]=\"config.spellcheck\"\n [style.height]=\"config.height\"\n [style.minHeight]=\"config.minHeight\"\n [style.maxHeight]=\"config.maxHeight\"\n [style.outline]=\"config.outline === false ? 'none': undefined\"\n (input)=\"onContentChange($event.target)\"\n (focus)=\"onTextAreaFocus($event)\"\n (blur)=\"onTextAreaBlur($event)\"\n (click)=\"exec()\"\n (keyup)=\"exec()\"\n (mouseout)=\"onTextAreaMouseOut($event)\"\n (paste)=\"onPaste($event)\"\n >\n </div>\n <span class=\"angular-editor-placeholder\">{{ placeholder || config['placeholder'] }}</span>\n </div>\n <angular-editor-toolbar\n *ngIf=\"config.toolbarPosition === 'bottom'\"\n #editorToolbar\n [id]=\"id\"\n [uploadUrl]=\"config.uploadUrl\"\n [upload]=\"config.upload\"\n [showToolbar]=\"config.showToolbar !== undefined ? config.showToolbar : true\"\n [fonts]=\"getFonts()\"\n [customClasses]=\"config.customClasses\"\n [defaultFontName]=\"config.defaultFontName\"\n [defaultFontSize]=\"config.defaultFontSize\"\n [hiddenButtons]=\"config.toolbarHiddenButtons\"\n (execute)=\"executeCommand($event)\"\n ></angular-editor-toolbar>\n</div>\n", styles: ["a{cursor:pointer}.angular-editor-textarea{min-height:150px;overflow:auto;margin-top:5px;resize:vertical}.angular-editor-textarea:after{content:\"\";position:absolute;bottom:0;right:0;display:block;width:8px;height:8px;cursor:nwse-resize;background-color:#ffffff80}.angular-editor-toolbar{font:100 14px/15px Roboto,Arial,sans-serif;background-color:#f5f5f5;font-size:.8rem;padding:.2rem;border:1px solid #ddd;display:flex;flex-wrap:wrap;gap:4px}.angular-editor-toolbar .angular-editor-toolbar-set{display:flex;gap:1px;width:fit-content;vertical-align:baseline}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button{background-color:#fff;vertical-align:middle;border:1px solid #ddd;padding:.4rem;float:left;width:2rem;height:2rem}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:focus,.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.focus{outline:0}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled>.color-label{pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled>.color-label.foreground :after{background:#555555}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button:disabled>.color-label.background{background:#555555}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.active{background:#fff5b9}.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.active:hover{background-color:#fffa98}.angular-editor-toolbar .angular-editor-toolbar-set select{font-size:11px;width:90px;vertical-align:middle;background-color:transparent;border:.5px solid rgba(255,255,255,0);border-radius:5px;outline:none;padding:.4rem;cursor:pointer}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading{display:inline-block;width:90px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-heading optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading option{border:1px solid;background-color:#fff}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .default{font-size:16px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h1{font-size:24px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h2{font-size:20px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h3{font-size:16px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h4{font-size:15px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h5{font-size:14px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .h6{font-size:13px}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .div,.angular-editor-toolbar .angular-editor-toolbar-set .select-heading .pre{font-size:12px}}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-heading:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .select-font{display:inline-block;width:90px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-font optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font option{border:1px solid;background-color:#fff}}.angular-editor-toolbar .angular-editor-toolbar-set .select-font:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-font:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size{display:inline-block;width:50px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size option{border:1px solid;background-color:#fff}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size1{font-size:10px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size2{font-size:12px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size3{font-size:14px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size4{font-size:16px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size5{font-size:18px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size6{font-size:20px}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size .size7{font-size:22px}}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-font-size:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style{display:inline-block;width:90px}@supports not (-moz-appearance: none){.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style option{border:1px solid;background-color:#fff}}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.angular-editor-toolbar .angular-editor-toolbar-set .select-custom-style:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.angular-editor-toolbar .angular-editor-toolbar-set .color-label{position:relative;cursor:pointer}.angular-editor-toolbar .angular-editor-toolbar-set .background{font-size:smaller;background:#1b1b1b;color:#fff;padding:3px}.angular-editor-toolbar .angular-editor-toolbar-set .foreground :after{position:absolute;content:\"\";inset:auto auto -3px -1px;width:15px;height:2px;z-index:0;background:#1b1b1b}.angular-editor{display:flex;flex-direction:column}.angular-editor ::ng-deep [contenteditable=true]:empty:before{content:attr(placeholder);color:#868e96;opacity:1}.angular-editor .angular-editor-wrapper{position:relative}.angular-editor .angular-editor-wrapper .angular-editor-textarea{min-height:5rem;padding:.5rem .8rem 1rem;border:1px solid #ddd;background-color:transparent;overflow-x:hidden;overflow-y:auto;position:relative}.angular-editor .angular-editor-wrapper .angular-editor-textarea ::ng-deep blockquote{margin-left:1rem;border-left:.2em solid #dfe2e5;padding-left:.5rem}.angular-editor .angular-editor-wrapper ::ng-deep p{margin-bottom:0}.angular-editor .angular-editor-wrapper .angular-editor-placeholder{display:none;position:absolute;top:0;padding:.9rem .8rem 1rem .9rem;color:#6c757d;opacity:.75}.angular-editor .angular-editor-wrapper.show-placeholder .angular-editor-placeholder{display:block}.angular-editor .angular-editor-wrapper.disabled{cursor:not-allowed;opacity:.5;pointer-events:none}\n"] }]
1244
- }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: AngularEditorService }, { type: undefined, decorators: [{
1245
- type: Inject,
1246
- args: [DOCUMENT]
1247
- }] }, { type: i2.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
1248
- type: Attribute,
1249
- args: ['tabindex']
1250
- }] }, { type: undefined, decorators: [{
1251
- type: Attribute,
1252
- args: ['autofocus']
1253
- }] }]; }, propDecorators: { id: [{
1254
- type: Input
1255
- }], config: [{
1256
- type: Input
1257
- }], placeholder: [{
1258
- type: Input
1259
- }], tabIndex: [{
1260
- type: Input
1261
- }], html: [{
1262
- type: Output
1263
- }], textArea: [{
1264
- type: ViewChild,
1265
- args: ['editor', { static: true }]
1266
- }], editorWrapper: [{
1267
- type: ViewChild,
1268
- args: ['editorWrapper', { static: true }]
1269
- }], editorToolbar: [{
1270
- type: ViewChild,
1271
- args: ['editorToolbar']
1272
- }], customButtonsTemplateRef: [{
1273
- type: ContentChild,
1274
- args: ["customButtons"]
1275
- }], viewMode: [{
1276
- type: Output
1277
- }], blurEvent: [{
1278
- type: Output,
1279
- args: ['blur']
1280
- }], focusEvent: [{
1281
- type: Output,
1282
- args: ['focus']
1283
- }], tabindex: [{
1284
- type: HostBinding,
1285
- args: ['attr.tabindex']
1286
- }], onFocus: [{
1287
- type: HostListener,
1288
- args: ['focus']
1289
- }] } });
1290
-
1291
- class AngularEditorModule {
1292
- }
1293
- AngularEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1294
- AngularEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorModule, declarations: [AngularEditorComponent, AngularEditorToolbarComponent, AeSelectComponent, AeButtonComponent, AeToolbarSetComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule], exports: [AngularEditorComponent, AngularEditorToolbarComponent, AeButtonComponent, AeToolbarSetComponent] });
1295
- AngularEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorModule, imports: [[
1296
- CommonModule, FormsModule, ReactiveFormsModule
1297
- ]] });
1298
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorModule, decorators: [{
1299
- type: NgModule,
1300
- args: [{
1301
- imports: [
1302
- CommonModule, FormsModule, ReactiveFormsModule
1303
- ],
1304
- declarations: [AngularEditorComponent, AngularEditorToolbarComponent, AeSelectComponent, AeButtonComponent, AeToolbarSetComponent],
1305
- exports: [AngularEditorComponent, AngularEditorToolbarComponent, AeButtonComponent, AeToolbarSetComponent]
1306
- }]
1307
- }] });
1308
-
1309
- /*
1310
- * Public API Surface of angular-editor
1311
- */
1312
-
1313
- /**
1314
- * Generated bundle index. Do not edit.
1315
- */
1316
-
1317
- export { AeButtonComponent, AeSelectComponent, AeToolbarSetComponent, AngularEditorComponent, AngularEditorModule, AngularEditorService, AngularEditorToolbarComponent };
1318
- //# sourceMappingURL=kolkov-angular-editor.mjs.map