@skyux/text-editor 8.0.0-alpha.5 → 8.0.0-alpha.7
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 +58 -58
- package/esm2020/lib/modules/rich-text-display/rich-text-display.component.mjs +12 -12
- package/esm2020/lib/modules/rich-text-display/rich-text-display.module.mjs +4 -4
- package/esm2020/lib/modules/shared/sky-text-editor-resources.module.mjs +4 -4
- package/esm2020/lib/modules/text-editor/menubar/text-editor-menubar.component.mjs +14 -14
- package/esm2020/lib/modules/text-editor/services/text-editor-adapter.service.mjs +3 -3
- package/esm2020/lib/modules/text-editor/services/text-editor-selection.service.mjs +3 -3
- package/esm2020/lib/modules/text-editor/services/text-editor.service.mjs +3 -3
- package/esm2020/lib/modules/text-editor/services/text-sanitization.service.mjs +3 -3
- package/esm2020/lib/modules/text-editor/text-editor.component.mjs +50 -50
- package/esm2020/lib/modules/text-editor/text-editor.module.mjs +4 -4
- package/esm2020/lib/modules/text-editor/toolbar/text-editor-toolbar.component.mjs +25 -25
- package/esm2020/lib/modules/text-editor/url-modal/text-editor-url-modal.component.mjs +25 -25
- package/fesm2015/skyux-text-editor.mjs +145 -145
- package/fesm2015/skyux-text-editor.mjs.map +1 -1
- package/fesm2020/skyux-text-editor.mjs +145 -145
- package/fesm2020/skyux-text-editor.mjs.map +1 -1
- package/lib/modules/text-editor/types/menu-type.d.ts +1 -1
- package/lib/modules/text-editor/types/toolbar-action-type.d.ts +1 -1
- package/package.json +17 -17
|
@@ -62,9 +62,9 @@ class SkyTextSanitizationService {
|
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
_SkyTextSanitizationService_allowedAttributes = new WeakMap();
|
|
65
|
-
SkyTextSanitizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
66
|
-
SkyTextSanitizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
|
67
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
65
|
+
SkyTextSanitizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextSanitizationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
66
|
+
SkyTextSanitizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextSanitizationService, providedIn: 'root' });
|
|
67
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextSanitizationService, decorators: [{
|
|
68
68
|
type: Injectable,
|
|
69
69
|
args: [{
|
|
70
70
|
providedIn: 'root',
|
|
@@ -73,14 +73,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
73
73
|
|
|
74
74
|
var _SkyRichTextDisplayComponent__richText, _SkyRichTextDisplayComponent_sanitizer, _SkyRichTextDisplayComponent_sanitizationService;
|
|
75
75
|
class SkyRichTextDisplayComponent {
|
|
76
|
-
constructor(sanitizer, sanitizationService) {
|
|
77
|
-
this.sanitizedText = '';
|
|
78
|
-
_SkyRichTextDisplayComponent__richText.set(this, '');
|
|
79
|
-
_SkyRichTextDisplayComponent_sanitizer.set(this, void 0);
|
|
80
|
-
_SkyRichTextDisplayComponent_sanitizationService.set(this, void 0);
|
|
81
|
-
__classPrivateFieldSet(this, _SkyRichTextDisplayComponent_sanitizer, sanitizer, "f");
|
|
82
|
-
__classPrivateFieldSet(this, _SkyRichTextDisplayComponent_sanitizationService, sanitizationService, "f");
|
|
83
|
-
}
|
|
84
76
|
/**
|
|
85
77
|
* The rich text to display.
|
|
86
78
|
*/
|
|
@@ -99,11 +91,19 @@ class SkyRichTextDisplayComponent {
|
|
|
99
91
|
this.sanitizedText = '';
|
|
100
92
|
}
|
|
101
93
|
}
|
|
94
|
+
constructor(sanitizer, sanitizationService) {
|
|
95
|
+
this.sanitizedText = '';
|
|
96
|
+
_SkyRichTextDisplayComponent__richText.set(this, '');
|
|
97
|
+
_SkyRichTextDisplayComponent_sanitizer.set(this, void 0);
|
|
98
|
+
_SkyRichTextDisplayComponent_sanitizationService.set(this, void 0);
|
|
99
|
+
__classPrivateFieldSet(this, _SkyRichTextDisplayComponent_sanitizer, sanitizer, "f");
|
|
100
|
+
__classPrivateFieldSet(this, _SkyRichTextDisplayComponent_sanitizationService, sanitizationService, "f");
|
|
101
|
+
}
|
|
102
102
|
}
|
|
103
103
|
_SkyRichTextDisplayComponent__richText = new WeakMap(), _SkyRichTextDisplayComponent_sanitizer = new WeakMap(), _SkyRichTextDisplayComponent_sanitizationService = new WeakMap();
|
|
104
|
-
SkyRichTextDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
105
|
-
SkyRichTextDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
106
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
104
|
+
SkyRichTextDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRichTextDisplayComponent, deps: [{ token: i1.DomSanitizer }, { token: SkyTextSanitizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
105
|
+
SkyRichTextDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyRichTextDisplayComponent, selector: "sky-rich-text-display", inputs: { richText: "richText" }, ngImport: i0, template: "<span class=\"sky-rich-text-display-text\" [innerHTML]=\"sanitizedText\"></span>\n" });
|
|
106
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRichTextDisplayComponent, decorators: [{
|
|
107
107
|
type: Component,
|
|
108
108
|
args: [{ selector: 'sky-rich-text-display', template: "<span class=\"sky-rich-text-display-text\" [innerHTML]=\"sanitizedText\"></span>\n" }]
|
|
109
109
|
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: SkyTextSanitizationService }]; }, propDecorators: { richText: [{
|
|
@@ -112,10 +112,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
112
112
|
|
|
113
113
|
class SkyRichTextDisplayModule {
|
|
114
114
|
}
|
|
115
|
-
SkyRichTextDisplayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
116
|
-
SkyRichTextDisplayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
|
117
|
-
SkyRichTextDisplayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
|
118
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
115
|
+
SkyRichTextDisplayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRichTextDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
116
|
+
SkyRichTextDisplayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyRichTextDisplayModule, declarations: [SkyRichTextDisplayComponent], imports: [CommonModule], exports: [SkyRichTextDisplayComponent] });
|
|
117
|
+
SkyRichTextDisplayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRichTextDisplayModule, imports: [CommonModule] });
|
|
118
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyRichTextDisplayModule, decorators: [{
|
|
119
119
|
type: NgModule,
|
|
120
120
|
args: [{
|
|
121
121
|
imports: [CommonModule],
|
|
@@ -204,16 +204,16 @@ class SkyTextEditorResourcesProvider {
|
|
|
204
204
|
*/
|
|
205
205
|
class SkyTextEditorResourcesModule {
|
|
206
206
|
}
|
|
207
|
-
SkyTextEditorResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
208
|
-
SkyTextEditorResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
|
209
|
-
SkyTextEditorResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
|
207
|
+
SkyTextEditorResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
208
|
+
SkyTextEditorResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorResourcesModule, exports: [SkyI18nModule] });
|
|
209
|
+
SkyTextEditorResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorResourcesModule, providers: [
|
|
210
210
|
{
|
|
211
211
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
212
212
|
useClass: SkyTextEditorResourcesProvider,
|
|
213
213
|
multi: true,
|
|
214
214
|
},
|
|
215
215
|
], imports: [SkyI18nModule] });
|
|
216
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
216
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorResourcesModule, decorators: [{
|
|
217
217
|
type: NgModule,
|
|
218
218
|
args: [{
|
|
219
219
|
exports: [SkyI18nModule],
|
|
@@ -368,9 +368,9 @@ class SkyTextEditorSelectionService {
|
|
|
368
368
|
}
|
|
369
369
|
}
|
|
370
370
|
}
|
|
371
|
-
SkyTextEditorSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
372
|
-
SkyTextEditorSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
|
373
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
371
|
+
SkyTextEditorSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
372
|
+
SkyTextEditorSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorSelectionService });
|
|
373
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorSelectionService, decorators: [{
|
|
374
374
|
type: Injectable
|
|
375
375
|
}] });
|
|
376
376
|
|
|
@@ -426,9 +426,9 @@ class SkyTextEditorService {
|
|
|
426
426
|
}
|
|
427
427
|
}
|
|
428
428
|
_SkyTextEditorService__editor = new WeakMap();
|
|
429
|
-
SkyTextEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
430
|
-
SkyTextEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
|
431
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
429
|
+
SkyTextEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
430
|
+
SkyTextEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorService });
|
|
431
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorService, decorators: [{
|
|
432
432
|
type: Injectable
|
|
433
433
|
}] });
|
|
434
434
|
|
|
@@ -838,9 +838,9 @@ _SkyTextEditorAdapterService_selectionService = new WeakMap(), _SkyTextEditorAda
|
|
|
838
838
|
}
|
|
839
839
|
__classPrivateFieldGet(this, _SkyTextEditorAdapterService_instances, "m", _SkyTextEditorAdapterService_getIframeDocumentEl).call(this).body.setAttribute('contenteditable', disabled ? 'false' : 'true');
|
|
840
840
|
};
|
|
841
|
-
SkyTextEditorAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
842
|
-
SkyTextEditorAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
|
843
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
841
|
+
SkyTextEditorAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorAdapterService, deps: [{ token: SkyTextEditorSelectionService }, { token: SkyTextEditorService }, { token: i1$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
842
|
+
SkyTextEditorAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorAdapterService });
|
|
843
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorAdapterService, decorators: [{
|
|
844
844
|
type: Injectable
|
|
845
845
|
}], ctorParameters: function () { return [{ type: SkyTextEditorSelectionService }, { type: SkyTextEditorService }, { type: i1$1.SkyAppWindowRef }]; } });
|
|
846
846
|
|
|
@@ -851,6 +851,16 @@ const EDIT_MENU_ACTION = 'skyux_text_editor_edit_menu_action_';
|
|
|
851
851
|
* @internal
|
|
852
852
|
*/
|
|
853
853
|
class SkyTextEditorMenubarComponent {
|
|
854
|
+
set disabled(value) {
|
|
855
|
+
const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
|
|
856
|
+
if (coercedValue !== this.disabled) {
|
|
857
|
+
__classPrivateFieldSet(this, _SkyTextEditorMenubarComponent__disabled, coercedValue, "f");
|
|
858
|
+
__classPrivateFieldGet(this, _SkyTextEditorMenubarComponent_changeDetector, "f").markForCheck();
|
|
859
|
+
}
|
|
860
|
+
}
|
|
861
|
+
get disabled() {
|
|
862
|
+
return __classPrivateFieldGet(this, _SkyTextEditorMenubarComponent__disabled, "f");
|
|
863
|
+
}
|
|
854
864
|
constructor(adapterService, changeDetector, resources) {
|
|
855
865
|
_SkyTextEditorMenubarComponent_instances.add(this);
|
|
856
866
|
this.editorFocusStream = new Subject();
|
|
@@ -868,16 +878,6 @@ class SkyTextEditorMenubarComponent {
|
|
|
868
878
|
__classPrivateFieldSet(this, _SkyTextEditorMenubarComponent_changeDetector, changeDetector, "f");
|
|
869
879
|
__classPrivateFieldSet(this, _SkyTextEditorMenubarComponent_resources, resources, "f");
|
|
870
880
|
}
|
|
871
|
-
set disabled(value) {
|
|
872
|
-
const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
|
|
873
|
-
if (coercedValue !== this.disabled) {
|
|
874
|
-
__classPrivateFieldSet(this, _SkyTextEditorMenubarComponent__disabled, coercedValue, "f");
|
|
875
|
-
__classPrivateFieldGet(this, _SkyTextEditorMenubarComponent_changeDetector, "f").markForCheck();
|
|
876
|
-
}
|
|
877
|
-
}
|
|
878
|
-
get disabled() {
|
|
879
|
-
return __classPrivateFieldGet(this, _SkyTextEditorMenubarComponent__disabled, "f");
|
|
880
|
-
}
|
|
881
881
|
ngOnInit() {
|
|
882
882
|
this.editorFocusStream
|
|
883
883
|
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTextEditorMenubarComponent_ngUnsubscribe, "f")))
|
|
@@ -1012,9 +1012,9 @@ _SkyTextEditorMenubarComponent__disabled = new WeakMap(), _SkyTextEditorMenubarC
|
|
|
1012
1012
|
}
|
|
1013
1013
|
this.execCommand('removeFormat');
|
|
1014
1014
|
};
|
|
1015
|
-
SkyTextEditorMenubarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1016
|
-
SkyTextEditorMenubarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
1017
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
1015
|
+
SkyTextEditorMenubarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorMenubarComponent, deps: [{ token: SkyTextEditorAdapterService }, { token: i0.ChangeDetectorRef }, { token: i2.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1016
|
+
SkyTextEditorMenubarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: { editorFocusStream: "editorFocusStream", menus: "menus", mergeFields: "mergeFields", disabled: "disabled" }, ngImport: i0, template: "<sky-toolbar-item\n *ngFor=\"let menu of menus\"\n class=\"sky-text-editor-menu\"\n [ngClass]=\"'sky-text-editor-menu-' + menu\"\n>\n <ng-container [ngSwitch]=\"menu\">\n <ng-container *ngSwitchCase=\"'edit'\">\n <sky-dropdown\n label=\"Edit menu\"\n [disabled]=\"disabled\"\n [messageStream]=\"editDropdownStream\"\n >\n <sky-dropdown-button>\n {{\n 'skyux_text_editor_menubar_dropdown_button_edit_label'\n | skyLibResources\n }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let editItem of editItems\">\n <button\n *ngIf=\"!editItem.isDivider\"\n type=\"button\"\n (click)=\"editItem?.function()\"\n >\n {{ editItem.label }}\n <div\n *ngIf=\"editItem.keyShortcut\"\n class=\"sky-text-editor-menu-key-shortcut\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'modern',\n 'sky-deemphasized': 'default'\n }\"\n >\n {{ editItem.keyShortcut }}\n </div>\n </button>\n <div\n *ngIf=\"editItem.isDivider\"\n class=\"sky-text-editor-dropdown-item-divider\"\n role=\"divider\"\n ></div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'format'\">\n <sky-dropdown\n label=\"Format menu\"\n [disabled]=\"disabled\"\n [messageStream]=\"formatDropdownStream\"\n >\n <sky-dropdown-button>\n {{\n 'skyux_text_editor_menubar_dropdown_button_format_label'\n | skyLibResources\n }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let formatItem of formatItems\">\n <button\n *ngIf=\"!formatItem.isDivider\"\n type=\"button\"\n (click)=\"formatItem?.function()\"\n >\n {{ formatItem.label }}\n <div\n *ngIf=\"formatItem.keyShortcut\"\n class=\"sky-text-editor-menu-key-shortcut\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'modern',\n 'sky-deemphasized': 'default'\n }\"\n >\n {{ formatItem.keyShortcut }}\n </div>\n </button>\n <div\n *ngIf=\"formatItem.isDivider\"\n class=\"sky-text-editor-dropdown-item-divider\"\n role=\"divider\"\n ></div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'merge-field'\">\n <sky-dropdown\n *ngIf=\"mergeFields && mergeFields.length > 0\"\n label=\"Insert merge field\"\n [disabled]=\"disabled\"\n [messageStream]=\"mergeFieldDropdownStream\"\n >\n <sky-dropdown-button>\n {{\n 'skyux_text_editor_menubar_dropdown_button_insert_label'\n | skyLibResources\n }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let mergeField of mergeFields\">\n <button type=\"button\" (click)=\"insertMergeField(mergeField)\">\n {{ mergeField.name }}\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n </ng-container>\n</sky-toolbar-item>\n", styles: [".sky-text-editor-dropdown-item-divider{border:0;padding:0;height:1px;margin:9px 1px;overflow:hidden;background:transparent;border-bottom:1px solid rgba(0,0,0,.1);cursor:default;filter:none}.sky-text-editor-menu-key-shortcut{float:right;margin-left:15px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i4.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i4.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i4.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: i7.λ39, selector: "sky-toolbar-item" }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1017
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorMenubarComponent, decorators: [{
|
|
1018
1018
|
type: Component,
|
|
1019
1019
|
args: [{ selector: 'sky-text-editor-menubar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-toolbar-item\n *ngFor=\"let menu of menus\"\n class=\"sky-text-editor-menu\"\n [ngClass]=\"'sky-text-editor-menu-' + menu\"\n>\n <ng-container [ngSwitch]=\"menu\">\n <ng-container *ngSwitchCase=\"'edit'\">\n <sky-dropdown\n label=\"Edit menu\"\n [disabled]=\"disabled\"\n [messageStream]=\"editDropdownStream\"\n >\n <sky-dropdown-button>\n {{\n 'skyux_text_editor_menubar_dropdown_button_edit_label'\n | skyLibResources\n }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let editItem of editItems\">\n <button\n *ngIf=\"!editItem.isDivider\"\n type=\"button\"\n (click)=\"editItem?.function()\"\n >\n {{ editItem.label }}\n <div\n *ngIf=\"editItem.keyShortcut\"\n class=\"sky-text-editor-menu-key-shortcut\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'modern',\n 'sky-deemphasized': 'default'\n }\"\n >\n {{ editItem.keyShortcut }}\n </div>\n </button>\n <div\n *ngIf=\"editItem.isDivider\"\n class=\"sky-text-editor-dropdown-item-divider\"\n role=\"divider\"\n ></div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'format'\">\n <sky-dropdown\n label=\"Format menu\"\n [disabled]=\"disabled\"\n [messageStream]=\"formatDropdownStream\"\n >\n <sky-dropdown-button>\n {{\n 'skyux_text_editor_menubar_dropdown_button_format_label'\n | skyLibResources\n }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let formatItem of formatItems\">\n <button\n *ngIf=\"!formatItem.isDivider\"\n type=\"button\"\n (click)=\"formatItem?.function()\"\n >\n {{ formatItem.label }}\n <div\n *ngIf=\"formatItem.keyShortcut\"\n class=\"sky-text-editor-menu-key-shortcut\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'modern',\n 'sky-deemphasized': 'default'\n }\"\n >\n {{ formatItem.keyShortcut }}\n </div>\n </button>\n <div\n *ngIf=\"formatItem.isDivider\"\n class=\"sky-text-editor-dropdown-item-divider\"\n role=\"divider\"\n ></div>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'merge-field'\">\n <sky-dropdown\n *ngIf=\"mergeFields && mergeFields.length > 0\"\n label=\"Insert merge field\"\n [disabled]=\"disabled\"\n [messageStream]=\"mergeFieldDropdownStream\"\n >\n <sky-dropdown-button>\n {{\n 'skyux_text_editor_menubar_dropdown_button_insert_label'\n | skyLibResources\n }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let mergeField of mergeFields\">\n <button type=\"button\" (click)=\"insertMergeField(mergeField)\">\n {{ mergeField.name }}\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n </ng-container>\n</sky-toolbar-item>\n", styles: [".sky-text-editor-dropdown-item-divider{border:0;padding:0;height:1px;margin:9px 1px;overflow:hidden;background:transparent;border-bottom:1px solid rgba(0,0,0,.1);cursor:default;filter:none}.sky-text-editor-menu-key-shortcut{float:right;margin-left:15px}\n"] }]
|
|
1020
1020
|
}], ctorParameters: function () { return [{ type: SkyTextEditorAdapterService }, { type: i0.ChangeDetectorRef }, { type: i2.SkyLibResourcesService }]; }, propDecorators: { editorFocusStream: [{
|
|
@@ -1064,6 +1064,27 @@ const queryStringParamKey = '?Subject=';
|
|
|
1064
1064
|
* @internal
|
|
1065
1065
|
*/
|
|
1066
1066
|
class SkyTextEditorUrlModalComponent {
|
|
1067
|
+
set activeTab(value) {
|
|
1068
|
+
__classPrivateFieldSet(this, _SkyTextEditorUrlModalComponent__activeTab, value, "f");
|
|
1069
|
+
this.valid = __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_instances, "m", _SkyTextEditorUrlModalComponent_isValid).call(this);
|
|
1070
|
+
}
|
|
1071
|
+
get activeTab() {
|
|
1072
|
+
return __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent__activeTab, "f");
|
|
1073
|
+
}
|
|
1074
|
+
set emailAddress(value) {
|
|
1075
|
+
__classPrivateFieldSet(this, _SkyTextEditorUrlModalComponent__emailAddress, value, "f");
|
|
1076
|
+
this.valid = __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_instances, "m", _SkyTextEditorUrlModalComponent_isValid).call(this);
|
|
1077
|
+
}
|
|
1078
|
+
get emailAddress() {
|
|
1079
|
+
return __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent__emailAddress, "f");
|
|
1080
|
+
}
|
|
1081
|
+
set url(value) {
|
|
1082
|
+
__classPrivateFieldSet(this, _SkyTextEditorUrlModalComponent__url, value, "f");
|
|
1083
|
+
this.valid = __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_instances, "m", _SkyTextEditorUrlModalComponent_isValid).call(this);
|
|
1084
|
+
}
|
|
1085
|
+
get url() {
|
|
1086
|
+
return __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent__url, "f");
|
|
1087
|
+
}
|
|
1067
1088
|
constructor(modalInstance, modalContext) {
|
|
1068
1089
|
_SkyTextEditorUrlModalComponent_instances.add(this);
|
|
1069
1090
|
this.emailAddressValid = false;
|
|
@@ -1099,27 +1120,6 @@ class SkyTextEditorUrlModalComponent {
|
|
|
1099
1120
|
}
|
|
1100
1121
|
}
|
|
1101
1122
|
}
|
|
1102
|
-
set activeTab(value) {
|
|
1103
|
-
__classPrivateFieldSet(this, _SkyTextEditorUrlModalComponent__activeTab, value, "f");
|
|
1104
|
-
this.valid = __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_instances, "m", _SkyTextEditorUrlModalComponent_isValid).call(this);
|
|
1105
|
-
}
|
|
1106
|
-
get activeTab() {
|
|
1107
|
-
return __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent__activeTab, "f");
|
|
1108
|
-
}
|
|
1109
|
-
set emailAddress(value) {
|
|
1110
|
-
__classPrivateFieldSet(this, _SkyTextEditorUrlModalComponent__emailAddress, value, "f");
|
|
1111
|
-
this.valid = __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_instances, "m", _SkyTextEditorUrlModalComponent_isValid).call(this);
|
|
1112
|
-
}
|
|
1113
|
-
get emailAddress() {
|
|
1114
|
-
return __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent__emailAddress, "f");
|
|
1115
|
-
}
|
|
1116
|
-
set url(value) {
|
|
1117
|
-
__classPrivateFieldSet(this, _SkyTextEditorUrlModalComponent__url, value, "f");
|
|
1118
|
-
this.valid = __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent_instances, "m", _SkyTextEditorUrlModalComponent_isValid).call(this);
|
|
1119
|
-
}
|
|
1120
|
-
get url() {
|
|
1121
|
-
return __classPrivateFieldGet(this, _SkyTextEditorUrlModalComponent__url, "f");
|
|
1122
|
-
}
|
|
1123
1123
|
activeTabChanged(value) {
|
|
1124
1124
|
this.activeTab = Number(value);
|
|
1125
1125
|
}
|
|
@@ -1156,9 +1156,9 @@ _SkyTextEditorUrlModalComponent_modalInstance = new WeakMap(), _SkyTextEditorUrl
|
|
|
1156
1156
|
}
|
|
1157
1157
|
return !!this.emailAddress && SkyValidation.isEmail(this.emailAddress);
|
|
1158
1158
|
};
|
|
1159
|
-
SkyTextEditorUrlModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1160
|
-
SkyTextEditorUrlModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
1161
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
1159
|
+
SkyTextEditorUrlModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorUrlModalComponent, deps: [{ token: i1$2.SkyModalInstance }, { token: SkyUrlModalContext }], target: i0.ɵɵFactoryTarget.Component });
|
|
1160
|
+
SkyTextEditorUrlModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyTextEditorUrlModalComponent, selector: "sky-text-editor-url-modal", ngImport: i0, template: "<sky-modal>\n <sky-modal-header>\n {{ 'skyux_text_editor_url_modal_header_label' | skyLibResources }}\n </sky-modal-header>\n <sky-modal-content>\n <sky-tabset\n data-sky-id=\"test-tabset\"\n [active]=\"activeTab\"\n (activeChange)=\"activeTabChanged($event)\"\n >\n <sky-tab tabHeading=\"Web page\">\n <div class=\"sky-form-group sky-text-editor-url-modal-first-field\">\n <sky-input-box>\n <label\n class=\"sky-control-label sky-control-label-required\"\n [for]=\"urlInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_url_label' | skyLibResources }}\n </label>\n <input\n class=\"sky-form-control\"\n type=\"text\"\n [(ngModel)]=\"url\"\n skyId\n #urlInput=\"skyId\"\n />\n </sky-input-box>\n </div>\n <sky-input-box class=\"sky-form-group\">\n <label class=\"sky-control-label\" [for]=\"targetInput.id\">\n {{ 'skyux_text_editor_url_modal_open_label' | skyLibResources }}\n </label>\n <select\n class=\"sky-form-control\"\n [(ngModel)]=\"target\"\n skyId\n #targetInput=\"skyId\"\n >\n <option value=\"0\">\n {{\n 'skyux_text_editor_url_modal_current_option_label'\n | skyLibResources\n }}\n </option>\n <option value=\"1\">\n {{\n 'skyux_text_editor_url_modal_new_option_label' | skyLibResources\n }}\n </option>\n </select>\n </sky-input-box>\n </sky-tab>\n <sky-tab tabHeading=\"Email address\">\n <div class=\"sky-form-group first-field\">\n <sky-input-box>\n <label\n class=\"sky-control-label sky-control-label-required\"\n [for]=\"emailAddressInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_email_label' | skyLibResources }}\n </label>\n <input\n class=\"sky-form-control\"\n type=\"text\"\n [(ngModel)]=\"emailAddress\"\n skyId\n #emailAddressInput=\"skyId\"\n />\n </sky-input-box>\n </div>\n <sky-input-box class=\"sky-form-group\">\n <label class=\"sky-control-label\" [for]=\"subjectInput.id\">\n {{ 'skyux_text_editor_url_modal_subject_label' | skyLibResources }}\n </label>\n <input\n class=\"sky-form-control\"\n type=\"text\"\n [(ngModel)]=\"subject\"\n skyId\n #subjectInput=\"skyId\"\n />\n </sky-input-box>\n </sky-tab>\n </sky-tabset>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n type=\"submit\"\n class=\"sky-btn sky-btn-primary\"\n [disabled]=\"!valid\"\n (click)=\"save()\"\n >\n {{ 'skyux_text_editor_url_modal_save_button_label' | skyLibResources }}\n </button>\n <button type=\"button\" class=\"sky-btn sky-btn-link\" (click)=\"cancel()\">\n {{ 'skyux_text_editor_url_modal_cancel_button_label' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-editor-url-modal-first-field{margin-top:15px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i5$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { kind: "component", type: i1$2.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i1$2.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$2.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$2.λ4, selector: "sky-modal-header" }, { kind: "component", type: i6.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndex"], outputs: ["close"] }, { kind: "component", type: i6.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] });
|
|
1161
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorUrlModalComponent, decorators: [{
|
|
1162
1162
|
type: Component,
|
|
1163
1163
|
args: [{ selector: 'sky-text-editor-url-modal', template: "<sky-modal>\n <sky-modal-header>\n {{ 'skyux_text_editor_url_modal_header_label' | skyLibResources }}\n </sky-modal-header>\n <sky-modal-content>\n <sky-tabset\n data-sky-id=\"test-tabset\"\n [active]=\"activeTab\"\n (activeChange)=\"activeTabChanged($event)\"\n >\n <sky-tab tabHeading=\"Web page\">\n <div class=\"sky-form-group sky-text-editor-url-modal-first-field\">\n <sky-input-box>\n <label\n class=\"sky-control-label sky-control-label-required\"\n [for]=\"urlInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_url_label' | skyLibResources }}\n </label>\n <input\n class=\"sky-form-control\"\n type=\"text\"\n [(ngModel)]=\"url\"\n skyId\n #urlInput=\"skyId\"\n />\n </sky-input-box>\n </div>\n <sky-input-box class=\"sky-form-group\">\n <label class=\"sky-control-label\" [for]=\"targetInput.id\">\n {{ 'skyux_text_editor_url_modal_open_label' | skyLibResources }}\n </label>\n <select\n class=\"sky-form-control\"\n [(ngModel)]=\"target\"\n skyId\n #targetInput=\"skyId\"\n >\n <option value=\"0\">\n {{\n 'skyux_text_editor_url_modal_current_option_label'\n | skyLibResources\n }}\n </option>\n <option value=\"1\">\n {{\n 'skyux_text_editor_url_modal_new_option_label' | skyLibResources\n }}\n </option>\n </select>\n </sky-input-box>\n </sky-tab>\n <sky-tab tabHeading=\"Email address\">\n <div class=\"sky-form-group first-field\">\n <sky-input-box>\n <label\n class=\"sky-control-label sky-control-label-required\"\n [for]=\"emailAddressInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_email_label' | skyLibResources }}\n </label>\n <input\n class=\"sky-form-control\"\n type=\"text\"\n [(ngModel)]=\"emailAddress\"\n skyId\n #emailAddressInput=\"skyId\"\n />\n </sky-input-box>\n </div>\n <sky-input-box class=\"sky-form-group\">\n <label class=\"sky-control-label\" [for]=\"subjectInput.id\">\n {{ 'skyux_text_editor_url_modal_subject_label' | skyLibResources }}\n </label>\n <input\n class=\"sky-form-control\"\n type=\"text\"\n [(ngModel)]=\"subject\"\n skyId\n #subjectInput=\"skyId\"\n />\n </sky-input-box>\n </sky-tab>\n </sky-tabset>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n type=\"submit\"\n class=\"sky-btn sky-btn-primary\"\n [disabled]=\"!valid\"\n (click)=\"save()\"\n >\n {{ 'skyux_text_editor_url_modal_save_button_label' | skyLibResources }}\n </button>\n <button type=\"button\" class=\"sky-btn sky-btn-link\" (click)=\"cancel()\">\n {{ 'skyux_text_editor_url_modal_cancel_button_label' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-editor-url-modal-first-field{margin-top:15px}\n"] }]
|
|
1164
1164
|
}], ctorParameters: function () { return [{ type: i1$2.SkyModalInstance }, { type: SkyUrlModalContext }]; } });
|
|
@@ -1168,27 +1168,6 @@ var _SkyTextEditorToolbarComponent_instances, _SkyTextEditorToolbarComponent_edi
|
|
|
1168
1168
|
* @internal
|
|
1169
1169
|
*/
|
|
1170
1170
|
class SkyTextEditorToolbarComponent {
|
|
1171
|
-
constructor(adapterService, changeDetector, modalService) {
|
|
1172
|
-
_SkyTextEditorToolbarComponent_instances.add(this);
|
|
1173
|
-
this.fontList = [];
|
|
1174
|
-
this.fontSizeList = [];
|
|
1175
|
-
this.toolbarActions = [];
|
|
1176
|
-
this.backColorpickerStream = new Subject();
|
|
1177
|
-
this.colorpickerStream = new Subject();
|
|
1178
|
-
this.fontPickerStream = new Subject();
|
|
1179
|
-
this.fontSizeStream = new Subject();
|
|
1180
|
-
_SkyTextEditorToolbarComponent_editorFocusStreamSub.set(this, void 0);
|
|
1181
|
-
_SkyTextEditorToolbarComponent_adapterService.set(this, void 0);
|
|
1182
|
-
_SkyTextEditorToolbarComponent_changeDetector.set(this, void 0);
|
|
1183
|
-
_SkyTextEditorToolbarComponent_modalService.set(this, void 0);
|
|
1184
|
-
_SkyTextEditorToolbarComponent_ngUnsubscribe.set(this, new Subject());
|
|
1185
|
-
_SkyTextEditorToolbarComponent__editorFocusStream.set(this, new Subject());
|
|
1186
|
-
_SkyTextEditorToolbarComponent__disabled.set(this, false);
|
|
1187
|
-
_SkyTextEditorToolbarComponent__styleState.set(this, STYLE_STATE_DEFAULTS);
|
|
1188
|
-
__classPrivateFieldSet(this, _SkyTextEditorToolbarComponent_adapterService, adapterService, "f");
|
|
1189
|
-
__classPrivateFieldSet(this, _SkyTextEditorToolbarComponent_changeDetector, changeDetector, "f");
|
|
1190
|
-
__classPrivateFieldSet(this, _SkyTextEditorToolbarComponent_modalService, modalService, "f");
|
|
1191
|
-
}
|
|
1192
1171
|
set editorFocusStream(value) {
|
|
1193
1172
|
__classPrivateFieldSet(this, _SkyTextEditorToolbarComponent__editorFocusStream, value, "f");
|
|
1194
1173
|
__classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_instances, "m", _SkyTextEditorToolbarComponent_subscribeEditorFocus).call(this);
|
|
@@ -1220,6 +1199,27 @@ class SkyTextEditorToolbarComponent {
|
|
|
1220
1199
|
get disabled() {
|
|
1221
1200
|
return __classPrivateFieldGet(this, _SkyTextEditorToolbarComponent__disabled, "f");
|
|
1222
1201
|
}
|
|
1202
|
+
constructor(adapterService, changeDetector, modalService) {
|
|
1203
|
+
_SkyTextEditorToolbarComponent_instances.add(this);
|
|
1204
|
+
this.fontList = [];
|
|
1205
|
+
this.fontSizeList = [];
|
|
1206
|
+
this.toolbarActions = [];
|
|
1207
|
+
this.backColorpickerStream = new Subject();
|
|
1208
|
+
this.colorpickerStream = new Subject();
|
|
1209
|
+
this.fontPickerStream = new Subject();
|
|
1210
|
+
this.fontSizeStream = new Subject();
|
|
1211
|
+
_SkyTextEditorToolbarComponent_editorFocusStreamSub.set(this, void 0);
|
|
1212
|
+
_SkyTextEditorToolbarComponent_adapterService.set(this, void 0);
|
|
1213
|
+
_SkyTextEditorToolbarComponent_changeDetector.set(this, void 0);
|
|
1214
|
+
_SkyTextEditorToolbarComponent_modalService.set(this, void 0);
|
|
1215
|
+
_SkyTextEditorToolbarComponent_ngUnsubscribe.set(this, new Subject());
|
|
1216
|
+
_SkyTextEditorToolbarComponent__editorFocusStream.set(this, new Subject());
|
|
1217
|
+
_SkyTextEditorToolbarComponent__disabled.set(this, false);
|
|
1218
|
+
_SkyTextEditorToolbarComponent__styleState.set(this, STYLE_STATE_DEFAULTS);
|
|
1219
|
+
__classPrivateFieldSet(this, _SkyTextEditorToolbarComponent_adapterService, adapterService, "f");
|
|
1220
|
+
__classPrivateFieldSet(this, _SkyTextEditorToolbarComponent_changeDetector, changeDetector, "f");
|
|
1221
|
+
__classPrivateFieldSet(this, _SkyTextEditorToolbarComponent_modalService, modalService, "f");
|
|
1222
|
+
}
|
|
1223
1223
|
ngOnInit() {
|
|
1224
1224
|
__classPrivateFieldGet(this, _SkyTextEditorToolbarComponent_instances, "m", _SkyTextEditorToolbarComponent_subscribeEditorFocus).call(this);
|
|
1225
1225
|
}
|
|
@@ -1326,9 +1326,9 @@ _SkyTextEditorToolbarComponent_editorFocusStreamSub = new WeakMap(), _SkyTextEdi
|
|
|
1326
1326
|
/* istanbul ignore next */
|
|
1327
1327
|
return undefined;
|
|
1328
1328
|
};
|
|
1329
|
-
SkyTextEditorToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1330
|
-
SkyTextEditorToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: { editorFocusStream: "editorFocusStream", fontList: "fontList", fontSizeList: "fontSizeList", toolbarActions: "toolbarActions", styleState: "styleState", disabled: "disabled" }, ngImport: i0, template: "<sky-toolbar-item\n *ngFor=\"let action of toolbarActions\"\n class=\"sky-text-editor-toolbar-action\"\n [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n>\n <ng-container [ngSwitch]=\"action\">\n <ng-container *ngSwitchCase=\"'font-family'\">\n <sky-dropdown\n class=\"sky-text-editor-font-picker\"\n [disabled]=\"disabled\"\n [label]=\"'Font: ' + styleStateFontName\"\n [messageStream]=\"fontPickerStream\"\n >\n <sky-dropdown-button\n [ngStyle]=\"{\n 'font-family': styleState.font\n }\"\n >\n {{ styleStateFontName }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let fontModel of fontList\">\n <button\n type=\"button\"\n [ngStyle]=\"{\n 'font-family': fontModel.value\n }\"\n (click)=\"execCommand('fontname', fontModel.name)\"\n >\n {{ fontModel.name }}\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'font-size'\">\n <sky-dropdown\n class=\"sky-text-editor-font-size-picker\"\n [disabled]=\"disabled\"\n [label]=\"'Font size: ' + styleState.fontSize + 'px'\"\n [messageStream]=\"fontSizeStream\"\n >\n <sky-dropdown-button\n [ngStyle]=\"{\n 'font-family': styleState.fontSize\n }\"\n >\n {{ styleState.fontSize + 'px' }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let size of fontSizeList\">\n <button type=\"button\" (click)=\"changeFontSize(size)\">\n {{ size + 'px' }}\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'font-style'\">\n <div class=\"sky-switch-icon-group sky-text-editor-font-style-picker\">\n <sky-checkbox\n icon=\"bold\"\n label=\"Bold\"\n title=\"Bold\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.boldState\"\n (ngModelChange)=\"\n toggleFontStyle(styleState.boldState, $event, 'bold')\n \"\n >\n </sky-checkbox>\n <sky-checkbox\n icon=\"italic\"\n label=\"Italicized\"\n title=\"Italicized\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.italicState\"\n (ngModelChange)=\"\n toggleFontStyle(styleState.italicState, $event, 'italic')\n \"\n >\n </sky-checkbox>\n <sky-checkbox\n icon=\"underline\"\n label=\"Underline\"\n title=\"Underline\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.underlineState\"\n (ngModelChange)=\"\n toggleFontStyle(styleState.underlineState, $event, 'underline')\n \"\n >\n </sky-checkbox>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'color'\">\n <div class=\"sky-text-editor-colorpicker-group\">\n <div class=\"sky-text-editor-colorpicker-container\">\n <sky-colorpicker\n class=\"sky-text-editor-font-color-picker\"\n label=\"Font color\"\n [messageStream]=\"colorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\n #colorPicker\n >\n <input\n outputFormat=\"hex\"\n type=\"text\"\n [allowTransparency]=\"false\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.fontColor\"\n [skyColorpickerInput]=\"colorPicker\"\n />\n </sky-colorpicker>\n </div>\n <div class=\"sky-text-editor-colorpicker-container\">\n <sky-colorpicker\n class=\"sky-text-editor-background-color-picker\"\n label=\"Background color\"\n [messageStream]=\"backColorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event, true)\"\n #backColorPicker\n >\n <input\n outputFormat=\"rgba\"\n type=\"text\"\n [allowTransparency]=\"true\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.backColor\"\n [skyColorpickerInput]=\"backColorPicker\"\n />\n </sky-colorpicker>\n </div>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'list'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Bulleted list\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Bulleted list\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertUnorderedList')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ul\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"bullet-list-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Numbered list\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Numbered list\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertOrderedList')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ol\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"number-list-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'alignment'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Align left\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align left\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyLeft')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"align-left\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"align-left-text-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Align center\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align center\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyCenter')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"align-center\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"center-text-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Align right\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align right\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyRight')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"align-right\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"align-right-text-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'indentation'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Outdent\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Outdent\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('outdent')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"outdent\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"outdent-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n <button\n aria-label=\"Indent\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Indent\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('indent')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"indent\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"indent-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'undo-redo'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Undo\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Undo\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('undo')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"undo\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"undo-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n <button\n aria-label=\"Redo\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Redo\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('redo')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"repeat\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"redo-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'link'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Link\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Link\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'icon-btn-active': styleState.linkState\n }\"\n (click)=\"link()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"link\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"link-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n <button\n aria-label=\"Unlink\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Unlink\"\n [disabled]=\"!styleState.linkState || disabled\"\n (click)=\"unlink()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"unlink\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"unlink-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n </div>\n </ng-container>\n </ng-container>\n</sky-toolbar-item>\n", styles: [".sky-text-editor-toolbar-action .sky-toolbar-item{margin-right:15px}.sky-text-editor-toolbar-action .sky-text-editor-font-picker ::ng-deep .sky-dropdown-button-content-container{width:140px;height:20px;text-align:left}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group{display:flex}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{position:relative;top:3px;margin:0 10px 0 0}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child{margin-right:0}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn{margin-left:0;margin-right:0;border-radius:0;border-right:none}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:first-of-type{border-top-left-radius:3px;border-bottom-left-radius:3px}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border-top-right-radius:3px;border-bottom-right-radius:3px;border-right:1px solid #cdcfd2}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:first-of-type,:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}:host-context(.sky-theme-modern) .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}.sky-theme-modern .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}.sky-theme-modern .sky-switch-icon-group .sky-btn:first-of-type,.sky-theme-modern .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}.sky-theme-modern .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i6$1.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "pickerButtonIconType", "label", "labelledBy", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i6$1.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "component", type: i5$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i4.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i4.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i4.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i4.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i7.λ39, selector: "sky-toolbar-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1331
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
1329
|
+
SkyTextEditorToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorToolbarComponent, deps: [{ token: SkyTextEditorAdapterService }, { token: i0.ChangeDetectorRef }, { token: i1$2.SkyModalService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1330
|
+
SkyTextEditorToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: { editorFocusStream: "editorFocusStream", fontList: "fontList", fontSizeList: "fontSizeList", toolbarActions: "toolbarActions", styleState: "styleState", disabled: "disabled" }, ngImport: i0, template: "<sky-toolbar-item\n *ngFor=\"let action of toolbarActions\"\n class=\"sky-text-editor-toolbar-action\"\n [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n>\n <ng-container [ngSwitch]=\"action\">\n <ng-container *ngSwitchCase=\"'font-family'\">\n <sky-dropdown\n class=\"sky-text-editor-font-picker\"\n [disabled]=\"disabled\"\n [label]=\"'Font: ' + styleStateFontName\"\n [messageStream]=\"fontPickerStream\"\n >\n <sky-dropdown-button\n [ngStyle]=\"{\n 'font-family': styleState.font\n }\"\n >\n {{ styleStateFontName }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let fontModel of fontList\">\n <button\n type=\"button\"\n [ngStyle]=\"{\n 'font-family': fontModel.value\n }\"\n (click)=\"execCommand('fontname', fontModel.name)\"\n >\n {{ fontModel.name }}\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'font-size'\">\n <sky-dropdown\n class=\"sky-text-editor-font-size-picker\"\n [disabled]=\"disabled\"\n [label]=\"'Font size: ' + styleState.fontSize + 'px'\"\n [messageStream]=\"fontSizeStream\"\n >\n <sky-dropdown-button\n [ngStyle]=\"{\n 'font-family': styleState.fontSize\n }\"\n >\n {{ styleState.fontSize + 'px' }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let size of fontSizeList\">\n <button type=\"button\" (click)=\"changeFontSize(size)\">\n {{ size + 'px' }}\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'font-style'\">\n <div class=\"sky-switch-icon-group sky-text-editor-font-style-picker\">\n <sky-checkbox\n icon=\"bold\"\n label=\"Bold\"\n title=\"Bold\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.boldState\"\n (ngModelChange)=\"\n toggleFontStyle(styleState.boldState, $event, 'bold')\n \"\n >\n </sky-checkbox>\n <sky-checkbox\n icon=\"italic\"\n label=\"Italicized\"\n title=\"Italicized\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.italicState\"\n (ngModelChange)=\"\n toggleFontStyle(styleState.italicState, $event, 'italic')\n \"\n >\n </sky-checkbox>\n <sky-checkbox\n icon=\"underline\"\n label=\"Underline\"\n title=\"Underline\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.underlineState\"\n (ngModelChange)=\"\n toggleFontStyle(styleState.underlineState, $event, 'underline')\n \"\n >\n </sky-checkbox>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'color'\">\n <div class=\"sky-text-editor-colorpicker-group\">\n <div class=\"sky-text-editor-colorpicker-container\">\n <sky-colorpicker\n class=\"sky-text-editor-font-color-picker\"\n label=\"Font color\"\n [messageStream]=\"colorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\n #colorPicker\n >\n <input\n outputFormat=\"hex\"\n type=\"text\"\n [allowTransparency]=\"false\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.fontColor\"\n [skyColorpickerInput]=\"colorPicker\"\n />\n </sky-colorpicker>\n </div>\n <div class=\"sky-text-editor-colorpicker-container\">\n <sky-colorpicker\n class=\"sky-text-editor-background-color-picker\"\n label=\"Background color\"\n [messageStream]=\"backColorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event, true)\"\n #backColorPicker\n >\n <input\n outputFormat=\"rgba\"\n type=\"text\"\n [allowTransparency]=\"true\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.backColor\"\n [skyColorpickerInput]=\"backColorPicker\"\n />\n </sky-colorpicker>\n </div>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'list'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Bulleted list\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Bulleted list\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertUnorderedList')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ul\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"bullet-list-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Numbered list\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Numbered list\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertOrderedList')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ol\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"number-list-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'alignment'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Align left\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align left\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyLeft')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"align-left\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"align-left-text-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Align center\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align center\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyCenter')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"align-center\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"center-text-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Align right\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align right\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyRight')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"align-right\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"align-right-text-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'indentation'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Outdent\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Outdent\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('outdent')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"outdent\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"outdent-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n <button\n aria-label=\"Indent\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Indent\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('indent')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"indent\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"indent-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'undo-redo'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Undo\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Undo\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('undo')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"undo\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"undo-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n <button\n aria-label=\"Redo\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Redo\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('redo')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"repeat\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"redo-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'link'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Link\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Link\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'icon-btn-active': styleState.linkState\n }\"\n (click)=\"link()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"link\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"link-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n <button\n aria-label=\"Unlink\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Unlink\"\n [disabled]=\"!styleState.linkState || disabled\"\n (click)=\"unlink()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"unlink\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"unlink-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n </div>\n </ng-container>\n </ng-container>\n</sky-toolbar-item>\n", styles: [".sky-text-editor-toolbar-action .sky-toolbar-item{margin-right:15px}.sky-text-editor-toolbar-action .sky-text-editor-font-picker ::ng-deep .sky-dropdown-button-content-container{width:140px;height:20px;text-align:left}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group{display:flex}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{position:relative;top:3px;margin:0 10px 0 0}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child{margin-right:0}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn{margin-left:0;margin-right:0;border-radius:0;border-right:none}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:first-of-type{border-top-left-radius:3px;border-bottom-left-radius:3px}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border-top-right-radius:3px;border-bottom-right-radius:3px;border-right:1px solid #cdcfd2}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:first-of-type,:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}:host-context(.sky-theme-modern) .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}.sky-theme-modern .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}.sky-theme-modern .sky-switch-icon-group .sky-btn:first-of-type,.sky-theme-modern .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}.sky-theme-modern .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i6$1.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "pickerButtonIconType", "label", "labelledBy", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i6$1.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "component", type: i5$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i4.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i4.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i4.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i4.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i7.λ39, selector: "sky-toolbar-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1331
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorToolbarComponent, decorators: [{
|
|
1332
1332
|
type: Component,
|
|
1333
1333
|
args: [{ selector: 'sky-text-editor-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-toolbar-item\n *ngFor=\"let action of toolbarActions\"\n class=\"sky-text-editor-toolbar-action\"\n [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n>\n <ng-container [ngSwitch]=\"action\">\n <ng-container *ngSwitchCase=\"'font-family'\">\n <sky-dropdown\n class=\"sky-text-editor-font-picker\"\n [disabled]=\"disabled\"\n [label]=\"'Font: ' + styleStateFontName\"\n [messageStream]=\"fontPickerStream\"\n >\n <sky-dropdown-button\n [ngStyle]=\"{\n 'font-family': styleState.font\n }\"\n >\n {{ styleStateFontName }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let fontModel of fontList\">\n <button\n type=\"button\"\n [ngStyle]=\"{\n 'font-family': fontModel.value\n }\"\n (click)=\"execCommand('fontname', fontModel.name)\"\n >\n {{ fontModel.name }}\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'font-size'\">\n <sky-dropdown\n class=\"sky-text-editor-font-size-picker\"\n [disabled]=\"disabled\"\n [label]=\"'Font size: ' + styleState.fontSize + 'px'\"\n [messageStream]=\"fontSizeStream\"\n >\n <sky-dropdown-button\n [ngStyle]=\"{\n 'font-family': styleState.fontSize\n }\"\n >\n {{ styleState.fontSize + 'px' }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let size of fontSizeList\">\n <button type=\"button\" (click)=\"changeFontSize(size)\">\n {{ size + 'px' }}\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'font-style'\">\n <div class=\"sky-switch-icon-group sky-text-editor-font-style-picker\">\n <sky-checkbox\n icon=\"bold\"\n label=\"Bold\"\n title=\"Bold\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.boldState\"\n (ngModelChange)=\"\n toggleFontStyle(styleState.boldState, $event, 'bold')\n \"\n >\n </sky-checkbox>\n <sky-checkbox\n icon=\"italic\"\n label=\"Italicized\"\n title=\"Italicized\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.italicState\"\n (ngModelChange)=\"\n toggleFontStyle(styleState.italicState, $event, 'italic')\n \"\n >\n </sky-checkbox>\n <sky-checkbox\n icon=\"underline\"\n label=\"Underline\"\n title=\"Underline\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.underlineState\"\n (ngModelChange)=\"\n toggleFontStyle(styleState.underlineState, $event, 'underline')\n \"\n >\n </sky-checkbox>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'color'\">\n <div class=\"sky-text-editor-colorpicker-group\">\n <div class=\"sky-text-editor-colorpicker-container\">\n <sky-colorpicker\n class=\"sky-text-editor-font-color-picker\"\n label=\"Font color\"\n [messageStream]=\"colorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\n #colorPicker\n >\n <input\n outputFormat=\"hex\"\n type=\"text\"\n [allowTransparency]=\"false\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.fontColor\"\n [skyColorpickerInput]=\"colorPicker\"\n />\n </sky-colorpicker>\n </div>\n <div class=\"sky-text-editor-colorpicker-container\">\n <sky-colorpicker\n class=\"sky-text-editor-background-color-picker\"\n label=\"Background color\"\n [messageStream]=\"backColorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event, true)\"\n #backColorPicker\n >\n <input\n outputFormat=\"rgba\"\n type=\"text\"\n [allowTransparency]=\"true\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.backColor\"\n [skyColorpickerInput]=\"backColorPicker\"\n />\n </sky-colorpicker>\n </div>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'list'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Bulleted list\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Bulleted list\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertUnorderedList')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ul\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"bullet-list-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Numbered list\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Numbered list\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertOrderedList')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ol\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"number-list-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'alignment'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Align left\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align left\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyLeft')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"align-left\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"align-left-text-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Align center\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align center\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyCenter')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"align-center\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"center-text-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Align right\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align right\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyRight')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"align-right\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"align-right-text-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'indentation'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Outdent\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Outdent\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('outdent')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"outdent\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"outdent-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n <button\n aria-label=\"Indent\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Indent\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('indent')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"indent\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"indent-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'undo-redo'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Undo\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Undo\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('undo')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"undo\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"undo-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n <button\n aria-label=\"Redo\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Redo\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('redo')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"repeat\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"redo-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'link'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Link\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Link\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'icon-btn-active': styleState.linkState\n }\"\n (click)=\"link()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"link\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"link-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n <button\n aria-label=\"Unlink\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Unlink\"\n [disabled]=\"!styleState.linkState || disabled\"\n (click)=\"unlink()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"unlink\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"unlink-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n </div>\n </ng-container>\n </ng-container>\n</sky-toolbar-item>\n", styles: [".sky-text-editor-toolbar-action .sky-toolbar-item{margin-right:15px}.sky-text-editor-toolbar-action .sky-text-editor-font-picker ::ng-deep .sky-dropdown-button-content-container{width:140px;height:20px;text-align:left}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group{display:flex}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{position:relative;top:3px;margin:0 10px 0 0}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child{margin-right:0}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn{margin-left:0;margin-right:0;border-radius:0;border-right:none}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:first-of-type{border-top-left-radius:3px;border-bottom-left-radius:3px}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border-top-right-radius:3px;border-bottom-right-radius:3px;border-right:1px solid #cdcfd2}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:first-of-type,:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}:host-context(.sky-theme-modern) .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}.sky-theme-modern .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}.sky-theme-modern .sky-switch-icon-group .sky-btn:first-of-type,.sky-theme-modern .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}.sky-theme-modern .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}\n"] }]
|
|
1334
1334
|
}], ctorParameters: function () { return [{ type: SkyTextEditorAdapterService }, { type: i0.ChangeDetectorRef }, { type: i1$2.SkyModalService }]; }, propDecorators: { editorFocusStream: [{
|
|
@@ -1350,52 +1350,6 @@ var _SkyTextEditorComponent_instances, _SkyTextEditorComponent_defaultId, _SkyTe
|
|
|
1350
1350
|
* The text editor component lets users format and manipulate text.
|
|
1351
1351
|
*/
|
|
1352
1352
|
class SkyTextEditorComponent {
|
|
1353
|
-
constructor(changeDetector, coreAdapterService, adapterService, editorService, sanitizationService, ngControl, zone, idSvc) {
|
|
1354
|
-
_SkyTextEditorComponent_instances.add(this);
|
|
1355
|
-
/**
|
|
1356
|
-
* Whether to put focus on the editor after it renders.
|
|
1357
|
-
*/
|
|
1358
|
-
this.autofocus = false;
|
|
1359
|
-
this.editorFocusStream = new Subject();
|
|
1360
|
-
_SkyTextEditorComponent_defaultId.set(this, void 0);
|
|
1361
|
-
_SkyTextEditorComponent_id.set(this, void 0);
|
|
1362
|
-
_SkyTextEditorComponent_focusInitialized.set(this, false);
|
|
1363
|
-
_SkyTextEditorComponent_initialized.set(this, false);
|
|
1364
|
-
_SkyTextEditorComponent_ngUnsubscribe.set(this, new Subject());
|
|
1365
|
-
_SkyTextEditorComponent_changeDetector.set(this, void 0);
|
|
1366
|
-
_SkyTextEditorComponent_coreAdapterService.set(this, void 0);
|
|
1367
|
-
_SkyTextEditorComponent_adapterService.set(this, void 0);
|
|
1368
|
-
_SkyTextEditorComponent_editorService.set(this, void 0);
|
|
1369
|
-
_SkyTextEditorComponent_sanitizationService.set(this, void 0);
|
|
1370
|
-
_SkyTextEditorComponent_ngControl.set(this, void 0);
|
|
1371
|
-
_SkyTextEditorComponent_zone.set(this, void 0);
|
|
1372
|
-
_SkyTextEditorComponent__fontList.set(this, FONT_LIST_DEFAULTS);
|
|
1373
|
-
_SkyTextEditorComponent__fontSizeList.set(this, FONT_SIZE_LIST_DEFAULTS);
|
|
1374
|
-
_SkyTextEditorComponent__mergeFields.set(this, []);
|
|
1375
|
-
_SkyTextEditorComponent__menus.set(this, MENU_DEFAULTS);
|
|
1376
|
-
_SkyTextEditorComponent__toolbarActions.set(this, TOOLBAR_ACTION_DEFAULTS);
|
|
1377
|
-
_SkyTextEditorComponent__disabled.set(this, false);
|
|
1378
|
-
_SkyTextEditorComponent__initialStyleState.set(this, Object.assign({}, STYLE_STATE_DEFAULTS));
|
|
1379
|
-
_SkyTextEditorComponent__placeholder.set(this, '');
|
|
1380
|
-
_SkyTextEditorComponent__value.set(this, '<p></p>');
|
|
1381
|
-
/* istanbul ignore next */
|
|
1382
|
-
_SkyTextEditorComponent__onTouched.set(this, () => {
|
|
1383
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
1384
|
-
});
|
|
1385
|
-
/* istanbul ignore next */
|
|
1386
|
-
_SkyTextEditorComponent__onChange.set(this, () => {
|
|
1387
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
1388
|
-
});
|
|
1389
|
-
__classPrivateFieldSet(this, _SkyTextEditorComponent_changeDetector, changeDetector, "f");
|
|
1390
|
-
__classPrivateFieldSet(this, _SkyTextEditorComponent_coreAdapterService, coreAdapterService, "f");
|
|
1391
|
-
__classPrivateFieldSet(this, _SkyTextEditorComponent_adapterService, adapterService, "f");
|
|
1392
|
-
__classPrivateFieldSet(this, _SkyTextEditorComponent_editorService, editorService, "f");
|
|
1393
|
-
__classPrivateFieldSet(this, _SkyTextEditorComponent_sanitizationService, sanitizationService, "f");
|
|
1394
|
-
__classPrivateFieldSet(this, _SkyTextEditorComponent_ngControl, ngControl, "f");
|
|
1395
|
-
__classPrivateFieldSet(this, _SkyTextEditorComponent_zone, zone, "f");
|
|
1396
|
-
__classPrivateFieldSet(this, _SkyTextEditorComponent_id, __classPrivateFieldSet(this, _SkyTextEditorComponent_defaultId, idSvc.generateId(), "f"), "f");
|
|
1397
|
-
ngControl.valueAccessor = this;
|
|
1398
|
-
}
|
|
1399
1353
|
/**
|
|
1400
1354
|
* Whether to disable the text editor.
|
|
1401
1355
|
* @default false
|
|
@@ -1558,6 +1512,52 @@ class SkyTextEditorComponent {
|
|
|
1558
1512
|
get value() {
|
|
1559
1513
|
return __classPrivateFieldGet(this, _SkyTextEditorComponent__value, "f");
|
|
1560
1514
|
}
|
|
1515
|
+
constructor(changeDetector, coreAdapterService, adapterService, editorService, sanitizationService, ngControl, zone, idSvc) {
|
|
1516
|
+
_SkyTextEditorComponent_instances.add(this);
|
|
1517
|
+
/**
|
|
1518
|
+
* Whether to put focus on the editor after it renders.
|
|
1519
|
+
*/
|
|
1520
|
+
this.autofocus = false;
|
|
1521
|
+
this.editorFocusStream = new Subject();
|
|
1522
|
+
_SkyTextEditorComponent_defaultId.set(this, void 0);
|
|
1523
|
+
_SkyTextEditorComponent_id.set(this, void 0);
|
|
1524
|
+
_SkyTextEditorComponent_focusInitialized.set(this, false);
|
|
1525
|
+
_SkyTextEditorComponent_initialized.set(this, false);
|
|
1526
|
+
_SkyTextEditorComponent_ngUnsubscribe.set(this, new Subject());
|
|
1527
|
+
_SkyTextEditorComponent_changeDetector.set(this, void 0);
|
|
1528
|
+
_SkyTextEditorComponent_coreAdapterService.set(this, void 0);
|
|
1529
|
+
_SkyTextEditorComponent_adapterService.set(this, void 0);
|
|
1530
|
+
_SkyTextEditorComponent_editorService.set(this, void 0);
|
|
1531
|
+
_SkyTextEditorComponent_sanitizationService.set(this, void 0);
|
|
1532
|
+
_SkyTextEditorComponent_ngControl.set(this, void 0);
|
|
1533
|
+
_SkyTextEditorComponent_zone.set(this, void 0);
|
|
1534
|
+
_SkyTextEditorComponent__fontList.set(this, FONT_LIST_DEFAULTS);
|
|
1535
|
+
_SkyTextEditorComponent__fontSizeList.set(this, FONT_SIZE_LIST_DEFAULTS);
|
|
1536
|
+
_SkyTextEditorComponent__mergeFields.set(this, []);
|
|
1537
|
+
_SkyTextEditorComponent__menus.set(this, MENU_DEFAULTS);
|
|
1538
|
+
_SkyTextEditorComponent__toolbarActions.set(this, TOOLBAR_ACTION_DEFAULTS);
|
|
1539
|
+
_SkyTextEditorComponent__disabled.set(this, false);
|
|
1540
|
+
_SkyTextEditorComponent__initialStyleState.set(this, Object.assign({}, STYLE_STATE_DEFAULTS));
|
|
1541
|
+
_SkyTextEditorComponent__placeholder.set(this, '');
|
|
1542
|
+
_SkyTextEditorComponent__value.set(this, '<p></p>');
|
|
1543
|
+
/* istanbul ignore next */
|
|
1544
|
+
_SkyTextEditorComponent__onTouched.set(this, () => {
|
|
1545
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
1546
|
+
});
|
|
1547
|
+
/* istanbul ignore next */
|
|
1548
|
+
_SkyTextEditorComponent__onChange.set(this, () => {
|
|
1549
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
1550
|
+
});
|
|
1551
|
+
__classPrivateFieldSet(this, _SkyTextEditorComponent_changeDetector, changeDetector, "f");
|
|
1552
|
+
__classPrivateFieldSet(this, _SkyTextEditorComponent_coreAdapterService, coreAdapterService, "f");
|
|
1553
|
+
__classPrivateFieldSet(this, _SkyTextEditorComponent_adapterService, adapterService, "f");
|
|
1554
|
+
__classPrivateFieldSet(this, _SkyTextEditorComponent_editorService, editorService, "f");
|
|
1555
|
+
__classPrivateFieldSet(this, _SkyTextEditorComponent_sanitizationService, sanitizationService, "f");
|
|
1556
|
+
__classPrivateFieldSet(this, _SkyTextEditorComponent_ngControl, ngControl, "f");
|
|
1557
|
+
__classPrivateFieldSet(this, _SkyTextEditorComponent_zone, zone, "f");
|
|
1558
|
+
__classPrivateFieldSet(this, _SkyTextEditorComponent_id, __classPrivateFieldSet(this, _SkyTextEditorComponent_defaultId, idSvc.generateId(), "f"), "f");
|
|
1559
|
+
ngControl.valueAccessor = this;
|
|
1560
|
+
}
|
|
1561
1561
|
ngOnDestroy() {
|
|
1562
1562
|
__classPrivateFieldGet(this, _SkyTextEditorComponent_adapterService, "f").removeObservers(__classPrivateFieldGet(this, _SkyTextEditorComponent_editorService, "f").editor);
|
|
1563
1563
|
__classPrivateFieldGet(this, _SkyTextEditorComponent_ngUnsubscribe, "f").next();
|
|
@@ -1662,13 +1662,13 @@ _SkyTextEditorComponent_defaultId = new WeakMap(), _SkyTextEditorComponent_id =
|
|
|
1662
1662
|
__classPrivateFieldGet(this, _SkyTextEditorComponent__onChange, "f").call(this, __classPrivateFieldGet(this, _SkyTextEditorComponent__value, "f"));
|
|
1663
1663
|
}
|
|
1664
1664
|
};
|
|
1665
|
-
SkyTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1666
|
-
SkyTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
|
1665
|
+
SkyTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SkyCoreAdapterService }, { token: SkyTextEditorAdapterService }, { token: SkyTextEditorService }, { token: SkyTextSanitizationService }, { token: i3$1.NgControl }, { token: i0.NgZone }, { token: i1$1.SkyIdService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1666
|
+
SkyTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyTextEditorComponent, selector: "sky-text-editor", inputs: { autofocus: "autofocus", disabled: "disabled", fontList: "fontList", fontSizeList: "fontSizeList", id: "id", initialStyleState: "initialStyleState", menus: "menus", mergeFields: "mergeFields", placeholder: "placeholder", toolbarActions: "toolbarActions" }, providers: [
|
|
1667
1667
|
SkyTextEditorService,
|
|
1668
1668
|
SkyTextEditorSelectionService,
|
|
1669
1669
|
SkyTextEditorAdapterService,
|
|
1670
1670
|
], ngImport: i0, template: "<div class=\"sky-text-editor\">\n <sky-toolbar\n *ngIf=\"\n (menus && menus.length) > 0 ||\n (toolbarActions && toolbarActions.length > 0)\n \"\n class=\"sky-text-editor-toolbar\"\n >\n <sky-toolbar-section\n *ngIf=\"menus && menus.length > 0\"\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-text-editor-menubar>\n </sky-toolbar-section>\n <sky-toolbar-section\n *ngIf=\"toolbarActions && toolbarActions.length > 0\"\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 [toolbarActions]=\"toolbarActions\"\n [styleState]=\"initialStyleState\"\n >\n </sky-text-editor-toolbar>\n </sky-toolbar-section>\n </sky-toolbar>\n <iframe\n class=\"sky-text-editor-wrapper\"\n src=\"about:blank\"\n title=\"Text Editor\"\n [ngClass]=\"{\n 'sky-text-editor-wrapper-disabled': disabled\n }\"\n (load)=\"onIframeLoad($event)\"\n >\n </iframe>\n</div>\n", styles: [".sky-text-editor .sky-text-editor-wrapper{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;height:300px;padding:1rem;font-size:1.2rem;border:1px solid #c0c0c0;overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ededee}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:1px solid #cdcfd2!important;border-right:1px solid #cdcfd2!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-dropdown-button{border:none}.sky-text-editor .sky-text-editor-toolbar sky-text-editor-menubar,.sky-text-editor .sky-text-editor-toolbar sky-text-editor-toolbar{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{border:1px solid #d2d2d2}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ececed}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar{padding:10px 10px 0}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-top:1px solid #d2d2d2!important;border-left:1px solid #d2d2d2!important;border-right:1px solid #d2d2d2!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 0 0!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.λ37, selector: "sky-toolbar" }, { kind: "component", type: i7.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: ["editorFocusStream", "fontList", "fontSizeList", "toolbarActions", "styleState", "disabled"] }, { kind: "component", type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: ["editorFocusStream", "menus", "mergeFields", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1671
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
1671
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorComponent, decorators: [{
|
|
1672
1672
|
type: Component,
|
|
1673
1673
|
args: [{ selector: 'sky-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
1674
1674
|
SkyTextEditorService,
|
|
@@ -1699,8 +1699,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
1699
1699
|
|
|
1700
1700
|
class SkyTextEditorModule {
|
|
1701
1701
|
}
|
|
1702
|
-
SkyTextEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
|
1703
|
-
SkyTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
|
1702
|
+
SkyTextEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1703
|
+
SkyTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorModule, declarations: [SkyTextEditorComponent,
|
|
1704
1704
|
SkyTextEditorUrlModalComponent,
|
|
1705
1705
|
SkyTextEditorToolbarComponent,
|
|
1706
1706
|
SkyTextEditorMenubarComponent], imports: [CommonModule,
|
|
@@ -1722,7 +1722,7 @@ SkyTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
|
|
|
1722
1722
|
SkyTextEditorUrlModalComponent,
|
|
1723
1723
|
SkyTextEditorToolbarComponent,
|
|
1724
1724
|
SkyTextEditorMenubarComponent] });
|
|
1725
|
-
SkyTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
|
1725
|
+
SkyTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorModule, imports: [CommonModule,
|
|
1726
1726
|
FormsModule,
|
|
1727
1727
|
ReactiveFormsModule,
|
|
1728
1728
|
SkyCoreAdapterModule,
|
|
@@ -1738,7 +1738,7 @@ SkyTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
|
|
|
1738
1738
|
SkyTabsModule,
|
|
1739
1739
|
SkyThemeModule,
|
|
1740
1740
|
SkyToolbarModule] });
|
|
1741
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
|
1741
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTextEditorModule, decorators: [{
|
|
1742
1742
|
type: NgModule,
|
|
1743
1743
|
args: [{
|
|
1744
1744
|
imports: [
|