@progress/kendo-angular-inputs 21.4.1 → 22.0.0

package/esm2022/signature/signature.component.mjs

@@ -1,981 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 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 { 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;
-        this.cd.markForCheck();
-    }
-    /**
-     * @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: "18.2.14", 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: "17.0.0", version: "18.2.14", 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">
-          @if (showMaximize) {
-            <button
-              #maximize
-              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>
-          }
-          @if (showMinimize) {
-            <button
-              #minimize
-              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>
-        @if (!hideLine) {
-          <div
-            class="k-signature-line"
-          ></div>
-        }
-        <div class="k-signature-actions k-signature-actions-bottom">
-          @if (showClear) {
-            <button
-              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>
-
-        @if (isOpen) {
-          <kendo-dialog
-            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: "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: "18.2.14", 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">
-          @if (showMaximize) {
-            <button
-              #maximize
-              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>
-          }
-          @if (showMinimize) {
-            <button
-              #minimize
-              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>
-        @if (!hideLine) {
-          <div
-            class="k-signature-line"
-          ></div>
-        }
-        <div class="k-signature-actions k-signature-actions-bottom">
-          @if (showClear) {
-            <button
-              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>
-
-        @if (isOpen) {
-          <kendo-dialog
-            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, ButtonComponent, DialogComponent]
-                }]
-        }], ctorParameters: () => [{ 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 }]
-            }] } });