@skyux/text-editor 5.7.2 → 6.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/documentation.json +2 -2
  2. package/esm2020/index.mjs +15 -0
  3. package/esm2020/lib/modules/rich-text-display/rich-text-display.component.mjs +36 -0
  4. package/esm2020/lib/modules/rich-text-display/rich-text-display.module.mjs +18 -0
  5. package/esm2020/lib/modules/shared/forms-utility.mjs +10 -0
  6. package/esm2020/lib/modules/shared/sky-text-editor-resources.module.mjs +106 -0
  7. package/esm2020/lib/modules/text-editor/defaults/font-list-defaults.mjs +42 -0
  8. package/esm2020/lib/modules/text-editor/defaults/font-size-list-defaults.mjs +7 -0
  9. package/esm2020/lib/modules/text-editor/defaults/menu-defaults.mjs +5 -0
  10. package/esm2020/lib/modules/text-editor/defaults/style-state-defaults.mjs +15 -0
  11. package/esm2020/lib/modules/text-editor/defaults/toolbar-action-defaults.mjs +12 -0
  12. package/esm2020/lib/modules/text-editor/menubar/text-editor-menubar.component.mjs +191 -0
  13. package/esm2020/lib/modules/text-editor/services/text-editor-adapter.service.mjs +477 -0
  14. package/esm2020/lib/modules/text-editor/services/text-editor-selection.service.mjs +80 -0
  15. package/esm2020/lib/modules/text-editor/services/text-editor.service.mjs +61 -0
  16. package/esm2020/lib/modules/text-editor/services/text-sanitization.service.mjs +38 -0
  17. package/esm2020/lib/modules/text-editor/text-editor.component.mjs +322 -0
  18. package/esm2020/lib/modules/text-editor/text-editor.module.mjs +98 -0
  19. package/esm2020/lib/modules/text-editor/toolbar/text-editor-toolbar.component.mjs +179 -0
  20. package/esm2020/lib/modules/text-editor/types/editor-command.mjs +2 -0
  21. package/esm2020/lib/modules/text-editor/types/editor-setting.mjs +2 -0
  22. package/esm2020/lib/modules/text-editor/types/font-state.mjs +2 -0
  23. package/esm2020/lib/modules/text-editor/types/menu-type.mjs +2 -0
  24. package/esm2020/lib/modules/text-editor/types/style-state.mjs +2 -0
  25. package/esm2020/lib/modules/text-editor/types/text-editor-merge-field.mjs +2 -0
  26. package/esm2020/lib/modules/text-editor/types/toolbar-action-type.mjs +2 -0
  27. package/esm2020/lib/modules/text-editor/url-modal/text-editor-url-modal-context.mjs +6 -0
  28. package/esm2020/lib/modules/text-editor/url-modal/text-editor-url-modal-result.mjs +2 -0
  29. package/esm2020/lib/modules/text-editor/url-modal/text-editor-url-modal.component.mjs +117 -0
  30. package/esm2020/lib/modules/text-editor/url-modal/text-editor-url-target.mjs +9 -0
  31. package/esm2020/skyux-text-editor.mjs +5 -0
  32. package/fesm2015/{skyux-text-editor.js → skyux-text-editor.mjs} +45 -69
  33. package/fesm2015/skyux-text-editor.mjs.map +1 -0
  34. package/fesm2020/skyux-text-editor.mjs +1743 -0
  35. package/fesm2020/skyux-text-editor.mjs.map +1 -0
  36. package/package.json +38 -22
  37. package/bundles/skyux-text-editor.umd.js +0 -2195
  38. package/esm2015/index.js +0 -15
  39. package/esm2015/index.js.map +0 -1
  40. package/esm2015/lib/modules/rich-text-display/rich-text-display.component.js +0 -39
  41. package/esm2015/lib/modules/rich-text-display/rich-text-display.component.js.map +0 -1
  42. package/esm2015/lib/modules/rich-text-display/rich-text-display.module.js +0 -18
  43. package/esm2015/lib/modules/rich-text-display/rich-text-display.module.js.map +0 -1
  44. package/esm2015/lib/modules/shared/forms-utility.js +0 -10
  45. package/esm2015/lib/modules/shared/forms-utility.js.map +0 -1
  46. package/esm2015/lib/modules/shared/sky-text-editor-resources.module.js +0 -106
  47. package/esm2015/lib/modules/shared/sky-text-editor-resources.module.js.map +0 -1
  48. package/esm2015/lib/modules/text-editor/defaults/font-list-defaults.js +0 -42
  49. package/esm2015/lib/modules/text-editor/defaults/font-list-defaults.js.map +0 -1
  50. package/esm2015/lib/modules/text-editor/defaults/font-size-list-defaults.js +0 -7
  51. package/esm2015/lib/modules/text-editor/defaults/font-size-list-defaults.js.map +0 -1
  52. package/esm2015/lib/modules/text-editor/defaults/menu-defaults.js +0 -5
  53. package/esm2015/lib/modules/text-editor/defaults/menu-defaults.js.map +0 -1
  54. package/esm2015/lib/modules/text-editor/defaults/style-state-defaults.js +0 -15
  55. package/esm2015/lib/modules/text-editor/defaults/style-state-defaults.js.map +0 -1
  56. package/esm2015/lib/modules/text-editor/defaults/toolbar-action-defaults.js +0 -12
  57. package/esm2015/lib/modules/text-editor/defaults/toolbar-action-defaults.js.map +0 -1
  58. package/esm2015/lib/modules/text-editor/menubar/text-editor-menubar.component.js +0 -196
  59. package/esm2015/lib/modules/text-editor/menubar/text-editor-menubar.component.js.map +0 -1
  60. package/esm2015/lib/modules/text-editor/services/text-editor-adapter.service.js +0 -474
  61. package/esm2015/lib/modules/text-editor/services/text-editor-adapter.service.js.map +0 -1
  62. package/esm2015/lib/modules/text-editor/services/text-editor-selection.service.js +0 -80
  63. package/esm2015/lib/modules/text-editor/services/text-editor-selection.service.js.map +0 -1
  64. package/esm2015/lib/modules/text-editor/services/text-editor.service.js +0 -61
  65. package/esm2015/lib/modules/text-editor/services/text-editor.service.js.map +0 -1
  66. package/esm2015/lib/modules/text-editor/services/text-sanitization.service.js +0 -38
  67. package/esm2015/lib/modules/text-editor/services/text-sanitization.service.js.map +0 -1
  68. package/esm2015/lib/modules/text-editor/text-editor.component.js +0 -322
  69. package/esm2015/lib/modules/text-editor/text-editor.component.js.map +0 -1
  70. package/esm2015/lib/modules/text-editor/text-editor.module.js +0 -99
  71. package/esm2015/lib/modules/text-editor/text-editor.module.js.map +0 -1
  72. package/esm2015/lib/modules/text-editor/toolbar/text-editor-toolbar.component.js +0 -175
  73. package/esm2015/lib/modules/text-editor/toolbar/text-editor-toolbar.component.js.map +0 -1
  74. package/esm2015/lib/modules/text-editor/types/editor-command.js +0 -2
  75. package/esm2015/lib/modules/text-editor/types/editor-command.js.map +0 -1
  76. package/esm2015/lib/modules/text-editor/types/editor-setting.js +0 -2
  77. package/esm2015/lib/modules/text-editor/types/editor-setting.js.map +0 -1
  78. package/esm2015/lib/modules/text-editor/types/font-state.js +0 -2
  79. package/esm2015/lib/modules/text-editor/types/font-state.js.map +0 -1
  80. package/esm2015/lib/modules/text-editor/types/menu-type.js +0 -2
  81. package/esm2015/lib/modules/text-editor/types/menu-type.js.map +0 -1
  82. package/esm2015/lib/modules/text-editor/types/style-state.js +0 -2
  83. package/esm2015/lib/modules/text-editor/types/style-state.js.map +0 -1
  84. package/esm2015/lib/modules/text-editor/types/text-editor-merge-field.js +0 -2
  85. package/esm2015/lib/modules/text-editor/types/text-editor-merge-field.js.map +0 -1
  86. package/esm2015/lib/modules/text-editor/types/toolbar-action-type.js +0 -2
  87. package/esm2015/lib/modules/text-editor/types/toolbar-action-type.js.map +0 -1
  88. package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-modal-context.js +0 -6
  89. package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-modal-context.js.map +0 -1
  90. package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-modal-result.js +0 -2
  91. package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-modal-result.js.map +0 -1
  92. package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-modal.component.js +0 -121
  93. package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-modal.component.js.map +0 -1
  94. package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-target.js +0 -9
  95. package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-target.js.map +0 -1
  96. package/esm2015/skyux-text-editor.js +0 -5
  97. package/esm2015/skyux-text-editor.js.map +0 -1
  98. package/fesm2015/skyux-text-editor.js.map +0 -1
@@ -1,175 +0,0 @@
1
- import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, } from '@angular/core';
2
- import { SkyColorpickerMessageType, } from '@skyux/colorpicker';
3
- import { SkyModalService } from '@skyux/modals';
4
- import { SkyDropdownMessageType } from '@skyux/popovers';
5
- import { Subject } from 'rxjs';
6
- import { SkyFormsUtility } from '../../shared/forms-utility';
7
- import { STYLE_STATE_DEFAULTS } from '../defaults/style-state-defaults';
8
- import { SkyTextEditorAdapterService } from '../services/text-editor-adapter.service';
9
- import { SkyUrlModalContext } from '../url-modal/text-editor-url-modal-context';
10
- import { SkyTextEditorUrlModalComponent } from '../url-modal/text-editor-url-modal.component';
11
- import { UrlTarget } from '../url-modal/text-editor-url-target';
12
- import * as i0 from "@angular/core";
13
- import * as i1 from "../services/text-editor-adapter.service";
14
- import * as i2 from "@skyux/modals";
15
- import * as i3 from "@skyux/layout";
16
- import * as i4 from "@skyux/popovers";
17
- import * as i5 from "@skyux/forms";
18
- import * as i6 from "@skyux/colorpicker";
19
- import * as i7 from "@skyux/indicators";
20
- import * as i8 from "@angular/common";
21
- import * as i9 from "@angular/forms";
22
- import * as i10 from "@skyux/theme";
23
- /**
24
- * @internal
25
- */
26
- export class SkyTextEditorToolbarComponent {
27
- constructor(adapterService, changeDetector, modalService) {
28
- this.adapterService = adapterService;
29
- this.changeDetector = changeDetector;
30
- this.modalService = modalService;
31
- this.editorFocusStream = new Subject();
32
- this.backColorpickerStream = new Subject();
33
- this.colorpickerStream = new Subject();
34
- this.fontPickerStream = new Subject();
35
- this.fontSizeStream = new Subject();
36
- this._disabled = false;
37
- this._styleState = STYLE_STATE_DEFAULTS;
38
- }
39
- get styleState() {
40
- return this._styleState;
41
- }
42
- set styleState(value) {
43
- this._styleState = value;
44
- if (value.font !== this.styleStateFontName) {
45
- if (value.font === '"Blackbaud Sans", Arial, sans-serif') {
46
- this.styleStateFontName = this.getFontName('Blackbaud Sans');
47
- }
48
- else {
49
- this.styleStateFontName = this.getFontName(value.font);
50
- }
51
- }
52
- }
53
- set disabled(value) {
54
- const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
55
- if (coercedValue !== this.disabled) {
56
- this._disabled = coercedValue;
57
- this.changeDetector.markForCheck();
58
- }
59
- }
60
- get disabled() {
61
- return this._disabled;
62
- }
63
- ngOnInit() {
64
- this.editorFocusStream.subscribe(() => {
65
- this.styleState = Object.assign(Object.assign({}, this._styleState), this.adapterService.getStyleState(this.editorId));
66
- this.closeDropdowns();
67
- this.changeDetector.detectChanges();
68
- });
69
- }
70
- execCommand(command, value = '') {
71
- this.adapterService.execCommand(this.editorId, {
72
- command: command,
73
- value: value,
74
- });
75
- this.styleState = Object.assign(Object.assign({}, this.styleState), this.adapterService.getStyleState(this.editorId));
76
- }
77
- toggleFontStyle(currentState, newState, command) {
78
- if (currentState !== newState) {
79
- this.execCommand(command);
80
- }
81
- // Force sky-checkbox to show changes on user's initial click.
82
- this.changeDetector.detectChanges();
83
- }
84
- link() {
85
- const priorSelection = this.adapterService.saveSelection(this.editorId);
86
- const currentLink = this.adapterService.getLink(this.editorId);
87
- const inputModal = this.modalService.open(SkyTextEditorUrlModalComponent, [
88
- {
89
- provide: SkyUrlModalContext,
90
- useValue: { urlResult: currentLink },
91
- },
92
- ]);
93
- inputModal.closed.subscribe((result) => {
94
- if (result.reason === 'save' && priorSelection) {
95
- if (currentLink) {
96
- const anchor = this.adapterService.getSelectedAnchorTag(this.editorId);
97
- this.adapterService.selectElement(this.editorId, anchor);
98
- }
99
- this.execCommand('unlink');
100
- if (result.data.target === UrlTarget.None) {
101
- // Current window
102
- this.execCommand('createLink', result.data.url);
103
- }
104
- else {
105
- // New Window
106
- const sText = this.adapterService.getCurrentSelection(this.editorId);
107
- this.execCommand('insertHTML', '<a href="' +
108
- result.data.url +
109
- '" rel="noopener noreferrer" target="_blank">' +
110
- sText +
111
- '</a>');
112
- }
113
- }
114
- });
115
- }
116
- unlink() {
117
- const currentSelectionRange = this.adapterService
118
- .getCurrentSelection(this.editorId)
119
- .getRangeAt(0);
120
- if (currentSelectionRange.toString().length <= 0) {
121
- const anchorTag = this.adapterService.getSelectedAnchorTag(this.editorId);
122
- this.adapterService.selectElement(this.editorId, anchorTag);
123
- }
124
- this.execCommand('unlink');
125
- }
126
- changeFontSize(size) {
127
- this.adapterService.setFontSize(this.editorId, size);
128
- this.styleState = Object.assign(Object.assign({}, this.styleState), this.adapterService.getStyleState(this.editorId));
129
- }
130
- onColorpickerColorChanged(color, isBackground = false) {
131
- this.execCommand(isBackground ? 'backColor' : 'foreColor', color.hex);
132
- }
133
- closeDropdowns() {
134
- const message = {
135
- type: SkyColorpickerMessageType.Close,
136
- };
137
- this.colorpickerStream.next(message);
138
- this.backColorpickerStream.next(message);
139
- this.fontPickerStream.next({ type: SkyDropdownMessageType.Close });
140
- this.fontSizeStream.next({ type: SkyDropdownMessageType.Close });
141
- }
142
- getFontName(fontName) {
143
- for (let i = 0; i < this.fontList.length; i++) {
144
- if (fontName.replace(/['"]+/g, '') === this.fontList[i].name) {
145
- return this.fontList[i].name;
146
- }
147
- }
148
- }
149
- }
150
- SkyTextEditorToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorToolbarComponent, deps: [{ token: i1.SkyTextEditorAdapterService }, { token: i0.ChangeDetectorRef }, { token: i2.SkyModalService }], target: i0.ɵɵFactoryTarget.Component });
151
- SkyTextEditorToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: { editorFocusStream: "editorFocusStream", editorId: "editorId", fontList: "fontList", fontSizeList: "fontSizeList", toolbarActions: "toolbarActions", styleState: "styleState", disabled: "disabled" }, ngImport: i0, template: "<sky-toolbar-item\n *ngFor=\"let action of toolbarActions\"\n class=\"sky-text-editor-toolbar-action\"\n [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n>\n <ng-container [ngSwitch]=\"action\">\n <ng-container *ngSwitchCase=\"'font-family'\">\n <sky-dropdown\n class=\"sky-text-editor-font-picker\"\n [disabled]=\"disabled\"\n [label]=\"'Font: ' + styleStateFontName\"\n [messageStream]=\"fontPickerStream\"\n >\n <sky-dropdown-button\n [ngStyle]=\"{\n 'font-family': styleState.font\n }\"\n >\n {{ styleStateFontName }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let fontModel of fontList\">\n <button\n type=\"button\"\n [ngStyle]=\"{\n 'font-family': fontModel.value\n }\"\n (click)=\"execCommand('fontname', fontModel.name)\"\n >\n {{ fontModel.name }}\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'font-size'\">\n <sky-dropdown\n class=\"sky-text-editor-font-size-picker\"\n [disabled]=\"disabled\"\n [label]=\"'Font size: ' + styleState.fontSize + 'px'\"\n [messageStream]=\"fontSizeStream\"\n >\n <sky-dropdown-button\n [ngStyle]=\"{\n 'font-family': styleState.fontSize\n }\"\n >\n {{ styleState.fontSize + 'px' }}\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let size of fontSizeList\">\n <button type=\"button\" (click)=\"changeFontSize(size)\">\n {{ size + 'px' }}\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </ng-container>\n <ng-container *ngSwitchCase=\"'font-style'\">\n <div class=\"sky-switch-icon-group sky-text-editor-font-style-picker\">\n <sky-checkbox\n icon=\"bold\"\n label=\"Bold\"\n title=\"Bold\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.boldState\"\n (ngModelChange)=\"\n toggleFontStyle(styleState.boldState, $event, 'bold')\n \"\n >\n </sky-checkbox>\n <sky-checkbox\n icon=\"italic\"\n label=\"Italicized\"\n title=\"Italicized\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.italicState\"\n (ngModelChange)=\"\n toggleFontStyle(styleState.italicState, $event, 'italic')\n \"\n >\n </sky-checkbox>\n <sky-checkbox\n icon=\"underline\"\n label=\"Underline\"\n title=\"Underline\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.underlineState\"\n (ngModelChange)=\"\n toggleFontStyle(styleState.underlineState, $event, 'underline')\n \"\n >\n </sky-checkbox>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'color'\">\n <div class=\"sky-text-editor-colorpicker-group\">\n <div class=\"sky-text-editor-colorpicker-container\">\n <sky-colorpicker\n class=\"sky-text-editor-font-color-picker\"\n label=\"Font color\"\n [messageStream]=\"colorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\n #colorPicker\n >\n <input\n outputFormat=\"hex\"\n type=\"text\"\n [allowTransparency]=\"false\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.fontColor\"\n [skyColorpickerInput]=\"colorPicker\"\n />\n </sky-colorpicker>\n </div>\n <div class=\"sky-text-editor-colorpicker-container\">\n <sky-colorpicker\n class=\"sky-text-editor-background-color-picker\"\n label=\"Background color\"\n [messageStream]=\"backColorpickerStream\"\n [showResetButton]=\"false\"\n (selectedColorChanged)=\"onColorpickerColorChanged($event, true)\"\n #backColorPicker\n >\n <input\n outputFormat=\"rgba\"\n type=\"text\"\n [allowTransparency]=\"true\"\n [disabled]=\"disabled\"\n [ngModel]=\"styleState.backColor\"\n [skyColorpickerInput]=\"backColorPicker\"\n />\n </sky-colorpicker>\n </div>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'list'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Bulleted list\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Bulleted list\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertUnorderedList')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ul\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"bullet-list-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Numbered list\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Numbered list\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertOrderedList')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ol\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"number-list-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'alignment'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Align left\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align left\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyLeft')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"align-left\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"align-left-text-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Align center\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align center\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyCenter')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"align-center\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"center-text-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n <button\n aria-label=\"Align right\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align right\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyRight')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"align-right\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"align-right-text-line\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'indentation'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Outdent\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Outdent\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('outdent')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"outdent\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"outdent-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n <button\n aria-label=\"Indent\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Indent\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('indent')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"indent\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"indent-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'undo-redo'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Undo\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Undo\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('undo')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"undo\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"undo-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n <button\n aria-label=\"Redo\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Redo\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('redo')\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"repeat\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"redo-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'link'\">\n <div class=\"sky-switch-icon-group\">\n <button\n aria-label=\"Link\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Link\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'icon-btn-active': styleState.linkState\n }\"\n (click)=\"link()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"link\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"link-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n <button\n aria-label=\"Unlink\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Unlink\"\n [disabled]=\"!styleState.linkState || disabled\"\n (click)=\"unlink()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"unlink\"> </sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"unlink-line\" iconType=\"skyux\">\n </sky-icon>\n </button>\n </div>\n </ng-container>\n </ng-container>\n</sky-toolbar-item>\n", styles: [".sky-text-editor-toolbar-action .sky-toolbar-item{margin-right:15px}.sky-text-editor-toolbar-action .sky-text-editor-font-picker ::ng-deep .sky-dropdown-button-content-container{width:140px;height:20px;text-align:left}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group{display:flex}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{position:relative;top:3px;margin:0 10px 0 0}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child{margin-right:0}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn{margin-left:0;margin-right:0;border-radius:0;border-right:none}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:first-of-type{border-top-left-radius:3px;border-bottom-left-radius:3px}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border-top-right-radius:3px;border-bottom-right-radius:3px;border-right:1px solid #cdcfd2}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:first-of-type,:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}:host-context(.sky-theme-modern) .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}.sky-theme-modern .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}.sky-theme-modern .sky-switch-icon-group .sky-btn:first-of-type,.sky-theme-modern .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}.sky-theme-modern .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}\n"], components: [{ type: i3.λ39, selector: "sky-toolbar-item" }, { type: i4.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4.λ2, selector: "sky-dropdown-button" }, { type: i4.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { type: i5.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i6.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "pickerButtonIconType", "label", "labelledBy", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { type: i7.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i8.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i8.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { type: i10.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
152
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorToolbarComponent, decorators: [{
153
- type: Component,
154
- args: [{
155
- selector: 'sky-text-editor-toolbar',
156
- templateUrl: './text-editor-toolbar.component.html',
157
- styleUrls: ['./text-editor-toolbar.component.scss'],
158
- changeDetection: ChangeDetectionStrategy.OnPush,
159
- }]
160
- }], ctorParameters: function () { return [{ type: i1.SkyTextEditorAdapterService }, { type: i0.ChangeDetectorRef }, { type: i2.SkyModalService }]; }, propDecorators: { editorFocusStream: [{
161
- type: Input
162
- }], editorId: [{
163
- type: Input
164
- }], fontList: [{
165
- type: Input
166
- }], fontSizeList: [{
167
- type: Input
168
- }], toolbarActions: [{
169
- type: Input
170
- }], styleState: [{
171
- type: Input
172
- }], disabled: [{
173
- type: Input
174
- }] } });
175
- //# sourceMappingURL=text-editor-toolbar.component.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"text-editor-toolbar.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/toolbar/text-editor-toolbar.component.ts","../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/toolbar/text-editor-toolbar.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Input,\n OnInit,\n} from '@angular/core';\nimport {\n SkyColorpickerMessage,\n SkyColorpickerMessageType,\n SkyColorpickerOutput,\n} from '@skyux/colorpicker';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\nimport { SkyDropdownMessage, SkyDropdownMessageType } from '@skyux/popovers';\n\nimport { Subject } from 'rxjs';\n\nimport { SkyFormsUtility } from '../../shared/forms-utility';\nimport { STYLE_STATE_DEFAULTS } from '../defaults/style-state-defaults';\nimport { SkyTextEditorAdapterService } from '../services/text-editor-adapter.service';\nimport { SkyTextEditorFont } from '../types/font-state';\nimport { SkyTextEditorStyleState } from '../types/style-state';\nimport { SkyTextEditorToolbarActionType } from '../types/toolbar-action-type';\nimport { SkyUrlModalContext } from '../url-modal/text-editor-url-modal-context';\nimport { SkyTextEditorUrlModalComponent } from '../url-modal/text-editor-url-modal.component';\nimport { UrlTarget } from '../url-modal/text-editor-url-target';\n\n/**\n * @internal\n */\n@Component({\n selector: 'sky-text-editor-toolbar',\n templateUrl: './text-editor-toolbar.component.html',\n styleUrls: ['./text-editor-toolbar.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyTextEditorToolbarComponent implements OnInit {\n @Input()\n public editorFocusStream = new Subject();\n\n @Input()\n public editorId: string;\n\n @Input()\n public fontList: SkyTextEditorFont[];\n\n @Input()\n public fontSizeList: number[];\n\n @Input()\n public toolbarActions: SkyTextEditorToolbarActionType[];\n\n @Input()\n public get styleState(): SkyTextEditorStyleState {\n return this._styleState;\n }\n public set styleState(value: SkyTextEditorStyleState) {\n this._styleState = value;\n if (value.font !== this.styleStateFontName) {\n if (value.font === '\"Blackbaud Sans\", Arial, sans-serif') {\n this.styleStateFontName = this.getFontName('Blackbaud Sans');\n } else {\n this.styleStateFontName = this.getFontName(value.font);\n }\n }\n }\n\n @Input()\n public set disabled(value: boolean) {\n const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);\n if (coercedValue !== this.disabled) {\n this._disabled = coercedValue;\n this.changeDetector.markForCheck();\n }\n }\n\n public get disabled(): boolean {\n return this._disabled;\n }\n\n public backColorpickerStream = new Subject<SkyColorpickerMessage>();\n\n public colorpickerStream = new Subject<SkyColorpickerMessage>();\n\n public fontPickerStream = new Subject<SkyDropdownMessage>();\n\n public fontSizeStream = new Subject<SkyDropdownMessage>();\n\n public styleStateFontName: string;\n\n private _disabled = false;\n\n private _styleState = STYLE_STATE_DEFAULTS;\n\n constructor(\n private adapterService: SkyTextEditorAdapterService,\n private changeDetector: ChangeDetectorRef,\n private modalService: SkyModalService\n ) {}\n\n public ngOnInit(): void {\n this.editorFocusStream.subscribe(() => {\n this.styleState = {\n ...this._styleState,\n ...(this.adapterService.getStyleState(this.editorId) as any),\n };\n this.closeDropdowns();\n this.changeDetector.detectChanges();\n });\n }\n\n public execCommand(command: string, value: any = ''): void {\n this.adapterService.execCommand(this.editorId, {\n command: command,\n value: value,\n });\n this.styleState = {\n ...this.styleState,\n ...this.adapterService.getStyleState(this.editorId),\n };\n }\n\n public toggleFontStyle(\n currentState: boolean,\n newState: boolean,\n command: string\n ): void {\n if (currentState !== newState) {\n this.execCommand(command);\n }\n\n // Force sky-checkbox to show changes on user's initial click.\n this.changeDetector.detectChanges();\n }\n\n public link(): void {\n const priorSelection = this.adapterService.saveSelection(this.editorId);\n const currentLink = this.adapterService.getLink(this.editorId);\n const inputModal = this.modalService.open(SkyTextEditorUrlModalComponent, [\n {\n provide: SkyUrlModalContext,\n useValue: { urlResult: currentLink },\n },\n ]);\n inputModal.closed.subscribe((result: SkyModalCloseArgs) => {\n if (result.reason === 'save' && priorSelection) {\n if (currentLink) {\n const anchor = this.adapterService.getSelectedAnchorTag(\n this.editorId\n );\n this.adapterService.selectElement(this.editorId, anchor);\n }\n\n this.execCommand('unlink');\n if (result.data.target === UrlTarget.None) {\n // Current window\n this.execCommand('createLink', result.data.url);\n } else {\n // New Window\n const sText = this.adapterService.getCurrentSelection(this.editorId);\n this.execCommand(\n 'insertHTML',\n '<a href=\"' +\n result.data.url +\n '\" rel=\"noopener noreferrer\" target=\"_blank\">' +\n sText +\n '</a>'\n );\n }\n }\n });\n }\n\n public unlink(): void {\n const currentSelectionRange = this.adapterService\n .getCurrentSelection(this.editorId)\n .getRangeAt(0);\n if (currentSelectionRange.toString().length <= 0) {\n const anchorTag = this.adapterService.getSelectedAnchorTag(this.editorId);\n this.adapterService.selectElement(this.editorId, anchorTag);\n }\n this.execCommand('unlink');\n }\n\n public changeFontSize(size: number): void {\n this.adapterService.setFontSize(this.editorId, size);\n this.styleState = {\n ...this.styleState,\n ...this.adapterService.getStyleState(this.editorId),\n };\n }\n\n public onColorpickerColorChanged(\n color: SkyColorpickerOutput,\n isBackground = false\n ): void {\n this.execCommand(isBackground ? 'backColor' : 'foreColor', color.hex);\n }\n\n private closeDropdowns(): void {\n const message: SkyColorpickerMessage = {\n type: SkyColorpickerMessageType.Close,\n };\n this.colorpickerStream.next(message);\n this.backColorpickerStream.next(message);\n this.fontPickerStream.next({ type: SkyDropdownMessageType.Close });\n this.fontSizeStream.next({ type: SkyDropdownMessageType.Close });\n }\n\n private getFontName(fontName: string): string {\n for (let i = 0; i < this.fontList.length; i++) {\n if (fontName.replace(/['\"]+/g, '') === this.fontList[i].name) {\n return this.fontList[i].name;\n }\n }\n }\n}\n","<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"]}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=editor-command.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"editor-command.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/types/editor-command.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * @internal\n */\nexport interface EditorCommand {\n command: string;\n value?: any;\n}\n"]}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=editor-setting.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"editor-setting.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/types/editor-setting.ts"],"names":[],"mappings":"","sourcesContent":["import { Subject } from 'rxjs';\n\n/**\n * @internal\n */\nexport interface EditorSetting {\n blurListener: () => void;\n\n blurObservable: Subject<unknown>;\n\n clickListener: () => void;\n\n clickObservable: Subject<unknown>;\n\n commandChangeObservable: Subject<unknown>;\n\n iframeElementRef: HTMLIFrameElement;\n\n inputListener: () => void;\n\n inputObservable: Subject<unknown>;\n\n pasteListener: (e: ClipboardEvent) => void;\n\n selectionChangeObservable: Subject<unknown>;\n\n selectionListener: () => void;\n}\n"]}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=font-state.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"font-state.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/types/font-state.ts"],"names":[],"mappings":"","sourcesContent":["export interface SkyTextEditorFont {\n /**\n * Specifies the display name of the font.\n */\n name: string;\n\n /**\n * Specifies the CSS `font-family` value for the font.\n */\n value: string;\n}\n"]}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=menu-type.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"menu-type.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/types/menu-type.ts"],"names":[],"mappings":"","sourcesContent":["export type SkyTextEditorMenuType = 'edit' | 'format' | 'merge-field';\n"]}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=style-state.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"style-state.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/types/style-state.ts"],"names":[],"mappings":"","sourcesContent":["export interface SkyTextEditorStyleState {\n /**\n * Specifies the background color. Accepts any CSS color value.\n */\n backColor: string;\n\n /**\n * Specifies the font color. Accepts any CSS color value.\n */\n fontColor: string;\n\n /**\n * Specifies the font size in pixels.\n */\n fontSize: number;\n\n /**\n * Specifies the font family. Available values: `\"Blackbaud Sans\"`,\n * `\"Arial\"`, `\"sans-serif\"`, `\"Arial Black\"`, `\"Courier New\"`, and `\"Times New Roman\"`.\n */\n font: string;\n\n /**\n * Indicates whether to make text bold.\n */\n boldState: boolean;\n\n /**\n * Indicates whether to italicize text.\n */\n italicState: boolean;\n\n /**\n * Indicates whether to underline text.\n */\n underlineState: boolean;\n\n /**\n * Indicates whether to format text as a link.\n */\n linkState: boolean;\n}\n"]}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=text-editor-merge-field.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"text-editor-merge-field.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/types/text-editor-merge-field.ts"],"names":[],"mappings":"","sourcesContent":["export interface SkyTextEditorMergeField {\n /**\n * Specifies an identifier for the merge field.\n */\n id: string;\n\n /**\n * Specifies display text for the merge field. If it is more than 18 characters, the component truncates to 15 characters.\n */\n name: string;\n\n /**\n * Specifies the `src` attribute for a preview image to represent the merge field\n * in the text editor. By default, the `name` value appears in a blue rectangle.\n */\n previewImageUrl?: string;\n}\n"]}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=toolbar-action-type.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"toolbar-action-type.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/types/toolbar-action-type.ts"],"names":[],"mappings":"","sourcesContent":["export type SkyTextEditorToolbarActionType =\n | 'font-family'\n | 'font-size'\n | 'font-style'\n | 'color'\n | 'list'\n | 'alignment'\n | 'indentation'\n | 'undo-redo'\n | 'link';\n"]}
@@ -1,6 +0,0 @@
1
- /**
2
- * @internal
3
- */
4
- export class SkyUrlModalContext {
5
- }
6
- //# sourceMappingURL=text-editor-url-modal-context.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"text-editor-url-modal-context.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/url-modal/text-editor-url-modal-context.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,OAAO,kBAAkB;CAE9B","sourcesContent":["import { UrlModalResult } from './text-editor-url-modal-result';\n\n/**\n * @internal\n */\nexport class SkyUrlModalContext {\n public urlResult: UrlModalResult;\n}\n"]}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=text-editor-url-modal-result.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"text-editor-url-modal-result.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/url-modal/text-editor-url-modal-result.ts"],"names":[],"mappings":"","sourcesContent":["import { UrlTarget } from './text-editor-url-target';\n\n/**\n * @internal\n */\nexport interface UrlModalResult {\n url: string;\n target: UrlTarget;\n}\n"]}
@@ -1,121 +0,0 @@
1
- import { Component } from '@angular/core';
2
- import { SkyModalInstance } from '@skyux/modals';
3
- import { SkyValidation } from '@skyux/validation';
4
- import { SkyUrlModalContext } from './text-editor-url-modal-context';
5
- import { UrlTarget } from './text-editor-url-target';
6
- import * as i0 from "@angular/core";
7
- import * as i1 from "@skyux/modals";
8
- import * as i2 from "./text-editor-url-modal-context";
9
- import * as i3 from "@skyux/tabs";
10
- import * as i4 from "@skyux/forms";
11
- import * as i5 from "@angular/forms";
12
- import * as i6 from "@skyux/core";
13
- import * as i7 from "@skyux/i18n";
14
- const emailKey = 'mailto:';
15
- const queryStringParamKey = '?Subject=';
16
- /**
17
- * @internal
18
- */
19
- export class SkyTextEditorUrlModalComponent {
20
- constructor(modalInstance, modalContext) {
21
- this.modalInstance = modalInstance;
22
- this.emailAddressValid = false;
23
- this.subject = '';
24
- this.target = 0;
25
- this.valid = false;
26
- this._activeTab = 0;
27
- this._emailAddress = '';
28
- this._url = 'https://';
29
- if (modalContext.urlResult) {
30
- if (modalContext.urlResult.url.startsWith(emailKey)) {
31
- this.emailAddress = modalContext.urlResult.url.replace(emailKey, '');
32
- let queryStringIndex = this.emailAddress.indexOf(queryStringParamKey);
33
- queryStringIndex =
34
- queryStringIndex > -1
35
- ? queryStringIndex
36
- : this.emailAddress.indexOf(queryStringParamKey.toLowerCase());
37
- /* istanbul ignore else */
38
- if (queryStringIndex > -1) {
39
- this.subject = decodeURI(this.emailAddress).slice(queryStringIndex + queryStringParamKey.length);
40
- this.emailAddress = this.emailAddress.slice(0, queryStringIndex);
41
- }
42
- // Set active tab to email
43
- this.activeTab = 1;
44
- }
45
- else {
46
- (this.url = modalContext.urlResult.url),
47
- (this.target = modalContext.urlResult.target);
48
- // set active tab to web page
49
- this.activeTab = 0;
50
- }
51
- }
52
- }
53
- set activeTab(value) {
54
- this._activeTab = value;
55
- this.valid = this.isValid();
56
- }
57
- get activeTab() {
58
- return this._activeTab;
59
- }
60
- set emailAddress(value) {
61
- this._emailAddress = value;
62
- this.valid = this.isValid();
63
- }
64
- get emailAddress() {
65
- return this._emailAddress;
66
- }
67
- set url(value) {
68
- this._url = value;
69
- this.valid = this.isValid();
70
- }
71
- get url() {
72
- return this._url;
73
- }
74
- activeTabChanged(value) {
75
- this.activeTab = value;
76
- }
77
- save() {
78
- /* istanbul ignore else */
79
- if (this.isValid()) {
80
- if (this.activeTab === 0) {
81
- this.modalInstance.save({
82
- url: this.url,
83
- target: this.target
84
- ? parseInt(this.target, undefined)
85
- : UrlTarget.None,
86
- });
87
- }
88
- else {
89
- this.modalInstance.save({
90
- url: this.getEmailUrl(),
91
- target: UrlTarget.None,
92
- });
93
- }
94
- }
95
- }
96
- cancel() {
97
- this.modalInstance.cancel();
98
- }
99
- getEmailUrl() {
100
- return (emailKey +
101
- this.emailAddress +
102
- (this.subject ? '?Subject=' + encodeURI(this.subject) : ''));
103
- }
104
- isValid() {
105
- if (this.activeTab === 0) {
106
- return !!this.url && SkyValidation.isUrl(this.url);
107
- }
108
- return !!this.emailAddress && SkyValidation.isEmail(this.emailAddress);
109
- }
110
- }
111
- SkyTextEditorUrlModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorUrlModalComponent, deps: [{ token: i1.SkyModalInstance }, { token: i2.SkyUrlModalContext }], target: i0.ɵɵFactoryTarget.Component });
112
- SkyTextEditorUrlModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTextEditorUrlModalComponent, selector: "sky-text-editor-url-modal", ngImport: i0, template: "<sky-modal>\n <sky-modal-header>\n {{ 'skyux_text_editor_url_modal_header_label' | skyLibResources }}\n </sky-modal-header>\n <sky-modal-content>\n <sky-tabset\n data-sky-id=\"test-tabset\"\n [active]=\"activeTab\"\n (activeChange)=\"activeTabChanged($event)\"\n >\n <sky-tab tabHeading=\"Web page\">\n <div class=\"sky-form-group sky-text-editor-url-modal-first-field\">\n <sky-input-box>\n <label\n class=\"sky-control-label sky-control-label-required\"\n [for]=\"urlInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_url_label' | skyLibResources }}\n </label>\n <input\n class=\"sky-form-control\"\n type=\"text\"\n [(ngModel)]=\"url\"\n skyId\n #urlInput=\"skyId\"\n />\n </sky-input-box>\n </div>\n <sky-input-box class=\"sky-form-group\">\n <label class=\"sky-control-label\" [for]=\"targetInput.id\">\n {{ 'skyux_text_editor_url_modal_open_label' | skyLibResources }}\n </label>\n <select\n class=\"sky-form-control\"\n [(ngModel)]=\"target\"\n skyId\n #targetInput=\"skyId\"\n >\n <option value=\"0\">\n {{\n 'skyux_text_editor_url_modal_current_option_label'\n | skyLibResources\n }}\n </option>\n <option value=\"1\">\n {{\n 'skyux_text_editor_url_modal_new_option_label' | skyLibResources\n }}\n </option>\n </select>\n </sky-input-box>\n </sky-tab>\n <sky-tab tabHeading=\"Email address\">\n <div class=\"sky-form-group first-field\">\n <sky-input-box>\n <label\n class=\"sky-control-label sky-control-label-required\"\n [for]=\"emailAddressInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_email_label' | skyLibResources }}\n </label>\n <input\n class=\"sky-form-control\"\n type=\"text\"\n [(ngModel)]=\"emailAddress\"\n skyId\n #emailAddressInput=\"skyId\"\n />\n </sky-input-box>\n </div>\n <sky-input-box class=\"sky-form-group\">\n <label class=\"sky-control-label\" [for]=\"subjectInput.id\">\n {{ 'skyux_text_editor_url_modal_subject_label' | skyLibResources }}\n </label>\n <input\n class=\"sky-form-control\"\n type=\"text\"\n [(ngModel)]=\"subject\"\n skyId\n #subjectInput=\"skyId\"\n />\n </sky-input-box>\n </sky-tab>\n </sky-tabset>\n </sky-modal-content>\n <sky-modal-footer>\n <button\n type=\"submit\"\n class=\"sky-btn sky-btn-primary\"\n [disabled]=\"!valid\"\n (click)=\"save()\"\n >\n {{ 'skyux_text_editor_url_modal_save_button_label' | skyLibResources }}\n </button>\n <button type=\"button\" class=\"sky-btn sky-btn-link\" (click)=\"cancel()\">\n {{ 'skyux_text_editor_url_modal_cancel_button_label' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-editor-url-modal-first-field{margin-top:15px}\n"], components: [{ type: i1.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i1.λ4, selector: "sky-modal-header" }, { type: i1.λ2, selector: "sky-modal-content" }, { type: i3.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { type: i3.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndex"], outputs: ["close"] }, { type: i4.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: i1.λ3, selector: "sky-modal-footer" }], directives: [{ type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "skyLibResources": i7.SkyLibResourcesPipe } });
113
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorUrlModalComponent, decorators: [{
114
- type: Component,
115
- args: [{
116
- selector: 'sky-text-editor-url-modal',
117
- templateUrl: './text-editor-url-modal.component.html',
118
- styleUrls: ['./text-editor-url-modal.component.scss'],
119
- }]
120
- }], ctorParameters: function () { return [{ type: i1.SkyModalInstance }, { type: i2.SkyUrlModalContext }]; } });
121
- //# sourceMappingURL=text-editor-url-modal.component.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"text-editor-url-modal.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/url-modal/text-editor-url-modal.component.ts","../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/url-modal/text-editor-url-modal.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component } from '@angular/core';\nimport { SkyModalInstance } from '@skyux/modals';\nimport { SkyValidation } from '@skyux/validation';\n\nimport { SkyUrlModalContext } from './text-editor-url-modal-context';\nimport { UrlModalResult } from './text-editor-url-modal-result';\nimport { UrlTarget } from './text-editor-url-target';\n\nconst emailKey = 'mailto:';\nconst queryStringParamKey = '?Subject=';\n\n/**\n * @internal\n */\n@Component({\n selector: 'sky-text-editor-url-modal',\n templateUrl: './text-editor-url-modal.component.html',\n styleUrls: ['./text-editor-url-modal.component.scss'],\n})\nexport class SkyTextEditorUrlModalComponent {\n public set activeTab(value: number) {\n this._activeTab = value;\n this.valid = this.isValid();\n }\n public get activeTab(): number {\n return this._activeTab;\n }\n public set emailAddress(value: string) {\n this._emailAddress = value;\n this.valid = this.isValid();\n }\n public get emailAddress(): string {\n return this._emailAddress;\n }\n\n public set url(value: string) {\n this._url = value;\n this.valid = this.isValid();\n }\n public get url(): string {\n return this._url;\n }\n\n public emailAddressValid = false;\n\n public subject = '';\n\n public target = 0;\n\n public valid = false;\n\n public _activeTab = 0;\n\n private _emailAddress = '';\n\n private _url = 'https://';\n\n constructor(\n private readonly modalInstance: SkyModalInstance,\n modalContext: SkyUrlModalContext\n ) {\n if (modalContext.urlResult) {\n if (modalContext.urlResult.url.startsWith(emailKey)) {\n this.emailAddress = modalContext.urlResult.url.replace(emailKey, '');\n\n let queryStringIndex = this.emailAddress.indexOf(queryStringParamKey);\n queryStringIndex =\n queryStringIndex > -1\n ? queryStringIndex\n : this.emailAddress.indexOf(queryStringParamKey.toLowerCase());\n\n /* istanbul ignore else */\n if (queryStringIndex > -1) {\n this.subject = decodeURI(this.emailAddress).slice(\n queryStringIndex + queryStringParamKey.length\n );\n this.emailAddress = this.emailAddress.slice(0, queryStringIndex);\n }\n\n // Set active tab to email\n this.activeTab = 1;\n } else {\n (this.url = modalContext.urlResult.url),\n (this.target = modalContext.urlResult.target as any);\n\n // set active tab to web page\n this.activeTab = 0;\n }\n }\n }\n\n public activeTabChanged(value: number): void {\n this.activeTab = value;\n }\n\n public save(): void {\n /* istanbul ignore else */\n if (this.isValid()) {\n if (this.activeTab === 0) {\n this.modalInstance.save({\n url: this.url,\n target: this.target\n ? parseInt(this.target as any, undefined)\n : UrlTarget.None,\n } as UrlModalResult);\n } else {\n this.modalInstance.save({\n url: this.getEmailUrl(),\n target: UrlTarget.None,\n } as UrlModalResult);\n }\n }\n }\n\n public cancel(): void {\n this.modalInstance.cancel();\n }\n\n private getEmailUrl(): string {\n return (\n emailKey +\n this.emailAddress +\n (this.subject ? '?Subject=' + encodeURI(this.subject) : '')\n );\n }\n\n private isValid(): boolean {\n if (this.activeTab === 0) {\n return !!this.url && SkyValidation.isUrl(this.url);\n }\n return !!this.emailAddress && SkyValidation.isEmail(this.emailAddress);\n }\n}\n","<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"]}
@@ -1,9 +0,0 @@
1
- /**
2
- * @internal
3
- */
4
- export var UrlTarget;
5
- (function (UrlTarget) {
6
- UrlTarget[UrlTarget["None"] = 0] = "None";
7
- UrlTarget[UrlTarget["NewWindow"] = 1] = "NewWindow";
8
- })(UrlTarget || (UrlTarget = {}));
9
- //# sourceMappingURL=text-editor-url-target.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"text-editor-url-target.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/url-modal/text-editor-url-target.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAN,IAAY,SAGX;AAHD,WAAY,SAAS;IACnB,yCAAQ,CAAA;IACR,mDAAa,CAAA;AACf,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB","sourcesContent":["/**\n * @internal\n */\nexport enum UrlTarget {\n None = 0,\n NewWindow = 1,\n}\n"]}
@@ -1,5 +0,0 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- export * from './index';
5
- //# sourceMappingURL=skyux-text-editor.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"skyux-text-editor.js","sourceRoot":"","sources":["../../../../../libs/components/text-editor/src/skyux-text-editor.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"]}