@progress/kendo-angular-editor 3.1.2 → 4.0.0-dev.202204140850

package/esm2015/dialogs/format-dialog.component.js

@@ -0,0 +1,106 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, ViewChild } from '@angular/core';
+import { DialogContentBase } from '@progress/kendo-angular-dialog';
+import { FormatDropDownListComponent } from '../tools/format/editor-format-dropdownlist.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dialog";
+import * as i2 from "../localization/editor-localization.service";
+import * as i3 from "../tools/format/editor-format-dropdownlist.component";
+import * as i4 from "@progress/kendo-angular-buttons";
+/**
+ * @hidden
+ */
+export class FormatDialogComponent extends DialogContentBase {
+    constructor(dialog, localization) {
+        super(dialog);
+        this.dialog = dialog;
+        this.localization = localization;
+        this.data = [];
+    }
+    ngAfterViewInit() {
+        Promise.resolve(null).then(() => {
+            this.formatDropDownList.dropDownList.focus();
+        });
+    }
+    onCancelAction() {
+        this.dialog.close();
+    }
+    onConfirmAction() {
+        if (this.value) {
+            this.editor.exec('format', { tag: this.value });
+        }
+        this.dialog.close();
+    }
+    setData(args) {
+        this.editor = args.editor;
+        this.data = args.data;
+        this.defaultItem = args.defaultItem;
+        this.value = args.value;
+        this.itemDisabled = args.itemDisabled;
+    }
+    textFor(key) {
+        return this.localization.get(key);
+    }
+}
+FormatDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormatDialogComponent, deps: [{ token: i1.DialogRef }, { token: i2.EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FormatDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FormatDialogComponent, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "formatDropDownList", first: true, predicate: ["formatDropDownList"], descendants: true, read: FormatDropDownListComponent, static: true }], usesInheritance: true, ngImport: i0, template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ textFor('format') }}
+        </kendo-dialog-titlebar>
+        <div class="k-editor-dialog">
+            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
+                <div class="k-edit-form-container k-window-content" style="text-align: center;">
+                    <kendo-editor-format-dropdownlist
+                        #formatDropDownList
+                        [defaultItem]="defaultItem"
+                        [data]="data"
+                        [(value)]="value"
+                        [itemDisabled]="itemDisabled"
+                    >
+                    </kendo-editor-format-dropdownlist>
+                </div>
+            </div>
+        </div>
+        <kendo-dialog-actions>
+            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
+            <button kendoButton
+                    (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
+        </kendo-dialog-actions>
+    `, isInline: true, components: [{ type: i1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i3.FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], directives: [{ type: i4.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormatDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ textFor('format') }}
+        </kendo-dialog-titlebar>
+        <div class="k-editor-dialog">
+            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
+                <div class="k-edit-form-container k-window-content" style="text-align: center;">
+                    <kendo-editor-format-dropdownlist
+                        #formatDropDownList
+                        [defaultItem]="defaultItem"
+                        [data]="data"
+                        [(value)]="value"
+                        [itemDisabled]="itemDisabled"
+                    >
+                    </kendo-editor-format-dropdownlist>
+                </div>
+            </div>
+        </div>
+        <kendo-dialog-actions>
+            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
+            <button kendoButton
+                    (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
+        </kendo-dialog-actions>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DialogRef }, { type: i2.EditorLocalizationService }]; }, propDecorators: { editor: [{
+                type: Input
+            }], formatDropDownList: [{
+                type: ViewChild,
+                args: ['formatDropDownList', { read: FormatDropDownListComponent, static: true }]
+            }] } });

package/{dist/es2015 → esm2015}/dialogs/image-dialog.component.js

@@ -2,18 +2,21 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
 import { Component, Input, ViewChild, ElementRef } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { DialogRef, DialogContentBase } from '@progress/kendo-angular-dialog';
+import { DialogContentBase } from '@progress/kendo-angular-dialog';
 import { getNodeFromSelection } from '@progress/kendo-editor-common';
 import { safeString } from '../util';
-import { EditorLocalizationService } from '../localization/editor-localization.service';
 import { guid } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dialog";
+import * as i2 from "../localization/editor-localization.service";
+import * as i3 from "@angular/forms";
+import * as i4 from "@progress/kendo-angular-buttons";
 /**
  * @hidden
  */
-let ImageDialogComponent = class ImageDialogComponent extends DialogContentBase {
+export class ImageDialogComponent extends DialogContentBase {
     constructor(dialog, localization) {
         super(dialog);
         this.dialog = dialog;
@@ -79,18 +82,52 @@ let ImageDialogComponent = class ImageDialogComponent extends DialogContentBase
     normalizeDimension(value) {
         return Number.isNaN(parseInt(value, 10)) || parseInt(value, 10) <= 0 ? '' : safeString(parseInt(value, 10));
     }
-};
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], ImageDialogComponent.prototype, "editor", void 0);
-tslib_1.__decorate([
-    ViewChild('srcInput', { read: ElementRef, static: true }),
-    tslib_1.__metadata("design:type", ElementRef)
-], ImageDialogComponent.prototype, "srcInput", void 0);
-ImageDialogComponent = tslib_1.__decorate([
-    Component({
-        template: `
+}
+ImageDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ImageDialogComponent, deps: [{ token: i1.DialogRef }, { token: i2.EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ImageDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ImageDialogComponent, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "srcInput", first: true, predicate: ["srcInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ textFor('insertImage') }}
+        </kendo-dialog-titlebar>
+        <div class="k-editor-dialog">
+            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
+                <div class="k-edit-form-container k-window-content">
+                    <div class="k-edit-label">
+                        <label [for]="srcInputId">{{ textFor('imageWebAddress') }}</label>
+                    </div>
+                    <div class="k-edit-field">
+                        <input [id]="srcInputId" #srcInput [formControl]="src" type="text" class="k-textbox k-input k-rounded-md" />
+                    </div>
+                    <div class="k-edit-label">
+                        <label [for]="altTextInputId">{{ textFor('imageAltText') }}</label>
+                    </div>
+                    <div class="k-edit-field">
+                        <input [id]="altTextInputId" [formControl]="alt" type="text" class="k-textbox k-input k-rounded-md" />
+                    </div>
+                    <div class="k-edit-label">
+                        <label [for]="widthInputId">{{ textFor('imageWidth') }}</label>
+                    </div>
+                    <div class="k-edit-field">
+                        <input [id]="widthInputId" [formControl]="width" type="text" class="k-textbox k-input k-rounded-md" />
+                    </div>
+                    <div class="k-edit-label">
+                        <label [for]="heightInputId">{{ textFor('imageHeight') }}</label>
+                    </div>
+                    <div class="k-edit-field">
+                        <input [id]="heightInputId" [formControl]="height" type="text" class="k-textbox k-input k-rounded-md" />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <kendo-dialog-actions>
+            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
+            <button kendoButton [disabled]="imageData.invalid"
+                    (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogInsert') }}</button>
+        </kendo-dialog-actions>
+    `, isInline: true, components: [{ type: i1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], directives: [{ type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ImageDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('insertImage') }}
         </kendo-dialog-titlebar>
@@ -130,8 +167,10 @@ ImageDialogComponent = tslib_1.__decorate([
                     (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogInsert') }}</button>
         </kendo-dialog-actions>
     `
-    }),
-    tslib_1.__metadata("design:paramtypes", [DialogRef,
-        EditorLocalizationService])
-], ImageDialogComponent);
-export { ImageDialogComponent };
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DialogRef }, { type: i2.EditorLocalizationService }]; }, propDecorators: { editor: [{
+                type: Input
+            }], srcInput: [{
+                type: ViewChild,
+                args: ['srcInput', { read: ElementRef, static: true }]
+            }] } });

package/esm2015/dialogs/insert-table-dialog.component.js

@@ -0,0 +1,74 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input } from '@angular/core';
+import { DialogContentBase } from '@progress/kendo-angular-dialog';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dialog";
+import * as i2 from "../localization/editor-localization.service";
+import * as i3 from "../tools/tables/popup-table-grid.component";
+import * as i4 from "@progress/kendo-angular-buttons";
+/**
+ * @hidden
+ */
+export class InsertTableDialogComponent extends DialogContentBase {
+    constructor(dialog, localization) {
+        super(dialog);
+        this.dialog = dialog;
+        this.localization = localization;
+    }
+    onCancelAction() {
+        this.dialog.close();
+        this.editor.view.focus();
+    }
+    onCellClick(args) {
+        this.dialog.close();
+        this.editor.exec("insertTable", args);
+        this.editor.view.focus();
+    }
+    setData(args) {
+        this.editor = args.editor;
+    }
+    textFor(key) {
+        return this.localization.get(key);
+    }
+}
+InsertTableDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InsertTableDialogComponent, deps: [{ token: i1.DialogRef }, { token: i2.EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+InsertTableDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: InsertTableDialogComponent, selector: "ng-component", inputs: { editor: "editor" }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ textFor('insertTable') }}
+        </kendo-dialog-titlebar>
+        <div class="k-editor-dialog">
+            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
+                <div class="k-ct-popup k-window-content" style="text-align: center;">
+                    <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
+                </div>
+            </div>
+        </div>
+        <kendo-dialog-actions>
+            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
+        </kendo-dialog-actions>
+    `, isInline: true, components: [{ type: i1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i3.PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], directives: [{ type: i4.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InsertTableDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ textFor('insertTable') }}
+        </kendo-dialog-titlebar>
+        <div class="k-editor-dialog">
+            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
+                <div class="k-ct-popup k-window-content" style="text-align: center;">
+                    <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
+                </div>
+            </div>
+        </div>
+        <kendo-dialog-actions>
+            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
+        </kendo-dialog-actions>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DialogRef }, { type: i2.EditorLocalizationService }]; }, propDecorators: { editor: [{
+                type: Input
+            }] } });

package/esm2015/dialogs/source-dialog.component.js

@@ -0,0 +1,89 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, ViewChild, Input } from '@angular/core';
+// import { EditorService } from '../editor.service';
+import { DialogContentBase } from '@progress/kendo-angular-dialog';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dialog";
+import * as i2 from "../localization/editor-localization.service";
+import * as i3 from "@progress/kendo-angular-buttons";
+/**
+ * @hidden
+ */
+export class SourceDialogComponent extends DialogContentBase {
+    constructor(dialog, localization) {
+        super(dialog);
+        this.dialog = dialog;
+        this.localization = localization;
+        this.data = '';
+    }
+    ngAfterViewInit() {
+        Promise.resolve(null).then(() => {
+            this.textarea.nativeElement.focus();
+        });
+    }
+    onCancelAction() {
+        this.dialog.close();
+    }
+    onConfirmAction() {
+        this.editor.exec('setHTML', this.getData());
+        this.dialog.close();
+        this.editor.view.focus();
+    }
+    getData() {
+        return this.textarea.nativeElement.value;
+    }
+    setData() {
+        this.data = this.indent(this.editor.getSource());
+    }
+    textFor(key) {
+        return this.localization.get(key);
+    }
+    indent(content) {
+        return content
+            .replace(/<\/(p|li|ul|ol|h[1-6]|table|tr|td|th)>/gi, '</$1>\n')
+            .replace(/<(ul|ol)([^>]*)><li/gi, '<$1$2>\n<li')
+            .replace(/<br \/>/gi, '<br />\n')
+            .replace(/\n$/, '');
+    }
+}
+SourceDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SourceDialogComponent, deps: [{ token: i1.DialogRef }, { token: i2.EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+SourceDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SourceDialogComponent, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ textFor('viewSource') }}
+        </kendo-dialog-titlebar>
+        <textarea [value]="data" #textarea class="k-textarea k-editor-textarea"></textarea>
+        <kendo-dialog-actions>
+            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
+            <button kendoButton (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogUpdate') }}</button>
+        </kendo-dialog-actions>
+    `, isInline: true, styles: ["\n            >>> .k-editor-textarea {\n                height: 100%;\n            }\n        "], components: [{ type: i1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], directives: [{ type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SourceDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    styles: [
+                        `
+            >>> .k-editor-textarea {
+                height: 100%;
+            }
+        `
+                    ],
+                    template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ textFor('viewSource') }}
+        </kendo-dialog-titlebar>
+        <textarea [value]="data" #textarea class="k-textarea k-editor-textarea"></textarea>
+        <kendo-dialog-actions>
+            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
+            <button kendoButton (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogUpdate') }}</button>
+        </kendo-dialog-actions>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DialogRef }, { type: i2.EditorLocalizationService }]; }, propDecorators: { editor: [{
+                type: Input
+            }], textarea: [{
+                type: ViewChild,
+                args: ['textarea', { static: true }]
+            }] } });