@skyux/text-editor 9.9.0 → 9.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import * as i1$1 from '@angular/common';
2
- import { CommonModule } from '@angular/common';
2
+ import { CommonModule, NgIf } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
4
  import { Injectable, Component, Input, NgModule, inject, ChangeDetectorRef, ChangeDetectionStrategy, NgZone, TemplateRef, ViewEncapsulation, ViewChild, HostBinding } from '@angular/core';
5
5
  import * as i1 from '@angular/platform-browser';
@@ -177,6 +177,8 @@ const FONT_SIZE_LIST_DEFAULTS = [
177
177
  6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 36, 48,
178
178
  ];
179
179
 
180
+ const LINK_WINDOW_OPTIONS_DEFAULTS = ['new', 'existing'];
181
+
180
182
  /**
181
183
  * @internal
182
184
  */
@@ -272,6 +274,9 @@ const RESOURCES = {
272
274
  skyux_text_editor_url_modal_current_option_label: {
273
275
  message: 'Current window',
274
276
  },
277
+ skyux_text_editor_url_modal_open_in_new_window_label: {
278
+ message: 'This link will open in a new window.',
279
+ },
275
280
  skyux_text_editor_url_modal_new_option_label: { message: 'New window' },
276
281
  skyux_text_editor_url_modal_email_label: { message: 'Email address' },
277
282
  skyux_text_editor_url_modal_subject_label: { message: 'Subject line' },
@@ -1104,6 +1109,8 @@ class SkyTextEditorUrlModalComponent {
1104
1109
  #modalInstance;
1105
1110
  constructor() {
1106
1111
  this.emailAddressValid = false;
1112
+ this.allowAllOpenLinkOptions = true;
1113
+ this.openLinksInNewWindowOnly = false;
1107
1114
  this.subject = '';
1108
1115
  this.target = 0;
1109
1116
  this.valid = false;
@@ -1112,6 +1119,17 @@ class SkyTextEditorUrlModalComponent {
1112
1119
  this.#_url = 'https://';
1113
1120
  this.#modalContext = inject(SkyUrlModalContext);
1114
1121
  this.#modalInstance = inject(SkyModalInstance);
1122
+ const linkWindowOptions = this.#modalContext.linkWindowOptions;
1123
+ if (linkWindowOptions?.length === 1) {
1124
+ this.allowAllOpenLinkOptions = false;
1125
+ if (linkWindowOptions[0] === 'new') {
1126
+ this.openLinksInNewWindowOnly = true;
1127
+ this.target = 1;
1128
+ }
1129
+ else {
1130
+ this.target = 0;
1131
+ }
1132
+ }
1115
1133
  if (this.#modalContext.urlResult) {
1116
1134
  if (this.#modalContext.urlResult.url.startsWith(emailKey)) {
1117
1135
  this.emailAddress = this.#modalContext.urlResult.url.replace(emailKey, '');
@@ -1173,7 +1191,7 @@ class SkyTextEditorUrlModalComponent {
1173
1191
  return !!this.emailAddress && SkyValidation.isEmail(this.emailAddress);
1174
1192
  }
1175
1193
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkyTextEditorUrlModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1176
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkyTextEditorUrlModalComponent, isStandalone: true, selector: "sky-text-editor-url-modal", ngImport: i0, template: "<sky-modal>\n <sky-modal-header>\n {{ 'skyux_text_editor_url_modal_header_label' | skyLibResources }}\n </sky-modal-header>\n <sky-modal-content>\n <sky-tabset\n data-sky-id=\"test-tabset\"\n [active]=\"activeTab\"\n (activeChange)=\"activeTabChanged($event)\"\n >\n <sky-tab tabHeading=\"Web page\">\n <div class=\"sky-form-group sky-text-editor-url-modal-first-field\">\n <sky-input-box stacked=\"true\">\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 stacked=\"true\" class=\"sky-form-group\">\n <label class=\"sky-control-label\" [for]=\"targetInput.id\">\n {{ 'skyux_text_editor_url_modal_open_label' | skyLibResources }}\n </label>\n <select\n 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 stacked=\"true\">\n <label\n class=\"sky-control-label sky-control-label-required\"\n [for]=\"emailAddressInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_email_label' | skyLibResources }}\n </label>\n <input\n 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 stacked=\"true\" class=\"sky-form-group\">\n <label class=\"sky-control-label\" [for]=\"subjectInput.id\">\n {{ 'skyux_text_editor_url_modal_subject_label' | skyLibResources }}\n </label>\n <input\n 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i2$2.λ5, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i2$2.λ2, selector: "sky-modal-content" }, { kind: "component", type: i2$2.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i2$2.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i4$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "hintText"] }, { kind: "ngmodule", type: SkyTabsModule }, { kind: "component", type: i5.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndex", "layout"], outputs: ["close"] }, { kind: "component", type: i5.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "ngmodule", type: SkyTextEditorResourcesModule }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
1194
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkyTextEditorUrlModalComponent, isStandalone: true, selector: "sky-text-editor-url-modal", ngImport: i0, template: "<sky-modal>\n <sky-modal-header>\n {{ 'skyux_text_editor_url_modal_header_label' | skyLibResources }}\n </sky-modal-header>\n <sky-modal-content>\n <sky-tabset\n data-sky-id=\"test-tabset\"\n [active]=\"activeTab\"\n (activeChange)=\"activeTabChanged($event)\"\n >\n <sky-tab tabHeading=\"Web page\">\n <div class=\"sky-form-group sky-text-editor-url-modal-first-field\">\n <sky-input-box\n class=\"sky-text-editor-url-input\"\n stacked=\"true\"\n [hintText]=\"\n openLinksInNewWindowOnly\n ? ('skyux_text_editor_url_modal_open_in_new_window_label'\n | skyLibResources)\n : undefined\n \"\n >\n <label\n class=\"sky-control-label sky-control-label-required\"\n [for]=\"urlInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_url_label' | skyLibResources }}\n </label>\n <input\n 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\n *ngIf=\"allowAllOpenLinkOptions\"\n stacked=\"true\"\n class=\"sky-form-group\"\n >\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 stacked=\"true\">\n <label\n class=\"sky-control-label sky-control-label-required\"\n [for]=\"emailAddressInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_email_label' | skyLibResources }}\n </label>\n <input\n 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 stacked=\"true\" class=\"sky-form-group\">\n <label class=\"sky-control-label\" [for]=\"subjectInput.id\">\n {{ 'skyux_text_editor_url_modal_subject_label' | skyLibResources }}\n </label>\n <input\n 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i2$2.λ5, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i2$2.λ2, selector: "sky-modal-content" }, { kind: "component", type: i2$2.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i2$2.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i4$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "hintText"] }, { kind: "ngmodule", type: SkyTabsModule }, { kind: "component", type: i5.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndex", "layout"], outputs: ["close"] }, { kind: "component", type: i5.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "ngmodule", type: SkyTextEditorResourcesModule }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
1177
1195
  }
1178
1196
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkyTextEditorUrlModalComponent, decorators: [{
1179
1197
  type: Component,
@@ -1184,7 +1202,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
1184
1202
  SkyInputBoxModule,
1185
1203
  SkyTabsModule,
1186
1204
  SkyTextEditorResourcesModule,
1187
- ], 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 stacked=\"true\">\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 stacked=\"true\" class=\"sky-form-group\">\n <label class=\"sky-control-label\" [for]=\"targetInput.id\">\n {{ 'skyux_text_editor_url_modal_open_label' | skyLibResources }}\n </label>\n <select\n 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 stacked=\"true\">\n <label\n class=\"sky-control-label sky-control-label-required\"\n [for]=\"emailAddressInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_email_label' | skyLibResources }}\n </label>\n <input\n 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 stacked=\"true\" class=\"sky-form-group\">\n <label class=\"sky-control-label\" [for]=\"subjectInput.id\">\n {{ 'skyux_text_editor_url_modal_subject_label' | skyLibResources }}\n </label>\n <input\n 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"] }]
1205
+ NgIf,
1206
+ ], template: "<sky-modal>\n <sky-modal-header>\n {{ 'skyux_text_editor_url_modal_header_label' | skyLibResources }}\n </sky-modal-header>\n <sky-modal-content>\n <sky-tabset\n data-sky-id=\"test-tabset\"\n [active]=\"activeTab\"\n (activeChange)=\"activeTabChanged($event)\"\n >\n <sky-tab tabHeading=\"Web page\">\n <div class=\"sky-form-group sky-text-editor-url-modal-first-field\">\n <sky-input-box\n class=\"sky-text-editor-url-input\"\n stacked=\"true\"\n [hintText]=\"\n openLinksInNewWindowOnly\n ? ('skyux_text_editor_url_modal_open_in_new_window_label'\n | skyLibResources)\n : undefined\n \"\n >\n <label\n class=\"sky-control-label sky-control-label-required\"\n [for]=\"urlInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_url_label' | skyLibResources }}\n </label>\n <input\n 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\n *ngIf=\"allowAllOpenLinkOptions\"\n stacked=\"true\"\n class=\"sky-form-group\"\n >\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 stacked=\"true\">\n <label\n class=\"sky-control-label sky-control-label-required\"\n [for]=\"emailAddressInput.id\"\n >\n {{ 'skyux_text_editor_url_modal_email_label' | skyLibResources }}\n </label>\n <input\n 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 stacked=\"true\" class=\"sky-form-group\">\n <label class=\"sky-control-label\" [for]=\"subjectInput.id\">\n {{ 'skyux_text_editor_url_modal_subject_label' | skyLibResources }}\n </label>\n <input\n 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"] }]
1188
1207
  }], ctorParameters: function () { return []; } });
1189
1208
 
1190
1209
  /**
@@ -1195,6 +1214,7 @@ class SkyTextEditorToolbarComponent {
1195
1214
  this.fontList = [];
1196
1215
  this.fontSizeList = [];
1197
1216
  this.toolbarActions = [];
1217
+ this.linkWindowOptions = [];
1198
1218
  this.backColorpickerStream = new Subject();
1199
1219
  this.colorpickerStream = new Subject();
1200
1220
  this.fontPickerStream = new Subject();
@@ -1272,7 +1292,12 @@ class SkyTextEditorToolbarComponent {
1272
1292
  const inputModal = this.#modalService.open(SkyTextEditorUrlModalComponent, [
1273
1293
  {
1274
1294
  provide: SkyUrlModalContext,
1275
- useValue: { urlResult: currentLink },
1295
+ useFactory: () => {
1296
+ const context = new SkyUrlModalContext();
1297
+ context.urlResult = currentLink;
1298
+ context.linkWindowOptions = this.linkWindowOptions;
1299
+ return context;
1300
+ },
1276
1301
  },
1277
1302
  ]);
1278
1303
  inputModal.closed.subscribe((result) => {
@@ -1354,7 +1379,7 @@ class SkyTextEditorToolbarComponent {
1354
1379
  return undefined;
1355
1380
  }
1356
1381
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkyTextEditorToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1357
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkyTextEditorToolbarComponent, isStandalone: true, 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 pickerButtonIcon=\"highlighter\"\n pickerButtonIconType=\"skyux\"\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 pickerButtonIcon=\"text-color\"\n pickerButtonIconType=\"skyux\"\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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertUnorderedList')\"\n >\n <sky-icon icon=\"bullet-list\" />\n </button>\n <button\n aria-label=\"Numbered list\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Numbered list\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertOrderedList')\"\n >\n <sky-icon icon=\"number-list\" />\n </button>\n </div>\n </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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyLeft')\"\n >\n <sky-icon icon=\"align-left-text\" />\n </button>\n <button\n aria-label=\"Align center\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align center\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyCenter')\"\n >\n <sky-icon icon=\"center-text\" />\n </button>\n <button\n aria-label=\"Align right\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align right\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyRight')\"\n >\n <sky-icon icon=\"align-right-text\" />\n </button>\n </div>\n </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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('outdent')\"\n >\n <sky-icon icon=\"outdent\" />\n </button>\n <button\n aria-label=\"Indent\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Indent\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('indent')\"\n >\n <sky-icon icon=\"indent\" />\n </button>\n </div>\n </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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('undo')\"\n >\n <sky-icon icon=\"undo\" />\n </button>\n <button\n aria-label=\"Redo\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Redo\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('redo')\"\n >\n <sky-icon icon=\"redo\" />\n </button>\n </div>\n </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 type=\"button\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'icon-btn-active': styleState.linkState\n }\"\n (click)=\"link()\"\n >\n <sky-icon icon=\"link\" />\n </button>\n <button\n aria-label=\"Unlink\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Unlink\"\n type=\"button\"\n [disabled]=\"!styleState.linkState || disabled\"\n (click)=\"unlink()\"\n >\n <sky-icon icon=\"unlink\" />\n </button>\n </div>\n </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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i4$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyColorpickerModule }, { kind: "component", type: i4$2.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "pickerButtonIconType", "label", "labelledBy", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i4$2.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i2.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i2$1.λ39, selector: "sky-toolbar-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1382
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkyTextEditorToolbarComponent, isStandalone: true, selector: "sky-text-editor-toolbar", inputs: { editorFocusStream: "editorFocusStream", fontList: "fontList", fontSizeList: "fontSizeList", toolbarActions: "toolbarActions", linkWindowOptions: "linkWindowOptions", 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 pickerButtonIcon=\"highlighter\"\n pickerButtonIconType=\"skyux\"\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 pickerButtonIcon=\"text-color\"\n pickerButtonIconType=\"skyux\"\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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertUnorderedList')\"\n >\n <sky-icon icon=\"bullet-list\" />\n </button>\n <button\n aria-label=\"Numbered list\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Numbered list\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('insertOrderedList')\"\n >\n <sky-icon icon=\"number-list\" />\n </button>\n </div>\n </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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyLeft')\"\n >\n <sky-icon icon=\"align-left-text\" />\n </button>\n <button\n aria-label=\"Align center\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align center\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyCenter')\"\n >\n <sky-icon icon=\"center-text\" />\n </button>\n <button\n aria-label=\"Align right\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Align right\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('justifyRight')\"\n >\n <sky-icon icon=\"align-right-text\" />\n </button>\n </div>\n </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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('outdent')\"\n >\n <sky-icon icon=\"outdent\" />\n </button>\n <button\n aria-label=\"Indent\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Indent\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('indent')\"\n >\n <sky-icon icon=\"indent\" />\n </button>\n </div>\n </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 type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('undo')\"\n >\n <sky-icon icon=\"undo\" />\n </button>\n <button\n aria-label=\"Redo\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Redo\"\n type=\"button\"\n [disabled]=\"disabled\"\n (click)=\"execCommand('redo')\"\n >\n <sky-icon icon=\"redo\" />\n </button>\n </div>\n </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 type=\"button\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'icon-btn-active': styleState.linkState\n }\"\n (click)=\"link()\"\n >\n <sky-icon icon=\"link\" />\n </button>\n <button\n aria-label=\"Unlink\"\n class=\"sky-btn sky-btn-default sky-btn-icon\"\n title=\"Unlink\"\n type=\"button\"\n [disabled]=\"!styleState.linkState || disabled\"\n (click)=\"unlink()\"\n >\n <sky-icon icon=\"unlink\" />\n </button>\n </div>\n </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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i4$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyColorpickerModule }, { kind: "component", type: i4$2.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "pickerButtonIconType", "label", "labelledBy", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i4$2.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i2.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i2$1.λ39, selector: "sky-toolbar-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1358
1383
  }
1359
1384
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkyTextEditorToolbarComponent, decorators: [{
1360
1385
  type: Component,
@@ -1376,6 +1401,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
1376
1401
  type: Input
1377
1402
  }], toolbarActions: [{
1378
1403
  type: Input
1404
+ }], linkWindowOptions: [{
1405
+ type: Input
1379
1406
  }], styleState: [{
1380
1407
  type: Input
1381
1408
  }], disabled: [{
@@ -1497,7 +1524,7 @@ class SkyTextEditorComponent {
1497
1524
  return this.#_placeholder;
1498
1525
  }
1499
1526
  /**
1500
- * The actions to include in the toolbar and determines their order.
1527
+ * The actions to include in the toolbar in the specified order.
1501
1528
  * @default [ 'font-family', 'font-size', 'font-style', 'color', 'list', 'link ]
1502
1529
  */
1503
1530
  set toolbarActions(value) {
@@ -1506,6 +1533,16 @@ class SkyTextEditorComponent {
1506
1533
  get toolbarActions() {
1507
1534
  return this.#_toolbarActions;
1508
1535
  }
1536
+ /**
1537
+ * The target window options for adding a hyperlink.
1538
+ * @default [ 'new', 'existing' ]
1539
+ */
1540
+ set linkWindowOptions(value) {
1541
+ this.#_linkWindowOptions = value ?? LINK_WINDOW_OPTIONS_DEFAULTS;
1542
+ }
1543
+ get linkWindowOptions() {
1544
+ return this.#_linkWindowOptions;
1545
+ }
1509
1546
  /**
1510
1547
  * The internal value of the control.
1511
1548
  */
@@ -1559,6 +1596,7 @@ class SkyTextEditorComponent {
1559
1596
  #_mergeFields;
1560
1597
  #_menus;
1561
1598
  #_toolbarActions;
1599
+ #_linkWindowOptions;
1562
1600
  #_disabled;
1563
1601
  #_initialStyleState;
1564
1602
  #_placeholder;
@@ -1588,6 +1626,7 @@ class SkyTextEditorComponent {
1588
1626
  this.#_mergeFields = [];
1589
1627
  this.#_menus = MENU_DEFAULTS;
1590
1628
  this.#_toolbarActions = TOOLBAR_ACTION_DEFAULTS;
1629
+ this.#_linkWindowOptions = LINK_WINDOW_OPTIONS_DEFAULTS;
1591
1630
  this.#_disabled = false;
1592
1631
  this.#_initialStyleState = Object.assign({}, STYLE_STATE_DEFAULTS);
1593
1632
  this.#_placeholder = '';
@@ -1724,11 +1763,11 @@ class SkyTextEditorComponent {
1724
1763
  /* istanbul ignore next */
1725
1764
  #_onChange;
1726
1765
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkyTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1727
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkyTextEditorComponent, isStandalone: true, 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" }, host: { properties: { "class.sky-form-control": "this.formControlClass" } }, providers: [
1766
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkyTextEditorComponent, isStandalone: true, 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", linkWindowOptions: "linkWindowOptions" }, host: { properties: { "class.sky-form-control": "this.formControlClass" } }, providers: [
1728
1767
  SkyTextEditorService,
1729
1768
  SkyTextEditorSelectionService,
1730
1769
  SkyTextEditorAdapterService,
1731
- ], viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["iframe"], descendants: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }], 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()\"\n #iframe\n >\n </iframe>\n</div>\n", styles: [".sky-text-editor .sky-text-editor-wrapper{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;height:300px;padding:1rem;font-size:1.2rem;border:1px solid #c0c0c0;overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ededee}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:1px solid #cdcfd2!important;border-right:1px solid #cdcfd2!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-dropdown-button{border:none}.sky-text-editor .sky-text-editor-toolbar sky-text-editor-menubar,.sky-text-editor .sky-text-editor-toolbar sky-text-editor-toolbar{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{border:1px solid #d2d2d2}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ececed}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar{padding:10px 10px 0}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-top:1px solid #d2d2d2!important;border-left:1px solid #d2d2d2!important;border-right:1px solid #d2d2d2!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 0 0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: ["editorFocusStream", "menus", "mergeFields", "disabled"] }, { kind: "component", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: ["editorFocusStream", "fontList", "fontSizeList", "toolbarActions", "styleState", "disabled"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i2$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i2$1.λ38, selector: "sky-toolbar-section" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1770
+ ], viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["iframe"], descendants: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }], 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 [linkWindowOptions]=\"linkWindowOptions\"\n [toolbarActions]=\"toolbarActions\"\n [styleState]=\"initialStyleState\"\n >\n </sky-text-editor-toolbar>\n </sky-toolbar-section>\n </sky-toolbar>\n <iframe\n class=\"sky-text-editor-wrapper\"\n src=\"about:blank\"\n title=\"Text Editor\"\n [ngClass]=\"{\n 'sky-text-editor-wrapper-disabled': disabled\n }\"\n (load)=\"onIframeLoad()\"\n #iframe\n >\n </iframe>\n</div>\n", styles: [".sky-text-editor .sky-text-editor-wrapper{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;height:300px;padding:1rem;font-size:1.2rem;border:1px solid #c0c0c0;overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ededee}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:1px solid #cdcfd2!important;border-right:1px solid #cdcfd2!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-dropdown-button{border:none}.sky-text-editor .sky-text-editor-toolbar sky-text-editor-menubar,.sky-text-editor .sky-text-editor-toolbar sky-text-editor-toolbar{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{border:1px solid #d2d2d2}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ececed}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar{padding:10px 10px 0}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-top:1px solid #d2d2d2!important;border-left:1px solid #d2d2d2!important;border-right:1px solid #d2d2d2!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 0 0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: ["editorFocusStream", "menus", "mergeFields", "disabled"] }, { kind: "component", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: ["editorFocusStream", "fontList", "fontSizeList", "toolbarActions", "linkWindowOptions", "styleState", "disabled"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i2$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i2$1.λ38, selector: "sky-toolbar-section" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1732
1771
  }
1733
1772
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkyTextEditorComponent, decorators: [{
1734
1773
  type: Component,
@@ -1741,7 +1780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
1741
1780
  SkyTextEditorMenubarComponent,
1742
1781
  SkyTextEditorToolbarComponent,
1743
1782
  SkyToolbarModule,
1744
- ], 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()\"\n #iframe\n >\n </iframe>\n</div>\n", styles: [".sky-text-editor .sky-text-editor-wrapper{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;height:300px;padding:1rem;font-size:1.2rem;border:1px solid #c0c0c0;overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ededee}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:1px solid #cdcfd2!important;border-right:1px solid #cdcfd2!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-dropdown-button{border:none}.sky-text-editor .sky-text-editor-toolbar sky-text-editor-menubar,.sky-text-editor .sky-text-editor-toolbar sky-text-editor-toolbar{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{border:1px solid #d2d2d2}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ececed}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar{padding:10px 10px 0}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-top:1px solid #d2d2d2!important;border-left:1px solid #d2d2d2!important;border-right:1px solid #d2d2d2!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 0 0!important}\n"] }]
1783
+ ], 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 [linkWindowOptions]=\"linkWindowOptions\"\n [toolbarActions]=\"toolbarActions\"\n [styleState]=\"initialStyleState\"\n >\n </sky-text-editor-toolbar>\n </sky-toolbar-section>\n </sky-toolbar>\n <iframe\n class=\"sky-text-editor-wrapper\"\n src=\"about:blank\"\n title=\"Text Editor\"\n [ngClass]=\"{\n 'sky-text-editor-wrapper-disabled': disabled\n }\"\n (load)=\"onIframeLoad()\"\n #iframe\n >\n </iframe>\n</div>\n", styles: [".sky-text-editor .sky-text-editor-wrapper{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;height:300px;padding:1rem;font-size:1.2rem;border:1px solid #c0c0c0;overflow-y:auto;outline:none}.sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ededee}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-left:1px solid #cdcfd2!important;border-right:1px solid #cdcfd2!important}.sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 10px 0}.sky-text-editor .sky-text-editor-toolbar .sky-dropdown-button{border:none}.sky-text-editor .sky-text-editor-toolbar sky-text-editor-menubar,.sky-text-editor .sky-text-editor-toolbar sky-text-editor-toolbar{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper{border:1px solid #d2d2d2}.sky-theme-modern .sky-text-editor .sky-text-editor-wrapper.sky-text-editor-wrapper-disabled{background-color:#ececed}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar{padding:10px 10px 0}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-section{padding:10px!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-sectioned{border-top:1px solid #d2d2d2!important;border-left:1px solid #d2d2d2!important;border-right:1px solid #d2d2d2!important}.sky-theme-modern .sky-text-editor .sky-text-editor-toolbar .sky-toolbar-item{margin:0 20px 0 0!important}\n"] }]
1745
1784
  }], ctorParameters: function () { return []; }, propDecorators: { autofocus: [{
1746
1785
  type: Input
1747
1786
  }], disabled: [{
@@ -1762,6 +1801,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
1762
1801
  type: Input
1763
1802
  }], toolbarActions: [{
1764
1803
  type: Input
1804
+ }], linkWindowOptions: [{
1805
+ type: Input
1765
1806
  }], iframeRef: [{
1766
1807
  type: ViewChild,
1767
1808
  args: ['iframe']