@progress/kendo-angular-inputs 15.5.0-develop.9 → 15.5.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.
@@ -3,14 +3,14 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as i0 from '@angular/core';
6
- import { isDevMode, Directive, Optional, EventEmitter, ElementRef, Component, Input, HostBinding, Output, ViewChild, ContentChild, ViewChildren, forwardRef, Inject, Injectable, HostListener, NgModule, ContentChildren, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
6
+ import { InjectionToken, isDevMode, Directive, Optional, EventEmitter, ElementRef, Component, Input, HostBinding, Output, ViewChild, ContentChild, ViewChildren, forwardRef, Inject, Injectable, HostListener, NgModule, ContentChildren, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
7
7
  import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, RadioControlValueAccessor } from '@angular/forms';
8
8
  import { Subscription, fromEvent, interval, merge, BehaviorSubject, Subject } from 'rxjs';
9
9
  import { take, filter, concatMap, startWith, takeUntil, skip, debounceTime, throttleTime } from 'rxjs/operators';
10
10
  import * as i1 from '@progress/kendo-angular-l10n';
11
11
  import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
12
- import * as i4 from '@progress/kendo-angular-common';
13
- import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, SuffixTemplateDirective, PrefixTemplateDirective, isChanged, DraggableModule, EventsModule, ResizeSensorModule, AdornmentsModule, isSafari, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1 } from '@progress/kendo-angular-common';
12
+ import * as i3$1 from '@progress/kendo-angular-common';
13
+ import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, SuffixTemplateDirective, PrefixTemplateDirective, isChanged, DraggableModule, EventsModule, ResizeSensorModule, AdornmentsModule, isSafari, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1, isPresent as isPresent$1 } from '@progress/kendo-angular-common';
14
14
  export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective } from '@progress/kendo-angular-common';
15
15
  import { validatePackage } from '@progress/kendo-licensing';
16
16
  import { caretAltUpIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, checkIcon, exclamationCircleIcon, xIcon, dropletSliderIcon, paletteIcon, dropletSlashIcon, caretAltExpandIcon, xCircleIcon, hyperlinkOpenIcon, starIcon, starOutlineIcon } from '@progress/kendo-svg-icons';
@@ -25,7 +25,7 @@ import { IconsModule } from '@progress/kendo-angular-icons';
25
25
  import * as i1$2 from '@progress/kendo-angular-popup';
26
26
  import { PopupModule } from '@progress/kendo-angular-popup';
27
27
  import { parseColor as parseColor$1, Color, namedColors } from '@progress/kendo-drawing';
28
- import * as i3$1 from '@progress/kendo-angular-dialog';
28
+ import * as i3$2 from '@progress/kendo-angular-dialog';
29
29
  import { DialogsModule } from '@progress/kendo-angular-dialog';
30
30
  import { __awaiter } from 'tslib';
31
31
  import { SignaturePad } from '@progress/kendo-inputs-common';
@@ -107,6 +107,12 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
107
107
  break;
108
108
  }
109
109
  };
110
+ /**
111
+ * @hidden
112
+ *
113
+ * Used to differentiate between the Radio and CheckBox components in their base class.
114
+ */
115
+ const COMPONENT_TYPE = new InjectionToken('TYPE_TOKEN');
110
116
 
111
117
  /**
112
118
  * @hidden
@@ -538,8 +544,8 @@ const packageMetadata = {
538
544
  name: '@progress/kendo-angular-inputs',
539
545
  productName: 'Kendo UI for Angular',
540
546
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
541
- publishDate: 1712910858,
542
- version: '15.5.0-develop.9',
547
+ publishDate: 1713437421,
548
+ version: '15.5.0',
543
549
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
544
550
  };
545
551
 
@@ -1501,7 +1507,7 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
1501
1507
  [attr.aria-label]="currentValue"
1502
1508
  ></button>
1503
1509
  <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
1504
- `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i4.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i4.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
1510
+ `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i3$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i3$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
1505
1511
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SliderComponent, decorators: [{
1506
1512
  type: Component,
1507
1513
  args: [{
@@ -2204,7 +2210,7 @@ RangeSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
2204
2210
  </div>
2205
2211
  </div>
2206
2212
  <kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
2207
- `, isInline: true, components: [{ type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i4.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedRangeSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
2213
+ `, isInline: true, components: [{ type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i3$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedRangeSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i3$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
2208
2214
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RangeSliderComponent, decorators: [{
2209
2215
  type: Component,
2210
2216
  args: [{
@@ -2348,8 +2354,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
2348
2354
  }]
2349
2355
  }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
2350
2356
 
2351
- const FOCUSED$4 = 'k-focus';
2352
- const DEFAULT_SIZE$8 = 'medium';
2357
+ const FOCUSED$5 = 'k-focus';
2358
+ const DEFAULT_SIZE$9 = 'medium';
2353
2359
  const DEFAULT_THUMB_ROUNDED = 'full';
2354
2360
  const DEFAULT_TRACK_ROUNDED = 'full';
2355
2361
  /**
@@ -2471,7 +2477,7 @@ class SwitchComponent {
2471
2477
  * * `none`
2472
2478
  */
2473
2479
  set size(size) {
2474
- const newSize = size ? size : DEFAULT_SIZE$8;
2480
+ const newSize = size ? size : DEFAULT_SIZE$9;
2475
2481
  this.handleClasses(newSize, 'size');
2476
2482
  this._size = newSize;
2477
2483
  }
@@ -2698,10 +2704,10 @@ class SwitchComponent {
2698
2704
  if (this.isFocused !== value && this.hostElement) {
2699
2705
  const wrapper = this.hostElement.nativeElement;
2700
2706
  if (value) {
2701
- this.renderer.addClass(wrapper, FOCUSED$4);
2707
+ this.renderer.addClass(wrapper, FOCUSED$5);
2702
2708
  }
2703
2709
  else {
2704
- this.renderer.removeClass(wrapper, FOCUSED$4);
2710
+ this.renderer.removeClass(wrapper, FOCUSED$5);
2705
2711
  }
2706
2712
  this.isFocused = value;
2707
2713
  }
@@ -3637,9 +3643,9 @@ const PARSABLE_DEFAULTS = {
3637
3643
  min: null,
3638
3644
  step: 1
3639
3645
  };
3640
- const FOCUSED$3 = 'k-focus';
3641
- const DEFAULT_SIZE$7 = 'medium';
3642
- const DEFAULT_ROUNDED$6 = 'medium';
3646
+ const FOCUSED$4 = 'k-focus';
3647
+ const DEFAULT_SIZE$8 = 'medium';
3648
+ const DEFAULT_ROUNDED$7 = 'medium';
3643
3649
  const DEFAULT_FILL_MODE$5 = 'solid';
3644
3650
  /**
3645
3651
  * Represents the [Kendo UI NumericTextBox component for Angular]({% slug overview_numerictextbox %}).
@@ -3985,7 +3991,7 @@ class NumericTextBoxComponent {
3985
3991
  * * `none`
3986
3992
  */
3987
3993
  set size(size) {
3988
- const newSize = size ? size : DEFAULT_SIZE$7;
3994
+ const newSize = size ? size : DEFAULT_SIZE$8;
3989
3995
  this.handleClasses(newSize, 'size');
3990
3996
  this._size = newSize;
3991
3997
  }
@@ -4002,7 +4008,7 @@ class NumericTextBoxComponent {
4002
4008
  * * `none`
4003
4009
  */
4004
4010
  set rounded(rounded) {
4005
- const newRounded = rounded ? rounded : DEFAULT_ROUNDED$6;
4011
+ const newRounded = rounded ? rounded : DEFAULT_ROUNDED$7;
4006
4012
  this.handleClasses(newRounded, 'rounded');
4007
4013
  this._rounded = newRounded;
4008
4014
  }
@@ -4249,10 +4255,10 @@ class NumericTextBoxComponent {
4249
4255
  if (this.isFocused !== value && this.hostElement) {
4250
4256
  const wrap = this.hostElement.nativeElement;
4251
4257
  if (value) {
4252
- this.renderer.addClass(wrap, FOCUSED$3);
4258
+ this.renderer.addClass(wrap, FOCUSED$4);
4253
4259
  }
4254
4260
  else {
4255
- this.renderer.removeClass(wrap, FOCUSED$3);
4261
+ this.renderer.removeClass(wrap, FOCUSED$4);
4256
4262
  }
4257
4263
  this.isFocused = value;
4258
4264
  }
@@ -4669,7 +4675,7 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
4669
4675
  </button>
4670
4676
  </span>
4671
4677
  </ng-container>
4672
- `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
4678
+ `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
4673
4679
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
4674
4680
  type: Component,
4675
4681
  args: [{
@@ -5318,9 +5324,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
5318
5324
  }] });
5319
5325
 
5320
5326
  const resolvedPromise = Promise.resolve(null);
5321
- const FOCUSED$2 = 'k-focus';
5322
- const DEFAULT_SIZE$6 = 'medium';
5323
- const DEFAULT_ROUNDED$5 = 'medium';
5327
+ const FOCUSED$3 = 'k-focus';
5328
+ const DEFAULT_SIZE$7 = 'medium';
5329
+ const DEFAULT_ROUNDED$6 = 'medium';
5324
5330
  const DEFAULT_FILL_MODE$4 = 'solid';
5325
5331
  /**
5326
5332
  * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
@@ -5558,7 +5564,7 @@ class MaskedTextBoxComponent {
5558
5564
  * * `none`
5559
5565
  */
5560
5566
  set size(size) {
5561
- const newSize = size ? size : DEFAULT_SIZE$6;
5567
+ const newSize = size ? size : DEFAULT_SIZE$7;
5562
5568
  this.handleClasses(newSize, 'size');
5563
5569
  this._size = newSize;
5564
5570
  }
@@ -5575,7 +5581,7 @@ class MaskedTextBoxComponent {
5575
5581
  * * `none`
5576
5582
  */
5577
5583
  set rounded(rounded) {
5578
- const newRounded = rounded ? rounded : DEFAULT_ROUNDED$5;
5584
+ const newRounded = rounded ? rounded : DEFAULT_ROUNDED$6;
5579
5585
  this.handleClasses(newRounded, 'rounded');
5580
5586
  this._rounded = newRounded;
5581
5587
  }
@@ -5919,10 +5925,10 @@ class MaskedTextBoxComponent {
5919
5925
  if (this.isFocused !== value && this.hostElement) {
5920
5926
  const element = this.hostElement.nativeElement;
5921
5927
  if (value) {
5922
- this.renderer.addClass(element, FOCUSED$2);
5928
+ this.renderer.addClass(element, FOCUSED$3);
5923
5929
  }
5924
5930
  else {
5925
- this.renderer.removeClass(element, FOCUSED$2);
5931
+ this.renderer.removeClass(element, FOCUSED$3);
5926
5932
  }
5927
5933
  this.isFocused = value;
5928
5934
  }
@@ -6010,7 +6016,7 @@ MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
6010
6016
  </ng-template>
6011
6017
  </span>
6012
6018
  </ng-container>
6013
- `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }], directives: [{ type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
6019
+ `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }], directives: [{ type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
6014
6020
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxComponent, decorators: [{
6015
6021
  type: Component,
6016
6022
  args: [{
@@ -6791,9 +6797,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
6791
6797
  }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
6792
6798
 
6793
6799
  /* eslint-disable @typescript-eslint/no-explicit-any */
6794
- const FOCUSED$1 = 'k-focus';
6795
- const DEFAULT_SIZE$5 = 'medium';
6796
- const DEFAULT_ROUNDED$4 = 'medium';
6800
+ const FOCUSED$2 = 'k-focus';
6801
+ const DEFAULT_SIZE$6 = 'medium';
6802
+ const DEFAULT_ROUNDED$5 = 'medium';
6797
6803
  const DEFAULT_FILL_MODE$3 = 'solid';
6798
6804
  const iconsMap$1 = { checkIcon, exclamationCircleIcon, xIcon };
6799
6805
  class TextBoxComponent {
@@ -6906,7 +6912,7 @@ class TextBoxComponent {
6906
6912
  * })
6907
6913
  * class AppComponent {
6908
6914
  * public handleFocus(): void {
6909
- * console.log('Component is isFocused');
6915
+ * console.log('Component is focused.');
6910
6916
  * }
6911
6917
  * }
6912
6918
  * ```
@@ -7003,7 +7009,7 @@ class TextBoxComponent {
7003
7009
  * * `none`
7004
7010
  */
7005
7011
  set size(size) {
7006
- const newSize = size ? size : DEFAULT_SIZE$5;
7012
+ const newSize = size ? size : DEFAULT_SIZE$6;
7007
7013
  this.handleClasses(newSize, 'size');
7008
7014
  this._size = newSize;
7009
7015
  }
@@ -7022,7 +7028,7 @@ class TextBoxComponent {
7022
7028
  * * `none`
7023
7029
  */
7024
7030
  set rounded(rounded) {
7025
- const newRounded = rounded ? rounded : DEFAULT_ROUNDED$4;
7031
+ const newRounded = rounded ? rounded : DEFAULT_ROUNDED$5;
7026
7032
  this.handleClasses(newRounded, 'rounded');
7027
7033
  this._rounded = newRounded;
7028
7034
  }
@@ -7322,10 +7328,10 @@ class TextBoxComponent {
7322
7328
  if (this._isFocused !== value && this.hostElement) {
7323
7329
  const element = this.hostElement.nativeElement;
7324
7330
  if (value && !this.disabled) {
7325
- this.renderer.addClass(element, FOCUSED$1);
7331
+ this.renderer.addClass(element, FOCUSED$2);
7326
7332
  }
7327
7333
  else {
7328
- this.renderer.removeClass(element, FOCUSED$1);
7334
+ this.renderer.removeClass(element, FOCUSED$2);
7329
7335
  }
7330
7336
  this._isFocused = value;
7331
7337
  }
@@ -7484,7 +7490,7 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
7484
7490
  </ng-template>
7485
7491
  </span>
7486
7492
  <ng-container>
7487
- `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
7493
+ `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
7488
7494
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextBoxComponent, decorators: [{
7489
7495
  type: Component,
7490
7496
  args: [{
@@ -8036,9 +8042,9 @@ const resizeClasses = {
8036
8042
  'none': 'k-resize-none',
8037
8043
  'auto': 'k-resize-none'
8038
8044
  };
8039
- const FOCUSED = 'k-focus';
8040
- const DEFAULT_SIZE$4 = 'medium';
8041
- const DEFAULT_ROUNDED$3 = 'medium';
8045
+ const FOCUSED$1 = 'k-focus';
8046
+ const DEFAULT_SIZE$5 = 'medium';
8047
+ const DEFAULT_ROUNDED$4 = 'medium';
8042
8048
  const DEFAULT_FILL_MODE$2 = 'solid';
8043
8049
  /**
8044
8050
  * Represents the [Kendo UI TextArea component for Angular]({% slug overview_textarea %}).
@@ -8103,7 +8109,7 @@ class TextAreaComponent extends TextFieldsBase {
8103
8109
  * })
8104
8110
  * class AppComponent {
8105
8111
  * public handleFocus(): void {
8106
- * console.log('Component is focused');
8112
+ * console.log('Component is focused.');
8107
8113
  * }
8108
8114
  * }
8109
8115
  * ```
@@ -8256,7 +8262,7 @@ class TextAreaComponent extends TextFieldsBase {
8256
8262
  * * `none`
8257
8263
  */
8258
8264
  set size(size) {
8259
- const newSize = size ? size : DEFAULT_SIZE$4;
8265
+ const newSize = size ? size : DEFAULT_SIZE$5;
8260
8266
  this.handleClasses(newSize, 'size');
8261
8267
  this._size = newSize;
8262
8268
  }
@@ -8274,7 +8280,7 @@ class TextAreaComponent extends TextFieldsBase {
8274
8280
  * * `none`
8275
8281
  */
8276
8282
  set rounded(rounded) {
8277
- const newRounded = rounded ? rounded : DEFAULT_ROUNDED$3;
8283
+ const newRounded = rounded ? rounded : DEFAULT_ROUNDED$4;
8278
8284
  this.handleClasses(newRounded, 'rounded');
8279
8285
  this._rounded = newRounded;
8280
8286
  }
@@ -8446,10 +8452,10 @@ class TextAreaComponent extends TextFieldsBase {
8446
8452
  if (this._isFocused !== value && this.hostElement) {
8447
8453
  const element = this.hostElement.nativeElement;
8448
8454
  if (value && !this.disabled) {
8449
- this.renderer.addClass(element, FOCUSED);
8455
+ this.renderer.addClass(element, FOCUSED$1);
8450
8456
  }
8451
8457
  else {
8452
- this.renderer.removeClass(element, FOCUSED);
8458
+ this.renderer.removeClass(element, FOCUSED$1);
8453
8459
  }
8454
8460
  this._isFocused = value;
8455
8461
  }
@@ -8614,7 +8620,7 @@ TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
8614
8620
  ></kendo-input-separator>
8615
8621
  <ng-content select="kendo-textarea-suffix"></ng-content>
8616
8622
  </ng-container>
8617
- `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }], directives: [{ type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
8623
+ `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }], directives: [{ type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
8618
8624
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaComponent, decorators: [{
8619
8625
  type: Component,
8620
8626
  args: [{
@@ -11050,7 +11056,7 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
11050
11056
  [value]="value"
11051
11057
  [ratio]="contrastTool">
11052
11058
  </div>
11053
- `, isInline: true, components: [{ type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i4.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
11059
+ `, isInline: true, components: [{ type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i3$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
11054
11060
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorGradientComponent, decorators: [{
11055
11061
  type: Component,
11056
11062
  args: [{
@@ -12839,8 +12845,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
12839
12845
 
12840
12846
  /* eslint-disable @typescript-eslint/no-explicit-any */
12841
12847
  const DOM_FOCUS_EVENTS = ['focus', 'blur'];
12842
- const DEFAULT_SIZE$3 = 'medium';
12843
- const DEFAULT_ROUNDED$2 = 'medium';
12848
+ const DEFAULT_SIZE$4 = 'medium';
12849
+ const DEFAULT_ROUNDED$3 = 'medium';
12844
12850
  const DEFAULT_FILL_MODE$1 = 'solid';
12845
12851
  /**
12846
12852
  * @hidden
@@ -13091,7 +13097,7 @@ class ColorPickerComponent {
13091
13097
  * * `none`
13092
13098
  */
13093
13099
  set size(size) {
13094
- const newSize = size ? size : DEFAULT_SIZE$3;
13100
+ const newSize = size ? size : DEFAULT_SIZE$4;
13095
13101
  this.handleClasses(newSize, 'size');
13096
13102
  this._size = newSize;
13097
13103
  }
@@ -13110,7 +13116,7 @@ class ColorPickerComponent {
13110
13116
  * * `none`
13111
13117
  */
13112
13118
  set rounded(rounded) {
13113
- const newRounded = rounded ? rounded : DEFAULT_ROUNDED$2;
13119
+ const newRounded = rounded ? rounded : DEFAULT_ROUNDED$3;
13114
13120
  this.handleClasses(newRounded, 'rounded');
13115
13121
  this._rounded = newRounded;
13116
13122
  }
@@ -14034,8 +14040,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
14034
14040
  }]
14035
14041
  }] });
14036
14042
 
14037
- const DEFAULT_SIZE$2 = 'medium';
14038
- const DEFAULT_ROUNDED$1 = 'medium';
14043
+ const DEFAULT_SIZE$3 = 'medium';
14044
+ const DEFAULT_ROUNDED$2 = 'medium';
14039
14045
  /**
14040
14046
  * Represents the directive that renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
14041
14047
  * The directive is placed on input type="checkbox" elements.
@@ -14064,7 +14070,7 @@ class CheckBoxDirective {
14064
14070
  * * `none`
14065
14071
  */
14066
14072
  set size(size) {
14067
- const newSize = size ? size : DEFAULT_SIZE$2;
14073
+ const newSize = size ? size : DEFAULT_SIZE$3;
14068
14074
  this.handleClasses(newSize, 'size');
14069
14075
  this._size = newSize;
14070
14076
  }
@@ -14082,7 +14088,7 @@ class CheckBoxDirective {
14082
14088
  * * `none`
14083
14089
  */
14084
14090
  set rounded(rounded) {
14085
- const newRounded = rounded ? rounded : DEFAULT_ROUNDED$1;
14091
+ const newRounded = rounded ? rounded : DEFAULT_ROUNDED$2;
14086
14092
  this.handleClasses(newRounded, 'rounded');
14087
14093
  this._rounded = newRounded;
14088
14094
  }
@@ -14122,122 +14128,774 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
14122
14128
  type: Input
14123
14129
  }] } });
14124
14130
 
14131
+ const FOCUSED = 'k-focus';
14132
+ const DEFAULT_SIZE$2 = 'medium';
14125
14133
  /**
14126
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
14127
- * definition for the CheckBox directive.
14128
- *
14129
- * @example
14130
- *
14131
- * ```ts-no-run
14132
- * // Import the CheckBox module
14133
- * import { CheckBoxModule } from '@progress/kendo-angular-inputs';
14134
- *
14135
- * // The browser platform with a compiler
14136
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
14137
- *
14138
- * import { NgModule } from '@angular/core';
14139
- *
14140
- * // Import the app component
14141
- * import { AppComponent } from './app.component';
14142
- *
14143
- * // Define the app module
14144
- * _@NgModule({
14145
- * declarations: [AppComponent], // declare app component
14146
- * imports: [BrowserModule, CheckBoxModule], // import CheckBox module
14147
- * bootstrap: [AppComponent]
14148
- * })
14149
- * export class AppModule {}
14150
- *
14151
- * // Compile and launch the module
14152
- * platformBrowserDynamic().bootstrapModule(AppModule);
14153
- *
14154
- * ```
14155
- */
14156
- class CheckBoxModule {
14157
- }
14158
- CheckBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
14159
- CheckBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxModule, declarations: [CheckBoxDirective], imports: [CommonModule], exports: [CheckBoxDirective] });
14160
- CheckBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxModule, imports: [[CommonModule]] });
14161
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxModule, decorators: [{
14162
- type: NgModule,
14163
- args: [{
14164
- declarations: [CheckBoxDirective],
14165
- exports: [CheckBoxDirective],
14166
- imports: [CommonModule]
14167
- }]
14168
- }] });
14169
-
14170
- const DEFAULT_SIZE$1 = 'medium';
14171
- /**
14172
- * Represents the directive that renders the [Kendo UI RadioButton]({% slug overview_checkbox %}) input component.
14173
- * The directive is placed on input type="radio" elements.
14174
- *
14175
- * @example
14176
- * ```ts-no-run
14177
- * <input type="radio" kendoRadioButton />
14178
- * ```
14134
+ * @hidden
14179
14135
  */
14180
- class RadioButtonDirective {
14181
- constructor(renderer, hostElement) {
14182
- this.renderer = renderer;
14136
+ class RadioCheckBoxBase {
14137
+ constructor(componentType, hostElement, renderer, cdr, ngZone, injector) {
14138
+ this.componentType = componentType;
14183
14139
  this.hostElement = hostElement;
14184
- this.kendoClass = true;
14185
- this._size = 'medium';
14186
- validatePackage(packageMetadata);
14140
+ this.renderer = renderer;
14141
+ this.cdr = cdr;
14142
+ this.ngZone = ngZone;
14143
+ this.injector = injector;
14144
+ /**
14145
+ * @hidden
14146
+ */
14147
+ this.focusableId = `k-${guid()}`;
14148
+ /**
14149
+ * Sets the disabled state of the component.
14150
+ *
14151
+ * @default false
14152
+ */
14153
+ this.disabled = false;
14154
+ /**
14155
+ * Specifies the `tabindex` of the component.
14156
+ *
14157
+ * @default 0
14158
+ */
14159
+ this.tabindex = 0;
14160
+ /**
14161
+ * Fires each time the user focuses the component.
14162
+ *
14163
+ * > To wire the event programmatically, use the `onFocus` property.
14164
+ */
14165
+ this.onFocus = new EventEmitter();
14166
+ /**
14167
+ * Fires each time the component gets blurred.
14168
+ *
14169
+ * > To wire the event programmatically, use the `onBlur` property.
14170
+ */
14171
+ this.onBlur = new EventEmitter();
14172
+ /**
14173
+ * @hidden
14174
+ */
14175
+ this.handleInputBlur = () => {
14176
+ this.cdr.markForCheck();
14177
+ if (requiresZoneOnBlur(this.control)) {
14178
+ this.ngZone.run(() => {
14179
+ this.ngTouched();
14180
+ });
14181
+ }
14182
+ };
14183
+ this.focusChangedProgrammatically = false;
14184
+ this.parsedAttributes = {};
14185
+ this.ngChange = (_) => { };
14186
+ this.ngTouched = () => { };
14187
+ this._isFocused = false;
14188
+ this._size = DEFAULT_SIZE$2;
14187
14189
  }
14188
14190
  /**
14189
- * The size property specifies the width and height of the RadioButton
14190
- * ([see example]({% slug appearance_radiobuttondirective %}#toc-size)).
14191
+ * @hidden
14192
+ */
14193
+ set tabIndex(tabIndex) {
14194
+ this.tabindex = tabIndex;
14195
+ }
14196
+ get tabIndex() {
14197
+ return this.tabindex;
14198
+ }
14199
+ /**
14200
+ * The size property specifies the width and height of the component.
14201
+ *
14202
+ * @default 'medium'
14203
+ *
14191
14204
  * The possible values are:
14192
14205
  * * `small`
14193
- * * `medium` (default)
14206
+ * * `medium`
14194
14207
  * * `large`
14195
14208
  * * `none`
14196
14209
  */
14197
14210
  set size(size) {
14198
- const newSize = size ? size : DEFAULT_SIZE$1;
14211
+ const newSize = size ? size : DEFAULT_SIZE$2;
14199
14212
  this.handleClasses(newSize, 'size');
14200
14213
  this._size = newSize;
14201
14214
  }
14202
14215
  get size() {
14203
14216
  return this._size;
14204
14217
  }
14205
- ngAfterViewInit() {
14206
- // kept in sync with other inputs for easier refactoring
14207
- // to a common base class
14208
- const stylingInputs = ['size'];
14209
- stylingInputs.forEach(input => {
14210
- this.handleClasses(this[input], input);
14211
- });
14218
+ /**
14219
+ * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
14220
+ */
14221
+ set inputAttributes(attributes) {
14222
+ if (isObjectPresent(this.parsedAttributes)) {
14223
+ removeHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement);
14224
+ }
14225
+ this._inputAttributes = attributes;
14226
+ this.parsedAttributes = this.inputAttributes ?
14227
+ parseAttributes(this.inputAttributes, this.defaultAttributes) :
14228
+ this.inputAttributes;
14229
+ this.setInputAttributes();
14212
14230
  }
14213
- handleClasses(value, input) {
14214
- const elem = this.hostElement.nativeElement;
14215
- const classes = getStylingClasses('radio', input, this[input], value);
14216
- if (classes.toRemove) {
14217
- this.renderer.removeClass(elem, classes.toRemove);
14231
+ get inputAttributes() {
14232
+ return this._inputAttributes;
14233
+ }
14234
+ ngOnInit() {
14235
+ this.control = this.injector.get(NgControl, null);
14236
+ }
14237
+ /**
14238
+ * Focuses the component.
14239
+ */
14240
+ focus() {
14241
+ if (!this.input) {
14242
+ return;
14218
14243
  }
14219
- if (classes.toAdd) {
14220
- this.renderer.addClass(elem, classes.toAdd);
14244
+ this.focusChangedProgrammatically = true;
14245
+ this.isFocused = true;
14246
+ this.input.nativeElement.focus();
14247
+ this.focusChangedProgrammatically = false;
14248
+ }
14249
+ /**
14250
+ * Blurs the component.
14251
+ */
14252
+ blur() {
14253
+ this.focusChangedProgrammatically = true;
14254
+ const isFocusedElement = this.hostElement.nativeElement.querySelector(':focus');
14255
+ if (isFocusedElement) {
14256
+ isFocusedElement.blur();
14221
14257
  }
14258
+ this.isFocused = false;
14259
+ this.focusChangedProgrammatically = false;
14222
14260
  }
14223
- }
14224
- RadioButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
14225
- RadioButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: { size: "size" }, host: { properties: { "class.k-radio": "this.kendoClass" } }, ngImport: i0 });
14226
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonDirective, decorators: [{
14227
- type: Directive,
14228
- args: [{
14229
- selector: 'input[kendoRadioButton]'
14230
- }]
14231
- }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { kendoClass: [{
14232
- type: HostBinding,
14233
- args: ['class.k-radio']
14234
- }], size: [{
14235
- type: Input
14236
- }] } });
14237
-
14261
+ /**
14262
+ * @hidden
14263
+ */
14264
+ handleFocus() {
14265
+ this.ngZone.run(() => {
14266
+ if (!this.focusChangedProgrammatically && hasObservers(this.onFocus)) {
14267
+ this.onFocus.emit();
14268
+ }
14269
+ this.isFocused = true;
14270
+ });
14271
+ }
14272
+ /**
14273
+ * @hidden
14274
+ */
14275
+ handleBlur() {
14276
+ this.ngZone.run(() => {
14277
+ if (!this.focusChangedProgrammatically) {
14278
+ this.ngTouched();
14279
+ this.onBlur.emit();
14280
+ }
14281
+ this.isFocused = false;
14282
+ });
14283
+ }
14284
+ /**
14285
+ * @hidden
14286
+ */
14287
+ registerOnChange(fn) {
14288
+ this.ngChange = fn;
14289
+ }
14290
+ /**
14291
+ * @hidden
14292
+ */
14293
+ registerOnTouched(fn) {
14294
+ this.ngTouched = fn;
14295
+ }
14296
+ /**
14297
+ * @hidden
14298
+ */
14299
+ get isControlRequired() {
14300
+ var _a;
14301
+ return isControlRequired((_a = this.control) === null || _a === void 0 ? void 0 : _a.control);
14302
+ }
14303
+ /**
14304
+ * @hidden
14305
+ */
14306
+ get isControlInvalid() {
14307
+ return this.control && this.control.touched && !this.control.valid;
14308
+ }
14309
+ /**
14310
+ * @hidden
14311
+ */
14312
+ get isFocused() {
14313
+ return this._isFocused;
14314
+ }
14315
+ /**
14316
+ * @hidden
14317
+ */
14318
+ set isFocused(value) {
14319
+ if (this._isFocused !== value && this.input) {
14320
+ const element = this.input.nativeElement;
14321
+ if (value && !this.disabled) {
14322
+ this.renderer.addClass(element, FOCUSED);
14323
+ }
14324
+ else {
14325
+ this.renderer.removeClass(element, FOCUSED);
14326
+ }
14327
+ this._isFocused = value;
14328
+ }
14329
+ }
14330
+ /**
14331
+ * @hidden
14332
+ * Called when the status of the component changes to or from `disabled`.
14333
+ * Depending on the value, it enables or disables the appropriate DOM element.
14334
+ *
14335
+ * @param isDisabled
14336
+ */
14337
+ setDisabledState(isDisabled) {
14338
+ this.cdr.markForCheck();
14339
+ this.disabled = isDisabled;
14340
+ }
14341
+ get defaultAttributes() { return; }
14342
+ /**
14343
+ * @hidden
14344
+ */
14345
+ writeValue(_value) { }
14346
+ handleClasses(value, input) {
14347
+ if (!isPresent$1(this.input)) {
14348
+ return;
14349
+ }
14350
+ const inputElem = this.input.nativeElement;
14351
+ const classes = getStylingClasses(this.componentType, input, this[input], value);
14352
+ if (classes.toRemove) {
14353
+ this.renderer.removeClass(inputElem, classes.toRemove);
14354
+ }
14355
+ if (classes.toAdd) {
14356
+ this.renderer.addClass(inputElem, classes.toAdd);
14357
+ }
14358
+ }
14359
+ setInputAttributes() {
14360
+ setHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement);
14361
+ }
14362
+ }
14363
+ RadioCheckBoxBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioCheckBoxBase, deps: [{ token: COMPONENT_TYPE }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
14364
+ RadioCheckBoxBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RadioCheckBoxBase, selector: "ng-component", inputs: { focusableId: "focusableId", title: "title", name: "name", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", value: "value", size: "size", inputAttributes: "inputAttributes" }, outputs: { onFocus: "focus", onBlur: "blur" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true });
14365
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioCheckBoxBase, decorators: [{
14366
+ type: Component,
14367
+ args: [{
14368
+ template: ''
14369
+ }]
14370
+ }], ctorParameters: function () {
14371
+ return [{ type: undefined, decorators: [{
14372
+ type: Inject,
14373
+ args: [COMPONENT_TYPE]
14374
+ }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Injector }];
14375
+ }, propDecorators: { focusableId: [{
14376
+ type: Input
14377
+ }], title: [{
14378
+ type: Input
14379
+ }], name: [{
14380
+ type: Input
14381
+ }], disabled: [{
14382
+ type: Input
14383
+ }], tabindex: [{
14384
+ type: Input
14385
+ }], tabIndex: [{
14386
+ type: Input
14387
+ }], value: [{
14388
+ type: Input
14389
+ }], size: [{
14390
+ type: Input
14391
+ }], inputAttributes: [{
14392
+ type: Input
14393
+ }], onFocus: [{
14394
+ type: Output,
14395
+ args: ['focus']
14396
+ }], onBlur: [{
14397
+ type: Output,
14398
+ args: ['blur']
14399
+ }], input: [{
14400
+ type: ViewChild,
14401
+ args: ['input', { static: true }]
14402
+ }] } });
14403
+
14404
+ const DEFAULT_ROUNDED$1 = 'medium';
14405
+ class CheckBoxComponent extends RadioCheckBoxBase {
14406
+ constructor(renderer, hostElement, cdr, ngZone, injector) {
14407
+ super('checkbox', hostElement, renderer, cdr, ngZone, injector);
14408
+ this.renderer = renderer;
14409
+ this.hostElement = hostElement;
14410
+ this.cdr = cdr;
14411
+ this.ngZone = ngZone;
14412
+ this.injector = injector;
14413
+ this.hostClass = true;
14414
+ /**
14415
+ * Fires each time the inner input's checked state is changed.
14416
+ * When the state of the component is programmatically changed to `ngModel` or `formControl`
14417
+ * through its API or form binding, the `checkedStateChange` event is not triggered because it
14418
+ * might cause a mix-up with the built-in mechanisms of the `ngModel` or `formControl` bindings.
14419
+ *
14420
+ * Used to provide a two-way binding for the `checkedState` property.
14421
+ */
14422
+ this.checkedStateChange = new EventEmitter();
14423
+ this._rounded = DEFAULT_ROUNDED$1;
14424
+ this._checkedState = false;
14425
+ /**
14426
+ * @hidden
14427
+ */
14428
+ this.handleChange = ($event) => {
14429
+ this.ngZone.run(() => {
14430
+ this.checkedState = $event && $event.target && $event.target.checked;
14431
+ this.checkedStateChange.emit(this.checkedState);
14432
+ this.ngChange(this.checkedState);
14433
+ });
14434
+ };
14435
+ validatePackage(packageMetadata);
14436
+ }
14437
+ /**
14438
+ * Sets the checked state of the component.
14439
+ *
14440
+ * @default false
14441
+ */
14442
+ set checkedState(value) {
14443
+ this._checkedState = value;
14444
+ if (!isPresent$1(this.input)) {
14445
+ return;
14446
+ }
14447
+ this.input.nativeElement.indeterminate = value === 'indeterminate';
14448
+ }
14449
+ get checkedState() {
14450
+ return this._checkedState;
14451
+ }
14452
+ /**
14453
+ * The rounded property specifies the border radius of the CheckBox
14454
+ * ([see example]({% slug appearance_checkboxdirective %}#toc-rounded)).
14455
+ *
14456
+ * @default 'medium'
14457
+ *
14458
+ * The possible values are:
14459
+ * * `small`
14460
+ * * `medium`
14461
+ * * `large`
14462
+ * * `none`
14463
+ */
14464
+ set rounded(rounded) {
14465
+ const newRounded = rounded ? rounded : DEFAULT_ROUNDED$1;
14466
+ this.handleClasses(newRounded, 'rounded');
14467
+ this._rounded = newRounded;
14468
+ }
14469
+ get rounded() {
14470
+ return this._rounded;
14471
+ }
14472
+ /**
14473
+ * @hidden
14474
+ */
14475
+ get isChecked() {
14476
+ return typeof this.checkedState === 'boolean' && this.checkedState;
14477
+ }
14478
+ /**
14479
+ * @hidden
14480
+ */
14481
+ get isIndeterminate() {
14482
+ return typeof this.checkedState === 'string' && this.checkedState === 'indeterminate';
14483
+ }
14484
+ get defaultAttributes() {
14485
+ return {
14486
+ type: 'checkbox',
14487
+ id: this.focusableId,
14488
+ title: this.title,
14489
+ tabindex: this.tabindex,
14490
+ tabIndex: this.tabindex,
14491
+ disabled: this.disabled ? '' : null,
14492
+ value: this.value,
14493
+ checked: this.isChecked,
14494
+ 'aria-invalid': this.isControlInvalid
14495
+ };
14496
+ }
14497
+ ngAfterViewInit() {
14498
+ const stylingInputs = ['size', 'rounded'];
14499
+ stylingInputs.forEach(input => {
14500
+ this.handleClasses(this[input], input);
14501
+ });
14502
+ this.input.nativeElement.indeterminate = this.checkedState === 'indeterminate';
14503
+ }
14504
+ /**
14505
+ * @hidden
14506
+ */
14507
+ writeValue(value) {
14508
+ this.checkedState = value;
14509
+ }
14510
+ }
14511
+ CheckBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
14512
+ CheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: { checkedState: "checkedState", rounded: "rounded" }, outputs: { checkedStateChange: "checkedStateChange" }, host: { properties: { "class.k-checkbox-wrap": "this.hostClass" } }, providers: [
14513
+ LocalizationService,
14514
+ { provide: L10N_PREFIX, useValue: 'kendo.checkbox' },
14515
+ {
14516
+ provide: NG_VALUE_ACCESSOR,
14517
+ useExisting: forwardRef(() => CheckBoxComponent),
14518
+ multi: true
14519
+ },
14520
+ { provide: KendoInput, useExisting: forwardRef(() => CheckBoxComponent) }
14521
+ ], exportAs: ["kendoCheckBox"], usesInheritance: true, ngImport: i0, template: `
14522
+ <ng-container
14523
+ kendoInputSharedEvents
14524
+ [hostElement]="hostElement"
14525
+ [(isFocused)]="isFocused"
14526
+ (handleBlur)="handleBlur()"
14527
+ (onFocus)="handleFocus()"
14528
+ >
14529
+ <input #input
14530
+ type="checkbox"
14531
+ class="k-checkbox"
14532
+ [id]="focusableId"
14533
+ [attr.title]="title"
14534
+ [disabled]="disabled"
14535
+ [class.k-disabled]="disabled"
14536
+ [attr.tabindex]="disabled ? undefined : tabindex"
14537
+ [value]="value"
14538
+ [checked]="isChecked"
14539
+ [class.k-checked]="isChecked"
14540
+ [class.k-indeterminate]="isIndeterminate"
14541
+ [attr.aria-invalid]="isControlInvalid"
14542
+ [attr.required]="isControlRequired ? '' : null"
14543
+ [kendoEventsOutsideAngular]="{
14544
+ blur: handleInputBlur,
14545
+ change: handleChange
14546
+ }"
14547
+ />
14548
+ </ng-container>
14549
+ `, isInline: true, directives: [{ type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
14550
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxComponent, decorators: [{
14551
+ type: Component,
14552
+ args: [{
14553
+ exportAs: 'kendoCheckBox',
14554
+ providers: [
14555
+ LocalizationService,
14556
+ { provide: L10N_PREFIX, useValue: 'kendo.checkbox' },
14557
+ {
14558
+ provide: NG_VALUE_ACCESSOR,
14559
+ useExisting: forwardRef(() => CheckBoxComponent),
14560
+ multi: true
14561
+ },
14562
+ { provide: KendoInput, useExisting: forwardRef(() => CheckBoxComponent) }
14563
+ ],
14564
+ selector: 'kendo-checkbox',
14565
+ template: `
14566
+ <ng-container
14567
+ kendoInputSharedEvents
14568
+ [hostElement]="hostElement"
14569
+ [(isFocused)]="isFocused"
14570
+ (handleBlur)="handleBlur()"
14571
+ (onFocus)="handleFocus()"
14572
+ >
14573
+ <input #input
14574
+ type="checkbox"
14575
+ class="k-checkbox"
14576
+ [id]="focusableId"
14577
+ [attr.title]="title"
14578
+ [disabled]="disabled"
14579
+ [class.k-disabled]="disabled"
14580
+ [attr.tabindex]="disabled ? undefined : tabindex"
14581
+ [value]="value"
14582
+ [checked]="isChecked"
14583
+ [class.k-checked]="isChecked"
14584
+ [class.k-indeterminate]="isIndeterminate"
14585
+ [attr.aria-invalid]="isControlInvalid"
14586
+ [attr.required]="isControlRequired ? '' : null"
14587
+ [kendoEventsOutsideAngular]="{
14588
+ blur: handleInputBlur,
14589
+ change: handleChange
14590
+ }"
14591
+ />
14592
+ </ng-container>
14593
+ `
14594
+ }]
14595
+ }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Injector }]; }, propDecorators: { hostClass: [{
14596
+ type: HostBinding,
14597
+ args: ['class.k-checkbox-wrap']
14598
+ }], checkedState: [{
14599
+ type: Input
14600
+ }], rounded: [{
14601
+ type: Input
14602
+ }], checkedStateChange: [{
14603
+ type: Output
14604
+ }] } });
14605
+
14606
+ /**
14607
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
14608
+ * definition for the CheckBox directive and CheckBoxComponent.
14609
+ *
14610
+ * @example
14611
+ *
14612
+ * ```ts-no-run
14613
+ * // Import the CheckBox module
14614
+ * import { CheckBoxModule } from '@progress/kendo-angular-inputs';
14615
+ *
14616
+ * // The browser platform with a compiler
14617
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
14618
+ *
14619
+ * import { NgModule } from '@angular/core';
14620
+ *
14621
+ * // Import the app component
14622
+ * import { AppComponent } from './app.component';
14623
+ *
14624
+ * // Define the app module
14625
+ * _@NgModule({
14626
+ * declarations: [AppComponent], // declare app component
14627
+ * imports: [BrowserModule, CheckBoxModule], // import CheckBox module
14628
+ * bootstrap: [AppComponent]
14629
+ * })
14630
+ * export class AppModule {}
14631
+ *
14632
+ * // Compile and launch the module
14633
+ * platformBrowserDynamic().bootstrapModule(AppModule);
14634
+ *
14635
+ * ```
14636
+ */
14637
+ class CheckBoxModule {
14638
+ }
14639
+ CheckBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
14640
+ CheckBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxModule, declarations: [CheckBoxDirective, CheckBoxComponent], imports: [CommonModule, EventsModule, SharedEventsModule], exports: [CheckBoxDirective, CheckBoxComponent] });
14641
+ CheckBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxModule, imports: [[CommonModule, EventsModule, SharedEventsModule]] });
14642
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxModule, decorators: [{
14643
+ type: NgModule,
14644
+ args: [{
14645
+ declarations: [CheckBoxDirective, CheckBoxComponent],
14646
+ exports: [CheckBoxDirective, CheckBoxComponent],
14647
+ imports: [CommonModule, EventsModule, SharedEventsModule]
14648
+ }]
14649
+ }] });
14650
+
14651
+ const DEFAULT_SIZE$1 = 'medium';
14652
+ /**
14653
+ * Represents the directive that renders the [Kendo UI RadioButton]({% slug overview_checkbox %}) input component.
14654
+ * The directive is placed on input type="radio" elements.
14655
+ *
14656
+ * @example
14657
+ * ```ts-no-run
14658
+ * <input type="radio" kendoRadioButton />
14659
+ * ```
14660
+ */
14661
+ class RadioButtonDirective {
14662
+ constructor(renderer, hostElement) {
14663
+ this.renderer = renderer;
14664
+ this.hostElement = hostElement;
14665
+ this.kendoClass = true;
14666
+ this._size = 'medium';
14667
+ validatePackage(packageMetadata);
14668
+ }
14669
+ /**
14670
+ * The size property specifies the width and height of the RadioButton
14671
+ * ([see example]({% slug appearance_radiobuttondirective %}#toc-size)).
14672
+ * The possible values are:
14673
+ * * `small`
14674
+ * * `medium` (default)
14675
+ * * `large`
14676
+ * * `none`
14677
+ */
14678
+ set size(size) {
14679
+ const newSize = size ? size : DEFAULT_SIZE$1;
14680
+ this.handleClasses(newSize, 'size');
14681
+ this._size = newSize;
14682
+ }
14683
+ get size() {
14684
+ return this._size;
14685
+ }
14686
+ ngAfterViewInit() {
14687
+ // kept in sync with other inputs for easier refactoring
14688
+ // to a common base class
14689
+ const stylingInputs = ['size'];
14690
+ stylingInputs.forEach(input => {
14691
+ this.handleClasses(this[input], input);
14692
+ });
14693
+ }
14694
+ handleClasses(value, input) {
14695
+ const elem = this.hostElement.nativeElement;
14696
+ const classes = getStylingClasses('radio', input, this[input], value);
14697
+ if (classes.toRemove) {
14698
+ this.renderer.removeClass(elem, classes.toRemove);
14699
+ }
14700
+ if (classes.toAdd) {
14701
+ this.renderer.addClass(elem, classes.toAdd);
14702
+ }
14703
+ }
14704
+ }
14705
+ RadioButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
14706
+ RadioButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: { size: "size" }, host: { properties: { "class.k-radio": "this.kendoClass" } }, ngImport: i0 });
14707
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonDirective, decorators: [{
14708
+ type: Directive,
14709
+ args: [{
14710
+ selector: 'input[kendoRadioButton]'
14711
+ }]
14712
+ }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { kendoClass: [{
14713
+ type: HostBinding,
14714
+ args: ['class.k-radio']
14715
+ }], size: [{
14716
+ type: Input
14717
+ }] } });
14718
+
14719
+ class RadioButtonComponent extends RadioCheckBoxBase {
14720
+ constructor(renderer, hostElement, cdr, ngZone, injector, localizationService) {
14721
+ super('radio', hostElement, renderer, cdr, ngZone, injector);
14722
+ this.renderer = renderer;
14723
+ this.hostElement = hostElement;
14724
+ this.cdr = cdr;
14725
+ this.ngZone = ngZone;
14726
+ this.injector = injector;
14727
+ this.localizationService = localizationService;
14728
+ this.hostClass = true;
14729
+ /**
14730
+ * Specifies the checked state of the RadioButton.
14731
+ *
14732
+ * @default false
14733
+ */
14734
+ this.checked = false;
14735
+ /**
14736
+ * Fires each time the checked state is changed.
14737
+ * When the state of the component is programmatically changed to `ngModel` or `formControl`
14738
+ * through its API or form binding, the `checkedStateChange` event is not triggered because it
14739
+ * might cause a mix-up with the built-in mechanisms of the `ngModel` or `formControl` bindings.
14740
+ *
14741
+ * Used to provide a two-way binding for the `checked` property.
14742
+ */
14743
+ this.checkedChange = new EventEmitter();
14744
+ this.subs = new Subscription();
14745
+ /**
14746
+ * @hidden
14747
+ */
14748
+ this.handleChange = ($event) => {
14749
+ this.ngZone.run(() => {
14750
+ this.checked = $event.target.checked;
14751
+ this.checkedChange.emit(this.checked);
14752
+ this.ngChange($event.target.value);
14753
+ });
14754
+ };
14755
+ validatePackage(packageMetadata);
14756
+ this.direction = localizationService.rtl ? 'rtl' : 'ltr';
14757
+ }
14758
+ get defaultAttributes() {
14759
+ return {
14760
+ type: 'radio',
14761
+ id: this.focusableId,
14762
+ title: this.title,
14763
+ tabindex: this.tabindex,
14764
+ tabIndex: this.tabindex,
14765
+ disabled: this.disabled ? '' : null,
14766
+ value: this.value,
14767
+ checked: this.checked,
14768
+ name: this.name,
14769
+ 'aria-invalid': this.isControlInvalid
14770
+ };
14771
+ }
14772
+ ngOnInit() {
14773
+ super.ngOnInit();
14774
+ this.subs.add(this.localizationService.changes.subscribe(({ rtl }) => {
14775
+ this.direction = rtl ? 'rtl' : 'ltr';
14776
+ }));
14777
+ }
14778
+ ngAfterViewInit() {
14779
+ const stylingInputs = ['size'];
14780
+ stylingInputs.forEach(input => {
14781
+ this.handleClasses(this[input], input);
14782
+ });
14783
+ // Otherwise the view is not updated in Reactive Forms - https://github.com/angular/angular/issues/13792
14784
+ if (this.control) {
14785
+ this.subs.add(this.control.valueChanges.subscribe(e => {
14786
+ this.control.control.setValue(e, { emitEvent: false });
14787
+ }));
14788
+ }
14789
+ }
14790
+ ngOnDestroy() {
14791
+ this.subs.unsubscribe();
14792
+ }
14793
+ /**
14794
+ * @hidden
14795
+ */
14796
+ writeValue(value) {
14797
+ this.checked = value === this.value;
14798
+ }
14799
+ }
14800
+ RadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
14801
+ RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RadioButtonComponent, selector: "kendo-radiobutton", inputs: { checked: "checked" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.k-radio-wrap": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
14802
+ LocalizationService,
14803
+ { provide: L10N_PREFIX, useValue: 'kendo.radiobutton' },
14804
+ {
14805
+ provide: NG_VALUE_ACCESSOR,
14806
+ useExisting: forwardRef(() => RadioButtonComponent),
14807
+ multi: true
14808
+ },
14809
+ { provide: KendoInput, useExisting: forwardRef(() => RadioButtonComponent) }
14810
+ ], exportAs: ["kendoRadioButton"], usesInheritance: true, ngImport: i0, template: `
14811
+ <ng-container
14812
+ kendoInputSharedEvents
14813
+ [hostElement]="hostElement"
14814
+ [(isFocused)]="isFocused"
14815
+ (handleBlur)="handleBlur()"
14816
+ (onFocus)="handleFocus()"
14817
+ >
14818
+ <input #input
14819
+ type="radio"
14820
+ class="k-radio"
14821
+ [id]="focusableId"
14822
+ [attr.title]="title"
14823
+ [disabled]="disabled"
14824
+ [class.k-disabled]="disabled"
14825
+ [attr.tabindex]="disabled ? undefined : tabindex"
14826
+ [value]="value"
14827
+ [name]="name"
14828
+ [checked]="checked"
14829
+ [class.k-checked]="checked"
14830
+ [attr.aria-invalid]="isControlInvalid"
14831
+ [attr.required]="isControlRequired ? '' : null"
14832
+ [kendoEventsOutsideAngular]="{
14833
+ blur: handleInputBlur,
14834
+ change: handleChange
14835
+ }"
14836
+ />
14837
+ </ng-container>
14838
+ `, isInline: true, directives: [{ type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
14839
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonComponent, decorators: [{
14840
+ type: Component,
14841
+ args: [{
14842
+ exportAs: 'kendoRadioButton',
14843
+ providers: [
14844
+ LocalizationService,
14845
+ { provide: L10N_PREFIX, useValue: 'kendo.radiobutton' },
14846
+ {
14847
+ provide: NG_VALUE_ACCESSOR,
14848
+ useExisting: forwardRef(() => RadioButtonComponent),
14849
+ multi: true
14850
+ },
14851
+ { provide: KendoInput, useExisting: forwardRef(() => RadioButtonComponent) }
14852
+ ],
14853
+ selector: 'kendo-radiobutton',
14854
+ template: `
14855
+ <ng-container
14856
+ kendoInputSharedEvents
14857
+ [hostElement]="hostElement"
14858
+ [(isFocused)]="isFocused"
14859
+ (handleBlur)="handleBlur()"
14860
+ (onFocus)="handleFocus()"
14861
+ >
14862
+ <input #input
14863
+ type="radio"
14864
+ class="k-radio"
14865
+ [id]="focusableId"
14866
+ [attr.title]="title"
14867
+ [disabled]="disabled"
14868
+ [class.k-disabled]="disabled"
14869
+ [attr.tabindex]="disabled ? undefined : tabindex"
14870
+ [value]="value"
14871
+ [name]="name"
14872
+ [checked]="checked"
14873
+ [class.k-checked]="checked"
14874
+ [attr.aria-invalid]="isControlInvalid"
14875
+ [attr.required]="isControlRequired ? '' : null"
14876
+ [kendoEventsOutsideAngular]="{
14877
+ blur: handleInputBlur,
14878
+ change: handleChange
14879
+ }"
14880
+ />
14881
+ </ng-container>
14882
+ `
14883
+ }]
14884
+ }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
14885
+ type: HostBinding,
14886
+ args: ['class.k-radio-wrap']
14887
+ }], direction: [{
14888
+ type: HostBinding,
14889
+ args: ['attr.dir']
14890
+ }], checked: [{
14891
+ type: Input
14892
+ }], checkedChange: [{
14893
+ type: Output
14894
+ }] } });
14895
+
14238
14896
  /**
14239
14897
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
14240
- * definition for the RadioButton directive.
14898
+ * definition for the RadioButton directive and RadioButtonComponent.
14241
14899
  *
14242
14900
  * @example
14243
14901
  *
@@ -14269,14 +14927,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
14269
14927
  class RadioButtonModule {
14270
14928
  }
14271
14929
  RadioButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
14272
- RadioButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonModule, declarations: [RadioButtonDirective], imports: [CommonModule], exports: [RadioButtonDirective] });
14273
- RadioButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonModule, imports: [[CommonModule]] });
14930
+ RadioButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonModule, declarations: [RadioButtonDirective, RadioButtonComponent], imports: [CommonModule, EventsModule, SharedEventsModule], exports: [RadioButtonDirective, RadioButtonComponent] });
14931
+ RadioButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonModule, imports: [[CommonModule, EventsModule, SharedEventsModule]] });
14274
14932
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonModule, decorators: [{
14275
14933
  type: NgModule,
14276
14934
  args: [{
14277
- declarations: [RadioButtonDirective],
14278
- exports: [RadioButtonDirective],
14279
- imports: [CommonModule]
14935
+ declarations: [RadioButtonDirective, RadioButtonComponent],
14936
+ exports: [RadioButtonDirective, RadioButtonComponent],
14937
+ imports: [CommonModule, EventsModule, SharedEventsModule]
14280
14938
  }]
14281
14939
  }] });
14282
14940
 
@@ -15510,7 +16168,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
15510
16168
  [parentLocalization]="localization">
15511
16169
  </kendo-signature>
15512
16170
  </kendo-dialog>
15513
- `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3$1.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SignatureComponent, selector: "kendo-signature", inputs: ["focusableId", "readonly", "disabled", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "exportScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }], directives: [{ type: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
16171
+ `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3$2.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SignatureComponent, selector: "kendo-signature", inputs: ["focusableId", "readonly", "disabled", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "exportScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }], directives: [{ type: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
15514
16172
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SignatureComponent, decorators: [{
15515
16173
  type: Component,
15516
16174
  args: [{
@@ -16697,5 +17355,5 @@ class SwitchFocusEvent {
16697
17355
  * Generated bundle index. Do not edit.
16698
17356
  */
16699
17357
 
16700
- export { ActiveColorClickEvent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormFieldComponent, FormFieldModule, HintComponent, InputSeparatorComponent, InputsModule, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, MaskingService, NumericLabelDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, RatingComponent, RatingHoveredItemTemplateDirective, RatingItemTemplateDirective, RatingModule, RatingSelectedItemTemplateDirective, SharedModule, SignatureCloseEvent, SignatureComponent, SignatureCustomMessagesComponent, SignatureMessages, SignatureModule, SignatureOpenEvent, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchBlurEvent, SwitchComponent, SwitchCustomMessagesComponent, SwitchFocusEvent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaPrefixComponent, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };
17358
+ export { ActiveColorClickEvent, CheckBoxComponent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormFieldComponent, FormFieldModule, HintComponent, InputSeparatorComponent, InputsModule, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, MaskingService, NumericLabelDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, RadioButtonComponent, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, RatingComponent, RatingHoveredItemTemplateDirective, RatingItemTemplateDirective, RatingModule, RatingSelectedItemTemplateDirective, SharedModule, SignatureCloseEvent, SignatureComponent, SignatureCustomMessagesComponent, SignatureMessages, SignatureModule, SignatureOpenEvent, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchBlurEvent, SwitchComponent, SwitchCustomMessagesComponent, SwitchFocusEvent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaPrefixComponent, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };
16701
17359