ngx-wig/index.js

import { Component, EventEmitter, Input, NgModule, Output, ViewChild, ViewEncapsulation, forwardRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var NgxWigToolbarService = (function () {
    function NgxWigToolbarService() {
        this._buttonLibrary = {
            list1: { title: 'Unordered List', command: 'insertunorderedlist', styleClass: 'list-ul' },
            list2: { title: 'Ordered List', command: 'insertorderedlist', styleClass: 'list-ol' },
            bold: { title: 'Bold', command: 'bold', styleClass: 'bold' },
            italic: { title: 'Italic', command: 'italic', styleClass: 'italic' },
            link: { title: 'Link', command: 'createlink', styleClass: 'link' }
        };
        this._defaultButtonsList = ['list1', 'list2', 'bold', 'italic', 'link'];
    }
    /**
     * @param {?} buttons
     * @return {?}
     */
    NgxWigToolbarService.prototype.setButtons = /**
     * @param {?} buttons
     * @return {?}
     */
    function (buttons) {
        // if(!angular.isArray(buttons)) {
        //   throw 'Argument "buttons" should be an array';
        // }
        this._defaultButtonsList = buttons;
    };
    
    /**
     * @param {?} name
     * @param {?} title
     * @param {?} command
     * @param {?} styleClass
     * @return {?}
     */
    NgxWigToolbarService.prototype.addStandardButton = /**
     * @param {?} name
     * @param {?} title
     * @param {?} command
     * @param {?} styleClass
     * @return {?}
     */
    function (name, title, command, styleClass) {
        if (!name || !title || !command) {
            throw 'Arguments "name", "title" and "command" are required';
        }
        styleClass = styleClass || '';
        this._buttonLibrary[name] = { title: title, command: command, styleClass: styleClass };
        this._defaultButtonsList.push(name);
    };
    /**
     * @param {?} name
     * @param {?} pluginName
     * @return {?}
     */
    NgxWigToolbarService.prototype.addCustomButton = /**
     * @param {?} name
     * @param {?} pluginName
     * @return {?}
     */
    function (name, pluginName) {
        if (!name || !pluginName) {
            throw 'Arguments "name" and "pluginName" are required';
        }
        this._buttonLibrary[name] = { pluginName: pluginName, isComplex: true };
        this._defaultButtonsList.push(name);
    };
    /**
     * @param {?=} buttonsList
     * @return {?}
     */
    NgxWigToolbarService.prototype.getToolbarButtons = /**
     * @param {?=} buttonsList
     * @return {?}
     */
    function (buttonsList) {
        var _this = this;
        var /** @type {?} */ buttons = this._defaultButtonsList;
        var /** @type {?} */ toolbarButtons = [];
        if (typeof buttonsList !== 'undefined') {
            buttons = string2array(buttonsList);
        }
        buttons.forEach(function (buttonKey) {
            if (!buttonKey) {
                return;
            }
            if (!_this._buttonLibrary[buttonKey]) {
                throw 'There is no "' + buttonKey + '" in your library. Possible variants: ' + Object.keys(_this._buttonLibrary);
            }
            var /** @type {?} */ button = Object.assign({}, _this._buttonLibrary[buttonKey]);
            // button.isActive = () => {return !!this.command && document.queryCommandState(this.command);}
            toolbarButtons.push(button);
        });
        return toolbarButtons;
    };
    return NgxWigToolbarService;
}());
/**
 * @param {?} keysString
 * @return {?}
 */
function string2array(keysString) {
    return keysString.split(',').map(Function.prototype.call, String.prototype.trim);
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var NgxWigComponent = (function () {
    function NgxWigComponent(_ngWigToolbarService) {
        this._ngWigToolbarService = _ngWigToolbarService;
        this.isSourceModeAllowed = false;
        this.contentChange = new EventEmitter();
        this.editMode = false;
        this.toolbarButtons = [];
        this.hasFocus = false;
        this.propagateChange = function (_) { };
        // hardcoded icons theme for now
        this.iconsTheme = "nw-button-mdi";
    }
    /**
     * @return {?}
     */
    NgxWigComponent.prototype.toggleEditMode = /**
     * @return {?}
     */
    function () {
        this.editMode = !this.editMode;
    };
    /**
     * @param {?} command
     * @param {?} options
     * @return {?}
     */
    NgxWigComponent.prototype.execCommand = /**
     * @param {?} command
     * @param {?} options
     * @return {?}
     */
    function (command, options) {
        if (this.editMode) {
            return false;
        }
        if (document.queryCommandSupported && !document.queryCommandSupported(command)) {
            throw 'The command "' + command + '" is not supported';
        }
        if (command === 'createlink' || command === 'insertImage') {
            options = window.prompt('Please enter the URL', 'http://');
            if (!options) {
                return;
            }
        }
        // use insertHtml for `createlink` command to account for IE/Edge purposes, in case there is no selection
        var /** @type {?} */ selection = document.getSelection().toString();
        if (command === 'createlink' && selection === '') {
            document.execCommand('insertHtml', false, '<a href="' + options + '">' + options + '</a>');
        }
        else {
            document.execCommand(command, false, options);
        }
        this.container.focus();
    };
    /**
     * @return {?}
     */
    NgxWigComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        var _this = this;
        this.toolbarButtons = this._ngWigToolbarService.getToolbarButtons(this.buttons);
        this.container = this.ngxWigEditable.nativeElement;
        if (this.content) {
            this.container.innerHTML = this.content;
        }
        // view --> model
        ('keyup change focus click'.split(' ')).forEach(function (event) {
            return _this.container.addEventListener(event, function () {
                _this.content = _this.container.innerHTML;
                _this.contentChange.emit(_this.content);
                _this.propagateChange(_this.content);
            }, false);
        });
    };
    /**
     * @param {?} changes
     * @return {?}
     */
    NgxWigComponent.prototype.ngOnChanges = /**
     * @param {?} changes
     * @return {?}
     */
    function (changes) {
        if (this.container && changes['content']) {
            // clear the previous content
            this.container.innerHTML = '';
            // add the new content
            this.pasteHtmlAtCaret(changes['content'].currentValue);
        }
    };
    /**
     * @param {?} event
     * @return {?}
     */
    NgxWigComponent.prototype.onChange = /**
     * @param {?} event
     * @return {?}
     */
    function (event) {
        // model -> view
        this.container.innerHTML = this.content;
        this.contentChange.emit(this.content);
        this.propagateChange(this.content);
    };
    /**
     * @param {?} value
     * @return {?}
     */
    NgxWigComponent.prototype.writeValue = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        if (value) {
            this.content = value;
            this.container.innerHTML = this.content;
        }
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    NgxWigComponent.prototype.registerOnChange = /**
     * @param {?} fn
     * @return {?}
     */
    function (fn) {
        this.propagateChange = fn;
    };
    /**
     * @return {?}
     */
    NgxWigComponent.prototype.registerOnTouched = /**
     * @return {?}
     */
    function () { };
    /**
     * @return {?}
     */
    NgxWigComponent.prototype.shouldShowPlaceholder = /**
     * @return {?}
     */
    function () {
        return this.placeholder
            && !this.hasFocus
            && !this.container.innerText;
    };
    /**
     * @param {?} html
     * @return {?}
     */
    NgxWigComponent.prototype.pasteHtmlAtCaret = /**
     * @param {?} html
     * @return {?}
     */
    function (html) {
        var /** @type {?} */ sel, /** @type {?} */ range;
        if (window.getSelection) {
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                // append the content in a temporary div
                var /** @type {?} */ el = document.createElement('div');
                el.innerHTML = html;
                var /** @type {?} */ frag = document.createDocumentFragment(), /** @type {?} */ node = void 0, /** @type {?} */ lastNode = void 0;
                while ((node = el.firstChild)) {
                    lastNode = frag.appendChild(node);
                }
                range.insertNode(frag);
                // Preserve the selection
                if (lastNode) {
                    range = range.cloneRange();
                    range.setStartAfter(lastNode);
                    range.collapse(true);
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
            }
        }
    };
    /**
     * @param {?} isDisabled
     * @return {?}
     */
    NgxWigComponent.prototype.setDisabledState = /**
     * @param {?} isDisabled
     * @return {?}
     */
    function (isDisabled) {
        this.disabled = isDisabled;
    };
    NgxWigComponent.decorators = [
        { type: Component, args: [{
                    selector: 'ngx-wig',
                    template: "<div class=\"ng-wig\"> <ul class=\"nw-toolbar\" *ngIf=\"toolbarButtons.length\"> <li class=\"nw-toolbar__item\" *ngFor=\"let button of toolbarButtons\"> <div *ngIf=\"!button.isComplex\"> <button type=\"button\" class=\"nw-button\" [ngClass]=\"[button.styleClass, iconsTheme]\" [title]=\"button.title\" (click)=\"execCommand(button.command)\" [disabled]=\"disabled\"> {{ button.title }} </button> </div> </li><!-- --><li class=\"nw-toolbar__item\"> <button type=\"button\" class=\"nw-button nw-button--source\" title=\"Edit HTML\" [class.nw-button--active] = \"editMode\" [ngClass]=\"iconsTheme\" *ngIf=\"isSourceModeAllowed\" (click)=\"toggleEditMode()\" [disabled]=\"disabled\"> Edit HTML </button> </li> </ul> <div class=\"nw-editor-container\" (click)=\"container.focus()\" [ngClass]=\"{ 'nw-editor-container--with-toolbar': toolbarButtons.length }\"> <div class=\"nw-editor__src-container\" *ngIf=\"editMode\"> <textarea [(ngModel)]=\"content\" (ngModelChange)=\"onChange($event)\" class=\"nw-editor__src\"> </textarea> </div> <div class=\"nw-editor\" [ngClass]=\"{ 'nw-disabled': disabled,'nw-invisible': editMode}\"> <div class=\"nw-editor__placeholder\" [innerText]=\"placeholder\" *ngIf=\"shouldShowPlaceholder()\"> </div> <div #ngWigEditable class=\"nw-editor__res\" [attr.contenteditable]=\"!disabled\" [ngClass]=\"{ disabled: disabled}\" (focus)=\"hasFocus = true\" (blur)=\"hasFocus = false\"> </div> </div> </div> </div>",
                    styles: ["/* -------- NG-WIG -------- */ /** * *  RESET BOX MODEL * */ .ng-wig, [class^=\"nw-\"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } /** *   main wrapper for the editor * *  .ngx-wig * */ .ng-wig { display: block; padding: 0; margin: 0; } /** *  styling for toolbar and its items * *  .nw-toolbar *    &__item * */ .nw-toolbar { display: block; margin: 0; padding: 0; list-style: none; font-size: 12px; color: #6B7277; background: -webkit-linear-gradient(90deg, #ffffff 0%, #f9f9f9 100%); background: -moz-linear-gradient(90deg, #ffffff 0%, #f9f9f9 100%); background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%); border: 1px solid #CCCCCC; border-radius: 3px 3px 0 0; } .nw-toolbar__item { display: inline-block; vertical-align: top; margin: 0; border-right: 1px solid #DEDEDE; } .nw-toolbar label { line-height: 30px; display: inline-block; padding: 0 6px 0 3px; } .nw-toolbar input[type=checkbox] { vertical-align: -3px; margin-right: -1px; } /** *  styling for the editor part: source code (original textarea) and resulting div * *  .nw-editor *    &__src *    &__res * */ .nw-editor { display: table; /* Default when height is not set */ height: 300px; background: #fff; cursor: text; width: 100%; } .nw-editor-container { border: 1px solid #CCCCCC; border-radius: 0 0 3px 3px; position: relative; } .nw-editor-container--with-toolbar { border-top: none; } .nw-editor__res { min-height: 100%; padding: 0 8px; display: table-cell; } .nw-editor__placeholder { padding: 1px 8px; color: lightgray; display: table-cell; width: 100%; } .nw-editor__src, .nw-editor__res { width: 100%; outline: none; box-sizing: border-box; border: none; margin: 0; } .nw-editor__res.disabled { opacity: 0.5; } .nw-editor__src-container { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .nw-editor__src { height: 100%; resize: none; padding: 0 8px; } .nw-editor--fixed .nw-editor { display: block; overflow-y: auto; } .nw-editor--fixed .nw-editor__res { padding: 1px 8px; display: block; } .nw-invisible { visibility: hidden; } .nw-editor--fixed .nw-invisible { display: none; } .nw-editor.nw-disabled { cursor: default; } /** *  styling for toolbar button, has two modifiers: active and type of icon for background * *  .nw-button *    &--active *    &--{button type} * */ .nw-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 30px; height: 30px; margin: 0; padding: 0; opacity: 0.5; line-height: 30px; background-color: transparent; background-position: center center; background-repeat: no-repeat; border: none; border-radius: 2px; font-size: 0; cursor: pointer; } .nw-button-fa:before { font-size: 12px; font-family: FontAwesome; } .nw-button-fa.bold:before { content: '\\f032'; } .nw-button-fa.italic:before { content: '\\f033'; } .nw-button-fa.list-ul:before { content: '\\f0ca'; } .nw-button-fa.list-ol:before { content: '\\f0cb'; } .nw-button-fa.link:before { content: '\\f0c1'; } .nw-button-fa.font-color:before { content: '\\f031'; } .nw-button-fa.nw-button--source:before { content: '\\f040'; } .nw-button-fa.clear-styles:before { content: '\\f12d'; } .nw-button-mdi:before { vertical-align: middle; font-size: 14px; font-family: \"Material Design Icons\"; } .nw-button-mdi.bold:before { content: '\\f264'; } .nw-button-mdi.italic:before { content: '\\f277'; } .nw-button-mdi.list-ul:before { content: '\\f279'; } .nw-button-mdi.list-ol:before { content: '\\f27B'; } .nw-button-mdi.link:before { content: '\\f339'; } .nw-button-mdi.font-color:before { content: '\\f6D5'; } .nw-button-mdi.nw-button--source:before { content: '\\f3EB'; } .nw-button-mdi.clear-styles:before { content: '\\f1fE'; } .nw-button:focus { outline: none; } .nw-button:hover, .nw-button.nw-button--active { opacity: 1 } .nw-button--active { background-color: #EEEEEE; } .nw-button:disabled { cursor: default; } .nw-button:disabled:hover { opacity: 0.5; } /** *  styling & formatting of content inside contenteditable div * *  .nw-content * */ .nw-content { padding: 12px; margin: 0; font-family: sans-serif; font-size: 14px; line-height: 24px; } .nw-select { height: 30px; padding: 6px; color: #555; background-color: inherit; border: 0; } .nw-select:disabled { opacity: 0.5; } .nw-select:focus { outline: none; } .nw-button:focus { border-color: lightgray; border-style: solid; } [contenteditable]:empty:before { content: attr(placeholder); color: grey; display: inline-block; }"],
                    providers: [
                        NgxWigToolbarService,
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(function () { return NgxWigComponent; }),
                            multi: true
                        }
                    ],
                    encapsulation: ViewEncapsulation.None
                },] },
    ];
    /** @nocollapse */
    NgxWigComponent.ctorParameters = function () { return [
        { type: NgxWigToolbarService, },
    ]; };
    NgxWigComponent.propDecorators = {
        "content": [{ type: Input },],
        "placeholder": [{ type: Input },],
        "buttons": [{ type: Input },],
        "disabled": [{ type: Input },],
        "isSourceModeAllowed": [{ type: Input },],
        "contentChange": [{ type: Output },],
        "ngxWigEditable": [{ type: ViewChild, args: ['ngWigEditable',] },],
    };
    return NgxWigComponent;
}());

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var NgxWigModule = (function () {
    function NgxWigModule() {
    }
    NgxWigModule.decorators = [
        { type: NgModule, args: [{
                    imports: [
                        CommonModule,
                        FormsModule,
                        ReactiveFormsModule
                    ],
                    declarations: [
                        NgxWigComponent,
                    ],
                    exports: [
                        NgxWigComponent,
                    ],
                    providers: [NgxWigToolbarService]
                },] },
    ];
    /** @nocollapse */
    NgxWigModule.ctorParameters = function () { return []; };
    return NgxWigModule;
}());

export { NgxWigModule, NgxWigComponent, NgxWigToolbarService };