@skyux/text-editor 5.0.3 → 5.5.0

package/esm2015/lib/modules/text-editor/defaults/toolbar-action-defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-action-defaults.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/defaults/toolbar-action-defaults.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAqC;IACvE,aAAa;IACb,WAAW;IACX,YAAY;IACZ,OAAO;IACP,MAAM;IACN,MAAM;CACP,CAAC","sourcesContent":["import { SkyTextEditorToolbarActionType } from '../types/toolbar-action-type';\n\n/**\n * @internal\n */\nexport const TOOLBAR_ACTION_DEFAULTS: SkyTextEditorToolbarActionType[] = [\n  'font-family',\n  'font-size',\n  'font-style',\n  'color',\n  'list',\n  'link',\n];\n"]}

package/esm2015/lib/modules/text-editor/menubar/text-editor-menubar.component.js

@@ -0,0 +1,196 @@
+import { ChangeDetectorRef, ChangeDetectionStrategy, Component, Input, } from '@angular/core';
+import { SkyLibResourcesService } from '@skyux/i18n';
+import { SkyDropdownMessageType } from '@skyux/popovers';
+import { forkJoin, Subject } from 'rxjs';
+import { take, takeUntil } from 'rxjs/operators';
+import { SkyTextEditorAdapterService } from '../services/text-editor-adapter.service';
+import { SkyFormsUtility } from '../../shared/forms-utility';
+import * as i0 from "@angular/core";
+import * as i1 from "../services/text-editor-adapter.service";
+import * as i2 from "@skyux/i18n";
+import * as i3 from "@skyux/layout";
+import * as i4 from "@skyux/popovers";
+import * as i5 from "@angular/common";
+import * as i6 from "@skyux/theme";
+/**
+ * @internal
+ */
+export class SkyTextEditorMenubarComponent {
+    constructor(adapterService, changeDetector, resources) {
+        this.adapterService = adapterService;
+        this.changeDetector = changeDetector;
+        this.resources = resources;
+        this.editorFocusStream = new Subject();
+        this.menus = [];
+        this.mergeFields = [];
+        this._disabled = false;
+        this.editDropdownStream = new Subject();
+        this.formatDropdownStream = new Subject();
+        this.mergeFieldDropdownStream = new Subject();
+        this.ngUnsubscribe = new Subject();
+    }
+    set disabled(value) {
+        const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);
+        if (coercedValue !== this.disabled) {
+            this._disabled = coercedValue;
+            this.changeDetector.markForCheck();
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    ngOnInit() {
+        this.editorFocusStream.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
+            this.closeDropdowns();
+        });
+        forkJoin([
+            // Format menu strings.
+            this.resources.getString('skyux_text_editor_format_menu_action_bold_label'),
+            this.resources.getString('skyux_text_editor_format_menu_action_bold_key_shortcut'),
+            this.resources.getString('skyux_text_editor_format_menu_action_italic_label'),
+            this.resources.getString('skyux_text_editor_format_menu_action_italic_key_shortcut'),
+            this.resources.getString('skyux_text_editor_format_menu_action_underline_label'),
+            this.resources.getString('skyux_text_editor_format_menu_action_underline_key_shortcut'),
+            this.resources.getString('skyux_text_editor_format_menu_action_strikethrough_label'),
+            this.resources.getString('skyux_text_editor_format_menu_action_clear_formatting_label'),
+            // Edit menu string - start at index 8.
+            this.resources.getString('skyux_text_editor_edit_menu_action_undo_label'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_undo_key_shortcut'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_redo_label'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_redo_key_shortcut'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_cut_label'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_cut_key_shortcut'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_copy_label'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_copy_key_shortcut'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_paste_label'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_paste_key_shortcut'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_select_all_label'),
+            this.resources.getString('skyux_text_editor_edit_menu_action_select_all_key_shortcut'),
+        ])
+            .pipe(take(1))
+            .subscribe((resources) => {
+            this.formatItems = [
+                {
+                    function: () => this.execCommand('bold'),
+                    label: resources[0],
+                    keyShortcut: resources[1],
+                },
+                {
+                    function: () => this.execCommand('italic'),
+                    label: resources[2],
+                    keyShortcut: resources[3],
+                },
+                {
+                    function: () => this.execCommand('underline'),
+                    label: resources[4],
+                    keyShortcut: resources[5],
+                },
+                {
+                    function: () => this.execCommand('strikethrough'),
+                    label: resources[6],
+                },
+                {
+                    isDivider: true,
+                },
+                {
+                    function: () => this.clearFormat(),
+                    label: resources[7],
+                },
+            ];
+            this.editItems = [
+                {
+                    function: () => this.execCommand('undo'),
+                    label: resources[8],
+                    keyShortcut: resources[9],
+                },
+                {
+                    function: () => this.execCommand('redo'),
+                    label: resources[10],
+                    keyShortcut: resources[11],
+                },
+                {
+                    isDivider: true,
+                },
+                {
+                    function: () => this.execCommand('cut'),
+                    label: resources[12],
+                    keyShortcut: resources[13],
+                },
+                {
+                    function: () => this.execCommand('copy'),
+                    label: resources[14],
+                    keyShortcut: resources[15],
+                },
+                {
+                    function: () => this.execCommand('paste'),
+                    label: resources[16],
+                    keyShortcut: resources[17],
+                },
+                {
+                    isDivider: true,
+                },
+                {
+                    function: () => this.execCommand('selectAll'),
+                    label: resources[18],
+                    keyShortcut: resources[19],
+                },
+            ];
+        });
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    execCommand(command, value = '') {
+        this.adapterService.execCommand(this.editorId, {
+            command: command,
+            value: value,
+        });
+    }
+    insertMergeField(field) {
+        this.execCommand('insertHTML', '<img style="display: inline; cursor: grab;" data-fieldid="' +
+            field.id +
+            '" data-fielddisplay="' +
+            field.name +
+            '" src="' +
+            (field.previewImageUrl ||
+                this.adapterService.getMergeFieldDataURI(field.name)) +
+            '">');
+    }
+    closeDropdowns() {
+        this.editDropdownStream.next({ type: SkyDropdownMessageType.Close });
+        this.formatDropdownStream.next({ type: SkyDropdownMessageType.Close });
+        this.mergeFieldDropdownStream.next({ type: SkyDropdownMessageType.Close });
+    }
+    clearFormat() {
+        let currentSelection = this.adapterService.getCurrentSelection(this.editorId);
+        /* istanbul ignore else */
+        if (currentSelection.rangeCount > 0 &&
+            currentSelection.getRangeAt(0).toString().length <= 0) {
+            this.execCommand('selectAll');
+        }
+        this.execCommand('removeFormat');
+    }
+}
+SkyTextEditorMenubarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorMenubarComponent, deps: [{ token: i1.SkyTextEditorAdapterService }, { token: i0.ChangeDetectorRef }, { token: i2.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextEditorMenubarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTextEditorMenubarComponent, selector: "sky-text-editor-menubar", inputs: { editorFocusStream: "editorFocusStream", editorId: "editorId", menus: "menus", mergeFields: "mergeFields", disabled: "disabled" }, ngImport: i0, template: "<sky-toolbar-item\n  *ngFor=\"let menu of menus\"\n  class=\"sky-text-editor-menu\"\n  [ngClass]=\"'sky-text-editor-menu-' + menu\"\n>\n  <ng-container [ngSwitch]=\"menu\">\n    <ng-container *ngSwitchCase=\"'edit'\">\n      <sky-dropdown\n        label=\"Edit menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"editDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_edit_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let editItem of editItems\">\n            <button\n              *ngIf=\"!editItem.isDivider\"\n              type=\"button\"\n              (click)=\"editItem.function()\"\n            >\n              {{ editItem.label }}\n              <div\n                *ngIf=\"editItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ editItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"editItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'format'\">\n      <sky-dropdown\n        label=\"Format menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"formatDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_format_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let formatItem of formatItems\">\n            <button\n              *ngIf=\"!formatItem.isDivider\"\n              type=\"button\"\n              (click)=\"formatItem.function()\"\n            >\n              {{ formatItem.label }}\n              <div\n                *ngIf=\"formatItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ formatItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"formatItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'merge-field'\">\n      <sky-dropdown\n        *ngIf=\"mergeFields && mergeFields.length > 0\"\n        label=\"Insert merge field\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"mergeFieldDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_insert_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let mergeField of mergeFields\">\n            <button type=\"button\" (click)=\"insertMergeField(mergeField)\">\n              {{ mergeField.name }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n  </ng-container>\n</sky-toolbar-item>\n", styles: [".sky-text-editor-dropdown-item-divider{border:0;padding:0;height:1px;margin:9px 1px;overflow:hidden;background:transparent;border-bottom:1px solid rgba(0,0,0,.1);cursor:default;filter:none}.sky-text-editor-menu-key-shortcut{float:right;margin-left:15px}\n"], 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"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i2.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorMenubarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-text-editor-menubar',
+                    templateUrl: './text-editor-menubar.component.html',
+                    styleUrls: ['./text-editor-menubar.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyTextEditorAdapterService }, { type: i0.ChangeDetectorRef }, { type: i2.SkyLibResourcesService }]; }, propDecorators: { editorFocusStream: [{
+                type: Input
+            }], editorId: [{
+                type: Input
+            }], menus: [{
+                type: Input
+            }], mergeFields: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=text-editor-menubar.component.js.map

package/esm2015/lib/modules/text-editor/menubar/text-editor-menubar.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-editor-menubar.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/menubar/text-editor-menubar.component.ts","../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/menubar/text-editor-menubar.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectorRef,\n  ChangeDetectionStrategy,\n  Component,\n  Input,\n  OnDestroy,\n  OnInit,\n} from '@angular/core';\n\nimport { SkyLibResourcesService } from '@skyux/i18n';\n\nimport { SkyDropdownMessage, SkyDropdownMessageType } from '@skyux/popovers';\n\nimport { forkJoin, Subject } from 'rxjs';\n\nimport { take, takeUntil } from 'rxjs/operators';\n\nimport { SkyTextEditorAdapterService } from '../services/text-editor-adapter.service';\n\nimport { SkyTextEditorMenuType } from '../types/menu-type';\n\nimport { SkyTextEditorMergeField } from '../types/text-editor-merge-field';\n\nimport { SkyFormsUtility } from '../../shared/forms-utility';\n\n/**\n * @internal\n */\n@Component({\n  selector: 'sky-text-editor-menubar',\n  templateUrl: './text-editor-menubar.component.html',\n  styleUrls: ['./text-editor-menubar.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyTextEditorMenubarComponent implements OnDestroy, OnInit {\n  @Input()\n  public editorFocusStream = new Subject();\n\n  @Input()\n  public editorId: string;\n\n  @Input()\n  public menus: SkyTextEditorMenuType[] = [];\n\n  @Input()\n  public mergeFields: SkyTextEditorMergeField[] = [];\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  private _disabled: boolean = false;\n\n  public editDropdownStream = new Subject<SkyDropdownMessage>();\n\n  public editItems: {\n    function?: () => void;\n    isDivider?: boolean;\n    label?: string;\n    keyShortcut?: string;\n  }[];\n\n  public formatDropdownStream = new Subject<SkyDropdownMessage>();\n\n  public formatItems: {\n    function?: () => void;\n    isDivider?: boolean;\n    label?: string;\n    keyShortcut?: string;\n  }[];\n\n  public mergeFieldDropdownStream = new Subject<SkyDropdownMessage>();\n\n  private ngUnsubscribe = new Subject<void>();\n\n  constructor(\n    private adapterService: SkyTextEditorAdapterService,\n    private changeDetector: ChangeDetectorRef,\n    private resources: SkyLibResourcesService\n  ) {}\n\n  public ngOnInit(): void {\n    this.editorFocusStream.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {\n      this.closeDropdowns();\n    });\n\n    forkJoin([\n      // Format menu strings.\n      this.resources.getString(\n        'skyux_text_editor_format_menu_action_bold_label'\n      ),\n      this.resources.getString(\n        'skyux_text_editor_format_menu_action_bold_key_shortcut'\n      ),\n      this.resources.getString(\n        'skyux_text_editor_format_menu_action_italic_label'\n      ),\n      this.resources.getString(\n        'skyux_text_editor_format_menu_action_italic_key_shortcut'\n      ),\n      this.resources.getString(\n        'skyux_text_editor_format_menu_action_underline_label'\n      ),\n      this.resources.getString(\n        'skyux_text_editor_format_menu_action_underline_key_shortcut'\n      ),\n      this.resources.getString(\n        'skyux_text_editor_format_menu_action_strikethrough_label'\n      ),\n      this.resources.getString(\n        'skyux_text_editor_format_menu_action_clear_formatting_label'\n      ),\n\n      // Edit menu string - start at index 8.\n      this.resources.getString('skyux_text_editor_edit_menu_action_undo_label'),\n      this.resources.getString(\n        'skyux_text_editor_edit_menu_action_undo_key_shortcut'\n      ),\n      this.resources.getString('skyux_text_editor_edit_menu_action_redo_label'),\n      this.resources.getString(\n        'skyux_text_editor_edit_menu_action_redo_key_shortcut'\n      ),\n      this.resources.getString('skyux_text_editor_edit_menu_action_cut_label'),\n      this.resources.getString(\n        'skyux_text_editor_edit_menu_action_cut_key_shortcut'\n      ),\n      this.resources.getString('skyux_text_editor_edit_menu_action_copy_label'),\n      this.resources.getString(\n        'skyux_text_editor_edit_menu_action_copy_key_shortcut'\n      ),\n      this.resources.getString(\n        'skyux_text_editor_edit_menu_action_paste_label'\n      ),\n      this.resources.getString(\n        'skyux_text_editor_edit_menu_action_paste_key_shortcut'\n      ),\n      this.resources.getString(\n        'skyux_text_editor_edit_menu_action_select_all_label'\n      ),\n      this.resources.getString(\n        'skyux_text_editor_edit_menu_action_select_all_key_shortcut'\n      ),\n    ])\n      .pipe(take(1))\n      .subscribe((resources) => {\n        this.formatItems = [\n          {\n            function: () => this.execCommand('bold'),\n            label: resources[0],\n            keyShortcut: resources[1],\n          },\n          {\n            function: () => this.execCommand('italic'),\n            label: resources[2],\n            keyShortcut: resources[3],\n          },\n          {\n            function: () => this.execCommand('underline'),\n            label: resources[4],\n            keyShortcut: resources[5],\n          },\n          {\n            function: () => this.execCommand('strikethrough'),\n            label: resources[6],\n          },\n          {\n            isDivider: true,\n          },\n          {\n            function: () => this.clearFormat(),\n            label: resources[7],\n          },\n        ];\n        this.editItems = [\n          {\n            function: () => this.execCommand('undo'),\n            label: resources[8],\n            keyShortcut: resources[9],\n          },\n          {\n            function: () => this.execCommand('redo'),\n            label: resources[10],\n            keyShortcut: resources[11],\n          },\n          {\n            isDivider: true,\n          },\n          {\n            function: () => this.execCommand('cut'),\n            label: resources[12],\n            keyShortcut: resources[13],\n          },\n          {\n            function: () => this.execCommand('copy'),\n            label: resources[14],\n            keyShortcut: resources[15],\n          },\n          {\n            function: () => this.execCommand('paste'),\n            label: resources[16],\n            keyShortcut: resources[17],\n          },\n          {\n            isDivider: true,\n          },\n          {\n            function: () => this.execCommand('selectAll'),\n            label: resources[18],\n            keyShortcut: resources[19],\n          },\n        ];\n      });\n  }\n\n  public ngOnDestroy(): void {\n    this.ngUnsubscribe.next();\n    this.ngUnsubscribe.complete();\n  }\n\n  public execCommand(command: string, value: any = ''): void {\n    this.adapterService.execCommand(this.editorId, {\n      command: command,\n      value: value,\n    });\n  }\n\n  public insertMergeField(field: SkyTextEditorMergeField): void {\n    this.execCommand(\n      'insertHTML',\n      '<img style=\"display: inline; cursor: grab;\" data-fieldid=\"' +\n        field.id +\n        '\" data-fielddisplay=\"' +\n        field.name +\n        '\" src=\"' +\n        (field.previewImageUrl ||\n          this.adapterService.getMergeFieldDataURI(field.name)) +\n        '\">'\n    );\n  }\n\n  private closeDropdowns(): void {\n    this.editDropdownStream.next({ type: SkyDropdownMessageType.Close });\n    this.formatDropdownStream.next({ type: SkyDropdownMessageType.Close });\n    this.mergeFieldDropdownStream.next({ type: SkyDropdownMessageType.Close });\n  }\n\n  private clearFormat(): void {\n    let currentSelection = this.adapterService.getCurrentSelection(\n      this.editorId\n    );\n    /* istanbul ignore else */\n    if (\n      currentSelection.rangeCount > 0 &&\n      currentSelection.getRangeAt(0).toString().length <= 0\n    ) {\n      this.execCommand('selectAll');\n    }\n    this.execCommand('removeFormat');\n  }\n}\n","<sky-toolbar-item\n  *ngFor=\"let menu of menus\"\n  class=\"sky-text-editor-menu\"\n  [ngClass]=\"'sky-text-editor-menu-' + menu\"\n>\n  <ng-container [ngSwitch]=\"menu\">\n    <ng-container *ngSwitchCase=\"'edit'\">\n      <sky-dropdown\n        label=\"Edit menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"editDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_edit_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let editItem of editItems\">\n            <button\n              *ngIf=\"!editItem.isDivider\"\n              type=\"button\"\n              (click)=\"editItem.function()\"\n            >\n              {{ editItem.label }}\n              <div\n                *ngIf=\"editItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ editItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"editItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'format'\">\n      <sky-dropdown\n        label=\"Format menu\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"formatDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_format_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let formatItem of formatItems\">\n            <button\n              *ngIf=\"!formatItem.isDivider\"\n              type=\"button\"\n              (click)=\"formatItem.function()\"\n            >\n              {{ formatItem.label }}\n              <div\n                *ngIf=\"formatItem.keyShortcut\"\n                class=\"sky-text-editor-menu-key-shortcut\"\n                [skyThemeClass]=\"{\n                  'sky-font-deemphasized': 'modern',\n                  'sky-deemphasized': 'default'\n                }\"\n              >\n                {{ formatItem.keyShortcut }}\n              </div>\n            </button>\n            <div\n              *ngIf=\"formatItem.isDivider\"\n              class=\"sky-text-editor-dropdown-item-divider\"\n              role=\"divider\"\n            ></div>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'merge-field'\">\n      <sky-dropdown\n        *ngIf=\"mergeFields && mergeFields.length > 0\"\n        label=\"Insert merge field\"\n        [disabled]=\"disabled\"\n        [messageStream]=\"mergeFieldDropdownStream\"\n      >\n        <sky-dropdown-button>\n          {{\n            'skyux_text_editor_menubar_dropdown_button_insert_label'\n              | skyLibResources\n          }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let mergeField of mergeFields\">\n            <button type=\"button\" (click)=\"insertMergeField(mergeField)\">\n              {{ mergeField.name }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n  </ng-container>\n</sky-toolbar-item>\n"]}