@progress/kendo-angular-inputs 21.1.1-develop.2 → 21.2.0-develop.10
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 +49 -41
- package/esm2022/colorpicker/colorpicker.component.mjs +230 -224
- 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 +135 -115
- package/esm2022/otpinput/otpinput-separator.component.mjs +25 -15
- package/esm2022/otpinput/otpinput.component.mjs +118 -111
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/rangeslider/rangeslider.component.mjs +116 -115
- package/esm2022/rating/rating.component.mjs +275 -273
- package/esm2022/signature/signature.component.mjs +170 -161
- package/esm2022/slider/slider.component.mjs +132 -127
- 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 +2607 -2401
- package/package.json +12 -12
|
@@ -16,7 +16,7 @@ import { packageMetadata } from '../package-metadata';
|
|
|
16
16
|
import { TextAreaPrefixComponent } from './textarea-prefix.component';
|
|
17
17
|
import { TextAreaSuffixComponent } from './textarea-suffix.component';
|
|
18
18
|
import { InputSeparatorComponent } from '../shared/input-separator.component';
|
|
19
|
-
import {
|
|
19
|
+
import { NgClass } from '@angular/common';
|
|
20
20
|
import { SharedInputEventsDirective } from '../shared/shared-events.directive';
|
|
21
21
|
import * as i0 from "@angular/core";
|
|
22
22
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
@@ -559,7 +559,7 @@ export class TextAreaComponent extends TextFieldsBase {
|
|
|
559
559
|
setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement, this.ngZone);
|
|
560
560
|
}
|
|
561
561
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextAreaComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
562
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
562
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TextAreaComponent, isStandalone: true, selector: "kendo-textarea", inputs: { focusableId: "focusableId", flow: "flow", inputAttributes: "inputAttributes", adornmentsOrientation: "adornmentsOrientation", rows: "rows", cols: "cols", maxlength: "maxlength", maxResizableRows: "maxResizableRows", tabindex: "tabindex", tabIndex: "tabIndex", resizable: "resizable", size: "size", rounded: "rounded", fillMode: "fillMode", showPrefixSeparator: "showPrefixSeparator", showSuffixSeparator: "showSuffixSeparator" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "class.k-textarea": "this.hostClasses", "class.k-input": "this.hostClasses", "class.!k-flex-col": "this.flowCol", "class.!k-flex-row": "this.flowRow" } }, providers: [
|
|
563
563
|
LocalizationService,
|
|
564
564
|
{ provide: L10N_PREFIX, useValue: 'kendo.textarea' },
|
|
565
565
|
{
|
|
@@ -570,48 +570,50 @@ export class TextAreaComponent extends TextFieldsBase {
|
|
|
570
570
|
{ provide: KendoInput, useExisting: forwardRef(() => TextAreaComponent) }
|
|
571
571
|
], queries: [{ propertyName: "prefix", first: true, predicate: TextAreaPrefixComponent, descendants: true }, { propertyName: "suffix", first: true, predicate: TextAreaSuffixComponent, descendants: true }], exportAs: ["kendoTextArea"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
|
|
572
572
|
<ng-container
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
573
|
+
kendoInputSharedEvents
|
|
574
|
+
[hostElement]="hostElement"
|
|
575
|
+
[(isFocused)]="isFocused"
|
|
576
|
+
(handleBlur)="handleBlur()"
|
|
577
|
+
(onFocus)="handleFocus()"
|
|
578
|
+
>
|
|
579
|
+
<ng-content select="kendo-textarea-prefix"></ng-content>
|
|
580
|
+
@if (prefix && showPrefixSeparator) {
|
|
580
581
|
<kendo-input-separator
|
|
581
|
-
|
|
582
|
-
[orientation]="separatorOrientation"
|
|
582
|
+
[orientation]="separatorOrientation"
|
|
583
583
|
></kendo-input-separator>
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
584
|
+
}
|
|
585
|
+
<textarea #input
|
|
586
|
+
class="k-input-inner !k-overflow-auto"
|
|
587
|
+
[attr.aria-multiline]="true"
|
|
588
|
+
[attr.aria-disabled]="disabled ? true : undefined"
|
|
589
|
+
[attr.aria-readonly]="readonly ? true : undefined"
|
|
590
|
+
[attr.aria-invalid]="isControlInvalid"
|
|
591
|
+
[id]="focusableId"
|
|
592
|
+
[attr.required]="isControlRequired ? '' : null"
|
|
593
|
+
[ngClass]="resizableClass"
|
|
594
|
+
[value]="value"
|
|
595
|
+
[attr.placeholder]="placeholder"
|
|
596
|
+
[disabled]="disabled"
|
|
597
|
+
[readonly]="readonly"
|
|
598
|
+
[attr.rows]="rows"
|
|
599
|
+
[attr.cols]="cols"
|
|
600
|
+
[attr.tabindex]="tabIndex"
|
|
601
|
+
[attr.title]="title"
|
|
602
|
+
[attr.maxlength]="maxlength"
|
|
603
|
+
[attr.aria-invalid]="isControlInvalid"
|
|
603
604
|
[kendoEventsOutsideAngular]="{
|
|
604
605
|
focus: handleInputFocus,
|
|
605
606
|
blur: handleInputBlur,
|
|
606
607
|
input: handleInput}"
|
|
607
|
-
|
|
608
|
+
></textarea>
|
|
609
|
+
@if (suffix && showSuffixSeparator) {
|
|
608
610
|
<kendo-input-separator
|
|
609
|
-
|
|
610
|
-
[orientation]="separatorOrientation"
|
|
611
|
+
[orientation]="separatorOrientation"
|
|
611
612
|
></kendo-input-separator>
|
|
612
|
-
|
|
613
|
+
}
|
|
614
|
+
<ng-content select="kendo-textarea-suffix"></ng-content>
|
|
613
615
|
</ng-container>
|
|
614
|
-
|
|
616
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "component", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
|
|
615
617
|
}
|
|
616
618
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextAreaComponent, decorators: [{
|
|
617
619
|
type: Component,
|
|
@@ -630,50 +632,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
630
632
|
selector: 'kendo-textarea',
|
|
631
633
|
template: `
|
|
632
634
|
<ng-container
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
635
|
+
kendoInputSharedEvents
|
|
636
|
+
[hostElement]="hostElement"
|
|
637
|
+
[(isFocused)]="isFocused"
|
|
638
|
+
(handleBlur)="handleBlur()"
|
|
639
|
+
(onFocus)="handleFocus()"
|
|
640
|
+
>
|
|
641
|
+
<ng-content select="kendo-textarea-prefix"></ng-content>
|
|
642
|
+
@if (prefix && showPrefixSeparator) {
|
|
640
643
|
<kendo-input-separator
|
|
641
|
-
|
|
642
|
-
[orientation]="separatorOrientation"
|
|
644
|
+
[orientation]="separatorOrientation"
|
|
643
645
|
></kendo-input-separator>
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
646
|
+
}
|
|
647
|
+
<textarea #input
|
|
648
|
+
class="k-input-inner !k-overflow-auto"
|
|
649
|
+
[attr.aria-multiline]="true"
|
|
650
|
+
[attr.aria-disabled]="disabled ? true : undefined"
|
|
651
|
+
[attr.aria-readonly]="readonly ? true : undefined"
|
|
652
|
+
[attr.aria-invalid]="isControlInvalid"
|
|
653
|
+
[id]="focusableId"
|
|
654
|
+
[attr.required]="isControlRequired ? '' : null"
|
|
655
|
+
[ngClass]="resizableClass"
|
|
656
|
+
[value]="value"
|
|
657
|
+
[attr.placeholder]="placeholder"
|
|
658
|
+
[disabled]="disabled"
|
|
659
|
+
[readonly]="readonly"
|
|
660
|
+
[attr.rows]="rows"
|
|
661
|
+
[attr.cols]="cols"
|
|
662
|
+
[attr.tabindex]="tabIndex"
|
|
663
|
+
[attr.title]="title"
|
|
664
|
+
[attr.maxlength]="maxlength"
|
|
665
|
+
[attr.aria-invalid]="isControlInvalid"
|
|
663
666
|
[kendoEventsOutsideAngular]="{
|
|
664
667
|
focus: handleInputFocus,
|
|
665
668
|
blur: handleInputBlur,
|
|
666
669
|
input: handleInput}"
|
|
667
|
-
|
|
670
|
+
></textarea>
|
|
671
|
+
@if (suffix && showSuffixSeparator) {
|
|
668
672
|
<kendo-input-separator
|
|
669
|
-
|
|
670
|
-
[orientation]="separatorOrientation"
|
|
673
|
+
[orientation]="separatorOrientation"
|
|
671
674
|
></kendo-input-separator>
|
|
672
|
-
|
|
675
|
+
}
|
|
676
|
+
<ng-content select="kendo-textarea-suffix"></ng-content>
|
|
673
677
|
</ng-container>
|
|
674
|
-
|
|
678
|
+
`,
|
|
675
679
|
standalone: true,
|
|
676
|
-
imports: [SharedInputEventsDirective,
|
|
680
|
+
imports: [SharedInputEventsDirective, InputSeparatorComponent, NgClass, EventsOutsideAngularDirective]
|
|
677
681
|
}]
|
|
678
682
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ElementRef }], propDecorators: { focusableId: [{
|
|
679
683
|
type: Input
|
|
@@ -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
|