sk-front-lib 0.17.48 → 0.17.49

package/fesm2020/sk-front-lib-article.mjs

@@ -0,0 +1,771 @@
+import * as i0 from '@angular/core';
+import { Injectable, Inject, EventEmitter, forwardRef, Directive, Input, Output, Component, NgModule } from '@angular/core';
+import { SkFile } from 'sk-front-lib/model';
+import * as i1 from 'sk-front-lib/api';
+import FroalaEditor from 'froala-editor';
+import 'froala-editor/js/plugins.pkgd.min.js';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+class SkArticleService {
+    constructor(environment) {
+        this.environment = environment;
+        this.initializeFroala();
+    }
+    initializeFroala() {
+        FroalaEditor.DefineIconTemplate('material_design', '<i class="material-icons">[NAME]</i>');
+        this.loadFontWeight();
+        this.registerShortcuts();
+    }
+    loadFontWeight() {
+        // Define an icon.
+        FroalaEditor.DefineIcon('font-weight', { NAME: 'format_size', template: 'material_design' });
+        // Define a dropdown button.
+        FroalaEditor.RegisterCommand('font-weight-drop', {
+            // Button title.
+            title: 'Font Weight',
+            // Mark the button as a dropdown.
+            type: 'dropdown',
+            // Specify the icon for the button.
+            // If this option is not specified, the button name will be used.
+            icon: 'font-weight',
+            // Options for the dropdown.
+            options: {
+                100: 'Thin',
+                300: 'Light',
+                400: 'Regular',
+                500: 'Medium',
+                700: 'Bold',
+                900: 'Black'
+            },
+            // If present, the options property will be ignored.
+            // It can be used to define a custom HTML for the dropdown.
+            // html: function () {
+            //     // The current context is the editor instance.
+            //     return '';
+            // },
+            // Save the dropdown action into undo stack.
+            undo: true,
+            // Focus inside the editor before callback.
+            focus: true,
+            // Refresh the button state after the callback.
+            refreshAfterCallback: true,
+            // Callback.
+            callback(cmd, val, params) {
+                this.format.removeStyle('font-weight');
+                this.format.applyStyle('font-weight', val);
+            },
+            // Called when the dropdown button state might have changed.
+            // refresh: function ($btn) {
+            //     // The current context is the editor instance.
+            //     console.log (this.selection.element());
+            //     console.log(this);
+            // },
+            // Called when the dropdown is shown.
+            // refreshOnShow: function ($btn, $dropdown) {
+            //     // The current context is the editor instance.
+            //     console.log (this.selection.element());
+            // }
+        });
+    }
+    registerShortcuts() {
+        FroalaEditor.RegisterShortcut(49, 'paragraphFormat', 'H1', '1', false);
+        FroalaEditor.RegisterShortcut(50, 'paragraphFormat', 'H2', '2', false);
+        FroalaEditor.RegisterShortcut(51, 'paragraphFormat', 'H3', '3', false);
+        FroalaEditor.RegisterShortcut(52, 'paragraphFormat', 'N', '4', false);
+        FroalaEditor.RegisterShortcut(66, 'font-weight-drop', '700');
+    }
+    getBaseConfig() {
+        return {
+            key: 'Ig1A7vB2D2E2E1F1B4muvugzxmwA-7I-7A5B-21qrC-11A2B2C2A1C9B3B3C6E2C1==',
+            editorClass: 'sk-custom',
+            fontFamily: {
+                'Noto Sans KR, Noto Sans, Arial,Helvetica,sans-serif': 'Noto Sans',
+                'Roboto, Arial,Helvetica,sans-serif': 'Roboto',
+                'Georgia,serif': 'Georgia',
+                'Impact,Charcoal,sans-serif': 'Impact',
+                'Tahoma,Geneva,sans-serif': 'Tahoma',
+                '\'Times New Roman\',Times,serif': 'Times New Roman',
+                'Verdana,Geneva,sans-serif': 'Verdana'
+            },
+            imageDefaultWidth: 0,
+            // remove image manager
+            // imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
+            imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL'],
+            imageEditButtons: ['imageAlign', 'imageCaption', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageAlt', 'imageSize'],
+            imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif'],
+            // remove video upload
+            // ['videoBack', '|', 'videoByURL', 'videoEmbed', 'videoUpload']
+            videoInsertButtons: ['videoBack', '|', 'videoByURL', 'videoEmbed'],
+            videoUpload: false,
+            videoResponsive: true,
+            pastePlain: true,
+            pasteDeniedAttrs: ['class', 'id', 'style'],
+            pasteDeniedTags: ['div'],
+            wordPasteKeepFormatting: false,
+            imagePaste: false,
+            quickInsertEnabled: false,
+            paragraphFormat: {
+                H1: '대제목',
+                H2: '소제목',
+                H3: '문단 제목',
+                N: '본문'
+            },
+            // toolbarContainer: '.sk-custom-editor-toolbar',
+            toolbarSticky: false,
+            toolbarBottom: false,
+            attribution: false,
+            helpSets: [
+                {
+                    title: 'Gearlounge Custom',
+                    commands: [
+                        { val: 'OSkey1', desc: '대제목' },
+                        { val: 'OSkey2', desc: '소제목' },
+                        { val: 'OSkey3', desc: '문단 제목' },
+                        { val: 'OSkey4', desc: '본문' }
+                    ]
+                },
+                {
+                    title: 'Inline Editor',
+                    commands: [
+                        { val: 'OSkeyE', desc: 'Show the editor' }
+                    ]
+                },
+                {
+                    title: 'Common actions',
+                    commands: [
+                        { val: 'OSkeyC', desc: 'Copy' },
+                        { val: 'OSkeyX', desc: 'Cut' },
+                        { val: 'OSkeyV', desc: 'Paste' },
+                        { val: 'OSkeyZ', desc: 'Undo' },
+                        { val: 'OSkeyShift+Z', desc: 'Redo' },
+                        { val: 'OSkeyK', desc: 'Insert Link' },
+                        { val: 'OSkeyP', desc: 'Insert Image' }
+                    ]
+                },
+                {
+                    title: 'Basic Formatting',
+                    commands: [
+                        { val: 'OSkeyA', desc: 'Select All' },
+                        { val: 'OSkeyB', desc: 'Bold' },
+                        { val: 'OSkeyI', desc: 'Italic' },
+                        { val: 'OSkeyU', desc: 'Underline' },
+                        { val: 'OSkeyS', desc: 'Strikethrough' },
+                        { val: 'OSkey]', desc: 'Increase Indent' },
+                        { val: 'OSkey[', desc: 'Decrease Indent' }
+                    ]
+                },
+                {
+                    title: 'Quote',
+                    commands: [
+                        { val: 'OSkey\'', desc: 'Increase quote level' },
+                        { val: 'OSkeyShift+\'', desc: 'Decrease quote level' }
+                    ]
+                },
+                {
+                    title: 'Image / Video',
+                    commands: [
+                        { val: 'OSkey+', desc: 'Resize larger' },
+                        { val: 'OSkey-', desc: 'Resize smaller' }
+                    ]
+                },
+                {
+                    title: 'Table',
+                    commands: [
+                        { val: 'Alt+Space', desc: 'Select table cell' },
+                        { val: 'Shift+Left/Right arrow', desc: 'Extend selection one cell' },
+                        { val: 'Shift+Up/Down arrow', desc: 'Extend selection one row' }
+                    ]
+                },
+                {
+                    title: 'Navigation',
+                    commands: [
+                        { val: 'OSkey/', desc: 'Shortcuts' },
+                        { val: 'Alt+F10', desc: 'Focus popup / toolbar' },
+                        { val: 'Esc', desc: 'Return focus to previous position' }
+                    ]
+                }
+            ],
+        };
+    }
+    getToolbar(type = 'default') {
+        if (type === 'default') {
+            return {
+                toolbarButtons: {
+                    moreText: {
+                        buttons: ['font-weight-drop', 'fontFamily', 'fontSize', 'textColor', 'clearFormatting', 'italic', 'strikeThrough', 'subscript', 'superscript', 'backgroundColor', 'inlineClass', 'inlineStyle'],
+                        buttonsVisible: 5
+                    },
+                    moreParagraph: {
+                        buttons: ['paragraphFormat', 'alignLeft', 'alignCenter', 'formatUL', 'quote', 'alignRight', 'alignJustify', 'formatOLSimple', 'formatOL', 'paragraphStyle', 'lineHeight', 'outdent', 'indent'],
+                        buttonsVisible: 5
+                    },
+                    moreRich: {
+                        buttons: ['insertLink', 'insertImage', 'insertVideo', 'insertHR', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile'],
+                        buttonsVisible: 4
+                    },
+                    moreMisc: {
+                        buttons: ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
+                        align: 'right',
+                        buttonsVisible: 3
+                    }
+                },
+                toolbarButtonsSm: {
+                    moreText: {
+                        buttons: ['font-weight-drop', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
+                        buttonsVisible: 2
+                    },
+                    moreParagraph: {
+                        buttons: ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'],
+                        buttonsVisible: 2
+                    },
+                    moreRich: {
+                        buttons: ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR'],
+                        buttonsVisible: 2
+                    },
+                    moreMisc: {
+                        buttons: ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
+                        align: 'right',
+                        buttonsVisible: 2
+                    }
+                },
+            };
+        }
+        else if (type === 'simple') {
+            return {
+                toolbarButtons: [['font-weight-drop', 'fontFamily', 'fontSize', 'textColor', 'clearFormatting'], ['paragraphFormat', 'alignLeft', 'alignCenter', 'formatUL', 'quote'], ['insertLink']],
+                toolbarButtonsSm: [['font-weight-drop', 'fontFamily', 'fontSize', 'textColor', 'clearFormatting'], ['paragraphFormat', 'alignLeft', 'alignCenter', 'formatUL', 'quote'], ['insertLink']],
+            };
+        }
+    }
+}
+SkArticleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SkArticleService, deps: [{ token: 'environment' }], target: i0.ɵɵFactoryTarget.Injectable });
+SkArticleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SkArticleService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SkArticleService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['environment']
+                }] }]; } });
+
+class SkFroalaEditorDirective {
+    constructor(el, zone) {
+        this.zone = zone;
+        // editor options
+        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;
+        // froalaModel directive as output: update model if editor contentChanged
+        this.froalaModelChange = new EventEmitter();
+        // froalaInit directive as output: send manual editor initialization
+        this.froalaInit = new EventEmitter();
+        // Begin ControlValueAccesor methods.
+        this.onChange = (_) => {
+        };
+        this.onTouched = () => {
+        };
+        const element = el.nativeElement;
+        // check if the element is a special tag
+        if (this.SPECIAL_TAGS.indexOf(element.tagName.toLowerCase()) != -1) {
+            this._hasSpecialTag = true;
+        }
+        this._element = element;
+        this.zone = zone;
+    }
+    // End ControlValueAccesor methods.
+    // froalaEditor directive as input: store the editor options
+    set froalaEditor(opts) {
+        this._opts = this.clone(opts || this._opts);
+        this._opts = { ...this._opts };
+    }
+    // froalaModel directive as input: store initial editor content
+    set froalaModel(content) {
+        this.updateEditor(content);
+    }
+    // Form model content changed.
+    writeValue(content) {
+        this.updateEditor(content);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // TODO: replace clone method with better possible alternate
+    clone(item) {
+        const me = this;
+        if (!item) {
+            return item;
+        } // null, undefined values check
+        let types = [Number, String, Boolean], result;
+        // normalizing primitives if someone did new String('aaa'), or new Number('444');
+        types.forEach(function (type) {
+            if (item instanceof type) {
+                result = type(item);
+            }
+        });
+        if (typeof result == 'undefined') {
+            if (Object.prototype.toString.call(item) === '[object Array]') {
+                result = [];
+                item.forEach(function (child, index, array) {
+                    result[index] = me.clone(child);
+                });
+            }
+            else if (typeof item == 'object') {
+                // testing that this is DOM
+                if (item.nodeType && typeof item.cloneNode == 'function') {
+                    result = item.cloneNode(true);
+                }
+                else if (!item.prototype) { // check that this is a literal
+                    if (item instanceof Date) {
+                        result = new Date(item);
+                    }
+                    else {
+                        // it is an object literal
+                        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;
+    }
+    // Update editor with model contents.
+    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();
+            }
+        }
+    }
+    // update model if editor contentChanged
+    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;
+                // Update froalaModel.
+                this.froalaModelChange.emit(modelContent);
+                // Update form model.
+                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;
+        // Check if we have events on the editor.
+        if (this._editor.events) {
+            // bind contentChange and keyup event to froalaModel
+            this._editor.events.on('contentChanged', function () {
+                setTimeout(function () {
+                    self.updateModel();
+                }, 0);
+            });
+            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);
+        // init editor
+        this.zone.runOutsideAngular(() => {
+            // Add listeners on initialized event.
+            if (!this._opts.events) {
+                this._opts.events = {};
+            }
+            // Register initialized event.
+            this.registerEvent('initialized', this._opts.events && this._opts.events.initialized);
+            const existingInitCallback = this._opts.events.initialized;
+            // Default initialized event.
+            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;
+            }
+            // Initialize the Froala Editor.
+            this._editor = new FroalaEditor(this._element, this._opts);
+        });
+    }
+    setHtml() {
+        this._editor.html.set(this._model || '');
+        // This will reset the undo stack everytime the model changes externally. Can we fix this?
+        this._editor.undo.reset();
+        this._editor.undo.saveStep();
+    }
+    setContent(firstTime = false) {
+        const self = this;
+        // Set initial content
+        if (this._model || this._model == '') {
+            this._oldModel = this._model;
+            if (this._hasSpecialTag) {
+                const tags = this._model;
+                // add tags on element
+                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;
+    }
+    // send manual editor initialization
+    generateManualController() {
+        const controls = {
+            initialize: this.createEditor.bind(this),
+            destroy: this.destroyEditor.bind(this),
+            getEditor: this.getEditor.bind(this),
+        };
+        this.froalaInit.emit(controls);
+    }
+    // TODO not sure if ngOnInit is executed after @inputs
+    ngAfterViewInit() {
+        // check if output froalaInit is present. Maybe observers is private and should not be used?? TODO how to better test that an output directive is present.
+        if (!this.froalaInit.observers.length) {
+            this.createEditor();
+        }
+        else {
+            this.generateManualController();
+        }
+    }
+    ngOnDestroy() {
+        this.destroyEditor();
+    }
+}
+SkFroalaEditorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SkFroalaEditorDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+SkFroalaEditorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: SkFroalaEditorDirective, selector: "[froalaEditor]", inputs: { froalaEditor: "froalaEditor", froalaModel: "froalaModel" }, outputs: { froalaModelChange: "froalaModelChange", froalaInit: "froalaInit" }, providers: [{
+            provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SkFroalaEditorDirective),
+            multi: true
+        }], exportAs: ["froalaEditor"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SkFroalaEditorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[froalaEditor]',
+                    exportAs: 'froalaEditor',
+                    providers: [{
+                            provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SkFroalaEditorDirective),
+                            multi: true
+                        }]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { froalaEditor: [{
+                type: Input
+            }], froalaModel: [{
+                type: Input
+            }], froalaModelChange: [{
+                type: Output
+            }], froalaInit: [{
+                type: Output
+            }] } });
+
+class SkArticleEditorComponent {
+    constructor(_apiService, _articleService) {
+        this._apiService = _apiService;
+        this._articleService = _articleService;
+        this.toolbarType = 'default';
+        this._initOptions();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // ------------------------------------------1-----------------------------------------------------------
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+    ngOnInit() {
+    }
+    ngOnChanges(changes) {
+        this._initData();
+        this._initOptions();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+    getData() {
+        return { content: this.content, images: this.images };
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+    _initData() {
+        if (!this.article) {
+            return;
+        }
+        this.content = this.article.content;
+        this.images = this.article.images || [];
+    }
+    _initOptions() {
+        this.editorConfig = Object.assign({}, this._articleService.getBaseConfig(), {
+            requestHeaders: {
+                'Authorization': 'Bearer ' + this._apiService.getToken(),
+                'ngsw-bypass': 'true'
+            },
+            imageUploadParams: {
+                imageUrl: this._articleService.environment.apiServer + '/api/public/images/'
+            },
+            imageUploadParam: 'file',
+            imageUploadRemoteUrls: true,
+            imageUploadURL: this._articleService.environment.apiServer + '/external/froala/upload',
+            fileUploadParams: {
+                imageUrl: this._articleService.environment.apiServer + '/api/public/files/'
+            },
+            fileUploadParam: 'file',
+            fileUploadURL: this._articleService.environment.apiServer + '/external/froala/upload',
+            events: {
+                'image.inserted': ($img, response) => {
+                    this._addImage(JSON.parse(response).file);
+                },
+                'image.removed': ($img) => {
+                    console.log($img, $img.dataset);
+                    for (let i = 0; i < $img.length; i++) {
+                        this._removeImage(Number($img[i].dataset.id));
+                    }
+                }
+            },
+            ...this._articleService.getToolbar(this.toolbarType)
+        });
+    }
+    _addImage(file) {
+        this.images.push(new SkFile(file));
+    }
+    _removeImage(id) {
+        const index = this.images.findIndex(value => value.id === id);
+        if (index > -1) {
+            this.images.splice(index, 1);
+        }
+    }
+}
+SkArticleEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SkArticleEditorComponent, deps: [{ token: i1.SkApiService }, { token: SkArticleService }], target: i0.ɵɵFactoryTarget.Component });
+SkArticleEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: SkArticleEditorComponent, selector: "sk-article-editor", inputs: { article: "article", toolbarType: "toolbarType" }, usesOnChanges: true, ngImport: i0, template: "<div [froalaEditor]=\"editorConfig\" [(froalaModel)]=\"content\"></div>\n", styles: [":host{position:relative;display:block}\n"], directives: [{ type: SkFroalaEditorDirective, selector: "[froalaEditor]", inputs: ["froalaEditor", "froalaModel"], outputs: ["froalaModelChange", "froalaInit"], exportAs: ["froalaEditor"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SkArticleEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sk-article-editor', template: "<div [froalaEditor]=\"editorConfig\" [(froalaModel)]=\"content\"></div>\n", styles: [":host{position:relative;display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.SkApiService }, { type: SkArticleService }]; }, propDecorators: { article: [{
+                type: Input
+            }], toolbarType: [{
+                type: Input
+            }] } });
+
+class SkArticleModule {
+}
+SkArticleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SkArticleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkArticleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SkArticleModule, declarations: [SkArticleEditorComponent,
+        SkFroalaEditorDirective], imports: [CommonModule], exports: [SkArticleEditorComponent,
+        SkFroalaEditorDirective] });
+SkArticleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SkArticleModule, providers: [], imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SkArticleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkArticleEditorComponent,
+                        SkFroalaEditorDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        SkArticleEditorComponent,
+                        SkFroalaEditorDirective
+                    ],
+                    providers: []
+                }]
+        }] });
+
+class SkArticleEditorServerComponent {
+    constructor(_apiService) {
+        this._apiService = _apiService;
+        this.toolbarType = 'default';
+        this._initOptions();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // ------------------------------------------1-----------------------------------------------------------
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+    ngOnInit() {
+    }
+    ngOnChanges(changes) {
+        this._initData();
+        this._initOptions();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+    getData() {
+        return { content: this.content, images: this.images };
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+    _initData() {
+        if (!this.article) {
+            return;
+        }
+        this.content = this.article.content;
+        this.images = this.article.images || [];
+    }
+    _initOptions() {
+    }
+}
+SkArticleEditorServerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SkArticleEditorServerComponent, deps: [{ token: i1.SkApiService }], target: i0.ɵɵFactoryTarget.Component });
+SkArticleEditorServerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: SkArticleEditorServerComponent, selector: "sk-article-editor", inputs: { article: "article", toolbarType: "toolbarType" }, usesOnChanges: true, ngImport: i0, template: "<div>Server</div>\n", styles: [":host{position:relative;display:block}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SkArticleEditorServerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sk-article-editor', template: "<div>Server</div>\n", styles: [":host{position:relative;display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.SkApiService }]; }, propDecorators: { article: [{
+                type: Input
+            }], toolbarType: [{
+                type: Input
+            }] } });
+
+class SkArticleServerModule {
+    static forRoot(environment) {
+        return {
+            ngModule: SkArticleServerModule,
+            providers: []
+        };
+    }
+}
+SkArticleServerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SkArticleServerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkArticleServerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SkArticleServerModule, declarations: [SkArticleEditorServerComponent], imports: [CommonModule], exports: [SkArticleEditorServerComponent] });
+SkArticleServerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SkArticleServerModule, providers: [], imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SkArticleServerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkArticleEditorServerComponent,
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        SkArticleEditorServerComponent,
+                    ],
+                    providers: []
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkArticleEditorComponent, SkArticleEditorServerComponent, SkArticleModule, SkArticleServerModule, SkArticleService, SkFroalaEditorDirective };
+//# sourceMappingURL=sk-front-lib-article.mjs.map