@progress/kendo-angular-inputs 21.1.1-develop.1 → 21.2.0-develop.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/esm2022/colorpicker/adaptiveness/adaptive-renderer.component.mjs +105 -97
  2. package/esm2022/colorpicker/color-contrast-svg.component.mjs +10 -7
  3. package/esm2022/colorpicker/color-gradient.component.mjs +287 -279
  4. package/esm2022/colorpicker/color-input.component.mjs +242 -235
  5. package/esm2022/colorpicker/color-palette.component.mjs +47 -39
  6. package/esm2022/colorpicker/colorpicker.component.mjs +228 -222
  7. package/esm2022/colorpicker/contrast-validation.component.mjs +26 -21
  8. package/esm2022/colorpicker/contrast.component.mjs +46 -37
  9. package/esm2022/colorpicker/flatcolorpicker-header.component.mjs +105 -95
  10. package/esm2022/colorpicker/flatcolorpicker.component.mjs +167 -157
  11. package/esm2022/form/form.component.mjs +13 -9
  12. package/esm2022/formfield/formfield.component.mjs +18 -11
  13. package/esm2022/formfieldset/formfieldset.component.mjs +15 -11
  14. package/esm2022/maskedtextbox/maskedtextbox.component.mjs +77 -61
  15. package/esm2022/numerictextbox/numerictextbox.component.mjs +133 -113
  16. package/esm2022/otpinput/otpinput-separator.component.mjs +25 -15
  17. package/esm2022/otpinput/otpinput.component.mjs +116 -109
  18. package/esm2022/package-metadata.mjs +2 -2
  19. package/esm2022/rangeslider/rangeslider.component.mjs +114 -113
  20. package/esm2022/rating/rating.component.mjs +273 -271
  21. package/esm2022/signature/signature.component.mjs +170 -161
  22. package/esm2022/slider/slider.component.mjs +130 -125
  23. package/esm2022/sliders-common/slider-ticks.component.mjs +43 -31
  24. package/esm2022/textarea/textarea.component.mjs +73 -69
  25. package/esm2022/textbox/textbox.component.mjs +145 -123
  26. package/fesm2022/progress-kendo-angular-inputs.mjs +2599 -2393
  27. package/package.json +12 -12
  28. package/schematics/ngAdd/index.js +4 -0
@@ -14,7 +14,6 @@ import { packageMetadata } from '../package-metadata';
14
14
  import { SignatureCloseEvent, SignatureOpenEvent } from './events';
15
15
  import { xIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
16
16
  import { take } from 'rxjs/operators';
17
- import { NgIf } from '@angular/common';
18
17
  import { LocalizedSignatureMessagesDirective } from './localization/localized-signature-messages.directive';
19
18
  import { ButtonComponent } from '@progress/kendo-angular-buttons';
20
19
  import { DialogComponent } from '@progress/kendo-angular-dialog';
@@ -665,110 +664,115 @@ export class SignatureComponent {
665
664
  return this.localization.get(key);
666
665
  }
667
666
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SignatureComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
668
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SignatureComponent, isStandalone: true, selector: "kendo-signature", inputs: { focusableId: "focusableId", readonly: "readonly", disabled: "disabled", width: "width", height: "height", value: "value", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", color: "color", backgroundColor: "backgroundColor", strokeWidth: "strokeWidth", smooth: "smooth", maximizable: "maximizable", maximized: "maximized", popupScale: "popupScale", exportScale: "exportScale", parentLocalization: "parentLocalization", hideLine: "hideLine" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", minimize: "minimize" }, host: { properties: { "class.k-signature": "this.staticHostClasses", "class.k-input": "this.staticHostClasses", "attr.dir": "this.direction", "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabled", "style.width.px": "this.width", "style.height.px": "this.height" } }, providers: [
667
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SignatureComponent, isStandalone: true, selector: "kendo-signature", inputs: { focusableId: "focusableId", readonly: "readonly", disabled: "disabled", width: "width", height: "height", value: "value", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", color: "color", backgroundColor: "backgroundColor", strokeWidth: "strokeWidth", smooth: "smooth", maximizable: "maximizable", maximized: "maximized", popupScale: "popupScale", exportScale: "exportScale", parentLocalization: "parentLocalization", hideLine: "hideLine" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", minimize: "minimize" }, host: { properties: { "class.k-signature": "this.staticHostClasses", "class.k-input": "this.staticHostClasses", "attr.dir": "this.direction", "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabled", "style.width.px": "this.width", "style.height.px": "this.height" } }, providers: [
669
668
  LocalizationService,
670
669
  { provide: L10N_PREFIX, useValue: 'kendo.signature' },
671
670
  { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SignatureComponent) }
672
671
  ], viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "minimizeButton", first: true, predicate: ["minimize"], descendants: true, read: ElementRef }, { propertyName: "maximizeButton", first: true, predicate: ["maximize"], descendants: true, read: ElementRef }], exportAs: ["kendoSignature"], usesOnChanges: true, ngImport: i0, template: `
673
672
  <ng-container kendoSignatureLocalizedMessages
674
- i18n-clear="kendo.signature.clear|The message for the Clear button."
675
- clear="Clear"
676
- i18n-maximize="kendo.signature.maximize|The message for the Maximize button."
677
- maximize="Maximize"
678
- i18n-minimize="kendo.signature.minimize|The message for the Minimize button."
679
- minimize="Minimize"
680
- i18n-canvasLabel="kendo.signature.canvasLabel|The message for the Canvas element aria-label."
681
- canvasLabel="Signature canvas">
673
+ i18n-clear="kendo.signature.clear|The message for the Clear button."
674
+ clear="Clear"
675
+ i18n-maximize="kendo.signature.maximize|The message for the Maximize button."
676
+ maximize="Maximize"
677
+ i18n-minimize="kendo.signature.minimize|The message for the Minimize button."
678
+ minimize="Minimize"
679
+ i18n-canvasLabel="kendo.signature.canvasLabel|The message for the Canvas element aria-label."
680
+ canvasLabel="Signature canvas">
682
681
  </ng-container>
683
-
682
+
684
683
  <div
685
- #canvas
686
- class="k-signature-canvas"
687
- [attr.tabindex]="tabindex"
688
- [id]="focusableId"
689
- role="img"
690
- [attr.aria-label]="canvasLabel"
684
+ #canvas
685
+ class="k-signature-canvas"
686
+ [attr.tabindex]="tabindex"
687
+ [id]="focusableId"
688
+ role="img"
689
+ [attr.aria-label]="canvasLabel"
691
690
  ></div>
692
-
691
+
693
692
  <div class="k-signature-actions k-signature-actions-top">
693
+ @if (showMaximize) {
694
694
  <button
695
- #maximize
696
- *ngIf="showMaximize"
697
- kendoButton
698
- type="button"
699
- class="k-signature-action k-signature-maximize"
700
- icon="hyperlink-open"
701
- [svgIcon]="svgIcon('hyperlinkOpenIcon')"
702
- fillMode="flat"
703
- [size]="size"
704
- (click)="onMaximize()"
705
- [attr.aria-label]="maximizeTitle"
706
- [title]="maximizeTitle">
695
+ #maximize
696
+ kendoButton
697
+ type="button"
698
+ class="k-signature-action k-signature-maximize"
699
+ icon="hyperlink-open"
700
+ [svgIcon]="svgIcon('hyperlinkOpenIcon')"
701
+ fillMode="flat"
702
+ [size]="size"
703
+ (click)="onMaximize()"
704
+ [attr.aria-label]="maximizeTitle"
705
+ [title]="maximizeTitle">
707
706
  </button>
707
+ }
708
+ @if (showMinimize) {
708
709
  <button
709
- #minimize
710
- *ngIf="showMinimize"
711
- kendoButton
712
- type="button"
713
- class="k-signature-action k-signature-minimize k-rotate-180"
714
- icon="hyperlink-open"
715
- [svgIcon]="svgIcon('hyperlinkOpenIcon')"
716
- fillMode="flat"
717
- [size]="size"
718
- (click)="onMinimize()"
719
- [attr.aria-label]="minimizeTitle"
720
- [title]="minimizeTitle">
710
+ #minimize
711
+ kendoButton
712
+ type="button"
713
+ class="k-signature-action k-signature-minimize k-rotate-180"
714
+ icon="hyperlink-open"
715
+ [svgIcon]="svgIcon('hyperlinkOpenIcon')"
716
+ fillMode="flat"
717
+ [size]="size"
718
+ (click)="onMinimize()"
719
+ [attr.aria-label]="minimizeTitle"
720
+ [title]="minimizeTitle">
721
721
  </button>
722
+ }
722
723
  </div>
723
- <div
724
- *ngIf="!hideLine"
724
+ @if (!hideLine) {
725
+ <div
725
726
  class="k-signature-line"
726
- ></div>
727
+ ></div>
728
+ }
727
729
  <div class="k-signature-actions k-signature-actions-bottom">
730
+ @if (showClear) {
728
731
  <button
729
- *ngIf="showClear"
730
- kendoButton
731
- class="k-signature-action k-signature-clear"
732
- icon="close"
733
- type="button"
734
- [svgIcon]="svgIcon('xIcon')"
735
- fillMode="flat"
736
- [size]="size"
737
- [attr.aria-label]="clearTitle"
738
- [title]="clearTitle"
739
- (click)="onClear()" >
732
+ kendoButton
733
+ class="k-signature-action k-signature-clear"
734
+ icon="close"
735
+ type="button"
736
+ [svgIcon]="svgIcon('xIcon')"
737
+ fillMode="flat"
738
+ [size]="size"
739
+ [attr.aria-label]="clearTitle"
740
+ [title]="clearTitle"
741
+ (click)="onClear()" >
740
742
  </button>
743
+ }
741
744
  </div>
742
-
743
- <kendo-dialog
744
- *ngIf="isOpen"
745
+
746
+ @if (isOpen) {
747
+ <kendo-dialog
745
748
  autoFocusedElement=".k-signature-action.k-signature-minimize"
746
749
  (click)="onDialogClick($event)"
747
750
  (keydown)="onDialogKeydown($event)">
748
751
  <kendo-signature
749
- [readonly]="readonly"
750
- [disabled]="disabled"
751
- [size]="size"
752
- [rounded]="rounded"
753
- [fillMode]="fillMode"
754
- [color]="color"
755
- [backgroundColor]="backgroundColor"
756
- [strokeWidth]="strokeWidth"
757
- [smooth]="smooth"
758
- [value]="popupValue"
759
- (valueChange)="onDialogValueChange($event)"
760
- [hideLine]="hideLine"
761
- [class.k-signature-maximized]="true"
762
- [maximized]="true"
763
- (minimize)="onDialogClose()"
764
- [width]="popupWidth"
765
- [height]="popupHeight"
766
- [popupScale]="popupScale"
767
- [exportScale]="(1 / popupScale) * exportScale"
768
- [parentLocalization]="localization">
752
+ [readonly]="readonly"
753
+ [disabled]="disabled"
754
+ [size]="size"
755
+ [rounded]="rounded"
756
+ [fillMode]="fillMode"
757
+ [color]="color"
758
+ [backgroundColor]="backgroundColor"
759
+ [strokeWidth]="strokeWidth"
760
+ [smooth]="smooth"
761
+ [value]="popupValue"
762
+ (valueChange)="onDialogValueChange($event)"
763
+ [hideLine]="hideLine"
764
+ [class.k-signature-maximized]="true"
765
+ [maximized]="true"
766
+ (minimize)="onDialogClose()"
767
+ [width]="popupWidth"
768
+ [height]="popupHeight"
769
+ [popupScale]="popupScale"
770
+ [exportScale]="(1 / popupScale) * exportScale"
771
+ [parentLocalization]="localization">
769
772
  </kendo-signature>
770
- </kendo-dialog>
771
- `, isInline: true, dependencies: [{ kind: "component", type: SignatureComponent, selector: "kendo-signature", inputs: ["focusableId", "readonly", "disabled", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "exportScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }, { kind: "directive", type: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
773
+ </kendo-dialog>
774
+ }
775
+ `, isInline: true, dependencies: [{ kind: "component", type: SignatureComponent, selector: "kendo-signature", inputs: ["focusableId", "readonly", "disabled", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "exportScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }, { kind: "directive", type: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
772
776
  }
773
777
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SignatureComponent, decorators: [{
774
778
  type: Component,
@@ -783,106 +787,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
783
787
  ],
784
788
  template: `
785
789
  <ng-container kendoSignatureLocalizedMessages
786
- i18n-clear="kendo.signature.clear|The message for the Clear button."
787
- clear="Clear"
788
- i18n-maximize="kendo.signature.maximize|The message for the Maximize button."
789
- maximize="Maximize"
790
- i18n-minimize="kendo.signature.minimize|The message for the Minimize button."
791
- minimize="Minimize"
792
- i18n-canvasLabel="kendo.signature.canvasLabel|The message for the Canvas element aria-label."
793
- canvasLabel="Signature canvas">
790
+ i18n-clear="kendo.signature.clear|The message for the Clear button."
791
+ clear="Clear"
792
+ i18n-maximize="kendo.signature.maximize|The message for the Maximize button."
793
+ maximize="Maximize"
794
+ i18n-minimize="kendo.signature.minimize|The message for the Minimize button."
795
+ minimize="Minimize"
796
+ i18n-canvasLabel="kendo.signature.canvasLabel|The message for the Canvas element aria-label."
797
+ canvasLabel="Signature canvas">
794
798
  </ng-container>
795
-
799
+
796
800
  <div
797
- #canvas
798
- class="k-signature-canvas"
799
- [attr.tabindex]="tabindex"
800
- [id]="focusableId"
801
- role="img"
802
- [attr.aria-label]="canvasLabel"
801
+ #canvas
802
+ class="k-signature-canvas"
803
+ [attr.tabindex]="tabindex"
804
+ [id]="focusableId"
805
+ role="img"
806
+ [attr.aria-label]="canvasLabel"
803
807
  ></div>
804
-
808
+
805
809
  <div class="k-signature-actions k-signature-actions-top">
810
+ @if (showMaximize) {
806
811
  <button
807
- #maximize
808
- *ngIf="showMaximize"
809
- kendoButton
810
- type="button"
811
- class="k-signature-action k-signature-maximize"
812
- icon="hyperlink-open"
813
- [svgIcon]="svgIcon('hyperlinkOpenIcon')"
814
- fillMode="flat"
815
- [size]="size"
816
- (click)="onMaximize()"
817
- [attr.aria-label]="maximizeTitle"
818
- [title]="maximizeTitle">
812
+ #maximize
813
+ kendoButton
814
+ type="button"
815
+ class="k-signature-action k-signature-maximize"
816
+ icon="hyperlink-open"
817
+ [svgIcon]="svgIcon('hyperlinkOpenIcon')"
818
+ fillMode="flat"
819
+ [size]="size"
820
+ (click)="onMaximize()"
821
+ [attr.aria-label]="maximizeTitle"
822
+ [title]="maximizeTitle">
819
823
  </button>
824
+ }
825
+ @if (showMinimize) {
820
826
  <button
821
- #minimize
822
- *ngIf="showMinimize"
823
- kendoButton
824
- type="button"
825
- class="k-signature-action k-signature-minimize k-rotate-180"
826
- icon="hyperlink-open"
827
- [svgIcon]="svgIcon('hyperlinkOpenIcon')"
828
- fillMode="flat"
829
- [size]="size"
830
- (click)="onMinimize()"
831
- [attr.aria-label]="minimizeTitle"
832
- [title]="minimizeTitle">
827
+ #minimize
828
+ kendoButton
829
+ type="button"
830
+ class="k-signature-action k-signature-minimize k-rotate-180"
831
+ icon="hyperlink-open"
832
+ [svgIcon]="svgIcon('hyperlinkOpenIcon')"
833
+ fillMode="flat"
834
+ [size]="size"
835
+ (click)="onMinimize()"
836
+ [attr.aria-label]="minimizeTitle"
837
+ [title]="minimizeTitle">
833
838
  </button>
839
+ }
834
840
  </div>
835
- <div
836
- *ngIf="!hideLine"
841
+ @if (!hideLine) {
842
+ <div
837
843
  class="k-signature-line"
838
- ></div>
844
+ ></div>
845
+ }
839
846
  <div class="k-signature-actions k-signature-actions-bottom">
847
+ @if (showClear) {
840
848
  <button
841
- *ngIf="showClear"
842
- kendoButton
843
- class="k-signature-action k-signature-clear"
844
- icon="close"
845
- type="button"
846
- [svgIcon]="svgIcon('xIcon')"
847
- fillMode="flat"
848
- [size]="size"
849
- [attr.aria-label]="clearTitle"
850
- [title]="clearTitle"
851
- (click)="onClear()" >
849
+ kendoButton
850
+ class="k-signature-action k-signature-clear"
851
+ icon="close"
852
+ type="button"
853
+ [svgIcon]="svgIcon('xIcon')"
854
+ fillMode="flat"
855
+ [size]="size"
856
+ [attr.aria-label]="clearTitle"
857
+ [title]="clearTitle"
858
+ (click)="onClear()" >
852
859
  </button>
860
+ }
853
861
  </div>
854
-
855
- <kendo-dialog
856
- *ngIf="isOpen"
862
+
863
+ @if (isOpen) {
864
+ <kendo-dialog
857
865
  autoFocusedElement=".k-signature-action.k-signature-minimize"
858
866
  (click)="onDialogClick($event)"
859
867
  (keydown)="onDialogKeydown($event)">
860
868
  <kendo-signature
861
- [readonly]="readonly"
862
- [disabled]="disabled"
863
- [size]="size"
864
- [rounded]="rounded"
865
- [fillMode]="fillMode"
866
- [color]="color"
867
- [backgroundColor]="backgroundColor"
868
- [strokeWidth]="strokeWidth"
869
- [smooth]="smooth"
870
- [value]="popupValue"
871
- (valueChange)="onDialogValueChange($event)"
872
- [hideLine]="hideLine"
873
- [class.k-signature-maximized]="true"
874
- [maximized]="true"
875
- (minimize)="onDialogClose()"
876
- [width]="popupWidth"
877
- [height]="popupHeight"
878
- [popupScale]="popupScale"
879
- [exportScale]="(1 / popupScale) * exportScale"
880
- [parentLocalization]="localization">
869
+ [readonly]="readonly"
870
+ [disabled]="disabled"
871
+ [size]="size"
872
+ [rounded]="rounded"
873
+ [fillMode]="fillMode"
874
+ [color]="color"
875
+ [backgroundColor]="backgroundColor"
876
+ [strokeWidth]="strokeWidth"
877
+ [smooth]="smooth"
878
+ [value]="popupValue"
879
+ (valueChange)="onDialogValueChange($event)"
880
+ [hideLine]="hideLine"
881
+ [class.k-signature-maximized]="true"
882
+ [maximized]="true"
883
+ (minimize)="onDialogClose()"
884
+ [width]="popupWidth"
885
+ [height]="popupHeight"
886
+ [popupScale]="popupScale"
887
+ [exportScale]="(1 / popupScale) * exportScale"
888
+ [parentLocalization]="localization">
881
889
  </kendo-signature>
882
- </kendo-dialog>
883
- `,
890
+ </kendo-dialog>
891
+ }
892
+ `,
884
893
  standalone: true,
885
- imports: [LocalizedSignatureMessagesDirective, NgIf, ButtonComponent, DialogComponent]
894
+ imports: [LocalizedSignatureMessagesDirective, ButtonComponent, DialogComponent]
886
895
  }]
887
896
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { staticHostClasses: [{
888
897
  type: HostBinding,