@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.
- package/esm2022/colorpicker/adaptiveness/adaptive-renderer.component.mjs +105 -97
- package/esm2022/colorpicker/color-contrast-svg.component.mjs +10 -7
- package/esm2022/colorpicker/color-gradient.component.mjs +287 -279
- package/esm2022/colorpicker/color-input.component.mjs +242 -235
- package/esm2022/colorpicker/color-palette.component.mjs +47 -39
- package/esm2022/colorpicker/colorpicker.component.mjs +228 -222
- package/esm2022/colorpicker/contrast-validation.component.mjs +26 -21
- package/esm2022/colorpicker/contrast.component.mjs +46 -37
- package/esm2022/colorpicker/flatcolorpicker-header.component.mjs +105 -95
- package/esm2022/colorpicker/flatcolorpicker.component.mjs +167 -157
- package/esm2022/form/form.component.mjs +13 -9
- package/esm2022/formfield/formfield.component.mjs +18 -11
- package/esm2022/formfieldset/formfieldset.component.mjs +15 -11
- package/esm2022/maskedtextbox/maskedtextbox.component.mjs +77 -61
- package/esm2022/numerictextbox/numerictextbox.component.mjs +133 -113
- package/esm2022/otpinput/otpinput-separator.component.mjs +25 -15
- package/esm2022/otpinput/otpinput.component.mjs +116 -109
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/rangeslider/rangeslider.component.mjs +114 -113
- package/esm2022/rating/rating.component.mjs +273 -271
- package/esm2022/signature/signature.component.mjs +170 -161
- package/esm2022/slider/slider.component.mjs +130 -125
- package/esm2022/sliders-common/slider-ticks.component.mjs +43 -31
- package/esm2022/textarea/textarea.component.mjs +73 -69
- package/esm2022/textbox/textbox.component.mjs +145 -123
- package/fesm2022/progress-kendo-angular-inputs.mjs +2599 -2393
- package/package.json +12 -12
- package/schematics/ngAdd/index.js +4 -0
|
@@ -17,7 +17,7 @@ import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
|
17
17
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
18
18
|
import { checkIcon, exclamationCircleIcon, xIcon } from '@progress/kendo-svg-icons';
|
|
19
19
|
import { InputSeparatorComponent } from '../shared/input-separator.component';
|
|
20
|
-
import {
|
|
20
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
21
21
|
import { SharedInputEventsDirective } from '../shared/shared-events.directive';
|
|
22
22
|
import { LocalizedTextBoxMessagesDirective } from './localization/localized-textbox-messages.directive';
|
|
23
23
|
import * as i0 from "@angular/core";
|
|
@@ -635,7 +635,7 @@ export class TextBoxComponent {
|
|
|
635
635
|
setHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement, this.ngZone);
|
|
636
636
|
}
|
|
637
637
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
638
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
638
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TextBoxComponent, isStandalone: true, selector: "kendo-textbox", inputs: { focusableId: "focusableId", title: "title", type: "type", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", value: "value", selectOnFocus: "selectOnFocus", showSuccessIcon: "showSuccessIcon", showErrorIcon: "showErrorIcon", clearButton: "clearButton", successIcon: "successIcon", successSvgIcon: "successSvgIcon", errorIcon: "errorIcon", errorSvgIcon: "errorSvgIcon", clearButtonIcon: "clearButtonIcon", clearButtonSvgIcon: "clearButtonSvgIcon", size: "size", rounded: "rounded", fillMode: "fillMode", tabIndex: "tabIndex", placeholder: "placeholder", maxlength: "maxlength", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabledClass", "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.direction" } }, providers: [
|
|
639
639
|
LocalizationService,
|
|
640
640
|
{ provide: L10N_PREFIX, useValue: 'kendo.textbox' },
|
|
641
641
|
{
|
|
@@ -646,81 +646,92 @@ export class TextBoxComponent {
|
|
|
646
646
|
{ provide: KendoInput, useExisting: forwardRef(() => TextBoxComponent) }
|
|
647
647
|
], queries: [{ propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }, { propertyName: "textBoxSuffixTemplate", predicate: TextBoxSuffixTemplateDirective }, { propertyName: "textBoxPrefixTemplate", predicate: TextBoxPrefixTemplateDirective }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], exportAs: ["kendoTextBox"], usesOnChanges: true, ngImport: i0, template: `
|
|
648
648
|
<ng-container kendoTextBoxLocalizedMessages
|
|
649
|
-
|
|
650
|
-
|
|
649
|
+
i18n-clear="kendo.textbox.clear|The title for the **Clear** button in the TextBox."
|
|
650
|
+
clear="Clear">
|
|
651
651
|
</ng-container>
|
|
652
652
|
<ng-container
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
653
|
+
kendoInputSharedEvents
|
|
654
|
+
[hostElement]="hostElement"
|
|
655
|
+
[(isFocused)]="isFocused"
|
|
656
|
+
(handleBlur)="handleBlur()"
|
|
657
|
+
(onFocus)="handleFocus()"
|
|
658
|
+
[clearButtonClicked]="clearButtonClicked"
|
|
659
|
+
>
|
|
660
|
+
@if (prefix) {
|
|
661
|
+
<span class="k-input-prefix k-input-prefix-horizontal">
|
|
662
|
+
<ng-template [ngTemplateOutlet]="prefix?.templateRef">
|
|
663
|
+
</ng-template>
|
|
663
664
|
</span>
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
665
|
+
}
|
|
666
|
+
@if (prefix && prefix.showSeparator) {
|
|
667
|
+
<kendo-input-separator></kendo-input-separator>
|
|
668
|
+
}
|
|
669
|
+
<input #input
|
|
670
|
+
class="k-input-inner"
|
|
671
|
+
[id]="focusableId"
|
|
672
|
+
[disabled]="disabled"
|
|
673
|
+
[readonly]="readonly"
|
|
674
|
+
[attr.tabindex]="disabled ? undefined : tabindex"
|
|
675
|
+
[value]="value"
|
|
676
|
+
[attr.type]="type"
|
|
677
|
+
[attr.placeholder]="placeholder"
|
|
678
|
+
[attr.title]="title"
|
|
679
|
+
[attr.maxlength]="maxlength"
|
|
680
|
+
[attr.aria-invalid]="isControlInvalid"
|
|
681
|
+
[attr.required]="isControlRequired ? '' : null"
|
|
678
682
|
[kendoEventsOutsideAngular]="{
|
|
679
683
|
focus: handleInputFocus,
|
|
680
684
|
blur: handleInputBlur,
|
|
681
685
|
input: handleInput}"
|
|
682
686
|
/>
|
|
687
|
+
@if (showClearButton) {
|
|
683
688
|
<span
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
</kendo-icon-wrapper>
|
|
689
|
+
role="button"
|
|
690
|
+
class="k-clear-value"
|
|
691
|
+
(click)="clearValue()"
|
|
692
|
+
(mousedown)="$event.preventDefault()"
|
|
693
|
+
[tabindex]="tabIndex"
|
|
694
|
+
[attr.aria-label]="clearTitle()"
|
|
695
|
+
[title]="clearTitle()"
|
|
696
|
+
(keydown.enter)="clearValue($event)"
|
|
697
|
+
(keydown.space)="clearValue($event)">
|
|
698
|
+
<kendo-icon-wrapper
|
|
699
|
+
[name]="clearButtonClass"
|
|
700
|
+
[customFontClass]="customClearButtonClasses"
|
|
701
|
+
[svgIcon]="clearButtonSvgIcon || svgIcon('xIcon')"
|
|
702
|
+
>
|
|
703
|
+
</kendo-icon-wrapper>
|
|
700
704
|
</span>
|
|
705
|
+
}
|
|
706
|
+
@if (hasErrors) {
|
|
701
707
|
<kendo-icon-wrapper
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
>
|
|
708
|
+
innerCssClass="k-input-validation-icon"
|
|
709
|
+
[name]="errorIconClasses"
|
|
710
|
+
[customFontClass]="customIconClasses"
|
|
711
|
+
[svgIcon]="errorSvgIcon || svgIcon('exclamationCircleIcon')"
|
|
712
|
+
>
|
|
708
713
|
</kendo-icon-wrapper>
|
|
714
|
+
}
|
|
715
|
+
@if (isSuccessful) {
|
|
709
716
|
<kendo-icon-wrapper
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
>
|
|
717
|
+
innerCssClass="k-input-validation-icon"
|
|
718
|
+
[name]="successIconClasses"
|
|
719
|
+
[customFontClass]="customSuccessIconClasses"
|
|
720
|
+
[svgIcon]="successSvgIcon || svgIcon('checkIcon')"
|
|
721
|
+
>
|
|
716
722
|
</kendo-icon-wrapper>
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
723
|
+
}
|
|
724
|
+
@if (suffix && suffix.showSeparator) {
|
|
725
|
+
<kendo-input-separator></kendo-input-separator>
|
|
726
|
+
}
|
|
727
|
+
@if (suffix) {
|
|
728
|
+
<span class="k-input-suffix k-input-suffix-horizontal">
|
|
729
|
+
<ng-template [ngTemplateOutlet]="suffix?.templateRef">
|
|
730
|
+
</ng-template>
|
|
721
731
|
</span>
|
|
722
|
-
|
|
723
|
-
|
|
732
|
+
}
|
|
733
|
+
<ng-container>
|
|
734
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { kind: "directive", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
724
735
|
}
|
|
725
736
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextBoxComponent, decorators: [{
|
|
726
737
|
type: Component,
|
|
@@ -739,83 +750,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
739
750
|
selector: 'kendo-textbox',
|
|
740
751
|
template: `
|
|
741
752
|
<ng-container kendoTextBoxLocalizedMessages
|
|
742
|
-
|
|
743
|
-
|
|
753
|
+
i18n-clear="kendo.textbox.clear|The title for the **Clear** button in the TextBox."
|
|
754
|
+
clear="Clear">
|
|
744
755
|
</ng-container>
|
|
745
756
|
<ng-container
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
757
|
+
kendoInputSharedEvents
|
|
758
|
+
[hostElement]="hostElement"
|
|
759
|
+
[(isFocused)]="isFocused"
|
|
760
|
+
(handleBlur)="handleBlur()"
|
|
761
|
+
(onFocus)="handleFocus()"
|
|
762
|
+
[clearButtonClicked]="clearButtonClicked"
|
|
763
|
+
>
|
|
764
|
+
@if (prefix) {
|
|
765
|
+
<span class="k-input-prefix k-input-prefix-horizontal">
|
|
766
|
+
<ng-template [ngTemplateOutlet]="prefix?.templateRef">
|
|
767
|
+
</ng-template>
|
|
756
768
|
</span>
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
769
|
+
}
|
|
770
|
+
@if (prefix && prefix.showSeparator) {
|
|
771
|
+
<kendo-input-separator></kendo-input-separator>
|
|
772
|
+
}
|
|
773
|
+
<input #input
|
|
774
|
+
class="k-input-inner"
|
|
775
|
+
[id]="focusableId"
|
|
776
|
+
[disabled]="disabled"
|
|
777
|
+
[readonly]="readonly"
|
|
778
|
+
[attr.tabindex]="disabled ? undefined : tabindex"
|
|
779
|
+
[value]="value"
|
|
780
|
+
[attr.type]="type"
|
|
781
|
+
[attr.placeholder]="placeholder"
|
|
782
|
+
[attr.title]="title"
|
|
783
|
+
[attr.maxlength]="maxlength"
|
|
784
|
+
[attr.aria-invalid]="isControlInvalid"
|
|
785
|
+
[attr.required]="isControlRequired ? '' : null"
|
|
771
786
|
[kendoEventsOutsideAngular]="{
|
|
772
787
|
focus: handleInputFocus,
|
|
773
788
|
blur: handleInputBlur,
|
|
774
789
|
input: handleInput}"
|
|
775
790
|
/>
|
|
791
|
+
@if (showClearButton) {
|
|
776
792
|
<span
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
</kendo-icon-wrapper>
|
|
793
|
+
role="button"
|
|
794
|
+
class="k-clear-value"
|
|
795
|
+
(click)="clearValue()"
|
|
796
|
+
(mousedown)="$event.preventDefault()"
|
|
797
|
+
[tabindex]="tabIndex"
|
|
798
|
+
[attr.aria-label]="clearTitle()"
|
|
799
|
+
[title]="clearTitle()"
|
|
800
|
+
(keydown.enter)="clearValue($event)"
|
|
801
|
+
(keydown.space)="clearValue($event)">
|
|
802
|
+
<kendo-icon-wrapper
|
|
803
|
+
[name]="clearButtonClass"
|
|
804
|
+
[customFontClass]="customClearButtonClasses"
|
|
805
|
+
[svgIcon]="clearButtonSvgIcon || svgIcon('xIcon')"
|
|
806
|
+
>
|
|
807
|
+
</kendo-icon-wrapper>
|
|
793
808
|
</span>
|
|
809
|
+
}
|
|
810
|
+
@if (hasErrors) {
|
|
794
811
|
<kendo-icon-wrapper
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
>
|
|
812
|
+
innerCssClass="k-input-validation-icon"
|
|
813
|
+
[name]="errorIconClasses"
|
|
814
|
+
[customFontClass]="customIconClasses"
|
|
815
|
+
[svgIcon]="errorSvgIcon || svgIcon('exclamationCircleIcon')"
|
|
816
|
+
>
|
|
801
817
|
</kendo-icon-wrapper>
|
|
818
|
+
}
|
|
819
|
+
@if (isSuccessful) {
|
|
802
820
|
<kendo-icon-wrapper
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
>
|
|
821
|
+
innerCssClass="k-input-validation-icon"
|
|
822
|
+
[name]="successIconClasses"
|
|
823
|
+
[customFontClass]="customSuccessIconClasses"
|
|
824
|
+
[svgIcon]="successSvgIcon || svgIcon('checkIcon')"
|
|
825
|
+
>
|
|
809
826
|
</kendo-icon-wrapper>
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
827
|
+
}
|
|
828
|
+
@if (suffix && suffix.showSeparator) {
|
|
829
|
+
<kendo-input-separator></kendo-input-separator>
|
|
830
|
+
}
|
|
831
|
+
@if (suffix) {
|
|
832
|
+
<span class="k-input-suffix k-input-suffix-horizontal">
|
|
833
|
+
<ng-template [ngTemplateOutlet]="suffix?.templateRef">
|
|
834
|
+
</ng-template>
|
|
814
835
|
</span>
|
|
815
|
-
|
|
816
|
-
|
|
836
|
+
}
|
|
837
|
+
<ng-container>
|
|
838
|
+
`,
|
|
817
839
|
standalone: true,
|
|
818
|
-
imports: [LocalizedTextBoxMessagesDirective, SharedInputEventsDirective,
|
|
840
|
+
imports: [LocalizedTextBoxMessagesDirective, SharedInputEventsDirective, NgTemplateOutlet, InputSeparatorComponent, EventsOutsideAngularDirective, IconWrapperComponent]
|
|
819
841
|
}]
|
|
820
842
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ElementRef }], propDecorators: { focusableId: [{
|
|
821
843
|
type: Input
|