@progress/kendo-angular-inputs
Version:
Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te
972 lines (965 loc) • 32.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
*-------------------------------------------------------------------------------------------*/
/* eslint-disable @typescript-eslint/no-explicit-any */
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, NgZone, Output, Renderer2, ViewChild } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { anyChanged, closest, isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
import { SignaturePad } from '@progress/kendo-inputs-common';
import { validatePackage } from '@progress/kendo-licensing';
import { isNone, isPresent, ROUNDED_MAP, SIZE_MAP } from '../common/utils';
import { packageMetadata } from '../package-metadata';
import { SignatureCloseEvent, SignatureOpenEvent } from './events';
import { xIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
import { take } from 'rxjs/operators';
import { NgIf } from '@angular/common';
import { LocalizedSignatureMessagesDirective } from './localization/localized-signature-messages.directive';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
import { DialogComponent } from '@progress/kendo-angular-dialog';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
const noop = () => { };
let _id = 0;
const nextId = () => 'k-signature-focusable-' + _id++;
const FOCUSED_CLASS = 'k-focus';
const DEFAULT_SIZE = 'medium';
const DEFAULT_ROUNDED = 'medium';
const DEFAULT_FILL_MODE = 'solid';
const DEFAULT_POPUP_SCALE = 3;
const DEFAULT_EXPORT_SCALE = 2;
const DEFAULT_COLOR = '#000000';
const DEFAULT_BACKGROUND_COLOR = '#ffffff';
const iconsMap = { xIcon, hyperlinkOpenIcon };
/**
* Represents the [Kendo UI Signature component for Angular]({% slug overview_signature %}).
*
* Use the Signature to let users add a hand-drawn signature to forms.
*
* @example
* ```html
* <kendo-signature [(ngModel)]="signatureValue"></kendo-signature>
* ```
*
* @remarks
* Supported children components are: {@link SignatureCustomMessagesComponent}.
*/
export class SignatureComponent {
element;
renderer;
ngZone;
cd;
localization;
cdr;
staticHostClasses = true;
/**
* @hidden
*/
focusableId = nextId();
direction;
/**
* Sets the read-only state of the Signature.
*
* Set to `true` to prevent editing.
*
* @default false
*/
readonly = false;
/**
* Sets the disabled state of the Signature.
*
* Set to `true` to disable the component and prevent any user interaction.
* To disable the component in reactive forms, see [Managing the Signature Disabled State in Reactive Forms](slug:formssupport_signature#toc-managing-the-signature-disabled-state-in-reactive-forms).
*
* @default false
*/
disabled = false;
/**
* Sets the width of the Signature in pixels.
*
* You can also set the width using inline styles or CSS.
*/
width;
/**
* Sets the height of the Signature in pixels.
*
* You can also set the height using inline styles or CSS.
*/
height;
/**
* Gets or sets the value of the Signature.
*
* The value is a Base64-encoded PNG image.
*/
set value(value) {
if (value !== this._value) {
this._value = value;
if (this.instance) {
this.instance.loadImage(value);
}
}
}
get value() {
return this._value;
}
/**
* @hidden
*/
svgIcon(name) {
return iconsMap[name];
}
/**
* Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
*
* @default 0
*/
set tabindex(value) {
const tabindex = Number(value);
const defaultValue = 0;
this._tabindex = !isNaN(tabindex) ? tabindex : defaultValue;
}
get tabindex() {
return !this.disabled ? this._tabindex : undefined;
}
/**
* Sets the padding of the Signature internal controls
* ([ee example]({% slug appearance_signature %}#toc-size)).
*
* @default 'medium'
*/
size = DEFAULT_SIZE;
/**
* Sets the border radius of the Signature
* ([see example](slug:appearance_signature#rounded-corners)).
*
* @default 'medium'
*/
rounded = DEFAULT_ROUNDED;
/**
* Sets the background and border styles of the Signature
* ([see example](slug:appearance_signature#toc-fill-mode)).
*
* @default 'solid'
*/
fillMode = DEFAULT_FILL_MODE;
/**
* Sets the stroke color of the Signature.
*
* Accepts CSS color names and hex values.
* The default value is determined by the theme `$kendo-input-text` variable.
*/
color;
/**
* Sets the background color of the Signature.
*
* Accepts CSS color names and hex values.
* The default value is determined by the theme `$kendo-input-bg` variable.
*/
backgroundColor;
/**
* Sets the stroke width of the Signature.
*
* @default 1
*/
strokeWidth = 1;
/**
* When set to `true`, smooths out signature lines.
*
* @default false
*/
smooth = false;
/**
* When set to `true`, allows the Signature to be maximized.
*
* @default true
*/
maximizable = true;
/**
* @hidden
*/
maximized = false;
/**
* Sets the scale factor for the popup.
*
* The Signature width and height are multiplied by this value when showing the popup.
*
* @default 3
*/
popupScale = DEFAULT_POPUP_SCALE;
/**
* Sets the scale factor for the exported image.
*
* The Signature width and height are multiplied by this value when converting the signature to an image.
*
* @default 2
*/
exportScale = DEFAULT_EXPORT_SCALE;
/**
* @hidden
*/
parentLocalization;
/**
* When set to `true`, hides the dotted line in the background.
*
* @default false
*/
hideLine = false;
/**
* Fires when the signature value changes.
*/
valueChange = new EventEmitter();
/**
* Fires before the popup opens.
*
* This event is preventable. If you cancel it, the popup stays closed.
*/
open = new EventEmitter();
/**
* Fires before the popup closes.
*
* This event is preventable. If you cancel it, the popup stays open.
*/
close = new EventEmitter();
/**
* Fires when the Signature receives focus.
*/
onFocus = new EventEmitter();
/**
* Fires when the Signature loses focus.
*/
onBlur = new EventEmitter();
/**
* @hidden
*/
minimize = new EventEmitter();
canvas;
minimizeButton;
maximizeButton;
/**
* Indicates if the Signature wrapper is focused.
*/
isFocused = false;
/**
* Indicates if the Signature popup is open.
*/
isOpen;
/**
* @hidden
*/
get isEmpty() {
return !this.value;
}
/**
* @hidden
*/
get canvasLabel() {
return this.getMessage('canvasLabel');
}
/**
* @hidden
*/
get clearTitle() {
return this.getMessage('clear');
}
/**
* @hidden
*/
get minimizeTitle() {
return this.getMessage('minimize');
}
/**
* @hidden
*/
get maximizeTitle() {
return this.getMessage('maximize');
}
/**
* @hidden
*/
get baseWidth() {
return this.width || this.element.nativeElement.offsetWidth;
}
/**
* @hidden
*/
get baseHeight() {
return this.height || this.element.nativeElement.offsetHeight;
}
/**
* @hidden
*/
get popupWidth() {
return this.baseWidth * this.popupScale;
}
/**
* @hidden
*/
get popupHeight() {
return this.baseHeight * this.popupScale;
}
/**
* @hidden
*/
isDrawing = false;
/**
* @hidden
*/
get showMaximize() {
return !(this.maximized || this.isDrawing || !this.maximizable || this.disabled);
}
/**
* @hidden
*/
get showMinimize() {
return this.maximized && !this.isDrawing;
}
/**
* @hidden
*/
get showClear() {
return !(this.isEmpty || this.isDrawing || this.readonly || this.disabled);
}
/**
* @hidden
*/
get focused() {
return this.isFocused;
}
set focused(value) {
if (this.isFocused !== value && this.element) {
const wrap = this.element.nativeElement;
if (value && !this.maximized) {
this.renderer.addClass(wrap, FOCUSED_CLASS);
}
else {
this.renderer.removeClass(wrap, FOCUSED_CLASS);
}
this.isFocused = value;
}
}
get options() {
return {
scale: this.maximized ? this.popupScale : 1,
color: this.color,
backgroundColor: this.backgroundColor,
strokeWidth: this.strokeWidth,
smooth: this.smooth,
readonly: this.readonly
};
}
notifyNgTouched = noop;
notifyNgChanged = noop;
instance;
_value;
_tabindex = 0;
subscriptions;
unsubscribe;
hostClasses = [];
constructor(element, renderer, ngZone, cd, localization, cdr) {
this.element = element;
this.renderer = renderer;
this.ngZone = ngZone;
this.cd = cd;
this.localization = localization;
this.cdr = cdr;
validatePackage(packageMetadata);
this.direction = localization.rtl ? 'rtl' : 'ltr';
}
ngOnInit() {
this.subscriptions = this.localization
.changes
.subscribe(({ rtl }) => {
this.direction = rtl ? 'rtl' : 'ltr';
});
}
ngAfterViewInit() {
if (!isDocumentAvailable()) {
return;
}
this.applyHostClasses();
this.ngZone.onStable.pipe(take(1)).subscribe(() => {
this.readThemeColors();
this.instance.setOptions(this.options);
});
this.ngZone.runOutsideAngular(() => {
const element = this.canvas.nativeElement;
this.instance = new SignaturePad(element, {
...this.options,
onChange: () => this.onValueChange(),
onDraw: () => this.onDraw(),
onDrawEnd: () => this.onDrawEnd()
});
if (this.value) {
this.instance.loadImage(this.value);
}
if (this.maximized) {
this.ngZone.onStable.pipe(take(1)).subscribe(() => {
this.minimizeButton?.nativeElement.focus();
});
}
this.addEventListeners();
});
}
ngOnChanges(changes) {
if (anyChanged(['readonly', 'color', 'backgroundColor', 'strokeWidth', 'smooth'], changes, true)) {
this.instance.setOptions(this.options);
}
this.applyHostClasses();
}
ngOnDestroy() {
if (this.instance) {
this.instance.destroy();
this.instance = null;
}
if (this.subscriptions) {
this.subscriptions.unsubscribe();
this.subscriptions = null;
}
if (this.unsubscribe) {
this.unsubscribe();
this.unsubscribe = null;
}
}
/**
* @hidden
*/
onClear() {
this.reset();
this.valueChange.emit(undefined);
this.canvas.nativeElement.focus();
}
/**
* @hidden
*/
async onValueChange() {
const value = await this.instance.exportImage({
width: this.baseWidth * this.exportScale,
height: this.baseHeight * this.exportScale
});
this._value = value;
this.cd.markForCheck();
this.ngZone.run(() => {
this.valueChange.emit(value);
this.notifyNgChanged(value);
});
}
/**
* @hidden
*/
onDialogValueChange(value) {
this.value = value;
this.valueChange.emit(value);
this.notifyNgTouched();
this.notifyNgChanged(value);
}
/**
* @hidden
*/
onDialogClick(e) {
if (e.target.classList.contains('k-overlay')) {
this.isOpen = false;
this.maximizeButton?.nativeElement.focus();
}
}
/**
* @hidden
*/
onDialogKeydown(e) {
if (e.code === Keys.Escape) {
this.isOpen = false;
this.cd.detectChanges();
this.maximizeButton?.nativeElement.focus();
}
}
/**
* @hidden
*/
onDialogClose() {
const args = new SignatureCloseEvent();
this.close.next(args);
if (!args.isDefaultPrevented()) {
this.isOpen = false;
this.ngZone.onStable.pipe(take(1)).subscribe(() => {
(this.maximizeButton || this.element)?.nativeElement?.focus();
});
}
}
/**
* Clears the value of the Signature.
*/
reset() {
if (!isPresent(this.value)) {
return;
}
this.instance?.clear();
this.value = this._value = undefined;
this.notifyNgChanged(undefined);
}
/**
* Toggles the popup of the Signature.
*
* Does not trigger the `open` and `close` events.
*
* @param open Optional. Set to `true` to open or `false` to close the popup.
*/
toggle(open) {
if (this.disabled || this.readonly) {
return;
}
open = isPresent(open) ? open : !this.isOpen;
this.isOpen = open;
}
/**
* @hidden
*/
async onMaximize() {
const args = new SignatureOpenEvent();
this.open.next(args);
if (!args.isDefaultPrevented()) {
this.popupValue = await this.instance.exportImage({
width: this.popupWidth * this.exportScale,
height: this.popupHeight * this.exportScale
});
this.isOpen = true;
this.cd.detectChanges();
}
}
/**
* @hidden
*/
onMinimize() {
this.minimize.next();
}
applyHostClasses() {
const classList = this.element.nativeElement.classList;
this.hostClasses.forEach(([name]) => classList.remove(name));
this.hostClasses = [
[`k-signature-${SIZE_MAP[this.size || DEFAULT_SIZE]}`, !isNone(this.size)],
[`k-input-${this.fillMode || DEFAULT_FILL_MODE}`, !isNone(this.fillMode)],
[`k-rounded-${ROUNDED_MAP[this.rounded || DEFAULT_ROUNDED]}`, !isNone(this.rounded)]
];
this.hostClasses.forEach(([name, enabled]) => classList.toggle(name, enabled));
}
readThemeColors() {
let defaultColor = DEFAULT_COLOR;
let defaultBackgroundColor = DEFAULT_BACKGROUND_COLOR;
if (isDocumentAvailable()) {
const el = this.element.nativeElement;
defaultColor = getComputedStyle(el).color;
defaultBackgroundColor = getComputedStyle(el).backgroundColor;
}
this.color = this.color || defaultColor;
this.backgroundColor = this.backgroundColor || defaultBackgroundColor;
}
/**
* Focuses the Signature wrapper container.
*/
focus() {
this.focused = true;
this.element.nativeElement.focus();
}
/**
* @hidden
*/
onWrapperFocus() {
if (this.focused) {
return;
}
this.ngZone.run(() => {
this.focus();
this.onFocus.emit();
});
}
/**
* Blurs the Signature.
*/
blur() {
this.focused = false;
this.element.nativeElement.blur();
this.notifyNgTouched();
}
/**
* @hidden
*/
onWrapperBlur() {
if (this.isOpen) {
return;
}
this.ngZone.run(() => {
this.onBlur.emit();
this.focused = false;
this.notifyNgTouched();
});
}
/**
* @hidden
*/
onWrapperClick(_event) {
if (this.disabled) {
return;
}
this.focus();
}
/**
* @hidden
*/
writeValue(value) {
this.value = value;
}
/**
* @hidden
*/
registerOnChange(fn) {
this.notifyNgChanged = fn;
}
/**
* @hidden
*/
registerOnTouched(fn) {
this.notifyNgTouched = fn;
}
/**
* @hidden
*/
setDisabledState(isDisabled) {
this.disabled = isDisabled;
this.cdr.markForCheck();
}
/**
* @hidden
*/
popupValue;
onDraw() {
this.isDrawing = true;
this.cd.markForCheck();
}
onDrawEnd() {
this.isDrawing = false;
this.cd.markForCheck();
}
addEventListeners() {
const element = this.element.nativeElement;
const focusIn = this.renderer.listen(element, 'focusin', () => this.onWrapperFocus());
const focusOut = this.renderer.listen(element, 'focusout', (e) => {
const insideWrapper = closest(e.relatedTarget, element => element === this.element.nativeElement);
if (!insideWrapper) {
this.onWrapperBlur();
}
});
const click = this.renderer.listen(element, 'click', () => {
this.ngZone.run((e) => {
this.onWrapperClick(e);
});
});
this.unsubscribe = () => {
focusIn();
focusOut();
click();
};
}
getMessage(key) {
if (this.maximized && this.parentLocalization) {
return this.parentLocalization.get(key);
}
return this.localization.get(key);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SignatureComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SignatureComponent, isStandalone: true, selector: "kendo-signature", inputs: { focusableId: "focusableId", readonly: "readonly", disabled: "disabled", width: "width", height: "height", value: "value", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", color: "color", backgroundColor: "backgroundColor", strokeWidth: "strokeWidth", smooth: "smooth", maximizable: "maximizable", maximized: "maximized", popupScale: "popupScale", exportScale: "exportScale", parentLocalization: "parentLocalization", hideLine: "hideLine" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", minimize: "minimize" }, host: { properties: { "class.k-signature": "this.staticHostClasses", "class.k-input": "this.staticHostClasses", "attr.dir": "this.direction", "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabled", "style.width.px": "this.width", "style.height.px": "this.height" } }, providers: [
LocalizationService,
{ provide: L10N_PREFIX, useValue: 'kendo.signature' },
{ multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SignatureComponent) }
], viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "minimizeButton", first: true, predicate: ["minimize"], descendants: true, read: ElementRef }, { propertyName: "maximizeButton", first: true, predicate: ["maximize"], descendants: true, read: ElementRef }], exportAs: ["kendoSignature"], usesOnChanges: true, ngImport: i0, template: `
<ng-container kendoSignatureLocalizedMessages
i18n-clear="kendo.signature.clear|The message for the Clear button."
clear="Clear"
i18n-maximize="kendo.signature.maximize|The message for the Maximize button."
maximize="Maximize"
i18n-minimize="kendo.signature.minimize|The message for the Minimize button."
minimize="Minimize"
i18n-canvasLabel="kendo.signature.canvasLabel|The message for the Canvas element aria-label."
canvasLabel="Signature canvas">
</ng-container>
<div
#canvas
class="k-signature-canvas"
[attr.tabindex]="tabindex"
[id]="focusableId"
role="img"
[attr.aria-label]="canvasLabel"
></div>
<div class="k-signature-actions k-signature-actions-top">
<button
#maximize
*ngIf="showMaximize"
kendoButton
type="button"
class="k-signature-action k-signature-maximize"
icon="hyperlink-open"
[svgIcon]="svgIcon('hyperlinkOpenIcon')"
fillMode="flat"
[size]="size"
(click)="onMaximize()"
[attr.aria-label]="maximizeTitle"
[title]="maximizeTitle">
</button>
<button
#minimize
*ngIf="showMinimize"
kendoButton
type="button"
class="k-signature-action k-signature-minimize k-rotate-180"
icon="hyperlink-open"
[svgIcon]="svgIcon('hyperlinkOpenIcon')"
fillMode="flat"
[size]="size"
(click)="onMinimize()"
[attr.aria-label]="minimizeTitle"
[title]="minimizeTitle">
</button>
</div>
<div
*ngIf="!hideLine"
class="k-signature-line"
></div>
<div class="k-signature-actions k-signature-actions-bottom">
<button
*ngIf="showClear"
kendoButton
class="k-signature-action k-signature-clear"
icon="close"
type="button"
[svgIcon]="svgIcon('xIcon')"
fillMode="flat"
[size]="size"
[attr.aria-label]="clearTitle"
[title]="clearTitle"
(click)="onClear()" >
</button>
</div>
<kendo-dialog
*ngIf="isOpen"
autoFocusedElement=".k-signature-action.k-signature-minimize"
(click)="onDialogClick($event)"
(keydown)="onDialogKeydown($event)">
<kendo-signature
[readonly]="readonly"
[disabled]="disabled"
[size]="size"
[rounded]="rounded"
[fillMode]="fillMode"
[color]="color"
[backgroundColor]="backgroundColor"
[strokeWidth]="strokeWidth"
[smooth]="smooth"
[value]="popupValue"
(valueChange)="onDialogValueChange($event)"
[hideLine]="hideLine"
[class.k-signature-maximized]="true"
[maximized]="true"
(minimize)="onDialogClose()"
[width]="popupWidth"
[height]="popupHeight"
[popupScale]="popupScale"
[exportScale]="(1 / popupScale) * exportScale"
[parentLocalization]="localization">
</kendo-signature>
</kendo-dialog>
`, isInline: true, dependencies: [{ kind: "component", type: SignatureComponent, selector: "kendo-signature", inputs: ["focusableId", "readonly", "disabled", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "exportScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }, { kind: "directive", type: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "component", type: DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SignatureComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoSignature',
selector: 'kendo-signature',
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
LocalizationService,
{ provide: L10N_PREFIX, useValue: 'kendo.signature' },
{ multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SignatureComponent) }
],
template: `
<ng-container kendoSignatureLocalizedMessages
i18n-clear="kendo.signature.clear|The message for the Clear button."
clear="Clear"
i18n-maximize="kendo.signature.maximize|The message for the Maximize button."
maximize="Maximize"
i18n-minimize="kendo.signature.minimize|The message for the Minimize button."
minimize="Minimize"
i18n-canvasLabel="kendo.signature.canvasLabel|The message for the Canvas element aria-label."
canvasLabel="Signature canvas">
</ng-container>
<div
#canvas
class="k-signature-canvas"
[attr.tabindex]="tabindex"
[id]="focusableId"
role="img"
[attr.aria-label]="canvasLabel"
></div>
<div class="k-signature-actions k-signature-actions-top">
<button
#maximize
*ngIf="showMaximize"
kendoButton
type="button"
class="k-signature-action k-signature-maximize"
icon="hyperlink-open"
[svgIcon]="svgIcon('hyperlinkOpenIcon')"
fillMode="flat"
[size]="size"
(click)="onMaximize()"
[attr.aria-label]="maximizeTitle"
[title]="maximizeTitle">
</button>
<button
#minimize
*ngIf="showMinimize"
kendoButton
type="button"
class="k-signature-action k-signature-minimize k-rotate-180"
icon="hyperlink-open"
[svgIcon]="svgIcon('hyperlinkOpenIcon')"
fillMode="flat"
[size]="size"
(click)="onMinimize()"
[attr.aria-label]="minimizeTitle"
[title]="minimizeTitle">
</button>
</div>
<div
*ngIf="!hideLine"
class="k-signature-line"
></div>
<div class="k-signature-actions k-signature-actions-bottom">
<button
*ngIf="showClear"
kendoButton
class="k-signature-action k-signature-clear"
icon="close"
type="button"
[svgIcon]="svgIcon('xIcon')"
fillMode="flat"
[size]="size"
[attr.aria-label]="clearTitle"
[title]="clearTitle"
(click)="onClear()" >
</button>
</div>
<kendo-dialog
*ngIf="isOpen"
autoFocusedElement=".k-signature-action.k-signature-minimize"
(click)="onDialogClick($event)"
(keydown)="onDialogKeydown($event)">
<kendo-signature
[readonly]="readonly"
[disabled]="disabled"
[size]="size"
[rounded]="rounded"
[fillMode]="fillMode"
[color]="color"
[backgroundColor]="backgroundColor"
[strokeWidth]="strokeWidth"
[smooth]="smooth"
[value]="popupValue"
(valueChange)="onDialogValueChange($event)"
[hideLine]="hideLine"
[class.k-signature-maximized]="true"
[maximized]="true"
(minimize)="onDialogClose()"
[width]="popupWidth"
[height]="popupHeight"
[popupScale]="popupScale"
[exportScale]="(1 / popupScale) * exportScale"
[parentLocalization]="localization">
</kendo-signature>
</kendo-dialog>
`,
standalone: true,
imports: [LocalizedSignatureMessagesDirective, NgIf, ButtonComponent, DialogComponent]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { staticHostClasses: [{
type: HostBinding,
args: ['class.k-signature']
}, {
type: HostBinding,
args: ['class.k-input']
}], focusableId: [{
type: Input
}], direction: [{
type: HostBinding,
args: ['attr.dir']
}], readonly: [{
type: HostBinding,
args: ['class.k-readonly']
}, {
type: Input
}], disabled: [{
type: HostBinding,
args: ['class.k-disabled']
}, {
type: Input
}], width: [{
type: Input
}, {
type: HostBinding,
args: ['style.width.px']
}], height: [{
type: Input
}, {
type: HostBinding,
args: ['style.height.px']
}], value: [{
type: Input
}], tabindex: [{
type: Input
}], size: [{
type: Input
}], rounded: [{
type: Input
}], fillMode: [{
type: Input
}], color: [{
type: Input
}], backgroundColor: [{
type: Input
}], strokeWidth: [{
type: Input
}], smooth: [{
type: Input
}], maximizable: [{
type: Input
}], maximized: [{
type: Input
}], popupScale: [{
type: Input
}], exportScale: [{
type: Input
}], parentLocalization: [{
type: Input
}], hideLine: [{
type: Input
}], valueChange: [{
type: Output
}], open: [{
type: Output
}], close: [{
type: Output
}], onFocus: [{
type: Output,
args: ['focus']
}], onBlur: [{
type: Output,
args: ['blur']
}], minimize: [{
type: Output
}], canvas: [{
type: ViewChild,
args: ['canvas']
}], minimizeButton: [{
type: ViewChild,
args: ['minimize', { read: ElementRef }]
}], maximizeButton: [{
type: ViewChild,
args: ['maximize', { read: ElementRef }]
}] } });