@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
371 lines (370 loc) • 10.5 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, Renderer2, SimpleChanges } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { InputFillMode, InputRounded, InputSize } from '../common/models';
import { SignatureCloseEvent, SignatureOpenEvent } from './events';
import { SVGIcon } from '@progress/kendo-svg-icons';
import * as i0 from "@angular/core";
/**
* 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 declare class SignatureComponent implements ControlValueAccessor {
private element;
private renderer;
private ngZone;
private cd;
localization: LocalizationService;
private cdr;
staticHostClasses: boolean;
/**
* @hidden
*/
focusableId: string;
direction: string;
/**
* Sets the read-only state of the Signature.
*
* Set to `true` to prevent editing.
*
* @default false
*/
readonly: boolean;
/**
* 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: boolean;
/**
* Sets the width of the Signature in pixels.
*
* You can also set the width using inline styles or CSS.
*/
width: number;
/**
* Sets the height of the Signature in pixels.
*
* You can also set the height using inline styles or CSS.
*/
height: number;
/**
* Gets or sets the value of the Signature.
*
* The value is a Base64-encoded PNG image.
*/
set value(value: string);
get value(): string;
/**
* @hidden
*/
svgIcon(name: string): SVGIcon;
/**
* Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
*
* @default 0
*/
set tabindex(value: number);
get tabindex(): number;
/**
* Sets the padding of the Signature internal controls
* ([ee example]({% slug appearance_signature %}#toc-size)).
*
* @default 'medium'
*/
size: InputSize;
/**
* Sets the border radius of the Signature
* ([see example](slug:appearance_signature#rounded-corners)).
*
* @default 'medium'
*/
rounded: InputRounded;
/**
* Sets the background and border styles of the Signature
* ([see example](slug:appearance_signature#toc-fill-mode)).
*
* @default 'solid'
*/
fillMode: InputFillMode;
/**
* 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: any;
/**
* 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: any;
/**
* Sets the stroke width of the Signature.
*
* @default 1
*/
strokeWidth: number;
/**
* When set to `true`, smooths out signature lines.
*
* @default false
*/
smooth: boolean;
/**
* When set to `true`, allows the Signature to be maximized.
*
* @default true
*/
maximizable: boolean;
/**
* @hidden
*/
maximized: boolean;
/**
* Sets the scale factor for the popup.
*
* The Signature width and height are multiplied by this value when showing the popup.
*
* @default 3
*/
popupScale: number;
/**
* 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: number;
/**
* @hidden
*/
parentLocalization: LocalizationService;
/**
* When set to `true`, hides the dotted line in the background.
*
* @default false
*/
hideLine: boolean;
/**
* Fires when the signature value changes.
*/
valueChange: EventEmitter<string>;
/**
* Fires before the popup opens.
*
* This event is preventable. If you cancel it, the popup stays closed.
*/
open: EventEmitter<SignatureOpenEvent>;
/**
* Fires before the popup closes.
*
* This event is preventable. If you cancel it, the popup stays open.
*/
close: EventEmitter<SignatureCloseEvent>;
/**
* Fires when the Signature receives focus.
*/
onFocus: EventEmitter<any>;
/**
* Fires when the Signature loses focus.
*/
onBlur: EventEmitter<any>;
/**
* @hidden
*/
minimize: EventEmitter<void>;
canvas: ElementRef;
minimizeButton: ElementRef;
maximizeButton: ElementRef;
/**
* Indicates if the Signature wrapper is focused.
*/
isFocused: boolean;
/**
* Indicates if the Signature popup is open.
*/
isOpen: boolean;
/**
* @hidden
*/
get isEmpty(): boolean;
/**
* @hidden
*/
get canvasLabel(): string;
/**
* @hidden
*/
get clearTitle(): string;
/**
* @hidden
*/
get minimizeTitle(): string;
/**
* @hidden
*/
get maximizeTitle(): string;
/**
* @hidden
*/
get baseWidth(): number;
/**
* @hidden
*/
get baseHeight(): number;
/**
* @hidden
*/
get popupWidth(): number;
/**
* @hidden
*/
get popupHeight(): number;
/**
* @hidden
*/
isDrawing: boolean;
/**
* @hidden
*/
get showMaximize(): boolean;
/**
* @hidden
*/
get showMinimize(): boolean;
/**
* @hidden
*/
get showClear(): boolean;
/**
* @hidden
*/
private get focused();
private set focused(value);
private get options();
private notifyNgTouched;
private notifyNgChanged;
private instance;
private _value;
private _tabindex;
private subscriptions;
private unsubscribe;
private hostClasses;
constructor(element: ElementRef, renderer: Renderer2, ngZone: NgZone, cd: ChangeDetectorRef, localization: LocalizationService, cdr: ChangeDetectorRef);
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
/**
* @hidden
*/
onClear(): void;
/**
* @hidden
*/
onValueChange(): Promise<void>;
/**
* @hidden
*/
onDialogValueChange(value: string): void;
/**
* @hidden
*/
onDialogClick(e: any): void;
/**
* @hidden
*/
onDialogKeydown(e: any): void;
/**
* @hidden
*/
onDialogClose(): void;
/**
* Clears the value of the Signature.
*/
reset(): void;
/**
* 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?: boolean): void;
/**
* @hidden
*/
onMaximize(): Promise<void>;
/**
* @hidden
*/
onMinimize(): void;
private applyHostClasses;
private readThemeColors;
/**
* Focuses the Signature wrapper container.
*/
focus(): void;
/**
* @hidden
*/
onWrapperFocus(): void;
/**
* Blurs the Signature.
*/
blur(): void;
/**
* @hidden
*/
onWrapperBlur(): void;
/**
* @hidden
*/
onWrapperClick(_event: MouseEvent): void;
/**
* @hidden
*/
writeValue(value: string): void;
/**
* @hidden
*/
registerOnChange(fn: any): void;
/**
* @hidden
*/
registerOnTouched(fn: any): void;
/**
* @hidden
*/
setDisabledState(isDisabled: boolean): void;
/**
* @hidden
*/
popupValue: any;
private onDraw;
private onDrawEnd;
private addEventListeners;
private getMessage;
static ɵfac: i0.ɵɵFactoryDeclaration<SignatureComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SignatureComponent, "kendo-signature", ["kendoSignature"], { "focusableId": { "alias": "focusableId"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "color": { "alias": "color"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; }; "smooth": { "alias": "smooth"; "required": false; }; "maximizable": { "alias": "maximizable"; "required": false; }; "maximized": { "alias": "maximized"; "required": false; }; "popupScale": { "alias": "popupScale"; "required": false; }; "exportScale": { "alias": "exportScale"; "required": false; }; "parentLocalization": { "alias": "parentLocalization"; "required": false; }; "hideLine": { "alias": "hideLine"; "required": false; }; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; "minimize": "minimize"; }, never, never, true, never>;
}