@skyux/text-editor 14.0.0-alpha.0 → 14.0.0-alpha.2
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Input, Component, NgModule,
|
|
2
|
+
import { inject, DOCUMENT, Injectable, Input, Component, NgModule, booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, NgZone, TemplateRef, HostBinding, ViewChild, ViewEncapsulation } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/platform-browser';
|
|
4
4
|
import createDOMPurify from 'dompurify';
|
|
5
5
|
import * as i1$3 from '@skyux/forms';
|
|
@@ -33,15 +33,6 @@ import * as i5$1 from '@skyux/tabs';
|
|
|
33
33
|
import { SkyTabsModule } from '@skyux/tabs';
|
|
34
34
|
import { SkyValidation } from '@skyux/validation';
|
|
35
35
|
|
|
36
|
-
const domPurify = createDOMPurify(window);
|
|
37
|
-
domPurify.addHook('afterSanitizeAttributes', (node) => {
|
|
38
|
-
// Set all elements owning target to target=_blank
|
|
39
|
-
// so we only allow the target attribute with that value.
|
|
40
|
-
if (node.getAttribute('target')) {
|
|
41
|
-
node.setAttribute('target', '_blank');
|
|
42
|
-
node.setAttribute('rel', 'noopener noreferrer');
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
36
|
/**
|
|
46
37
|
* The `SkyTextSanitizationService` user the `DOMPurify` library to sanitize strings for use
|
|
47
38
|
* in the DOM. `DOMPurify` allows more customization than Angular's internal `DomSanitizer` so we
|
|
@@ -50,23 +41,34 @@ domPurify.addHook('afterSanitizeAttributes', (node) => {
|
|
|
50
41
|
*/
|
|
51
42
|
class SkyTextSanitizationService {
|
|
52
43
|
#allowedAttributes = ['target'];
|
|
44
|
+
#domPurify = createDOMPurify(inject(DOCUMENT).defaultView);
|
|
45
|
+
constructor() {
|
|
46
|
+
this.#domPurify.addHook('afterSanitizeAttributes', (node) => {
|
|
47
|
+
// Set all elements owning target to target=_blank
|
|
48
|
+
// so we only allow the target attribute with that value.
|
|
49
|
+
if (node.getAttribute('target')) {
|
|
50
|
+
node.setAttribute('target', '_blank');
|
|
51
|
+
node.setAttribute('rel', 'noopener noreferrer');
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
}
|
|
53
55
|
/**
|
|
54
56
|
* Returns a sanitized string, allowing target attribute for new tab links.
|
|
55
57
|
*/
|
|
56
58
|
sanitize(htmlString) {
|
|
57
|
-
return domPurify.sanitize(htmlString, {
|
|
59
|
+
return this.#domPurify.sanitize(htmlString, {
|
|
58
60
|
ADD_ATTR: this.#allowedAttributes,
|
|
59
61
|
});
|
|
60
62
|
}
|
|
61
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
62
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
63
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextSanitizationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
64
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextSanitizationService, providedIn: 'root' }); }
|
|
63
65
|
}
|
|
64
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
66
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextSanitizationService, decorators: [{
|
|
65
67
|
type: Injectable,
|
|
66
68
|
args: [{
|
|
67
69
|
providedIn: 'root',
|
|
68
70
|
}]
|
|
69
|
-
}] });
|
|
71
|
+
}], ctorParameters: () => [] });
|
|
70
72
|
|
|
71
73
|
class SkyRichTextDisplayComponent {
|
|
72
74
|
/**
|
|
@@ -97,10 +99,10 @@ class SkyRichTextDisplayComponent {
|
|
|
97
99
|
this.#sanitizer = sanitizer;
|
|
98
100
|
this.#sanitizationService = sanitizationService;
|
|
99
101
|
}
|
|
100
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
101
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
102
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyRichTextDisplayComponent, deps: [{ token: i1.DomSanitizer }, { token: SkyTextSanitizationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
103
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: SkyRichTextDisplayComponent, isStandalone: false, selector: "sky-rich-text-display", inputs: { richText: "richText" }, ngImport: i0, template: "<span class=\"sky-rich-text-display-text\" [innerHTML]=\"sanitizedText\"></span>\n" }); }
|
|
102
104
|
}
|
|
103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
105
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyRichTextDisplayComponent, decorators: [{
|
|
104
106
|
type: Component,
|
|
105
107
|
args: [{ selector: 'sky-rich-text-display', standalone: false, template: "<span class=\"sky-rich-text-display-text\" [innerHTML]=\"sanitizedText\"></span>\n" }]
|
|
106
108
|
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: SkyTextSanitizationService }], propDecorators: { richText: [{
|
|
@@ -108,11 +110,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
108
110
|
}] } });
|
|
109
111
|
|
|
110
112
|
class SkyRichTextDisplayModule {
|
|
111
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
112
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.
|
|
113
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.
|
|
113
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyRichTextDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
114
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.2", ngImport: i0, type: SkyRichTextDisplayModule, declarations: [SkyRichTextDisplayComponent], exports: [SkyRichTextDisplayComponent] }); }
|
|
115
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyRichTextDisplayModule }); }
|
|
114
116
|
}
|
|
115
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
117
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyRichTextDisplayModule, decorators: [{
|
|
116
118
|
type: NgModule,
|
|
117
119
|
args: [{
|
|
118
120
|
exports: [SkyRichTextDisplayComponent],
|
|
@@ -278,11 +280,11 @@ SkyLibResourcesService.addResources(RESOURCES);
|
|
|
278
280
|
* Import into any component library module that needs to use resource strings.
|
|
279
281
|
*/
|
|
280
282
|
class SkyTextEditorResourcesModule {
|
|
281
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
282
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.
|
|
283
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.
|
|
283
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
284
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorResourcesModule, exports: [SkyI18nModule] }); }
|
|
285
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorResourcesModule, imports: [SkyI18nModule] }); }
|
|
284
286
|
}
|
|
285
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
287
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorResourcesModule, decorators: [{
|
|
286
288
|
type: NgModule,
|
|
287
289
|
args: [{
|
|
288
290
|
exports: [SkyI18nModule],
|
|
@@ -445,10 +447,10 @@ class SkyTextEditorSelectionService {
|
|
|
445
447
|
}
|
|
446
448
|
}
|
|
447
449
|
}
|
|
448
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
449
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
450
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
451
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorSelectionService }); }
|
|
450
452
|
}
|
|
451
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
453
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorSelectionService, decorators: [{
|
|
452
454
|
type: Injectable
|
|
453
455
|
}] });
|
|
454
456
|
|
|
@@ -508,10 +510,10 @@ class SkyTextEditorService {
|
|
|
508
510
|
selectionChangeListener() {
|
|
509
511
|
return this.editor.selectionChangeObservable;
|
|
510
512
|
}
|
|
511
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
512
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
513
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
514
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorService }); }
|
|
513
515
|
}
|
|
514
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
516
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorService, decorators: [{
|
|
515
517
|
type: Injectable
|
|
516
518
|
}] });
|
|
517
519
|
|
|
@@ -1007,10 +1009,10 @@ class SkyTextEditorAdapterService {
|
|
|
1007
1009
|
}
|
|
1008
1010
|
this.#getIframeDocumentEl()?.body.setAttribute('contenteditable', disabled ? 'false' : 'true');
|
|
1009
1011
|
}
|
|
1010
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1011
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
1012
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorAdapterService, deps: [{ token: SkyTextEditorSelectionService }, { token: SkyTextEditorService }, { token: i3.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1013
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorAdapterService }); }
|
|
1012
1014
|
}
|
|
1013
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1015
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorAdapterService, decorators: [{
|
|
1014
1016
|
type: Injectable
|
|
1015
1017
|
}], ctorParameters: () => [{ type: SkyTextEditorSelectionService }, { type: SkyTextEditorService }, { type: i3.SkyAppWindowRef }] });
|
|
1016
1018
|
|
|
@@ -1169,10 +1171,10 @@ class SkyTextEditorMenubarComponent {
|
|
|
1169
1171
|
}
|
|
1170
1172
|
this.execCommand('removeFormat');
|
|
1171
1173
|
}
|
|
1172
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1173
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1174
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorMenubarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1175
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", 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.name) {\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: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i3$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i6.λ39, selector: "sky-toolbar-item" }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1174
1176
|
}
|
|
1175
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1177
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorMenubarComponent, decorators: [{
|
|
1176
1178
|
type: Component,
|
|
1177
1179
|
args: [{ selector: 'sky-text-editor-menubar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1178
1180
|
CommonModule,
|
|
@@ -1313,10 +1315,10 @@ class SkyTextEditorUrlModalComponent {
|
|
|
1313
1315
|
}
|
|
1314
1316
|
return !!this.emailAddress && SkyValidation.isEmail(this.emailAddress);
|
|
1315
1317
|
}
|
|
1316
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1317
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1318
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorUrlModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1319
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", 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", "layout"] }, { 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.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndexValue", "layout"], outputs: ["close"] }, { kind: "component", type: i5$1.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "ngmodule", type: SkyTextEditorResourcesModule }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
1318
1320
|
}
|
|
1319
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1321
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorUrlModalComponent, decorators: [{
|
|
1320
1322
|
type: Component,
|
|
1321
1323
|
args: [{ selector: 'sky-text-editor-url-modal', imports: [
|
|
1322
1324
|
FormsModule,
|
|
@@ -1494,10 +1496,10 @@ class SkyTextEditorToolbarComponent {
|
|
|
1494
1496
|
/* istanbul ignore next */
|
|
1495
1497
|
return undefined;
|
|
1496
1498
|
}
|
|
1497
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1498
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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.name) {\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 iconName=\"text-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 iconName=\"text-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 iconName=\"text-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=\"color-line\"\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 [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 iconName=\"text-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 iconName=\"text-number-list-ltr\" />\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 iconName=\"text-align-left\" />\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 iconName=\"text-align-center\" />\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 iconName=\"text-align-right\" />\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 iconName=\"text-indent-decrease\" />\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 iconName=\"text-indent-increase\" />\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 iconName=\"arrow-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 iconName=\"arrow-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 iconName=\"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 iconName=\"link-dismiss\" />\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", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyColorpickerModule }, { kind: "component", type: i4.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i4.λ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: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i6.λ39, selector: "sky-toolbar-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1499
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1500
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", 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.name) {\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 iconName=\"text-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 iconName=\"text-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 iconName=\"text-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=\"color-line\"\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 [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 iconName=\"text-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 iconName=\"text-number-list-ltr\" />\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 iconName=\"text-align-left\" />\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 iconName=\"text-align-center\" />\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 iconName=\"text-align-right\" />\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 iconName=\"text-indent-decrease\" />\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 iconName=\"text-indent-increase\" />\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 iconName=\"arrow-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 iconName=\"arrow-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 iconName=\"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 iconName=\"link-dismiss\" />\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", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyColorpickerModule }, { kind: "component", type: i4.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i4.λ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: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i6.λ39, selector: "sky-toolbar-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1499
1501
|
}
|
|
1500
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1502
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorToolbarComponent, decorators: [{
|
|
1501
1503
|
type: Component,
|
|
1502
1504
|
args: [{ selector: 'sky-text-editor-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1503
1505
|
CommonModule,
|
|
@@ -1929,15 +1931,15 @@ class SkyTextEditorComponent {
|
|
|
1929
1931
|
#_onTouched;
|
|
1930
1932
|
/* istanbul ignore next */
|
|
1931
1933
|
#_onChange;
|
|
1932
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1933
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1934
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1935
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", 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: [
|
|
1934
1936
|
SkyTextEditorService,
|
|
1935
1937
|
SkyTextEditorSelectionService,
|
|
1936
1938
|
SkyTextEditorAdapterService,
|
|
1937
1939
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
1938
1940
|
], 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-color-focused: var(--sky-text-color-default);--sky-override-text-editor-label-color-invalid: 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-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-color-border-input-base));background-color:var(--sky-color-background-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-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);display:var(--sky-override-text-editor-label-display, inline-block);padding:var(--sky-override-text-editor-label-padding, var(--sky-comp-input-label-space-inset-top) var(--sky-comp-input-value-space-inset-right) 0 var(--sky-comp-input-value-space-inset-left));width:100%;color:var(--sky-override-text-editor-label-color, var(--sky-color-text-default))}.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-style-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);width:100%;height:300px;padding:var(--sky-override-text-editor-wrapper-padding, var(--sky-comp-text_editor-space-inset-top) var(--sky-comp-text_editor-space-inset-right) var(--sky-comp-text_editor-space-inset-bottom) var(--sky-comp-text_editor-space-inset-left));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-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-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-invalid, 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));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-focused, 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)!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:var(--sky-override-text-editor-toolbar-section-padding, var(--sky-comp-toolbar-space-inset-top) var(--sky-comp-input-value-space-inset-right) var(--sky-comp-toolbar-space-inset-bottom) var(--sky-comp-input-value-space-inset-left))!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-comp-toolbar-space-inset-bottom))!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-m) 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: i3$1.λ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: i5.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1939
1941
|
}
|
|
1940
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1942
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorComponent, decorators: [{
|
|
1941
1943
|
type: Component,
|
|
1942
1944
|
args: [{ selector: 'sky-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
1943
1945
|
SkyTextEditorService,
|
|
@@ -2014,11 +2016,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
2014
2016
|
}] } });
|
|
2015
2017
|
|
|
2016
2018
|
class SkyTextEditorModule {
|
|
2017
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2018
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.
|
|
2019
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.
|
|
2019
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2020
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorModule, imports: [SkyTextEditorComponent], exports: [SkyTextEditorComponent, SkyFormErrorModule] }); }
|
|
2021
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorModule, imports: [SkyTextEditorComponent, SkyFormErrorModule] }); }
|
|
2020
2022
|
}
|
|
2021
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2023
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SkyTextEditorModule, decorators: [{
|
|
2022
2024
|
type: NgModule,
|
|
2023
2025
|
args: [{
|
|
2024
2026
|
imports: [SkyTextEditorComponent],
|