import { __decorate, __metadata } from 'tslib';
import { EventEmitter, Output, Input, Directive, ContentChildren, QueryList, NgZone, ViewChild, Component, forwardRef, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

/**
 * CKGroup component
 * Usage :
 *  <ckeditor [(ngModel)]="data" [config]="{...}" debounce="500">
 *      <ckbutton [name]="'SaveButton'" [command]="'saveCommand'" (click)="save($event)"
 *                [icon]="'/save.png'" [toolbar]="'customGroup,1'" [label]="'Save'">
 *      </ckbutton>
 *   </ckeditor>
 */
let CKButtonDirective = class CKButtonDirective {
    /**
     * CKGroup component
     * Usage :
     *  <ckeditor [(ngModel)]="data" [config]="{...}" debounce="500">
     *      <ckbutton [name]="'SaveButton'" [command]="'saveCommand'" (click)="save($event)"
     *                [icon]="'/save.png'" [toolbar]="'customGroup,1'" [label]="'Save'">
     *      </ckbutton>
     *   </ckeditor>
     */
    constructor() {
        this.click = new EventEmitter();
    }
    initialize(editor) {
        editor.instance.addCommand(this.command, {
            exec: (evt) => {
                this.click.emit(evt);
            },
        });
        editor.instance.ui.addButton(this.name, {
            label: this.label,
            command: this.command,
            toolbar: this.toolbar,
            icon: this.icon,
        });
    }
    ngOnInit() {
        if (!this.name)
            throw new Error('Attribute "name" is required on <ckbutton>');
        if (!this.command)
            throw new Error('Attribute "command" is required on <ckbutton>');
    }
};
__decorate([
    Output(),
    __metadata("design:type", Object)
], CKButtonDirective.prototype, "click", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], CKButtonDirective.prototype, "label", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], CKButtonDirective.prototype, "command", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], CKButtonDirective.prototype, "toolbar", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], CKButtonDirective.prototype, "name", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], CKButtonDirective.prototype, "icon", void 0);
CKButtonDirective = __decorate([
    Directive({
        selector: 'ckbutton',
    })
], CKButtonDirective);

/**
 * CKGroup component
 * Usage :
 *  <ckeditor [(ngModel)]="data" [config]="{...}" debounce="500">
 *      <ckgroup [name]="'exampleGroup2'" [previous]="'1'" [subgroupOf]="'exampleGroup1'">
 *          .
 *          .
 *      </ckgroup>
 *   </ckeditor>
 */
let CKGroupDirective = class CKGroupDirective {
    ngAfterContentInit() {
        // Reconfigure each button's toolbar property within ckgroup to hold its parent's name
        this.toolbarButtons.forEach(button => (button.toolbar = this.name));
    }
    initialize(editor) {
        editor.instance.ui.addToolbarGroup(this.name, this.previous, this.subgroupOf);
        // Initialize each button within ckgroup
        this.toolbarButtons.forEach(button => {
            button.initialize(editor);
        });
    }
};
__decorate([
    Input(),
    __metadata("design:type", String)
], CKGroupDirective.prototype, "name", void 0);
__decorate([
    Input(),
    __metadata("design:type", Object)
], CKGroupDirective.prototype, "previous", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], CKGroupDirective.prototype, "subgroupOf", void 0);
__decorate([
    ContentChildren(CKButtonDirective),
    __metadata("design:type", QueryList)
], CKGroupDirective.prototype, "toolbarButtons", void 0);
CKGroupDirective = __decorate([
    Directive({
        selector: 'ckgroup',
    })
], CKGroupDirective);

var CKEditorComponent_1;
/**
 * CKEditor component
 * Usage :
 *  <ckeditor [(ngModel)]="data" [config]="{...}" debounce="500"></ckeditor>
 */
let CKEditorComponent = CKEditorComponent_1 = class CKEditorComponent {
    /**
     * Constructor
     */
    constructor(zone) {
        this.zone = zone;
        this.change = new EventEmitter();
        this.editorChange = new EventEmitter();
        this.ready = new EventEmitter();
        this.blur = new EventEmitter();
        this.focus = new EventEmitter();
        this.contentDom = new EventEmitter();
        this.fileUploadRequest = new EventEmitter();
        this.fileUploadResponse = new EventEmitter();
        this.paste = new EventEmitter();
        this.drop = new EventEmitter();
        this._value = '';
    }
    get value() {
        return this._value;
    }
    set value(v) {
        if (v !== this._value) {
            this._value = v;
            this.onChange(v);
        }
    }
    ngOnChanges(changes) {
        if (changes.readonly && this.instance) {
            this.instance.setReadOnly(changes.readonly.currentValue);
        }
    }
    /**
     * On component destroy
     */
    ngOnDestroy() {
        if (this.instance) {
            this.instance.removeAllListeners();
            CKEDITOR.instances[this.instance.name].destroy();
            this.instance.destroy();
            this.instance = null;
        }
    }
    /**
     * On component view init
     */
    ngAfterViewInit() {
        this.ckeditorInit(this.config || {});
    }
    /**
     * On component view checked
     */
    ngAfterViewChecked() {
        this.ckeditorInit(this.config || {});
    }
    /**
     * Value update process
     */
    updateValue(value) {
        this.zone.run(() => {
            this.value = value;
            this.onChange(value);
            this.onTouched();
            this.change.emit(value);
        });
    }
    /**
     * CKEditor init
     */
    ckeditorInit(config) {
        if (typeof CKEDITOR === 'undefined') {
            console.warn('CKEditor 4.x is missing (http://ckeditor.com/)');
        }
        else {
            // Check textarea exists
            if (this.instance || !this.documentContains(this.host.nativeElement)) {
                return;
            }
            if (this.readonly) {
                config.readOnly = this.readonly;
            }
            // CKEditor replace textarea
            this.instance = CKEDITOR.replace(this.host.nativeElement, config);
            // Set initial value
            this.instance.setData(this.value);
            // listen for instanceReady event
            this.instance.on('instanceReady', (evt) => {
                // if value has changed while instance loading
                // update instance with current component value
                if (this.instance.getData() !== this.value) {
                    this.instance.setData(this.value);
                }
                // send the evt to the EventEmitter
                this.ready.emit(evt);
            });
            // CKEditor change event
            this.instance.on('change', (evt) => {
                this.onTouched();
                let value = this.instance.getData();
                if (this.value !== value) {
                    // Debounce update
                    if (this.debounce) {
                        if (this.debounceTimeout)
                            clearTimeout(this.debounceTimeout);
                        this.debounceTimeout = setTimeout(() => {
                            this.updateValue(value);
                            this.debounceTimeout = null;
                        }, parseInt(this.debounce));
                        // Live update
                    }
                    else {
                        this.updateValue(value);
                    }
                }
                // Original ckeditor event dispatch
                this.editorChange.emit(evt);
            });
            // CKEditor blur event
            this.instance.on('blur', (evt) => {
                this.blur.emit(evt);
            });
            // CKEditor focus event
            this.instance.on('focus', (evt) => {
                this.focus.emit(evt);
            });
            // CKEditor contentDom event
            this.instance.on('contentDom', (evt) => {
                this.contentDom.emit(evt);
            });
            // CKEditor fileUploadRequest event
            this.instance.on('fileUploadRequest', (evt) => {
                this.fileUploadRequest.emit(evt);
            });
            // CKEditor fileUploadResponse event
            this.instance.on('fileUploadResponse', (evt) => {
                this.fileUploadResponse.emit(evt);
            });
            // CKEditor paste event
            this.instance.on('paste', (evt) => {
                this.paste.emit(evt);
            });
            // CKEditor drop event
            this.instance.on('drop', (evt) => {
                this.drop.emit(evt);
            });
            // Add Toolbar Groups to Editor. This will also add Buttons within groups.
            this.toolbarGroups.forEach(group => {
                group.initialize(this);
            });
            // Add Toolbar Buttons to Editor.
            this.toolbarButtons.forEach(button => {
                button.initialize(this);
            });
        }
    }
    /**
     * Implements ControlValueAccessor
     */
    writeValue(value) {
        this._value = value;
        if (this.instance)
            this.instance.setData(value);
    }
    onChange(_) { }
    onTouched() { }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    documentContains(node) {
        return document.contains ? document.contains(node) : document.body.contains(node);
    }
};
CKEditorComponent.ctorParameters = () => [
    { type: NgZone }
];
__decorate([
    Input(),
    __metadata("design:type", Object)
], CKEditorComponent.prototype, "config", void 0);
__decorate([
    Input(),
    __metadata("design:type", Boolean)
], CKEditorComponent.prototype, "readonly", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], CKEditorComponent.prototype, "debounce", void 0);
__decorate([
    Output(),
    __metadata("design:type", Object)
], CKEditorComponent.prototype, "change", void 0);
__decorate([
    Output(),
    __metadata("design:type", Object)
], CKEditorComponent.prototype, "editorChange", void 0);
__decorate([
    Output(),
    __metadata("design:type", Object)
], CKEditorComponent.prototype, "ready", void 0);
__decorate([
    Output(),
    __metadata("design:type", Object)
], CKEditorComponent.prototype, "blur", void 0);
__decorate([
    Output(),
    __metadata("design:type", Object)
], CKEditorComponent.prototype, "focus", void 0);
__decorate([
    Output(),
    __metadata("design:type", Object)
], CKEditorComponent.prototype, "contentDom", void 0);
__decorate([
    Output(),
    __metadata("design:type", Object)
], CKEditorComponent.prototype, "fileUploadRequest", void 0);
__decorate([
    Output(),
    __metadata("design:type", Object)
], CKEditorComponent.prototype, "fileUploadResponse", void 0);
__decorate([
    Output(),
    __metadata("design:type", Object)
], CKEditorComponent.prototype, "paste", void 0);
__decorate([
    Output(),
    __metadata("design:type", Object)
], CKEditorComponent.prototype, "drop", void 0);
__decorate([
    ViewChild('host', { static: false }),
    __metadata("design:type", Object)
], CKEditorComponent.prototype, "host", void 0);
__decorate([
    ContentChildren(CKButtonDirective),
    __metadata("design:type", QueryList)
], CKEditorComponent.prototype, "toolbarButtons", void 0);
__decorate([
    ContentChildren(CKGroupDirective),
    __metadata("design:type", QueryList)
], CKEditorComponent.prototype, "toolbarGroups", void 0);
__decorate([
    Input(),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], CKEditorComponent.prototype, "value", null);
CKEditorComponent = CKEditorComponent_1 = __decorate([
    Component({
        selector: 'ckeditor',
        providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => CKEditorComponent_1),
                multi: true,
            },
        ],
        template: `
    <textarea #host></textarea>
  `
    }),
    __metadata("design:paramtypes", [NgZone])
], CKEditorComponent);

/**
 * CKEditorModule
 */
let CKEditorModule = class CKEditorModule {
};
CKEditorModule = __decorate([
    NgModule({
        imports: [CommonModule],
        declarations: [CKEditorComponent, CKButtonDirective, CKGroupDirective],
        exports: [CKEditorComponent, CKButtonDirective, CKGroupDirective],
    })
], CKEditorModule);

/**
 * Generated bundle index. Do not edit.
 */

export { CKEditorModule, CKEditorComponent as ɵa, CKButtonDirective as ɵb, CKGroupDirective as ɵc };
//# sourceMappingURL=ng2-ckeditor.js.map