@progress/kendo-angular-inputs 9.0.4 → 9.1.0-sig.202208261045

package/fesm2015/kendo-angular-inputs.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { isDevMode, Directive, Optional, EventEmitter, ElementRef, Component, Input, Output, HostBinding, ViewChild, ContentChild, ViewChildren, forwardRef, Inject, Injectable, HostListener, NgModule, ViewContainerRef, ContentChildren } from '@angular/core';
+import { isDevMode, Directive, Optional, EventEmitter, ElementRef, Component, Input, Output, HostBinding, ViewChild, ContentChild, ViewChildren, forwardRef, Inject, Injectable, HostListener, NgModule, ViewContainerRef, ContentChildren, ChangeDetectionStrategy } from '@angular/core';
 import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, RadioControlValueAccessor } from '@angular/forms';
 import { Subscription, fromEvent, interval, merge, BehaviorSubject, Subject } from 'rxjs';
 import { take, filter, concatMap, startWith, takeUntil, skip, debounceTime, throttleTime } from 'rxjs/operators';
@@ -19,6 +19,12 @@ import * as i1$2 from '@progress/kendo-angular-intl';
 import * as i1$3 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 import { parseColor as parseColor$1, Color, namedColors } from '@progress/kendo-drawing';
+import * as i5 from '@progress/kendo-angular-buttons';
+import { ButtonModule } from '@progress/kendo-angular-buttons';
+import * as i2 from '@progress/kendo-angular-dialog';
+import { DialogsModule } from '@progress/kendo-angular-dialog';
+import { __awaiter } from 'tslib';
+import { SignaturePad } from '@progress/kendo-inputs-common';
 
 /**
  * @hidden
@@ -50,17 +56,27 @@ const fitIntoBounds = (contender, min, max) => {
     }
     return contender <= min ? min : contender >= max ? max : contender;
 };
-const SIZES = {
+/**
+ * @hidden
+ */
+const SIZE_MAP = {
     small: 'sm',
     medium: 'md',
     large: 'lg'
 };
-const ROUNDNESS = {
+/**
+ * @hidden
+ */
+const ROUNDED_MAP = {
     small: 'sm',
     medium: 'md',
     large: 'lg',
     full: 'full'
 };
+/**
+ * @hidden
+ */
+const isNone = (style) => style === 'none';
 /**
  * @hidden
  *
@@ -70,13 +86,13 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
     switch (stylingOption) {
         case 'size':
             return {
-                toRemove: `k-${componentType}-${SIZES[previousValue]}`,
-                toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
+                toRemove: `k-${componentType}-${SIZE_MAP[previousValue]}`,
+                toAdd: newValue !== 'none' ? `k-${componentType}-${SIZE_MAP[newValue]}` : ''
             };
         case 'rounded':
             return {
-                toRemove: `k-rounded-${ROUNDNESS[previousValue]}`,
-                toAdd: newValue !== 'none' ? `k-rounded-${ROUNDNESS[newValue]}` : ''
+                toRemove: `k-rounded-${ROUNDED_MAP[previousValue]}`,
+                toAdd: newValue !== 'none' ? `k-rounded-${ROUNDED_MAP[newValue]}` : ''
             };
         case 'fillMode':
             return {
@@ -519,7 +535,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1659455021,
+    publishDate: 1661507297,
     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'
 };
@@ -1360,8 +1376,8 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [attr.tabindex]="-1"
                 role="presentation">
                     <span class="k-button-icon k-icon"
-                        [class.k-i-arrow-w]="!vertical"
-                        [class.k-i-arrow-s]="vertical">
+                        [class.k-i-caret-alt-left]="!vertical"
+                        [class.k-i-caret-alt-down]="vertical">
                     </span>
             </button>
             <div class="k-slider-track-wrap">
@@ -1410,8 +1426,8 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [attr.aria-label]="currentValue"
                 role="presentation">
                     <span class="k-button-icon k-icon"
-                        [class.k-i-arrow-e]="!vertical"
-                        [class.k-i-arrow-n]="vertical">
+                        [class.k-i-caret-alt-right]="!vertical"
+                        [class.k-i-caret-alt-up]="vertical">
                     </span>
             </button>
             <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
@@ -1449,8 +1465,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [attr.tabindex]="-1"
                 role="presentation">
                     <span class="k-button-icon k-icon"
-                        [class.k-i-arrow-w]="!vertical"
-                        [class.k-i-arrow-s]="vertical">
+                        [class.k-i-caret-alt-left]="!vertical"
+                        [class.k-i-caret-alt-down]="vertical">
                     </span>
             </button>
             <div class="k-slider-track-wrap">
@@ -1499,8 +1515,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [attr.aria-label]="currentValue"
                 role="presentation">
                     <span class="k-button-icon k-icon"
-                        [class.k-i-arrow-e]="!vertical"
-                        [class.k-i-arrow-n]="vertical">
+                        [class.k-i-caret-alt-right]="!vertical"
+                        [class.k-i-caret-alt-up]="vertical">
                     </span>
             </button>
             <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
@@ -2251,7 +2267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 const FOCUSED$4 = 'k-focus';
-const DEFAULT_SIZE$7 = 'medium';
+const DEFAULT_SIZE$8 = 'medium';
 const DEFAULT_THUMB_ROUNDED = 'full';
 const DEFAULT_TRACK_ROUNDED = 'full';
 /**
@@ -2361,7 +2377,7 @@ class SwitchComponent {
      * * `none`
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$7;
+        const newSize = size ? size : DEFAULT_SIZE$8;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -3238,7 +3254,7 @@ const decimalPart = (value) => {
 /**
  * @hidden
  */
-const noop = (_) => { }; // eslint-disable-line no-empty
+const noop$1 = (_) => { }; // eslint-disable-line no-empty
 /**
  * @hidden
  */
@@ -3363,9 +3379,9 @@ const PARSABLE_DEFAULTS = {
     step: 1
 };
 const FOCUSED$3 = 'k-focus';
-const DEFAULT_SIZE$6 = 'medium';
-const DEFAULT_ROUNDED$5 = 'medium';
-const DEFAULT_FILL_MODE$4 = 'solid';
+const DEFAULT_SIZE$7 = 'medium';
+const DEFAULT_ROUNDED$6 = 'medium';
+const DEFAULT_FILL_MODE$5 = 'solid';
 /**
  * Represents the [Kendo UI NumericTextBox component for Angular]({% slug overview_numerictextbox %}).
  */
@@ -3462,17 +3478,17 @@ class NumericTextBoxComponent {
         this.arrowDirection = ArrowDirection.None;
         this.hostClasses = true;
         this.inputValue = '';
-        this.minValidateFn = noop;
-        this.maxValidateFn = noop;
+        this.minValidateFn = noop$1;
+        this.maxValidateFn = noop$1;
         this._format = "n2";
         this.isPasted = false;
         this.mouseDown = false;
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
-        this.ngChange = noop;
-        this.ngTouched = noop;
-        this.ngValidatorChange = noop;
+        this.ngChange = noop$1;
+        this.ngTouched = noop$1;
+        this.ngValidatorChange = noop$1;
         this.domEvents = [];
         /**
          * @hidden
@@ -3669,7 +3685,7 @@ class NumericTextBoxComponent {
      * * `none`
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$6;
+        const newSize = size ? size : DEFAULT_SIZE$7;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -3686,7 +3702,7 @@ class NumericTextBoxComponent {
      * * `none`
      */
     set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$5;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$6;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -3703,7 +3719,7 @@ class NumericTextBoxComponent {
      * * `none`
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$4;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$5;
         this.handleClasses(newFillMode, 'fillMode');
         this._fillMode = newFillMode;
     }
@@ -3744,8 +3760,8 @@ class NumericTextBoxComponent {
         }
         this.verifySettings();
         if (anyChanged(['min', 'max', 'rangeValidation'], changes, false)) {
-            this.minValidateFn = this.rangeValidation ? createMinValidator(this.min) : noop;
-            this.maxValidateFn = this.rangeValidation ? createMaxValidator(this.max) : noop;
+            this.minValidateFn = this.rangeValidation ? createMinValidator(this.min) : noop$1;
+            this.maxValidateFn = this.rangeValidation ? createMaxValidator(this.max) : noop$1;
             this.ngValidatorChange();
         }
         if (anyChanged(['autoCorrect', 'decimals', 'min'], changes)) {
@@ -4235,7 +4251,7 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     class="k-spinner-increase k-button k-icon-button k-button-solid k-button-solid-base"
                     tabindex="-1"
                 >
-                    <span class="k-button-icon k-icon k-i-arrow-n"></span>
+                    <span class="k-button-icon k-icon k-i-caret-alt-up"></span>
                </button>
                <button
                     type="button"
@@ -4247,7 +4263,7 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     class="k-spinner-decrease k-button k-icon-button k-button-solid k-button-solid-base"
                     tabindex="-1"
                >
-                    <span class="k-button-icon k-icon k-i-arrow-s"></span>
+                    <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
                </button>
             </span>
       `, isInline: true, directives: [{ type: LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -4310,7 +4326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     class="k-spinner-increase k-button k-icon-button k-button-solid k-button-solid-base"
                     tabindex="-1"
                 >
-                    <span class="k-button-icon k-icon k-i-arrow-n"></span>
+                    <span class="k-button-icon k-icon k-i-caret-alt-up"></span>
                </button>
                <button
                     type="button"
@@ -4322,7 +4338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     class="k-spinner-decrease k-button k-icon-button k-button-solid k-button-solid-base"
                     tabindex="-1"
                >
-                    <span class="k-button-icon k-icon k-i-arrow-s"></span>
+                    <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
                </button>
             </span>
       `
@@ -4856,9 +4872,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 const resolvedPromise = Promise.resolve(null);
 const FOCUSED$2 = 'k-focus';
-const DEFAULT_SIZE$5 = 'medium';
-const DEFAULT_ROUNDED$4 = 'medium';
-const DEFAULT_FILL_MODE$3 = 'solid';
+const DEFAULT_SIZE$6 = 'medium';
+const DEFAULT_ROUNDED$5 = 'medium';
+const DEFAULT_FILL_MODE$4 = 'solid';
 /**
  * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
  *
@@ -5056,7 +5072,7 @@ class MaskedTextBoxComponent {
      * * `none`
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$5;
+        const newSize = size ? size : DEFAULT_SIZE$6;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -5073,7 +5089,7 @@ class MaskedTextBoxComponent {
      * * `none`
      */
     set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$4;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$5;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -5090,7 +5106,7 @@ class MaskedTextBoxComponent {
      * * `none`
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$3;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$4;
         this.handleClasses(newFillMode, 'fillMode');
         this._fillMode = newFillMode;
     }
@@ -6081,9 +6097,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 const FOCUSED$1 = 'k-focus';
-const DEFAULT_SIZE$4 = 'medium';
-const DEFAULT_ROUNDED$3 = 'medium';
-const DEFAULT_FILL_MODE$2 = 'solid';
+const DEFAULT_SIZE$5 = 'medium';
+const DEFAULT_ROUNDED$4 = 'medium';
+const DEFAULT_FILL_MODE$3 = 'solid';
 class TextBoxComponent {
     constructor(localizationService, ngZone, changeDetector, renderer, injector, hostElement) {
         this.localizationService = localizationService;
@@ -6293,7 +6309,7 @@ class TextBoxComponent {
      * * `none`
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$4;
+        const newSize = size ? size : DEFAULT_SIZE$5;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -6312,7 +6328,7 @@ class TextBoxComponent {
      * * `none`
      */
     set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$3;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$4;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -6330,7 +6346,7 @@ class TextBoxComponent {
      * * `none`
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$2;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$3;
         this.handleClasses(newFillMode, 'fillMode');
         this._fillMode = newFillMode;
     }
@@ -6547,7 +6563,7 @@ class TextBoxComponent {
     get errorIconClasses() {
         return this.errorIcon
             ? `${this.errorIcon}`
-            : `k-input-validation-icon k-icon k-i-warning`;
+            : `k-input-validation-icon k-icon k-i-exclamation-circle`;
     }
     /**
      * @hidden
@@ -7115,9 +7131,9 @@ const resizeClasses = {
     'auto': 'k-resize-none'
 };
 const FOCUSED = 'k-focus';
-const DEFAULT_SIZE$3 = 'medium';
-const DEFAULT_ROUNDED$2 = 'medium';
-const DEFAULT_FILL_MODE$1 = 'solid';
+const DEFAULT_SIZE$4 = 'medium';
+const DEFAULT_ROUNDED$3 = 'medium';
+const DEFAULT_FILL_MODE$2 = 'solid';
 /**
  * Represents the [Kendo UI TextArea component for Angular]({% slug overview_textarea %}).
  */
@@ -7277,7 +7293,7 @@ class TextAreaComponent extends TextFieldsBase {
      * * `none`
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$3;
+        const newSize = size ? size : DEFAULT_SIZE$4;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -7295,7 +7311,7 @@ class TextAreaComponent extends TextFieldsBase {
      * * `none`
      */
     set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$2;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$3;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -7313,7 +7329,7 @@ class TextAreaComponent extends TextFieldsBase {
      * * `none`
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$1;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$2;
         this.handleClasses(newFillMode, 'fillMode');
         this._fillMode = newFillMode;
     }
@@ -8334,7 +8350,7 @@ FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 [attr.aria-label]="getText('clearButton')"
                 [attr.title]="getText('clearButton')"
                 (click)="clearButtonClick.emit()">
-                    <span class="k-button-icon k-icon k-i-reset-color"></span>
+                    <span class="k-button-icon k-icon k-i-droplet-slash"></span>
             </button>
             <div class="k-coloreditor-preview k-vstack" *ngIf="preview">
                 <span
@@ -8384,7 +8400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [attr.aria-label]="getText('clearButton')"
                 [attr.title]="getText('clearButton')"
                 (click)="clearButtonClick.emit()">
-                    <span class="k-button-icon k-icon k-i-reset-color"></span>
+                    <span class="k-button-icon k-icon k-i-droplet-slash"></span>
             </button>
             <div class="k-coloreditor-preview k-vstack" *ngIf="preview">
                 <span
@@ -8668,7 +8684,7 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 [attr.title]="formatButtonTitle"
                 type="button"
             >
-                <span class="k-button-icon k-icon k-i-arrows-kpi"></span>
+                <span class="k-button-icon k-icon k-i-caret-alt-expand"></span>
             </button>
         </div>
         <div *ngIf="formatView === 'hex'" class="k-vstack">
@@ -8768,7 +8784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [attr.title]="formatButtonTitle"
                 type="button"
             >
-                <span class="k-button-icon k-icon k-i-arrows-kpi"></span>
+                <span class="k-button-icon k-icon k-i-caret-alt-expand"></span>
             </button>
         </div>
         <div *ngIf="formatView === 'hex'" class="k-vstack">
@@ -8919,7 +8935,7 @@ ContrastValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             </span>
             <span class="k-contrast-validation k-text-error" *ngIf="!pass">
                 {{failMessage}}
-                <span class="k-icon k-i-close"></span>
+                <span class="k-icon k-i-x"></span>
             </span>
         </ng-container>
     `, isInline: true, directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -8937,7 +8953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             </span>
             <span class="k-contrast-validation k-text-error" *ngIf="!pass">
                 {{failMessage}}
-                <span class="k-icon k-i-close"></span>
+                <span class="k-icon k-i-x"></span>
             </span>
         </ng-container>
     `
@@ -8984,7 +9000,7 @@ ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                     <span class="k-icon k-i-check" *ngIf="satisfiesAAACondition"></span>
                 </span>
                 <span class="k-contrast-validation k-text-error" *ngIf="!satisfiesAACondition">
-                    <span class="k-icon k-i-close"></span>
+                    <span class="k-icon k-i-x"></span>
                 </span>
             </ng-container>
         </div>
@@ -9013,7 +9029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     <span class="k-icon k-i-check" *ngIf="satisfiesAAACondition"></span>
                 </span>
                 <span class="k-contrast-validation k-text-error" *ngIf="!satisfiesAACondition">
-                    <span class="k-icon k-i-close"></span>
+                    <span class="k-icon k-i-x"></span>
                 </span>
             </ng-container>
         </div>
@@ -9678,7 +9694,7 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     [attr.aria-label]="clearButtonTitle"
                     [attr.title]="clearButtonTitle"
                     tabindex="0">
-                    <span class="k-icon k-i-reset-color"></span>
+                    <span class="k-icon k-i-droplet-slash"></span>
                 </span>
                 <kendo-slider
                     [ngClass]="{'k-align-self-end': clearButton}"
@@ -9817,7 +9833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [attr.aria-label]="clearButtonTitle"
                     [attr.title]="clearButtonTitle"
                     tabindex="0">
-                    <span class="k-icon k-i-reset-color"></span>
+                    <span class="k-icon k-i-droplet-slash"></span>
                 </span>
                 <kendo-slider
                     [ngClass]="{'k-align-self-end': clearButton}"
@@ -11258,9 +11274,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 const DOM_FOCUS_EVENTS = ['focus', 'blur'];
-const DEFAULT_SIZE$2 = 'medium';
-const DEFAULT_ROUNDED$1 = 'medium';
-const DEFAULT_FILL_MODE = 'solid';
+const DEFAULT_SIZE$3 = 'medium';
+const DEFAULT_ROUNDED$2 = 'medium';
+const DEFAULT_FILL_MODE$1 = 'solid';
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
  *
@@ -11476,7 +11492,7 @@ class ColorPickerComponent {
      * * `none`
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$2;
+        const newSize = size ? size : DEFAULT_SIZE$3;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -11495,7 +11511,7 @@ class ColorPickerComponent {
      * * `none`
      */
     set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$1;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$2;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -11513,7 +11529,7 @@ class ColorPickerComponent {
      * * `none`
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$1;
         this.handleClasses(newFillMode, 'fillMode');
         this._fillMode = newFillMode;
     }
@@ -11973,7 +11989,7 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             tabindex="-1"
             type="button"
             class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
-                <span class="k-button-icon k-icon k-i-arrow-s"></span>
+                <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
         </button>
         <ng-template #popupTemplate>
             <kendo-flatcolorpicker
@@ -12066,7 +12082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             tabindex="-1"
             type="button"
             class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
-                <span class="k-button-icon k-icon k-i-arrow-s"></span>
+                <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
         </button>
         <ng-template #popupTemplate>
             <kendo-flatcolorpicker
@@ -12297,8 +12313,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
-const DEFAULT_SIZE$1 = 'medium';
-const DEFAULT_ROUNDED = 'medium';
+const DEFAULT_SIZE$2 = 'medium';
+const DEFAULT_ROUNDED$1 = 'medium';
 /**
  * Represents the directive that renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
  * The directive is placed on input type="checkbox" elements.
@@ -12327,7 +12343,7 @@ class CheckBoxDirective {
      * * `none`
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$1;
+        const newSize = size ? size : DEFAULT_SIZE$2;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -12345,7 +12361,7 @@ class CheckBoxDirective {
      * * `none`
      */
     set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$1;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -12430,7 +12446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
-const DEFAULT_SIZE = 'medium';
+const DEFAULT_SIZE$1 = 'medium';
 /**
  * Represents the directive that renders the [Kendo UI RadioButton]({% slug overview_checkbox %}) input component.
  * The directive is placed on input type="radio" elements.
@@ -12458,7 +12474,7 @@ class RadioButtonDirective {
      * * `none`
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE;
+        const newSize = size ? size : DEFAULT_SIZE$1;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -12978,6 +12994,914 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
+/**
+ * @hidden
+ */
+class SignatureMessages extends ComponentMessages {
+}
+SignatureMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+SignatureMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SignatureMessages, selector: "kendo-signature-messages-base", inputs: { clear: "clear", minimize: "minimize", maximize: "maximize" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureMessages, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'kendo-signature-messages-base'
+                }]
+        }], propDecorators: { clear: [{
+                type: Input
+            }], minimize: [{
+                type: Input
+            }], maximize: [{
+                type: Input
+            }] } });
+
+/**
+ * Custom component messages override default component messages.
+ */
+class SignatureCustomMessagesComponent extends SignatureMessages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+}
+SignatureCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+SignatureCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SignatureCustomMessagesComponent, selector: "kendo-signature-messages", providers: [
+        {
+            provide: SignatureMessages,
+            useExisting: forwardRef(() => SignatureCustomMessagesComponent)
+        }
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureCustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: SignatureMessages,
+                            useExisting: forwardRef(() => SignatureCustomMessagesComponent)
+                        }
+                    ],
+                    selector: 'kendo-signature-messages',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+/**
+ * @hidden
+ */
+class LocalizedSignatureMessagesDirective extends SignatureMessages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+}
+LocalizedSignatureMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedSignatureMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedSignatureMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]", providers: [
+        {
+            provide: SignatureMessages,
+            useExisting: forwardRef(() => LocalizedSignatureMessagesDirective)
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedSignatureMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: SignatureMessages,
+                            useExisting: forwardRef(() => LocalizedSignatureMessagesDirective)
+                        }
+                    ],
+                    selector: '[kendoSignatureLocalizedMessages]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+/**
+ * Arguments for the `close` event of the Signature component.
+ */
+class SignatureCloseEvent extends PreventableEvent {
+}
+
+/**
+ * Arguments for the `open` event of the Signature component.
+ */
+class SignatureOpenEvent extends PreventableEvent {
+}
+
+const noop = () => { };
+const FOCUSED_CLASS = 'k-focus';
+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.
+ */
+class SignatureComponent {
+    constructor(element, renderer, ngZone, cd, localization) {
+        this.element = element;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.cd = cd;
+        this.localization = localization;
+        this.staticHostClasses = true;
+        /**
+         * 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 background color of the signature.
+         *
+         * Accepts CSS color names and hex values.
+         *
+         * @default '#ffffff'
+         */
+        this.backgroundColor = '#ffffff';
+        /**
+         * 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 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');
+    }
+    /**
+     * @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;
+    }
+    /**
+     * @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);
+    }
+    get focused() {
+        return this.isFocused;
+    }
+    set focused(value) {
+        if (this.isFocused !== value && this.element) {
+            const wrap = this.element.nativeElement;
+            if (value && !this.maximized) {
+                this.renderer.addClass(wrap, FOCUSED_CLASS);
+            }
+            else {
+                this.renderer.removeClass(wrap, FOCUSED_CLASS);
+            }
+            this.isFocused = value;
+        }
+    }
+    get options() {
+        return {
+            scale: this.maximized ? this.popupScale : 1,
+            color: this.color,
+            backgroundColor: this.backgroundColor,
+            strokeWidth: this.strokeWidth,
+            smooth: this.smooth,
+            readonly: this.readonly
+        };
+    }
+    ngOnInit() {
+        this.subscriptions = this.localization
+            .changes
+            .subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        });
+    }
+    ngAfterViewInit() {
+        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 = 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.focused = true;
+        this.element.nativeElement.focus();
+    }
+    /**
+     * @hidden
+     */
+    onWrapperFocus() {
+        if (this.focused) {
+            return;
+        }
+        this.ngZone.run(() => {
+            this.focus();
+            this.onFocus.emit();
+        });
+    }
+    /**
+     * Blurs the Signature.
+     */
+    blur() {
+        this.focused = false;
+        this.element.nativeElement.blur();
+        this.notifyNgTouched();
+    }
+    /**
+     * @hidden
+     */
+    onWrapperBlur() {
+        if (this.isOpen) {
+            return;
+        }
+        this.ngZone.run(() => {
+            this.onBlur.emit();
+            this.focused = false;
+            this.notifyNgTouched();
+        });
+    }
+    /**
+     * @hidden
+     */
+    onWrapperClick(_event) {
+        if (this.disabled) {
+            return;
+        }
+        this.focus();
+    }
+    /**
+     * @hidden
+     */
+    writeValue(value) {
+        this.value = value;
+    }
+    /**
+     * @hidden
+     */
+    registerOnChange(fn) {
+        this.notifyNgChanged = fn;
+    }
+    /**
+     * @hidden
+     */
+    registerOnTouched(fn) {
+        this.notifyNgTouched = fn;
+    }
+    onDraw() {
+        this.isDrawing = true;
+        this.cd.detectChanges();
+    }
+    onDrawEnd() {
+        this.isDrawing = false;
+        this.cd.detectChanges();
+    }
+    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$1(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: 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: [
+        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
+                *ngIf="showMaximize"
+                kendoButton
+                class="k-signature-action k-signature-maximize"
+                icon="hyperlink-open"
+                fillMode="flat"
+                (click)="onMaximize()"
+                [attr.aria-label]="maximizeTitle"
+                [title]="maximizeTitle">
+            </button>
+            <button
+                *ngIf="showMinimize"
+                kendoButton
+                class="k-signature-action k-signature-minimize"
+                icon="window-minimize"
+                fillMode="flat"
+                (click)="onMinimize()"
+                [attr.aria-label]="minimizeTitle"
+                [title]="minimizeTitle">
+            </button>
+        </div>
+        <div
+            #canvas
+            class="k-signature-canvas"
+            [attr.tabindex]="tabindex"
+            [style.backgroundColor]="backgroundColor"
+        ></div>
+        <div
+            *ngIf="!hideLine"
+            class="k-signature-line"
+            style="z-index: 2; pointer-events: none;"
+        ></div>
+        <div class="k-signature-actions k-signature-actions-bottom">
+            <button
+                *ngIf="showClear"
+                kendoButton
+                class="k-signature-action k-signature-clear"
+                icon="close"
+                fillMode="flat"
+                [attr.aria-label]="clearTitle"
+                [title]="clearTitle"
+                (click)="onClear()" >
+            </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", "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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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">
+        </ng-container>
+
+        <div class="k-signature-actions k-signature-actions-top">
+            <button
+                *ngIf="showMaximize"
+                kendoButton
+                class="k-signature-action k-signature-maximize"
+                icon="hyperlink-open"
+                fillMode="flat"
+                (click)="onMaximize()"
+                [attr.aria-label]="maximizeTitle"
+                [title]="maximizeTitle">
+            </button>
+            <button
+                *ngIf="showMinimize"
+                kendoButton
+                class="k-signature-action k-signature-minimize"
+                icon="window-minimize"
+                fillMode="flat"
+                (click)="onMinimize()"
+                [attr.aria-label]="minimizeTitle"
+                [title]="minimizeTitle">
+            </button>
+        </div>
+        <div
+            #canvas
+            class="k-signature-canvas"
+            [attr.tabindex]="tabindex"
+            [style.backgroundColor]="backgroundColor"
+        ></div>
+        <div
+            *ngIf="!hideLine"
+            class="k-signature-line"
+            style="z-index: 2; pointer-events: none;"
+        ></div>
+        <div class="k-signature-actions k-signature-actions-bottom">
+            <button
+                *ngIf="showClear"
+                kendoButton
+                class="k-signature-action k-signature-clear"
+                icon="close"
+                fillMode="flat"
+                [attr.aria-label]="clearTitle"
+                [title]="clearTitle"
+                (click)="onClear()" >
+            </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: i0.ChangeDetectorRef }, { type: i1.LocalizationService }]; }, propDecorators: { staticHostClasses: [{
+                type: HostBinding,
+                args: ['class.k-signature']
+            }, {
+                type: HostBinding,
+                args: ['class.k-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
+            }], 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']
+            }] } });
+
+/**
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * definition for the MaskedTextBox component.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the MaskedTextBox module
+ * import { MaskedTextBoxModule } from '@progress/kendo-angular-inputs';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, MaskedTextBoxModule], // import MaskedTextBox module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+class SignatureModule {
+}
+SignatureModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SignatureModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureModule, declarations: [SignatureComponent,
+        SignatureCustomMessagesComponent,
+        LocalizedSignatureMessagesDirective], imports: [ButtonModule,
+        CommonModule,
+        DialogsModule], exports: [SignatureComponent,
+        SignatureCustomMessagesComponent] });
+SignatureModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureModule, imports: [[
+            ButtonModule,
+            CommonModule,
+            DialogsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SignatureComponent,
+                        SignatureCustomMessagesComponent,
+                        LocalizedSignatureMessagesDirective
+                    ],
+                    exports: [
+                        SignatureComponent,
+                        SignatureCustomMessagesComponent
+                    ],
+                    imports: [
+                        ButtonModule,
+                        CommonModule,
+                        DialogsModule
+                    ]
+                }]
+        }] });
+
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
  * definition for the Inputs components.
@@ -13023,7 +13947,8 @@ InputsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         ColorPickerModule,
         CheckBoxModule,
         RadioButtonModule,
-        FormFieldModule] });
+        FormFieldModule,
+        SignatureModule] });
 InputsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InputsModule, imports: [[CommonModule], TextAreaModule,
         TextBoxModule,
         SliderModule,
@@ -13034,7 +13959,8 @@ InputsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
         ColorPickerModule,
         CheckBoxModule,
         RadioButtonModule,
-        FormFieldModule] });
+        FormFieldModule,
+        SignatureModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InputsModule, decorators: [{
             type: NgModule,
             args: [{
@@ -13049,7 +13975,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         ColorPickerModule,
                         CheckBoxModule,
                         RadioButtonModule,
-                        FormFieldModule
+                        FormFieldModule,
+                        SignatureModule
                     ],
                     imports: [CommonModule]
                 }]
@@ -13059,5 +13986,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActiveColorClickEvent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormFieldComponent, FormFieldModule, HintComponent, InputSeparatorComponent, InputsModule, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, SharedModule, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchComponent, SwitchCustomMessagesComponent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };
+export { ActiveColorClickEvent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormFieldComponent, FormFieldModule, HintComponent, InputSeparatorComponent, InputsModule, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, SharedModule, SignatureCloseEvent, SignatureComponent, SignatureCustomMessagesComponent, SignatureMessages, SignatureModule, SignatureOpenEvent, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchComponent, SwitchCustomMessagesComponent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };