@skyux/text-editor 5.0.3 → 5.5.0

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

@@ -0,0 +1,175 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, } from '@angular/core';
+import { Subject } from 'rxjs';
+import { SkyColorpickerMessageType, } from '@skyux/colorpicker';
+import { SkyModalService } from '@skyux/modals';
+import { SkyDropdownMessageType } from '@skyux/popovers';
+import { STYLE_STATE_DEFAULTS } from '../defaults/style-state-defaults';
+import { SkyTextEditorAdapterService } from '../services/text-editor-adapter.service';
+import { SkyTextEditorUrlModalComponent } from '../url-modal/text-editor-url-modal.component';
+import { UrlTarget } from '../url-modal/text-editor-url-target';
+import { SkyUrlModalContext } from '../url-modal/text-editor-url-modal-context';
+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/modals";
+import * as i3 from "@skyux/layout";
+import * as i4 from "@skyux/popovers";
+import * as i5 from "@skyux/forms";
+import * as i6 from "@skyux/colorpicker";
+import * as i7 from "@skyux/indicators";
+import * as i8 from "@angular/common";
+import * as i9 from "@angular/forms";
+import * as i10 from "@skyux/theme";
+/**
+ * @internal
+ */
+export class SkyTextEditorToolbarComponent {
+    constructor(adapterService, changeDetector, modalService) {
+        this.adapterService = adapterService;
+        this.changeDetector = changeDetector;
+        this.modalService = modalService;
+        this.editorFocusStream = new Subject();
+        this.backColorpickerStream = new Subject();
+        this.colorpickerStream = new Subject();
+        this.fontPickerStream = new Subject();
+        this.fontSizeStream = new Subject();
+        this._disabled = false;
+        this._styleState = STYLE_STATE_DEFAULTS;
+    }
+    get styleState() {
+        return this._styleState;
+    }
+    set styleState(value) {
+        this._styleState = value;
+        if (value.font !== this.styleStateFontName) {
+            if (value.font === '"Blackbaud Sans", Arial, sans-serif') {
+                this.styleStateFontName = this.getFontName('Blackbaud Sans');
+            }
+            else {
+                this.styleStateFontName = this.getFontName(value.font);
+            }
+        }
+    }
+    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.subscribe(() => {
+            this.styleState = Object.assign(Object.assign({}, this._styleState), this.adapterService.getStyleState(this.editorId));
+            this.closeDropdowns();
+            this.changeDetector.detectChanges();
+        });
+    }
+    execCommand(command, value = '') {
+        this.adapterService.execCommand(this.editorId, {
+            command: command,
+            value: value,
+        });
+        this.styleState = Object.assign(Object.assign({}, this.styleState), this.adapterService.getStyleState(this.editorId));
+    }
+    toggleFontStyle(currentState, newState, command) {
+        if (currentState !== newState) {
+            this.execCommand(command);
+        }
+        // Force sky-checkbox to show changes on user's initial click.
+        this.changeDetector.detectChanges();
+    }
+    link() {
+        const priorSelection = this.adapterService.saveSelection(this.editorId);
+        const currentLink = this.adapterService.getLink(this.editorId);
+        const inputModal = this.modalService.open(SkyTextEditorUrlModalComponent, [
+            {
+                provide: SkyUrlModalContext,
+                useValue: { urlResult: currentLink },
+            },
+        ]);
+        inputModal.closed.subscribe((result) => {
+            if (result.reason === 'save' && priorSelection) {
+                if (currentLink) {
+                    const anchor = this.adapterService.getSelectedAnchorTag(this.editorId);
+                    this.adapterService.selectElement(this.editorId, anchor);
+                }
+                this.execCommand('unlink');
+                if (result.data.target === UrlTarget.None) {
+                    // Current window
+                    this.execCommand('createLink', result.data.url);
+                }
+                else {
+                    // New Window
+                    const sText = this.adapterService.getCurrentSelection(this.editorId);
+                    this.execCommand('insertHTML', '<a href="' +
+                        result.data.url +
+                        '" rel="noopener noreferrer" target="_blank">' +
+                        sText +
+                        '</a>');
+                }
+            }
+        });
+    }
+    unlink() {
+        let currentSelectionRange = this.adapterService
+            .getCurrentSelection(this.editorId)
+            .getRangeAt(0);
+        if (currentSelectionRange.toString().length <= 0) {
+            const anchorTag = this.adapterService.getSelectedAnchorTag(this.editorId);
+            this.adapterService.selectElement(this.editorId, anchorTag);
+        }
+        this.execCommand('unlink');
+    }
+    changeFontSize(size) {
+        this.adapterService.setFontSize(this.editorId, size);
+        this.styleState = Object.assign(Object.assign({}, this.styleState), this.adapterService.getStyleState(this.editorId));
+    }
+    onColorpickerColorChanged(color, isBackground = false) {
+        this.execCommand(isBackground ? 'backColor' : 'foreColor', color.hex);
+    }
+    closeDropdowns() {
+        const message = {
+            type: SkyColorpickerMessageType.Close,
+        };
+        this.colorpickerStream.next(message);
+        this.backColorpickerStream.next(message);
+        this.fontPickerStream.next({ type: SkyDropdownMessageType.Close });
+        this.fontSizeStream.next({ type: SkyDropdownMessageType.Close });
+    }
+    getFontName(fontName) {
+        for (let i = 0; i < this.fontList.length; i++) {
+            if (fontName.replace(/['"]+/g, '') === this.fontList[i].name) {
+                return this.fontList[i].name;
+            }
+        }
+    }
+}
+SkyTextEditorToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorToolbarComponent, deps: [{ token: i1.SkyTextEditorAdapterService }, { token: i0.ChangeDetectorRef }, { token: i2.SkyModalService }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextEditorToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTextEditorToolbarComponent, selector: "sky-text-editor-toolbar", inputs: { editorFocusStream: "editorFocusStream", editorId: "editorId", fontList: "fontList", fontSizeList: "fontSizeList", toolbarActions: "toolbarActions", styleState: "styleState", disabled: "disabled" }, ngImport: i0, template: "<sky-toolbar-item\n  *ngFor=\"let action of toolbarActions\"\n  class=\"sky-text-editor-toolbar-action\"\n  [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n>\n  <ng-container [ngSwitch]=\"action\">\n    <ng-container *ngSwitchCase=\"'font-family'\">\n      <sky-dropdown\n        class=\"sky-text-editor-font-picker\"\n        [disabled]=\"disabled\"\n        [label]=\"'Font: ' + styleStateFontName\"\n        [messageStream]=\"fontPickerStream\"\n      >\n        <sky-dropdown-button\n          [ngStyle]=\"{\n            'font-family': styleState.font\n          }\"\n        >\n          {{ styleStateFontName }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let fontModel of fontList\">\n            <button\n              type=\"button\"\n              [ngStyle]=\"{\n                'font-family': fontModel.value\n              }\"\n              (click)=\"execCommand('fontname', fontModel.name)\"\n            >\n              {{ fontModel.name }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'font-size'\">\n      <sky-dropdown\n        class=\"sky-text-editor-font-size-picker\"\n        [disabled]=\"disabled\"\n        [label]=\"'Font size: ' + styleState.fontSize + 'px'\"\n        [messageStream]=\"fontSizeStream\"\n      >\n        <sky-dropdown-button\n          [ngStyle]=\"{\n            'font-family': styleState.fontSize\n          }\"\n        >\n          {{ styleState.fontSize + 'px' }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let size of fontSizeList\">\n            <button type=\"button\" (click)=\"changeFontSize(size)\">\n              {{ size + 'px' }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'font-style'\">\n      <div class=\"sky-switch-icon-group sky-text-editor-font-style-picker\">\n        <sky-checkbox\n          icon=\"bold\"\n          label=\"Bold\"\n          title=\"Bold\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.boldState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.boldState, $event, 'bold')\n          \"\n        >\n        </sky-checkbox>\n        <sky-checkbox\n          icon=\"italic\"\n          label=\"Italicized\"\n          title=\"Italicized\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.italicState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.italicState, $event, 'italic')\n          \"\n        >\n        </sky-checkbox>\n        <sky-checkbox\n          icon=\"underline\"\n          label=\"Underline\"\n          title=\"Underline\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.underlineState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.underlineState, $event, 'underline')\n          \"\n        >\n        </sky-checkbox>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'color'\">\n      <div class=\"sky-text-editor-colorpicker-group\">\n        <div class=\"sky-text-editor-colorpicker-container\">\n          <sky-colorpicker\n            class=\"sky-text-editor-font-color-picker\"\n            label=\"Font color\"\n            [messageStream]=\"colorpickerStream\"\n            [showResetButton]=\"false\"\n            (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\n            #colorPicker\n          >\n            <input\n              outputFormat=\"hex\"\n              type=\"text\"\n              [allowTransparency]=\"false\"\n              [disabled]=\"disabled\"\n              [ngModel]=\"styleState.fontColor\"\n              [skyColorpickerInput]=\"colorPicker\"\n            />\n          </sky-colorpicker>\n        </div>\n        <div class=\"sky-text-editor-colorpicker-container\">\n          <sky-colorpicker\n            class=\"sky-text-editor-background-color-picker\"\n            label=\"Background color\"\n            [messageStream]=\"backColorpickerStream\"\n            [showResetButton]=\"false\"\n            (selectedColorChanged)=\"onColorpickerColorChanged($event, true)\"\n            #backColorPicker\n          >\n            <input\n              outputFormat=\"rgba\"\n              type=\"text\"\n              [allowTransparency]=\"true\"\n              [disabled]=\"disabled\"\n              [ngModel]=\"styleState.backColor\"\n              [skyColorpickerInput]=\"backColorPicker\"\n            />\n          </sky-colorpicker>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'list'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Bulleted list\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Bulleted list\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('insertUnorderedList')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ul\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"bullet-list-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Numbered list\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Numbered list\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('insertOrderedList')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ol\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"number-list-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'alignment'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Align left\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align left\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyLeft')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-left\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"align-left-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Align center\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align center\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyCenter')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-center\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"center-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Align right\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align right\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyRight')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-right\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"align-right-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'indentation'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Outdent\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Outdent\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('outdent')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"outdent\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"outdent-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Indent\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Indent\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('indent')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"indent\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"indent-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'undo-redo'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Undo\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Undo\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('undo')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"undo\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"undo-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Redo\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Redo\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('redo')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"repeat\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"redo-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'link'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Link\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Link\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"{\n            'icon-btn-active': styleState.linkState\n          }\"\n          (click)=\"link()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"link\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"link-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Unlink\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Unlink\"\n          [disabled]=\"!styleState.linkState || disabled\"\n          (click)=\"unlink()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"unlink\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"unlink-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n  </ng-container>\n</sky-toolbar-item>\n", styles: [".sky-text-editor-toolbar-action .sky-toolbar-item{margin-right:15px}.sky-text-editor-toolbar-action .sky-text-editor-font-picker ::ng-deep .sky-dropdown-button-content-container{width:140px;height:20px;text-align:left}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group{display:flex}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{position:relative;top:3px;margin:0 10px 0 0}.sky-text-editor-toolbar-action .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child{margin-right:0}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn{margin-left:0;margin-right:0;border-radius:0;border-right:none}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:first-of-type{border-top-left-radius:3px;border-bottom-left-radius:3px}.sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border-top-right-radius:3px;border-bottom-right-radius:3px;border-right:1px solid #cdcfd2}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}:host-context(.sky-theme-modern) .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:first-of-type,:host-context(.sky-theme-modern) .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}:host-context(.sky-theme-modern) .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container{top:-2px;margin:0}.sky-theme-modern .sky-text-editor-colorpicker-group .sky-text-editor-colorpicker-container:last-child ::ng-deep sky-colorpicker .sky-colorpicker-button{margin-right:0}.sky-theme-modern .sky-switch-icon-group .sky-btn{margin:inherit;border-radius:6px}.sky-theme-modern .sky-switch-icon-group .sky-btn:first-of-type,.sky-theme-modern .sky-switch-icon-group .sky-btn:last-of-type{border-radius:6px}.sky-theme-modern .sky-text-editor-toolbar-action .sky-switch-icon-group .sky-btn:last-of-type{border:none}\n"], components: [{ type: i3.λ39, selector: "sky-toolbar-item" }, { type: i4.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4.λ2, selector: "sky-dropdown-button" }, { type: i4.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { type: i5.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i6.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "pickerButtonIconType", "label", "labelledBy", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { type: i7.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i8.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i8.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { type: i10.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-text-editor-toolbar',
+                    templateUrl: './text-editor-toolbar.component.html',
+                    styleUrls: ['./text-editor-toolbar.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyTextEditorAdapterService }, { type: i0.ChangeDetectorRef }, { type: i2.SkyModalService }]; }, propDecorators: { editorFocusStream: [{
+                type: Input
+            }], editorId: [{
+                type: Input
+            }], fontList: [{
+                type: Input
+            }], fontSizeList: [{
+                type: Input
+            }], toolbarActions: [{
+                type: Input
+            }], styleState: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=text-editor-toolbar.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-editor-toolbar.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/toolbar/text-editor-toolbar.component.ts","../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/toolbar/text-editor-toolbar.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  Input,\n  OnInit,\n} from '@angular/core';\n\nimport { Subject } from 'rxjs';\n\nimport {\n  SkyColorpickerOutput,\n  SkyColorpickerMessage,\n  SkyColorpickerMessageType,\n} from '@skyux/colorpicker';\n\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { SkyDropdownMessage, SkyDropdownMessageType } from '@skyux/popovers';\n\nimport { STYLE_STATE_DEFAULTS } from '../defaults/style-state-defaults';\n\nimport { SkyTextEditorAdapterService } from '../services/text-editor-adapter.service';\n\nimport { SkyTextEditorFont } from '../types/font-state';\n\nimport { SkyTextEditorStyleState } from '../types/style-state';\n\nimport { SkyTextEditorToolbarActionType } from '../types/toolbar-action-type';\n\nimport { SkyTextEditorUrlModalComponent } from '../url-modal/text-editor-url-modal.component';\n\nimport { UrlTarget } from '../url-modal/text-editor-url-target';\n\nimport { SkyUrlModalContext } from '../url-modal/text-editor-url-modal-context';\n\nimport { SkyFormsUtility } from '../../shared/forms-utility';\n\n/**\n * @internal\n */\n@Component({\n  selector: 'sky-text-editor-toolbar',\n  templateUrl: './text-editor-toolbar.component.html',\n  styleUrls: ['./text-editor-toolbar.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyTextEditorToolbarComponent implements OnInit {\n  @Input()\n  public editorFocusStream = new Subject();\n\n  @Input()\n  public editorId: string;\n\n  @Input()\n  public fontList: SkyTextEditorFont[];\n\n  @Input()\n  public fontSizeList: number[];\n\n  @Input()\n  public toolbarActions: SkyTextEditorToolbarActionType[];\n\n  @Input()\n  public get styleState(): SkyTextEditorStyleState {\n    return this._styleState;\n  }\n  public set styleState(value: SkyTextEditorStyleState) {\n    this._styleState = value;\n    if (value.font !== this.styleStateFontName) {\n      if (value.font === '\"Blackbaud Sans\", Arial, sans-serif') {\n        this.styleStateFontName = this.getFontName('Blackbaud Sans');\n      } else {\n        this.styleStateFontName = this.getFontName(value.font);\n      }\n    }\n  }\n\n  @Input()\n  public set disabled(value: boolean) {\n    const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);\n    if (coercedValue !== this.disabled) {\n      this._disabled = coercedValue;\n      this.changeDetector.markForCheck();\n    }\n  }\n\n  public get disabled(): boolean {\n    return this._disabled;\n  }\n\n  public backColorpickerStream = new Subject<SkyColorpickerMessage>();\n\n  public colorpickerStream = new Subject<SkyColorpickerMessage>();\n\n  public fontPickerStream = new Subject<SkyDropdownMessage>();\n\n  public fontSizeStream = new Subject<SkyDropdownMessage>();\n\n  public styleStateFontName: string;\n\n  private _disabled: boolean = false;\n\n  private _styleState = STYLE_STATE_DEFAULTS;\n\n  constructor(\n    private adapterService: SkyTextEditorAdapterService,\n    private changeDetector: ChangeDetectorRef,\n    private modalService: SkyModalService\n  ) {}\n\n  public ngOnInit(): void {\n    this.editorFocusStream.subscribe(() => {\n      this.styleState = {\n        ...this._styleState,\n        ...(this.adapterService.getStyleState(this.editorId) as any),\n      };\n      this.closeDropdowns();\n      this.changeDetector.detectChanges();\n    });\n  }\n\n  public execCommand(command: string, value: any = ''): void {\n    this.adapterService.execCommand(this.editorId, {\n      command: command,\n      value: value,\n    });\n    this.styleState = {\n      ...this.styleState,\n      ...this.adapterService.getStyleState(this.editorId),\n    };\n  }\n\n  public toggleFontStyle(\n    currentState: boolean,\n    newState: boolean,\n    command: string\n  ): void {\n    if (currentState !== newState) {\n      this.execCommand(command);\n    }\n\n    // Force sky-checkbox to show changes on user's initial click.\n    this.changeDetector.detectChanges();\n  }\n\n  public link(): void {\n    const priorSelection = this.adapterService.saveSelection(this.editorId);\n    const currentLink = this.adapterService.getLink(this.editorId);\n    const inputModal = this.modalService.open(SkyTextEditorUrlModalComponent, [\n      {\n        provide: SkyUrlModalContext,\n        useValue: { urlResult: currentLink },\n      },\n    ]);\n    inputModal.closed.subscribe((result: SkyModalCloseArgs) => {\n      if (result.reason === 'save' && priorSelection) {\n        if (currentLink) {\n          const anchor = this.adapterService.getSelectedAnchorTag(\n            this.editorId\n          );\n          this.adapterService.selectElement(this.editorId, anchor);\n        }\n\n        this.execCommand('unlink');\n        if (result.data.target === UrlTarget.None) {\n          // Current window\n          this.execCommand('createLink', result.data.url);\n        } else {\n          // New Window\n          const sText = this.adapterService.getCurrentSelection(this.editorId);\n          this.execCommand(\n            'insertHTML',\n            '<a href=\"' +\n              result.data.url +\n              '\" rel=\"noopener noreferrer\" target=\"_blank\">' +\n              sText +\n              '</a>'\n          );\n        }\n      }\n    });\n  }\n\n  public unlink(): void {\n    let currentSelectionRange = this.adapterService\n      .getCurrentSelection(this.editorId)\n      .getRangeAt(0);\n    if (currentSelectionRange.toString().length <= 0) {\n      const anchorTag = this.adapterService.getSelectedAnchorTag(this.editorId);\n      this.adapterService.selectElement(this.editorId, anchorTag);\n    }\n    this.execCommand('unlink');\n  }\n\n  public changeFontSize(size: number): void {\n    this.adapterService.setFontSize(this.editorId, size);\n    this.styleState = {\n      ...this.styleState,\n      ...this.adapterService.getStyleState(this.editorId),\n    };\n  }\n\n  public onColorpickerColorChanged(\n    color: SkyColorpickerOutput,\n    isBackground = false\n  ): void {\n    this.execCommand(isBackground ? 'backColor' : 'foreColor', color.hex);\n  }\n\n  private closeDropdowns(): void {\n    const message: SkyColorpickerMessage = {\n      type: SkyColorpickerMessageType.Close,\n    };\n    this.colorpickerStream.next(message);\n    this.backColorpickerStream.next(message);\n    this.fontPickerStream.next({ type: SkyDropdownMessageType.Close });\n    this.fontSizeStream.next({ type: SkyDropdownMessageType.Close });\n  }\n\n  private getFontName(fontName: string): string {\n    for (let i = 0; i < this.fontList.length; i++) {\n      if (fontName.replace(/['\"]+/g, '') === this.fontList[i].name) {\n        return this.fontList[i].name;\n      }\n    }\n  }\n}\n","<sky-toolbar-item\n  *ngFor=\"let action of toolbarActions\"\n  class=\"sky-text-editor-toolbar-action\"\n  [ngClass]=\"'sky-text-editor-toolbar-action-' + action\"\n>\n  <ng-container [ngSwitch]=\"action\">\n    <ng-container *ngSwitchCase=\"'font-family'\">\n      <sky-dropdown\n        class=\"sky-text-editor-font-picker\"\n        [disabled]=\"disabled\"\n        [label]=\"'Font: ' + styleStateFontName\"\n        [messageStream]=\"fontPickerStream\"\n      >\n        <sky-dropdown-button\n          [ngStyle]=\"{\n            'font-family': styleState.font\n          }\"\n        >\n          {{ styleStateFontName }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let fontModel of fontList\">\n            <button\n              type=\"button\"\n              [ngStyle]=\"{\n                'font-family': fontModel.value\n              }\"\n              (click)=\"execCommand('fontname', fontModel.name)\"\n            >\n              {{ fontModel.name }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'font-size'\">\n      <sky-dropdown\n        class=\"sky-text-editor-font-size-picker\"\n        [disabled]=\"disabled\"\n        [label]=\"'Font size: ' + styleState.fontSize + 'px'\"\n        [messageStream]=\"fontSizeStream\"\n      >\n        <sky-dropdown-button\n          [ngStyle]=\"{\n            'font-family': styleState.fontSize\n          }\"\n        >\n          {{ styleState.fontSize + 'px' }}\n        </sky-dropdown-button>\n        <sky-dropdown-menu>\n          <sky-dropdown-item *ngFor=\"let size of fontSizeList\">\n            <button type=\"button\" (click)=\"changeFontSize(size)\">\n              {{ size + 'px' }}\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'font-style'\">\n      <div class=\"sky-switch-icon-group sky-text-editor-font-style-picker\">\n        <sky-checkbox\n          icon=\"bold\"\n          label=\"Bold\"\n          title=\"Bold\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.boldState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.boldState, $event, 'bold')\n          \"\n        >\n        </sky-checkbox>\n        <sky-checkbox\n          icon=\"italic\"\n          label=\"Italicized\"\n          title=\"Italicized\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.italicState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.italicState, $event, 'italic')\n          \"\n        >\n        </sky-checkbox>\n        <sky-checkbox\n          icon=\"underline\"\n          label=\"Underline\"\n          title=\"Underline\"\n          [disabled]=\"disabled\"\n          [ngModel]=\"styleState.underlineState\"\n          (ngModelChange)=\"\n            toggleFontStyle(styleState.underlineState, $event, 'underline')\n          \"\n        >\n        </sky-checkbox>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'color'\">\n      <div class=\"sky-text-editor-colorpicker-group\">\n        <div class=\"sky-text-editor-colorpicker-container\">\n          <sky-colorpicker\n            class=\"sky-text-editor-font-color-picker\"\n            label=\"Font color\"\n            [messageStream]=\"colorpickerStream\"\n            [showResetButton]=\"false\"\n            (selectedColorChanged)=\"onColorpickerColorChanged($event)\"\n            #colorPicker\n          >\n            <input\n              outputFormat=\"hex\"\n              type=\"text\"\n              [allowTransparency]=\"false\"\n              [disabled]=\"disabled\"\n              [ngModel]=\"styleState.fontColor\"\n              [skyColorpickerInput]=\"colorPicker\"\n            />\n          </sky-colorpicker>\n        </div>\n        <div class=\"sky-text-editor-colorpicker-container\">\n          <sky-colorpicker\n            class=\"sky-text-editor-background-color-picker\"\n            label=\"Background color\"\n            [messageStream]=\"backColorpickerStream\"\n            [showResetButton]=\"false\"\n            (selectedColorChanged)=\"onColorpickerColorChanged($event, true)\"\n            #backColorPicker\n          >\n            <input\n              outputFormat=\"rgba\"\n              type=\"text\"\n              [allowTransparency]=\"true\"\n              [disabled]=\"disabled\"\n              [ngModel]=\"styleState.backColor\"\n              [skyColorpickerInput]=\"backColorPicker\"\n            />\n          </sky-colorpicker>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'list'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Bulleted list\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Bulleted list\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('insertUnorderedList')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ul\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"bullet-list-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Numbered list\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Numbered list\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('insertOrderedList')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"list-ol\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"number-list-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'alignment'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Align left\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align left\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyLeft')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-left\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"align-left-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Align center\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align center\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyCenter')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-center\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"center-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Align right\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Align right\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('justifyRight')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"align-right\"> </sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"align-right-text-line\"\n            iconType=\"skyux\"\n          >\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'indentation'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Outdent\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Outdent\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('outdent')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"outdent\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"outdent-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Indent\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Indent\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('indent')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"indent\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"indent-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'undo-redo'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Undo\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Undo\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('undo')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"undo\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"undo-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Redo\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Redo\"\n          [disabled]=\"disabled\"\n          (click)=\"execCommand('redo')\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"repeat\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"redo-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'link'\">\n      <div class=\"sky-switch-icon-group\">\n        <button\n          aria-label=\"Link\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Link\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"{\n            'icon-btn-active': styleState.linkState\n          }\"\n          (click)=\"link()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"link\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"link-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n        <button\n          aria-label=\"Unlink\"\n          class=\"sky-btn sky-btn-default sky-btn-icon\"\n          title=\"Unlink\"\n          [disabled]=\"!styleState.linkState || disabled\"\n          (click)=\"unlink()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"unlink\"> </sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\" icon=\"unlink-line\" iconType=\"skyux\">\n          </sky-icon>\n        </button>\n      </div>\n    </ng-container>\n  </ng-container>\n</sky-toolbar-item>\n"]}

package/esm2015/lib/modules/text-editor/types/editor-command.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=editor-command.js.map

package/esm2015/lib/modules/text-editor/types/editor-command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-command.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/types/editor-command.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * @internal\n */\nexport interface EditorCommand {\n  command: string;\n  value?: any;\n}\n"]}

package/esm2015/lib/modules/text-editor/types/editor-setting.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=editor-setting.js.map

package/esm2015/lib/modules/text-editor/types/editor-setting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-setting.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/types/editor-setting.ts"],"names":[],"mappings":"","sourcesContent":["import { Subject } from 'rxjs';\n\n/**\n * @internal\n */\nexport interface EditorSetting {\n  blurListener: () => void;\n\n  blurObservable: Subject<unknown>;\n\n  clickListener: () => void;\n\n  clickObservable: Subject<unknown>;\n\n  commandChangeObservable: Subject<unknown>;\n\n  iframeElementRef: HTMLIFrameElement;\n\n  inputListener: () => void;\n\n  inputObservable: Subject<unknown>;\n\n  pasteListener: (e: ClipboardEvent) => void;\n\n  selectionChangeObservable: Subject<unknown>;\n\n  selectionListener: () => void;\n}\n"]}

package/esm2015/lib/modules/text-editor/types/font-state.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=font-state.js.map

package/esm2015/lib/modules/text-editor/types/font-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-state.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/types/font-state.ts"],"names":[],"mappings":"","sourcesContent":["export interface SkyTextEditorFont {\n  /**\n   * Specifies the display name of the font.\n   */\n  name: string;\n\n  /**\n   * Specifies the CSS `font-family` value for the font.\n   */\n  value: string;\n}\n"]}

package/esm2015/lib/modules/text-editor/types/menu-type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=menu-type.js.map

package/esm2015/lib/modules/text-editor/types/menu-type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-type.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/types/menu-type.ts"],"names":[],"mappings":"","sourcesContent":["export type SkyTextEditorMenuType = 'edit' | 'format' | 'merge-field';\n"]}

package/esm2015/lib/modules/text-editor/types/style-state.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=style-state.js.map

package/esm2015/lib/modules/text-editor/types/style-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-state.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/types/style-state.ts"],"names":[],"mappings":"","sourcesContent":["export interface SkyTextEditorStyleState {\n  /**\n   * Specifies the background color. Accepts any CSS color value.\n   */\n  backColor: string;\n\n  /**\n   * Specifies the font color. Accepts any CSS color value.\n   */\n  fontColor: string;\n\n  /**\n   * Specifies the font size in pixels.\n   */\n  fontSize: number;\n\n  /**\n   * Specifies the font family. Available values: `\"Blackbaud Sans\"`,\n   * `\"Arial\"`, `\"sans-serif\"`, `\"Arial Black\"`, `\"Courier New\"`, and `\"Times New Roman\"`.\n   */\n  font: string;\n\n  /**\n   * Indicates whether to make text bold.\n   */\n  boldState: boolean;\n\n  /**\n   * Indicates whether to italicize text.\n   */\n  italicState: boolean;\n\n  /**\n   * Indicates whether to underline text.\n   */\n  underlineState: boolean;\n\n  /**\n   * Indicates whether to format text as a link.\n   */\n  linkState: boolean;\n}\n"]}

package/esm2015/lib/modules/text-editor/types/text-editor-merge-field.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=text-editor-merge-field.js.map

package/esm2015/lib/modules/text-editor/types/text-editor-merge-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-editor-merge-field.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/types/text-editor-merge-field.ts"],"names":[],"mappings":"","sourcesContent":["export interface SkyTextEditorMergeField {\n  /**\n   * Specifies an identifier for the merge field.\n   */\n  id: string;\n\n  /**\n   * Specifies display text for the merge field. If it is more than 18 characters, the component truncates to 15 characters.\n   */\n  name: string;\n\n  /**\n   * Specifies the `src` attribute for a preview image to represent the merge field\n   * in the text editor. By default, the `name` value appears in a blue rectangle.\n   */\n  previewImageUrl?: string;\n}\n"]}

package/esm2015/lib/modules/text-editor/types/toolbar-action-type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toolbar-action-type.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-action-type.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/types/toolbar-action-type.ts"],"names":[],"mappings":"","sourcesContent":["export type SkyTextEditorToolbarActionType =\n  | 'font-family'\n  | 'font-size'\n  | 'font-style'\n  | 'color'\n  | 'list'\n  | 'alignment'\n  | 'indentation'\n  | 'undo-redo'\n  | 'link';\n"]}

package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-modal-context.js

@@ -0,0 +1,6 @@
+/**
+ * @internal
+ */
+export class SkyUrlModalContext {
+}
+//# sourceMappingURL=text-editor-url-modal-context.js.map

package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-modal-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-editor-url-modal-context.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/url-modal/text-editor-url-modal-context.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,OAAO,kBAAkB;CAE9B","sourcesContent":["import { UrlModalResult } from './text-editor-url-modal-result';\n\n/**\n * @internal\n */\nexport class SkyUrlModalContext {\n  public urlResult: UrlModalResult;\n}\n"]}

package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-modal-result.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=text-editor-url-modal-result.js.map

package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-modal-result.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-editor-url-modal-result.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/url-modal/text-editor-url-modal-result.ts"],"names":[],"mappings":"","sourcesContent":["import { UrlTarget } from './text-editor-url-target';\n\n/**\n * @internal\n */\nexport interface UrlModalResult {\n  url: string;\n  target: UrlTarget;\n}\n"]}

package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-modal.component.js

@@ -0,0 +1,121 @@
+import { Component } from '@angular/core';
+import { SkyModalInstance } from '@skyux/modals';
+import { SkyValidation } from '@skyux/validation';
+import { SkyUrlModalContext } from './text-editor-url-modal-context';
+import { UrlTarget } from './text-editor-url-target';
+import * as i0 from "@angular/core";
+import * as i1 from "@skyux/modals";
+import * as i2 from "./text-editor-url-modal-context";
+import * as i3 from "@skyux/tabs";
+import * as i4 from "@skyux/forms";
+import * as i5 from "@angular/forms";
+import * as i6 from "@skyux/core";
+import * as i7 from "@skyux/i18n";
+const emailKey = 'mailto:';
+const queryStringParamKey = '?Subject=';
+/**
+ * @internal
+ */
+export class SkyTextEditorUrlModalComponent {
+    constructor(modalInstance, modalContext) {
+        this.modalInstance = modalInstance;
+        this.emailAddressValid = false;
+        this.subject = '';
+        this.target = 0;
+        this.valid = false;
+        this._activeTab = 0;
+        this._emailAddress = '';
+        this._url = 'https://';
+        if (modalContext.urlResult) {
+            if (modalContext.urlResult.url.startsWith(emailKey)) {
+                this.emailAddress = modalContext.urlResult.url.replace(emailKey, '');
+                let queryStringIndex = this.emailAddress.indexOf(queryStringParamKey);
+                queryStringIndex =
+                    queryStringIndex > -1
+                        ? queryStringIndex
+                        : this.emailAddress.indexOf(queryStringParamKey.toLowerCase());
+                /* istanbul ignore else */
+                if (queryStringIndex > -1) {
+                    this.subject = decodeURI(this.emailAddress).slice(queryStringIndex + queryStringParamKey.length);
+                    this.emailAddress = this.emailAddress.slice(0, queryStringIndex);
+                }
+                // Set active tab to email
+                this.activeTab = 1;
+            }
+            else {
+                (this.url = modalContext.urlResult.url),
+                    (this.target = modalContext.urlResult.target);
+                // set active tab to web page
+                this.activeTab = 0;
+            }
+        }
+    }
+    set activeTab(value) {
+        this._activeTab = value;
+        this.valid = this.isValid();
+    }
+    get activeTab() {
+        return this._activeTab;
+    }
+    set emailAddress(value) {
+        this._emailAddress = value;
+        this.valid = this.isValid();
+    }
+    get emailAddress() {
+        return this._emailAddress;
+    }
+    set url(value) {
+        this._url = value;
+        this.valid = this.isValid();
+    }
+    get url() {
+        return this._url;
+    }
+    activeTabChanged(value) {
+        this.activeTab = value;
+    }
+    save() {
+        /* istanbul ignore else */
+        if (this.isValid()) {
+            if (this.activeTab === 0) {
+                this.modalInstance.save({
+                    url: this.url,
+                    target: this.target
+                        ? parseInt(this.target, undefined)
+                        : UrlTarget.None,
+                });
+            }
+            else {
+                this.modalInstance.save({
+                    url: this.getEmailUrl(),
+                    target: UrlTarget.None,
+                });
+            }
+        }
+    }
+    cancel() {
+        this.modalInstance.cancel();
+    }
+    getEmailUrl() {
+        return (emailKey +
+            this.emailAddress +
+            (this.subject ? '?Subject=' + encodeURI(this.subject) : ''));
+    }
+    isValid() {
+        if (this.activeTab === 0) {
+            return !!this.url && SkyValidation.isUrl(this.url);
+        }
+        return !!this.emailAddress && SkyValidation.isEmail(this.emailAddress);
+    }
+}
+SkyTextEditorUrlModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorUrlModalComponent, deps: [{ token: i1.SkyModalInstance }, { token: i2.SkyUrlModalContext }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextEditorUrlModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTextEditorUrlModalComponent, selector: "sky-text-editor-url-modal", ngImport: i0, template: "<sky-modal>\n  <sky-modal-header>\n    {{ 'skyux_text_editor_url_modal_header_label' | skyLibResources }}\n  </sky-modal-header>\n  <sky-modal-content>\n    <sky-tabset\n      data-sky-id=\"test-tabset\"\n      [active]=\"activeTab\"\n      (activeChange)=\"activeTabChanged($event)\"\n    >\n      <sky-tab tabHeading=\"Web page\">\n        <div class=\"sky-form-group sky-text-editor-url-modal-first-field\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label sky-control-label-required\"\n              [for]=\"urlInput.id\"\n            >\n              {{ 'skyux_text_editor_url_modal_url_label' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              type=\"text\"\n              [(ngModel)]=\"url\"\n              skyId\n              #urlInput=\"skyId\"\n            />\n          </sky-input-box>\n        </div>\n        <sky-input-box class=\"sky-form-group\">\n          <label class=\"sky-control-label\" [for]=\"targetInput.id\">\n            {{ 'skyux_text_editor_url_modal_open_label' | skyLibResources }}\n          </label>\n          <select\n            class=\"sky-form-control\"\n            [(ngModel)]=\"target\"\n            skyId\n            #targetInput=\"skyId\"\n          >\n            <option value=\"0\">\n              {{\n                'skyux_text_editor_url_modal_current_option_label'\n                  | skyLibResources\n              }}\n            </option>\n            <option value=\"1\">\n              {{\n                'skyux_text_editor_url_modal_new_option_label' | skyLibResources\n              }}\n            </option>\n          </select>\n        </sky-input-box>\n      </sky-tab>\n      <sky-tab tabHeading=\"Email address\">\n        <div class=\"sky-form-group first-field\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label sky-control-label-required\"\n              [for]=\"emailAddressInput.id\"\n            >\n              {{ 'skyux_text_editor_url_modal_email_label' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              type=\"text\"\n              [(ngModel)]=\"emailAddress\"\n              skyId\n              #emailAddressInput=\"skyId\"\n            />\n          </sky-input-box>\n        </div>\n        <sky-input-box class=\"sky-form-group\">\n          <label class=\"sky-control-label\" [for]=\"subjectInput.id\">\n            {{ 'skyux_text_editor_url_modal_subject_label' | skyLibResources }}\n          </label>\n          <input\n            class=\"sky-form-control\"\n            type=\"text\"\n            [(ngModel)]=\"subject\"\n            skyId\n            #subjectInput=\"skyId\"\n          />\n        </sky-input-box>\n      </sky-tab>\n    </sky-tabset>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      type=\"submit\"\n      class=\"sky-btn sky-btn-primary\"\n      [disabled]=\"!valid\"\n      (click)=\"save()\"\n    >\n      {{ 'skyux_text_editor_url_modal_save_button_label' | skyLibResources }}\n    </button>\n    <button type=\"button\" class=\"sky-btn sky-btn-link\" (click)=\"cancel()\">\n      {{ 'skyux_text_editor_url_modal_cancel_button_label' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-editor-url-modal-first-field{margin-top:15px}\n"], components: [{ type: i1.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i1.λ4, selector: "sky-modal-header" }, { type: i1.λ2, selector: "sky-modal-content" }, { type: i3.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { type: i3.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndex"], outputs: ["close"] }, { type: i4.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: i1.λ3, selector: "sky-modal-footer" }], directives: [{ type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "skyLibResources": i7.SkyLibResourcesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTextEditorUrlModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-text-editor-url-modal',
+                    templateUrl: './text-editor-url-modal.component.html',
+                    styleUrls: ['./text-editor-url-modal.component.scss'],
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyModalInstance }, { type: i2.SkyUrlModalContext }]; } });
+//# sourceMappingURL=text-editor-url-modal.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-editor-url-modal.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/url-modal/text-editor-url-modal.component.ts","../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/url-modal/text-editor-url-modal.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component } from '@angular/core';\n\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport { SkyValidation } from '@skyux/validation';\n\nimport { UrlModalResult } from './text-editor-url-modal-result';\n\nimport { SkyUrlModalContext } from './text-editor-url-modal-context';\n\nimport { UrlTarget } from './text-editor-url-target';\n\nconst emailKey = 'mailto:';\nconst queryStringParamKey = '?Subject=';\n\n/**\n * @internal\n */\n@Component({\n  selector: 'sky-text-editor-url-modal',\n  templateUrl: './text-editor-url-modal.component.html',\n  styleUrls: ['./text-editor-url-modal.component.scss'],\n})\nexport class SkyTextEditorUrlModalComponent {\n  public set activeTab(value: number) {\n    this._activeTab = value;\n    this.valid = this.isValid();\n  }\n  public get activeTab(): number {\n    return this._activeTab;\n  }\n  public set emailAddress(value: string) {\n    this._emailAddress = value;\n    this.valid = this.isValid();\n  }\n  public get emailAddress(): string {\n    return this._emailAddress;\n  }\n\n  public set url(value: string) {\n    this._url = value;\n    this.valid = this.isValid();\n  }\n  public get url(): string {\n    return this._url;\n  }\n\n  public emailAddressValid: boolean = false;\n\n  public subject: string = '';\n\n  public target: number = 0;\n\n  public valid: boolean = false;\n\n  public _activeTab = 0;\n\n  private _emailAddress: string = '';\n\n  private _url: string = 'https://';\n\n  constructor(\n    private readonly modalInstance: SkyModalInstance,\n    modalContext: SkyUrlModalContext\n  ) {\n    if (modalContext.urlResult) {\n      if (modalContext.urlResult.url.startsWith(emailKey)) {\n        this.emailAddress = modalContext.urlResult.url.replace(emailKey, '');\n\n        let queryStringIndex = this.emailAddress.indexOf(queryStringParamKey);\n        queryStringIndex =\n          queryStringIndex > -1\n            ? queryStringIndex\n            : this.emailAddress.indexOf(queryStringParamKey.toLowerCase());\n\n        /* istanbul ignore else */\n        if (queryStringIndex > -1) {\n          this.subject = decodeURI(this.emailAddress).slice(\n            queryStringIndex + queryStringParamKey.length\n          );\n          this.emailAddress = this.emailAddress.slice(0, queryStringIndex);\n        }\n\n        // Set active tab to email\n        this.activeTab = 1;\n      } else {\n        (this.url = modalContext.urlResult.url),\n          (this.target = modalContext.urlResult.target as any);\n\n        // set active tab to web page\n        this.activeTab = 0;\n      }\n    }\n  }\n\n  public activeTabChanged(value: number): void {\n    this.activeTab = value;\n  }\n\n  public save(): void {\n    /* istanbul ignore else */\n    if (this.isValid()) {\n      if (this.activeTab === 0) {\n        this.modalInstance.save({\n          url: this.url,\n          target: this.target\n            ? parseInt(this.target as any, undefined)\n            : UrlTarget.None,\n        } as UrlModalResult);\n      } else {\n        this.modalInstance.save({\n          url: this.getEmailUrl(),\n          target: UrlTarget.None,\n        } as UrlModalResult);\n      }\n    }\n  }\n\n  public cancel(): void {\n    this.modalInstance.cancel();\n  }\n\n  private getEmailUrl(): string {\n    return (\n      emailKey +\n      this.emailAddress +\n      (this.subject ? '?Subject=' + encodeURI(this.subject) : '')\n    );\n  }\n\n  private isValid(): boolean {\n    if (this.activeTab === 0) {\n      return !!this.url && SkyValidation.isUrl(this.url);\n    }\n    return !!this.emailAddress && SkyValidation.isEmail(this.emailAddress);\n  }\n}\n","<sky-modal>\n  <sky-modal-header>\n    {{ 'skyux_text_editor_url_modal_header_label' | skyLibResources }}\n  </sky-modal-header>\n  <sky-modal-content>\n    <sky-tabset\n      data-sky-id=\"test-tabset\"\n      [active]=\"activeTab\"\n      (activeChange)=\"activeTabChanged($event)\"\n    >\n      <sky-tab tabHeading=\"Web page\">\n        <div class=\"sky-form-group sky-text-editor-url-modal-first-field\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label sky-control-label-required\"\n              [for]=\"urlInput.id\"\n            >\n              {{ 'skyux_text_editor_url_modal_url_label' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              type=\"text\"\n              [(ngModel)]=\"url\"\n              skyId\n              #urlInput=\"skyId\"\n            />\n          </sky-input-box>\n        </div>\n        <sky-input-box class=\"sky-form-group\">\n          <label class=\"sky-control-label\" [for]=\"targetInput.id\">\n            {{ 'skyux_text_editor_url_modal_open_label' | skyLibResources }}\n          </label>\n          <select\n            class=\"sky-form-control\"\n            [(ngModel)]=\"target\"\n            skyId\n            #targetInput=\"skyId\"\n          >\n            <option value=\"0\">\n              {{\n                'skyux_text_editor_url_modal_current_option_label'\n                  | skyLibResources\n              }}\n            </option>\n            <option value=\"1\">\n              {{\n                'skyux_text_editor_url_modal_new_option_label' | skyLibResources\n              }}\n            </option>\n          </select>\n        </sky-input-box>\n      </sky-tab>\n      <sky-tab tabHeading=\"Email address\">\n        <div class=\"sky-form-group first-field\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label sky-control-label-required\"\n              [for]=\"emailAddressInput.id\"\n            >\n              {{ 'skyux_text_editor_url_modal_email_label' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              type=\"text\"\n              [(ngModel)]=\"emailAddress\"\n              skyId\n              #emailAddressInput=\"skyId\"\n            />\n          </sky-input-box>\n        </div>\n        <sky-input-box class=\"sky-form-group\">\n          <label class=\"sky-control-label\" [for]=\"subjectInput.id\">\n            {{ 'skyux_text_editor_url_modal_subject_label' | skyLibResources }}\n          </label>\n          <input\n            class=\"sky-form-control\"\n            type=\"text\"\n            [(ngModel)]=\"subject\"\n            skyId\n            #subjectInput=\"skyId\"\n          />\n        </sky-input-box>\n      </sky-tab>\n    </sky-tabset>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      type=\"submit\"\n      class=\"sky-btn sky-btn-primary\"\n      [disabled]=\"!valid\"\n      (click)=\"save()\"\n    >\n      {{ 'skyux_text_editor_url_modal_save_button_label' | skyLibResources }}\n    </button>\n    <button type=\"button\" class=\"sky-btn sky-btn-link\" (click)=\"cancel()\">\n      {{ 'skyux_text_editor_url_modal_cancel_button_label' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"]}

package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-target.js

@@ -0,0 +1,9 @@
+/**
+ * @internal
+ */
+export var UrlTarget;
+(function (UrlTarget) {
+    UrlTarget[UrlTarget["None"] = 0] = "None";
+    UrlTarget[UrlTarget["NewWindow"] = 1] = "NewWindow";
+})(UrlTarget || (UrlTarget = {}));
+//# sourceMappingURL=text-editor-url-target.js.map

package/esm2015/lib/modules/text-editor/url-modal/text-editor-url-target.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-editor-url-target.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/text-editor/src/lib/modules/text-editor/url-modal/text-editor-url-target.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAN,IAAY,SAGX;AAHD,WAAY,SAAS;IACnB,yCAAQ,CAAA;IACR,mDAAa,CAAA;AACf,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB","sourcesContent":["/**\n * @internal\n */\nexport enum UrlTarget {\n  None = 0,\n  NewWindow = 1,\n}\n"]}

package/esm2015/skyux-text-editor.js

@@ -1,5 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
-export * from './public-api';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2t5dXgtdGV4dC1lZGl0b3IuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy90ZXh0LWVkaXRvci9zcmMvc2t5dXgtdGV4dC1lZGl0b3IudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==
+export * from './index';
+//# sourceMappingURL=skyux-text-editor.js.map

package/esm2015/skyux-text-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skyux-text-editor.js","sourceRoot":"","sources":["../../../../../libs/components/text-editor/src/skyux-text-editor.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"]}