@skyux/text-editor 11.26.0 → 11.28.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/documentation.json +279 -279
- package/esm2022/lib/modules/rich-text-display/rich-text-display.component.mjs +4 -4
- package/esm2022/lib/modules/rich-text-display/rich-text-display.module.mjs +5 -5
- package/esm2022/lib/modules/shared/sky-text-editor-resources.module.mjs +5 -5
- package/esm2022/lib/modules/text-editor/menubar/text-editor-menubar.component.mjs +5 -5
- package/esm2022/lib/modules/text-editor/services/text-editor-adapter.service.mjs +12 -9
- package/esm2022/lib/modules/text-editor/services/text-editor-selection.service.mjs +4 -4
- package/esm2022/lib/modules/text-editor/services/text-editor.service.mjs +4 -4
- package/esm2022/lib/modules/text-editor/services/text-sanitization.service.mjs +4 -4
- package/esm2022/lib/modules/text-editor/text-editor.component.mjs +12 -9
- package/esm2022/lib/modules/text-editor/text-editor.module.mjs +5 -5
- package/esm2022/lib/modules/text-editor/toolbar/text-editor-toolbar.component.mjs +7 -7
- package/esm2022/lib/modules/text-editor/url-modal/text-editor-url-modal.component.mjs +4 -4
- package/fesm2022/skyux-text-editor.mjs +61 -57
- package/fesm2022/skyux-text-editor.mjs.map +1 -1
- package/lib/modules/text-editor/services/text-editor-adapter.service.d.ts +2 -2
- package/package.json +17 -17
|
@@ -10,18 +10,18 @@ import * as i1$2 from '@angular/forms';
|
|
|
10
10
|
import { FormsModule, NgControl } from '@angular/forms';
|
|
11
11
|
import * as i3 from '@skyux/core';
|
|
12
12
|
import { SkyIdModule, SkyCoreAdapterService, SkyIdService } from '@skyux/core';
|
|
13
|
-
import * as i3$
|
|
13
|
+
import * as i3$2 from '@skyux/help-inline';
|
|
14
14
|
import { SkyHelpInlineModule } from '@skyux/help-inline';
|
|
15
|
-
import * as
|
|
15
|
+
import * as i6 from '@skyux/layout';
|
|
16
16
|
import { SkyToolbarModule } from '@skyux/layout';
|
|
17
|
+
import * as i4 from '@skyux/theme';
|
|
18
|
+
import { SkyThemeModule } from '@skyux/theme';
|
|
17
19
|
import { take, Subject } from 'rxjs';
|
|
18
20
|
import { takeUntil, take as take$1 } from 'rxjs/operators';
|
|
19
|
-
import * as
|
|
21
|
+
import * as i3$1 from '@skyux/i18n';
|
|
20
22
|
import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
|
|
21
23
|
import * as i2 from '@skyux/popovers';
|
|
22
24
|
import { SkyDropdownMessageType, SkyDropdownModule } from '@skyux/popovers';
|
|
23
|
-
import * as i4 from '@skyux/theme';
|
|
24
|
-
import { SkyThemeModule } from '@skyux/theme';
|
|
25
25
|
import he from 'he';
|
|
26
26
|
import * as i4$1 from '@skyux/colorpicker';
|
|
27
27
|
import { SkyColorpickerMessageType, SkyColorpickerModule } from '@skyux/colorpicker';
|
|
@@ -29,7 +29,7 @@ import * as i6$1 from '@skyux/icon';
|
|
|
29
29
|
import { SkyIconModule } from '@skyux/icon';
|
|
30
30
|
import * as i2$1 from '@skyux/modals';
|
|
31
31
|
import { SkyModalInstance, SkyModalModule, SkyModalService } from '@skyux/modals';
|
|
32
|
-
import * as i5
|
|
32
|
+
import * as i5 from '@skyux/tabs';
|
|
33
33
|
import { SkyTabsModule } from '@skyux/tabs';
|
|
34
34
|
import { SkyValidation } from '@skyux/validation';
|
|
35
35
|
|
|
@@ -58,10 +58,10 @@ class SkyTextSanitizationService {
|
|
|
58
58
|
ADD_ATTR: this.#allowedAttributes,
|
|
59
59
|
});
|
|
60
60
|
}
|
|
61
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
62
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
61
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextSanitizationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
62
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextSanitizationService, providedIn: 'root' }); }
|
|
63
63
|
}
|
|
64
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
64
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextSanitizationService, decorators: [{
|
|
65
65
|
type: Injectable,
|
|
66
66
|
args: [{
|
|
67
67
|
providedIn: 'root',
|
|
@@ -97,10 +97,10 @@ class SkyRichTextDisplayComponent {
|
|
|
97
97
|
this.#sanitizer = sanitizer;
|
|
98
98
|
this.#sanitizationService = sanitizationService;
|
|
99
99
|
}
|
|
100
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
101
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
100
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyRichTextDisplayComponent, deps: [{ token: i1.DomSanitizer }, { token: SkyTextSanitizationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
101
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SkyRichTextDisplayComponent, selector: "sky-rich-text-display", inputs: { richText: "richText" }, ngImport: i0, template: "<span class=\"sky-rich-text-display-text\" [innerHTML]=\"sanitizedText\"></span>\n" }); }
|
|
102
102
|
}
|
|
103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyRichTextDisplayComponent, decorators: [{
|
|
104
104
|
type: Component,
|
|
105
105
|
args: [{ selector: 'sky-rich-text-display', template: "<span class=\"sky-rich-text-display-text\" [innerHTML]=\"sanitizedText\"></span>\n" }]
|
|
106
106
|
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: SkyTextSanitizationService }], propDecorators: { richText: [{
|
|
@@ -108,11 +108,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
108
108
|
}] } });
|
|
109
109
|
|
|
110
110
|
class SkyRichTextDisplayModule {
|
|
111
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
112
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
113
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
111
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyRichTextDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
112
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyRichTextDisplayModule, declarations: [SkyRichTextDisplayComponent], exports: [SkyRichTextDisplayComponent] }); }
|
|
113
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyRichTextDisplayModule }); }
|
|
114
114
|
}
|
|
115
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
115
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyRichTextDisplayModule, decorators: [{
|
|
116
116
|
type: NgModule,
|
|
117
117
|
args: [{
|
|
118
118
|
exports: [SkyRichTextDisplayComponent],
|
|
@@ -203,11 +203,11 @@ SkyLibResourcesService.addResources(RESOURCES);
|
|
|
203
203
|
* Import into any component library module that needs to use resource strings.
|
|
204
204
|
*/
|
|
205
205
|
class SkyTextEditorResourcesModule {
|
|
206
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
207
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
208
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
206
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
207
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorResourcesModule, exports: [SkyI18nModule] }); }
|
|
208
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorResourcesModule, imports: [SkyI18nModule] }); }
|
|
209
209
|
}
|
|
210
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
210
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorResourcesModule, decorators: [{
|
|
211
211
|
type: NgModule,
|
|
212
212
|
args: [{
|
|
213
213
|
exports: [SkyI18nModule],
|
|
@@ -370,10 +370,10 @@ class SkyTextEditorSelectionService {
|
|
|
370
370
|
}
|
|
371
371
|
}
|
|
372
372
|
}
|
|
373
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
374
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
373
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
374
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorSelectionService }); }
|
|
375
375
|
}
|
|
376
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
376
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorSelectionService, decorators: [{
|
|
377
377
|
type: Injectable
|
|
378
378
|
}] });
|
|
379
379
|
|
|
@@ -433,10 +433,10 @@ class SkyTextEditorService {
|
|
|
433
433
|
selectionChangeListener() {
|
|
434
434
|
return this.editor.selectionChangeObservable;
|
|
435
435
|
}
|
|
436
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
437
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
436
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
437
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorService }); }
|
|
438
438
|
}
|
|
439
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
439
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorService, decorators: [{
|
|
440
440
|
type: Injectable
|
|
441
441
|
}] });
|
|
442
442
|
|
|
@@ -494,7 +494,7 @@ class SkyTextEditorAdapterService {
|
|
|
494
494
|
/**
|
|
495
495
|
* Executes a command on the text editor with the corresponding id.
|
|
496
496
|
*/
|
|
497
|
-
execCommand(editorCommand) {
|
|
497
|
+
async execCommand(editorCommand) {
|
|
498
498
|
/* istanbul ignore else */
|
|
499
499
|
if (this.#textEditorService.editor) {
|
|
500
500
|
const documentEl = this.#getIframeDocumentEl();
|
|
@@ -507,7 +507,7 @@ class SkyTextEditorAdapterService {
|
|
|
507
507
|
.subscribe((errorString) => alert(errorString));
|
|
508
508
|
}
|
|
509
509
|
else {
|
|
510
|
-
navigator.clipboard.readText().then((clipText) => {
|
|
510
|
+
await navigator.clipboard.readText().then((clipText) => {
|
|
511
511
|
/* istanbul ignore else */
|
|
512
512
|
if (this.editorSelected()) {
|
|
513
513
|
documentEl.execCommand('insertHTML', false, clipText);
|
|
@@ -675,9 +675,9 @@ class SkyTextEditorAdapterService {
|
|
|
675
675
|
const documentEl = this.#getIframeDocumentEl();
|
|
676
676
|
documentEl.body.setAttribute('aria-required', required.toString());
|
|
677
677
|
}
|
|
678
|
-
setFontSize(fontSize) {
|
|
678
|
+
async setFontSize(fontSize) {
|
|
679
679
|
const doc = this.#getIframeDocumentEl();
|
|
680
|
-
this.execCommand({ command: 'fontSize', value: '1' });
|
|
680
|
+
await this.execCommand({ command: 'fontSize', value: '1' });
|
|
681
681
|
const fontElements = Array.from(doc.querySelectorAll('font[size="1"]'));
|
|
682
682
|
for (const element of fontElements) {
|
|
683
683
|
element.removeAttribute('size');
|
|
@@ -813,7 +813,10 @@ class SkyTextEditorAdapterService {
|
|
|
813
813
|
e.preventDefault();
|
|
814
814
|
const text = e.clipboardData?.getData('text/plain');
|
|
815
815
|
if (text !== undefined) {
|
|
816
|
-
this.execCommand({
|
|
816
|
+
void this.execCommand({
|
|
817
|
+
command: 'insertHTML',
|
|
818
|
+
value: text.toString(),
|
|
819
|
+
});
|
|
817
820
|
}
|
|
818
821
|
};
|
|
819
822
|
}
|
|
@@ -903,10 +906,10 @@ class SkyTextEditorAdapterService {
|
|
|
903
906
|
}
|
|
904
907
|
this.#getIframeDocumentEl().body.setAttribute('contenteditable', disabled ? 'false' : 'true');
|
|
905
908
|
}
|
|
906
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
907
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
909
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorAdapterService, deps: [{ token: SkyTextEditorSelectionService }, { token: SkyTextEditorService }, { token: i3.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
910
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorAdapterService }); }
|
|
908
911
|
}
|
|
909
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
912
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorAdapterService, decorators: [{
|
|
910
913
|
type: Injectable
|
|
911
914
|
}], ctorParameters: () => [{ type: SkyTextEditorSelectionService }, { type: SkyTextEditorService }, { type: i3.SkyAppWindowRef }] });
|
|
912
915
|
|
|
@@ -1035,7 +1038,7 @@ class SkyTextEditorMenubarComponent {
|
|
|
1035
1038
|
this.#ngUnsubscribe.complete();
|
|
1036
1039
|
}
|
|
1037
1040
|
execCommand(command, value = '') {
|
|
1038
|
-
this.#adapterService.execCommand({
|
|
1041
|
+
void this.#adapterService.execCommand({
|
|
1039
1042
|
command: command,
|
|
1040
1043
|
value: value,
|
|
1041
1044
|
});
|
|
@@ -1065,10 +1068,10 @@ class SkyTextEditorMenubarComponent {
|
|
|
1065
1068
|
}
|
|
1066
1069
|
this.execCommand('removeFormat');
|
|
1067
1070
|
}
|
|
1068
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1069
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
1071
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorMenubarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1072
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyTextEditorMenubarComponent, isStandalone: true, selector: "sky-text-editor-menubar", inputs: { editorFocusStream: "editorFocusStream", menus: "menus", mergeFields: "mergeFields", disabled: ["disabled", "disabled", booleanAttribute] }, ngImport: i0, template: "@for (menu of menus; track menu) {\n <sky-toolbar-item\n class=\"sky-text-editor-menu\"\n [ngClass]=\"'sky-text-editor-menu-' + menu\"\n >\n @switch (menu) {\n @case ('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 @for (editItem of editItems; track editItem) {\n <sky-dropdown-item>\n @if (!editItem.isDivider) {\n <button type=\"button\" (click)=\"editItem?.function()\">\n {{ editItem.label }}\n @if (editItem.keyShortcut) {\n <div\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 }\n </button>\n } @else {\n <div\n class=\"sky-text-editor-dropdown-item-divider\"\n role=\"divider\"\n ></div>\n }\n </sky-dropdown-item>\n }\n </sky-dropdown-menu>\n </sky-dropdown>\n }\n @case ('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 @for (formatItem of formatItems; track formatItem) {\n <sky-dropdown-item>\n @if (!formatItem.isDivider) {\n <button type=\"button\" (click)=\"formatItem?.function()\">\n {{ formatItem.label }}\n @if (formatItem.keyShortcut) {\n <div\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 }\n </button>\n } @else {\n <div\n class=\"sky-text-editor-dropdown-item-divider\"\n role=\"divider\"\n ></div>\n }\n </sky-dropdown-item>\n }\n </sky-dropdown-menu>\n </sky-dropdown>\n }\n @case ('merge-field') {\n @if (mergeFields && mergeFields.length > 0) {\n <sky-dropdown\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 @for (mergeField of mergeFields; track mergeField) {\n <sky-dropdown-item>\n <button type=\"button\" (click)=\"insertMergeField(mergeField)\">\n {{ mergeField.name }}\n </button>\n </sky-dropdown-item>\n }\n </sky-dropdown-menu>\n </sky-dropdown>\n }\n }\n }\n </sky-toolbar-item>\n}\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i2.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyTextEditorResourcesModule }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i6.λ39, selector: "sky-toolbar-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1070
1073
|
}
|
|
1071
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1074
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorMenubarComponent, decorators: [{
|
|
1072
1075
|
type: Component,
|
|
1073
1076
|
args: [{ standalone: true, selector: 'sky-text-editor-menubar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1074
1077
|
CommonModule,
|
|
@@ -1209,10 +1212,10 @@ class SkyTextEditorUrlModalComponent {
|
|
|
1209
1212
|
}
|
|
1210
1213
|
return !!this.emailAddress && SkyValidation.isEmail(this.emailAddress);
|
|
1211
1214
|
}
|
|
1212
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1213
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
1215
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorUrlModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1216
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyTextEditorUrlModalComponent, isStandalone: true, 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 class=\"sky-text-editor-url-input\"\n stacked=\"true\"\n [hintText]=\"\n openLinksInNewWindowOnly\n ? ('skyux_text_editor_url_modal_open_in_new_window_label'\n | skyLibResources)\n : undefined\n \"\n >\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 #urlInput=\"skyId\"\n class=\"sky-form-control\"\n type=\"text\"\n skyId\n [(ngModel)]=\"url\"\n />\n </sky-input-box>\n </div>\n @if (allowAllOpenLinkOptions) {\n <sky-input-box stacked=\"true\" 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 #targetInput=\"skyId\"\n class=\"sky-form-control\"\n skyId\n [(ngModel)]=\"target\"\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'\n | skyLibResources\n }}\n </option>\n </select>\n </sky-input-box>\n }\n </sky-tab>\n <sky-tab tabHeading=\"Email address\">\n <div class=\"sky-form-group first-field\">\n <sky-input-box stacked=\"true\">\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 #emailAddressInput=\"skyId\"\n class=\"sky-form-control\"\n type=\"text\"\n skyId\n [(ngModel)]=\"emailAddress\"\n />\n </sky-input-box>\n </div>\n <sky-input-box stacked=\"true\" 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 #subjectInput=\"skyId\"\n class=\"sky-form-control\"\n type=\"text\"\n skyId\n [(ngModel)]=\"subject\"\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"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i2$1.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i2$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i2$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i2$1.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i1$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: SkyTabsModule }, { kind: "component", type: i5.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndexValue", "layout"], outputs: ["close"] }, { kind: "component", type: i5.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "ngmodule", type: SkyTextEditorResourcesModule }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
1214
1217
|
}
|
|
1215
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1218
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorUrlModalComponent, decorators: [{
|
|
1216
1219
|
type: Component,
|
|
1217
1220
|
args: [{ standalone: true, selector: 'sky-text-editor-url-modal', imports: [
|
|
1218
1221
|
FormsModule,
|
|
@@ -1277,7 +1280,7 @@ class SkyTextEditorToolbarComponent {
|
|
|
1277
1280
|
this.#subscribeEditorFocus();
|
|
1278
1281
|
}
|
|
1279
1282
|
execCommand(command, value = '') {
|
|
1280
|
-
this.#adapterService.execCommand({
|
|
1283
|
+
void this.#adapterService.execCommand({
|
|
1281
1284
|
command: command,
|
|
1282
1285
|
value: value,
|
|
1283
1286
|
});
|
|
@@ -1345,7 +1348,7 @@ class SkyTextEditorToolbarComponent {
|
|
|
1345
1348
|
this.execCommand('unlink');
|
|
1346
1349
|
}
|
|
1347
1350
|
changeFontSize(size) {
|
|
1348
|
-
this.#adapterService.setFontSize(size);
|
|
1351
|
+
void this.#adapterService.setFontSize(size);
|
|
1349
1352
|
this.styleState = {
|
|
1350
1353
|
...this.styleState,
|
|
1351
1354
|
...this.#adapterService.getStyleState(),
|
|
@@ -1390,10 +1393,10 @@ class SkyTextEditorToolbarComponent {
|
|
|
1390
1393
|
/* istanbul ignore next */
|
|
1391
1394
|
return undefined;
|
|
1392
1395
|
}
|
|
1393
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1394
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyTextEditorToolbarComponent, isStandalone: true, selector: "sky-text-editor-toolbar", inputs: { editorFocusStream: "editorFocusStream", fontList: "fontList", fontSizeList: "fontSizeList", toolbarActions: "toolbarActions", linkWindowOptions: "linkWindowOptions", styleState: "styleState", disabled: ["disabled", "disabled", booleanAttribute] }, ngImport: i0, template: "@for (action of toolbarActions; track action) {\n <sky-toolbar-item\n class=\"sky-text-editor-toolbar-action\"\n [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n >\n @switch (action) {\n @case ('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 @for (fontModel of fontList; track fontModel) {\n <sky-dropdown-item>\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 }\n </sky-dropdown-menu>\n </sky-dropdown>\n }\n @case ('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 @for (size of fontSizeList; track size) {\n <sky-dropdown-item>\n <button type=\"button\" (click)=\"changeFontSize(size)\">\n {{ size + 'px' }}\n </button>\n </sky-dropdown-item>\n }\n </sky-dropdown-menu>\n </sky-dropdown>\n }\n @case ('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 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 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 </div>\n }\n @case ('color') {\n <div class=\"sky-text-editor-colorpicker-group\">\n <div class=\"sky-text-editor-colorpicker-container\">\n <sky-colorpicker\n #colorPicker\n class=\"sky-text-editor-font-color-picker\"\n label=\"Font color\"\n pickerButtonIcon=\"highlighter\"\n pickerButtonIconType=\"skyux\"\n [messageStream]=\"colorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\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 #backColorPicker\n class=\"sky-text-editor-background-color-picker\"\n label=\"Background color\"\n pickerButtonIcon=\"text-color\"\n pickerButtonIconType=\"skyux\"\n [messageStream]=\"backColorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event, true)\"\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 }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertUnorderedList')\"\n >\n <sky-icon icon=\"bullet-list\" />\n </button>\n <button\n aria-label=\"Numbered list\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Numbered list\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertOrderedList')\"\n >\n <sky-icon icon=\"number-list\" />\n </button>\n </div>\n }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyLeft')\"\n >\n <sky-icon icon=\"align-left-text\" />\n </button>\n <button\n aria-label=\"Align center\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align center\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyCenter')\"\n >\n <sky-icon icon=\"center-text\" />\n </button>\n <button\n aria-label=\"Align right\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align right\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyRight')\"\n >\n <sky-icon icon=\"align-right-text\" />\n </button>\n </div>\n }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('outdent')\"\n >\n <sky-icon icon=\"outdent\" />\n </button>\n <button\n aria-label=\"Indent\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Indent\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('indent')\"\n >\n <sky-icon icon=\"indent\" />\n </button>\n </div>\n }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('undo')\"\n >\n <sky-icon icon=\"undo\" />\n </button>\n <button\n aria-label=\"Redo\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Redo\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('redo')\"\n >\n <sky-icon icon=\"redo\" />\n </button>\n </div>\n }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'icon-btn-active': styleState.linkState\n }\"\n (click)=\"link()\"\n >\n <sky-icon icon=\"link\" />\n </button>\n <button\n aria-label=\"Unlink\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Unlink\"\n type=\"button\"\n [disabled]=\"!styleState.linkState || disabled\"\n (click)=\"unlink()\"\n >\n <sky-icon icon=\"unlink\" />\n </button>\n </div>\n }\n }\n </sky-toolbar-item>\n}\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-right:var(--sky-space-inline-s)}: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-right:var(--sky-space-inline-s)}.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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i1$3.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyColorpickerModule }, { kind: "component", type: i4$1.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "pickerButtonIconType", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i4$1.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i2.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i6$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i5.λ39, selector: "sky-toolbar-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1396
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1397
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyTextEditorToolbarComponent, isStandalone: true, selector: "sky-text-editor-toolbar", inputs: { editorFocusStream: "editorFocusStream", fontList: "fontList", fontSizeList: "fontSizeList", toolbarActions: "toolbarActions", linkWindowOptions: "linkWindowOptions", styleState: "styleState", disabled: ["disabled", "disabled", booleanAttribute] }, ngImport: i0, template: "@for (action of toolbarActions; track action) {\n <sky-toolbar-item\n class=\"sky-text-editor-toolbar-action\"\n [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n >\n @switch (action) {\n @case ('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 @for (fontModel of fontList; track fontModel) {\n <sky-dropdown-item>\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 }\n </sky-dropdown-menu>\n </sky-dropdown>\n }\n @case ('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 @for (size of fontSizeList; track size) {\n <sky-dropdown-item>\n <button type=\"button\" (click)=\"changeFontSize(size)\">\n {{ size + 'px' }}\n </button>\n </sky-dropdown-item>\n }\n </sky-dropdown-menu>\n </sky-dropdown>\n }\n @case ('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 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 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 </div>\n }\n @case ('color') {\n <div class=\"sky-text-editor-colorpicker-group\">\n <div class=\"sky-text-editor-colorpicker-container\">\n <sky-colorpicker\n #colorPicker\n class=\"sky-text-editor-font-color-picker\"\n label=\"Font color\"\n pickerButtonIcon=\"highlighter\"\n pickerButtonIconType=\"skyux\"\n [messageStream]=\"colorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\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 #backColorPicker\n class=\"sky-text-editor-background-color-picker\"\n label=\"Background color\"\n pickerButtonIcon=\"text-color\"\n pickerButtonIconType=\"skyux\"\n [messageStream]=\"backColorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event, true)\"\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 }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertUnorderedList')\"\n >\n <sky-icon icon=\"bullet-list\" />\n </button>\n <button\n aria-label=\"Numbered list\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Numbered list\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertOrderedList')\"\n >\n <sky-icon icon=\"number-list\" />\n </button>\n </div>\n }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyLeft')\"\n >\n <sky-icon icon=\"align-left-text\" />\n </button>\n <button\n aria-label=\"Align center\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align center\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyCenter')\"\n >\n <sky-icon icon=\"center-text\" />\n </button>\n <button\n aria-label=\"Align right\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align right\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyRight')\"\n >\n <sky-icon icon=\"align-right-text\" />\n </button>\n </div>\n }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('outdent')\"\n >\n <sky-icon icon=\"outdent\" />\n </button>\n <button\n aria-label=\"Indent\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Indent\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('indent')\"\n >\n <sky-icon icon=\"indent\" />\n </button>\n </div>\n }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('undo')\"\n >\n <sky-icon icon=\"undo\" />\n </button>\n <button\n aria-label=\"Redo\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Redo\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('redo')\"\n >\n <sky-icon icon=\"redo\" />\n </button>\n </div>\n }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'icon-btn-active': styleState.linkState\n }\"\n (click)=\"link()\"\n >\n <sky-icon icon=\"link\" />\n </button>\n <button\n aria-label=\"Unlink\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Unlink\"\n type=\"button\"\n [disabled]=\"!styleState.linkState || disabled\"\n (click)=\"unlink()\"\n >\n <sky-icon icon=\"unlink\" />\n </button>\n </div>\n }\n }\n </sky-toolbar-item>\n}\n", styles: [".sky-text-editor-toolbar-action:not(.sky-theme-modern *){--sky-override-text-editor-border-radius: 0;--sky-override-text-editor-button-border-outer-radius: 3px;--sky-override-text-editor-button-border: 1px solid #cdcfd2;--sky-override-text-editor-colorpicker-spacing: 10px;--sky-override-text-editor-colorpicker-top: 3px}.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:var(--sky-override-text-editor-colorpicker-top, -2px);margin-right:var(--sky-override-text-editor-colorpicker-spacing, var(--sky-space-gap-action_group-m))}.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:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));border-right:none}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:first-of-type{border-top-left-radius:var(--sky-override-text-editor-button-border-outer-radius, var(--sky-border-radius-s));border-bottom-left-radius:var(--sky-override-text-editor-button-border-outer-radius, var(--sky-border-radius-s))}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border-top-right-radius:var(--sky-override-text-editor-button-border-outer-radius, var(--sky-border-radius-s));border-bottom-right-radius:var(--sky-override-text-editor-button-border-outer-radius, var(--sky-border-radius-s));border-right:var(--sky-override-text-editor-button-border, none)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i1$3.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyColorpickerModule }, { kind: "component", type: i4$1.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "pickerButtonIconType", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i4$1.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i2.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i6$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i6.λ39, selector: "sky-toolbar-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1395
1398
|
}
|
|
1396
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1399
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorToolbarComponent, decorators: [{
|
|
1397
1400
|
type: Component,
|
|
1398
1401
|
args: [{ standalone: true, selector: 'sky-text-editor-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1399
1402
|
CommonModule,
|
|
@@ -1404,7 +1407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
1404
1407
|
SkyIconModule,
|
|
1405
1408
|
SkyThemeModule,
|
|
1406
1409
|
SkyToolbarModule,
|
|
1407
|
-
], template: "@for (action of toolbarActions; track action) {\n <sky-toolbar-item\n class=\"sky-text-editor-toolbar-action\"\n [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n >\n @switch (action) {\n @case ('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 @for (fontModel of fontList; track fontModel) {\n <sky-dropdown-item>\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 }\n </sky-dropdown-menu>\n </sky-dropdown>\n }\n @case ('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 @for (size of fontSizeList; track size) {\n <sky-dropdown-item>\n <button type=\"button\" (click)=\"changeFontSize(size)\">\n {{ size + 'px' }}\n </button>\n </sky-dropdown-item>\n }\n </sky-dropdown-menu>\n </sky-dropdown>\n }\n @case ('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 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 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 </div>\n }\n @case ('color') {\n <div class=\"sky-text-editor-colorpicker-group\">\n <div class=\"sky-text-editor-colorpicker-container\">\n <sky-colorpicker\n #colorPicker\n class=\"sky-text-editor-font-color-picker\"\n label=\"Font color\"\n pickerButtonIcon=\"highlighter\"\n pickerButtonIconType=\"skyux\"\n [messageStream]=\"colorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\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 #backColorPicker\n class=\"sky-text-editor-background-color-picker\"\n label=\"Background color\"\n pickerButtonIcon=\"text-color\"\n pickerButtonIconType=\"skyux\"\n [messageStream]=\"backColorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event, true)\"\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 }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertUnorderedList')\"\n >\n <sky-icon icon=\"bullet-list\" />\n </button>\n <button\n aria-label=\"Numbered list\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Numbered list\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertOrderedList')\"\n >\n <sky-icon icon=\"number-list\" />\n </button>\n </div>\n }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyLeft')\"\n >\n <sky-icon icon=\"align-left-text\" />\n </button>\n <button\n aria-label=\"Align center\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align center\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyCenter')\"\n >\n <sky-icon icon=\"center-text\" />\n </button>\n <button\n aria-label=\"Align right\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align right\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyRight')\"\n >\n <sky-icon icon=\"align-right-text\" />\n </button>\n </div>\n }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('outdent')\"\n >\n <sky-icon icon=\"outdent\" />\n </button>\n <button\n aria-label=\"Indent\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Indent\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('indent')\"\n >\n <sky-icon icon=\"indent\" />\n </button>\n </div>\n }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('undo')\"\n >\n <sky-icon icon=\"undo\" />\n </button>\n <button\n aria-label=\"Redo\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Redo\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('redo')\"\n >\n <sky-icon icon=\"redo\" />\n </button>\n </div>\n }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'icon-btn-active': styleState.linkState\n }\"\n (click)=\"link()\"\n >\n <sky-icon icon=\"link\" />\n </button>\n <button\n aria-label=\"Unlink\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Unlink\"\n type=\"button\"\n [disabled]=\"!styleState.linkState || disabled\"\n (click)=\"unlink()\"\n >\n <sky-icon icon=\"unlink\" />\n </button>\n </div>\n }\n }\n </sky-toolbar-item>\n}\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-right:var(--sky-space-inline-s)}: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-right:var(--sky-space-inline-s)}.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"] }]
|
|
1410
|
+
], template: "@for (action of toolbarActions; track action) {\n <sky-toolbar-item\n class=\"sky-text-editor-toolbar-action\"\n [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n >\n @switch (action) {\n @case ('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 @for (fontModel of fontList; track fontModel) {\n <sky-dropdown-item>\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 }\n </sky-dropdown-menu>\n </sky-dropdown>\n }\n @case ('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 @for (size of fontSizeList; track size) {\n <sky-dropdown-item>\n <button type=\"button\" (click)=\"changeFontSize(size)\">\n {{ size + 'px' }}\n </button>\n </sky-dropdown-item>\n }\n </sky-dropdown-menu>\n </sky-dropdown>\n }\n @case ('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 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 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 </div>\n }\n @case ('color') {\n <div class=\"sky-text-editor-colorpicker-group\">\n <div class=\"sky-text-editor-colorpicker-container\">\n <sky-colorpicker\n #colorPicker\n class=\"sky-text-editor-font-color-picker\"\n label=\"Font color\"\n pickerButtonIcon=\"highlighter\"\n pickerButtonIconType=\"skyux\"\n [messageStream]=\"colorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\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 #backColorPicker\n class=\"sky-text-editor-background-color-picker\"\n label=\"Background color\"\n pickerButtonIcon=\"text-color\"\n pickerButtonIconType=\"skyux\"\n [messageStream]=\"backColorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event, true)\"\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 }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertUnorderedList')\"\n >\n <sky-icon icon=\"bullet-list\" />\n </button>\n <button\n aria-label=\"Numbered list\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Numbered list\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertOrderedList')\"\n >\n <sky-icon icon=\"number-list\" />\n </button>\n </div>\n }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyLeft')\"\n >\n <sky-icon icon=\"align-left-text\" />\n </button>\n <button\n aria-label=\"Align center\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align center\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyCenter')\"\n >\n <sky-icon icon=\"center-text\" />\n </button>\n <button\n aria-label=\"Align right\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align right\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyRight')\"\n >\n <sky-icon icon=\"align-right-text\" />\n </button>\n </div>\n }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('outdent')\"\n >\n <sky-icon icon=\"outdent\" />\n </button>\n <button\n aria-label=\"Indent\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Indent\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('indent')\"\n >\n <sky-icon icon=\"indent\" />\n </button>\n </div>\n }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('undo')\"\n >\n <sky-icon icon=\"undo\" />\n </button>\n <button\n aria-label=\"Redo\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Redo\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('redo')\"\n >\n <sky-icon icon=\"redo\" />\n </button>\n </div>\n }\n @case ('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 type=\"button\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'icon-btn-active': styleState.linkState\n }\"\n (click)=\"link()\"\n >\n <sky-icon icon=\"link\" />\n </button>\n <button\n aria-label=\"Unlink\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Unlink\"\n type=\"button\"\n [disabled]=\"!styleState.linkState || disabled\"\n (click)=\"unlink()\"\n >\n <sky-icon icon=\"unlink\" />\n </button>\n </div>\n }\n }\n </sky-toolbar-item>\n}\n", styles: [".sky-text-editor-toolbar-action:not(.sky-theme-modern *){--sky-override-text-editor-border-radius: 0;--sky-override-text-editor-button-border-outer-radius: 3px;--sky-override-text-editor-button-border: 1px solid #cdcfd2;--sky-override-text-editor-colorpicker-spacing: 10px;--sky-override-text-editor-colorpicker-top: 3px}.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:var(--sky-override-text-editor-colorpicker-top, -2px);margin-right:var(--sky-override-text-editor-colorpicker-spacing, var(--sky-space-gap-action_group-m))}.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:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));border-right:none}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:first-of-type{border-top-left-radius:var(--sky-override-text-editor-button-border-outer-radius, var(--sky-border-radius-s));border-bottom-left-radius:var(--sky-override-text-editor-button-border-outer-radius, var(--sky-border-radius-s))}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border-top-right-radius:var(--sky-override-text-editor-button-border-outer-radius, var(--sky-border-radius-s));border-bottom-right-radius:var(--sky-override-text-editor-button-border-outer-radius, var(--sky-border-radius-s));border-right:var(--sky-override-text-editor-button-border, none)}\n"] }]
|
|
1408
1411
|
}], propDecorators: { editorFocusStream: [{
|
|
1409
1412
|
type: Input
|
|
1410
1413
|
}], fontList: [{
|
|
@@ -1821,15 +1824,15 @@ class SkyTextEditorComponent {
|
|
|
1821
1824
|
#_onTouched;
|
|
1822
1825
|
/* istanbul ignore next */
|
|
1823
1826
|
#_onChange;
|
|
1824
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1825
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
1827
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1828
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyTextEditorComponent, isStandalone: true, selector: "sky-text-editor", inputs: { autofocus: "autofocus", disabled: ["disabled", "disabled", booleanAttribute], fontList: "fontList", fontSizeList: "fontSizeList", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", hintText: "hintText", id: "id", initialStyleState: "initialStyleState", labelText: "labelText", menus: "menus", mergeFields: "mergeFields", placeholder: "placeholder", stacked: ["stacked", "stacked", booleanAttribute], toolbarActions: "toolbarActions", linkWindowOptions: "linkWindowOptions", helpKey: "helpKey" }, host: { properties: { "class.sky-form-field-stacked": "this.stacked", "class.sky-form-control": "this.formControlClass" } }, providers: [
|
|
1826
1829
|
SkyTextEditorService,
|
|
1827
1830
|
SkyTextEditorSelectionService,
|
|
1828
1831
|
SkyTextEditorAdapterService,
|
|
1829
1832
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
1830
|
-
], viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["iframe"], descendants: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }], hostDirectives: [{ directive: i1$3.SkyRequiredStateDirective, inputs: ["required", "required"] }], ngImport: i0, template: "<div\n class=\"sky-text-editor\"\n [ngClass]=\"{\n 'sky-text-editor-disabled': disabled,\n 'sky-text-editor-wrapper-focused': editorFocused,\n 'sky-text-editor-invalid':\n ngControl.errors && (ngControl.touched || ngControl.dirty),\n 'sky-margin-stacked-xs': !!hintText\n }\"\n>\n <div class=\"sky-text-editor-label-wrapper\">\n @if (labelText) {\n <label\n class=\"sky-control-label\"\n [ngClass]=\"{\n 'sky-control-label-required': requiredState.isRequired(),\n 'sky-margin-inline-xs': helpPopoverContent\n }\"\n >{{ labelText }}</label\n >\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n }\n }\n </div>\n @if (\n (menus && menus.length) > 0 || (toolbarActions && toolbarActions.length > 0)\n ) {\n <sky-toolbar class=\"sky-text-editor-toolbar\">\n @if (menus && menus.length > 0) {\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 [menus]=\"menus\"\n [mergeFields]=\"mergeFields\"\n />\n </sky-toolbar-section>\n }\n @if (toolbarActions && toolbarActions.length > 0) {\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 [fontList]=\"fontList\"\n [fontSizeList]=\"fontSizeList\"\n [linkWindowOptions]=\"linkWindowOptions\"\n [toolbarActions]=\"toolbarActions\"\n [styleState]=\"initialStyleState\"\n />\n </sky-toolbar-section>\n }\n </sky-toolbar>\n }\n <iframe\n #iframe\n class=\"sky-text-editor-wrapper\"\n src=\"about:blank\"\n allow=\"clipboard-read *; clipboard-write *\"\n [attr.title]=\"\n labelText || ('skyux_text_editor_iframe_title_default' | skyLibResources)\n \"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [ngClass]=\"{\n 'sky-text-editor-wrapper-disabled': disabled\n }\"\n (load)=\"onIframeLoad()\"\n >\n </iframe>\n</div>\n<div\n #hintTextEl=\"skyId\"\n skyId\n [ngClass]=\"{\n 'sky-font-deemphasized sky-text-editor-hint-text': !!hintText\n }\"\n>\n {{ hintText }}\n</div>\n<sky-form-errors\n class=\"sky-text-editor-errors\"\n [id]=\"errorId\"\n [errors]=\"ngControl.errors\"\n [labelText]=\"labelText\"\n [touched]=\"ngControl.touched\"\n [dirty]=\"ngControl.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: ["sky-text-editor.sky-margin-stacked-lg{display:block}.sky-text-editor.sky-text-editor-disabled .sky-toolbar *,.sky-text-editor.sky-text-editor-disabled .sky-text-editor-wrapper *{color:var(--sky-text-color-deemphasized)!important}.sky-text-editor .sky-text-editor-label-wrapper{display:flex;width:100%}.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 #cdcfd2;border-top:none;overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:var(--sky-background-color-disabled)}.sky-text-editor.sky-text-editor-invalid .sky-text-editor-wrapper{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}.sky-text-editor.sky-text-editor-wrapper-focused .sky-text-editor-wrapper{box-shadow:0 0 8px #00b4f199;border:1px solid var(--sky-highlight-color-info);outline:none}.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;border-right:1px solid #cdcfd2}.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{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;border-radius:6px}.sky-theme-modern .sky-text-editor.sky-text-editor-disabled{background-color:var(--sky-background-color-disabled);cursor:not-allowed}.sky-theme-modern .sky-text-editor .sky-text-editor-label-wrapper:not(:empty){display:inline-block;padding:10px 10px 0;width:100%;color:#686c73;transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-text-editor .sky-text-editor-label-wrapper:not(:empty) label{font-size:13px;margin-bottom:0}.sky-theme-modern .sky-text-editor.sky-text-editor-invalid .sky-text-editor-label-wrapper{color:var(--sky-highlight-color-danger)}.sky-theme-modern .sky-text-editor.sky-text-editor-invalid .sky-text-editor-wrapper{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger)}.sky-theme-modern .sky-text-editor.sky-text-editor-wrapper-focused .sky-text-editor-label-wrapper{color:#1870b8}.sky-theme-modern .sky-text-editor.sky-text-editor-wrapper-focused .sky-text-editor-wrapper{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-text-editor:not(.sky-text-editor-wrapper-focused) .sky-text-editor-wrapper:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{transition:border-color .15s,box-shadow .15s,color .15s;box-shadow:inset 0 0 0 1px #d2d2d2;border-bottom-left-radius:6px;border-bottom-right-radius:6px;border:none}.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;border-top:none!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar sky-toolbar-section:not(:last-of-type) .sky-toolbar-section{padding-bottom:0!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:none!important;border-right:none!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 0 0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i3$1.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: ["editorFocusStream", "menus", "mergeFields", "disabled"] }, { kind: "component", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: ["editorFocusStream", "fontList", "fontSizeList", "toolbarActions", "linkWindowOptions", "styleState", "disabled"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i5.λ38, selector: "sky-toolbar-section" }, { kind: "ngmodule", type: SkyFormErrorsModule }, { kind: "component", type: i1$3.λ21, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyTextEditorResourcesModule }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1833
|
+
], viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["iframe"], descendants: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }], hostDirectives: [{ directive: i1$3.SkyRequiredStateDirective, inputs: ["required", "required"] }], ngImport: i0, template: "<div\n class=\"sky-text-editor\"\n [ngClass]=\"{\n 'sky-text-editor-disabled': disabled,\n 'sky-text-editor-wrapper-focused': editorFocused,\n 'sky-text-editor-invalid':\n ngControl.errors && (ngControl.touched || ngControl.dirty)\n }\"\n>\n <div class=\"sky-text-editor-label-wrapper\">\n @if (labelText) {\n <label\n class=\"sky-control-label\"\n [ngClass]=\"{\n 'sky-control-label-required': requiredState.isRequired()\n }\"\n >{{ labelText }}</label\n >\n @if (helpPopoverContent || helpKey) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n </span>\n }\n }\n </div>\n @if (\n (menus && menus.length) > 0 || (toolbarActions && toolbarActions.length > 0)\n ) {\n <sky-toolbar class=\"sky-text-editor-toolbar\">\n @if (menus && menus.length > 0) {\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 [menus]=\"menus\"\n [mergeFields]=\"mergeFields\"\n />\n </sky-toolbar-section>\n }\n @if (toolbarActions && toolbarActions.length > 0) {\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 [fontList]=\"fontList\"\n [fontSizeList]=\"fontSizeList\"\n [linkWindowOptions]=\"linkWindowOptions\"\n [toolbarActions]=\"toolbarActions\"\n [styleState]=\"initialStyleState\"\n />\n </sky-toolbar-section>\n }\n </sky-toolbar>\n }\n <iframe\n #iframe\n class=\"sky-text-editor-wrapper\"\n src=\"about:blank\"\n allow=\"clipboard-read *; clipboard-write *\"\n [attr.title]=\"\n labelText || ('skyux_text_editor_iframe_title_default' | skyLibResources)\n \"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [ngClass]=\"{\n 'sky-text-editor-wrapper-disabled': disabled\n }\"\n (load)=\"onIframeLoad()\"\n >\n </iframe>\n</div>\n<div\n #hintTextEl=\"skyId\"\n skyId\n class=\"sky-text-editor-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n>\n {{ hintText }}\n</div>\n<sky-form-errors\n class=\"sky-text-editor-errors\"\n [id]=\"errorId\"\n [errors]=\"ngControl.errors\"\n [labelText]=\"labelText\"\n [touched]=\"ngControl.touched\"\n [dirty]=\"ngControl.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-text-editor:not(.sky-theme-modern *){--sky-override-text-editor-background-color: white;--sky-override-text-editor-toolbar-background-color: white;--sky-override-text-editor-label-background-color: transparent;--sky-override-text-editor-border-error: 1px solid var(--sky-highlight-color-danger);--sky-override-text-editor-border-focused: 1px solid var(--sky-highlight-color-info);--sky-override-text-editor-border-radius: 0;--sky-override-text-editor-border: 1px solid #cdcfd2;--sky-override-text-editor-box-shadow-error: 0 0 8px rgba(239, 64, 68, .6);--sky-override-text-editor-box-shadow-focused: 0 0 8px rgba(0, 180, 241, .6);--sky-override-text-editor-box-shadow: none;--sky-override-text-editor-disabled-cursor: default;--sky-override-text-editor-label-color: var(--sky-text-color-default);--sky-override-text-editor-label-display: flex;--sky-override-text-editor-label-font-size: 15px;--sky-override-text-editor-label-font-weight: 400;--sky-override-text-editor-label-line-height: normal;--sky-override-text-editor-label-margin-bottom: 5px;--sky-override-text-editor-label-padding: 0;--sky-override-text-editor-toolbar-border: 1px solid #cdcfd2;--sky-override-text-editor-toolbar-item-spacing: 0 20px 10px 0;--sky-override-text-editor-toolbar-section-padding: 10px 10px 0 10px;--sky-override-text-editor-top-toolbar-bottom-padding: 0;--sky-override-text-editor-wrapper-background-color-disabled: var( --sky-background-color-disabled );--sky-override-text-editor-wrapper-padding: 1rem}.sky-text-editor-hint-text:not(.sky-theme-modern *){--sky-override-text-editor-hint-text-space: 5px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-text-editor{--sky-override-text-editor-background-color: var(--modern-color-white);--sky-override-text-editor-border-color: #d2d2d2;--sky-override-text-editor-focus-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3);--sky-override-text-editor-label-padding: 10px 10px 0 10px;--sky-override-text-editor-toolbar-section-padding: 10px;--sky-override-text-editor-top-toolbar-bottom-padding: 0}sky-text-editor.sky-form-field-stacked{display:block}.sky-text-editor{border-radius:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-base)))}.sky-text-editor.sky-text-editor-disabled{background-color:var(--sky-color-background-input-disabled);box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-disabled) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-disabled)));cursor:var(--sky-override-text-editor-disabled-cursor, not-allowed)}.sky-text-editor .sky-text-editor-label-wrapper:not(:empty){background-color:var(--sky-override-text-editor-label-background-color, var(--sky-color-background-input-base));display:var(--sky-override-text-editor-label-display, inline-block);padding:var(--sky-override-text-editor-label-padding, var(--sky-space-inset-input_label-top-m) var(--sky-space-inset-input-right-m) 0 var(--sky-space-inset-input-left-m));width:100%;color:var(--sky-override-text-editor-label-color, var(--sky-color-text-deemphasized))}.sky-text-editor .sky-text-editor-label-wrapper:not(:empty) label{font-size:var(--sky-override-text-editor-label-font-size, var(--sky-font-size-input-label));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-override-text-editor-label-font-weight, var(--sky-font-weight-input-label));letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-override-text-editor-label-line-height, var(--sky-font-line_height-input-label));margin-bottom:var(--sky-override-text-editor-label-margin-bottom, 0)}.sky-text-editor .sky-text-editor-wrapper{display:flex;flex-wrap:wrap;background-color:var(--sky-override-text-editor-background-color, var(--sky-color-background-input-base));width:100%;height:300px;padding:var(--sky-override-text-editor-wrapper-padding, var(--sky-space-inset-balanced-m));font-size:1.2rem;border-bottom-left-radius:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));border-bottom-right-radius:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));border-top:none;border-right:var(--sky-override-text-editor-border, none);border-bottom:var(--sky-override-text-editor-border, none);border-left:var(--sky-override-text-editor-border, none);box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-base)));overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:var(--sky-override-text-editor-wrapper-background-color-disabled, var(--sky-color-background-input-disabled));box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-disabled) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-disabled)))}.sky-text-editor.sky-text-editor-invalid .sky-text-editor-wrapper{box-shadow:var(--sky-override-text-editor-box-shadow-error, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-input-error));border:var(--sky-override-text-editor-border-error, none);outline:none}.sky-text-editor.sky-text-editor-invalid .sky-text-editor-label-wrapper{color:var(--sky-override-text-editor-label-color, var(--sky-color-text-danger))}.sky-text-editor.sky-text-editor-wrapper-focused .sky-text-editor-wrapper{box-shadow:var(--sky-override-text-editor-box-shadow-focused, inset 0 0 0 var(--sky-border-width-input-focus) var(--sky-color-border-input-focus), var(--sky-override-text-editor-focus-shadow, var(--sky-elevation-focus)));border:var(--sky-override-text-editor-border-focused, none);outline:none}.sky-text-editor.sky-text-editor-wrapper-focused .sky-text-editor-label-wrapper{color:var(--sky-override-text-editor-label-color, var(--sky-color-text-action))}.sky-text-editor:not(.sky-text-editor-wrapper-focused) .sky-text-editor-wrapper:hover:not(:active){box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-hover) var(--sky-color-border-input-hover))}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-container{background-color:var(--sky-override-text-editor-toolbar-background-color, var(--sky-color-background-input-base))!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:var(--sky-override-text-editor-toolbar-section-padding, var(--sky-space-inset-vertical-top-s) var(--sky-space-inset-input-right-m) var(--sky-space-inset-vertical-bottom-s) var(--sky-space-inset-input-left-m))!important;border-top:var(--sky-override-text-editor-toolbar-border, none)!important}.sky-text-editor .sky-text-editor-toolbar sky-toolbar-section:not(:last-of-type) .sky-toolbar-section{padding-bottom:var(--sky-override-text-editor-top-toolbar-bottom-padding, var(--sky-space-inset-vertical-bottom-s))!important;border-top:none!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:var(--sky-override-text-editor-toolbar-border, none);border-right:var(--sky-override-text-editor-toolbar-border, none)}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:var(--sky-override-text-editor-toolbar-item-spacing, 0 var(--sky-space-gap-action_group-xl) 0 0)!important}.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-text-editor-hint-text{margin-top:var(--sky-override-text-editor-hint-text-space, var(--sky-space-gap-stacked_supplemental-s))}.sky-theme-modern .sky-text-editor .sky-text-editor-label-wrapper:not(:empty){transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{transition:border-color .15s,box-shadow .15s,color .15s}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i3$2.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: ["editorFocusStream", "menus", "mergeFields", "disabled"] }, { kind: "component", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: ["editorFocusStream", "fontList", "fontSizeList", "toolbarActions", "linkWindowOptions", "styleState", "disabled"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i6.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i6.λ38, selector: "sky-toolbar-section" }, { kind: "ngmodule", type: SkyFormErrorsModule }, { kind: "component", type: i1$3.λ21, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyTextEditorResourcesModule }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1831
1834
|
}
|
|
1832
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1835
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorComponent, decorators: [{
|
|
1833
1836
|
type: Component,
|
|
1834
1837
|
args: [{ standalone: true, selector: 'sky-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
1835
1838
|
SkyTextEditorService,
|
|
@@ -1847,10 +1850,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
1847
1850
|
SkyIdModule,
|
|
1848
1851
|
SkyTextEditorMenubarComponent,
|
|
1849
1852
|
SkyTextEditorToolbarComponent,
|
|
1853
|
+
SkyThemeModule,
|
|
1850
1854
|
SkyToolbarModule,
|
|
1851
1855
|
SkyFormErrorsModule,
|
|
1852
1856
|
SkyTextEditorResourcesModule,
|
|
1853
|
-
], template: "<div\n class=\"sky-text-editor\"\n [ngClass]=\"{\n 'sky-text-editor-disabled': disabled,\n 'sky-text-editor-wrapper-focused': editorFocused,\n 'sky-text-editor-invalid':\n ngControl.errors && (ngControl.touched || ngControl.dirty),\n 'sky-margin-stacked-xs': !!hintText\n }\"\n>\n <div class=\"sky-text-editor-label-wrapper\">\n @if (labelText) {\n <label\n class=\"sky-control-label\"\n [ngClass]=\"{\n 'sky-control-label-required': requiredState.isRequired(),\n 'sky-margin-inline-xs': helpPopoverContent\n }\"\n >{{ labelText }}</label\n >\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n }\n }\n </div>\n @if (\n (menus && menus.length) > 0 || (toolbarActions && toolbarActions.length > 0)\n ) {\n <sky-toolbar class=\"sky-text-editor-toolbar\">\n @if (menus && menus.length > 0) {\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 [menus]=\"menus\"\n [mergeFields]=\"mergeFields\"\n />\n </sky-toolbar-section>\n }\n @if (toolbarActions && toolbarActions.length > 0) {\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 [fontList]=\"fontList\"\n [fontSizeList]=\"fontSizeList\"\n [linkWindowOptions]=\"linkWindowOptions\"\n [toolbarActions]=\"toolbarActions\"\n [styleState]=\"initialStyleState\"\n />\n </sky-toolbar-section>\n }\n </sky-toolbar>\n }\n <iframe\n #iframe\n class=\"sky-text-editor-wrapper\"\n src=\"about:blank\"\n allow=\"clipboard-read *; clipboard-write *\"\n [attr.title]=\"\n labelText || ('skyux_text_editor_iframe_title_default' | skyLibResources)\n \"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [ngClass]=\"{\n 'sky-text-editor-wrapper-disabled': disabled\n }\"\n (load)=\"onIframeLoad()\"\n >\n </iframe>\n</div>\n<div\n #hintTextEl=\"skyId\"\n skyId\n [ngClass]=\"{\n 'sky-font-deemphasized sky-text-editor-hint-text': !!hintText\n }\"\n>\n {{ hintText }}\n</div>\n<sky-form-errors\n class=\"sky-text-editor-errors\"\n [id]=\"errorId\"\n [errors]=\"ngControl.errors\"\n [labelText]=\"labelText\"\n [touched]=\"ngControl.touched\"\n [dirty]=\"ngControl.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: ["sky-text-editor.sky-margin-stacked-lg{display:block}.sky-text-editor.sky-text-editor-disabled .sky-toolbar *,.sky-text-editor.sky-text-editor-disabled .sky-text-editor-wrapper *{color:var(--sky-text-color-deemphasized)!important}.sky-text-editor .sky-text-editor-label-wrapper{display:flex;width:100%}.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 #cdcfd2;border-top:none;overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:var(--sky-background-color-disabled)}.sky-text-editor.sky-text-editor-invalid .sky-text-editor-wrapper{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}.sky-text-editor.sky-text-editor-wrapper-focused .sky-text-editor-wrapper{box-shadow:0 0 8px #00b4f199;border:1px solid var(--sky-highlight-color-info);outline:none}.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;border-right:1px solid #cdcfd2}.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{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;border-radius:6px}.sky-theme-modern .sky-text-editor.sky-text-editor-disabled{background-color:var(--sky-background-color-disabled);cursor:not-allowed}.sky-theme-modern .sky-text-editor .sky-text-editor-label-wrapper:not(:empty){display:inline-block;padding:10px 10px 0;width:100%;color:#686c73;transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-text-editor .sky-text-editor-label-wrapper:not(:empty) label{font-size:13px;margin-bottom:0}.sky-theme-modern .sky-text-editor.sky-text-editor-invalid .sky-text-editor-label-wrapper{color:var(--sky-highlight-color-danger)}.sky-theme-modern .sky-text-editor.sky-text-editor-invalid .sky-text-editor-wrapper{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger)}.sky-theme-modern .sky-text-editor.sky-text-editor-wrapper-focused .sky-text-editor-label-wrapper{color:#1870b8}.sky-theme-modern .sky-text-editor.sky-text-editor-wrapper-focused .sky-text-editor-wrapper{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-text-editor:not(.sky-text-editor-wrapper-focused) .sky-text-editor-wrapper:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{transition:border-color .15s,box-shadow .15s,color .15s;box-shadow:inset 0 0 0 1px #d2d2d2;border-bottom-left-radius:6px;border-bottom-right-radius:6px;border:none}.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;border-top:none!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar sky-toolbar-section:not(:last-of-type) .sky-toolbar-section{padding-bottom:0!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:none!important;border-right:none!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 0 0!important}\n"] }]
|
|
1857
|
+
], template: "<div\n class=\"sky-text-editor\"\n [ngClass]=\"{\n 'sky-text-editor-disabled': disabled,\n 'sky-text-editor-wrapper-focused': editorFocused,\n 'sky-text-editor-invalid':\n ngControl.errors && (ngControl.touched || ngControl.dirty)\n }\"\n>\n <div class=\"sky-text-editor-label-wrapper\">\n @if (labelText) {\n <label\n class=\"sky-control-label\"\n [ngClass]=\"{\n 'sky-control-label-required': requiredState.isRequired()\n }\"\n >{{ labelText }}</label\n >\n @if (helpPopoverContent || helpKey) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n </span>\n }\n }\n </div>\n @if (\n (menus && menus.length) > 0 || (toolbarActions && toolbarActions.length > 0)\n ) {\n <sky-toolbar class=\"sky-text-editor-toolbar\">\n @if (menus && menus.length > 0) {\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 [menus]=\"menus\"\n [mergeFields]=\"mergeFields\"\n />\n </sky-toolbar-section>\n }\n @if (toolbarActions && toolbarActions.length > 0) {\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 [fontList]=\"fontList\"\n [fontSizeList]=\"fontSizeList\"\n [linkWindowOptions]=\"linkWindowOptions\"\n [toolbarActions]=\"toolbarActions\"\n [styleState]=\"initialStyleState\"\n />\n </sky-toolbar-section>\n }\n </sky-toolbar>\n }\n <iframe\n #iframe\n class=\"sky-text-editor-wrapper\"\n src=\"about:blank\"\n allow=\"clipboard-read *; clipboard-write *\"\n [attr.title]=\"\n labelText || ('skyux_text_editor_iframe_title_default' | skyLibResources)\n \"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [ngClass]=\"{\n 'sky-text-editor-wrapper-disabled': disabled\n }\"\n (load)=\"onIframeLoad()\"\n >\n </iframe>\n</div>\n<div\n #hintTextEl=\"skyId\"\n skyId\n class=\"sky-text-editor-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n>\n {{ hintText }}\n</div>\n<sky-form-errors\n class=\"sky-text-editor-errors\"\n [id]=\"errorId\"\n [errors]=\"ngControl.errors\"\n [labelText]=\"labelText\"\n [touched]=\"ngControl.touched\"\n [dirty]=\"ngControl.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-text-editor:not(.sky-theme-modern *){--sky-override-text-editor-background-color: white;--sky-override-text-editor-toolbar-background-color: white;--sky-override-text-editor-label-background-color: transparent;--sky-override-text-editor-border-error: 1px solid var(--sky-highlight-color-danger);--sky-override-text-editor-border-focused: 1px solid var(--sky-highlight-color-info);--sky-override-text-editor-border-radius: 0;--sky-override-text-editor-border: 1px solid #cdcfd2;--sky-override-text-editor-box-shadow-error: 0 0 8px rgba(239, 64, 68, .6);--sky-override-text-editor-box-shadow-focused: 0 0 8px rgba(0, 180, 241, .6);--sky-override-text-editor-box-shadow: none;--sky-override-text-editor-disabled-cursor: default;--sky-override-text-editor-label-color: var(--sky-text-color-default);--sky-override-text-editor-label-display: flex;--sky-override-text-editor-label-font-size: 15px;--sky-override-text-editor-label-font-weight: 400;--sky-override-text-editor-label-line-height: normal;--sky-override-text-editor-label-margin-bottom: 5px;--sky-override-text-editor-label-padding: 0;--sky-override-text-editor-toolbar-border: 1px solid #cdcfd2;--sky-override-text-editor-toolbar-item-spacing: 0 20px 10px 0;--sky-override-text-editor-toolbar-section-padding: 10px 10px 0 10px;--sky-override-text-editor-top-toolbar-bottom-padding: 0;--sky-override-text-editor-wrapper-background-color-disabled: var( --sky-background-color-disabled );--sky-override-text-editor-wrapper-padding: 1rem}.sky-text-editor-hint-text:not(.sky-theme-modern *){--sky-override-text-editor-hint-text-space: 5px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-text-editor{--sky-override-text-editor-background-color: var(--modern-color-white);--sky-override-text-editor-border-color: #d2d2d2;--sky-override-text-editor-focus-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3);--sky-override-text-editor-label-padding: 10px 10px 0 10px;--sky-override-text-editor-toolbar-section-padding: 10px;--sky-override-text-editor-top-toolbar-bottom-padding: 0}sky-text-editor.sky-form-field-stacked{display:block}.sky-text-editor{border-radius:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-base)))}.sky-text-editor.sky-text-editor-disabled{background-color:var(--sky-color-background-input-disabled);box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-disabled) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-disabled)));cursor:var(--sky-override-text-editor-disabled-cursor, not-allowed)}.sky-text-editor .sky-text-editor-label-wrapper:not(:empty){background-color:var(--sky-override-text-editor-label-background-color, var(--sky-color-background-input-base));display:var(--sky-override-text-editor-label-display, inline-block);padding:var(--sky-override-text-editor-label-padding, var(--sky-space-inset-input_label-top-m) var(--sky-space-inset-input-right-m) 0 var(--sky-space-inset-input-left-m));width:100%;color:var(--sky-override-text-editor-label-color, var(--sky-color-text-deemphasized))}.sky-text-editor .sky-text-editor-label-wrapper:not(:empty) label{font-size:var(--sky-override-text-editor-label-font-size, var(--sky-font-size-input-label));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-override-text-editor-label-font-weight, var(--sky-font-weight-input-label));letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-override-text-editor-label-line-height, var(--sky-font-line_height-input-label));margin-bottom:var(--sky-override-text-editor-label-margin-bottom, 0)}.sky-text-editor .sky-text-editor-wrapper{display:flex;flex-wrap:wrap;background-color:var(--sky-override-text-editor-background-color, var(--sky-color-background-input-base));width:100%;height:300px;padding:var(--sky-override-text-editor-wrapper-padding, var(--sky-space-inset-balanced-m));font-size:1.2rem;border-bottom-left-radius:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));border-bottom-right-radius:var(--sky-override-text-editor-border-radius, var(--sky-border-radius-s));border-top:none;border-right:var(--sky-override-text-editor-border, none);border-bottom:var(--sky-override-text-editor-border, none);border-left:var(--sky-override-text-editor-border, none);box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-base)));overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:var(--sky-override-text-editor-wrapper-background-color-disabled, var(--sky-color-background-input-disabled));box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-disabled) var(--sky-override-text-editor-border-color, var(--sky-color-border-input-disabled)))}.sky-text-editor.sky-text-editor-invalid .sky-text-editor-wrapper{box-shadow:var(--sky-override-text-editor-box-shadow-error, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-input-error));border:var(--sky-override-text-editor-border-error, none);outline:none}.sky-text-editor.sky-text-editor-invalid .sky-text-editor-label-wrapper{color:var(--sky-override-text-editor-label-color, var(--sky-color-text-danger))}.sky-text-editor.sky-text-editor-wrapper-focused .sky-text-editor-wrapper{box-shadow:var(--sky-override-text-editor-box-shadow-focused, inset 0 0 0 var(--sky-border-width-input-focus) var(--sky-color-border-input-focus), var(--sky-override-text-editor-focus-shadow, var(--sky-elevation-focus)));border:var(--sky-override-text-editor-border-focused, none);outline:none}.sky-text-editor.sky-text-editor-wrapper-focused .sky-text-editor-label-wrapper{color:var(--sky-override-text-editor-label-color, var(--sky-color-text-action))}.sky-text-editor:not(.sky-text-editor-wrapper-focused) .sky-text-editor-wrapper:hover:not(:active){box-shadow:var(--sky-override-text-editor-box-shadow, inset 0 0 0 var(--sky-border-width-input-hover) var(--sky-color-border-input-hover))}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-container{background-color:var(--sky-override-text-editor-toolbar-background-color, var(--sky-color-background-input-base))!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:var(--sky-override-text-editor-toolbar-section-padding, var(--sky-space-inset-vertical-top-s) var(--sky-space-inset-input-right-m) var(--sky-space-inset-vertical-bottom-s) var(--sky-space-inset-input-left-m))!important;border-top:var(--sky-override-text-editor-toolbar-border, none)!important}.sky-text-editor .sky-text-editor-toolbar sky-toolbar-section:not(:last-of-type) .sky-toolbar-section{padding-bottom:var(--sky-override-text-editor-top-toolbar-bottom-padding, var(--sky-space-inset-vertical-bottom-s))!important;border-top:none!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:var(--sky-override-text-editor-toolbar-border, none);border-right:var(--sky-override-text-editor-toolbar-border, none)}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:var(--sky-override-text-editor-toolbar-item-spacing, 0 var(--sky-space-gap-action_group-xl) 0 0)!important}.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-text-editor-hint-text{margin-top:var(--sky-override-text-editor-hint-text-space, var(--sky-space-gap-stacked_supplemental-s))}.sky-theme-modern .sky-text-editor .sky-text-editor-label-wrapper:not(:empty){transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{transition:border-color .15s,box-shadow .15s,color .15s}\n"] }]
|
|
1854
1858
|
}], ctorParameters: () => [], propDecorators: { autofocus: [{
|
|
1855
1859
|
type: Input
|
|
1856
1860
|
}], disabled: [{
|
|
@@ -1883,7 +1887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
1883
1887
|
args: [{ transform: booleanAttribute }]
|
|
1884
1888
|
}, {
|
|
1885
1889
|
type: HostBinding,
|
|
1886
|
-
args: ['class.sky-
|
|
1890
|
+
args: ['class.sky-form-field-stacked']
|
|
1887
1891
|
}], toolbarActions: [{
|
|
1888
1892
|
type: Input
|
|
1889
1893
|
}], linkWindowOptions: [{
|
|
@@ -1905,11 +1909,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
1905
1909
|
}] } });
|
|
1906
1910
|
|
|
1907
1911
|
class SkyTextEditorModule {
|
|
1908
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1909
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
1910
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
1912
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1913
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorModule, imports: [SkyTextEditorComponent], exports: [SkyTextEditorComponent, SkyFormErrorModule] }); }
|
|
1914
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorModule, imports: [SkyTextEditorComponent, SkyFormErrorModule] }); }
|
|
1911
1915
|
}
|
|
1912
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1916
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTextEditorModule, decorators: [{
|
|
1913
1917
|
type: NgModule,
|
|
1914
1918
|
args: [{
|
|
1915
1919
|
imports: [SkyTextEditorComponent],
|