@progress/kendo-angular-inputs 20.1.0-develop.9 → 20.1.0
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/colorpicker/colorpicker.component.d.ts +4 -0
- package/colorpicker/localization/messages.d.ts +5 -1
- package/esm2022/colorpicker/colorpicker.component.mjs +14 -4
- package/esm2022/colorpicker/localization/messages.mjs +7 -1
- package/esm2022/common/radio-checkbox.base.mjs +1 -1
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/radiobutton/radiobutton.directive.mjs +7 -1
- package/esm2022/slider/slider.component.mjs +0 -4
- package/fesm2022/progress-kendo-angular-inputs.mjs +31 -13
- package/package.json +12 -12
- package/radiobutton/radiobutton.directive.d.ts +1 -0
|
@@ -400,6 +400,10 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
|
|
|
400
400
|
* @hidden
|
|
401
401
|
*/
|
|
402
402
|
handlePopupKeyDown(event: any): void;
|
|
403
|
+
/**
|
|
404
|
+
* @hidden
|
|
405
|
+
*/
|
|
406
|
+
messageFor(key: string): string;
|
|
403
407
|
/**
|
|
404
408
|
* @hidden
|
|
405
409
|
* Used by the FloatingLabel to determine if the component is empty.
|
|
@@ -124,6 +124,10 @@ export declare class ColorPickerMessages extends ComponentMessages {
|
|
|
124
124
|
* Sets the title for the ActionSheet in adaptive mode.
|
|
125
125
|
*/
|
|
126
126
|
adaptiveTitle: string;
|
|
127
|
+
/**
|
|
128
|
+
* Sets the aria-label attribute of the ColorPicker toggle button.
|
|
129
|
+
*/
|
|
130
|
+
toggleButtonLabel: string;
|
|
127
131
|
static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerMessages, never>;
|
|
128
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<ColorPickerMessages, "kendo-colorpicker-messages-base", never, { "colorPaletteNoColor": { "alias": "colorPaletteNoColor"; "required": false; }; "colorGradientNoColor": { "alias": "colorGradientNoColor"; "required": false; }; "flatColorPickerNoColor": { "alias": "flatColorPickerNoColor"; "required": false; }; "colorPickerNoColor": { "alias": "colorPickerNoColor"; "required": false; }; "colorGradientHandle": { "alias": "colorGradientHandle"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "hueSliderHandle": { "alias": "hueSliderHandle"; "required": false; }; "opacitySliderHandle": { "alias": "opacitySliderHandle"; "required": false; }; "hexInputPlaceholder": { "alias": "hexInputPlaceholder"; "required": false; }; "redInputPlaceholder": { "alias": "redInputPlaceholder"; "required": false; }; "greenInputPlaceholder": { "alias": "greenInputPlaceholder"; "required": false; }; "blueInputPlaceholder": { "alias": "blueInputPlaceholder"; "required": false; }; "alphaInputPlaceholder": { "alias": "alphaInputPlaceholder"; "required": false; }; "redChannelLabel": { "alias": "redChannelLabel"; "required": false; }; "greenChannelLabel": { "alias": "greenChannelLabel"; "required": false; }; "blueChannelLabel": { "alias": "blueChannelLabel"; "required": false; }; "alphaChannelLabel": { "alias": "alphaChannelLabel"; "required": false; }; "passContrast": { "alias": "passContrast"; "required": false; }; "failContrast": { "alias": "failContrast"; "required": false; }; "contrastRatio": { "alias": "contrastRatio"; "required": false; }; "previewColor": { "alias": "previewColor"; "required": false; }; "revertSelection": { "alias": "revertSelection"; "required": false; }; "gradientView": { "alias": "gradientView"; "required": false; }; "paletteView": { "alias": "paletteView"; "required": false; }; "formatButton": { "alias": "formatButton"; "required": false; }; "applyButton": { "alias": "applyButton"; "required": false; }; "cancelButton": { "alias": "cancelButton"; "required": false; }; "adaptiveCloseButtonTitle": { "alias": "adaptiveCloseButtonTitle"; "required": false; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "required": false; }; }, {}, never, never, false, never>;
|
|
132
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ColorPickerMessages, "kendo-colorpicker-messages-base", never, { "colorPaletteNoColor": { "alias": "colorPaletteNoColor"; "required": false; }; "colorGradientNoColor": { "alias": "colorGradientNoColor"; "required": false; }; "flatColorPickerNoColor": { "alias": "flatColorPickerNoColor"; "required": false; }; "colorPickerNoColor": { "alias": "colorPickerNoColor"; "required": false; }; "colorGradientHandle": { "alias": "colorGradientHandle"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "hueSliderHandle": { "alias": "hueSliderHandle"; "required": false; }; "opacitySliderHandle": { "alias": "opacitySliderHandle"; "required": false; }; "hexInputPlaceholder": { "alias": "hexInputPlaceholder"; "required": false; }; "redInputPlaceholder": { "alias": "redInputPlaceholder"; "required": false; }; "greenInputPlaceholder": { "alias": "greenInputPlaceholder"; "required": false; }; "blueInputPlaceholder": { "alias": "blueInputPlaceholder"; "required": false; }; "alphaInputPlaceholder": { "alias": "alphaInputPlaceholder"; "required": false; }; "redChannelLabel": { "alias": "redChannelLabel"; "required": false; }; "greenChannelLabel": { "alias": "greenChannelLabel"; "required": false; }; "blueChannelLabel": { "alias": "blueChannelLabel"; "required": false; }; "alphaChannelLabel": { "alias": "alphaChannelLabel"; "required": false; }; "passContrast": { "alias": "passContrast"; "required": false; }; "failContrast": { "alias": "failContrast"; "required": false; }; "contrastRatio": { "alias": "contrastRatio"; "required": false; }; "previewColor": { "alias": "previewColor"; "required": false; }; "revertSelection": { "alias": "revertSelection"; "required": false; }; "gradientView": { "alias": "gradientView"; "required": false; }; "paletteView": { "alias": "paletteView"; "required": false; }; "formatButton": { "alias": "formatButton"; "required": false; }; "applyButton": { "alias": "applyButton"; "required": false; }; "cancelButton": { "alias": "cancelButton"; "required": false; }; "adaptiveCloseButtonTitle": { "alias": "adaptiveCloseButtonTitle"; "required": false; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "required": false; }; "toggleButtonLabel": { "alias": "toggleButtonLabel"; "required": false; }; }, {}, never, never, false, never>;
|
|
129
133
|
}
|
|
@@ -715,6 +715,12 @@ export class ColorPickerComponent {
|
|
|
715
715
|
}
|
|
716
716
|
}
|
|
717
717
|
}
|
|
718
|
+
/**
|
|
719
|
+
* @hidden
|
|
720
|
+
*/
|
|
721
|
+
messageFor(key) {
|
|
722
|
+
return this.localizationService.get(key);
|
|
723
|
+
}
|
|
718
724
|
/**
|
|
719
725
|
* @hidden
|
|
720
726
|
* Used by the FloatingLabel to determine if the component is empty.
|
|
@@ -953,7 +959,9 @@ export class ColorPickerComponent {
|
|
|
953
959
|
i18n-blueInputPlaceholder="kendo.colorpicker.blueInputPlaceholder|The placeholder for the blue color input."
|
|
954
960
|
blueInputPlaceholder="B"
|
|
955
961
|
i18n-hexInputPlaceholder="kendo.colorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
|
|
956
|
-
hexInputPlaceholder="HEX"
|
|
962
|
+
hexInputPlaceholder="HEX"
|
|
963
|
+
i18n-toggleButtonLabel="kendo.colorpicker.toggleButtonLabel|The text set as aria-label on the toggle button."
|
|
964
|
+
toggleButtonLabel="Select color">
|
|
957
965
|
</ng-container>
|
|
958
966
|
<span #activeColor class="k-input-inner">
|
|
959
967
|
<span
|
|
@@ -981,8 +989,8 @@ export class ColorPickerComponent {
|
|
|
981
989
|
[fillMode]="fillMode"
|
|
982
990
|
[disabled]="disabled"
|
|
983
991
|
rounded="none"
|
|
984
|
-
aria-hidden="true"
|
|
985
992
|
class="k-input-button"
|
|
993
|
+
[attr.aria-label]="messageFor('toggleButtonLabel')"
|
|
986
994
|
>
|
|
987
995
|
</button>
|
|
988
996
|
<ng-template #popupTemplate>
|
|
@@ -1098,7 +1106,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1098
1106
|
i18n-blueInputPlaceholder="kendo.colorpicker.blueInputPlaceholder|The placeholder for the blue color input."
|
|
1099
1107
|
blueInputPlaceholder="B"
|
|
1100
1108
|
i18n-hexInputPlaceholder="kendo.colorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
|
|
1101
|
-
hexInputPlaceholder="HEX"
|
|
1109
|
+
hexInputPlaceholder="HEX"
|
|
1110
|
+
i18n-toggleButtonLabel="kendo.colorpicker.toggleButtonLabel|The text set as aria-label on the toggle button."
|
|
1111
|
+
toggleButtonLabel="Select color">
|
|
1102
1112
|
</ng-container>
|
|
1103
1113
|
<span #activeColor class="k-input-inner">
|
|
1104
1114
|
<span
|
|
@@ -1126,8 +1136,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1126
1136
|
[fillMode]="fillMode"
|
|
1127
1137
|
[disabled]="disabled"
|
|
1128
1138
|
rounded="none"
|
|
1129
|
-
aria-hidden="true"
|
|
1130
1139
|
class="k-input-button"
|
|
1140
|
+
[attr.aria-label]="messageFor('toggleButtonLabel')"
|
|
1131
1141
|
>
|
|
1132
1142
|
</button>
|
|
1133
1143
|
<ng-template #popupTemplate>
|
|
@@ -125,8 +125,12 @@ export class ColorPickerMessages extends ComponentMessages {
|
|
|
125
125
|
* Sets the title for the ActionSheet in adaptive mode.
|
|
126
126
|
*/
|
|
127
127
|
adaptiveTitle;
|
|
128
|
+
/**
|
|
129
|
+
* Sets the aria-label attribute of the ColorPicker toggle button.
|
|
130
|
+
*/
|
|
131
|
+
toggleButtonLabel;
|
|
128
132
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
129
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerMessages, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveTitle: "adaptiveTitle" }, usesInheritance: true, ngImport: i0 });
|
|
133
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerMessages, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveTitle: "adaptiveTitle", toggleButtonLabel: "toggleButtonLabel" }, usesInheritance: true, ngImport: i0 });
|
|
130
134
|
}
|
|
131
135
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, decorators: [{
|
|
132
136
|
type: Directive,
|
|
@@ -192,4 +196,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
192
196
|
type: Input
|
|
193
197
|
}], adaptiveTitle: [{
|
|
194
198
|
type: Input
|
|
199
|
+
}], toggleButtonLabel: [{
|
|
200
|
+
type: Input
|
|
195
201
|
}] } });
|
|
@@ -179,7 +179,7 @@ export class RadioCheckBoxBase {
|
|
|
179
179
|
* @hidden
|
|
180
180
|
*/
|
|
181
181
|
get isControlInvalid() {
|
|
182
|
-
return this.control
|
|
182
|
+
return this.control?.touched && this.control?.invalid;
|
|
183
183
|
}
|
|
184
184
|
/**
|
|
185
185
|
* Represents the visible `input` element.
|
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: '20.1.0
|
|
13
|
+
publishDate: 1761117115,
|
|
14
|
+
version: '20.1.0',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
16
16
|
};
|
|
@@ -21,6 +21,9 @@ export class RadioButtonDirective {
|
|
|
21
21
|
renderer;
|
|
22
22
|
hostElement;
|
|
23
23
|
kendoClass = true;
|
|
24
|
+
get isDisabled() {
|
|
25
|
+
return this.hostElement.nativeElement.disabled;
|
|
26
|
+
}
|
|
24
27
|
/**
|
|
25
28
|
* Specifies the `size` of the RadioButton. The `size` property changes the width and height of the RadioButton ([see example]({% slug appearance_radiobuttondirective %}#toc-size)).
|
|
26
29
|
*
|
|
@@ -59,7 +62,7 @@ export class RadioButtonDirective {
|
|
|
59
62
|
}
|
|
60
63
|
}
|
|
61
64
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
62
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RadioButtonDirective, isStandalone: true, selector: "input[kendoRadioButton]", inputs: { size: "size" }, host: { properties: { "class.k-radio": "this.kendoClass" } }, ngImport: i0 });
|
|
65
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RadioButtonDirective, isStandalone: true, selector: "input[kendoRadioButton]", inputs: { size: "size" }, host: { properties: { "class.k-radio": "this.kendoClass", "class.k-disabled": "this.isDisabled" } }, ngImport: i0 });
|
|
63
66
|
}
|
|
64
67
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonDirective, decorators: [{
|
|
65
68
|
type: Directive,
|
|
@@ -70,6 +73,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
70
73
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { kendoClass: [{
|
|
71
74
|
type: HostBinding,
|
|
72
75
|
args: ['class.k-radio']
|
|
76
|
+
}], isDisabled: [{
|
|
77
|
+
type: HostBinding,
|
|
78
|
+
args: ['class.k-disabled']
|
|
73
79
|
}], size: [{
|
|
74
80
|
type: Input
|
|
75
81
|
}] } });
|
|
@@ -484,7 +484,6 @@ export class SliderComponent extends SliderBase {
|
|
|
484
484
|
[svgIcon]="decreaseButtonArrowSVGIcon"
|
|
485
485
|
class="k-button-decrease"
|
|
486
486
|
[title]="decrementMessage"
|
|
487
|
-
aria-hidden="true"
|
|
488
487
|
[attr.tabindex]="-1"
|
|
489
488
|
></button>
|
|
490
489
|
<div
|
|
@@ -542,7 +541,6 @@ export class SliderComponent extends SliderBase {
|
|
|
542
541
|
class="k-button-increase"
|
|
543
542
|
[title]="incrementMessage"
|
|
544
543
|
[attr.tabindex]="-1"
|
|
545
|
-
aria-hidden="true"
|
|
546
544
|
></button>
|
|
547
545
|
<kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
|
|
548
546
|
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { 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: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
|
|
@@ -577,7 +575,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
577
575
|
[svgIcon]="decreaseButtonArrowSVGIcon"
|
|
578
576
|
class="k-button-decrease"
|
|
579
577
|
[title]="decrementMessage"
|
|
580
|
-
aria-hidden="true"
|
|
581
578
|
[attr.tabindex]="-1"
|
|
582
579
|
></button>
|
|
583
580
|
<div
|
|
@@ -635,7 +632,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
635
632
|
class="k-button-increase"
|
|
636
633
|
[title]="incrementMessage"
|
|
637
634
|
[attr.tabindex]="-1"
|
|
638
|
-
aria-hidden="true"
|
|
639
635
|
></button>
|
|
640
636
|
<kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
|
|
641
637
|
`,
|
|
@@ -550,8 +550,8 @@ const packageMetadata = {
|
|
|
550
550
|
productName: 'Kendo UI for Angular',
|
|
551
551
|
productCode: 'KENDOUIANGULAR',
|
|
552
552
|
productCodes: ['KENDOUIANGULAR'],
|
|
553
|
-
publishDate:
|
|
554
|
-
version: '20.1.0
|
|
553
|
+
publishDate: 1761117115,
|
|
554
|
+
version: '20.1.0',
|
|
555
555
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
556
556
|
};
|
|
557
557
|
|
|
@@ -1528,7 +1528,6 @@ class SliderComponent extends SliderBase {
|
|
|
1528
1528
|
[svgIcon]="decreaseButtonArrowSVGIcon"
|
|
1529
1529
|
class="k-button-decrease"
|
|
1530
1530
|
[title]="decrementMessage"
|
|
1531
|
-
aria-hidden="true"
|
|
1532
1531
|
[attr.tabindex]="-1"
|
|
1533
1532
|
></button>
|
|
1534
1533
|
<div
|
|
@@ -1586,7 +1585,6 @@ class SliderComponent extends SliderBase {
|
|
|
1586
1585
|
class="k-button-increase"
|
|
1587
1586
|
[title]="incrementMessage"
|
|
1588
1587
|
[attr.tabindex]="-1"
|
|
1589
|
-
aria-hidden="true"
|
|
1590
1588
|
></button>
|
|
1591
1589
|
<kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
|
|
1592
1590
|
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { 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: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
|
|
@@ -1621,7 +1619,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1621
1619
|
[svgIcon]="decreaseButtonArrowSVGIcon"
|
|
1622
1620
|
class="k-button-decrease"
|
|
1623
1621
|
[title]="decrementMessage"
|
|
1624
|
-
aria-hidden="true"
|
|
1625
1622
|
[attr.tabindex]="-1"
|
|
1626
1623
|
></button>
|
|
1627
1624
|
<div
|
|
@@ -1679,7 +1676,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1679
1676
|
class="k-button-increase"
|
|
1680
1677
|
[title]="incrementMessage"
|
|
1681
1678
|
[attr.tabindex]="-1"
|
|
1682
|
-
aria-hidden="true"
|
|
1683
1679
|
></button>
|
|
1684
1680
|
<kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
|
|
1685
1681
|
`,
|
|
@@ -6546,7 +6542,7 @@ class RadioCheckBoxBase {
|
|
|
6546
6542
|
* @hidden
|
|
6547
6543
|
*/
|
|
6548
6544
|
get isControlInvalid() {
|
|
6549
|
-
return this.control
|
|
6545
|
+
return this.control?.touched && this.control?.invalid;
|
|
6550
6546
|
}
|
|
6551
6547
|
/**
|
|
6552
6548
|
* Represents the visible `input` element.
|
|
@@ -9283,8 +9279,12 @@ class ColorPickerMessages extends ComponentMessages {
|
|
|
9283
9279
|
* Sets the title for the ActionSheet in adaptive mode.
|
|
9284
9280
|
*/
|
|
9285
9281
|
adaptiveTitle;
|
|
9282
|
+
/**
|
|
9283
|
+
* Sets the aria-label attribute of the ColorPicker toggle button.
|
|
9284
|
+
*/
|
|
9285
|
+
toggleButtonLabel;
|
|
9286
9286
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
9287
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerMessages, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveTitle: "adaptiveTitle" }, usesInheritance: true, ngImport: i0 });
|
|
9287
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerMessages, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveTitle: "adaptiveTitle", toggleButtonLabel: "toggleButtonLabel" }, usesInheritance: true, ngImport: i0 });
|
|
9288
9288
|
}
|
|
9289
9289
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, decorators: [{
|
|
9290
9290
|
type: Directive,
|
|
@@ -9350,6 +9350,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
9350
9350
|
type: Input
|
|
9351
9351
|
}], adaptiveTitle: [{
|
|
9352
9352
|
type: Input
|
|
9353
|
+
}], toggleButtonLabel: [{
|
|
9354
|
+
type: Input
|
|
9353
9355
|
}] } });
|
|
9354
9356
|
|
|
9355
9357
|
/**
|
|
@@ -13477,6 +13479,12 @@ class ColorPickerComponent {
|
|
|
13477
13479
|
}
|
|
13478
13480
|
}
|
|
13479
13481
|
}
|
|
13482
|
+
/**
|
|
13483
|
+
* @hidden
|
|
13484
|
+
*/
|
|
13485
|
+
messageFor(key) {
|
|
13486
|
+
return this.localizationService.get(key);
|
|
13487
|
+
}
|
|
13480
13488
|
/**
|
|
13481
13489
|
* @hidden
|
|
13482
13490
|
* Used by the FloatingLabel to determine if the component is empty.
|
|
@@ -13715,7 +13723,9 @@ class ColorPickerComponent {
|
|
|
13715
13723
|
i18n-blueInputPlaceholder="kendo.colorpicker.blueInputPlaceholder|The placeholder for the blue color input."
|
|
13716
13724
|
blueInputPlaceholder="B"
|
|
13717
13725
|
i18n-hexInputPlaceholder="kendo.colorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
|
|
13718
|
-
hexInputPlaceholder="HEX"
|
|
13726
|
+
hexInputPlaceholder="HEX"
|
|
13727
|
+
i18n-toggleButtonLabel="kendo.colorpicker.toggleButtonLabel|The text set as aria-label on the toggle button."
|
|
13728
|
+
toggleButtonLabel="Select color">
|
|
13719
13729
|
</ng-container>
|
|
13720
13730
|
<span #activeColor class="k-input-inner">
|
|
13721
13731
|
<span
|
|
@@ -13743,8 +13753,8 @@ class ColorPickerComponent {
|
|
|
13743
13753
|
[fillMode]="fillMode"
|
|
13744
13754
|
[disabled]="disabled"
|
|
13745
13755
|
rounded="none"
|
|
13746
|
-
aria-hidden="true"
|
|
13747
13756
|
class="k-input-button"
|
|
13757
|
+
[attr.aria-label]="messageFor('toggleButtonLabel')"
|
|
13748
13758
|
>
|
|
13749
13759
|
</button>
|
|
13750
13760
|
<ng-template #popupTemplate>
|
|
@@ -13860,7 +13870,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
13860
13870
|
i18n-blueInputPlaceholder="kendo.colorpicker.blueInputPlaceholder|The placeholder for the blue color input."
|
|
13861
13871
|
blueInputPlaceholder="B"
|
|
13862
13872
|
i18n-hexInputPlaceholder="kendo.colorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
|
|
13863
|
-
hexInputPlaceholder="HEX"
|
|
13873
|
+
hexInputPlaceholder="HEX"
|
|
13874
|
+
i18n-toggleButtonLabel="kendo.colorpicker.toggleButtonLabel|The text set as aria-label on the toggle button."
|
|
13875
|
+
toggleButtonLabel="Select color">
|
|
13864
13876
|
</ng-container>
|
|
13865
13877
|
<span #activeColor class="k-input-inner">
|
|
13866
13878
|
<span
|
|
@@ -13888,8 +13900,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
13888
13900
|
[fillMode]="fillMode"
|
|
13889
13901
|
[disabled]="disabled"
|
|
13890
13902
|
rounded="none"
|
|
13891
|
-
aria-hidden="true"
|
|
13892
13903
|
class="k-input-button"
|
|
13904
|
+
[attr.aria-label]="messageFor('toggleButtonLabel')"
|
|
13893
13905
|
>
|
|
13894
13906
|
</button>
|
|
13895
13907
|
<ng-template #popupTemplate>
|
|
@@ -14921,6 +14933,9 @@ class RadioButtonDirective {
|
|
|
14921
14933
|
renderer;
|
|
14922
14934
|
hostElement;
|
|
14923
14935
|
kendoClass = true;
|
|
14936
|
+
get isDisabled() {
|
|
14937
|
+
return this.hostElement.nativeElement.disabled;
|
|
14938
|
+
}
|
|
14924
14939
|
/**
|
|
14925
14940
|
* Specifies the `size` of the RadioButton. The `size` property changes the width and height of the RadioButton ([see example]({% slug appearance_radiobuttondirective %}#toc-size)).
|
|
14926
14941
|
*
|
|
@@ -14959,7 +14974,7 @@ class RadioButtonDirective {
|
|
|
14959
14974
|
}
|
|
14960
14975
|
}
|
|
14961
14976
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
14962
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RadioButtonDirective, isStandalone: true, selector: "input[kendoRadioButton]", inputs: { size: "size" }, host: { properties: { "class.k-radio": "this.kendoClass" } }, ngImport: i0 });
|
|
14977
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RadioButtonDirective, isStandalone: true, selector: "input[kendoRadioButton]", inputs: { size: "size" }, host: { properties: { "class.k-radio": "this.kendoClass", "class.k-disabled": "this.isDisabled" } }, ngImport: i0 });
|
|
14963
14978
|
}
|
|
14964
14979
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonDirective, decorators: [{
|
|
14965
14980
|
type: Directive,
|
|
@@ -14970,6 +14985,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
14970
14985
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { kendoClass: [{
|
|
14971
14986
|
type: HostBinding,
|
|
14972
14987
|
args: ['class.k-radio']
|
|
14988
|
+
}], isDisabled: [{
|
|
14989
|
+
type: HostBinding,
|
|
14990
|
+
args: ['class.k-disabled']
|
|
14973
14991
|
}], size: [{
|
|
14974
14992
|
type: Input
|
|
14975
14993
|
}] } });
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-inputs",
|
|
3
|
-
"version": "20.1.0
|
|
3
|
+
"version": "20.1.0",
|
|
4
4
|
"description": "Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, TextArea, and TextBox Components)",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"package": {
|
|
29
29
|
"productName": "Kendo UI for Angular",
|
|
30
30
|
"productCode": "KENDOUIANGULAR",
|
|
31
|
-
"publishDate":
|
|
31
|
+
"publishDate": 1761117115,
|
|
32
32
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
|
|
33
33
|
}
|
|
34
34
|
},
|
|
@@ -40,20 +40,20 @@
|
|
|
40
40
|
"@angular/platform-browser": "16 - 20",
|
|
41
41
|
"@progress/kendo-drawing": "^1.21.0",
|
|
42
42
|
"@progress/kendo-licensing": "^1.7.0",
|
|
43
|
-
"@progress/kendo-angular-buttons": "20.1.0
|
|
44
|
-
"@progress/kendo-angular-common": "20.1.0
|
|
45
|
-
"@progress/kendo-angular-utils": "20.1.0
|
|
46
|
-
"@progress/kendo-angular-navigation": "20.1.0
|
|
47
|
-
"@progress/kendo-angular-dialog": "20.1.0
|
|
48
|
-
"@progress/kendo-angular-intl": "20.1.0
|
|
49
|
-
"@progress/kendo-angular-l10n": "20.1.0
|
|
50
|
-
"@progress/kendo-angular-popup": "20.1.0
|
|
51
|
-
"@progress/kendo-angular-icons": "20.1.0
|
|
43
|
+
"@progress/kendo-angular-buttons": "20.1.0",
|
|
44
|
+
"@progress/kendo-angular-common": "20.1.0",
|
|
45
|
+
"@progress/kendo-angular-utils": "20.1.0",
|
|
46
|
+
"@progress/kendo-angular-navigation": "20.1.0",
|
|
47
|
+
"@progress/kendo-angular-dialog": "20.1.0",
|
|
48
|
+
"@progress/kendo-angular-intl": "20.1.0",
|
|
49
|
+
"@progress/kendo-angular-l10n": "20.1.0",
|
|
50
|
+
"@progress/kendo-angular-popup": "20.1.0",
|
|
51
|
+
"@progress/kendo-angular-icons": "20.1.0",
|
|
52
52
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"tslib": "^2.3.1",
|
|
56
|
-
"@progress/kendo-angular-schematics": "20.1.0
|
|
56
|
+
"@progress/kendo-angular-schematics": "20.1.0",
|
|
57
57
|
"@progress/kendo-common": "^1.0.1",
|
|
58
58
|
"@progress/kendo-draggable": "^3.0.0",
|
|
59
59
|
"@progress/kendo-inputs-common": "^3.1.0"
|
|
@@ -18,6 +18,7 @@ export declare class RadioButtonDirective {
|
|
|
18
18
|
private renderer;
|
|
19
19
|
private hostElement;
|
|
20
20
|
kendoClass: boolean;
|
|
21
|
+
get isDisabled(): boolean;
|
|
21
22
|
/**
|
|
22
23
|
* Specifies the `size` of the RadioButton. The `size` property changes the width and height of the RadioButton ([see example]({% slug appearance_radiobuttondirective %}#toc-size)).
|
|
23
24
|
*
|