@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
|
@@ -12,7 +12,7 @@ import { MaskingService } from './masking.service';
|
|
|
12
12
|
import { invokeElementMethod } from '../common/dom-utils';
|
|
13
13
|
import { requiresZoneOnBlur, isPresent, getStylingClasses } from '../common/utils';
|
|
14
14
|
import { InputSeparatorComponent } from '../shared/input-separator.component';
|
|
15
|
-
import {
|
|
15
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
16
16
|
import { SharedInputEventsDirective } from '../shared/shared-events.directive';
|
|
17
17
|
import * as i0 from "@angular/core";
|
|
18
18
|
import * as i1 from "./masking.service";
|
|
@@ -647,7 +647,7 @@ export class MaskedTextBoxComponent {
|
|
|
647
647
|
setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement, this.ngZone);
|
|
648
648
|
}
|
|
649
649
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaskedTextBoxComponent, deps: [{ token: i1.MaskingService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
650
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
650
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MaskedTextBoxComponent, isStandalone: true, selector: "kendo-maskedtextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", size: "size", rounded: "rounded", fillMode: "fillMode", mask: "mask", value: "value", rules: "rules", prompt: "prompt", promptPlaceholder: "promptPlaceholder", includeLiterals: "includeLiterals", maskOnFocus: "maskOnFocus", maskValidation: "maskValidation", tabindex: "tabindex", tabIndex: "tabIndex", inputAttributes: "inputAttributes" }, outputs: { onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", valueChange: "valueChange" }, host: { listeners: { "paste": "pasteHandler($event)", "input": "inputHandler($event)" }, properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.direction", "class.k-input": "this.hostClasses", "class.k-maskedtextbox": "this.hostClasses", "class.k-disabled": "this.hostDisabledClass" } }, providers: [
|
|
651
651
|
MaskingService,
|
|
652
652
|
{
|
|
653
653
|
multi: true,
|
|
@@ -665,31 +665,35 @@ export class MaskedTextBoxComponent {
|
|
|
665
665
|
}
|
|
666
666
|
], queries: [{ propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], exportAs: ["kendoMaskedTextBox"], usesOnChanges: true, ngImport: i0, template: `
|
|
667
667
|
<ng-container
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
668
|
+
kendoInputSharedEvents
|
|
669
|
+
[hostElement]="hostElement"
|
|
670
|
+
[(isFocused)]="focused"
|
|
671
|
+
(handleBlur)="handleBlur()"
|
|
672
|
+
(onFocus)="handleFocus()"
|
|
673
|
+
>
|
|
674
|
+
@if (prefixTemplate) {
|
|
675
|
+
<span class="k-input-prefix k-input-prefix-horizontal">
|
|
676
|
+
<ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
|
|
677
|
+
</ng-template>
|
|
677
678
|
</span>
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
679
|
+
}
|
|
680
|
+
@if (prefixTemplate && prefixTemplate.showSeparator) {
|
|
681
|
+
<kendo-input-separator></kendo-input-separator>
|
|
682
|
+
}
|
|
683
|
+
<input #input
|
|
684
|
+
class="k-input-inner"
|
|
685
|
+
autocomplete="off"
|
|
686
|
+
autocorrect="off"
|
|
687
|
+
autocapitalize="off"
|
|
688
|
+
spellcheck="false"
|
|
689
|
+
[id]="focusableId"
|
|
690
|
+
[tabindex]="tabIndex"
|
|
691
|
+
[attr.title]="title"
|
|
692
|
+
[attr.aria-placeholder]="mask"
|
|
693
|
+
[attr.aria-invalid]="isControlInvalid"
|
|
694
|
+
[attr.required]="isControlRequired ? '' : null"
|
|
695
|
+
[disabled]="disabled"
|
|
696
|
+
[readonly]="readonly"
|
|
693
697
|
[kendoEventsOutsideAngular]="{
|
|
694
698
|
focus: handleInputFocus,
|
|
695
699
|
blur: handleInputBlur,
|
|
@@ -698,13 +702,17 @@ export class MaskedTextBoxComponent {
|
|
|
698
702
|
drop: handleDragDrop
|
|
699
703
|
}"
|
|
700
704
|
/>
|
|
701
|
-
|
|
702
|
-
<
|
|
703
|
-
|
|
704
|
-
|
|
705
|
+
@if (suffixTemplate && suffixTemplate.showSeparator) {
|
|
706
|
+
<kendo-input-separator></kendo-input-separator>
|
|
707
|
+
}
|
|
708
|
+
@if (suffixTemplate) {
|
|
709
|
+
<span class="k-input-suffix k-input-suffix-horizontal">
|
|
710
|
+
<ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
|
|
711
|
+
</ng-template>
|
|
705
712
|
</span>
|
|
713
|
+
}
|
|
706
714
|
</ng-container>
|
|
707
|
-
|
|
715
|
+
`, isInline: true, dependencies: [{ 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"] }] });
|
|
708
716
|
}
|
|
709
717
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaskedTextBoxComponent, decorators: [{
|
|
710
718
|
type: Component,
|
|
@@ -730,31 +738,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
730
738
|
selector: 'kendo-maskedtextbox',
|
|
731
739
|
template: `
|
|
732
740
|
<ng-container
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
741
|
+
kendoInputSharedEvents
|
|
742
|
+
[hostElement]="hostElement"
|
|
743
|
+
[(isFocused)]="focused"
|
|
744
|
+
(handleBlur)="handleBlur()"
|
|
745
|
+
(onFocus)="handleFocus()"
|
|
746
|
+
>
|
|
747
|
+
@if (prefixTemplate) {
|
|
748
|
+
<span class="k-input-prefix k-input-prefix-horizontal">
|
|
749
|
+
<ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
|
|
750
|
+
</ng-template>
|
|
742
751
|
</span>
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
752
|
+
}
|
|
753
|
+
@if (prefixTemplate && prefixTemplate.showSeparator) {
|
|
754
|
+
<kendo-input-separator></kendo-input-separator>
|
|
755
|
+
}
|
|
756
|
+
<input #input
|
|
757
|
+
class="k-input-inner"
|
|
758
|
+
autocomplete="off"
|
|
759
|
+
autocorrect="off"
|
|
760
|
+
autocapitalize="off"
|
|
761
|
+
spellcheck="false"
|
|
762
|
+
[id]="focusableId"
|
|
763
|
+
[tabindex]="tabIndex"
|
|
764
|
+
[attr.title]="title"
|
|
765
|
+
[attr.aria-placeholder]="mask"
|
|
766
|
+
[attr.aria-invalid]="isControlInvalid"
|
|
767
|
+
[attr.required]="isControlRequired ? '' : null"
|
|
768
|
+
[disabled]="disabled"
|
|
769
|
+
[readonly]="readonly"
|
|
758
770
|
[kendoEventsOutsideAngular]="{
|
|
759
771
|
focus: handleInputFocus,
|
|
760
772
|
blur: handleInputBlur,
|
|
@@ -763,15 +775,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
763
775
|
drop: handleDragDrop
|
|
764
776
|
}"
|
|
765
777
|
/>
|
|
766
|
-
|
|
767
|
-
<
|
|
768
|
-
|
|
769
|
-
|
|
778
|
+
@if (suffixTemplate && suffixTemplate.showSeparator) {
|
|
779
|
+
<kendo-input-separator></kendo-input-separator>
|
|
780
|
+
}
|
|
781
|
+
@if (suffixTemplate) {
|
|
782
|
+
<span class="k-input-suffix k-input-suffix-horizontal">
|
|
783
|
+
<ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
|
|
784
|
+
</ng-template>
|
|
770
785
|
</span>
|
|
786
|
+
}
|
|
771
787
|
</ng-container>
|
|
772
|
-
|
|
788
|
+
`,
|
|
773
789
|
standalone: true,
|
|
774
|
-
imports: [SharedInputEventsDirective,
|
|
790
|
+
imports: [SharedInputEventsDirective, NgTemplateOutlet, InputSeparatorComponent, EventsOutsideAngularDirective]
|
|
775
791
|
}]
|
|
776
792
|
}], ctorParameters: () => [{ type: i1.MaskingService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
777
793
|
type: Optional
|
|
@@ -21,7 +21,7 @@ import { ArrowDirection } from './arrow-direction';
|
|
|
21
21
|
import { mobileOS } from '@progress/kendo-common';
|
|
22
22
|
import { caretAltUpIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
|
|
23
23
|
import { InputSeparatorComponent } from '../shared/input-separator.component';
|
|
24
|
-
import {
|
|
24
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
25
25
|
import { SharedInputEventsDirective } from '../shared/shared-events.directive';
|
|
26
26
|
import { LocalizedNumericTextBoxMessagesDirective } from './localization/localized-numerictextbox-messages.directive';
|
|
27
27
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
@@ -1003,7 +1003,7 @@ export class NumericTextBoxComponent {
|
|
|
1003
1003
|
setHTMLAttributes(attributesToRender, this.renderer, this.numericInput.nativeElement, this.ngZone);
|
|
1004
1004
|
}
|
|
1005
1005
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumericTextBoxComponent, deps: [{ token: i1.IntlService }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1006
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1006
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NumericTextBoxComponent, isStandalone: true, selector: "kendo-numerictextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", autoCorrect: "autoCorrect", format: "format", max: "max", min: "min", decimals: "decimals", placeholder: "placeholder", step: "step", spinners: "spinners", rangeValidation: "rangeValidation", tabindex: "tabindex", tabIndex: "tabIndex", changeValueOnScroll: "changeValueOnScroll", selectOnFocus: "selectOnFocus", value: "value", maxlength: "maxlength", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.direction", "class.k-disabled": "this.disableClass", "class.k-input": "this.hostClasses", "class.k-numerictextbox": "this.hostClasses" } }, providers: [
|
|
1007
1007
|
LocalizationService,
|
|
1008
1008
|
{ provide: L10N_PREFIX, useValue: 'kendo.numerictextbox' },
|
|
1009
1009
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NumericTextBoxComponent), multi: true },
|
|
@@ -1011,41 +1011,45 @@ export class NumericTextBoxComponent {
|
|
|
1011
1011
|
{ provide: KendoInput, useExisting: forwardRef(() => NumericTextBoxComponent) }
|
|
1012
1012
|
], queries: [{ propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "numericInput", first: true, predicate: ["numericInput"], descendants: true, static: true }], exportAs: ["kendoNumericTextBox"], usesOnChanges: true, ngImport: i0, template: `
|
|
1013
1013
|
<ng-container kendoNumericTextBoxLocalizedMessages
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1014
|
+
i18n-increment="kendo.numerictextbox.increment|The title for the **Increment** button in the NumericTextBox"
|
|
1015
|
+
increment="Increase value"
|
|
1016
|
+
i18n-decrement="kendo.numerictextbox.decrement|The title for the **Decrement** button in the NumericTextBox"
|
|
1017
|
+
decrement="Decrease value"
|
|
1018
|
+
>
|
|
1019
1019
|
</ng-container>
|
|
1020
1020
|
<ng-container
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1021
|
+
kendoInputSharedEvents
|
|
1022
|
+
[hostElement]="hostElement"
|
|
1023
|
+
[(isFocused)]="focused"
|
|
1024
|
+
(handleBlur)="handleBlur()"
|
|
1025
|
+
(onFocus)="handleFocus()"
|
|
1026
|
+
>
|
|
1027
|
+
@if (prefixTemplate) {
|
|
1028
|
+
<span class="k-input-prefix k-input-prefix-horizontal">
|
|
1029
|
+
<ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
|
|
1030
|
+
</ng-template>
|
|
1030
1031
|
</span>
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1032
|
+
}
|
|
1033
|
+
@if (prefixTemplate && prefixTemplate.showSeparator) {
|
|
1034
|
+
<kendo-input-separator></kendo-input-separator>
|
|
1035
|
+
}
|
|
1036
|
+
<input #numericInput
|
|
1037
|
+
class="k-input-inner"
|
|
1038
|
+
role="spinbutton"
|
|
1039
|
+
autocomplete="off"
|
|
1040
|
+
autocorrect="off"
|
|
1041
|
+
[id]="focusableId"
|
|
1042
|
+
[attr.aria-valuemin]="min"
|
|
1043
|
+
[attr.aria-valuemax]="max"
|
|
1044
|
+
[attr.aria-valuenow]="value"
|
|
1045
|
+
[attr.title]="title"
|
|
1046
|
+
[attr.placeholder]="placeholder"
|
|
1047
|
+
[attr.maxLength]="maxlength"
|
|
1048
|
+
[tabindex]="tabIndex"
|
|
1049
|
+
[disabled]="disabled"
|
|
1050
|
+
[readonly]="readonly"
|
|
1051
|
+
[attr.aria-invalid]="isControlInvalid"
|
|
1052
|
+
[attr.required]="isControlRequired ? '' : null"
|
|
1049
1053
|
[kendoEventsOutsideAngular]="{
|
|
1050
1054
|
mousedown: handleMouseDown,
|
|
1051
1055
|
dragenter: handleDragEnter,
|
|
@@ -1055,16 +1059,21 @@ export class NumericTextBoxComponent {
|
|
|
1055
1059
|
blur: handleInputBlur,
|
|
1056
1060
|
paste: handlePaste
|
|
1057
1061
|
}"/>
|
|
1058
|
-
|
|
1059
|
-
<
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
+
@if (suffixTemplate && suffixTemplate?.showSeparator) {
|
|
1063
|
+
<kendo-input-separator></kendo-input-separator>
|
|
1064
|
+
}
|
|
1065
|
+
@if (suffixTemplate) {
|
|
1066
|
+
<span class="k-input-suffix k-input-suffix-horizontal">
|
|
1067
|
+
<ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
|
|
1068
|
+
</ng-template>
|
|
1062
1069
|
</span>
|
|
1070
|
+
}
|
|
1071
|
+
@if (spinners) {
|
|
1063
1072
|
<span
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1073
|
+
class="k-input-spinner k-spin-button"
|
|
1074
|
+
[kendoEventsOutsideAngular]="{ mouseup: releaseArrow, mouseleave: releaseArrow }"
|
|
1075
|
+
>
|
|
1076
|
+
<button
|
|
1068
1077
|
type="button"
|
|
1069
1078
|
[kendoEventsOutsideAngular]="{ mousedown: increasePress }"
|
|
1070
1079
|
[attr.aria-hidden]="true"
|
|
@@ -1073,15 +1082,15 @@ export class NumericTextBoxComponent {
|
|
|
1073
1082
|
class="k-spinner-increase k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
|
|
1074
1083
|
[class.k-active]="arrowDirection === ArrowDirection.Up"
|
|
1075
1084
|
tabindex="-1"
|
|
1076
|
-
>
|
|
1077
|
-
<kendo-icon-wrapper
|
|
1078
|
-
name="caret-alt-up"
|
|
1079
|
-
innerCssClass="k-button-icon"
|
|
1080
|
-
[svgIcon]="arrowUpIcon"
|
|
1081
1085
|
>
|
|
1086
|
+
<kendo-icon-wrapper
|
|
1087
|
+
name="caret-alt-up"
|
|
1088
|
+
innerCssClass="k-button-icon"
|
|
1089
|
+
[svgIcon]="arrowUpIcon"
|
|
1090
|
+
>
|
|
1082
1091
|
</kendo-icon-wrapper>
|
|
1083
|
-
|
|
1084
|
-
|
|
1092
|
+
</button>
|
|
1093
|
+
<button
|
|
1085
1094
|
type="button"
|
|
1086
1095
|
[kendoEventsOutsideAngular]="{ mousedown: decreasePress }"
|
|
1087
1096
|
[attr.aria-hidden]="true"
|
|
@@ -1090,17 +1099,18 @@ export class NumericTextBoxComponent {
|
|
|
1090
1099
|
[class.k-active]="arrowDirection === ArrowDirection.Down"
|
|
1091
1100
|
class="k-spinner-decrease k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
|
|
1092
1101
|
tabindex="-1"
|
|
1093
|
-
>
|
|
1094
|
-
<kendo-icon-wrapper
|
|
1095
|
-
name="caret-alt-down"
|
|
1096
|
-
innerCssClass="k-button-icon"
|
|
1097
|
-
[svgIcon]="arrowDownIcon"
|
|
1098
1102
|
>
|
|
1099
|
-
|
|
1100
|
-
|
|
1103
|
+
<kendo-icon-wrapper
|
|
1104
|
+
name="caret-alt-down"
|
|
1105
|
+
innerCssClass="k-button-icon"
|
|
1106
|
+
[svgIcon]="arrowDownIcon"
|
|
1107
|
+
>
|
|
1108
|
+
</kendo-icon-wrapper>
|
|
1109
|
+
</button>
|
|
1101
1110
|
</span>
|
|
1111
|
+
}
|
|
1102
1112
|
</ng-container>
|
|
1103
|
-
|
|
1113
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { 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"] }] });
|
|
1104
1114
|
}
|
|
1105
1115
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
|
|
1106
1116
|
type: Component,
|
|
@@ -1116,41 +1126,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1116
1126
|
selector: 'kendo-numerictextbox',
|
|
1117
1127
|
template: `
|
|
1118
1128
|
<ng-container kendoNumericTextBoxLocalizedMessages
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1129
|
+
i18n-increment="kendo.numerictextbox.increment|The title for the **Increment** button in the NumericTextBox"
|
|
1130
|
+
increment="Increase value"
|
|
1131
|
+
i18n-decrement="kendo.numerictextbox.decrement|The title for the **Decrement** button in the NumericTextBox"
|
|
1132
|
+
decrement="Decrease value"
|
|
1133
|
+
>
|
|
1124
1134
|
</ng-container>
|
|
1125
1135
|
<ng-container
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1136
|
+
kendoInputSharedEvents
|
|
1137
|
+
[hostElement]="hostElement"
|
|
1138
|
+
[(isFocused)]="focused"
|
|
1139
|
+
(handleBlur)="handleBlur()"
|
|
1140
|
+
(onFocus)="handleFocus()"
|
|
1141
|
+
>
|
|
1142
|
+
@if (prefixTemplate) {
|
|
1143
|
+
<span class="k-input-prefix k-input-prefix-horizontal">
|
|
1144
|
+
<ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
|
|
1145
|
+
</ng-template>
|
|
1135
1146
|
</span>
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1147
|
+
}
|
|
1148
|
+
@if (prefixTemplate && prefixTemplate.showSeparator) {
|
|
1149
|
+
<kendo-input-separator></kendo-input-separator>
|
|
1150
|
+
}
|
|
1151
|
+
<input #numericInput
|
|
1152
|
+
class="k-input-inner"
|
|
1153
|
+
role="spinbutton"
|
|
1154
|
+
autocomplete="off"
|
|
1155
|
+
autocorrect="off"
|
|
1156
|
+
[id]="focusableId"
|
|
1157
|
+
[attr.aria-valuemin]="min"
|
|
1158
|
+
[attr.aria-valuemax]="max"
|
|
1159
|
+
[attr.aria-valuenow]="value"
|
|
1160
|
+
[attr.title]="title"
|
|
1161
|
+
[attr.placeholder]="placeholder"
|
|
1162
|
+
[attr.maxLength]="maxlength"
|
|
1163
|
+
[tabindex]="tabIndex"
|
|
1164
|
+
[disabled]="disabled"
|
|
1165
|
+
[readonly]="readonly"
|
|
1166
|
+
[attr.aria-invalid]="isControlInvalid"
|
|
1167
|
+
[attr.required]="isControlRequired ? '' : null"
|
|
1154
1168
|
[kendoEventsOutsideAngular]="{
|
|
1155
1169
|
mousedown: handleMouseDown,
|
|
1156
1170
|
dragenter: handleDragEnter,
|
|
@@ -1160,16 +1174,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1160
1174
|
blur: handleInputBlur,
|
|
1161
1175
|
paste: handlePaste
|
|
1162
1176
|
}"/>
|
|
1163
|
-
|
|
1164
|
-
<
|
|
1165
|
-
|
|
1166
|
-
|
|
1177
|
+
@if (suffixTemplate && suffixTemplate?.showSeparator) {
|
|
1178
|
+
<kendo-input-separator></kendo-input-separator>
|
|
1179
|
+
}
|
|
1180
|
+
@if (suffixTemplate) {
|
|
1181
|
+
<span class="k-input-suffix k-input-suffix-horizontal">
|
|
1182
|
+
<ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
|
|
1183
|
+
</ng-template>
|
|
1167
1184
|
</span>
|
|
1185
|
+
}
|
|
1186
|
+
@if (spinners) {
|
|
1168
1187
|
<span
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1188
|
+
class="k-input-spinner k-spin-button"
|
|
1189
|
+
[kendoEventsOutsideAngular]="{ mouseup: releaseArrow, mouseleave: releaseArrow }"
|
|
1190
|
+
>
|
|
1191
|
+
<button
|
|
1173
1192
|
type="button"
|
|
1174
1193
|
[kendoEventsOutsideAngular]="{ mousedown: increasePress }"
|
|
1175
1194
|
[attr.aria-hidden]="true"
|
|
@@ -1178,15 +1197,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1178
1197
|
class="k-spinner-increase k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
|
|
1179
1198
|
[class.k-active]="arrowDirection === ArrowDirection.Up"
|
|
1180
1199
|
tabindex="-1"
|
|
1181
|
-
>
|
|
1182
|
-
<kendo-icon-wrapper
|
|
1183
|
-
name="caret-alt-up"
|
|
1184
|
-
innerCssClass="k-button-icon"
|
|
1185
|
-
[svgIcon]="arrowUpIcon"
|
|
1186
1200
|
>
|
|
1201
|
+
<kendo-icon-wrapper
|
|
1202
|
+
name="caret-alt-up"
|
|
1203
|
+
innerCssClass="k-button-icon"
|
|
1204
|
+
[svgIcon]="arrowUpIcon"
|
|
1205
|
+
>
|
|
1187
1206
|
</kendo-icon-wrapper>
|
|
1188
|
-
|
|
1189
|
-
|
|
1207
|
+
</button>
|
|
1208
|
+
<button
|
|
1190
1209
|
type="button"
|
|
1191
1210
|
[kendoEventsOutsideAngular]="{ mousedown: decreasePress }"
|
|
1192
1211
|
[attr.aria-hidden]="true"
|
|
@@ -1195,19 +1214,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1195
1214
|
[class.k-active]="arrowDirection === ArrowDirection.Down"
|
|
1196
1215
|
class="k-spinner-decrease k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
|
|
1197
1216
|
tabindex="-1"
|
|
1198
|
-
>
|
|
1199
|
-
<kendo-icon-wrapper
|
|
1200
|
-
name="caret-alt-down"
|
|
1201
|
-
innerCssClass="k-button-icon"
|
|
1202
|
-
[svgIcon]="arrowDownIcon"
|
|
1203
1217
|
>
|
|
1204
|
-
|
|
1205
|
-
|
|
1218
|
+
<kendo-icon-wrapper
|
|
1219
|
+
name="caret-alt-down"
|
|
1220
|
+
innerCssClass="k-button-icon"
|
|
1221
|
+
[svgIcon]="arrowDownIcon"
|
|
1222
|
+
>
|
|
1223
|
+
</kendo-icon-wrapper>
|
|
1224
|
+
</button>
|
|
1206
1225
|
</span>
|
|
1226
|
+
}
|
|
1207
1227
|
</ng-container>
|
|
1208
|
-
|
|
1228
|
+
`,
|
|
1209
1229
|
standalone: true,
|
|
1210
|
-
imports: [LocalizedNumericTextBoxMessagesDirective, SharedInputEventsDirective,
|
|
1230
|
+
imports: [LocalizedNumericTextBoxMessagesDirective, SharedInputEventsDirective, NgTemplateOutlet, InputSeparatorComponent, EventsOutsideAngularDirective, IconWrapperComponent]
|
|
1211
1231
|
}]
|
|
1212
1232
|
}], ctorParameters: () => [{ type: i1.IntlService }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { focusableId: [{
|
|
1213
1233
|
type: Input
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { Component, HostBinding, Input } from "@angular/core";
|
|
6
|
-
import { NgClass
|
|
6
|
+
import { NgClass } from "@angular/common";
|
|
7
7
|
import { IconWrapperComponent } from "@progress/kendo-angular-icons";
|
|
8
8
|
import { isPresent } from "@progress/kendo-angular-common";
|
|
9
9
|
import * as i0 from "@angular/core";
|
|
@@ -48,15 +48,20 @@ export class OTPInputSeparatorComponent {
|
|
|
48
48
|
this.hasSVGIcon = false;
|
|
49
49
|
}
|
|
50
50
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OTPInputSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
51
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
51
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: OTPInputSeparatorComponent, isStandalone: true, selector: "kendo-otpinput-separator", inputs: { separator: "separator" }, host: { properties: { "class.k-otp-separator": "this.wrapperClass" } }, exportAs: ["kendoOTPInputSeparator"], ngImport: i0, template: `
|
|
52
|
+
@if (hasText) {
|
|
53
|
+
{{this.separator}}
|
|
54
|
+
}
|
|
55
|
+
@if (hasIconClass) {
|
|
56
|
+
<span [ngClass]="separatorIconString"></span>
|
|
57
|
+
}
|
|
58
|
+
@if (hasFontIcon || hasSVGIcon) {
|
|
59
|
+
<kendo-icon-wrapper
|
|
56
60
|
[name]="separatorIconString"
|
|
57
61
|
[svgIcon]="separatorSVGIcon"
|
|
58
|
-
|
|
59
|
-
|
|
62
|
+
></kendo-icon-wrapper>
|
|
63
|
+
}
|
|
64
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
60
65
|
}
|
|
61
66
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OTPInputSeparatorComponent, decorators: [{
|
|
62
67
|
type: Component,
|
|
@@ -64,16 +69,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
64
69
|
exportAs: 'kendoOTPInputSeparator',
|
|
65
70
|
selector: 'kendo-otpinput-separator',
|
|
66
71
|
template: `
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
72
|
+
@if (hasText) {
|
|
73
|
+
{{this.separator}}
|
|
74
|
+
}
|
|
75
|
+
@if (hasIconClass) {
|
|
76
|
+
<span [ngClass]="separatorIconString"></span>
|
|
77
|
+
}
|
|
78
|
+
@if (hasFontIcon || hasSVGIcon) {
|
|
79
|
+
<kendo-icon-wrapper
|
|
71
80
|
[name]="separatorIconString"
|
|
72
81
|
[svgIcon]="separatorSVGIcon"
|
|
73
|
-
|
|
74
|
-
|
|
82
|
+
></kendo-icon-wrapper>
|
|
83
|
+
}
|
|
84
|
+
`,
|
|
75
85
|
standalone: true,
|
|
76
|
-
imports: [
|
|
86
|
+
imports: [NgClass, IconWrapperComponent]
|
|
77
87
|
}]
|
|
78
88
|
}], propDecorators: { separator: [{
|
|
79
89
|
type: Input
|