@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
370 lines (369 loc) • 10.6 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 %}).
*
* The Signature allows users to add a hand-drawn signature to forms.
*/
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.
*
* @default false
*/
readonly: boolean;
/**
* Sets the disabled state of the Signature. To disable the component in reactive forms, visit the following [article](slug:formssupport_signature#toc-managing-the-signature-disabled-state-in-reactive-forms)
*
* @default false
*/
disabled: boolean;
/**
* Sets the width of the signature in pixels.
*
* The width can also be set using inline styles and CSS.
*/
width: number;
/**
* The height of the signature in pixels.
*
* The height can also be set using inline styles and 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;
/**
* The size property specifies the padding of the Signature internal controls
* ([see example]({% slug appearance_signature %}#toc-size)).
*
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `none`
*/
size: InputSize;
/**
* The `rounded` property specifies the border radius of the signature
* ([see example](slug:appearance_signature#rounded-corners)).
*
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `full` (not supported by the Signature)
* * `none`
*/
rounded: InputRounded;
/**
* The `fillMode` property specifies the background and border styles of the signature
* ([see example](slug:appearance_signature#toc-fill-mode)).
*
* The possible values are:
* * `flat`
* * `solid` (default)
* * `outline`
* * `none`
*/
fillMode: InputFillMode;
/**
* 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;
/**
* 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;
/**
* The stroke width of the signature.
*
* @default 1
*/
strokeWidth: number;
/**
* A flag indicating whether to smooth out signature lines.
*
* @default false
*/
smooth: boolean;
/**
* A flag indicating if the signature can be maximized.
*
* @default true
*/
maximizable: boolean;
/**
* @hidden
*/
maximized: boolean;
/**
* The scale factor for the popup.
*
* The Signature width and height will be multiplied by the scale when showing the popup.
*
* @default 3
*/
popupScale: number;
/**
* The scale factor for the exported image.
*
* The Signature width and height will be multiplied by the scale when converting the signature to an image.
*
* @default 2
*/
exportScale: number;
/**
* @hidden
*/
parentLocalization: LocalizationService;
/**
* A flag indicating whether the dotted line should be displayed in the background.
*
* @default false
*/
hideLine: boolean;
/**
* Fires each time the signature value is changed.
*/
valueChange: EventEmitter<string>;
/**
* Fires each time the popup is about to open.
* This event is preventable. If you cancel it, the popup will remain closed.
*/
open: EventEmitter<SignatureOpenEvent>;
/**
* Fires each time the popup is about to close.
* This event is preventable. If you cancel it, the popup will remain open.
*/
close: EventEmitter<SignatureCloseEvent>;
/**
* Fires each time Signature is focused.
*/
onFocus: EventEmitter<any>;
/**
* Fires each time the Signature is blurred.
*/
onBlur: EventEmitter<any>;
/**
* @hidden
*/
minimize: EventEmitter<void>;
canvas: ElementRef;
minimizeButton: ElementRef;
maximizeButton: ElementRef;
/**
* Indicates whether the Signature wrapper is focused.
*/
isFocused: boolean;
/**
* Indicates whether 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 of the component.
*
* @param open An optional parameter. Specifies whether the popup will be opened or closed.
*/
toggle(open?: boolean): void;
/**
* @hidden
*/
onMaximize(): Promise<void>;
/**
* @hidden
*/
onMinimize(): void;
private applyHostClasses;
private readThemeColors;
/**
* Focuses the wrapper of the Signature.
*/
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>;
}