@progress/kendo-angular-inputs 9.0.4-dev.202208010852 → 9.1.0-sig.202208231615

package/esm2015/signature/signature.component.js

@@ -0,0 +1,711 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { __awaiter } from "tslib";
+import { Component, EventEmitter, forwardRef, HostBinding, Input, Output, ViewChild } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { anyChanged, closest } 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 * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@progress/kendo-angular-dialog";
+import * as i3 from "./localization/localized-signature-messages.directive";
+import * as i4 from "@angular/common";
+const noop = () => { };
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_ROUNDED = 'medium';
+const DEFAULT_FILL_MODE = 'solid';
+const DEFAULT_POPUP_SCALE = 3;
+/**
+ * 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, localization) {
+        this.element = element;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.localization = localization;
+        this.staticHostClasses = true;
+        /**
+         * 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`
+         * * `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 color of the signature.
+         *
+         * Accepts CSS color names and hex values.
+         *
+         * @default '#000000'
+         */
+        this.color = '#000000';
+        /**
+         * 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;
+        /**
+         * 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;
+    }
+    /**
+     * 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 popupWidth() {
+        const baseWidth = this.width || this.element.nativeElement.offsetWidth;
+        return baseWidth * this.popupScale;
+    }
+    /**
+     * @hidden
+     */
+    get popupHeight() {
+        const baseHeight = this.height || this.element.nativeElement.offsetHeight;
+        return baseHeight * this.popupScale;
+    }
+    get focusedClass() {
+        return this.isFocused && !this.maximized;
+    }
+    /**
+     * @hidden
+     */
+    get isEmpty() {
+        return !this.value;
+    }
+    /**
+     * @hidden
+     */
+    get clearTitle() {
+        return this.getMessage('clear');
+    }
+    /**
+     * @hidden
+     */
+    get minimizeTitle() {
+        return this.getMessage('minimize');
+    }
+    /**
+     * @hidden
+     */
+    get maximizeTitle() {
+        return this.getMessage('maximize');
+    }
+    get options() {
+        return {
+            scale: this.maximized ? this.popupScale : 1,
+            color: this.color,
+            strokeWidth: this.strokeWidth,
+            smooth: this.smooth,
+            readonly: this.readonly
+        };
+    }
+    /**
+     * @hidden
+     */
+    get showMaximize() {
+        return !(this.maximized || this.isDrawing || !this.maximizable);
+    }
+    /**
+     * @hidden
+     */
+    get showMinimize() {
+        return this.maximized && !this.isDrawing;
+    }
+    /**
+     * @hidden
+     */
+    get showClear() {
+        return !(this.isEmpty || this.isDrawing || this.readonly);
+    }
+    ngOnInit() {
+        this.subscriptions = this.localization
+            .changes
+            .subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        });
+    }
+    ngAfterViewInit() {
+        this.applyHostClasses();
+        this.ngZone.runOutsideAngular(() => {
+            const element = this.canvas.nativeElement;
+            this.instance = new SignaturePad(element, Object.assign(Object.assign({}, this.options), { onChange: () => this.onValueChange(), onDraw: () => this.onDraw(), onDrawEnd: () => this.onDrawEnd() }));
+            if (this._value) {
+                this.instance.loadImage(this._value);
+            }
+            this.addEventListeners();
+        });
+    }
+    ngOnChanges(changes) {
+        if (anyChanged(['readonly', 'color', '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);
+    }
+    /**
+     * @hidden
+     */
+    onValueChange() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const value = yield this.instance.exportImage();
+            this.ngZone.run(() => {
+                this._value = value;
+                this.valueChange.emit(value);
+                this.notifyNgChanged(value);
+            });
+        });
+    }
+    /**
+     * @hidden
+     */
+    onDialogValueChange(value) {
+        this.value = value;
+        this.valueChange.emit(value);
+        this.notifyNgChanged(value);
+    }
+    /**
+     * @hidden
+     */
+    onDialogClose() {
+        const args = new SignatureCloseEvent();
+        this.close.next(args);
+        if (!args.isDefaultPrevented()) {
+            this.isOpen = false;
+        }
+    }
+    /**
+     * Clears the value of the Signature.
+     */
+    reset() {
+        var _a;
+        if (!isPresent(this.value)) {
+            return;
+        }
+        (_a = this.instance) === null || _a === void 0 ? void 0 : _a.clear();
+        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
+     */
+    onMaximize() {
+        const args = new SignatureOpenEvent();
+        this.open.next(args);
+        if (!args.isDefaultPrevented()) {
+            this.isOpen = true;
+        }
+    }
+    /**
+     * @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-signature-${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));
+    }
+    /**
+     * Focuses the wrapper of the Signature.
+     */
+    focus() {
+        this.isFocused = true;
+        this.element.nativeElement.focus();
+    }
+    /**
+     * @hidden
+     */
+    onWrapperFocus() {
+        if (this.isFocused) {
+            return;
+        }
+        this.ngZone.run(() => {
+            this.focus();
+            this.onFocus.emit();
+        });
+    }
+    /**
+     * Blurs the Signature.
+     */
+    blur() {
+        this.isFocused = false;
+        this.element.nativeElement.blur();
+        this.notifyNgTouched();
+    }
+    /**
+     * @hidden
+     */
+    onWrapperBlur() {
+        if (this.isOpen) {
+            return;
+        }
+        this.ngZone.run(() => {
+            this.onBlur.emit();
+            this.isFocused = 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.ngZone.run(() => this.isDrawing = true);
+    }
+    onDrawEnd() {
+        this.ngZone.run(() => this.isDrawing = false);
+    }
+    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: "12.2.16", ngImport: i0, type: SignatureComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SignatureComponent, selector: "kendo-signature", inputs: { readonly: "readonly", disabled: "disabled", value: "value", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", color: "color", strokeWidth: "strokeWidth", smooth: "smooth", maximizable: "maximizable", maximized: "maximized", popupScale: "popupScale", parentLocalization: "parentLocalization", hideLine: "hideLine", width: "width", height: "height" }, 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", "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabled", "style.width.px": "this.width", "style.height.px": "this.height", "attr.dir": "this.direction", "class.k-focus": "this.focusedClass" } }, 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 }], 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">
+        </ng-container>
+
+        <div class="k-signature-actions k-signature-actions-top">
+            <button
+                [class.k-hidden]="!showMaximize"
+                (click)="onMaximize()"
+                [attr.aria-label]="maximizeTitle"
+                [title]="maximizeTitle"
+                class="k-signature-action k-signature-maximize k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                    <span class="k-button-icon k-icon k-i-window-maximize"></span>
+            </button>
+            <button
+                [class.k-hidden]="!showMinimize"
+                (click)="onMinimize()"
+                [attr.aria-label]="minimizeTitle"
+                [title]="minimizeTitle"
+                class="k-signature-action k-signature-minimize k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                    <span class="k-button-icon k-icon k-i-window-minimize"></span>
+            </button>
+        </div>
+        <div #canvas class="k-signature-canvas" [attr.tabindex]="tabindex"></div>
+        <div class="k-signature-line" *ngIf="!hideLine"></div>
+        <div class="k-signature-actions k-signature-actions-bottom">
+            <button
+                class="k-signature-action k-signature-clear k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button"
+                [class.k-hidden]="!showClear"
+                [attr.aria-label]="clearTitle"
+                [title]="clearTitle"
+                (click)="onClear()" >
+                    <span class="k-button-icon k-icon k-i-close"></span>
+            </button>
+        </div>
+
+        <kendo-dialog *ngIf="isOpen">
+            <kendo-signature
+                [readonly]="readonly"
+                [disabled]="disabled"
+                [size]="size"
+                [rounded]="rounded"
+                [fillMode]="fillMode"
+                [color]="color"
+                [strokeWidth]="strokeWidth"
+                [smooth]="smooth"
+                [value]="value"
+                (valueChange)="onDialogValueChange($event)"
+                [hideLine]="hideLine"
+                [class.k-signature-maximized]="true"
+                [maximized]="true"
+                (minimize)="onDialogClose()"
+                [width]="popupWidth"
+                [height]="popupHeight"
+                [popupScale]="popupScale"
+                [parentLocalization]="localization">
+            </kendo-signature>
+        </kendo-dialog>
+    `, isInline: true, components: [{ type: i2.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SignatureComponent, selector: "kendo-signature", inputs: ["readonly", "disabled", "value", "tabindex", "size", "rounded", "fillMode", "color", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "parentLocalization", "hideLine", "width", "height"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }], directives: [{ type: i3.LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoSignature',
+                    selector: 'kendo-signature',
+                    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">
+        </ng-container>
+
+        <div class="k-signature-actions k-signature-actions-top">
+            <button
+                [class.k-hidden]="!showMaximize"
+                (click)="onMaximize()"
+                [attr.aria-label]="maximizeTitle"
+                [title]="maximizeTitle"
+                class="k-signature-action k-signature-maximize k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                    <span class="k-button-icon k-icon k-i-window-maximize"></span>
+            </button>
+            <button
+                [class.k-hidden]="!showMinimize"
+                (click)="onMinimize()"
+                [attr.aria-label]="minimizeTitle"
+                [title]="minimizeTitle"
+                class="k-signature-action k-signature-minimize k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                    <span class="k-button-icon k-icon k-i-window-minimize"></span>
+            </button>
+        </div>
+        <div #canvas class="k-signature-canvas" [attr.tabindex]="tabindex"></div>
+        <div class="k-signature-line" *ngIf="!hideLine"></div>
+        <div class="k-signature-actions k-signature-actions-bottom">
+            <button
+                class="k-signature-action k-signature-clear k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button"
+                [class.k-hidden]="!showClear"
+                [attr.aria-label]="clearTitle"
+                [title]="clearTitle"
+                (click)="onClear()" >
+                    <span class="k-button-icon k-icon k-i-close"></span>
+            </button>
+        </div>
+
+        <kendo-dialog *ngIf="isOpen">
+            <kendo-signature
+                [readonly]="readonly"
+                [disabled]="disabled"
+                [size]="size"
+                [rounded]="rounded"
+                [fillMode]="fillMode"
+                [color]="color"
+                [strokeWidth]="strokeWidth"
+                [smooth]="smooth"
+                [value]="value"
+                (valueChange)="onDialogValueChange($event)"
+                [hideLine]="hideLine"
+                [class.k-signature-maximized]="true"
+                [maximized]="true"
+                (minimize)="onDialogClose()"
+                [width]="popupWidth"
+                [height]="popupHeight"
+                [popupScale]="popupScale"
+                [parentLocalization]="localization">
+            </kendo-signature>
+        </kendo-dialog>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { staticHostClasses: [{
+                type: HostBinding,
+                args: ['class.k-signature']
+            }, {
+                type: HostBinding,
+                args: ['class.k-input']
+            }], readonly: [{
+                type: HostBinding,
+                args: ['class.k-readonly']
+            }, {
+                type: Input
+            }], disabled: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }, {
+                type: Input
+            }], value: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], strokeWidth: [{
+                type: Input
+            }], smooth: [{
+                type: Input
+            }], maximizable: [{
+                type: Input
+            }], maximized: [{
+                type: Input
+            }], popupScale: [{
+                type: Input
+            }], parentLocalization: [{
+                type: Input
+            }], hideLine: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.width.px']
+            }], height: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.height.px']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], 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']
+            }], focusedClass: [{
+                type: HostBinding,
+                args: ['class.k-focus']
+            }] } });