@progress/kendo-angular-inputs 13.2.1-develop.11 → 13.2.1-develop.13

package/esm2020/signature/signature.component.mjs

@@ -0,0 +1,906 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 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 * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@progress/kendo-angular-buttons";
+import * as i3 from "@progress/kendo-angular-dialog";
+import * as i4 from "./localization/localized-signature-messages.directive";
+import * as i5 from "@angular/common";
+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 %}).
+ *
+ * The Signature allows users to add a hand-drawn signature to forms.
+ */
+export class SignatureComponent {
+    constructor(element, renderer, ngZone, cd, localization) {
+        this.element = element;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.cd = cd;
+        this.localization = localization;
+        this.staticHostClasses = true;
+        /**
+         * @hidden
+         */
+        this.focusableId = nextId();
+        /**
+         * Sets the read-only state of the Signature.
+         *
+         * @default false
+         */
+        this.readonly = false;
+        /**
+         * Sets the disabled state of the Signature.
+         *
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * 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`
+         */
+        this.size = DEFAULT_SIZE;
+        /**
+         * The rounded property specifies the border radius of the signature
+         * ([see example]({% slug appearance_signature %}#toc-rounded)).
+         *
+         * The possible values are:
+         * * `small`
+         * * `medium` (default)
+         * * `large`
+         * * `full` (not supported by the Signature)
+         * * `none`
+         */
+        this.rounded = DEFAULT_ROUNDED;
+        /**
+         * The fillMode property specifies the background and border styles of the signature
+         * ([see example]({% slug appearance_signature %}#toc-fillMode)).
+         *
+         * The possible values are:
+         * * `flat`
+         * * `solid` (default)
+         * * `outline`
+         * * `none`
+         */
+        this.fillMode = DEFAULT_FILL_MODE;
+        /**
+         * The stroke width of the signature.
+         *
+         * @default 1
+         */
+        this.strokeWidth = 1;
+        /**
+         * A flag indicating whether to smooth out signature lines.
+         *
+         * @default false
+         */
+        this.smooth = false;
+        /**
+         * A flag indicating if the signature can be maximized.
+         *
+         * @default true
+         */
+        this.maximizable = true;
+        /**
+         * @hidden
+         */
+        this.maximized = false;
+        /**
+         * The scale factor for the popup.
+         *
+         * The Signature width and height will be multiplied by the scale when showing the popup.
+         *
+         * @default 3
+         */
+        this.popupScale = DEFAULT_POPUP_SCALE;
+        /**
+         * 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
+         */
+        this.exportScale = DEFAULT_EXPORT_SCALE;
+        /**
+         * A flag indicating whether the dotted line should be displayed in the background.
+         *
+         * @default false
+         */
+        this.hideLine = false;
+        /**
+         * Fires each time the signature value is changed.
+         */
+        this.valueChange = new EventEmitter();
+        /**
+         * Fires each time the popup is about to open.
+         * This event is preventable. If you cancel it, the popup will remain closed.
+         */
+        this.open = new EventEmitter();
+        /**
+         * Fires each time the popup is about to close.
+         * This event is preventable. If you cancel it, the popup will remain open.
+         */
+        this.close = new EventEmitter();
+        /**
+         * Fires each time Signature is focused.
+         */
+        this.onFocus = new EventEmitter();
+        /**
+         * Fires each time the Signature is blurred.
+         */
+        this.onBlur = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.minimize = new EventEmitter();
+        /**
+         * Indicates whether the Signature wrapper is focused.
+         */
+        this.isFocused = false;
+        /**
+         * @hidden
+         */
+        this.isDrawing = false;
+        this.notifyNgTouched = noop;
+        this.notifyNgChanged = noop;
+        this._tabindex = 0;
+        this.hostClasses = [];
+        validatePackage(packageMetadata);
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+    }
+    /**
+     * 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;
+    }
+    /**
+     * @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
+     */
+    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
+        };
+    }
+    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.keyCode === 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 of the component.
+     *
+     * @param open An optional parameter. Specifies whether the popup will be opened or closed.
+     */
+    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 wrapper of the Signature.
+     */
+    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;
+    }
+    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);
+    }
+}
+SignatureComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SignatureComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SignatureComponent, 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, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { 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"] }], directives: [{ type: i4.LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.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>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }]; }, 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 }]
+            }] } });