UNPKG

@progress/kendo-angular-editor

Version:
254 lines (253 loc) 13.4 kB
/**----------------------------------------------------------------------------------------- * 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 { NgIf } from '@angular/common'; import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms'; import { DialogContentBase, DialogRef, DialogActionsComponent, DialogTitleBarComponent } from '@progress/kendo-angular-dialog'; import { TextBoxComponent, CheckBoxDirective, FormFieldComponent } from '@progress/kendo-angular-inputs'; import { ButtonComponent } from '@progress/kendo-angular-buttons'; import { LabelDirective, LabelComponent } from '@progress/kendo-angular-label'; import { getMark, getSelectionText, expandSelection } from '@progress/kendo-editor-common'; import { isPresent } 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 FileLinkDialogComponent extends DialogContentBase { dialog; localization; editor; command; hrefInput; linkForm = new FormGroup({ 'href': new FormControl('', Validators.required), 'text': new FormControl({ value: '', disabled: true }, Validators.required), 'title': new FormControl('') }); constructor(dialog, localization) { super(dialog); this.dialog = dialog; this.localization = localization; } onCancelAction() { this.dialog.close(); } onConfirmAction() { const linkData = this.getData(); this.editor.exec(this.command, linkData); this.dialog.close(); this.editor.view.focus(); } get titleText() { return this.localization.get(this.command); } setData(state, options) { if (this.command === 'createLink') { this.linkForm.addControl('target', new FormControl()); } const linkMark = getMark(state, state.schema.marks['link']); if (linkMark) { this.linkForm.reset({ href: linkMark.attrs['href'], title: linkMark.attrs['title'], target: isPresent(linkMark.attrs['target']), text: this.setLinkText(state) }); return; } if (state.selection.empty) { const currentState = options.applyToWord ? expandSelection(state, () => { }, options).state : state; if (!currentState.selection.empty) { this.linkForm.patchValue({ 'text': getSelectionText(currentState) }); } } else { this.linkForm.patchValue({ 'text': getSelectionText(state) }); } } textForWithPrefix(key) { const prefix = this.command === 'createLink' ? 'link' : 'file'; return this.textFor(prefix + key); } textFor(key) { return this.localization.get(key); } setLinkText(state) { const selection = state.selection; if (selection.empty && selection.$cursor) { const cursor = selection.$cursor; const cursorNodeIndex = cursor.index(); const parentNode = cursor.parent; return parentNode.child(cursorNodeIndex).text; } else { return getSelectionText(state); } } getData() { const linkData = this.linkForm.value; if (isPresent(this.linkForm.controls['target'])) { linkData.target = linkData.target ? '_blank' : null; } return linkData; } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileLinkDialogComponent, deps: [{ token: i1.DialogRef }, { token: i2.EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileLinkDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor", command: "command" }, viewQueries: [{ propertyName: "hrefInput", first: true, predicate: ["hrefInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: ` <kendo-dialog-titlebar (close)="onCancelAction()"> {{ titleText }} </kendo-dialog-titlebar> <form class="k-form k-form-md" novalidate [formGroup]="linkForm"> <kendo-formfield> <kendo-label labelCssClass="k-form-label" [for]="hrefInput" [text]="textForWithPrefix('WebAddress')" ></kendo-label> <kendo-textbox #hrefInput formControlName="href" ></kendo-textbox> </kendo-formfield> <kendo-formfield> <kendo-label labelCssClass="k-form-label" [for]="textInput" [text]="textForWithPrefix('Text')" ></kendo-label> <kendo-textbox #textInput formControlName="text" ></kendo-textbox> </kendo-formfield> <kendo-formfield> <kendo-label labelCssClass="k-form-label" [for]="titleInput" [text]="textForWithPrefix('Title')" ></kendo-label> <kendo-textbox #titleInput formControlName="title" ></kendo-textbox> </kendo-formfield> <ng-container *ngIf="command === 'createLink'"> <kendo-formfield> <ng-container> <span class="k-checkbox-wrap"> <input id='k-target-blank' type='checkbox' kendoCheckBox formControlName="target" /> </span> <label [labelClass]="false" class='k-checkbox-label' for='k-target-blank'>{{ textForWithPrefix('OpenInNewWindow') }}</label> </ng-container> </kendo-formfield> </ng-container> </form> <kendo-dialog-actions layout="start"> <button kendoButton [disabled]="linkForm.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }, { 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: FileLinkDialogComponent, decorators: [{ type: Component, args: [{ template: ` <kendo-dialog-titlebar (close)="onCancelAction()"> {{ titleText }} </kendo-dialog-titlebar> <form class="k-form k-form-md" novalidate [formGroup]="linkForm"> <kendo-formfield> <kendo-label labelCssClass="k-form-label" [for]="hrefInput" [text]="textForWithPrefix('WebAddress')" ></kendo-label> <kendo-textbox #hrefInput formControlName="href" ></kendo-textbox> </kendo-formfield> <kendo-formfield> <kendo-label labelCssClass="k-form-label" [for]="textInput" [text]="textForWithPrefix('Text')" ></kendo-label> <kendo-textbox #textInput formControlName="text" ></kendo-textbox> </kendo-formfield> <kendo-formfield> <kendo-label labelCssClass="k-form-label" [for]="titleInput" [text]="textForWithPrefix('Title')" ></kendo-label> <kendo-textbox #titleInput formControlName="title" ></kendo-textbox> </kendo-formfield> <ng-container *ngIf="command === 'createLink'"> <kendo-formfield> <ng-container> <span class="k-checkbox-wrap"> <input id='k-target-blank' type='checkbox' kendoCheckBox formControlName="target" /> </span> <label [labelClass]="false" class='k-checkbox-label' for='k-target-blank'>{{ textForWithPrefix('OpenInNewWindow') }}</label> </ng-container> </kendo-formfield> </ng-container> </form> <kendo-dialog-actions layout="start"> <button kendoButton [disabled]="linkForm.invalid" [primary]="true" (click)="onConfirmAction()" >{{ textFor('dialogInsert') }}</button> <button kendoButton (click)="onCancelAction()" >{{ textFor('dialogCancel') }}</button> </kendo-dialog-actions> `, standalone: true, imports: [DialogTitleBarComponent, ReactiveFormsModule, FormFieldComponent, LabelComponent, TextBoxComponent, NgIf, CheckBoxDirective, LabelDirective, DialogActionsComponent, ButtonComponent] }] }], ctorParameters: function () { return [{ type: i1.DialogRef }, { type: i2.EditorLocalizationService }]; }, propDecorators: { editor: [{ type: Input }], command: [{ type: Input }], hrefInput: [{ type: ViewChild, args: ['hrefInput'] }] } });