@skyux/text-editor 4.0.0-beta.2 → 5.0.0-beta.4

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 (101) hide show
  1. package/LICENSE +21 -0
  2. package/bundles/skyux-text-editor.umd.js +730 -562
  3. package/bundles/skyux-text-editor.umd.js.map +1 -1
  4. package/documentation.json +1961 -0
  5. package/esm2015/modules/rich-text-display/rich-text-display.component.js +17 -20
  6. package/esm2015/modules/rich-text-display/rich-text-display.module.js +22 -17
  7. package/esm2015/modules/shared/forms-utility.js +1 -1
  8. package/esm2015/modules/shared/sky-text-editor-resources.module.js +41 -0
  9. package/esm2015/modules/text-editor/defaults/font-list-defaults.js +1 -1
  10. package/esm2015/modules/text-editor/defaults/font-size-list-defaults.js +1 -1
  11. package/esm2015/modules/text-editor/defaults/menu-defaults.js +1 -1
  12. package/esm2015/modules/text-editor/defaults/style-state-defaults.js +1 -1
  13. package/esm2015/modules/text-editor/defaults/toolbar-action-defaults.js +1 -1
  14. package/esm2015/modules/text-editor/menubar/text-editor-menubar.component.js +32 -36
  15. package/esm2015/modules/text-editor/services/text-editor-adapter.service.js +17 -22
  16. package/esm2015/modules/text-editor/services/text-editor-selection.service.js +12 -13
  17. package/esm2015/modules/text-editor/services/text-editor.service.js +11 -11
  18. package/esm2015/modules/text-editor/services/text-sanitization.service.js +12 -14
  19. package/esm2015/modules/text-editor/text-editor.component.js +63 -68
  20. package/esm2015/modules/text-editor/text-editor.module.js +68 -27
  21. package/esm2015/modules/text-editor/toolbar/text-editor-toolbar.component.js +40 -42
  22. package/esm2015/modules/text-editor/types/editor-command.js +2 -1
  23. package/esm2015/modules/text-editor/types/editor-setting.js +2 -1
  24. package/esm2015/modules/text-editor/types/font-state.js +2 -1
  25. package/esm2015/modules/text-editor/types/menu-type.js +2 -1
  26. package/esm2015/modules/text-editor/types/style-state.js +2 -1
  27. package/esm2015/modules/text-editor/types/text-editor-merge-field.js +2 -1
  28. package/esm2015/modules/text-editor/types/toolbar-action-type.js +2 -1
  29. package/esm2015/modules/text-editor/url-modal/text-editor-url-modal-context.js +1 -1
  30. package/esm2015/modules/text-editor/url-modal/text-editor-url-modal-result.js +2 -1
  31. package/esm2015/modules/text-editor/url-modal/text-editor-url-modal.component.js +21 -18
  32. package/esm2015/modules/text-editor/url-modal/text-editor-url-target.js +1 -1
  33. package/esm2015/public-api.js +15 -0
  34. package/esm2015/skyux-text-editor.js +2 -14
  35. package/fesm2015/skyux-text-editor.js +359 -312
  36. package/fesm2015/skyux-text-editor.js.map +1 -1
  37. package/modules/rich-text-display/rich-text-display.component.d.ts +3 -0
  38. package/modules/rich-text-display/rich-text-display.module.d.ts +6 -0
  39. package/modules/shared/sky-text-editor-resources.module.d.ts +14 -0
  40. package/modules/text-editor/menubar/text-editor-menubar.component.d.ts +3 -0
  41. package/modules/text-editor/services/text-editor-adapter.service.d.ts +3 -0
  42. package/modules/text-editor/services/text-editor-selection.service.d.ts +3 -0
  43. package/modules/text-editor/services/text-editor.service.d.ts +3 -0
  44. package/modules/text-editor/services/text-sanitization.service.d.ts +3 -0
  45. package/modules/text-editor/text-editor.component.d.ts +3 -0
  46. package/modules/text-editor/text-editor.module.d.ts +21 -0
  47. package/modules/text-editor/toolbar/text-editor-toolbar.component.d.ts +3 -0
  48. package/modules/text-editor/url-modal/text-editor-url-modal.component.d.ts +3 -0
  49. package/package.json +20 -36
  50. package/public-api.d.ts +12 -0
  51. package/skyux-text-editor.d.ts +2 -13
  52. package/CHANGELOG.md +0 -13
  53. package/bundles/skyux-text-editor.umd.min.js +0 -2
  54. package/bundles/skyux-text-editor.umd.min.js.map +0 -1
  55. package/esm2015/plugin-resources/text-editor-resources-provider.js +0 -16
  56. package/esm2015/plugin-resources/text-editor-resources.module.js +0 -19
  57. package/esm2015/public_api.js +0 -3
  58. package/esm5/modules/rich-text-display/rich-text-display.component.js +0 -44
  59. package/esm5/modules/rich-text-display/rich-text-display.module.js +0 -24
  60. package/esm5/modules/shared/forms-utility.js +0 -14
  61. package/esm5/modules/text-editor/defaults/font-list-defaults.js +0 -42
  62. package/esm5/modules/text-editor/defaults/font-size-list-defaults.js +0 -5
  63. package/esm5/modules/text-editor/defaults/menu-defaults.js +0 -8
  64. package/esm5/modules/text-editor/defaults/style-state-defaults.js +0 -15
  65. package/esm5/modules/text-editor/defaults/toolbar-action-defaults.js +0 -12
  66. package/esm5/modules/text-editor/menubar/text-editor-menubar.component.js +0 -199
  67. package/esm5/modules/text-editor/services/text-editor-adapter.service.js +0 -470
  68. package/esm5/modules/text-editor/services/text-editor-selection.service.js +0 -77
  69. package/esm5/modules/text-editor/services/text-editor.service.js +0 -49
  70. package/esm5/modules/text-editor/services/text-sanitization.service.js +0 -41
  71. package/esm5/modules/text-editor/text-editor.component.js +0 -287
  72. package/esm5/modules/text-editor/text-editor.module.js +0 -63
  73. package/esm5/modules/text-editor/toolbar/text-editor-toolbar.component.js +0 -178
  74. package/esm5/modules/text-editor/types/editor-command.js +0 -1
  75. package/esm5/modules/text-editor/types/editor-setting.js +0 -1
  76. package/esm5/modules/text-editor/types/font-state.js +0 -1
  77. package/esm5/modules/text-editor/types/menu-type.js +0 -1
  78. package/esm5/modules/text-editor/types/style-state.js +0 -1
  79. package/esm5/modules/text-editor/types/text-editor-merge-field.js +0 -1
  80. package/esm5/modules/text-editor/types/toolbar-action-type.js +0 -1
  81. package/esm5/modules/text-editor/url-modal/text-editor-url-modal-context.js +0 -10
  82. package/esm5/modules/text-editor/url-modal/text-editor-url-modal-result.js +0 -1
  83. package/esm5/modules/text-editor/url-modal/text-editor-url-modal.component.js +0 -120
  84. package/esm5/modules/text-editor/url-modal/text-editor-url-target.js +0 -9
  85. package/esm5/plugin-resources/text-editor-resources-provider.js +0 -17
  86. package/esm5/plugin-resources/text-editor-resources.module.js +0 -22
  87. package/esm5/public_api.js +0 -3
  88. package/esm5/skyux-text-editor.js +0 -17
  89. package/fesm5/skyux-text-editor.js +0 -1620
  90. package/fesm5/skyux-text-editor.js.map +0 -1
  91. package/plugin-resources/text-editor-resources-provider.d.ts +0 -5
  92. package/plugin-resources/text-editor-resources.module.d.ts +0 -2
  93. package/public_api.d.ts +0 -7
  94. package/skyux-text-editor.metadata.json +0 -1
  95. package/src/assets/img/default-anatomy.png +0 -0
  96. package/src/assets/img/default-option-menu-toolbar-items.png +0 -0
  97. package/src/assets/img/default-use-when.png +0 -0
  98. package/src/assets/img/modern-anatomy.png +0 -0
  99. package/src/assets/img/modern-option-menu-toolbar-items.png +0 -0
  100. package/src/assets/img/modern-use-when.png +0 -0
  101. package/src/assets/locales/resources_en_US.json +0 -130
@@ -1,1620 +0,0 @@
1
- import { __decorate, __assign, __values } from 'tslib';
2
- import { CommonModule } from '@angular/common';
3
- import { ɵɵdefineInjectable, Injectable, Input, Component, NgModule, ɵɵinject, ChangeDetectorRef, ChangeDetectionStrategy, ViewChild, forwardRef, ViewEncapsulation } from '@angular/core';
4
- import { DomSanitizer } from '@angular/platform-browser';
5
- import dompurify from 'dompurify';
6
- import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
7
- import { SkyColorpickerMessageType, SkyColorpickerModule } from '@skyux/colorpicker';
8
- import { SkyAppWindowRef, SkyCoreAdapterService, SkyCoreAdapterModule, SkyIdModule } from '@skyux/core';
9
- import { SkyInputBoxModule, SkyCheckboxModule } from '@skyux/forms';
10
- import { SkyModalInstance, SkyModalService, SkyModalModule } from '@skyux/modals';
11
- import { getStringForLocale, SKY_LIB_RESOURCES_PROVIDERS, SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
12
- import { SkyIconModule } from '@skyux/indicators';
13
- import { SkyToolbarModule } from '@skyux/layout';
14
- import { SkyDropdownMessageType, SkyDropdownModule } from '@skyux/popovers';
15
- import { SkyTabsModule } from '@skyux/tabs';
16
- import { SkyThemeModule } from '@skyux/theme';
17
- import { Subject, forkJoin } from 'rxjs';
18
- import { takeUntil, take } from 'rxjs/operators';
19
- import { SkyValidation } from '@skyux/validation';
20
-
21
- // TODO: figure out how to get the following `import` to work with docs-tools library.
22
- // import DOMPurify from 'dompurify';
23
-
24
- var domPurify = dompurify(window);
25
- domPurify.addHook('afterSanitizeAttributes', function (node) {
26
- // Set all elements owning target to target=_blank
27
- // so we only allow the target attribute with that value.
28
- if (!!node.getAttribute('target')) {
29
- node.setAttribute('target', '_blank');
30
- node.setAttribute('rel', 'noopener noreferrer');
31
- }
32
- });
33
- /**
34
- * The `SkyTextSanitizationService` user the `DOMPurify` library to sanitize strings for use
35
- * in the DOM. `DOMPurify` allows more customization than Angular's internal `DomSanitizer` so we
36
- * can preserve `<style>` tags and allow `target` attributes for new tab links.
37
- * @internal
38
- */
39
- var SkyTextSanitizationService = /** @class */ (function () {
40
- function SkyTextSanitizationService() {
41
- this.allowedAttributes = ['target'];
42
- }
43
- /**
44
- * Returns a sanitized string, allowing target attribute for new tab links.
45
- */
46
- SkyTextSanitizationService.prototype.sanitize = function (htmlString) {
47
- return domPurify.sanitize(htmlString, { ADD_ATTR: this.allowedAttributes });
48
- };
49
- SkyTextSanitizationService.ɵprov = ɵɵdefineInjectable({ factory: function SkyTextSanitizationService_Factory() { return new SkyTextSanitizationService(); }, token: SkyTextSanitizationService, providedIn: "root" });
50
- SkyTextSanitizationService = __decorate([
51
- Injectable({
52
- providedIn: 'root'
53
- })
54
- ], SkyTextSanitizationService);
55
- return SkyTextSanitizationService;
56
- }());
57
-
58
- var SkyRichTextDisplayComponent = /** @class */ (function () {
59
- function SkyRichTextDisplayComponent(sanitizer, sanitizationService) {
60
- this.sanitizer = sanitizer;
61
- this.sanitizationService = sanitizationService;
62
- this.sanitizedText = '';
63
- this._richText = '';
64
- }
65
- Object.defineProperty(SkyRichTextDisplayComponent.prototype, "richText", {
66
- /**
67
- * Specifies the rich text to display.
68
- */
69
- set: function (value) {
70
- var cleaned = this.sanitizationService.sanitize(value);
71
- if (cleaned !== this._richText) {
72
- this._richText = cleaned;
73
- // Text has already been sanitized with DOMPurifier.
74
- // Tell Angular to bypass its own internal sanitization.
75
- this.sanitizedText = this.sanitizer.bypassSecurityTrustHtml(cleaned);
76
- }
77
- },
78
- enumerable: true,
79
- configurable: true
80
- });
81
- SkyRichTextDisplayComponent.ctorParameters = function () { return [
82
- { type: DomSanitizer },
83
- { type: SkyTextSanitizationService }
84
- ]; };
85
- __decorate([
86
- Input()
87
- ], SkyRichTextDisplayComponent.prototype, "richText", null);
88
- SkyRichTextDisplayComponent = __decorate([
89
- Component({
90
- selector: 'sky-rich-text-display',
91
- template: "<span\n class=\"sky-rich-text-display-text\"\n [innerHTML]=\"sanitizedText\"\n>\n</span>\n"
92
- })
93
- ], SkyRichTextDisplayComponent);
94
- return SkyRichTextDisplayComponent;
95
- }());
96
-
97
- var SkyRichTextDisplayModule = /** @class */ (function () {
98
- function SkyRichTextDisplayModule() {
99
- }
100
- SkyRichTextDisplayModule = __decorate([
101
- NgModule({
102
- imports: [
103
- CommonModule
104
- ],
105
- exports: [
106
- SkyRichTextDisplayComponent
107
- ],
108
- declarations: [
109
- SkyRichTextDisplayComponent
110
- ]
111
- })
112
- ], SkyRichTextDisplayModule);
113
- return SkyRichTextDisplayModule;
114
- }());
115
-
116
- var SkyTextEditorResourcesProvider = /** @class */ (function () {
117
- function SkyTextEditorResourcesProvider() {
118
- this.resources = { "EN-US": { "skyux_text_editor_format_menu_action_bold_label": "Bold", "skyux_text_editor_format_menu_action_bold_key_shortcut": "Ctrl+B", "skyux_text_editor_format_menu_action_italic_label": "Italic", "skyux_text_editor_format_menu_action_italic_key_shortcut": "Ctrl+I", "skyux_text_editor_format_menu_action_underline_label": "Underline", "skyux_text_editor_format_menu_action_underline_key_shortcut": "Ctrl+U", "skyux_text_editor_format_menu_action_strikethrough_label": "Strikethrough", "skyux_text_editor_format_menu_action_clear_formatting_label": "Clear formatting", "skyux_text_editor_edit_menu_action_undo_label": "Undo", "skyux_text_editor_edit_menu_action_undo_key_shortcut": "Ctrl+Z", "skyux_text_editor_edit_menu_action_redo_label": "Redo", "skyux_text_editor_edit_menu_action_redo_key_shortcut": "Ctrl+Y", "skyux_text_editor_edit_menu_action_cut_label": "Cut", "skyux_text_editor_edit_menu_action_cut_key_shortcut": "Ctrl+X", "skyux_text_editor_edit_menu_action_copy_label": "Copy", "skyux_text_editor_edit_menu_action_copy_key_shortcut": "Ctrl+C", "skyux_text_editor_edit_menu_action_paste_label": "Paste", "skyux_text_editor_edit_menu_action_paste_key_shortcut": "Ctrl+V", "skyux_text_editor_edit_menu_action_select_all_label": "Select all", "skyux_text_editor_edit_menu_action_select_all_key_shortcut": "Ctrl+A", "skyux_text_editor_menubar_dropdown_button_edit_label": "Edit", "skyux_text_editor_menubar_dropdown_button_format_label": "Format", "skyux_text_editor_menubar_dropdown_button_insert_label": "Insert merge field", "skyux_text_editor_url_modal_header_label": "Create link", "skyux_text_editor_url_modal_url_label": "Enter a URL to link to:", "skyux_text_editor_url_modal_open_label": "Where should it open?", "skyux_text_editor_url_modal_current_option_label": "Current window", "skyux_text_editor_url_modal_new_option_label": "New window", "skyux_text_editor_url_modal_email_label": "Email address", "skyux_text_editor_url_modal_subject_label": "Subject line", "skyux_text_editor_url_modal_save_button_label": "Save", "skyux_text_editor_url_modal_cancel_button_label": "Cancel" } };
119
- }
120
- SkyTextEditorResourcesProvider.prototype.getString = function (localeInfo, name) {
121
- return getStringForLocale(this.resources, localeInfo.locale, name);
122
- };
123
- SkyTextEditorResourcesProvider = __decorate([
124
- Injectable()
125
- ], SkyTextEditorResourcesProvider);
126
- return SkyTextEditorResourcesProvider;
127
- }());
128
-
129
- var SkyTextEditorResourcesModule = /** @class */ (function () {
130
- function SkyTextEditorResourcesModule() {
131
- }
132
- SkyTextEditorResourcesModule = __decorate([
133
- NgModule({
134
- providers: [
135
- {
136
- provide: SKY_LIB_RESOURCES_PROVIDERS,
137
- useClass: SkyTextEditorResourcesProvider,
138
- multi: true
139
- }
140
- ]
141
- })
142
- ], SkyTextEditorResourcesModule);
143
- return SkyTextEditorResourcesModule;
144
- }());
145
-
146
- /**
147
- * @internal
148
- */
149
- var FONT_LIST_DEFAULTS = [
150
- {
151
- name: 'Blackbaud Sans',
152
- value: '"Blackbaud Sans", Arial, sans-serif'
153
- },
154
- {
155
- name: 'Arial',
156
- value: 'Arial'
157
- },
158
- {
159
- name: 'Arial Black',
160
- value: '"Arial Black"'
161
- },
162
- {
163
- name: 'Courier New',
164
- value: '"Courier New"'
165
- },
166
- {
167
- name: 'Georgia',
168
- value: 'Georgia, serif'
169
- },
170
- {
171
- name: 'Tahoma',
172
- value: 'Tahoma, Geneva, sans-serif'
173
- },
174
- {
175
- name: 'Times New Roman',
176
- value: '"Times New Roman"'
177
- },
178
- {
179
- name: 'Trebuchet MS',
180
- value: '"Trebuchet MS", sans-serif'
181
- },
182
- {
183
- name: 'Verdana',
184
- value: 'Verdana, Geneva, sans-serif'
185
- }
186
- ];
187
-
188
- /**
189
- * @internal
190
- */
191
- var STYLE_STATE_DEFAULTS = {
192
- backColor: 'rgba(0, 0, 0, 0)',
193
- fontColor: '#000',
194
- fontSize: 14,
195
- font: FONT_LIST_DEFAULTS[0].value,
196
- boldState: false,
197
- italicState: false,
198
- underlineState: false,
199
- linkState: false
200
- };
201
-
202
- /**
203
- * @internal
204
- */
205
- var UrlTarget;
206
- (function (UrlTarget) {
207
- UrlTarget[UrlTarget["None"] = 0] = "None";
208
- UrlTarget[UrlTarget["NewWindow"] = 1] = "NewWindow";
209
- })(UrlTarget || (UrlTarget = {}));
210
-
211
- /**
212
- * @internal
213
- */
214
- var SkyTextEditorService = /** @class */ (function () {
215
- function SkyTextEditorService() {
216
- /**
217
- * A dictionary representing all active text editors and their settings.
218
- */
219
- this.editors = {};
220
- }
221
- /**
222
- * Returns the click observable from the editor with the corresponding id.
223
- */
224
- SkyTextEditorService.prototype.clickListener = function (id) {
225
- return this.editors[id].clickObservable;
226
- };
227
- /**
228
- * Returns the command change observable from the editor with the corresponding id.
229
- */
230
- SkyTextEditorService.prototype.commandChangeListener = function (id) {
231
- return this.editors[id].commandChangeObservable;
232
- };
233
- /**
234
- * Removes editor from the `editors` index by id.
235
- */
236
- SkyTextEditorService.prototype.removeEditor = function (id) {
237
- if (id in this.editors) {
238
- delete this.editors[id];
239
- }
240
- };
241
- /**
242
- * Returns the selection change observable from the editor with the corresponding id.
243
- */
244
- SkyTextEditorService.prototype.selectionChangeListener = function (id) {
245
- return this.editors[id].selectionChangeObservable;
246
- };
247
- SkyTextEditorService.ɵprov = ɵɵdefineInjectable({ factory: function SkyTextEditorService_Factory() { return new SkyTextEditorService(); }, token: SkyTextEditorService, providedIn: "root" });
248
- SkyTextEditorService = __decorate([
249
- Injectable({
250
- providedIn: 'root'
251
- })
252
- ], SkyTextEditorService);
253
- return SkyTextEditorService;
254
- }());
255
-
256
- /**
257
- * @internal
258
- */
259
- var SkyTextEditorSelectionService = /** @class */ (function () {
260
- function SkyTextEditorSelectionService() {
261
- }
262
- SkyTextEditorSelectionService.prototype.isElementSelected = function (documentEl, element) {
263
- var selectedNode = this.getCurrentSelection(documentEl).anchorNode;
264
- return selectedNode &&
265
- (element.contains(selectedNode) ||
266
- (selectedNode.parentNode && element.contains(selectedNode.parentNode)));
267
- };
268
- SkyTextEditorSelectionService.prototype.getCurrentSelection = function (documentEl) {
269
- return documentEl.getSelection();
270
- };
271
- SkyTextEditorSelectionService.prototype.getCurrentSelectionParentElement = function (documentEl) {
272
- var selection = this.getCurrentSelection(documentEl);
273
- var selectedEl;
274
- /* istanbul ignore else */
275
- if (selection &&
276
- selection.getRangeAt &&
277
- selection.getRangeAt(0).commonAncestorContainer) {
278
- selectedEl = selection.getRangeAt(0).commonAncestorContainer;
279
- selectedEl = selectedEl.nodeType !== 1 ? selectedEl.parentElement : selectedEl;
280
- }
281
- else if (selection && selection.type !== 'Control') {
282
- selectedEl = selection.createRange().parentElement();
283
- }
284
- else {
285
- return undefined;
286
- }
287
- return selectedEl;
288
- };
289
- SkyTextEditorSelectionService.prototype.getCurrentSelectionRange = function (documentEl, windowEl) {
290
- /* istanbul ignore else */
291
- if (windowEl.getSelection) {
292
- var sel = windowEl.getSelection();
293
- if (sel.getRangeAt && sel.rangeCount) {
294
- return sel.getRangeAt(0);
295
- }
296
- }
297
- else if (documentEl.getSelection() && documentEl.getSelection().getRangeAt) {
298
- return documentEl.getSelection().getRangeAt(0);
299
- }
300
- };
301
- SkyTextEditorSelectionService.prototype.selectElement = function (documentEl, windowEl, element) {
302
- if (element) {
303
- /* istanbul ignore else */
304
- if (windowEl.getSelection) {
305
- var sel = windowEl.getSelection();
306
- sel.removeAllRanges();
307
- var range = documentEl.createRange();
308
- range.selectNodeContents(element);
309
- sel.addRange(range);
310
- }
311
- else if (documentEl.getSelection) {
312
- var sel = documentEl.getSelection();
313
- sel.removeAllRanges();
314
- var range = documentEl.createRange();
315
- range.selectNodeContents(element);
316
- sel.addRange(range);
317
- }
318
- }
319
- };
320
- SkyTextEditorSelectionService.ɵprov = ɵɵdefineInjectable({ factory: function SkyTextEditorSelectionService_Factory() { return new SkyTextEditorSelectionService(); }, token: SkyTextEditorSelectionService, providedIn: "root" });
321
- SkyTextEditorSelectionService = __decorate([
322
- Injectable({
323
- providedIn: 'root'
324
- })
325
- ], SkyTextEditorSelectionService);
326
- return SkyTextEditorSelectionService;
327
- }());
328
-
329
- /**
330
- * @internal
331
- */
332
- var SkyTextEditorAdapterService = /** @class */ (function () {
333
- function SkyTextEditorAdapterService(selectionService, textEditorService, windowService) {
334
- this.selectionService = selectionService;
335
- this.textEditorService = textEditorService;
336
- this.windowService = windowService;
337
- }
338
- Object.defineProperty(SkyTextEditorAdapterService.prototype, "editors", {
339
- get: function () {
340
- return this.textEditorService.editors;
341
- },
342
- enumerable: true,
343
- configurable: true
344
- });
345
- /**
346
- * Creates a text editor inside the supplied iframe element.
347
- */
348
- SkyTextEditorAdapterService.prototype.addEditor = function (id, iframeElement, styleState, placeholder) {
349
- if (!(id in this.editors)) {
350
- this.editors[id] = this.createObservers(id, iframeElement);
351
- var documentEl = this.getIframeDocumentEl(id);
352
- var styleEl = documentEl.createElement('style');
353
- styleEl.innerHTML = ".editor:empty:before {\n content: attr(data-placeholder);\n font-family: \"Blackbaud Sans\", Arial, sans-serif;\n color: #686c73;\n font-weight: 400;\n font-size: 15px;\n font-style: italic;\n }";
354
- documentEl.head.appendChild(styleEl);
355
- var style = __assign(__assign({}, STYLE_STATE_DEFAULTS), styleState);
356
- var bodyStyle = "background-color: " + style.backColor + ";\n color: " + style.fontColor + ";\n font-family: " + style.font + ";\n font-size: " + style.fontSize + "px";
357
- documentEl.querySelector('html').setAttribute('lang', 'en');
358
- documentEl.body.setAttribute('contenteditable', 'true');
359
- documentEl.body.setAttribute('id', id);
360
- documentEl.body.setAttribute('role', 'main');
361
- documentEl.body.setAttribute('class', 'editor');
362
- documentEl.body.setAttribute('style', bodyStyle);
363
- documentEl.body.setAttribute('data-placeholder', placeholder || '');
364
- }
365
- };
366
- SkyTextEditorAdapterService.prototype.disableEditor = function (id, focusableChildren, textEditorNativeElement) {
367
- this.setEditorDisabled(id, focusableChildren, textEditorNativeElement, true);
368
- };
369
- SkyTextEditorAdapterService.prototype.enableEditor = function (id, focusableChildren, textEditorNativeElement) {
370
- this.setEditorDisabled(id, focusableChildren, textEditorNativeElement, false);
371
- };
372
- /**
373
- * Executes a command on the text editor with the corresponding id.
374
- */
375
- SkyTextEditorAdapterService.prototype.execCommand = function (id, editorCommand) {
376
- if (id in this.editors) {
377
- var documentEl = this.getIframeDocumentEl(id);
378
- if (this.editorSelected(id)) {
379
- var commandIsSupportedAndEnabled = documentEl.execCommand(editorCommand.command, false, editorCommand.value);
380
- // IE11 doesn't support insertHTML
381
- /* istanbul ignore next */
382
- if (editorCommand.command.toLowerCase() === 'inserthtml' &&
383
- !commandIsSupportedAndEnabled) {
384
- this.insertHtmlInIE11(id, editorCommand.value);
385
- }
386
- this.focusEditor(id);
387
- this.editors[id].commandChangeObservable.next();
388
- }
389
- }
390
- };
391
- SkyTextEditorAdapterService.prototype.getCurrentSelection = function (id) {
392
- return this.selectionService.getCurrentSelection(this.getIframeDocumentEl(id));
393
- };
394
- /**
395
- * Returns a data URI using the provided text string.
396
- * Used to display a merge field inside a string of text.
397
- */
398
- SkyTextEditorAdapterService.prototype.getMergeFieldDataURI = function (text) {
399
- var documentEl = this.windowService.nativeWindow.document;
400
- var textToUse = text;
401
- if (text.length > 18) {
402
- textToUse = text.substr(0, 15) + '...';
403
- }
404
- var canvasElement = documentEl.createElement('canvas');
405
- canvasElement.setAttribute('height', '20');
406
- canvasElement.setAttribute('width', '100');
407
- canvasElement.style.backgroundColor = 'tan';
408
- canvasElement.style.border = '1px solid #000000';
409
- canvasElement.style.borderRadius = '5px';
410
- var context = canvasElement.getContext('2d');
411
- context.font = '12px Arial';
412
- context.textAlign = 'center';
413
- context.fillText(textToUse, 50, 15);
414
- context.globalCompositeOperation = 'destination-over';
415
- context.fillStyle = '#00FFFF';
416
- context.fillRect(0, 0, 100, 20);
417
- context.globalCompositeOperation = 'source-over';
418
- context.lineWidth = 2;
419
- context.strokeStyle = '#FF0000';
420
- context.strokeRect(0, 0, 100, 20);
421
- var result = canvasElement.toDataURL('image/png', 1.0);
422
- return result;
423
- };
424
- SkyTextEditorAdapterService.prototype.getStyleState = function (id) {
425
- var documentEl = this.getIframeDocumentEl(id);
426
- if (this.editorSelected(id)) {
427
- return {
428
- backColor: this.getColor(documentEl, 'BackColor'),
429
- fontColor: this.getColor(documentEl, 'ForeColor'),
430
- fontSize: parseInt(this.getFontSize(id), undefined),
431
- font: documentEl.queryCommandValue('fontname'),
432
- boldState: documentEl.queryCommandState('Bold'),
433
- italicState: documentEl.queryCommandState('Italic'),
434
- underlineState: documentEl.queryCommandState('Underline'),
435
- linkState: this.hasLink(id)
436
- };
437
- }
438
- /* istanbul ignore next */
439
- return {};
440
- };
441
- SkyTextEditorAdapterService.prototype.getEditorInnerHtml = function (id) {
442
- var documentEl = this.getIframeDocumentEl(id);
443
- if (documentEl) {
444
- return this.replaceHtmlCodes(documentEl.body.innerHTML);
445
- }
446
- return '';
447
- };
448
- SkyTextEditorAdapterService.prototype.setEditorInnerHtml = function (id, value) {
449
- var documentEl = this.getIframeDocumentEl(id);
450
- var editorContent = documentEl.body;
451
- if (editorContent.innerHTML !== value) {
452
- editorContent.innerHTML = value;
453
- }
454
- };
455
- SkyTextEditorAdapterService.prototype.focusEditor = function (id) {
456
- if (id in this.editors) {
457
- var windowEl = this.getContentWindowEl(id);
458
- var iframeDocumentEl = this.getIframeDocumentEl(id);
459
- var currentSelection = this.selectionService.getCurrentSelectionRange(iframeDocumentEl, windowEl);
460
- var cursorIsNotActiveAndHasReset = currentSelection && (currentSelection.startOffset === 0 && currentSelection.endOffset === 0);
461
- if (!this.editorSelected(id) || cursorIsNotActiveAndHasReset) {
462
- // focus the end of the editor
463
- var documentEl = this.windowService.nativeWindow.document;
464
- var editor = iframeDocumentEl.body;
465
- var range = documentEl.createRange();
466
- this.editors[id].iframeElementRef.focus();
467
- editor.focus();
468
- /* istanbul ignore else */
469
- if (windowEl.getSelection && documentEl.createRange) {
470
- range.selectNodeContents(editor);
471
- range.collapse(false);
472
- var sel = windowEl.getSelection();
473
- sel.removeAllRanges();
474
- sel.addRange(range);
475
- }
476
- else {
477
- // IE only
478
- var textRange = editor.createTextRange();
479
- textRange.moveToElementText(editor);
480
- textRange.collapse(false);
481
- textRange.select();
482
- }
483
- }
484
- else {
485
- // Cursor may not be active, restore it
486
- this.editors[id].iframeElementRef.focus();
487
- iframeDocumentEl.body.focus();
488
- }
489
- }
490
- };
491
- SkyTextEditorAdapterService.prototype.getLink = function (editorId) {
492
- var link = undefined;
493
- var anchorEl = this.getSelectedAnchorTag(editorId);
494
- if (anchorEl && anchorEl.href) {
495
- link = {
496
- target: anchorEl.getAttribute('target') === '_blank' ? UrlTarget.NewWindow : UrlTarget.None,
497
- url: anchorEl.href
498
- };
499
- }
500
- return link;
501
- };
502
- SkyTextEditorAdapterService.prototype.getSelectedAnchorTag = function (editorId) {
503
- var selectedEl = this.getCurrentSelectionParentElement(editorId);
504
- return this.getParent(selectedEl, 'a');
505
- };
506
- SkyTextEditorAdapterService.prototype.saveSelection = function (id) {
507
- return this.selectionService.getCurrentSelectionRange(this.getIframeDocumentEl(id), this.getContentWindowEl(id));
508
- };
509
- SkyTextEditorAdapterService.prototype.selectElement = function (id, element) {
510
- this.selectionService.selectElement(this.getIframeDocumentEl(id), this.getContentWindowEl(id), element);
511
- };
512
- SkyTextEditorAdapterService.prototype.setPlaceholder = function (id, placeholder) {
513
- var documentEl = this.getIframeDocumentEl(id);
514
- documentEl.body.setAttribute('data-placeholder', placeholder || '');
515
- };
516
- SkyTextEditorAdapterService.prototype.setFontSize = function (id, fontSize) {
517
- var e_1, _a;
518
- var doc = this.getIframeDocumentEl(id);
519
- this.execCommand(id, { command: 'fontSize', value: 1 });
520
- var fontElements = Array.from(doc.querySelectorAll('font[size="1"]'));
521
- try {
522
- for (var fontElements_1 = __values(fontElements), fontElements_1_1 = fontElements_1.next(); !fontElements_1_1.done; fontElements_1_1 = fontElements_1.next()) {
523
- var element = fontElements_1_1.value;
524
- element.removeAttribute('size');
525
- element.style.fontSize = (fontSize + 'px');
526
- }
527
- }
528
- catch (e_1_1) { e_1 = { error: e_1_1 }; }
529
- finally {
530
- try {
531
- if (fontElements_1_1 && !fontElements_1_1.done && (_a = fontElements_1.return)) _a.call(fontElements_1);
532
- }
533
- finally { if (e_1) throw e_1.error; }
534
- }
535
- this.cleanUpBlankStyleTags(doc);
536
- this.focusEditor(id);
537
- this.editors[id].commandChangeObservable.next();
538
- };
539
- SkyTextEditorAdapterService.prototype.removeObservers = function (setting) {
540
- /* istanbul ignore next */
541
- var documentEl = setting.iframeElementRef.contentWindow ?
542
- setting.iframeElementRef.contentWindow.document :
543
- setting.iframeElementRef.contentDocument;
544
- setting.selectionChangeObservable.complete();
545
- setting.clickObservable.complete();
546
- setting.commandChangeObservable.complete();
547
- documentEl.removeEventListener('selectionchange', setting.selectionListener);
548
- documentEl.removeEventListener('input', setting.selectionListener);
549
- documentEl.removeEventListener('mousedown', setting.clickListener);
550
- documentEl.body.removeEventListener('paste', setting.pasteListener);
551
- };
552
- SkyTextEditorAdapterService.prototype.getContentWindowEl = function (id) {
553
- return this.editors[id].iframeElementRef.contentWindow;
554
- };
555
- SkyTextEditorAdapterService.prototype.getChildSelectedAnchorTags = function (editorId) {
556
- var selectedRange = this.getCurrentSelection(editorId).getRangeAt(0);
557
- if (selectedRange.toString().length <= 0) {
558
- return [];
559
- }
560
- var parentElement = this.getCurrentSelectionParentElement(editorId);
561
- var childElements = parentElement ? Array.from(parentElement.querySelectorAll('a')) : [];
562
- /* istanbul ignore next */
563
- return childElements.filter(function (element) {
564
- // IE specific
565
- if (!selectedRange.intersectsNode) {
566
- if (!element || !element.href) {
567
- return false;
568
- }
569
- var tempRange = document.createRange();
570
- tempRange.selectNodeContents(element);
571
- return (selectedRange.compareBoundaryPoints(Range.START_TO_START, tempRange) !== -1
572
- && selectedRange.compareBoundaryPoints(Range.START_TO_END, tempRange) !== 1) ||
573
- (selectedRange.compareBoundaryPoints(Range.END_TO_START, tempRange) !== -1
574
- && selectedRange.compareBoundaryPoints(Range.END_TO_END, tempRange) !== 1);
575
- }
576
- // Normal non-IE
577
- return !!element && !!element.href && selectedRange.intersectsNode(element);
578
- });
579
- };
580
- SkyTextEditorAdapterService.prototype.getIframeDocumentEl = function (id) {
581
- /* istanbul ignore next */
582
- if (!(id in this.editors)) {
583
- return undefined;
584
- }
585
- var contentWindowEl = this.getContentWindowEl(id);
586
- if (contentWindowEl) {
587
- return contentWindowEl.document;
588
- }
589
- /* istanbul ignore next */
590
- return this.editors[id].iframeElementRef.contentDocument;
591
- };
592
- SkyTextEditorAdapterService.prototype.getFontSize = function (id) {
593
- var fontSize = STYLE_STATE_DEFAULTS.fontSize.toString();
594
- var selection = this.getCurrentSelection(id);
595
- if (selection &&
596
- selection.anchorNode &&
597
- selection.anchorNode.parentElement) {
598
- var element = selection.anchorNode;
599
- if (element.nodeType !== 1) {
600
- element = element.parentElement;
601
- }
602
- var computedStyle = window.getComputedStyle(element);
603
- /* istanbul ignore else */
604
- if (computedStyle) {
605
- fontSize = computedStyle.getPropertyValue('font-size');
606
- }
607
- }
608
- return fontSize;
609
- };
610
- SkyTextEditorAdapterService.prototype.createObservers = function (id, element) {
611
- /* istanbul ignore next */
612
- var documentEl = element.contentWindow ?
613
- element.contentWindow.document :
614
- element.contentDocument;
615
- // Firefox bug where we need to open/close to cancel load so it doesn't overwrite attrs
616
- documentEl.open();
617
- documentEl.close();
618
- var selectionObservable = new Subject();
619
- var selectionListener = function () { return selectionObservable.next(); };
620
- var clickObservable = new Subject();
621
- var clickListener = function () { return clickObservable.next(); };
622
- var pasteListener = this.getPasteOverride(id);
623
- documentEl.addEventListener('selectionchange', selectionListener);
624
- documentEl.addEventListener('input', selectionListener);
625
- documentEl.addEventListener('mousedown', clickListener);
626
- documentEl.body.addEventListener('paste', pasteListener);
627
- return {
628
- iframeElementRef: element,
629
- selectionListener: selectionListener,
630
- clickListener: clickListener,
631
- pasteListener: pasteListener,
632
- selectionChangeObservable: selectionObservable,
633
- clickObservable: clickObservable,
634
- commandChangeObservable: new Subject()
635
- };
636
- };
637
- /* istanbul ignore next */
638
- SkyTextEditorAdapterService.prototype.getPasteOverride = function (id) {
639
- var _this = this;
640
- return function (e) {
641
- e.preventDefault();
642
- var text = e.clipboardData.getData('text/plain');
643
- _this.execCommand(id, { command: 'insertHTML', value: text });
644
- };
645
- };
646
- SkyTextEditorAdapterService.prototype.getCurrentSelectionParentElement = function (id) {
647
- return this.selectionService.getCurrentSelectionParentElement(this.getIframeDocumentEl(id));
648
- };
649
- SkyTextEditorAdapterService.prototype.getColor = function (documentEl, selector) {
650
- var commandValue = documentEl.queryCommandValue(selector);
651
- // Edge is weird and returns numbers
652
- if (typeof commandValue === 'number') {
653
- /* istanbul ignore next */
654
- // tslint:disable-next-line: no-bitwise
655
- return 'rgb(' + (commandValue & 0xFF) + ', ' +
656
- // tslint:disable-next-line: no-bitwise
657
- ((commandValue & 0xFF00) >> 8) + ', ' +
658
- // tslint:disable-next-line: no-bitwise
659
- ((commandValue & 0xFF0000) >> 16) + ')';
660
- }
661
- // Firefox uses 'Transparent' instead of a color value
662
- /* istanbul ignore next */
663
- if (commandValue.toString().toLowerCase() === 'transparent') {
664
- return STYLE_STATE_DEFAULTS.backColor;
665
- }
666
- return commandValue;
667
- };
668
- SkyTextEditorAdapterService.prototype.hasLink = function (editorId) {
669
- var anchorEl = this.getSelectedAnchorTag(editorId);
670
- var childAnchorEls = this.getChildSelectedAnchorTags(editorId);
671
- return childAnchorEls.length > 0 || (!!anchorEl && !!anchorEl.href);
672
- };
673
- SkyTextEditorAdapterService.prototype.getParent = function (element, tag) {
674
- var currentNode = element;
675
- while (currentNode && currentNode.tagName.toUpperCase() !== 'BODY') {
676
- if (currentNode.tagName.toUpperCase() === tag.toUpperCase()) {
677
- return currentNode;
678
- }
679
- currentNode = currentNode.parentElement;
680
- }
681
- return undefined;
682
- };
683
- SkyTextEditorAdapterService.prototype.editorSelected = function (id) {
684
- var documentEl = this.getIframeDocumentEl(id);
685
- return this.selectionService.isElementSelected(documentEl, documentEl.body);
686
- };
687
- /* istanbul ignore next */
688
- SkyTextEditorAdapterService.prototype.insertHtmlInIE11 = function (id, html) {
689
- var documentEl = this.getIframeDocumentEl(id);
690
- var windowEl = this.getContentWindowEl(id);
691
- var sel = windowEl.getSelection();
692
- if (sel.getRangeAt && sel.rangeCount) {
693
- var range = sel.getRangeAt(0);
694
- range.deleteContents();
695
- var el = documentEl.createElement('div');
696
- el.innerHTML = html;
697
- var frag = documentEl.createDocumentFragment(), node = void 0, lastNode = void 0;
698
- while (el.firstChild) {
699
- node = el.firstChild;
700
- lastNode = frag.appendChild(node);
701
- }
702
- range.insertNode(frag);
703
- // Preserve the selection
704
- if (lastNode) {
705
- range = range.cloneRange();
706
- range.setStartAfter(lastNode);
707
- range.collapse(true);
708
- sel.removeAllRanges();
709
- sel.addRange(range);
710
- }
711
- }
712
- };
713
- SkyTextEditorAdapterService.prototype.cleanUpBlankStyleTags = function (doc) {
714
- var e_2, _a, e_3, _b;
715
- var orphanElements = Array.from(doc.querySelectorAll('font,span,*[style=""]'));
716
- try {
717
- for (var orphanElements_1 = __values(orphanElements), orphanElements_1_1 = orphanElements_1.next(); !orphanElements_1_1.done; orphanElements_1_1 = orphanElements_1.next()) {
718
- var element = orphanElements_1_1.value;
719
- if (!element.getAttribute('style')) {
720
- element.removeAttribute('style');
721
- }
722
- }
723
- }
724
- catch (e_2_1) { e_2 = { error: e_2_1 }; }
725
- finally {
726
- try {
727
- if (orphanElements_1_1 && !orphanElements_1_1.done && (_a = orphanElements_1.return)) _a.call(orphanElements_1);
728
- }
729
- finally { if (e_2) throw e_2.error; }
730
- }
731
- var removableElements = orphanElements.filter(function (element) {
732
- var tagName = element.tagName.toUpperCase();
733
- return (tagName === 'FONT' || tagName === 'SPAN') &&
734
- (element.attributes.length === 0 || !element.hasChildNodes);
735
- });
736
- try {
737
- for (var removableElements_1 = __values(removableElements), removableElements_1_1 = removableElements_1.next(); !removableElements_1_1.done; removableElements_1_1 = removableElements_1.next()) {
738
- var element = removableElements_1_1.value;
739
- var parent_1 = element.parentNode;
740
- /* istanbul ignore else */
741
- if (parent_1) {
742
- while (element.firstChild) {
743
- parent_1.insertBefore(element.firstChild, element);
744
- }
745
- parent_1.removeChild(element);
746
- }
747
- }
748
- }
749
- catch (e_3_1) { e_3 = { error: e_3_1 }; }
750
- finally {
751
- try {
752
- if (removableElements_1_1 && !removableElements_1_1.done && (_b = removableElements_1.return)) _b.call(removableElements_1);
753
- }
754
- finally { if (e_3) throw e_3.error; }
755
- }
756
- };
757
- // Certain values are encoded in html and need to be decoded
758
- SkyTextEditorAdapterService.prototype.replaceHtmlCodes = function (str) {
759
- return str.replace(/&nbsp;/, String.fromCharCode(160))
760
- .replace(/&lt;/g, '<')
761
- .replace(/&gt;/g, '>')
762
- .replace(/&amp;/g, '&');
763
- };
764
- SkyTextEditorAdapterService.prototype.setEditorDisabled = function (id, focusableChildren, textEditorNativeElement, disabled) {
765
- textEditorNativeElement.style.pointerEvents = disabled ? 'none' : 'auto';
766
- textEditorNativeElement.setAttribute('aria-disabled', disabled ? 'true' : 'false');
767
- focusableChildren.forEach(function (aFocusableChild) {
768
- aFocusableChild.tabIndex = disabled ? -1 : 0;
769
- });
770
- this.getIframeDocumentEl(id).body.setAttribute('contenteditable', disabled ? 'false' : 'true');
771
- };
772
- SkyTextEditorAdapterService.ctorParameters = function () { return [
773
- { type: SkyTextEditorSelectionService },
774
- { type: SkyTextEditorService },
775
- { type: SkyAppWindowRef }
776
- ]; };
777
- SkyTextEditorAdapterService.ɵprov = ɵɵdefineInjectable({ factory: function SkyTextEditorAdapterService_Factory() { return new SkyTextEditorAdapterService(ɵɵinject(SkyTextEditorSelectionService), ɵɵinject(SkyTextEditorService), ɵɵinject(SkyAppWindowRef)); }, token: SkyTextEditorAdapterService, providedIn: "root" });
778
- SkyTextEditorAdapterService = __decorate([
779
- Injectable({
780
- providedIn: 'root'
781
- })
782
- ], SkyTextEditorAdapterService);
783
- return SkyTextEditorAdapterService;
784
- }());
785
-
786
- // Need to add the following to classes which contain static methods.
787
- // See: https://github.com/ng-packagr/ng-packagr/issues/641
788
- // @dynamic
789
- var SkyFormsUtility = /** @class */ (function () {
790
- function SkyFormsUtility() {
791
- }
792
- /** Coerces a data-bound value (typically a string) to a boolean. */
793
- SkyFormsUtility.coerceBooleanProperty = function (value) {
794
- return value !== undefined && "" + value !== 'false';
795
- };
796
- return SkyFormsUtility;
797
- }());
798
-
799
- /**
800
- * @internal
801
- */
802
- var SkyTextEditorMenubarComponent = /** @class */ (function () {
803
- function SkyTextEditorMenubarComponent(adapterService, changeDetector, resources) {
804
- this.adapterService = adapterService;
805
- this.changeDetector = changeDetector;
806
- this.resources = resources;
807
- this.editorFocusStream = new Subject();
808
- this.menus = [];
809
- this.mergeFields = [];
810
- this._disabled = false;
811
- this.editDropdownStream = new Subject();
812
- this.formatDropdownStream = new Subject();
813
- this.mergeFieldDropdownStream = new Subject();
814
- this.ngUnsubscribe = new Subject();
815
- }
816
- Object.defineProperty(SkyTextEditorMenubarComponent.prototype, "disabled", {
817
- get: function () {
818
- return this._disabled;
819
- },
820
- set: function (value) {
821
- var coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
822
- if (coercedValue !== this.disabled) {
823
- this._disabled = coercedValue;
824
- this.changeDetector.markForCheck();
825
- }
826
- },
827
- enumerable: true,
828
- configurable: true
829
- });
830
- SkyTextEditorMenubarComponent.prototype.ngOnInit = function () {
831
- var _this = this;
832
- this.editorFocusStream
833
- .pipe(takeUntil(this.ngUnsubscribe)).subscribe(function () {
834
- _this.closeDropdowns();
835
- });
836
- forkJoin([
837
- // Format menu strings.
838
- this.resources.getString('skyux_text_editor_format_menu_action_bold_label'),
839
- this.resources.getString('skyux_text_editor_format_menu_action_bold_key_shortcut'),
840
- this.resources.getString('skyux_text_editor_format_menu_action_italic_label'),
841
- this.resources.getString('skyux_text_editor_format_menu_action_italic_key_shortcut'),
842
- this.resources.getString('skyux_text_editor_format_menu_action_underline_label'),
843
- this.resources.getString('skyux_text_editor_format_menu_action_underline_key_shortcut'),
844
- this.resources.getString('skyux_text_editor_format_menu_action_strikethrough_label'),
845
- this.resources.getString('skyux_text_editor_format_menu_action_clear_formatting_label'),
846
- // Edit menu string - start at index 8.
847
- this.resources.getString('skyux_text_editor_edit_menu_action_undo_label'),
848
- this.resources.getString('skyux_text_editor_edit_menu_action_undo_key_shortcut'),
849
- this.resources.getString('skyux_text_editor_edit_menu_action_redo_label'),
850
- this.resources.getString('skyux_text_editor_edit_menu_action_redo_key_shortcut'),
851
- this.resources.getString('skyux_text_editor_edit_menu_action_cut_label'),
852
- this.resources.getString('skyux_text_editor_edit_menu_action_cut_key_shortcut'),
853
- this.resources.getString('skyux_text_editor_edit_menu_action_copy_label'),
854
- this.resources.getString('skyux_text_editor_edit_menu_action_copy_key_shortcut'),
855
- this.resources.getString('skyux_text_editor_edit_menu_action_paste_label'),
856
- this.resources.getString('skyux_text_editor_edit_menu_action_paste_key_shortcut'),
857
- this.resources.getString('skyux_text_editor_edit_menu_action_select_all_label'),
858
- this.resources.getString('skyux_text_editor_edit_menu_action_select_all_key_shortcut')
859
- ])
860
- .pipe(take(1))
861
- .subscribe(function (resources) {
862
- _this.formatItems = [
863
- {
864
- function: function () { return _this.execCommand('bold'); },
865
- label: resources[0],
866
- keyShortcut: resources[1]
867
- },
868
- {
869
- function: function () { return _this.execCommand('italic'); },
870
- label: resources[2],
871
- keyShortcut: resources[3]
872
- },
873
- {
874
- function: function () { return _this.execCommand('underline'); },
875
- label: resources[4],
876
- keyShortcut: resources[5]
877
- },
878
- {
879
- function: function () { return _this.execCommand('strikethrough'); },
880
- label: resources[6]
881
- },
882
- {
883
- isDivider: true
884
- },
885
- {
886
- function: function () { return _this.clearFormat(); },
887
- label: resources[7]
888
- }
889
- ];
890
- _this.editItems = [
891
- {
892
- function: function () { return _this.execCommand('undo'); },
893
- label: resources[8],
894
- keyShortcut: resources[9]
895
- },
896
- {
897
- function: function () { return _this.execCommand('redo'); },
898
- label: resources[10],
899
- keyShortcut: resources[11]
900
- },
901
- {
902
- isDivider: true
903
- },
904
- {
905
- function: function () { return _this.execCommand('cut'); },
906
- label: resources[12],
907
- keyShortcut: resources[13]
908
- },
909
- {
910
- function: function () { return _this.execCommand('copy'); },
911
- label: resources[14],
912
- keyShortcut: resources[15]
913
- },
914
- {
915
- function: function () { return _this.execCommand('paste'); },
916
- label: resources[16],
917
- keyShortcut: resources[17]
918
- },
919
- {
920
- isDivider: true
921
- },
922
- {
923
- function: function () { return _this.execCommand('selectAll'); },
924
- label: resources[18],
925
- keyShortcut: resources[19]
926
- }
927
- ];
928
- });
929
- };
930
- SkyTextEditorMenubarComponent.prototype.ngOnDestroy = function () {
931
- this.ngUnsubscribe.next();
932
- this.ngUnsubscribe.complete();
933
- };
934
- SkyTextEditorMenubarComponent.prototype.execCommand = function (command, value) {
935
- if (value === void 0) { value = ''; }
936
- this.adapterService.execCommand(this.editorId, {
937
- command: command,
938
- value: value
939
- });
940
- };
941
- SkyTextEditorMenubarComponent.prototype.insertMergeField = function (field) {
942
- this.execCommand('insertHTML', '<img style="display: inline; cursor: grab;" data-fieldid="' + field.id +
943
- '" data-fielddisplay="' + field.name +
944
- '" src="' + (field.previewImageUrl || this.adapterService.getMergeFieldDataURI(field.name)) + '">');
945
- };
946
- SkyTextEditorMenubarComponent.prototype.closeDropdowns = function () {
947
- this.editDropdownStream.next({ type: SkyDropdownMessageType.Close });
948
- this.formatDropdownStream.next({ type: SkyDropdownMessageType.Close });
949
- this.mergeFieldDropdownStream.next({ type: SkyDropdownMessageType.Close });
950
- };
951
- SkyTextEditorMenubarComponent.prototype.clearFormat = function () {
952
- var currentSelection = this.adapterService.getCurrentSelection(this.editorId);
953
- if (currentSelection.rangeCount > 0 && currentSelection.getRangeAt(0).toString().length <= 0) {
954
- this.execCommand('selectAll');
955
- }
956
- this.execCommand('removeFormat');
957
- };
958
- SkyTextEditorMenubarComponent.ctorParameters = function () { return [
959
- { type: SkyTextEditorAdapterService },
960
- { type: ChangeDetectorRef },
961
- { type: SkyLibResourcesService }
962
- ]; };
963
- __decorate([
964
- Input()
965
- ], SkyTextEditorMenubarComponent.prototype, "editorFocusStream", void 0);
966
- __decorate([
967
- Input()
968
- ], SkyTextEditorMenubarComponent.prototype, "editorId", void 0);
969
- __decorate([
970
- Input()
971
- ], SkyTextEditorMenubarComponent.prototype, "menus", void 0);
972
- __decorate([
973
- Input()
974
- ], SkyTextEditorMenubarComponent.prototype, "mergeFields", void 0);
975
- __decorate([
976
- Input()
977
- ], SkyTextEditorMenubarComponent.prototype, "disabled", null);
978
- SkyTextEditorMenubarComponent = __decorate([
979
- Component({
980
- selector: 'sky-text-editor-menubar',
981
- template: "\n <sky-toolbar-item *ngFor=\"let menu of menus\"\n class=\"sky-text-editor-menu\"\n [ngClass]=\"'sky-text-editor-menu-' + menu\"\n >\n <ng-container\n [ngSwitch]=\"menu\"\n >\n <ng-container *ngSwitchCase=\"'edit'\">\n <sky-dropdown\n label=\"Edit menu\"\n [disabled]=\"disabled\"\n [messageStream]=\"editDropdownStream\"\n >\n <sky-dropdown-button>\n {{ 'skyux_text_editor_menubar_dropdown_button_edit_label' | skyLibResources }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let editItem of editItems\">\n <button *ngIf=\"!editItem.isDivider\"\n type=\"button\"\n (click)=\"editItem.function()\"\n >\n {{ editItem.label }}\n <div *ngIf=\"editItem.keyShortcut\"\n class=\"sky-text-editor-menu-key-shortcut\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized' : 'modern',\n 'sky-deemphasized' : 'default'\n }\"\n >\n {{ editItem.keyShortcut }}\n </div>\n </button>\n <div *ngIf=\"editItem.isDivider\"\n class=\"sky-text-editor-dropdown-item-divider\"\n role=\"divider\"\n >\n </div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'format'\">\n <sky-dropdown\n label=\"Format menu\"\n [disabled]=\"disabled\"\n [messageStream]=\"formatDropdownStream\"\n >\n <sky-dropdown-button>\n {{ 'skyux_text_editor_menubar_dropdown_button_format_label' | skyLibResources }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let formatItem of formatItems\">\n <button *ngIf=\"!formatItem.isDivider\"\n type=\"button\"\n (click)=\"formatItem.function()\"\n >\n {{ formatItem.label }}\n <div *ngIf=\"formatItem.keyShortcut\"\n class=\"sky-text-editor-menu-key-shortcut\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized' : 'modern',\n 'sky-deemphasized' : 'default'\n }\"\n >\n {{ formatItem.keyShortcut}}\n </div>\n </button>\n <div *ngIf=\"formatItem.isDivider\"\n class=\"sky-text-editor-dropdown-item-divider\"\n role=\"divider\"\n >\n </div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'merge-field'\">\n <sky-dropdown *ngIf=\"mergeFields && mergeFields.length > 0\"\n label=\"Insert merge field\"\n [disabled]=\"disabled\"\n [messageStream]=\"mergeFieldDropdownStream\"\n >\n <sky-dropdown-button>\n {{ 'skyux_text_editor_menubar_dropdown_button_insert_label' | skyLibResources }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let mergeField of mergeFields\">\n <button\n type=\"button\"\n (click)=\"insertMergeField(mergeField)\"\n >\n {{ mergeField.name }}\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n </ng-container>\n </sky-toolbar-item>\n",
982
- changeDetection: ChangeDetectionStrategy.OnPush,
983
- styles: [".sky-text-editor-dropdown-item-divider{border:0;padding:0;height:1px;margin:9px 1px;overflow:hidden;background:0 0;border-bottom:1px solid rgba(0,0,0,.1);cursor:default;filter:none}.sky-text-editor-menu-key-shortcut{float:right;margin-left:15px}"]
984
- })
985
- ], SkyTextEditorMenubarComponent);
986
- return SkyTextEditorMenubarComponent;
987
- }());
988
-
989
- /**
990
- * @internal
991
- */
992
- var SkyUrlModalContext = /** @class */ (function () {
993
- function SkyUrlModalContext() {
994
- }
995
- return SkyUrlModalContext;
996
- }());
997
-
998
- var emailKey = 'mailto:';
999
- var queryStringParamKey = '?Subject=';
1000
- /**
1001
- * @internal
1002
- */
1003
- var SkyTextEditorUrlModalComponent = /** @class */ (function () {
1004
- function SkyTextEditorUrlModalComponent(modalInstance, modalContext) {
1005
- this.modalInstance = modalInstance;
1006
- this.emailAddressValid = false;
1007
- this.subject = '';
1008
- this.target = 0;
1009
- this.valid = false;
1010
- this._activeTab = 0;
1011
- this._emailAddress = '';
1012
- this._url = 'https://';
1013
- if (modalContext.urlResult) {
1014
- if (modalContext.urlResult.url.startsWith(emailKey)) {
1015
- this.emailAddress = modalContext.urlResult.url.replace(emailKey, '');
1016
- var queryStringIndex = this.emailAddress.indexOf(queryStringParamKey);
1017
- queryStringIndex = queryStringIndex > -1 ? queryStringIndex : this.emailAddress.indexOf(queryStringParamKey.toLowerCase());
1018
- if (queryStringIndex > -1) {
1019
- this.subject = decodeURI(this.emailAddress).slice(queryStringIndex + queryStringParamKey.length);
1020
- this.emailAddress = this.emailAddress.slice(0, queryStringIndex);
1021
- }
1022
- // Set active tab to email
1023
- this.activeTab = 1;
1024
- }
1025
- else {
1026
- this.url = modalContext.urlResult.url,
1027
- this.target = modalContext.urlResult.target;
1028
- // set active tab to web page
1029
- this.activeTab = 0;
1030
- }
1031
- }
1032
- }
1033
- Object.defineProperty(SkyTextEditorUrlModalComponent.prototype, "activeTab", {
1034
- get: function () {
1035
- return this._activeTab;
1036
- },
1037
- set: function (value) {
1038
- this._activeTab = value;
1039
- this.valid = this.isValid();
1040
- },
1041
- enumerable: true,
1042
- configurable: true
1043
- });
1044
- Object.defineProperty(SkyTextEditorUrlModalComponent.prototype, "emailAddress", {
1045
- get: function () {
1046
- return this._emailAddress;
1047
- },
1048
- set: function (value) {
1049
- this._emailAddress = value;
1050
- this.valid = this.isValid();
1051
- },
1052
- enumerable: true,
1053
- configurable: true
1054
- });
1055
- Object.defineProperty(SkyTextEditorUrlModalComponent.prototype, "url", {
1056
- get: function () {
1057
- return this._url;
1058
- },
1059
- set: function (value) {
1060
- this._url = value;
1061
- this.valid = this.isValid();
1062
- },
1063
- enumerable: true,
1064
- configurable: true
1065
- });
1066
- SkyTextEditorUrlModalComponent.prototype.activeTabChanged = function (value) {
1067
- this.activeTab = value;
1068
- };
1069
- SkyTextEditorUrlModalComponent.prototype.save = function () {
1070
- if (this.isValid()) {
1071
- if (this.activeTab === 0) {
1072
- this.modalInstance.save({
1073
- url: this.url,
1074
- target: this.target ? parseInt(this.target, undefined) : UrlTarget.None
1075
- });
1076
- }
1077
- else {
1078
- this.modalInstance.save({
1079
- url: this.getEmailUrl(),
1080
- target: UrlTarget.None
1081
- });
1082
- }
1083
- }
1084
- };
1085
- SkyTextEditorUrlModalComponent.prototype.cancel = function () {
1086
- this.modalInstance.cancel();
1087
- };
1088
- SkyTextEditorUrlModalComponent.prototype.getEmailUrl = function () {
1089
- return emailKey + this.emailAddress + (this.subject ? '?Subject=' + encodeURI(this.subject) : '');
1090
- };
1091
- SkyTextEditorUrlModalComponent.prototype.isValid = function () {
1092
- if (this.activeTab === 0) {
1093
- return !!this.url && SkyValidation.isUrl(this.url);
1094
- }
1095
- return !!this.emailAddress && SkyValidation.isEmail(this.emailAddress);
1096
- };
1097
- SkyTextEditorUrlModalComponent.ctorParameters = function () { return [
1098
- { type: SkyModalInstance },
1099
- { type: SkyUrlModalContext }
1100
- ]; };
1101
- SkyTextEditorUrlModalComponent = __decorate([
1102
- Component({
1103
- selector: 'skyux-text-editor-url-modal',
1104
- template: "<sky-modal>\n <sky-modal-header>\n {{ 'skyux_text_editor_url_modal_header_label' | skyLibResources }}\n </sky-modal-header>\n <sky-modal-content>\n <sky-tabset\n data-sky-id=\"test-tabset\"\n [active]=\"activeTab\"\n (activeChange)=\"activeTabChanged($event)\"\n >\n <sky-tab\n tabHeading=\"Web page\"\n >\n <div class=\"sky-form-group sky-text-editor-url-modal-first-field\">\n <sky-input-box>\n <label\n class=\"sky-control-label sky-control-label-required\"\n [for]=\"urlInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_url_label' | skyLibResources }}\n </label>\n <input\n class=\"sky-form-control\"\n type=\"text\"\n [(ngModel)]=\"url\"\n skyId\n #urlInput=\"skyId\"\n />\n </sky-input-box>\n </div>\n <sky-input-box class=\"sky-form-group\">\n <label\n class=\"sky-control-label\"\n [for]=\"targetInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_open_label' | skyLibResources }}\n </label>\n <select\n class=\"sky-form-control\"\n [(ngModel)]=\"target\"\n skyId\n #targetInput=\"skyId\"\n >\n <option value=\"0\">\n {{ 'skyux_text_editor_url_modal_current_option_label' | skyLibResources }}\n </option>\n <option value=\"1\">\n {{ 'skyux_text_editor_url_modal_new_option_label' | skyLibResources }}\n </option>\n </select>\n </sky-input-box>\n </sky-tab>\n <sky-tab\n tabHeading=\"Email address\"\n >\n <div class=\"sky-form-group first-field\">\n <sky-input-box>\n <label\n class=\"sky-control-label sky-control-label-required\"\n [for]=\"emailAddressInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_email_label' | skyLibResources }}\n </label>\n <input\n class=\"sky-form-control\"\n type=\"text\"\n [(ngModel)]=\"emailAddress\"\n skyId\n #emailAddressInput=\"skyId\"\n />\n </sky-input-box>\n </div>\n <sky-input-box class=\"sky-form-group\">\n <label\n class=\"sky-control-label\"\n [for]=\"subjectInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_subject_label' | skyLibResources }}\n </label>\n <input\n class=\"sky-form-control\"\n type=\"text\"\n [(ngModel)]=\"subject\"\n skyId\n #subjectInput=\"skyId\"\n />\n </sky-input-box>\n </sky-tab>\n </sky-tabset>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n type=\"submit\"\n class=\"sky-btn sky-btn-primary\"\n [disabled]=\"!valid\"\n (click)=\"save()\"\n >\n {{ 'skyux_text_editor_url_modal_save_button_label' | skyLibResources }}\n </button>\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link\"\n (click)=\"cancel()\"\n >\n {{ 'skyux_text_editor_url_modal_cancel_button_label' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n",
1105
- styles: [".sky-text-editor-url-modal-first-field{margin-top:15px}"]
1106
- })
1107
- ], SkyTextEditorUrlModalComponent);
1108
- return SkyTextEditorUrlModalComponent;
1109
- }());
1110
-
1111
- /**
1112
- * @internal
1113
- */
1114
- var SkyTextEditorToolbarComponent = /** @class */ (function () {
1115
- function SkyTextEditorToolbarComponent(adapterService, changeDetector, modalService) {
1116
- this.adapterService = adapterService;
1117
- this.changeDetector = changeDetector;
1118
- this.modalService = modalService;
1119
- this.editorFocusStream = new Subject();
1120
- this.backColorpickerStream = new Subject();
1121
- this.colorpickerStream = new Subject();
1122
- this.fontPickerStream = new Subject();
1123
- this.fontSizeStream = new Subject();
1124
- this._disabled = false;
1125
- this._styleState = STYLE_STATE_DEFAULTS;
1126
- }
1127
- Object.defineProperty(SkyTextEditorToolbarComponent.prototype, "styleState", {
1128
- get: function () {
1129
- return this._styleState;
1130
- },
1131
- set: function (value) {
1132
- this._styleState = value;
1133
- if (value.font !== this.styleStateFontName) {
1134
- if (value.font === '\"Blackbaud Sans\", Arial, sans-serif') {
1135
- this.styleStateFontName = this.getFontName('Blackbaud Sans');
1136
- }
1137
- else {
1138
- this.styleStateFontName = this.getFontName(value.font);
1139
- }
1140
- }
1141
- },
1142
- enumerable: true,
1143
- configurable: true
1144
- });
1145
- Object.defineProperty(SkyTextEditorToolbarComponent.prototype, "disabled", {
1146
- get: function () {
1147
- return this._disabled;
1148
- },
1149
- set: function (value) {
1150
- var coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
1151
- if (coercedValue !== this.disabled) {
1152
- this._disabled = coercedValue;
1153
- this.changeDetector.markForCheck();
1154
- }
1155
- },
1156
- enumerable: true,
1157
- configurable: true
1158
- });
1159
- SkyTextEditorToolbarComponent.prototype.ngOnInit = function () {
1160
- var _this = this;
1161
- this.editorFocusStream.subscribe(function () {
1162
- _this.styleState = __assign(__assign({}, _this._styleState), _this.adapterService.getStyleState(_this.editorId));
1163
- _this.closeDropdowns();
1164
- _this.changeDetector.detectChanges();
1165
- });
1166
- };
1167
- SkyTextEditorToolbarComponent.prototype.execCommand = function (command, value) {
1168
- if (value === void 0) { value = ''; }
1169
- this.adapterService.execCommand(this.editorId, {
1170
- command: command,
1171
- value: value
1172
- });
1173
- this.styleState = __assign(__assign({}, this.styleState), this.adapterService.getStyleState(this.editorId));
1174
- };
1175
- SkyTextEditorToolbarComponent.prototype.toggleFontStyle = function (currentState, newState, command) {
1176
- if (currentState !== newState) {
1177
- this.execCommand(command);
1178
- }
1179
- // Force sky-checkbox to show changes on user's initial click.
1180
- this.changeDetector.detectChanges();
1181
- };
1182
- SkyTextEditorToolbarComponent.prototype.link = function () {
1183
- var _this = this;
1184
- var priorSelection = this.adapterService.saveSelection(this.editorId);
1185
- var currentLink = this.adapterService.getLink(this.editorId);
1186
- var inputModal = this.modalService.open(SkyTextEditorUrlModalComponent, [{
1187
- provide: SkyUrlModalContext,
1188
- useValue: { urlResult: currentLink }
1189
- }]);
1190
- inputModal.closed.subscribe(function (result) {
1191
- if (result.reason === 'save' && priorSelection) {
1192
- if (currentLink) {
1193
- var anchor = _this.adapterService.getSelectedAnchorTag(_this.editorId);
1194
- _this.adapterService.selectElement(_this.editorId, anchor);
1195
- }
1196
- _this.execCommand('unlink');
1197
- if (result.data.target === UrlTarget.None) {
1198
- // Current window
1199
- _this.execCommand('createLink', result.data.url);
1200
- }
1201
- else {
1202
- // New Window
1203
- var sText = _this.adapterService.getCurrentSelection(_this.editorId);
1204
- _this.execCommand('insertHTML', '<a href="' + result.data.url + '" rel="noopener noreferrer" target="_blank">' + sText + '</a>');
1205
- }
1206
- }
1207
- });
1208
- };
1209
- SkyTextEditorToolbarComponent.prototype.unlink = function () {
1210
- var currentSelectionRange = this.adapterService.getCurrentSelection(this.editorId).getRangeAt(0);
1211
- if (currentSelectionRange.toString().length <= 0) {
1212
- var anchorTag = this.adapterService.getSelectedAnchorTag(this.editorId);
1213
- this.adapterService.selectElement(this.editorId, anchorTag);
1214
- }
1215
- this.execCommand('unlink');
1216
- };
1217
- SkyTextEditorToolbarComponent.prototype.changeFontSize = function (size) {
1218
- this.adapterService.setFontSize(this.editorId, size);
1219
- this.styleState = __assign(__assign({}, this.styleState), this.adapterService.getStyleState(this.editorId));
1220
- };
1221
- SkyTextEditorToolbarComponent.prototype.onColorpickerColorChanged = function (color, isBackground) {
1222
- if (isBackground === void 0) { isBackground = false; }
1223
- this.execCommand(isBackground ? 'backColor' : 'foreColor', color.hex);
1224
- };
1225
- SkyTextEditorToolbarComponent.prototype.closeDropdowns = function () {
1226
- var message = { type: SkyColorpickerMessageType.Close };
1227
- this.colorpickerStream.next(message);
1228
- this.backColorpickerStream.next(message);
1229
- this.fontPickerStream.next({ type: SkyDropdownMessageType.Close });
1230
- this.fontSizeStream.next({ type: SkyDropdownMessageType.Close });
1231
- };
1232
- SkyTextEditorToolbarComponent.prototype.getFontName = function (fontName) {
1233
- for (var i = 0; i < this.fontList.length; i++) {
1234
- if (fontName.replace(/['"]+/g, '') === this.fontList[i].name) {
1235
- return this.fontList[i].name;
1236
- }
1237
- }
1238
- };
1239
- SkyTextEditorToolbarComponent.ctorParameters = function () { return [
1240
- { type: SkyTextEditorAdapterService },
1241
- { type: ChangeDetectorRef },
1242
- { type: SkyModalService }
1243
- ]; };
1244
- __decorate([
1245
- Input()
1246
- ], SkyTextEditorToolbarComponent.prototype, "editorFocusStream", void 0);
1247
- __decorate([
1248
- Input()
1249
- ], SkyTextEditorToolbarComponent.prototype, "editorId", void 0);
1250
- __decorate([
1251
- Input()
1252
- ], SkyTextEditorToolbarComponent.prototype, "fontList", void 0);
1253
- __decorate([
1254
- Input()
1255
- ], SkyTextEditorToolbarComponent.prototype, "fontSizeList", void 0);
1256
- __decorate([
1257
- Input()
1258
- ], SkyTextEditorToolbarComponent.prototype, "toolbarActions", void 0);
1259
- __decorate([
1260
- Input()
1261
- ], SkyTextEditorToolbarComponent.prototype, "styleState", null);
1262
- __decorate([
1263
- Input()
1264
- ], SkyTextEditorToolbarComponent.prototype, "disabled", null);
1265
- SkyTextEditorToolbarComponent = __decorate([
1266
- Component({
1267
- selector: 'sky-text-editor-toolbar',
1268
- template: "\n <sky-toolbar-item *ngFor=\"let action of toolbarActions\"\n class=\"sky-text-editor-toolbar-action\"\n [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n >\n <ng-container\n [ngSwitch]=\"action\"\n >\n <ng-container *ngSwitchCase=\"'font-family'\">\n <sky-dropdown\n class=\"sky-text-editor-font-picker\"\n [disabled]=\"disabled\"\n [label]=\"'Font: ' + styleStateFontName\"\n [messageStream]=\"fontPickerStream\"\n >\n <sky-dropdown-button\n [ngStyle]=\"{\n 'font-family': styleState.font\n }\"\n >\n {{ styleStateFontName }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let fontModel of fontList\">\n <button\n type=\"button\"\n [ngStyle]=\"{\n 'font-family': fontModel.value\n }\"\n (click)=\"execCommand('fontname', fontModel.name)\"\n >\n {{ fontModel.name }}\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'font-size'\">\n <sky-dropdown\n class=\"sky-text-editor-font-size-picker\"\n [disabled]=\"disabled\"\n [label]=\"'Font size: ' + styleState.fontSize + 'px'\"\n [messageStream]=\"fontSizeStream\"\n >\n <sky-dropdown-button\n [ngStyle]=\"{\n 'font-family': styleState.fontSize\n }\"\n >\n {{ styleState.fontSize + 'px' }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let size of fontSizeList\">\n <button\n type=\"button\"\n (click)=\"changeFontSize(size)\"\n >\n {{ size + 'px' }}\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'font-style'\">\n <div\n class=\"sky-switch-icon-group sky-text-editor-font-style-picker\"\n >\n <sky-checkbox\n icon=\"bold\"\n label=\"Bold\"\n title=\"Bold\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.boldState\"\n (ngModelChange)=\"toggleFontStyle(styleState.boldState, $event, 'bold')\"\n >\n </sky-checkbox>\n <sky-checkbox\n icon=\"italic\"\n label=\"Italicized\"\n title=\"Italicized\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.italicState\"\n (ngModelChange)=\"toggleFontStyle(styleState.italicState, $event, 'italic')\"\n >\n </sky-checkbox>\n <sky-checkbox\n icon=\"underline\"\n label=\"Underline\"\n title=\"Underline\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.underlineState\"\n (ngModelChange)=\"toggleFontStyle(styleState.underlineState, $event, 'underline')\"\n >\n </sky-checkbox>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'color'\">\n <div class=\"sky-text-editor-colorpicker-group\">\n <div class=\"sky-text-editor-colorpicker-container\">\n <sky-colorpicker\n class=\"sky-text-editor-font-color-picker\"\n label=\"Font color\"\n [messageStream]=\"colorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\n #colorPicker\n >\n <input\n outputFormat=\"hex\"\n type=\"text\"\n [allowTransparency]=\"false\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.fontColor\"\n [skyColorpickerInput]=\"colorPicker\"\n />\n </sky-colorpicker>\n </div>\n <div class=\"sky-text-editor-colorpicker-container\">\n <sky-colorpicker\n class=\"sky-text-editor-background-color-picker\"\n label=\"Background color\"\n [messageStream]=\"backColorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event, true)\"\n #backColorPicker\n >\n <input\n outputFormat=\"rgba\"\n type=\"text\"\n [allowTransparency]=\"true\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.backColor\"\n [skyColorpickerInput]=\"backColorPicker\"\n />\n </sky-colorpicker>\n </div>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'list'\">\n <div\n class=\"sky-switch-icon-group\"\n >\n <button\n aria-label=\"Bulleted list\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Bulleted list\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertUnorderedList')\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"list-ul\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"bullet-list-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Numbered list\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Numbered list\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertOrderedList')\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"list-ol\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"number-list-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'alignment'\">\n <div\n class=\"sky-switch-icon-group\"\n >\n <button\n aria-label=\"Align left\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align left\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyLeft')\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"align-left\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"align-left-text-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Align center\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align center\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyCenter')\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"align-center\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"center-text-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Align right\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align right\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyRight')\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"align-right\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"align-right-text-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'indentation'\">\n <div\n class=\"sky-switch-icon-group\"\n >\n <button\n aria-label=\"Outdent\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Outdent\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('outdent')\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"outdent\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"outdent-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Indent\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Indent\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('indent')\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"indent\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"indent-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'undo-redo'\">\n <div\n class=\"sky-switch-icon-group\"\n >\n <button\n aria-label=\"Undo\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Undo\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('undo')\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"undo\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"undo-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Redo\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Redo\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('redo')\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"repeat\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"redo-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'link'\">\n <div\n class=\"sky-switch-icon-group\"\n >\n <button\n aria-label=\"Link\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Link\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'icon-btn-active': styleState.linkState\n }\"\n (click)=\"link()\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"link\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"link-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Unlink\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Unlink\"\n [disabled]=\"!styleState.linkState || disabled\"\n (click)=\"unlink()\"\n >\n <sky-icon *skyThemeIf=\"'default'\"\n icon=\"unlink\"\n >\n </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"unlink-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </ng-container>\n </ng-container>\n </sky-toolbar-item>\n",
1269
- changeDetection: ChangeDetectionStrategy.OnPush,
1270
- styles: [".sky-text-editor-toolbar-action .sky-toolbar-item{margin-right:15px}.sky-text-editor-toolbar-action .sky-text-editor-font-picker ::ng-deep .sky-dropdown-button-content-container{width:140px;height:20px;text-align:left}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group{display:flex}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{position:relative;top:3px;margin:0 10px 0 0}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child{margin-right:0}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn{margin-left:0;margin-right:0;border-radius:0;border-right:none}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:first-of-type{border-top-left-radius:3px;border-bottom-left-radius:3px}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border-top-right-radius:3px;border-bottom-right-radius:3px;border-right:1px solid #cdcfd2}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:first-of-type,:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}:host-context(.sky-theme-modern) .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}.sky-theme-modern .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}.sky-theme-modern .sky-switch-icon-group .sky-btn:first-of-type,.sky-theme-modern .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}.sky-theme-modern .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}"]
1271
- })
1272
- ], SkyTextEditorToolbarComponent);
1273
- return SkyTextEditorToolbarComponent;
1274
- }());
1275
-
1276
- /**
1277
- * @internal
1278
- */
1279
- var MENU_DEFAULTS = [
1280
- 'edit',
1281
- 'format'
1282
- ];
1283
-
1284
- /**
1285
- * @internal
1286
- */
1287
- var TOOLBAR_ACTION_DEFAULTS = [
1288
- 'font-family',
1289
- 'font-size',
1290
- 'font-style',
1291
- 'color',
1292
- 'list',
1293
- 'link'
1294
- ];
1295
-
1296
- /**
1297
- * @internal
1298
- */
1299
- var FONT_SIZE_LIST_DEFAULTS = [6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 36, 48];
1300
-
1301
- /**
1302
- * Auto-incrementing integer used to generate unique ids for radio components.
1303
- */
1304
- var nextUniqueId = 0;
1305
- /**
1306
- * The text editor component lets users format and manipulate text.
1307
- */
1308
- var SkyTextEditorComponent = /** @class */ (function () {
1309
- function SkyTextEditorComponent(changeDetector, coreAdapterService, adapterService, editorService, sanitizationService) {
1310
- this.changeDetector = changeDetector;
1311
- this.coreAdapterService = coreAdapterService;
1312
- this.adapterService = adapterService;
1313
- this.editorService = editorService;
1314
- this.sanitizationService = sanitizationService;
1315
- /**
1316
- * Indicates whether to put focus on the editor after it renders.
1317
- */
1318
- this.autofocus = false;
1319
- this.editorFocusStream = new Subject();
1320
- // tslint:disable: max-line-length
1321
- /**
1322
- * Specifies the fonts to include in the font picker.
1323
- * @default [{name: 'Blackbaud Sans', value: '"Blackbaud Sans", Arial, sans-serif'}, {name: 'Arial', value: 'Arial'}, {name: 'Arial Black', value: '"Arial Black"'}, {name: 'Courier New', value: '"Courier New"'}, {name: 'Georgia', value: 'Georgia, serif'}, {name: 'Tahoma', value: 'Tahoma, Geneva, sans-serif'}, {name: 'Times New Roman', value: '"Times New Roman"'}, {name: 'Trebuchet MS', value: '"Trebuchet MS", sans-serif'}, {name: 'Verdana', value: 'Verdana, Geneva, sans-serif'}]
1324
- */
1325
- // tslint:enable: max-line-length
1326
- this.fontList = FONT_LIST_DEFAULTS;
1327
- /**
1328
- * Specifies the font sizes to include in the font size picker.
1329
- * @default [6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 36, 48]
1330
- */
1331
- this.fontSizeList = FONT_SIZE_LIST_DEFAULTS;
1332
- /**
1333
- * Specifies a unique ID attribute for the text editor.
1334
- * By default, the component generates a random ID.
1335
- */
1336
- this.id = "sky-text-editor-" + ++nextUniqueId;
1337
- /**
1338
- * Specifies the menus to include in the menu bar.
1339
- * @default [ 'edit', 'format' ]
1340
- */
1341
- this.menus = MENU_DEFAULTS;
1342
- /**
1343
- * Specifies the merge fields to include in the merge field menu.
1344
- */
1345
- this.mergeFields = [];
1346
- // tslint:disable: max-line-length
1347
- /**
1348
- * Specifies the actions to include in the toolbar and determines their order.
1349
- * @default [ 'font-family', 'font-size', 'font-style', 'color', 'list', 'link ]
1350
- */
1351
- // tslint:enable: max-line-length
1352
- this.toolbarActions = TOOLBAR_ACTION_DEFAULTS;
1353
- this.focusInitialized = false;
1354
- this.initialized = false;
1355
- this.ngUnsubscribe = new Subject();
1356
- this._disabled = false;
1357
- this._initialStyleState = Object.assign({}, STYLE_STATE_DEFAULTS);
1358
- this._placeholder = '';
1359
- this._value = '<p></p>';
1360
- /* istanbul ignore next */
1361
- this.onTouch = function () { };
1362
- /* istanbul ignore next */
1363
- this._onChange = function (_) { };
1364
- }
1365
- SkyTextEditorComponent_1 = SkyTextEditorComponent;
1366
- Object.defineProperty(SkyTextEditorComponent.prototype, "disabled", {
1367
- get: function () {
1368
- return this._disabled;
1369
- },
1370
- /**
1371
- * Indicates whether to disable the text editor.
1372
- * @default false
1373
- */
1374
- set: function (value) {
1375
- var coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
1376
- if (coercedValue !== this.disabled) {
1377
- this._disabled = coercedValue;
1378
- if (this._disabled) {
1379
- this.adapterService.disableEditor(this.id, this.focusableChildren, this.iframeRef.nativeElement);
1380
- }
1381
- else {
1382
- this.adapterService.enableEditor(this.id, this.focusableChildren, this.iframeRef.nativeElement);
1383
- }
1384
- this.changeDetector.markForCheck();
1385
- }
1386
- },
1387
- enumerable: true,
1388
- configurable: true
1389
- });
1390
- Object.defineProperty(SkyTextEditorComponent.prototype, "initialStyleState", {
1391
- get: function () {
1392
- return this._initialStyleState;
1393
- },
1394
- /**
1395
- * Specifies the initial styles for all content, including background color, font size, and link state.
1396
- */
1397
- set: function (state) {
1398
- // Do not update the state after initialization has taken place
1399
- if (!this.initialized) {
1400
- this._initialStyleState = __assign(__assign({}, STYLE_STATE_DEFAULTS), state);
1401
- }
1402
- },
1403
- enumerable: true,
1404
- configurable: true
1405
- });
1406
- Object.defineProperty(SkyTextEditorComponent.prototype, "placeholder", {
1407
- get: function () {
1408
- return this._placeholder;
1409
- },
1410
- /**
1411
- * Specifies placeholder text to display when the text entry area is empty.
1412
- */
1413
- set: function (value) {
1414
- if (value !== this._placeholder) {
1415
- this._placeholder = value;
1416
- if (this.initialized) {
1417
- this.adapterService.setPlaceholder(this.id, value);
1418
- }
1419
- }
1420
- },
1421
- enumerable: true,
1422
- configurable: true
1423
- });
1424
- Object.defineProperty(SkyTextEditorComponent.prototype, "value", {
1425
- get: function () {
1426
- return this._value;
1427
- },
1428
- set: function (value) {
1429
- // Set clear state to be an empty string
1430
- var valueString = value;
1431
- if (!value || (value.trim() === '<p></p>' && value.trim() === '<br>')) {
1432
- valueString = '';
1433
- }
1434
- valueString = this.sanitizationService.sanitize(valueString).trim();
1435
- if (this._value !== valueString) {
1436
- this._value = valueString;
1437
- // Autofocus isn't testable in Firefox and IE.
1438
- /* istanbul ignore next */
1439
- if (this.autofocus && !this.focusInitialized) {
1440
- this.adapterService.focusEditor(this.id);
1441
- this.focusInitialized = true;
1442
- }
1443
- this.onChange();
1444
- }
1445
- },
1446
- enumerable: true,
1447
- configurable: true
1448
- });
1449
- SkyTextEditorComponent.prototype.ngAfterViewInit = function () {
1450
- var _this = this;
1451
- this.adapterService.addEditor(this.id, this.iframeRef.nativeElement, this.initialStyleState, this.placeholder);
1452
- this.editorService.selectionChangeListener(this.id)
1453
- .pipe(takeUntil(this.ngUnsubscribe))
1454
- .subscribe(function () {
1455
- _this.updateValueAndStyle();
1456
- _this.editorFocusStream.next();
1457
- });
1458
- this.editorService.clickListener(this.id)
1459
- .pipe(takeUntil(this.ngUnsubscribe))
1460
- .subscribe(function () {
1461
- _this.editorFocusStream.next();
1462
- });
1463
- this.editorService.commandChangeListener(this.id)
1464
- .pipe(takeUntil(this.ngUnsubscribe))
1465
- .subscribe(function () {
1466
- _this.updateValueAndStyle();
1467
- });
1468
- this.adapterService.setEditorInnerHtml(this.id, this._value);
1469
- /* istanbul ignore next */
1470
- if (this.autofocus) {
1471
- this.adapterService.focusEditor(this.id);
1472
- }
1473
- this.focusableChildren = this.coreAdapterService.getFocusableChildren(this.iframeRef.nativeElement, {
1474
- ignoreVisibility: true
1475
- });
1476
- this.initialized = true;
1477
- };
1478
- SkyTextEditorComponent.prototype.ngOnDestroy = function () {
1479
- this.adapterService.removeObservers(this.editorService.editors[this.id]);
1480
- this.editorService.removeEditor(this.id);
1481
- this.ngUnsubscribe.next();
1482
- this.ngUnsubscribe.complete();
1483
- };
1484
- SkyTextEditorComponent.prototype.writeValue = function (obj) {
1485
- this.value = obj;
1486
- // Update HTML if necessary.
1487
- var editorValue = this.adapterService.getEditorInnerHtml(this.id);
1488
- if (this.initialized && editorValue !== this._value) {
1489
- this.adapterService.setEditorInnerHtml(this.id, this._value);
1490
- }
1491
- };
1492
- SkyTextEditorComponent.prototype.registerOnChange = function (fn) {
1493
- this._onChange = fn;
1494
- };
1495
- SkyTextEditorComponent.prototype.registerOnTouched = function (fn) {
1496
- this.onTouch = fn;
1497
- };
1498
- /**
1499
- * Implemented as part of ControlValueAccessor.
1500
- */
1501
- SkyTextEditorComponent.prototype.setDisabledState = function (isDisabled) {
1502
- this.disabled = isDisabled;
1503
- };
1504
- SkyTextEditorComponent.prototype.onChange = function () {
1505
- this._onChange(this.value);
1506
- };
1507
- SkyTextEditorComponent.prototype.updateValueAndStyle = function () {
1508
- this.value = this.adapterService.getEditorInnerHtml(this.id);
1509
- this._initialStyleState = __assign(__assign({}, this._initialStyleState), this.adapterService.getStyleState(this.id));
1510
- };
1511
- var SkyTextEditorComponent_1;
1512
- SkyTextEditorComponent.ctorParameters = function () { return [
1513
- { type: ChangeDetectorRef },
1514
- { type: SkyCoreAdapterService },
1515
- { type: SkyTextEditorAdapterService },
1516
- { type: SkyTextEditorService },
1517
- { type: SkyTextSanitizationService }
1518
- ]; };
1519
- __decorate([
1520
- Input()
1521
- ], SkyTextEditorComponent.prototype, "autofocus", void 0);
1522
- __decorate([
1523
- Input()
1524
- ], SkyTextEditorComponent.prototype, "disabled", null);
1525
- __decorate([
1526
- Input()
1527
- ], SkyTextEditorComponent.prototype, "fontList", void 0);
1528
- __decorate([
1529
- Input()
1530
- ], SkyTextEditorComponent.prototype, "fontSizeList", void 0);
1531
- __decorate([
1532
- Input()
1533
- ], SkyTextEditorComponent.prototype, "id", void 0);
1534
- __decorate([
1535
- Input()
1536
- ], SkyTextEditorComponent.prototype, "initialStyleState", null);
1537
- __decorate([
1538
- Input()
1539
- ], SkyTextEditorComponent.prototype, "menus", void 0);
1540
- __decorate([
1541
- Input()
1542
- ], SkyTextEditorComponent.prototype, "mergeFields", void 0);
1543
- __decorate([
1544
- Input()
1545
- ], SkyTextEditorComponent.prototype, "placeholder", null);
1546
- __decorate([
1547
- Input()
1548
- ], SkyTextEditorComponent.prototype, "toolbarActions", void 0);
1549
- __decorate([
1550
- ViewChild('iframe')
1551
- ], SkyTextEditorComponent.prototype, "iframeRef", void 0);
1552
- SkyTextEditorComponent = SkyTextEditorComponent_1 = __decorate([
1553
- Component({
1554
- selector: 'sky-text-editor',
1555
- template: "<div\n class=\"sky-text-editor\"\n>\n <sky-toolbar\n class=\"sky-text-editor-toolbar\"\n >\n <sky-toolbar-section\n aria-label=\"Text formatting\"\n class=\"menubar\"\n role=\"toolbar\"\n >\n <sky-text-editor-menubar\n [disabled]=\"disabled\"\n [editorFocusStream]=\"editorFocusStream\"\n [editorId]=\"id\"\n [menus]=\"menus\"\n [mergeFields]=\"mergeFields\"\n >\n </sky-text-editor-menubar>\n </sky-toolbar-section>\n <sky-toolbar-section\n aria-label=\"Text formatting\"\n class=\"toolbar\"\n role=\"toolbar\"\n >\n <sky-text-editor-toolbar\n [disabled]=\"disabled\"\n [editorFocusStream]=\"editorFocusStream\"\n [editorId]=\"id\"\n [fontList]=\"fontList\"\n [fontSizeList]=\"fontSizeList\"\n [toolbarActions]=\"toolbarActions\"\n [styleState]=\"initialStyleState\"\n >\n </sky-text-editor-toolbar>\n </sky-toolbar-section>\n </sky-toolbar>\n <iframe\n class=\"sky-text-editor-wrapper\"\n src=\"about:blank\"\n title=\"Text Editor\"\n [ngClass]=\"{\n 'sky-text-editor-wrapper-disabled': disabled\n }\"\n #iframe\n >\n </iframe>\n</div>\n",
1556
- providers: [
1557
- {
1558
- provide: NG_VALUE_ACCESSOR,
1559
- // tslint:disable-next-line: no-forward-ref
1560
- useExisting: forwardRef(function () { return SkyTextEditorComponent_1; }),
1561
- multi: true
1562
- }
1563
- ],
1564
- changeDetection: ChangeDetectionStrategy.OnPush,
1565
- encapsulation: ViewEncapsulation.None,
1566
- styles: [".sky-text-editor .sky-text-editor-wrapper{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;height:300px;padding:1rem;font-size:1.2rem;border:1px solid silver;overflow-y:auto;outline:0}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ededee}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:1px solid #cdcfd2!important;border-right:1px solid #cdcfd2!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-dropdown-button{border:none}.sky-text-editor .sky-text-editor-toolbar sky-text-editor-menubar,.sky-text-editor .sky-text-editor-toolbar sky-text-editor-toolbar{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{border:1px solid #d2d2d2}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ececed}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar{padding:10px 10px 0}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-top:1px solid #d2d2d2!important;border-left:1px solid #d2d2d2!important;border-right:1px solid #d2d2d2!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 0 0!important}"]
1567
- })
1568
- ], SkyTextEditorComponent);
1569
- return SkyTextEditorComponent;
1570
- }());
1571
-
1572
- var SkyTextEditorModule = /** @class */ (function () {
1573
- function SkyTextEditorModule() {
1574
- }
1575
- SkyTextEditorModule = __decorate([
1576
- NgModule({
1577
- imports: [
1578
- CommonModule,
1579
- FormsModule,
1580
- ReactiveFormsModule,
1581
- SkyCoreAdapterModule,
1582
- SkyTextEditorResourcesModule,
1583
- SkyI18nModule,
1584
- SkyIconModule,
1585
- SkyIdModule,
1586
- SkyInputBoxModule,
1587
- SkyColorpickerModule,
1588
- SkyCheckboxModule,
1589
- SkyDropdownModule,
1590
- SkyModalModule,
1591
- SkyTabsModule,
1592
- SkyThemeModule,
1593
- SkyToolbarModule
1594
- ],
1595
- exports: [
1596
- SkyTextEditorComponent,
1597
- SkyTextEditorUrlModalComponent,
1598
- SkyTextEditorToolbarComponent,
1599
- SkyTextEditorMenubarComponent
1600
- ],
1601
- declarations: [
1602
- SkyTextEditorComponent,
1603
- SkyTextEditorUrlModalComponent,
1604
- SkyTextEditorToolbarComponent,
1605
- SkyTextEditorMenubarComponent
1606
- ],
1607
- entryComponents: [
1608
- SkyTextEditorUrlModalComponent
1609
- ]
1610
- })
1611
- ], SkyTextEditorModule);
1612
- return SkyTextEditorModule;
1613
- }());
1614
-
1615
- /**
1616
- * Generated bundle index. Do not edit.
1617
- */
1618
-
1619
- export { SkyRichTextDisplayModule, SkyTextEditorModule, SkyRichTextDisplayComponent as ɵa, SkyTextSanitizationService as ɵb, SkyTextEditorResourcesModule as ɵc, SkyTextEditorResourcesProvider as ɵd, SkyTextEditorComponent as ɵe, SkyTextEditorAdapterService as ɵf, SkyTextEditorSelectionService as ɵg, SkyTextEditorService as ɵh, SkyTextEditorUrlModalComponent as ɵi, SkyUrlModalContext as ɵj, SkyTextEditorToolbarComponent as ɵk, SkyTextEditorMenubarComponent as ɵl };
1620
- //# sourceMappingURL=skyux-text-editor.js.map