System.register(["@angular/forms", "@angular/core", "froala-editor"], function (exports_1, context_1) {
    "use strict";
    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
        return c > 3 && r && Object.defineProperty(target, key, r), r;
    };
    var __metadata = (this && this.__metadata) || function (k, v) {
        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
    };
    var FroalaEditorDirective_1, forms_1, core_1, froala_editor_1, FroalaEditorDirective;
    var __moduleName = context_1 && context_1.id;
    return {
        setters: [
            function (forms_1_1) {
                forms_1 = forms_1_1;
            },
            function (core_1_1) {
                core_1 = core_1_1;
            },
            function (froala_editor_1_1) {
                froala_editor_1 = froala_editor_1_1;
            }
        ],
        execute: function () {
            FroalaEditorDirective = FroalaEditorDirective_1 = class FroalaEditorDirective {
                constructor(el, zone) {
                    this.zone = zone;
                    this._opts = {
                        immediateAngularModelUpdate: false,
                        angularIgnoreAttrs: null
                    };
                    this.SPECIAL_TAGS = ['img', 'button', 'input', 'a'];
                    this.INNER_HTML_ATTR = 'innerHTML';
                    this._hasSpecialTag = false;
                    this._editorInitialized = false;
                    this._oldModel = null;
                    this.froalaModelChange = new core_1.EventEmitter();
                    this.froalaInit = new core_1.EventEmitter();
                    this.onChange = (_) => {
                    };
                    this.onTouched = () => {
                    };
                    const element = el.nativeElement;
                    if (this.SPECIAL_TAGS.indexOf(element.tagName.toLowerCase()) != -1) {
                        this._hasSpecialTag = true;
                    }
                    this._element = element;
                    this.zone = zone;
                }
                set froalaEditor(opts) {
                    this._opts = this.clone(opts || this._opts);
                    this._opts = Object.assign({}, this._opts);
                }
                set froalaModel(content) {
                    this.updateEditor(content);
                }
                writeValue(content) {
                    this.updateEditor(content);
                }
                registerOnChange(fn) {
                    this.onChange = fn;
                }
                registerOnTouched(fn) {
                    this.onTouched = fn;
                }
                clone(item) {
                    const me = this;
                    if (!item) {
                        return item;
                    }
                    const types = [Number, String, Boolean];
                    let result;
                    types.forEach((type) => {
                        if (item instanceof type) {
                            result = type(item);
                        }
                    });
                    if (typeof result === 'undefined') {
                        if (Object.prototype.toString.call(item) === '[object Array]') {
                            result = [];
                            item.forEach((child, index, array) => {
                                result[index] = me.clone(child);
                            });
                        }
                        else if (typeof item === 'object') {
                            if (item.nodeType && typeof item.cloneNode === 'function') {
                                result = item.cloneNode(true);
                            }
                            else if (!item.prototype) {
                                if (item instanceof Date) {
                                    result = new Date(item);
                                }
                                else {
                                    result = {};
                                    for (const i in item) {
                                        result[i] = me.clone(item[i]);
                                    }
                                }
                            }
                            else {
                                if (false && item.constructor) {
                                    result = new item.constructor();
                                }
                                else {
                                    result = item;
                                }
                            }
                        }
                        else {
                            result = item;
                        }
                    }
                    return result;
                }
                updateEditor(content) {
                    if (JSON.stringify(this._oldModel) === JSON.stringify(content)) {
                        return;
                    }
                    if (!this._hasSpecialTag) {
                        this._oldModel = content;
                    }
                    else {
                        this._model = content;
                    }
                    if (this._editorInitialized) {
                        if (!this._hasSpecialTag) {
                            this._editor.html.set(content);
                        }
                        else {
                            this.setContent();
                        }
                    }
                    else {
                        if (!this._hasSpecialTag) {
                            this._element.innerHTML = content || '';
                        }
                        else {
                            this.setContent();
                        }
                    }
                }
                updateModel() {
                    this.zone.run(() => {
                        let modelContent = null;
                        if (this._hasSpecialTag) {
                            const attributeNodes = this._element.attributes;
                            const attrs = {};
                            for (let i = 0; i < attributeNodes.length; i++) {
                                const attrName = attributeNodes[i].name;
                                if (this._opts.angularIgnoreAttrs && this._opts.angularIgnoreAttrs.indexOf(attrName) != -1) {
                                    continue;
                                }
                                attrs[attrName] = attributeNodes[i].value;
                            }
                            if (this._element.innerHTML) {
                                attrs[this.INNER_HTML_ATTR] = this._element.innerHTML;
                            }
                            modelContent = attrs;
                        }
                        else {
                            const returnedHtml = this._editor.html.get();
                            if (typeof returnedHtml === 'string') {
                                modelContent = returnedHtml;
                            }
                        }
                        if (this._oldModel !== modelContent) {
                            this._oldModel = modelContent;
                            this.froalaModelChange.emit(modelContent);
                            this.onChange(modelContent);
                        }
                    });
                }
                registerEvent(eventName, callback) {
                    if (!eventName || !callback) {
                        return;
                    }
                    if (!this._opts.events) {
                        this._opts.events = {};
                    }
                    this._opts.events[eventName] = callback;
                }
                initListeners() {
                    const self = this;
                    if (this._editor.events) {
                        this._editor.events.on('contentChanged', function () {
                            self.updateModel();
                        });
                        this._editor.events.on('mousedown', function () {
                            setTimeout(function () {
                                self.onTouched();
                            }, 0);
                        });
                        if (this._opts.immediateAngularModelUpdate) {
                            this._editor.events.on('keyup', function () {
                                setTimeout(function () {
                                    self.updateModel();
                                }, 0);
                            });
                        }
                    }
                    this._editorInitialized = true;
                }
                createEditor() {
                    if (this._editorInitialized) {
                        return;
                    }
                    this.setContent(true);
                    this.zone.runOutsideAngular(() => {
                        if (!this._opts.events) {
                            this._opts.events = {};
                        }
                        this.registerEvent('initialized', this._opts.events && this._opts.events.initialized);
                        const existingInitCallback = this._opts.events.initialized;
                        if (!this._opts.events.initialized || !this._opts.events.initialized.overridden) {
                            this._opts.events.initialized = () => {
                                this.initListeners();
                                existingInitCallback && existingInitCallback.call(this._editor, this);
                            };
                            this._opts.events.initialized.overridden = true;
                        }
                        this._editor = new froala_editor_1.default(this._element, this._opts);
                    });
                }
                setHtml() {
                    this._editor.html.set(this._model || '');
                    this._editor.undo.reset();
                    this._editor.undo.saveStep();
                }
                setContent(firstTime = false) {
                    const self = this;
                    if (this._model || this._model === '') {
                        this._oldModel = this._model;
                        if (this._hasSpecialTag) {
                            const tags = this._model;
                            if (tags) {
                                for (const attr in tags) {
                                    if (tags.hasOwnProperty(attr) && attr != this.INNER_HTML_ATTR) {
                                        this._element.setAttribute(attr, tags[attr]);
                                    }
                                }
                                if (tags.hasOwnProperty(this.INNER_HTML_ATTR)) {
                                    this._element.innerHTML = tags[this.INNER_HTML_ATTR];
                                }
                            }
                        }
                        else {
                            if (firstTime) {
                                this.registerEvent('initialized', function () {
                                    self.setHtml();
                                });
                            }
                            else {
                                self.setHtml();
                            }
                        }
                    }
                }
                destroyEditor() {
                    if (this._editorInitialized) {
                        this._editor.destroy();
                        this._editorInitialized = false;
                    }
                }
                getEditor() {
                    if (this._element) {
                        return this._editor;
                    }
                    return null;
                }
                generateManualController() {
                    const controls = {
                        initialize: this.createEditor.bind(this),
                        destroy: this.destroyEditor.bind(this),
                        getEditor: this.getEditor.bind(this),
                    };
                    this.froalaInit.emit(controls);
                }
                ngAfterViewInit() {
                    if (!this.froalaInit.observers.length) {
                        this.createEditor();
                    }
                    else {
                        this.generateManualController();
                    }
                }
                ngOnDestroy() {
                    this.destroyEditor();
                }
            };
            __decorate([
                core_1.Input(),
                __metadata("design:type", Object),
                __metadata("design:paramtypes", [Object])
            ], FroalaEditorDirective.prototype, "froalaEditor", null);
            __decorate([
                core_1.Input(),
                __metadata("design:type", Object),
                __metadata("design:paramtypes", [Object])
            ], FroalaEditorDirective.prototype, "froalaModel", null);
            __decorate([
                core_1.Output(),
                __metadata("design:type", core_1.EventEmitter)
            ], FroalaEditorDirective.prototype, "froalaModelChange", void 0);
            __decorate([
                core_1.Output(),
                __metadata("design:type", core_1.EventEmitter)
            ], FroalaEditorDirective.prototype, "froalaInit", void 0);
            FroalaEditorDirective = FroalaEditorDirective_1 = __decorate([
                core_1.Directive({
                    selector: '[froalaEditor]',
                    exportAs: 'froalaEditor',
                    providers: [
                        {
                            provide: forms_1.NG_VALUE_ACCESSOR, useExisting: core_1.forwardRef(() => FroalaEditorDirective_1),
                            multi: true
                        }
                    ]
                }),
                __metadata("design:paramtypes", [core_1.ElementRef, core_1.NgZone])
            ], FroalaEditorDirective);
            exports_1("FroalaEditorDirective", FroalaEditorDirective);
        }
    };
});

//# sourceMappingURL=froala-editor.directive.js.map
