@skyux/text-editor 5.0.2 → 5.5.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -1
- package/bundles/skyux-text-editor.umd.js +270 -170
- package/documentation.json +109 -57
- package/esm2015/index.js +15 -0
- package/esm2015/index.js.map +1 -0
- package/esm2015/lib/modules/rich-text-display/rich-text-display.component.js +39 -0
- package/esm2015/lib/modules/rich-text-display/rich-text-display.component.js.map +1 -0
- package/esm2015/lib/modules/rich-text-display/rich-text-display.module.js +18 -0
- package/esm2015/lib/modules/rich-text-display/rich-text-display.module.js.map +1 -0
- package/esm2015/lib/modules/shared/forms-utility.js +10 -0
- package/esm2015/lib/modules/shared/forms-utility.js.map +1 -0
- package/esm2015/lib/modules/shared/sky-text-editor-resources.module.js +106 -0
- package/esm2015/lib/modules/shared/sky-text-editor-resources.module.js.map +1 -0
- package/esm2015/lib/modules/text-editor/defaults/font-list-defaults.js +42 -0
- package/esm2015/lib/modules/text-editor/defaults/font-list-defaults.js.map +1 -0
- package/esm2015/lib/modules/text-editor/defaults/font-size-list-defaults.js +7 -0
- package/esm2015/lib/modules/text-editor/defaults/font-size-list-defaults.js.map +1 -0
- package/esm2015/lib/modules/text-editor/defaults/menu-defaults.js +5 -0
- package/esm2015/lib/modules/text-editor/defaults/menu-defaults.js.map +1 -0
- package/esm2015/lib/modules/text-editor/defaults/style-state-defaults.js +15 -0
- package/esm2015/lib/modules/text-editor/defaults/style-state-defaults.js.map +1 -0
- package/esm2015/lib/modules/text-editor/defaults/toolbar-action-defaults.js +12 -0
- package/esm2015/lib/modules/text-editor/defaults/toolbar-action-defaults.js.map +1 -0
- package/esm2015/lib/modules/text-editor/menubar/text-editor-menubar.component.js +196 -0
- package/esm2015/lib/modules/text-editor/menubar/text-editor-menubar.component.js.map +1 -0
- package/esm2015/lib/modules/text-editor/services/text-editor-adapter.service.js +473 -0
- package/esm2015/lib/modules/text-editor/services/text-editor-adapter.service.js.map +1 -0
- package/esm2015/lib/modules/text-editor/services/text-editor-selection.service.js +80 -0
- package/esm2015/lib/modules/text-editor/services/text-editor-selection.service.js.map +1 -0
- package/esm2015/lib/modules/text-editor/services/text-editor.service.js +61 -0
- package/esm2015/lib/modules/text-editor/services/text-editor.service.js.map +1 -0
- package/esm2015/lib/modules/text-editor/services/text-sanitization.service.js +38 -0
- package/esm2015/lib/modules/text-editor/services/text-sanitization.service.js.map +1 -0
- package/esm2015/lib/modules/text-editor/text-editor.component.js +322 -0
- package/esm2015/lib/modules/text-editor/text-editor.component.js.map +1 -0
- package/esm2015/lib/modules/text-editor/text-editor.module.js +99 -0
- package/esm2015/lib/modules/text-editor/text-editor.module.js.map +1 -0
- package/esm2015/lib/modules/text-editor/toolbar/text-editor-toolbar.component.js +175 -0
- package/esm2015/lib/modules/text-editor/toolbar/text-editor-toolbar.component.js.map +1 -0
- package/esm2015/lib/modules/text-editor/types/editor-command.js +2 -0
- package/esm2015/lib/modules/text-editor/types/editor-command.js.map +1 -0
- package/esm2015/lib/modules/text-editor/types/editor-setting.js +2 -0
- package/esm2015/lib/modules/text-editor/types/editor-setting.js.map +1 -0
- package/esm2015/lib/modules/text-editor/types/font-state.js +2 -0
- package/esm2015/lib/modules/text-editor/types/font-state.js.map +1 -0
- package/esm2015/lib/modules/text-editor/types/menu-type.js +2 -0
- package/esm2015/lib/modules/text-editor/types/menu-type.js.map +1 -0
- package/esm2015/lib/modules/text-editor/types/style-state.js +2 -0
- package/esm2015/lib/modules/text-editor/types/style-state.js.map +1 -0
- package/esm2015/lib/modules/text-editor/types/text-editor-merge-field.js +2 -0
- package/esm2015/lib/modules/text-editor/types/text-editor-merge-field.js.map +1 -0
- package/esm2015/lib/modules/text-editor/types/toolbar-action-type.js +2 -0
- package/esm2015/lib/modules/text-editor/types/toolbar-action-type.js.map +1 -0
- package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-modal-context.js +6 -0
- package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-modal-context.js.map +1 -0
- package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-modal-result.js +2 -0
- package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-modal-result.js.map +1 -0
- package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-modal.component.js +121 -0
- package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-modal.component.js.map +1 -0
- package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-target.js +9 -0
- package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-target.js.map +1 -0
- package/esm2015/skyux-text-editor.js +2 -2
- package/esm2015/skyux-text-editor.js.map +1 -0
- package/fesm2015/skyux-text-editor.js +332 -232
- package/fesm2015/skyux-text-editor.js.map +1 -1
- package/index.d.ts +12 -0
- package/{modules → lib/modules}/rich-text-display/rich-text-display.component.d.ts +0 -0
- package/{modules → lib/modules}/rich-text-display/rich-text-display.module.d.ts +0 -0
- package/{modules → lib/modules}/shared/forms-utility.d.ts +0 -0
- package/{modules → lib/modules}/shared/sky-text-editor-resources.module.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/defaults/font-list-defaults.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/defaults/font-size-list-defaults.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/defaults/menu-defaults.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/defaults/style-state-defaults.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/defaults/toolbar-action-defaults.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/menubar/text-editor-menubar.component.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/services/text-editor-adapter.service.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/services/text-editor-selection.service.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/services/text-editor.service.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/services/text-sanitization.service.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/text-editor.component.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/text-editor.module.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/toolbar/text-editor-toolbar.component.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/types/editor-command.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/types/editor-setting.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/types/font-state.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/types/menu-type.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/types/style-state.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/types/text-editor-merge-field.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/types/toolbar-action-type.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/url-modal/text-editor-url-modal-context.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/url-modal/text-editor-url-modal-result.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/url-modal/text-editor-url-modal.component.d.ts +0 -0
- package/{modules → lib/modules}/text-editor/url-modal/text-editor-url-target.d.ts +0 -0
- package/package.json +27 -13
- package/skyux-text-editor.d.ts +1 -1
- package/LICENSE +0 -21
- package/bundles/skyux-text-editor.umd.js.map +0 -1
- package/esm2015/modules/rich-text-display/rich-text-display.component.js +0 -37
- package/esm2015/modules/rich-text-display/rich-text-display.module.js +0 -26
- package/esm2015/modules/shared/forms-utility.js +0 -10
- package/esm2015/modules/shared/sky-text-editor-resources.module.js +0 -41
- package/esm2015/modules/text-editor/defaults/font-list-defaults.js +0 -42
- package/esm2015/modules/text-editor/defaults/font-size-list-defaults.js +0 -5
- package/esm2015/modules/text-editor/defaults/menu-defaults.js +0 -8
- package/esm2015/modules/text-editor/defaults/style-state-defaults.js +0 -15
- package/esm2015/modules/text-editor/defaults/toolbar-action-defaults.js +0 -12
- package/esm2015/modules/text-editor/menubar/text-editor-menubar.component.js +0 -189
- package/esm2015/modules/text-editor/services/text-editor-adapter.service.js +0 -460
- package/esm2015/modules/text-editor/services/text-editor-selection.service.js +0 -76
- package/esm2015/modules/text-editor/services/text-editor.service.js +0 -61
- package/esm2015/modules/text-editor/services/text-sanitization.service.js +0 -38
- package/esm2015/modules/text-editor/text-editor.component.js +0 -307
- package/esm2015/modules/text-editor/text-editor.module.js +0 -101
- package/esm2015/modules/text-editor/toolbar/text-editor-toolbar.component.js +0 -163
- package/esm2015/modules/text-editor/types/editor-command.js +0 -2
- package/esm2015/modules/text-editor/types/editor-setting.js +0 -2
- package/esm2015/modules/text-editor/types/font-state.js +0 -2
- package/esm2015/modules/text-editor/types/menu-type.js +0 -2
- package/esm2015/modules/text-editor/types/style-state.js +0 -2
- package/esm2015/modules/text-editor/types/text-editor-merge-field.js +0 -2
- package/esm2015/modules/text-editor/types/toolbar-action-type.js +0 -2
- package/esm2015/modules/text-editor/url-modal/text-editor-url-modal-context.js +0 -6
- package/esm2015/modules/text-editor/url-modal/text-editor-url-modal-result.js +0 -2
- package/esm2015/modules/text-editor/url-modal/text-editor-url-modal.component.js +0 -112
- package/esm2015/modules/text-editor/url-modal/text-editor-url-target.js +0 -9
- package/esm2015/public-api.js +0 -15
- package/public-api.d.ts +0 -12
|
@@ -56,12 +56,12 @@ class SkyTextSanitizationService {
|
|
|
56
56
|
return domPurify.sanitize(htmlString, { ADD_ATTR: this.allowedAttributes });
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
|
-
SkyTextSanitizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
60
|
-
SkyTextSanitizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
61
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
59
|
+
SkyTextSanitizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextSanitizationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
60
|
+
SkyTextSanitizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextSanitizationService, providedIn: 'root' });
|
|
61
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextSanitizationService, decorators: [{
|
|
62
62
|
type: Injectable,
|
|
63
63
|
args: [{
|
|
64
|
-
providedIn: 'root'
|
|
64
|
+
providedIn: 'root',
|
|
65
65
|
}]
|
|
66
66
|
}] });
|
|
67
67
|
|
|
@@ -86,13 +86,13 @@ class SkyRichTextDisplayComponent {
|
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
|
-
SkyRichTextDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
90
|
-
SkyRichTextDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
91
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
89
|
+
SkyRichTextDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRichTextDisplayComponent, deps: [{ token: i1.DomSanitizer }, { token: SkyTextSanitizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
90
|
+
SkyRichTextDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyRichTextDisplayComponent, selector: "sky-rich-text-display", inputs: { richText: "richText" }, ngImport: i0, template: "<span class=\"sky-rich-text-display-text\" [innerHTML]=\"sanitizedText\"> </span>\n" });
|
|
91
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRichTextDisplayComponent, decorators: [{
|
|
92
92
|
type: Component,
|
|
93
93
|
args: [{
|
|
94
94
|
selector: 'sky-rich-text-display',
|
|
95
|
-
templateUrl: './rich-text-display.component.html'
|
|
95
|
+
templateUrl: './rich-text-display.component.html',
|
|
96
96
|
}]
|
|
97
97
|
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: SkyTextSanitizationService }]; }, propDecorators: { richText: [{
|
|
98
98
|
type: Input
|
|
@@ -100,23 +100,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
100
100
|
|
|
101
101
|
class SkyRichTextDisplayModule {
|
|
102
102
|
}
|
|
103
|
-
SkyRichTextDisplayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
104
|
-
SkyRichTextDisplayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
105
|
-
SkyRichTextDisplayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
106
|
-
|
|
107
|
-
]] });
|
|
108
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyRichTextDisplayModule, decorators: [{
|
|
103
|
+
SkyRichTextDisplayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRichTextDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
104
|
+
SkyRichTextDisplayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRichTextDisplayModule, declarations: [SkyRichTextDisplayComponent], imports: [CommonModule], exports: [SkyRichTextDisplayComponent] });
|
|
105
|
+
SkyRichTextDisplayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRichTextDisplayModule, imports: [[CommonModule]] });
|
|
106
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRichTextDisplayModule, decorators: [{
|
|
109
107
|
type: NgModule,
|
|
110
108
|
args: [{
|
|
111
|
-
imports: [
|
|
112
|
-
|
|
113
|
-
],
|
|
114
|
-
exports: [
|
|
115
|
-
SkyRichTextDisplayComponent
|
|
116
|
-
],
|
|
117
|
-
declarations: [
|
|
118
|
-
SkyRichTextDisplayComponent
|
|
119
|
-
]
|
|
109
|
+
imports: [CommonModule],
|
|
110
|
+
exports: [SkyRichTextDisplayComponent],
|
|
111
|
+
declarations: [SkyRichTextDisplayComponent],
|
|
120
112
|
}]
|
|
121
113
|
}] });
|
|
122
114
|
|
|
@@ -127,7 +119,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
127
119
|
* To update this file, simply rerun the command.
|
|
128
120
|
*/
|
|
129
121
|
const RESOURCES = {
|
|
130
|
-
'EN-US': {
|
|
122
|
+
'EN-US': {
|
|
123
|
+
skyux_text_editor_format_menu_action_bold_label: { message: 'Bold' },
|
|
124
|
+
skyux_text_editor_format_menu_action_bold_key_shortcut: {
|
|
125
|
+
message: 'Ctrl+B',
|
|
126
|
+
},
|
|
127
|
+
skyux_text_editor_format_menu_action_italic_label: { message: 'Italic' },
|
|
128
|
+
skyux_text_editor_format_menu_action_italic_key_shortcut: {
|
|
129
|
+
message: 'Ctrl+I',
|
|
130
|
+
},
|
|
131
|
+
skyux_text_editor_format_menu_action_underline_label: {
|
|
132
|
+
message: 'Underline',
|
|
133
|
+
},
|
|
134
|
+
skyux_text_editor_format_menu_action_underline_key_shortcut: {
|
|
135
|
+
message: 'Ctrl+U',
|
|
136
|
+
},
|
|
137
|
+
skyux_text_editor_format_menu_action_strikethrough_label: {
|
|
138
|
+
message: 'Strikethrough',
|
|
139
|
+
},
|
|
140
|
+
skyux_text_editor_format_menu_action_clear_formatting_label: {
|
|
141
|
+
message: 'Clear formatting',
|
|
142
|
+
},
|
|
143
|
+
skyux_text_editor_edit_menu_action_undo_label: { message: 'Undo' },
|
|
144
|
+
skyux_text_editor_edit_menu_action_undo_key_shortcut: { message: 'Ctrl+Z' },
|
|
145
|
+
skyux_text_editor_edit_menu_action_redo_label: { message: 'Redo' },
|
|
146
|
+
skyux_text_editor_edit_menu_action_redo_key_shortcut: { message: 'Ctrl+Y' },
|
|
147
|
+
skyux_text_editor_edit_menu_action_cut_label: { message: 'Cut' },
|
|
148
|
+
skyux_text_editor_edit_menu_action_cut_key_shortcut: { message: 'Ctrl+X' },
|
|
149
|
+
skyux_text_editor_edit_menu_action_copy_label: { message: 'Copy' },
|
|
150
|
+
skyux_text_editor_edit_menu_action_copy_key_shortcut: { message: 'Ctrl+C' },
|
|
151
|
+
skyux_text_editor_edit_menu_action_paste_label: { message: 'Paste' },
|
|
152
|
+
skyux_text_editor_edit_menu_action_paste_key_shortcut: {
|
|
153
|
+
message: 'Ctrl+V',
|
|
154
|
+
},
|
|
155
|
+
skyux_text_editor_edit_menu_action_select_all_label: {
|
|
156
|
+
message: 'Select all',
|
|
157
|
+
},
|
|
158
|
+
skyux_text_editor_edit_menu_action_select_all_key_shortcut: {
|
|
159
|
+
message: 'Ctrl+A',
|
|
160
|
+
},
|
|
161
|
+
skyux_text_editor_menubar_dropdown_button_edit_label: { message: 'Edit' },
|
|
162
|
+
skyux_text_editor_menubar_dropdown_button_format_label: {
|
|
163
|
+
message: 'Format',
|
|
164
|
+
},
|
|
165
|
+
skyux_text_editor_menubar_dropdown_button_insert_label: {
|
|
166
|
+
message: 'Insert merge field',
|
|
167
|
+
},
|
|
168
|
+
skyux_text_editor_url_modal_header_label: { message: 'Create link' },
|
|
169
|
+
skyux_text_editor_url_modal_url_label: {
|
|
170
|
+
message: 'Enter a URL to link to:',
|
|
171
|
+
},
|
|
172
|
+
skyux_text_editor_url_modal_open_label: {
|
|
173
|
+
message: 'Where should it open?',
|
|
174
|
+
},
|
|
175
|
+
skyux_text_editor_url_modal_current_option_label: {
|
|
176
|
+
message: 'Current window',
|
|
177
|
+
},
|
|
178
|
+
skyux_text_editor_url_modal_new_option_label: { message: 'New window' },
|
|
179
|
+
skyux_text_editor_url_modal_email_label: { message: 'Email address' },
|
|
180
|
+
skyux_text_editor_url_modal_subject_label: { message: 'Subject line' },
|
|
181
|
+
skyux_text_editor_url_modal_save_button_label: { message: 'Save' },
|
|
182
|
+
skyux_text_editor_url_modal_cancel_button_label: { message: 'Cancel' },
|
|
183
|
+
},
|
|
131
184
|
};
|
|
132
185
|
class SkyTextEditorResourcesProvider {
|
|
133
186
|
getString(localeInfo, name) {
|
|
@@ -139,75 +192,69 @@ class SkyTextEditorResourcesProvider {
|
|
|
139
192
|
*/
|
|
140
193
|
class SkyTextEditorResourcesModule {
|
|
141
194
|
}
|
|
142
|
-
SkyTextEditorResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
143
|
-
SkyTextEditorResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
144
|
-
SkyTextEditorResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
195
|
+
SkyTextEditorResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
196
|
+
SkyTextEditorResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorResourcesModule, exports: [SkyI18nModule] });
|
|
197
|
+
SkyTextEditorResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorResourcesModule, providers: [
|
|
198
|
+
{
|
|
145
199
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
146
200
|
useClass: SkyTextEditorResourcesProvider,
|
|
147
|
-
multi: true
|
|
148
|
-
}
|
|
149
|
-
|
|
201
|
+
multi: true,
|
|
202
|
+
},
|
|
203
|
+
], imports: [SkyI18nModule] });
|
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorResourcesModule, decorators: [{
|
|
150
205
|
type: NgModule,
|
|
151
206
|
args: [{
|
|
152
207
|
exports: [SkyI18nModule],
|
|
153
|
-
providers: [
|
|
208
|
+
providers: [
|
|
209
|
+
{
|
|
154
210
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
155
211
|
useClass: SkyTextEditorResourcesProvider,
|
|
156
|
-
multi: true
|
|
157
|
-
}
|
|
212
|
+
multi: true,
|
|
213
|
+
},
|
|
214
|
+
],
|
|
158
215
|
}]
|
|
159
216
|
}] });
|
|
160
217
|
|
|
161
|
-
// Need to add the following to classes which contain static methods.
|
|
162
|
-
// See: https://github.com/ng-packagr/ng-packagr/issues/641
|
|
163
|
-
// @dynamic
|
|
164
|
-
class SkyFormsUtility {
|
|
165
|
-
/** Coerces a data-bound value (typically a string) to a boolean. */
|
|
166
|
-
static coerceBooleanProperty(value) {
|
|
167
|
-
return value !== undefined && `${value}` !== 'false';
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
|
|
171
218
|
/**
|
|
172
219
|
* @internal
|
|
173
220
|
*/
|
|
174
221
|
const FONT_LIST_DEFAULTS = [
|
|
175
222
|
{
|
|
176
223
|
name: 'Blackbaud Sans',
|
|
177
|
-
value: '"Blackbaud Sans", Arial, sans-serif'
|
|
224
|
+
value: '"Blackbaud Sans", Arial, sans-serif',
|
|
178
225
|
},
|
|
179
226
|
{
|
|
180
227
|
name: 'Arial',
|
|
181
|
-
value: 'Arial'
|
|
228
|
+
value: 'Arial',
|
|
182
229
|
},
|
|
183
230
|
{
|
|
184
231
|
name: 'Arial Black',
|
|
185
|
-
value: '"Arial Black"'
|
|
232
|
+
value: '"Arial Black"',
|
|
186
233
|
},
|
|
187
234
|
{
|
|
188
235
|
name: 'Courier New',
|
|
189
|
-
value: '"Courier New"'
|
|
236
|
+
value: '"Courier New"',
|
|
190
237
|
},
|
|
191
238
|
{
|
|
192
239
|
name: 'Georgia',
|
|
193
|
-
value: 'Georgia, serif'
|
|
240
|
+
value: 'Georgia, serif',
|
|
194
241
|
},
|
|
195
242
|
{
|
|
196
243
|
name: 'Tahoma',
|
|
197
|
-
value: 'Tahoma, Geneva, sans-serif'
|
|
244
|
+
value: 'Tahoma, Geneva, sans-serif',
|
|
198
245
|
},
|
|
199
246
|
{
|
|
200
247
|
name: 'Times New Roman',
|
|
201
|
-
value: '"Times New Roman"'
|
|
248
|
+
value: '"Times New Roman"',
|
|
202
249
|
},
|
|
203
250
|
{
|
|
204
251
|
name: 'Trebuchet MS',
|
|
205
|
-
value: '"Trebuchet MS", sans-serif'
|
|
252
|
+
value: '"Trebuchet MS", sans-serif',
|
|
206
253
|
},
|
|
207
254
|
{
|
|
208
255
|
name: 'Verdana',
|
|
209
|
-
value: 'Verdana, Geneva, sans-serif'
|
|
210
|
-
}
|
|
256
|
+
value: 'Verdana, Geneva, sans-serif',
|
|
257
|
+
},
|
|
211
258
|
];
|
|
212
259
|
|
|
213
260
|
/**
|
|
@@ -221,7 +268,7 @@ const STYLE_STATE_DEFAULTS = {
|
|
|
221
268
|
boldState: false,
|
|
222
269
|
italicState: false,
|
|
223
270
|
underlineState: false,
|
|
224
|
-
linkState: false
|
|
271
|
+
linkState: false,
|
|
225
272
|
};
|
|
226
273
|
|
|
227
274
|
/**
|
|
@@ -233,15 +280,76 @@ var UrlTarget;
|
|
|
233
280
|
UrlTarget[UrlTarget["NewWindow"] = 1] = "NewWindow";
|
|
234
281
|
})(UrlTarget || (UrlTarget = {}));
|
|
235
282
|
|
|
283
|
+
/**
|
|
284
|
+
* @internal
|
|
285
|
+
*/
|
|
286
|
+
class SkyTextEditorService {
|
|
287
|
+
constructor() {
|
|
288
|
+
/**
|
|
289
|
+
* A dictionary representing all active text editors and their settings.
|
|
290
|
+
*/
|
|
291
|
+
this.editors = {};
|
|
292
|
+
}
|
|
293
|
+
/**
|
|
294
|
+
* Returns the blur observable from the editor with the corresponding id.
|
|
295
|
+
*/
|
|
296
|
+
blurListener(id) {
|
|
297
|
+
return this.editors[id].blurObservable;
|
|
298
|
+
}
|
|
299
|
+
/**
|
|
300
|
+
* Returns the click observable from the editor with the corresponding id.
|
|
301
|
+
*/
|
|
302
|
+
clickListener(id) {
|
|
303
|
+
return this.editors[id].clickObservable;
|
|
304
|
+
}
|
|
305
|
+
/**
|
|
306
|
+
* Returns the command change observable from the editor with the corresponding id.
|
|
307
|
+
*/
|
|
308
|
+
commandChangeListener(id) {
|
|
309
|
+
return this.editors[id].commandChangeObservable;
|
|
310
|
+
}
|
|
311
|
+
/**
|
|
312
|
+
* Returns the input change observable from the editor with the corresponding id.
|
|
313
|
+
*/
|
|
314
|
+
inputListener(id) {
|
|
315
|
+
return this.editors[id].inputObservable;
|
|
316
|
+
}
|
|
317
|
+
/**
|
|
318
|
+
* Removes editor from the `editors` index by id.
|
|
319
|
+
*/
|
|
320
|
+
removeEditor(id) {
|
|
321
|
+
/* istanbul ignore else */
|
|
322
|
+
if (id in this.editors) {
|
|
323
|
+
delete this.editors[id];
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
/**
|
|
327
|
+
* Returns the selection change observable from the editor with the corresponding id.
|
|
328
|
+
*/
|
|
329
|
+
selectionChangeListener(id) {
|
|
330
|
+
return this.editors[id].selectionChangeObservable;
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
SkyTextEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
334
|
+
SkyTextEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorService, providedIn: 'root' });
|
|
335
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorService, decorators: [{
|
|
336
|
+
type: Injectable,
|
|
337
|
+
args: [{
|
|
338
|
+
providedIn: 'root',
|
|
339
|
+
}]
|
|
340
|
+
}] });
|
|
341
|
+
|
|
236
342
|
/**
|
|
237
343
|
* @internal
|
|
238
344
|
*/
|
|
239
345
|
class SkyTextEditorSelectionService {
|
|
240
346
|
isElementSelected(documentEl, element) {
|
|
241
|
-
const selectedNode = this.getCurrentSelection(documentEl)
|
|
347
|
+
const selectedNode = this.getCurrentSelection(documentEl)
|
|
348
|
+
.anchorNode;
|
|
242
349
|
/* istanbul ignore next */
|
|
243
|
-
return selectedNode &&
|
|
244
|
-
(element.contains(selectedNode) ||
|
|
350
|
+
return (selectedNode &&
|
|
351
|
+
(element.contains(selectedNode) ||
|
|
352
|
+
(selectedNode.parentNode && element.contains(selectedNode.parentNode))));
|
|
245
353
|
}
|
|
246
354
|
getCurrentSelection(documentEl) {
|
|
247
355
|
return documentEl.getSelection();
|
|
@@ -254,7 +362,8 @@ class SkyTextEditorSelectionService {
|
|
|
254
362
|
selection.getRangeAt &&
|
|
255
363
|
selection.getRangeAt(0).commonAncestorContainer) {
|
|
256
364
|
selectedEl = selection.getRangeAt(0).commonAncestorContainer;
|
|
257
|
-
selectedEl =
|
|
365
|
+
selectedEl =
|
|
366
|
+
selectedEl.nodeType !== 1 ? selectedEl.parentElement : selectedEl;
|
|
258
367
|
}
|
|
259
368
|
else if (selection && selection.type !== 'Control') {
|
|
260
369
|
selectedEl = selection.createRange().parentElement();
|
|
@@ -273,7 +382,8 @@ class SkyTextEditorSelectionService {
|
|
|
273
382
|
return sel.getRangeAt(0);
|
|
274
383
|
}
|
|
275
384
|
}
|
|
276
|
-
else if (documentEl.getSelection() &&
|
|
385
|
+
else if (documentEl.getSelection() &&
|
|
386
|
+
documentEl.getSelection().getRangeAt) {
|
|
277
387
|
return documentEl.getSelection().getRangeAt(0);
|
|
278
388
|
}
|
|
279
389
|
}
|
|
@@ -298,71 +408,12 @@ class SkyTextEditorSelectionService {
|
|
|
298
408
|
}
|
|
299
409
|
}
|
|
300
410
|
}
|
|
301
|
-
SkyTextEditorSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
302
|
-
SkyTextEditorSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
303
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
411
|
+
SkyTextEditorSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
412
|
+
SkyTextEditorSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorSelectionService, providedIn: 'root' });
|
|
413
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorSelectionService, decorators: [{
|
|
304
414
|
type: Injectable,
|
|
305
415
|
args: [{
|
|
306
|
-
providedIn: 'root'
|
|
307
|
-
}]
|
|
308
|
-
}] });
|
|
309
|
-
|
|
310
|
-
/**
|
|
311
|
-
* @internal
|
|
312
|
-
*/
|
|
313
|
-
class SkyTextEditorService {
|
|
314
|
-
constructor() {
|
|
315
|
-
/**
|
|
316
|
-
* A dictionary representing all active text editors and their settings.
|
|
317
|
-
*/
|
|
318
|
-
this.editors = {};
|
|
319
|
-
}
|
|
320
|
-
/**
|
|
321
|
-
* Returns the blur observable from the editor with the corresponding id.
|
|
322
|
-
*/
|
|
323
|
-
blurListener(id) {
|
|
324
|
-
return this.editors[id].blurObservable;
|
|
325
|
-
}
|
|
326
|
-
/**
|
|
327
|
-
* Returns the click observable from the editor with the corresponding id.
|
|
328
|
-
*/
|
|
329
|
-
clickListener(id) {
|
|
330
|
-
return this.editors[id].clickObservable;
|
|
331
|
-
}
|
|
332
|
-
/**
|
|
333
|
-
* Returns the command change observable from the editor with the corresponding id.
|
|
334
|
-
*/
|
|
335
|
-
commandChangeListener(id) {
|
|
336
|
-
return this.editors[id].commandChangeObservable;
|
|
337
|
-
}
|
|
338
|
-
/**
|
|
339
|
-
* Returns the input change observable from the editor with the corresponding id.
|
|
340
|
-
*/
|
|
341
|
-
inputListener(id) {
|
|
342
|
-
return this.editors[id].inputObservable;
|
|
343
|
-
}
|
|
344
|
-
/**
|
|
345
|
-
* Removes editor from the `editors` index by id.
|
|
346
|
-
*/
|
|
347
|
-
removeEditor(id) {
|
|
348
|
-
/* istanbul ignore else */
|
|
349
|
-
if (id in this.editors) {
|
|
350
|
-
delete this.editors[id];
|
|
351
|
-
}
|
|
352
|
-
}
|
|
353
|
-
/**
|
|
354
|
-
* Returns the selection change observable from the editor with the corresponding id.
|
|
355
|
-
*/
|
|
356
|
-
selectionChangeListener(id) {
|
|
357
|
-
return this.editors[id].selectionChangeObservable;
|
|
358
|
-
}
|
|
359
|
-
}
|
|
360
|
-
SkyTextEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTextEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
361
|
-
SkyTextEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTextEditorService, providedIn: 'root' });
|
|
362
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTextEditorService, decorators: [{
|
|
363
|
-
type: Injectable,
|
|
364
|
-
args: [{
|
|
365
|
-
providedIn: 'root'
|
|
416
|
+
providedIn: 'root',
|
|
366
417
|
}]
|
|
367
418
|
}] });
|
|
368
419
|
|
|
@@ -482,7 +533,7 @@ class SkyTextEditorAdapterService {
|
|
|
482
533
|
boldState: documentEl.queryCommandState('Bold'),
|
|
483
534
|
italicState: documentEl.queryCommandState('Italic'),
|
|
484
535
|
underlineState: documentEl.queryCommandState('Underline'),
|
|
485
|
-
linkState: this.hasLink(id)
|
|
536
|
+
linkState: this.hasLink(id),
|
|
486
537
|
};
|
|
487
538
|
}
|
|
488
539
|
/* istanbul ignore next */
|
|
@@ -509,7 +560,9 @@ class SkyTextEditorAdapterService {
|
|
|
509
560
|
const windowEl = this.getContentWindowEl(id);
|
|
510
561
|
const iframeDocumentEl = this.getIframeDocumentEl(id);
|
|
511
562
|
const currentSelection = this.selectionService.getCurrentSelectionRange(iframeDocumentEl, windowEl);
|
|
512
|
-
const cursorIsNotActiveAndHasReset = currentSelection &&
|
|
563
|
+
const cursorIsNotActiveAndHasReset = currentSelection &&
|
|
564
|
+
currentSelection.startOffset === 0 &&
|
|
565
|
+
currentSelection.endOffset === 0;
|
|
513
566
|
if (!this.editorSelected(id) || cursorIsNotActiveAndHasReset) {
|
|
514
567
|
// focus the end of the editor
|
|
515
568
|
const documentEl = this.windowService.nativeWindow.document;
|
|
@@ -545,8 +598,10 @@ class SkyTextEditorAdapterService {
|
|
|
545
598
|
const anchorEl = this.getSelectedAnchorTag(editorId);
|
|
546
599
|
if (anchorEl && anchorEl.href) {
|
|
547
600
|
link = {
|
|
548
|
-
target: anchorEl.getAttribute('target') === '_blank'
|
|
549
|
-
|
|
601
|
+
target: anchorEl.getAttribute('target') === '_blank'
|
|
602
|
+
? UrlTarget.NewWindow
|
|
603
|
+
: UrlTarget.None,
|
|
604
|
+
url: anchorEl.href,
|
|
550
605
|
};
|
|
551
606
|
}
|
|
552
607
|
return link;
|
|
@@ -571,7 +626,7 @@ class SkyTextEditorAdapterService {
|
|
|
571
626
|
const fontElements = Array.from(doc.querySelectorAll('font[size="1"]'));
|
|
572
627
|
for (let element of fontElements) {
|
|
573
628
|
element.removeAttribute('size');
|
|
574
|
-
element.style.fontSize =
|
|
629
|
+
element.style.fontSize = fontSize + 'px';
|
|
575
630
|
}
|
|
576
631
|
this.cleanUpBlankStyleTags(doc);
|
|
577
632
|
this.focusEditor(id);
|
|
@@ -579,9 +634,9 @@ class SkyTextEditorAdapterService {
|
|
|
579
634
|
}
|
|
580
635
|
removeObservers(setting) {
|
|
581
636
|
/* istanbul ignore next */
|
|
582
|
-
const documentEl = setting.iframeElementRef.contentWindow
|
|
583
|
-
setting.iframeElementRef.contentWindow.document
|
|
584
|
-
setting.iframeElementRef.contentDocument;
|
|
637
|
+
const documentEl = setting.iframeElementRef.contentWindow
|
|
638
|
+
? setting.iframeElementRef.contentWindow.document
|
|
639
|
+
: setting.iframeElementRef.contentDocument;
|
|
585
640
|
setting.selectionChangeObservable.complete();
|
|
586
641
|
setting.clickObservable.complete();
|
|
587
642
|
setting.commandChangeObservable.complete();
|
|
@@ -605,7 +660,7 @@ class SkyTextEditorAdapterService {
|
|
|
605
660
|
childElements = Array.from(parentElement.querySelectorAll('a'));
|
|
606
661
|
}
|
|
607
662
|
/* istanbul ignore next */
|
|
608
|
-
return childElements.filter(element => {
|
|
663
|
+
return childElements.filter((element) => {
|
|
609
664
|
// IE specific
|
|
610
665
|
if (!selectedRange.intersectsNode) {
|
|
611
666
|
if (!element || !element.href) {
|
|
@@ -613,13 +668,14 @@ class SkyTextEditorAdapterService {
|
|
|
613
668
|
}
|
|
614
669
|
const tempRange = document.createRange();
|
|
615
670
|
tempRange.selectNodeContents(element);
|
|
616
|
-
return (selectedRange.compareBoundaryPoints(Range.START_TO_START, tempRange) !== -1
|
|
617
|
-
|
|
618
|
-
(selectedRange.compareBoundaryPoints(Range.END_TO_START, tempRange) !== -1
|
|
619
|
-
|
|
671
|
+
return ((selectedRange.compareBoundaryPoints(Range.START_TO_START, tempRange) !== -1 &&
|
|
672
|
+
selectedRange.compareBoundaryPoints(Range.START_TO_END, tempRange) !== 1) ||
|
|
673
|
+
(selectedRange.compareBoundaryPoints(Range.END_TO_START, tempRange) !== -1 &&
|
|
674
|
+
selectedRange.compareBoundaryPoints(Range.END_TO_END, tempRange) !==
|
|
675
|
+
1));
|
|
620
676
|
}
|
|
621
677
|
// Normal non-IE
|
|
622
|
-
return !!element && !!element.href && selectedRange.intersectsNode(element);
|
|
678
|
+
return (!!element && !!element.href && selectedRange.intersectsNode(element));
|
|
623
679
|
});
|
|
624
680
|
}
|
|
625
681
|
getIframeDocumentEl(id) {
|
|
@@ -656,9 +712,9 @@ class SkyTextEditorAdapterService {
|
|
|
656
712
|
}
|
|
657
713
|
createObservers(id, element) {
|
|
658
714
|
/* istanbul ignore next */
|
|
659
|
-
const documentEl = element.contentWindow
|
|
660
|
-
element.contentWindow.document
|
|
661
|
-
element.contentDocument;
|
|
715
|
+
const documentEl = element.contentWindow
|
|
716
|
+
? element.contentWindow.document
|
|
717
|
+
: element.contentDocument;
|
|
662
718
|
// Firefox bug where we need to open/close to cancel load so it doesn't overwrite attrs
|
|
663
719
|
documentEl.open();
|
|
664
720
|
documentEl.close();
|
|
@@ -687,7 +743,7 @@ class SkyTextEditorAdapterService {
|
|
|
687
743
|
clickListener: clickListener,
|
|
688
744
|
inputListener: inputListener,
|
|
689
745
|
pasteListener: pasteListener,
|
|
690
|
-
selectionListener: selectionListener
|
|
746
|
+
selectionListener: selectionListener,
|
|
691
747
|
};
|
|
692
748
|
}
|
|
693
749
|
/* istanbul ignore next */
|
|
@@ -708,11 +764,15 @@ class SkyTextEditorAdapterService {
|
|
|
708
764
|
if (typeof commandValue === 'number') {
|
|
709
765
|
/* istanbul ignore next */
|
|
710
766
|
// tslint:disable-next-line: no-bitwise
|
|
711
|
-
return 'rgb(' +
|
|
767
|
+
return ('rgb(' +
|
|
768
|
+
(commandValue & 0xff) +
|
|
769
|
+
', ' +
|
|
712
770
|
// tslint:disable-next-line: no-bitwise
|
|
713
|
-
((commandValue &
|
|
771
|
+
((commandValue & 0xff00) >> 8) +
|
|
772
|
+
', ' +
|
|
714
773
|
// tslint:disable-next-line: no-bitwise
|
|
715
|
-
((commandValue &
|
|
774
|
+
((commandValue & 0xff0000) >> 16) +
|
|
775
|
+
')');
|
|
716
776
|
}
|
|
717
777
|
// Firefox uses 'Transparent' instead of a color value
|
|
718
778
|
/* istanbul ignore next */
|
|
@@ -774,10 +834,10 @@ class SkyTextEditorAdapterService {
|
|
|
774
834
|
element.removeAttribute('style');
|
|
775
835
|
}
|
|
776
836
|
}
|
|
777
|
-
const removableElements = orphanElements.filter(element => {
|
|
837
|
+
const removableElements = orphanElements.filter((element) => {
|
|
778
838
|
const tagName = element.tagName.toUpperCase();
|
|
779
|
-
return (tagName === 'FONT' || tagName === 'SPAN') &&
|
|
780
|
-
(element.attributes.length === 0 || !element.hasChildNodes);
|
|
839
|
+
return ((tagName === 'FONT' || tagName === 'SPAN') &&
|
|
840
|
+
(element.attributes.length === 0 || !element.hasChildNodes));
|
|
781
841
|
});
|
|
782
842
|
for (let element of removableElements) {
|
|
783
843
|
const parent = element.parentNode;
|
|
@@ -792,7 +852,8 @@ class SkyTextEditorAdapterService {
|
|
|
792
852
|
}
|
|
793
853
|
// Certain values are encoded in html and need to be decoded
|
|
794
854
|
replaceHtmlCodes(str) {
|
|
795
|
-
return str
|
|
855
|
+
return str
|
|
856
|
+
.replace(/ /, String.fromCharCode(160))
|
|
796
857
|
.replace(/</g, '<')
|
|
797
858
|
.replace(/>/g, '>')
|
|
798
859
|
.replace(/&/g, '&');
|
|
@@ -802,22 +863,32 @@ class SkyTextEditorAdapterService {
|
|
|
802
863
|
textEditorNativeElement.setAttribute('aria-disabled', disabled ? 'true' : 'false');
|
|
803
864
|
/* istanbul ignore else */
|
|
804
865
|
if (focusableChildren.length > 0) {
|
|
805
|
-
focusableChildren.forEach(aFocusableChild => {
|
|
866
|
+
focusableChildren.forEach((aFocusableChild) => {
|
|
806
867
|
aFocusableChild.tabIndex = disabled ? -1 : 0;
|
|
807
868
|
});
|
|
808
869
|
}
|
|
809
870
|
this.getIframeDocumentEl(id).body.setAttribute('contenteditable', disabled ? 'false' : 'true');
|
|
810
871
|
}
|
|
811
872
|
}
|
|
812
|
-
SkyTextEditorAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
813
|
-
SkyTextEditorAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
814
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
873
|
+
SkyTextEditorAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorAdapterService, deps: [{ token: SkyTextEditorSelectionService }, { token: SkyTextEditorService }, { token: i3.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
874
|
+
SkyTextEditorAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorAdapterService, providedIn: 'root' });
|
|
875
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorAdapterService, decorators: [{
|
|
815
876
|
type: Injectable,
|
|
816
877
|
args: [{
|
|
817
|
-
providedIn: 'root'
|
|
878
|
+
providedIn: 'root',
|
|
818
879
|
}]
|
|
819
880
|
}], ctorParameters: function () { return [{ type: SkyTextEditorSelectionService }, { type: SkyTextEditorService }, { type: i3.SkyAppWindowRef }]; } });
|
|
820
881
|
|
|
882
|
+
// Need to add the following to classes which contain static methods.
|
|
883
|
+
// See: https://github.com/ng-packagr/ng-packagr/issues/641
|
|
884
|
+
// @dynamic
|
|
885
|
+
class SkyFormsUtility {
|
|
886
|
+
/** Coerces a data-bound value (typically a string) to a boolean. */
|
|
887
|
+
static coerceBooleanProperty(value) {
|
|
888
|
+
return value !== undefined && `${value}` !== 'false';
|
|
889
|
+
}
|
|
890
|
+
}
|
|
891
|
+
|
|
821
892
|
/**
|
|
822
893
|
* @internal
|
|
823
894
|
*/
|
|
@@ -846,8 +917,7 @@ class SkyTextEditorMenubarComponent {
|
|
|
846
917
|
return this._disabled;
|
|
847
918
|
}
|
|
848
919
|
ngOnInit() {
|
|
849
|
-
this.editorFocusStream
|
|
850
|
-
.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
|
|
920
|
+
this.editorFocusStream.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
|
|
851
921
|
this.closeDropdowns();
|
|
852
922
|
});
|
|
853
923
|
forkJoin([
|
|
@@ -872,75 +942,75 @@ class SkyTextEditorMenubarComponent {
|
|
|
872
942
|
this.resources.getString('skyux_text_editor_edit_menu_action_paste_label'),
|
|
873
943
|
this.resources.getString('skyux_text_editor_edit_menu_action_paste_key_shortcut'),
|
|
874
944
|
this.resources.getString('skyux_text_editor_edit_menu_action_select_all_label'),
|
|
875
|
-
this.resources.getString('skyux_text_editor_edit_menu_action_select_all_key_shortcut')
|
|
945
|
+
this.resources.getString('skyux_text_editor_edit_menu_action_select_all_key_shortcut'),
|
|
876
946
|
])
|
|
877
947
|
.pipe(take(1))
|
|
878
|
-
.subscribe(resources => {
|
|
948
|
+
.subscribe((resources) => {
|
|
879
949
|
this.formatItems = [
|
|
880
950
|
{
|
|
881
951
|
function: () => this.execCommand('bold'),
|
|
882
952
|
label: resources[0],
|
|
883
|
-
keyShortcut: resources[1]
|
|
953
|
+
keyShortcut: resources[1],
|
|
884
954
|
},
|
|
885
955
|
{
|
|
886
956
|
function: () => this.execCommand('italic'),
|
|
887
957
|
label: resources[2],
|
|
888
|
-
keyShortcut: resources[3]
|
|
958
|
+
keyShortcut: resources[3],
|
|
889
959
|
},
|
|
890
960
|
{
|
|
891
961
|
function: () => this.execCommand('underline'),
|
|
892
962
|
label: resources[4],
|
|
893
|
-
keyShortcut: resources[5]
|
|
963
|
+
keyShortcut: resources[5],
|
|
894
964
|
},
|
|
895
965
|
{
|
|
896
966
|
function: () => this.execCommand('strikethrough'),
|
|
897
|
-
label: resources[6]
|
|
967
|
+
label: resources[6],
|
|
898
968
|
},
|
|
899
969
|
{
|
|
900
|
-
isDivider: true
|
|
970
|
+
isDivider: true,
|
|
901
971
|
},
|
|
902
972
|
{
|
|
903
973
|
function: () => this.clearFormat(),
|
|
904
|
-
label: resources[7]
|
|
905
|
-
}
|
|
974
|
+
label: resources[7],
|
|
975
|
+
},
|
|
906
976
|
];
|
|
907
977
|
this.editItems = [
|
|
908
978
|
{
|
|
909
979
|
function: () => this.execCommand('undo'),
|
|
910
980
|
label: resources[8],
|
|
911
|
-
keyShortcut: resources[9]
|
|
981
|
+
keyShortcut: resources[9],
|
|
912
982
|
},
|
|
913
983
|
{
|
|
914
984
|
function: () => this.execCommand('redo'),
|
|
915
985
|
label: resources[10],
|
|
916
|
-
keyShortcut: resources[11]
|
|
986
|
+
keyShortcut: resources[11],
|
|
917
987
|
},
|
|
918
988
|
{
|
|
919
|
-
isDivider: true
|
|
989
|
+
isDivider: true,
|
|
920
990
|
},
|
|
921
991
|
{
|
|
922
992
|
function: () => this.execCommand('cut'),
|
|
923
993
|
label: resources[12],
|
|
924
|
-
keyShortcut: resources[13]
|
|
994
|
+
keyShortcut: resources[13],
|
|
925
995
|
},
|
|
926
996
|
{
|
|
927
997
|
function: () => this.execCommand('copy'),
|
|
928
998
|
label: resources[14],
|
|
929
|
-
keyShortcut: resources[15]
|
|
999
|
+
keyShortcut: resources[15],
|
|
930
1000
|
},
|
|
931
1001
|
{
|
|
932
1002
|
function: () => this.execCommand('paste'),
|
|
933
1003
|
label: resources[16],
|
|
934
|
-
keyShortcut: resources[17]
|
|
1004
|
+
keyShortcut: resources[17],
|
|
935
1005
|
},
|
|
936
1006
|
{
|
|
937
|
-
isDivider: true
|
|
1007
|
+
isDivider: true,
|
|
938
1008
|
},
|
|
939
1009
|
{
|
|
940
1010
|
function: () => this.execCommand('selectAll'),
|
|
941
1011
|
label: resources[18],
|
|
942
|
-
keyShortcut: resources[19]
|
|
943
|
-
}
|
|
1012
|
+
keyShortcut: resources[19],
|
|
1013
|
+
},
|
|
944
1014
|
];
|
|
945
1015
|
});
|
|
946
1016
|
}
|
|
@@ -951,13 +1021,18 @@ class SkyTextEditorMenubarComponent {
|
|
|
951
1021
|
execCommand(command, value = '') {
|
|
952
1022
|
this.adapterService.execCommand(this.editorId, {
|
|
953
1023
|
command: command,
|
|
954
|
-
value: value
|
|
1024
|
+
value: value,
|
|
955
1025
|
});
|
|
956
1026
|
}
|
|
957
1027
|
insertMergeField(field) {
|
|
958
|
-
this.execCommand('insertHTML', '<img style="display: inline; cursor: grab;" data-fieldid="' +
|
|
959
|
-
|
|
960
|
-
'"
|
|
1028
|
+
this.execCommand('insertHTML', '<img style="display: inline; cursor: grab;" data-fieldid="' +
|
|
1029
|
+
field.id +
|
|
1030
|
+
'" data-fielddisplay="' +
|
|
1031
|
+
field.name +
|
|
1032
|
+
'" src="' +
|
|
1033
|
+
(field.previewImageUrl ||
|
|
1034
|
+
this.adapterService.getMergeFieldDataURI(field.name)) +
|
|
1035
|
+
'">');
|
|
961
1036
|
}
|
|
962
1037
|
closeDropdowns() {
|
|
963
1038
|
this.editDropdownStream.next({ type: SkyDropdownMessageType.Close });
|
|
@@ -967,21 +1042,22 @@ class SkyTextEditorMenubarComponent {
|
|
|
967
1042
|
clearFormat() {
|
|
968
1043
|
let currentSelection = this.adapterService.getCurrentSelection(this.editorId);
|
|
969
1044
|
/* istanbul ignore else */
|
|
970
|
-
if (currentSelection.rangeCount > 0 &&
|
|
1045
|
+
if (currentSelection.rangeCount > 0 &&
|
|
1046
|
+
currentSelection.getRangeAt(0).toString().length <= 0) {
|
|
971
1047
|
this.execCommand('selectAll');
|
|
972
1048
|
}
|
|
973
1049
|
this.execCommand('removeFormat');
|
|
974
1050
|
}
|
|
975
1051
|
}
|
|
976
|
-
SkyTextEditorMenubarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
977
|
-
SkyTextEditorMenubarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
978
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1052
|
+
SkyTextEditorMenubarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorMenubarComponent, deps: [{ token: SkyTextEditorAdapterService }, { token: i0.ChangeDetectorRef }, { token: i2.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1053
|
+
SkyTextEditorMenubarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: { editorFocusStream: "editorFocusStream", editorId: "editorId", menus: "menus", mergeFields: "mergeFields", disabled: "disabled" }, ngImport: i0, template: "<sky-toolbar-item\n *ngFor=\"let menu of menus\"\n class=\"sky-text-editor-menu\"\n [ngClass]=\"'sky-text-editor-menu-' + menu\"\n>\n <ng-container [ngSwitch]=\"menu\">\n <ng-container *ngSwitchCase=\"'edit'\">\n <sky-dropdown\n label=\"Edit menu\"\n [disabled]=\"disabled\"\n [messageStream]=\"editDropdownStream\"\n >\n <sky-dropdown-button>\n {{\n 'skyux_text_editor_menubar_dropdown_button_edit_label'\n | skyLibResources\n }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let editItem of editItems\">\n <button\n *ngIf=\"!editItem.isDivider\"\n type=\"button\"\n (click)=\"editItem.function()\"\n >\n {{ editItem.label }}\n <div\n *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\n *ngIf=\"editItem.isDivider\"\n class=\"sky-text-editor-dropdown-item-divider\"\n role=\"divider\"\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 {{\n 'skyux_text_editor_menubar_dropdown_button_format_label'\n | skyLibResources\n }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let formatItem of formatItems\">\n <button\n *ngIf=\"!formatItem.isDivider\"\n type=\"button\"\n (click)=\"formatItem.function()\"\n >\n {{ formatItem.label }}\n <div\n *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\n *ngIf=\"formatItem.isDivider\"\n class=\"sky-text-editor-dropdown-item-divider\"\n role=\"divider\"\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\n *ngIf=\"mergeFields && mergeFields.length > 0\"\n label=\"Insert merge field\"\n [disabled]=\"disabled\"\n [messageStream]=\"mergeFieldDropdownStream\"\n >\n <sky-dropdown-button>\n {{\n 'skyux_text_editor_menubar_dropdown_button_insert_label'\n | skyLibResources\n }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let mergeField of mergeFields\">\n <button type=\"button\" (click)=\"insertMergeField(mergeField)\">\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", styles: [".sky-text-editor-dropdown-item-divider{border:0;padding:0;height:1px;margin:9px 1px;overflow:hidden;background:transparent;border-bottom:1px solid rgba(0,0,0,.1);cursor:default;filter:none}.sky-text-editor-menu-key-shortcut{float:right;margin-left:15px}\n"], components: [{ type: i3$1.λ39, selector: "sky-toolbar-item" }, { type: i4.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4.λ2, selector: "sky-dropdown-button" }, { type: i4.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i2.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1054
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorMenubarComponent, decorators: [{
|
|
979
1055
|
type: Component,
|
|
980
1056
|
args: [{
|
|
981
1057
|
selector: 'sky-text-editor-menubar',
|
|
982
1058
|
templateUrl: './text-editor-menubar.component.html',
|
|
983
1059
|
styleUrls: ['./text-editor-menubar.component.scss'],
|
|
984
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
1060
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
985
1061
|
}]
|
|
986
1062
|
}], ctorParameters: function () { return [{ type: SkyTextEditorAdapterService }, { type: i0.ChangeDetectorRef }, { type: i2.SkyLibResourcesService }]; }, propDecorators: { editorFocusStream: [{
|
|
987
1063
|
type: Input
|
|
@@ -1020,7 +1096,10 @@ class SkyTextEditorUrlModalComponent {
|
|
|
1020
1096
|
if (modalContext.urlResult.url.startsWith(emailKey)) {
|
|
1021
1097
|
this.emailAddress = modalContext.urlResult.url.replace(emailKey, '');
|
|
1022
1098
|
let queryStringIndex = this.emailAddress.indexOf(queryStringParamKey);
|
|
1023
|
-
queryStringIndex =
|
|
1099
|
+
queryStringIndex =
|
|
1100
|
+
queryStringIndex > -1
|
|
1101
|
+
? queryStringIndex
|
|
1102
|
+
: this.emailAddress.indexOf(queryStringParamKey.toLowerCase());
|
|
1024
1103
|
/* istanbul ignore else */
|
|
1025
1104
|
if (queryStringIndex > -1) {
|
|
1026
1105
|
this.subject = decodeURI(this.emailAddress).slice(queryStringIndex + queryStringParamKey.length);
|
|
@@ -1030,8 +1109,8 @@ class SkyTextEditorUrlModalComponent {
|
|
|
1030
1109
|
this.activeTab = 1;
|
|
1031
1110
|
}
|
|
1032
1111
|
else {
|
|
1033
|
-
this.url = modalContext.urlResult.url,
|
|
1034
|
-
this.target = modalContext.urlResult.target;
|
|
1112
|
+
(this.url = modalContext.urlResult.url),
|
|
1113
|
+
(this.target = modalContext.urlResult.target);
|
|
1035
1114
|
// set active tab to web page
|
|
1036
1115
|
this.activeTab = 0;
|
|
1037
1116
|
}
|
|
@@ -1067,13 +1146,15 @@ class SkyTextEditorUrlModalComponent {
|
|
|
1067
1146
|
if (this.activeTab === 0) {
|
|
1068
1147
|
this.modalInstance.save({
|
|
1069
1148
|
url: this.url,
|
|
1070
|
-
target: this.target
|
|
1149
|
+
target: this.target
|
|
1150
|
+
? parseInt(this.target, undefined)
|
|
1151
|
+
: UrlTarget.None,
|
|
1071
1152
|
});
|
|
1072
1153
|
}
|
|
1073
1154
|
else {
|
|
1074
1155
|
this.modalInstance.save({
|
|
1075
1156
|
url: this.getEmailUrl(),
|
|
1076
|
-
target: UrlTarget.None
|
|
1157
|
+
target: UrlTarget.None,
|
|
1077
1158
|
});
|
|
1078
1159
|
}
|
|
1079
1160
|
}
|
|
@@ -1082,7 +1163,9 @@ class SkyTextEditorUrlModalComponent {
|
|
|
1082
1163
|
this.modalInstance.cancel();
|
|
1083
1164
|
}
|
|
1084
1165
|
getEmailUrl() {
|
|
1085
|
-
return emailKey +
|
|
1166
|
+
return (emailKey +
|
|
1167
|
+
this.emailAddress +
|
|
1168
|
+
(this.subject ? '?Subject=' + encodeURI(this.subject) : ''));
|
|
1086
1169
|
}
|
|
1087
1170
|
isValid() {
|
|
1088
1171
|
if (this.activeTab === 0) {
|
|
@@ -1091,14 +1174,14 @@ class SkyTextEditorUrlModalComponent {
|
|
|
1091
1174
|
return !!this.emailAddress && SkyValidation.isEmail(this.emailAddress);
|
|
1092
1175
|
}
|
|
1093
1176
|
}
|
|
1094
|
-
SkyTextEditorUrlModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1095
|
-
SkyTextEditorUrlModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1096
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1177
|
+
SkyTextEditorUrlModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorUrlModalComponent, deps: [{ token: i1$1.SkyModalInstance }, { token: SkyUrlModalContext }], target: i0.ɵɵFactoryTarget.Component });
|
|
1178
|
+
SkyTextEditorUrlModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTextEditorUrlModalComponent, selector: "sky-text-editor-url-modal", ngImport: i0, 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 tabHeading=\"Web page\">\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 class=\"sky-control-label\" [for]=\"targetInput.id\">\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 {{\n 'skyux_text_editor_url_modal_current_option_label'\n | skyLibResources\n }}\n </option>\n <option value=\"1\">\n {{\n 'skyux_text_editor_url_modal_new_option_label' | skyLibResources\n }}\n </option>\n </select>\n </sky-input-box>\n </sky-tab>\n <sky-tab tabHeading=\"Email address\">\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 class=\"sky-control-label\" [for]=\"subjectInput.id\">\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 type=\"button\" class=\"sky-btn sky-btn-link\" (click)=\"cancel()\">\n {{ 'skyux_text_editor_url_modal_cancel_button_label' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-editor-url-modal-first-field{margin-top:15px}\n"], components: [{ type: i1$1.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i1$1.λ4, selector: "sky-modal-header" }, { type: i1$1.λ2, selector: "sky-modal-content" }, { type: i3$2.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { type: i3$2.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndex"], outputs: ["close"] }, { type: i4$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: i1$1.λ3, selector: "sky-modal-footer" }], directives: [{ type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i5$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "skyLibResources": i2.SkyLibResourcesPipe } });
|
|
1179
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorUrlModalComponent, decorators: [{
|
|
1097
1180
|
type: Component,
|
|
1098
1181
|
args: [{
|
|
1099
1182
|
selector: 'sky-text-editor-url-modal',
|
|
1100
1183
|
templateUrl: './text-editor-url-modal.component.html',
|
|
1101
|
-
styleUrls: ['./text-editor-url-modal.component.scss']
|
|
1184
|
+
styleUrls: ['./text-editor-url-modal.component.scss'],
|
|
1102
1185
|
}]
|
|
1103
1186
|
}], ctorParameters: function () { return [{ type: i1$1.SkyModalInstance }, { type: SkyUrlModalContext }]; } });
|
|
1104
1187
|
|
|
@@ -1124,7 +1207,7 @@ class SkyTextEditorToolbarComponent {
|
|
|
1124
1207
|
set styleState(value) {
|
|
1125
1208
|
this._styleState = value;
|
|
1126
1209
|
if (value.font !== this.styleStateFontName) {
|
|
1127
|
-
if (value.font === '
|
|
1210
|
+
if (value.font === '"Blackbaud Sans", Arial, sans-serif') {
|
|
1128
1211
|
this.styleStateFontName = this.getFontName('Blackbaud Sans');
|
|
1129
1212
|
}
|
|
1130
1213
|
else {
|
|
@@ -1152,7 +1235,7 @@ class SkyTextEditorToolbarComponent {
|
|
|
1152
1235
|
execCommand(command, value = '') {
|
|
1153
1236
|
this.adapterService.execCommand(this.editorId, {
|
|
1154
1237
|
command: command,
|
|
1155
|
-
value: value
|
|
1238
|
+
value: value,
|
|
1156
1239
|
});
|
|
1157
1240
|
this.styleState = Object.assign(Object.assign({}, this.styleState), this.adapterService.getStyleState(this.editorId));
|
|
1158
1241
|
}
|
|
@@ -1166,10 +1249,12 @@ class SkyTextEditorToolbarComponent {
|
|
|
1166
1249
|
link() {
|
|
1167
1250
|
const priorSelection = this.adapterService.saveSelection(this.editorId);
|
|
1168
1251
|
const currentLink = this.adapterService.getLink(this.editorId);
|
|
1169
|
-
const inputModal = this.modalService.open(SkyTextEditorUrlModalComponent, [
|
|
1252
|
+
const inputModal = this.modalService.open(SkyTextEditorUrlModalComponent, [
|
|
1253
|
+
{
|
|
1170
1254
|
provide: SkyUrlModalContext,
|
|
1171
|
-
useValue: { urlResult: currentLink }
|
|
1172
|
-
}
|
|
1255
|
+
useValue: { urlResult: currentLink },
|
|
1256
|
+
},
|
|
1257
|
+
]);
|
|
1173
1258
|
inputModal.closed.subscribe((result) => {
|
|
1174
1259
|
if (result.reason === 'save' && priorSelection) {
|
|
1175
1260
|
if (currentLink) {
|
|
@@ -1184,13 +1269,19 @@ class SkyTextEditorToolbarComponent {
|
|
|
1184
1269
|
else {
|
|
1185
1270
|
// New Window
|
|
1186
1271
|
const sText = this.adapterService.getCurrentSelection(this.editorId);
|
|
1187
|
-
this.execCommand('insertHTML', '<a href="' +
|
|
1272
|
+
this.execCommand('insertHTML', '<a href="' +
|
|
1273
|
+
result.data.url +
|
|
1274
|
+
'" rel="noopener noreferrer" target="_blank">' +
|
|
1275
|
+
sText +
|
|
1276
|
+
'</a>');
|
|
1188
1277
|
}
|
|
1189
1278
|
}
|
|
1190
1279
|
});
|
|
1191
1280
|
}
|
|
1192
1281
|
unlink() {
|
|
1193
|
-
let currentSelectionRange = this.adapterService
|
|
1282
|
+
let currentSelectionRange = this.adapterService
|
|
1283
|
+
.getCurrentSelection(this.editorId)
|
|
1284
|
+
.getRangeAt(0);
|
|
1194
1285
|
if (currentSelectionRange.toString().length <= 0) {
|
|
1195
1286
|
const anchorTag = this.adapterService.getSelectedAnchorTag(this.editorId);
|
|
1196
1287
|
this.adapterService.selectElement(this.editorId, anchorTag);
|
|
@@ -1205,7 +1296,9 @@ class SkyTextEditorToolbarComponent {
|
|
|
1205
1296
|
this.execCommand(isBackground ? 'backColor' : 'foreColor', color.hex);
|
|
1206
1297
|
}
|
|
1207
1298
|
closeDropdowns() {
|
|
1208
|
-
const message = {
|
|
1299
|
+
const message = {
|
|
1300
|
+
type: SkyColorpickerMessageType.Close,
|
|
1301
|
+
};
|
|
1209
1302
|
this.colorpickerStream.next(message);
|
|
1210
1303
|
this.backColorpickerStream.next(message);
|
|
1211
1304
|
this.fontPickerStream.next({ type: SkyDropdownMessageType.Close });
|
|
@@ -1219,15 +1312,15 @@ class SkyTextEditorToolbarComponent {
|
|
|
1219
1312
|
}
|
|
1220
1313
|
}
|
|
1221
1314
|
}
|
|
1222
|
-
SkyTextEditorToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1223
|
-
SkyTextEditorToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: { editorFocusStream: "editorFocusStream", editorId: "editorId", fontList: "fontList", fontSizeList: "fontSizeList", toolbarActions: "toolbarActions", styleState: "styleState", disabled: "disabled" }, ngImport: i0, 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", 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}\n"], components: [{ type: i3$1.λ39, selector: "sky-toolbar-item" }, { type: i4.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4.λ2, selector: "sky-dropdown-button" }, { type: i4.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { type: i4$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i6$1.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "pickerButtonIconType", "label", "labelledBy", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { type: i7.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6$1.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { type: i6.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1224
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1315
|
+
SkyTextEditorToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorToolbarComponent, deps: [{ token: SkyTextEditorAdapterService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyModalService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1316
|
+
SkyTextEditorToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: { editorFocusStream: "editorFocusStream", editorId: "editorId", fontList: "fontList", fontSizeList: "fontSizeList", toolbarActions: "toolbarActions", styleState: "styleState", disabled: "disabled" }, ngImport: i0, template: "<sky-toolbar-item\n *ngFor=\"let action of toolbarActions\"\n class=\"sky-text-editor-toolbar-action\"\n [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n>\n <ng-container [ngSwitch]=\"action\">\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 type=\"button\" (click)=\"changeFontSize(size)\">\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 class=\"sky-switch-icon-group sky-text-editor-font-style-picker\">\n <sky-checkbox\n icon=\"bold\"\n label=\"Bold\"\n title=\"Bold\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.boldState\"\n (ngModelChange)=\"\n toggleFontStyle(styleState.boldState, $event, 'bold')\n \"\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)=\"\n toggleFontStyle(styleState.italicState, $event, 'italic')\n \"\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)=\"\n toggleFontStyle(styleState.underlineState, $event, 'underline')\n \"\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 class=\"sky-switch-icon-group\">\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'\" icon=\"list-ul\"> </sky-icon>\n <sky-icon\n *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'\" icon=\"list-ol\"> </sky-icon>\n <sky-icon\n *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 class=\"sky-switch-icon-group\">\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'\" icon=\"align-left\"> </sky-icon>\n <sky-icon\n *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'\" icon=\"align-center\"> </sky-icon>\n <sky-icon\n *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'\" icon=\"align-right\"> </sky-icon>\n <sky-icon\n *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 class=\"sky-switch-icon-group\">\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'\" icon=\"outdent\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"outdent-line\" iconType=\"skyux\">\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'\" icon=\"indent\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"indent-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'undo-redo'\">\n <div class=\"sky-switch-icon-group\">\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'\" icon=\"undo\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"undo-line\" iconType=\"skyux\">\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'\" icon=\"repeat\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"redo-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'link'\">\n <div class=\"sky-switch-icon-group\">\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'\" icon=\"link\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"link-line\" iconType=\"skyux\">\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'\" icon=\"unlink\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"unlink-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n </div>\n </ng-container>\n </ng-container>\n</sky-toolbar-item>\n", 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}\n"], components: [{ type: i3$1.λ39, selector: "sky-toolbar-item" }, { type: i4.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4.λ2, selector: "sky-dropdown-button" }, { type: i4.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { type: i4$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i6$1.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "pickerButtonIconType", "label", "labelledBy", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { type: i7.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6$1.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { type: i6.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1317
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorToolbarComponent, decorators: [{
|
|
1225
1318
|
type: Component,
|
|
1226
1319
|
args: [{
|
|
1227
1320
|
selector: 'sky-text-editor-toolbar',
|
|
1228
1321
|
templateUrl: './text-editor-toolbar.component.html',
|
|
1229
1322
|
styleUrls: ['./text-editor-toolbar.component.scss'],
|
|
1230
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
1323
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1231
1324
|
}]
|
|
1232
1325
|
}], ctorParameters: function () { return [{ type: SkyTextEditorAdapterService }, { type: i0.ChangeDetectorRef }, { type: i1$1.SkyModalService }]; }, propDecorators: { editorFocusStream: [{
|
|
1233
1326
|
type: Input
|
|
@@ -1248,10 +1341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
1248
1341
|
/**
|
|
1249
1342
|
* @internal
|
|
1250
1343
|
*/
|
|
1251
|
-
const MENU_DEFAULTS = [
|
|
1252
|
-
'edit',
|
|
1253
|
-
'format'
|
|
1254
|
-
];
|
|
1344
|
+
const MENU_DEFAULTS = ['edit', 'format'];
|
|
1255
1345
|
|
|
1256
1346
|
/**
|
|
1257
1347
|
* @internal
|
|
@@ -1262,13 +1352,15 @@ const TOOLBAR_ACTION_DEFAULTS = [
|
|
|
1262
1352
|
'font-style',
|
|
1263
1353
|
'color',
|
|
1264
1354
|
'list',
|
|
1265
|
-
'link'
|
|
1355
|
+
'link',
|
|
1266
1356
|
];
|
|
1267
1357
|
|
|
1268
1358
|
/**
|
|
1269
1359
|
* @internal
|
|
1270
1360
|
*/
|
|
1271
|
-
const FONT_SIZE_LIST_DEFAULTS = [
|
|
1361
|
+
const FONT_SIZE_LIST_DEFAULTS = [
|
|
1362
|
+
6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 36, 48,
|
|
1363
|
+
];
|
|
1272
1364
|
|
|
1273
1365
|
/**
|
|
1274
1366
|
* Auto-incrementing integer used to generate unique ids for radio components.
|
|
@@ -1347,7 +1439,7 @@ class SkyTextEditorComponent {
|
|
|
1347
1439
|
if (this.iframeRef) {
|
|
1348
1440
|
focusableChildren = this.coreAdapterService.getFocusableChildren(this.iframeRef.nativeElement.contentDocument.body, {
|
|
1349
1441
|
ignoreVisibility: true,
|
|
1350
|
-
ignoreTabIndex: true
|
|
1442
|
+
ignoreTabIndex: true,
|
|
1351
1443
|
});
|
|
1352
1444
|
}
|
|
1353
1445
|
if (this._disabled) {
|
|
@@ -1396,7 +1488,10 @@ class SkyTextEditorComponent {
|
|
|
1396
1488
|
set value(value) {
|
|
1397
1489
|
// Normalize value and set any empty state to an empty string.
|
|
1398
1490
|
let normalizedValue = value;
|
|
1399
|
-
if (!value ||
|
|
1491
|
+
if (!value ||
|
|
1492
|
+
value.trim() === '<p></p>' ||
|
|
1493
|
+
value.trim() === '<br>' ||
|
|
1494
|
+
value.trim() === '<p><br></p>') {
|
|
1400
1495
|
normalizedValue = '';
|
|
1401
1496
|
}
|
|
1402
1497
|
normalizedValue = this.sanitizationService.sanitize(normalizedValue).trim();
|
|
@@ -1407,7 +1502,9 @@ class SkyTextEditorComponent {
|
|
|
1407
1502
|
if (this.ngControl && this.ngControl.control) {
|
|
1408
1503
|
/* istanbul ignore else */
|
|
1409
1504
|
if (normalizedValue !== this.ngControl.control.value) {
|
|
1410
|
-
this.ngControl.control.setValue(normalizedValue, {
|
|
1505
|
+
this.ngControl.control.setValue(normalizedValue, {
|
|
1506
|
+
emitModelToViewChange: false,
|
|
1507
|
+
});
|
|
1411
1508
|
}
|
|
1412
1509
|
}
|
|
1413
1510
|
// Autofocus isn't testable in Firefox and IE.
|
|
@@ -1472,7 +1569,8 @@ class SkyTextEditorComponent {
|
|
|
1472
1569
|
}
|
|
1473
1570
|
initIframe() {
|
|
1474
1571
|
this.adapterService.addEditor(this.id, this.iframeRef.nativeElement, this.initialStyleState, this.placeholder);
|
|
1475
|
-
this.editorService
|
|
1572
|
+
this.editorService
|
|
1573
|
+
.inputListener(this.id)
|
|
1476
1574
|
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1477
1575
|
.subscribe(() => {
|
|
1478
1576
|
// Angular doesn't run change detection for changes originating inside an iframe,
|
|
@@ -1481,18 +1579,21 @@ class SkyTextEditorComponent {
|
|
|
1481
1579
|
this.ViewToModelUpdate();
|
|
1482
1580
|
});
|
|
1483
1581
|
});
|
|
1484
|
-
this.editorService
|
|
1582
|
+
this.editorService
|
|
1583
|
+
.selectionChangeListener(this.id)
|
|
1485
1584
|
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1486
1585
|
.subscribe(() => {
|
|
1487
1586
|
this.updateStyle();
|
|
1488
1587
|
this.editorFocusStream.next();
|
|
1489
1588
|
});
|
|
1490
|
-
this.editorService
|
|
1589
|
+
this.editorService
|
|
1590
|
+
.clickListener(this.id)
|
|
1491
1591
|
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1492
1592
|
.subscribe(() => {
|
|
1493
1593
|
this.editorFocusStream.next();
|
|
1494
1594
|
});
|
|
1495
|
-
this.editorService
|
|
1595
|
+
this.editorService
|
|
1596
|
+
.blurListener(this.id)
|
|
1496
1597
|
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1497
1598
|
.subscribe(() => {
|
|
1498
1599
|
// Angular doesn't run change detection for changes originating inside an iframe,
|
|
@@ -1501,7 +1602,8 @@ class SkyTextEditorComponent {
|
|
|
1501
1602
|
this._onTouched();
|
|
1502
1603
|
});
|
|
1503
1604
|
});
|
|
1504
|
-
this.editorService
|
|
1605
|
+
this.editorService
|
|
1606
|
+
.commandChangeListener(this.id)
|
|
1505
1607
|
.pipe(takeUntil(this.ngUnsubscribe))
|
|
1506
1608
|
.subscribe(() => {
|
|
1507
1609
|
this.updateStyle();
|
|
@@ -1522,16 +1624,16 @@ class SkyTextEditorComponent {
|
|
|
1522
1624
|
}
|
|
1523
1625
|
}
|
|
1524
1626
|
}
|
|
1525
|
-
SkyTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1526
|
-
SkyTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
1527
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1627
|
+
SkyTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i3.SkyCoreAdapterService }, { token: SkyTextEditorAdapterService }, { token: SkyTextEditorService }, { token: SkyTextSanitizationService }, { token: i5$1.NgControl }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
1628
|
+
SkyTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTextEditorComponent, selector: "sky-text-editor", inputs: { autofocus: "autofocus", disabled: "disabled", fontList: "fontList", fontSizeList: "fontSizeList", id: "id", initialStyleState: "initialStyleState", menus: "menus", mergeFields: "mergeFields", placeholder: "placeholder", toolbarActions: "toolbarActions" }, viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["iframe"], descendants: true }], ngImport: i0, template: "<div class=\"sky-text-editor\">\n <sky-toolbar class=\"sky-text-editor-toolbar\">\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 (load)=\"onIframeLoad()\"\n #iframe\n >\n </iframe>\n</div>\n", 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 #c0c0c0;overflow-y:auto;outline:none}.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}\n"], components: [{ type: i3$1.λ37, selector: "sky-toolbar" }, { type: i3$1.λ38, selector: "sky-toolbar-section" }, { type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: ["editorFocusStream", "editorId", "menus", "mergeFields", "disabled"] }, { type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: ["editorFocusStream", "editorId", "fontList", "fontSizeList", "toolbarActions", "styleState", "disabled"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1629
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorComponent, decorators: [{
|
|
1528
1630
|
type: Component,
|
|
1529
1631
|
args: [{
|
|
1530
1632
|
selector: 'sky-text-editor',
|
|
1531
1633
|
templateUrl: './text-editor.component.html',
|
|
1532
1634
|
styleUrls: ['./text-editor.component.scss'],
|
|
1533
1635
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1534
|
-
encapsulation: ViewEncapsulation.None
|
|
1636
|
+
encapsulation: ViewEncapsulation.None,
|
|
1535
1637
|
}]
|
|
1536
1638
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i3.SkyCoreAdapterService }, { type: SkyTextEditorAdapterService }, { type: SkyTextEditorService }, { type: SkyTextSanitizationService }, { type: i5$1.NgControl }, { type: i0.NgZone }]; }, propDecorators: { autofocus: [{
|
|
1537
1639
|
type: Input
|
|
@@ -1560,8 +1662,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
1560
1662
|
|
|
1561
1663
|
class SkyTextEditorModule {
|
|
1562
1664
|
}
|
|
1563
|
-
SkyTextEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1564
|
-
SkyTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
1665
|
+
SkyTextEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1666
|
+
SkyTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorModule, declarations: [SkyTextEditorComponent,
|
|
1565
1667
|
SkyTextEditorUrlModalComponent,
|
|
1566
1668
|
SkyTextEditorToolbarComponent,
|
|
1567
1669
|
SkyTextEditorMenubarComponent], imports: [CommonModule,
|
|
@@ -1583,7 +1685,7 @@ SkyTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
|
|
|
1583
1685
|
SkyTextEditorUrlModalComponent,
|
|
1584
1686
|
SkyTextEditorToolbarComponent,
|
|
1585
1687
|
SkyTextEditorMenubarComponent] });
|
|
1586
|
-
SkyTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
1688
|
+
SkyTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorModule, imports: [[
|
|
1587
1689
|
CommonModule,
|
|
1588
1690
|
FormsModule,
|
|
1589
1691
|
ReactiveFormsModule,
|
|
@@ -1599,9 +1701,9 @@ SkyTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
|
|
|
1599
1701
|
SkyModalModule,
|
|
1600
1702
|
SkyTabsModule,
|
|
1601
1703
|
SkyThemeModule,
|
|
1602
|
-
SkyToolbarModule
|
|
1704
|
+
SkyToolbarModule,
|
|
1603
1705
|
]] });
|
|
1604
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1706
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorModule, decorators: [{
|
|
1605
1707
|
type: NgModule,
|
|
1606
1708
|
args: [{
|
|
1607
1709
|
imports: [
|
|
@@ -1620,23 +1722,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
|
|
|
1620
1722
|
SkyModalModule,
|
|
1621
1723
|
SkyTabsModule,
|
|
1622
1724
|
SkyThemeModule,
|
|
1623
|
-
SkyToolbarModule
|
|
1725
|
+
SkyToolbarModule,
|
|
1624
1726
|
],
|
|
1625
1727
|
exports: [
|
|
1626
1728
|
SkyTextEditorComponent,
|
|
1627
1729
|
SkyTextEditorUrlModalComponent,
|
|
1628
1730
|
SkyTextEditorToolbarComponent,
|
|
1629
|
-
SkyTextEditorMenubarComponent
|
|
1731
|
+
SkyTextEditorMenubarComponent,
|
|
1630
1732
|
],
|
|
1631
1733
|
declarations: [
|
|
1632
1734
|
SkyTextEditorComponent,
|
|
1633
1735
|
SkyTextEditorUrlModalComponent,
|
|
1634
1736
|
SkyTextEditorToolbarComponent,
|
|
1635
|
-
SkyTextEditorMenubarComponent
|
|
1737
|
+
SkyTextEditorMenubarComponent,
|
|
1636
1738
|
],
|
|
1637
|
-
entryComponents: [
|
|
1638
|
-
SkyTextEditorUrlModalComponent
|
|
1639
|
-
]
|
|
1739
|
+
entryComponents: [SkyTextEditorUrlModalComponent],
|
|
1640
1740
|
}]
|
|
1641
1741
|
}] });
|
|
1642
1742
|
|