@progress/kendo-angular-inputs 9.1.0-sig.202208261440 → 10.0.0-dev.202208291357

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1661526517,
+    publishDate: 1661781385,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2015/signature/signature.component.js

@@ -24,6 +24,7 @@ const DEFAULT_SIZE = 'medium';
 const DEFAULT_ROUNDED = 'medium';
 const DEFAULT_FILL_MODE = 'solid';
 const DEFAULT_POPUP_SCALE = 3;
+const DEFAULT_EXPORT_SCALE = 2;
 /**
  * Represents the [Kendo UI Signature component for Angular]({% slug overview_signature %}).
  *
@@ -129,6 +130,14 @@ export class SignatureComponent {
          * @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.
          *
@@ -229,19 +238,29 @@ export class SignatureComponent {
     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() {
-        const baseWidth = this.width || this.element.nativeElement.offsetWidth;
-        return baseWidth * this.popupScale;
+        return this.baseWidth * this.popupScale;
     }
     /**
      * @hidden
      */
     get popupHeight() {
-        const baseHeight = this.height || this.element.nativeElement.offsetHeight;
-        return baseHeight * this.popupScale;
+        return this.baseHeight * this.popupScale;
     }
     /**
      * @hidden
@@ -336,9 +355,12 @@ export class SignatureComponent {
      */
     onValueChange() {
         return __awaiter(this, void 0, void 0, function* () {
-            const value = yield this.instance.exportImage();
+            const value = yield this.instance.exportImage({
+                width: this.baseWidth * this.exportScale,
+                height: this.baseHeight * this.exportScale
+            });
             this._value = value;
-            this.cd.detectChanges();
+            this.cd.markForCheck();
             this.ngZone.run(() => {
                 this.valueChange.emit(value);
                 this.notifyNgChanged(value);
@@ -351,8 +373,12 @@ export class SignatureComponent {
     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;
@@ -397,11 +423,18 @@ export class SignatureComponent {
      * @hidden
      */
     onMaximize() {
-        const args = new SignatureOpenEvent();
-        this.open.next(args);
-        if (!args.isDefaultPrevented()) {
-            this.isOpen = true;
-        }
+        return __awaiter(this, void 0, void 0, function* () {
+            const args = new SignatureOpenEvent();
+            this.open.next(args);
+            if (!args.isDefaultPrevented()) {
+                this.popupValue = yield this.instance.exportImage({
+                    width: this.popupWidth * this.exportScale,
+                    height: this.popupHeight * this.exportScale
+                });
+                this.isOpen = true;
+                this.cd.detectChanges();
+            }
+        });
     }
     /**
      * @hidden
@@ -414,7 +447,7 @@ export class SignatureComponent {
         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-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));
@@ -488,11 +521,11 @@ export class SignatureComponent {
     }
     onDraw() {
         this.isDrawing = true;
-        this.cd.detectChanges();
+        this.cd.markForCheck();
     }
     onDrawEnd() {
         this.isDrawing = false;
-        this.cd.detectChanges();
+        this.cd.markForCheck();
     }
     addEventListeners() {
         const element = this.element.nativeElement;
@@ -522,7 +555,7 @@ export class SignatureComponent {
     }
 }
 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: i0.ChangeDetectorRef }, { 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", 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", 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: [
+SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SignatureComponent, selector: "kendo-signature", inputs: { 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) }
@@ -543,6 +576,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 class="k-signature-action k-signature-maximize"
                 icon="hyperlink-open"
                 fillMode="flat"
+                [size]="size"
                 (click)="onMaximize()"
                 [attr.aria-label]="maximizeTitle"
                 [title]="maximizeTitle">
@@ -553,6 +587,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 class="k-signature-action k-signature-minimize"
                 icon="window-minimize"
                 fillMode="flat"
+                [size]="size"
                 (click)="onMinimize()"
                 [attr.aria-label]="minimizeTitle"
                 [title]="minimizeTitle">
@@ -575,6 +610,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 class="k-signature-action k-signature-clear"
                 icon="close"
                 fillMode="flat"
+                [size]="size"
                 [attr.aria-label]="clearTitle"
                 [title]="clearTitle"
                 (click)="onClear()" >
@@ -592,7 +628,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [backgroundColor]="backgroundColor"
                 [strokeWidth]="strokeWidth"
                 [smooth]="smooth"
-                [value]="value"
+                [value]="popupValue"
                 (valueChange)="onDialogValueChange($event)"
                 [hideLine]="hideLine"
                 [class.k-signature-maximized]="true"
@@ -604,7 +640,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [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", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }], directives: [{ type: i3.LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, 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", "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: i3.LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureComponent, decorators: [{
             type: Component,
             args: [{
@@ -633,6 +669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 class="k-signature-action k-signature-maximize"
                 icon="hyperlink-open"
                 fillMode="flat"
+                [size]="size"
                 (click)="onMaximize()"
                 [attr.aria-label]="maximizeTitle"
                 [title]="maximizeTitle">
@@ -643,6 +680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 class="k-signature-action k-signature-minimize"
                 icon="window-minimize"
                 fillMode="flat"
+                [size]="size"
                 (click)="onMinimize()"
                 [attr.aria-label]="minimizeTitle"
                 [title]="minimizeTitle">
@@ -665,6 +703,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 class="k-signature-action k-signature-clear"
                 icon="close"
                 fillMode="flat"
+                [size]="size"
                 [attr.aria-label]="clearTitle"
                 [title]="clearTitle"
                 (click)="onClear()" >
@@ -682,7 +721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [backgroundColor]="backgroundColor"
                 [strokeWidth]="strokeWidth"
                 [smooth]="smooth"
-                [value]="value"
+                [value]="popupValue"
                 (valueChange)="onDialogValueChange($event)"
                 [hideLine]="hideLine"
                 [class.k-signature-maximized]="true"
@@ -749,6 +788,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], popupScale: [{
                 type: Input
+            }], exportScale: [{
+                type: Input
             }], parentLocalization: [{
                 type: Input
             }], hideLine: [{

package/esm2015/signature.module.js

@@ -11,13 +11,13 @@ import { SignatureComponent } from './signature/signature.component';
 import * as i0 from "@angular/core";
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
- * definition for the MaskedTextBox component.
+ * definition for the Signature component.
  *
  * @example
  *
  * ```ts-no-run
- * // Import the MaskedTextBox module
- * import { MaskedTextBoxModule } from '@progress/kendo-angular-inputs';
+ * // Import the Signature module
+ * import { SignatureModule } from '@progress/kendo-angular-inputs';
  *
  * // The browser platform with a compiler
  * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@@ -30,7 +30,7 @@ import * as i0 from "@angular/core";
  * // Define the app module
  * _@NgModule({
  *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, MaskedTextBoxModule], // import MaskedTextBox module
+ *     imports:      [BrowserModule, SignatureModule], // import Signature module
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}

package/fesm2015/kendo-angular-inputs.js

@@ -535,7 +535,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1661526517,
+    publishDate: 1661781385,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -13095,6 +13095,7 @@ const DEFAULT_SIZE = 'medium';
 const DEFAULT_ROUNDED = 'medium';
 const DEFAULT_FILL_MODE = 'solid';
 const DEFAULT_POPUP_SCALE = 3;
+const DEFAULT_EXPORT_SCALE = 2;
 /**
  * Represents the [Kendo UI Signature component for Angular]({% slug overview_signature %}).
  *
@@ -13200,6 +13201,14 @@ class SignatureComponent {
          * @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.
          *
@@ -13300,19 +13309,29 @@ class SignatureComponent {
     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() {
-        const baseWidth = this.width || this.element.nativeElement.offsetWidth;
-        return baseWidth * this.popupScale;
+        return this.baseWidth * this.popupScale;
     }
     /**
      * @hidden
      */
     get popupHeight() {
-        const baseHeight = this.height || this.element.nativeElement.offsetHeight;
-        return baseHeight * this.popupScale;
+        return this.baseHeight * this.popupScale;
     }
     /**
      * @hidden
@@ -13407,9 +13426,12 @@ class SignatureComponent {
      */
     onValueChange() {
         return __awaiter(this, void 0, void 0, function* () {
-            const value = yield this.instance.exportImage();
+            const value = yield this.instance.exportImage({
+                width: this.baseWidth * this.exportScale,
+                height: this.baseHeight * this.exportScale
+            });
             this._value = value;
-            this.cd.detectChanges();
+            this.cd.markForCheck();
             this.ngZone.run(() => {
                 this.valueChange.emit(value);
                 this.notifyNgChanged(value);
@@ -13422,8 +13444,12 @@ class SignatureComponent {
     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;
@@ -13468,11 +13494,18 @@ class SignatureComponent {
      * @hidden
      */
     onMaximize() {
-        const args = new SignatureOpenEvent();
-        this.open.next(args);
-        if (!args.isDefaultPrevented()) {
-            this.isOpen = true;
-        }
+        return __awaiter(this, void 0, void 0, function* () {
+            const args = new SignatureOpenEvent();
+            this.open.next(args);
+            if (!args.isDefaultPrevented()) {
+                this.popupValue = yield this.instance.exportImage({
+                    width: this.popupWidth * this.exportScale,
+                    height: this.popupHeight * this.exportScale
+                });
+                this.isOpen = true;
+                this.cd.detectChanges();
+            }
+        });
     }
     /**
      * @hidden
@@ -13485,7 +13518,7 @@ class SignatureComponent {
         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-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));
@@ -13559,11 +13592,11 @@ class SignatureComponent {
     }
     onDraw() {
         this.isDrawing = true;
-        this.cd.detectChanges();
+        this.cd.markForCheck();
     }
     onDrawEnd() {
         this.isDrawing = false;
-        this.cd.detectChanges();
+        this.cd.markForCheck();
     }
     addEventListeners() {
         const element = this.element.nativeElement;
@@ -13593,7 +13626,7 @@ class SignatureComponent {
     }
 }
 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: i0.ChangeDetectorRef }, { 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", 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", 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: [
+SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SignatureComponent, selector: "kendo-signature", inputs: { 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) }
@@ -13614,6 +13647,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 class="k-signature-action k-signature-maximize"
                 icon="hyperlink-open"
                 fillMode="flat"
+                [size]="size"
                 (click)="onMaximize()"
                 [attr.aria-label]="maximizeTitle"
                 [title]="maximizeTitle">
@@ -13624,6 +13658,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 class="k-signature-action k-signature-minimize"
                 icon="window-minimize"
                 fillMode="flat"
+                [size]="size"
                 (click)="onMinimize()"
                 [attr.aria-label]="minimizeTitle"
                 [title]="minimizeTitle">
@@ -13646,6 +13681,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 class="k-signature-action k-signature-clear"
                 icon="close"
                 fillMode="flat"
+                [size]="size"
                 [attr.aria-label]="clearTitle"
                 [title]="clearTitle"
                 (click)="onClear()" >
@@ -13663,7 +13699,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [backgroundColor]="backgroundColor"
                 [strokeWidth]="strokeWidth"
                 [smooth]="smooth"
-                [value]="value"
+                [value]="popupValue"
                 (valueChange)="onDialogValueChange($event)"
                 [hideLine]="hideLine"
                 [class.k-signature-maximized]="true"
@@ -13675,7 +13711,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [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", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }], directives: [{ type: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, 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", "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: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureComponent, decorators: [{
             type: Component,
             args: [{
@@ -13704,6 +13740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 class="k-signature-action k-signature-maximize"
                 icon="hyperlink-open"
                 fillMode="flat"
+                [size]="size"
                 (click)="onMaximize()"
                 [attr.aria-label]="maximizeTitle"
                 [title]="maximizeTitle">
@@ -13714,6 +13751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 class="k-signature-action k-signature-minimize"
                 icon="window-minimize"
                 fillMode="flat"
+                [size]="size"
                 (click)="onMinimize()"
                 [attr.aria-label]="minimizeTitle"
                 [title]="minimizeTitle">
@@ -13736,6 +13774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 class="k-signature-action k-signature-clear"
                 icon="close"
                 fillMode="flat"
+                [size]="size"
                 [attr.aria-label]="clearTitle"
                 [title]="clearTitle"
                 (click)="onClear()" >
@@ -13753,7 +13792,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [backgroundColor]="backgroundColor"
                 [strokeWidth]="strokeWidth"
                 [smooth]="smooth"
-                [value]="value"
+                [value]="popupValue"
                 (valueChange)="onDialogValueChange($event)"
                 [hideLine]="hideLine"
                 [class.k-signature-maximized]="true"
@@ -13820,6 +13859,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], popupScale: [{
                 type: Input
+            }], exportScale: [{
+                type: Input
             }], parentLocalization: [{
                 type: Input
             }], hideLine: [{
@@ -13845,13 +13886,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
- * definition for the MaskedTextBox component.
+ * definition for the Signature component.
  *
  * @example
  *
  * ```ts-no-run
- * // Import the MaskedTextBox module
- * import { MaskedTextBoxModule } from '@progress/kendo-angular-inputs';
+ * // Import the Signature module
+ * import { SignatureModule } from '@progress/kendo-angular-inputs';
  *
  * // The browser platform with a compiler
  * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@@ -13864,7 +13905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * // Define the app module
  * _@NgModule({
  *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, MaskedTextBoxModule], // import MaskedTextBox module
+ *     imports:      [BrowserModule, SignatureModule], // import Signature module
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-inputs",
-  "version": "9.1.0-sig.202208261440",
+  "version": "10.0.0-dev.202208291357",
   "description": "Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, TextArea, and TextBox Components)",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@progress/kendo-common": "^0.2.2",
     "@progress/kendo-draggable": "^3.0.0",
-    "@progress/kendo-inputs-common": "dev",
+    "@progress/kendo-inputs-common": "^3.1.0",
     "@progress/kendo-schematics": "^3.0.0",
     "tslib": "^2.3.1"
   },

package/signature/signature.component.d.ts

@@ -139,6 +139,14 @@ export declare class SignatureComponent implements ControlValueAccessor {
      * @default 3
      */
     popupScale: number;
+    /**
+     * The scale factor for the exported image.
+     *
+     * The Signature width and height will be multiplied by the scale when converting the signature to an image.
+     *
+     * @default 2
+     */
+    exportScale: number;
     /**
      * @hidden
      */
@@ -200,6 +208,14 @@ export declare class SignatureComponent implements ControlValueAccessor {
      * @hidden
      */
     get maximizeTitle(): string;
+    /**
+     * @hidden
+     */
+    get baseWidth(): number;
+    /**
+     * @hidden
+     */
+    get baseHeight(): number;
     /**
      * @hidden
      */
@@ -252,6 +268,9 @@ export declare class SignatureComponent implements ControlValueAccessor {
      * @hidden
      */
     onDialogValueChange(value: string): void;
+    /**
+     * @hidden
+     */
     onDialogClick(e: any): void;
     /**
      * @hidden
@@ -271,7 +290,7 @@ export declare class SignatureComponent implements ControlValueAccessor {
     /**
      * @hidden
      */
-    onMaximize(): void;
+    onMaximize(): Promise<void>;
     /**
      * @hidden
      */
@@ -309,10 +328,14 @@ export declare class SignatureComponent implements ControlValueAccessor {
      * @hidden
      */
     registerOnTouched(fn: any): void;
+    /**
+     * @hidden
+     */
+    popupValue: any;
     private onDraw;
     private onDrawEnd;
     private addEventListeners;
     private getMessage;
     static ɵfac: i0.ɵɵFactoryDeclaration<SignatureComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SignatureComponent, "kendo-signature", ["kendoSignature"], { "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"; "parentLocalization": "parentLocalization"; "hideLine": "hideLine"; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; "minimize": "minimize"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SignatureComponent, "kendo-signature", ["kendoSignature"], { "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"; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; "minimize": "minimize"; }, never, never>;
 }

package/signature.module.d.ts

@@ -11,13 +11,13 @@ import * as i5 from "@angular/common";
 import * as i6 from "@progress/kendo-angular-dialog";
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
- * definition for the MaskedTextBox component.
+ * definition for the Signature component.
  *
  * @example
  *
  * ```ts-no-run
- * // Import the MaskedTextBox module
- * import { MaskedTextBoxModule } from '@progress/kendo-angular-inputs';
+ * // Import the Signature module
+ * import { SignatureModule } from '@progress/kendo-angular-inputs';
  *
  * // The browser platform with a compiler
  * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@@ -30,7 +30,7 @@ import * as i6 from "@progress/kendo-angular-dialog";
  * // Define the app module
  * _@NgModule({
  *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, MaskedTextBoxModule], // import MaskedTextBox module
+ *     imports:      [BrowserModule, SignatureModule], // import Signature module
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}