@progress/kendo-angular-editor
Version:
Kendo UI Editor for Angular
141 lines (140 loc) • 7.03 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Component, Input, ViewChild } from '@angular/core';
import { DialogRef, DialogContentBase, DialogActionsComponent, DialogTitleBarComponent } from '@progress/kendo-angular-dialog';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
import { EditorLocalizationService } from '../localization/editor-localization.service';
import { EditorComponent } from '../editor.component';
import { ColorPickerComponent } from '@progress/kendo-angular-inputs';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-dialog";
import * as i2 from "../localization/editor-localization.service";
/**
* @hidden
*/
export class ColorPickerDialogComponent extends DialogContentBase {
dialog;
localization;
editor;
colorPicker;
value;
title;
editorCommand;
paletteSettings;
icon;
svgIcon;
view;
views;
constructor(dialog, localization) {
super(dialog);
this.dialog = dialog;
this.localization = localization;
}
handleActiveColorClick(event) {
event.preventOpen();
this.value = event.color;
}
handleClearButtonClick() {
this.editor.exec(this.editorCommand);
}
onCancelAction() {
this.dialog.close();
}
onConfirmAction() {
if (this.value) {
this.editor.exec(this.editorCommand, this.value);
}
this.dialog.close();
this.editor.view.focus();
}
setData(args) {
this.editor = args.editor;
this.value = args.value;
this.svgIcon = args.svgIcon;
this.editorCommand = args.editorCommand;
this.paletteSettings = args.paletteSettings;
this.icon = args.icon;
this.views = args.view ? [args.view] : args.views;
}
textFor(key) {
return this.localization.get(key);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerDialogComponent, deps: [{ token: i1.DialogRef }, { token: i2.EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "colorPicker", first: true, predicate: ["colorpicker"], descendants: true, read: ColorPickerComponent, static: true }], usesInheritance: true, ngImport: i0, template: `
<kendo-dialog-titlebar (close)="onCancelAction()">
{{ textFor(editorCommand) }}
</kendo-dialog-titlebar>
<div [style.text-align]="'center'">
<kendo-colorpicker
#colorpicker
[views]="views"
[format]="'hex'"
[attr.title]="title"
[icon]="icon"
[svgIcon]="svgIcon"
[(value)]="value"
[paletteSettings]="paletteSettings"
(activeColorClick)="handleActiveColorClick($event)"
(clearButtonClick)="handleClearButtonClick()"
>
</kendo-colorpicker>
</div>
<kendo-dialog-actions layout="start">
<button
kendoButton
[primary]="true"
(click)="onConfirmAction()"
>{{ textFor('dialogApply') }}</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: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "adaptiveMode", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { 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: ColorPickerDialogComponent, decorators: [{
type: Component,
args: [{
template: `
<kendo-dialog-titlebar (close)="onCancelAction()">
{{ textFor(editorCommand) }}
</kendo-dialog-titlebar>
<div [style.text-align]="'center'">
<kendo-colorpicker
#colorpicker
[views]="views"
[format]="'hex'"
[attr.title]="title"
[icon]="icon"
[svgIcon]="svgIcon"
[(value)]="value"
[paletteSettings]="paletteSettings"
(activeColorClick)="handleActiveColorClick($event)"
(clearButtonClick)="handleClearButtonClick()"
>
</kendo-colorpicker>
</div>
<kendo-dialog-actions layout="start">
<button
kendoButton
[primary]="true"
(click)="onConfirmAction()"
>{{ textFor('dialogApply') }}</button>
<button
kendoButton
(click)="onCancelAction()"
>{{ textFor('dialogCancel') }}</button>
</kendo-dialog-actions>
`,
standalone: true,
imports: [DialogTitleBarComponent, ColorPickerComponent, DialogActionsComponent, ButtonComponent]
}]
}], ctorParameters: function () { return [{ type: i1.DialogRef }, { type: i2.EditorLocalizationService }]; }, propDecorators: { editor: [{
type: Input
}], colorPicker: [{
type: ViewChild,
args: ['colorpicker', { read: ColorPickerComponent, static: true }]
}] } });