@progress/kendo-angular-editor
Version:
Kendo UI Editor for Angular
231 lines (230 loc) • 10.9 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 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 { FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { DialogRef, DialogContentBase, DialogActionsComponent, DialogTitleBarComponent } from '@progress/kendo-angular-dialog';
import { getNodeFromSelection } from '@progress/kendo-editor-common';
import { guid } from '@progress/kendo-angular-common';
import { TextBoxComponent, FormFieldComponent } from '@progress/kendo-angular-inputs';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
import { LabelComponent } from '@progress/kendo-angular-label';
import { safeString } from '../util';
import { EditorLocalizationService } from '../localization/editor-localization.service';
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";
/**
* @hidden
*/
export class ImageDialogComponent extends DialogContentBase {
dialog;
localization;
editor;
srcInput;
src = new FormControl('', Validators.required);
alt = new FormControl('');
width = new FormControl('', Validators.min(1));
height = new FormControl('', Validators.min(1));
data = {
alt: '',
height: '',
src: '',
width: ''
};
imageData = new FormGroup({
alt: this.alt,
height: this.height,
src: this.src,
width: this.width
});
srcInputId;
altTextInputId;
widthInputId;
heightInputId;
constructor(dialog, localization) {
super(dialog);
this.dialog = dialog;
this.localization = localization;
}
ngOnInit() {
this.srcInputId = `k-${guid()}`;
this.altTextInputId = `k-${guid()}`;
this.widthInputId = `k-${guid()}`;
this.heightInputId = `k-${guid()}`;
}
onCancelAction() {
this.dialog.close();
}
onConfirmAction() {
if (this.src.value) {
this.editor.exec('insertImage', this.getData());
this.dialog.close();
this.editor.view.focus();
}
}
setData(state) {
const node = getNodeFromSelection(state);
if (node) {
this.src.patchValue(node.attrs['src']);
this.alt.patchValue(node.attrs['alt']);
this.width.patchValue(node.attrs['width']);
this.height.patchValue(node.attrs['height']);
}
}
textFor(key) {
return this.localization.get(key);
}
getData() {
return {
alt: this.alt.value,
height: this.normalizeDimension(this.height.value),
src: this.src.value,
width: this.normalizeDimension(this.width.value)
};
}
normalizeDimension(value) {
return Number.isNaN(parseInt(value, 10)) || parseInt(value, 10) <= 0 ? '' : safeString(parseInt(value, 10));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageDialogComponent, deps: [{ token: i1.DialogRef }, { token: i2.EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ImageDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "srcInput", first: true, predicate: ["srcInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
<kendo-dialog-titlebar (close)="onCancelAction()">
{{ textFor('insertImage') }}
</kendo-dialog-titlebar>
<div class="k-form k-form-md">
<kendo-formfield>
<kendo-label
labelCssClass="k-form-label"
[for]="srcInput"
[text]="textFor('imageWebAddress')"
></kendo-label>
<kendo-textbox
#srcInput
[formControl]="src"
></kendo-textbox>
</kendo-formfield>
<kendo-formfield>
<kendo-label
labelCssClass="k-form-label"
[for]="altTextInput"
[text]="textFor('imageAltText')"
></kendo-label>
<kendo-textbox
#altTextInput
[formControl]="alt"
></kendo-textbox>
</kendo-formfield>
<kendo-formfield>
<kendo-label
labelCssClass="k-form-label"
[for]="widthInput"
[text]="textFor('imageWidth')"
></kendo-label>
<kendo-textbox
#widthInput
[formControl]="width"
></kendo-textbox>
</kendo-formfield>
<kendo-formfield>
<kendo-label
[for]="heightInput"
[text]="textFor('imageHeight')"
labelCssClass="k-form-label"
></kendo-label>
<kendo-textbox
#heightInput
[formControl]="height"
></kendo-textbox>
</kendo-formfield>
</div>
<kendo-dialog-actions layout="start">
<button
kendoButton
[disabled]="imageData.invalid"
[primary]="true"
(click)="onConfirmAction()"
>{{ textFor('dialogInsert') }}</button>
<button
kendoButton
(click)="onCancelAction()"
>{{ textFor('dialogCancel') }}</button>
</kendo-dialog-actions>
`, isInline: true, dependencies: [{ kind: "component", type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { kind: "component", type: FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageDialogComponent, decorators: [{
type: Component,
args: [{
template: `
<kendo-dialog-titlebar (close)="onCancelAction()">
{{ textFor('insertImage') }}
</kendo-dialog-titlebar>
<div class="k-form k-form-md">
<kendo-formfield>
<kendo-label
labelCssClass="k-form-label"
[for]="srcInput"
[text]="textFor('imageWebAddress')"
></kendo-label>
<kendo-textbox
#srcInput
[formControl]="src"
></kendo-textbox>
</kendo-formfield>
<kendo-formfield>
<kendo-label
labelCssClass="k-form-label"
[for]="altTextInput"
[text]="textFor('imageAltText')"
></kendo-label>
<kendo-textbox
#altTextInput
[formControl]="alt"
></kendo-textbox>
</kendo-formfield>
<kendo-formfield>
<kendo-label
labelCssClass="k-form-label"
[for]="widthInput"
[text]="textFor('imageWidth')"
></kendo-label>
<kendo-textbox
#widthInput
[formControl]="width"
></kendo-textbox>
</kendo-formfield>
<kendo-formfield>
<kendo-label
[for]="heightInput"
[text]="textFor('imageHeight')"
labelCssClass="k-form-label"
></kendo-label>
<kendo-textbox
#heightInput
[formControl]="height"
></kendo-textbox>
</kendo-formfield>
</div>
<kendo-dialog-actions layout="start">
<button
kendoButton
[disabled]="imageData.invalid"
[primary]="true"
(click)="onConfirmAction()"
>{{ textFor('dialogInsert') }}</button>
<button
kendoButton
(click)="onCancelAction()"
>{{ textFor('dialogCancel') }}</button>
</kendo-dialog-actions>
`,
standalone: true,
imports: [DialogTitleBarComponent, FormFieldComponent, LabelComponent, TextBoxComponent, ReactiveFormsModule, DialogActionsComponent, ButtonComponent]
}]
}], ctorParameters: function () { return [{ type: i1.DialogRef }, { type: i2.EditorLocalizationService }]; }, propDecorators: { editor: [{
type: Input
}], srcInput: [{
type: ViewChild,
args: ['srcInput']
}] } });