@progress/kendo-angular-inputs 15.2.0-develop.2 → 15.2.0-develop.4

package/fesm2015/progress-kendo-angular-inputs.mjs

@@ -9,14 +9,14 @@ import { Subscription, fromEvent, interval, merge, BehaviorSubject, Subject } fr
 import { take, filter, concatMap, startWith, takeUntil, skip, debounceTime, throttleTime } from 'rxjs/operators';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
-import * as i4$1 from '@progress/kendo-angular-common';
+import * as i4 from '@progress/kendo-angular-common';
 import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, SuffixTemplateDirective, PrefixTemplateDirective, isChanged, DraggableModule, EventsModule, ResizeSensorModule, AdornmentsModule, isSafari, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1 } from '@progress/kendo-angular-common';
 export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
-import { caretAltUpIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, checkIcon, exclamationCircleIcon, xIcon, dropletSliderIcon, paletteIcon, dropletSlashIcon, caretAltExpandIcon, xCircleIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
+import { caretAltUpIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, checkIcon, exclamationCircleIcon, xIcon, dropletSliderIcon, paletteIcon, dropletSlashIcon, caretAltExpandIcon, xCircleIcon, hyperlinkOpenIcon, starIcon, starOutlineIcon } from '@progress/kendo-svg-icons';
 import * as i2 from '@progress/kendo-angular-buttons';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
-import * as i4 from '@angular/common';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { browser, mobileOS } from '@progress/kendo-common';
 import * as i1$1 from '@progress/kendo-angular-intl';
@@ -25,7 +25,7 @@ import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 import { parseColor as parseColor$1, Color, namedColors } from '@progress/kendo-drawing';
-import * as i3 from '@progress/kendo-angular-dialog';
+import * as i3$1 from '@progress/kendo-angular-dialog';
 import { DialogsModule } from '@progress/kendo-angular-dialog';
 import { __awaiter } from 'tslib';
 import { SignaturePad } from '@progress/kendo-inputs-common';
@@ -538,8 +538,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1709727659,
-    version: '15.2.0-develop.2',
+    publishDate: 1709814651,
+    version: '15.2.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -902,7 +902,7 @@ SliderTicksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
      <ng-template #defaultLabel let-value="value">
         {{ tickTitle(value) }}
      </ng-template>
-  `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+  `, isInline: true, directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SliderTicksComponent, decorators: [{
             type: Component,
             args: [{
@@ -1501,7 +1501,7 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             [attr.aria-label]="currentValue"
         ></button>
         <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
-  `, 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$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i4$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
+  `, 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
             args: [{
@@ -2204,7 +2204,7 @@ RangeSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             </div>
         </div>
         <kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
-  `, isInline: true, components: [{ type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i4$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedRangeSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i4$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
+  `, 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RangeSliderComponent, decorators: [{
             type: Component,
             args: [{
@@ -4617,7 +4617,7 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </button>
             </span>
         </ng-container>
-    `, 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -5907,7 +5907,7 @@ MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </ng-template>
             </span>
         </ng-container>
-    `, 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -7337,7 +7337,7 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                 </ng-template>
             </span>
         <ng-container>
-    `, 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -8412,7 +8412,7 @@ TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             ></kendo-input-separator>
             <ng-content select="kendo-textarea-suffix"></ng-content>
         </ng-container>
-    `, 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
             args: [{
@@ -9211,7 +9211,7 @@ FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 </span>
             </div>
         </div>
-    `, 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"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, 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"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatColorPickerHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -9413,7 +9413,7 @@ class ColorContrastSvgComponent {
 ColorContrastSvgComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorContrastSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 ColorContrastSvgComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: { wrapper: "wrapper", hsva: "hsva", backgroundColor: "backgroundColor" }, host: { properties: { "class.k-color-contrast-svg": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
         <svg:path *ngFor="let path of paths" [attr.d]="path" fill="none" stroke="white" stroke-width="1"></svg:path>
-    `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorContrastSvgComponent, decorators: [{
             type: Component,
             args: [{
@@ -9715,7 +9715,7 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
             </div>
         </ng-container>
-    `, 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: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
+    `, 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: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -9911,7 +9911,7 @@ ContrastValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
             </span>
         </ng-container>
-    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContrastValidationComponent, decorators: [{
             type: Component,
             args: [{
@@ -9989,7 +9989,7 @@ ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [value]="value"
             [pass]="satisfiesAAACondition">
         </div>
-    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContrastComponent, decorators: [{
             type: Component,
             args: [{
@@ -10845,7 +10845,7 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             [value]="value"
             [ratio]="contrastTool">
         </div>
-    `, 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$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorGradientComponent, decorators: [{
             type: Component,
             args: [{
@@ -11628,7 +11628,7 @@ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </tr>
             </tbody>
         </table>
-    `, isInline: true, directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorPaletteComponent, decorators: [{
             type: Component,
             args: [{
@@ -12410,7 +12410,7 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             [ngClass]="'k-justify-content-' + actionsLayout"
             (actionButtonClick)="onAction($event)"
             (tabOut)="firstFocusable.focus()"></div>
-`, isInline: true, components: [{ type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["id", "opacity", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex"], outputs: ["actionButtonClick", "tabOut"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+`, isInline: true, components: [{ type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["id", "opacity", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex"], outputs: ["actionButtonClick", "tabOut"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatColorPickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -13453,7 +13453,7 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             </kendo-flatcolorpicker>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -13751,7 +13751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; } });
 
-const PUBLIC_DIRECTIVES = [
+const PUBLIC_DIRECTIVES$1 = [
     ColorPickerComponent,
     ColorPaletteComponent,
     ColorGradientComponent,
@@ -13813,10 +13813,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             type: NgModule,
             args: [{
                     declarations: [
-                        PUBLIC_DIRECTIVES,
+                        PUBLIC_DIRECTIVES$1,
                         INTERNAL_DIRECTIVES
                     ],
-                    exports: [PUBLIC_DIRECTIVES],
+                    exports: [PUBLIC_DIRECTIVES$1],
                     imports: [
                         SliderModule,
                         NumericTextBoxModule,
@@ -14409,7 +14409,7 @@ FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             <ng-content select="kendo-formhint" *ngIf="hasHints"></ng-content>
             <ng-content select="kendo-formerror" *ngIf="hasErrors"></ng-content>
         </div>
-    `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
             args: [{
@@ -15305,7 +15305,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [parentLocalization]="localization">
             </kendo-signature>
         </kendo-dialog>
-    `, 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.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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, 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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SignatureComponent, decorators: [{
             type: Component,
             args: [{
@@ -15572,6 +15572,812 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }] });
 
+/**
+ * Renders the rating item content. To define an item template, nest an `<ng-template>` tag
+ * with the `kendoRatingItemTemplate` directive inside the `<kendo-rating>` tag
+ * [see example]({% slug templates_rating %}#toc-item-template).
+ */
+class RatingItemTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+RatingItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RatingItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+RatingItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: RatingItemTemplateDirective, selector: "[kendoRatingItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RatingItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoRatingItemTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+/**
+ * Renders the hovered rating item content. To define an item template, nest an `<ng-template>` tag
+ * with the `kendoRatingHoveredItemTemplate` directive inside the `<kendo-rating>` tag
+ * [see example]({% slug templates_rating %}#toc-hovered-item-template).
+ */
+class RatingHoveredItemTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+RatingHoveredItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RatingHoveredItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+RatingHoveredItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: RatingHoveredItemTemplateDirective, selector: "[kendoRatingHoveredItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RatingHoveredItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoRatingHoveredItemTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+/**
+ * Renders the selected rating item content. To define an item template, nest an `<ng-template>` tag
+ * with the `kendoRatingSelectedItemTemplate` directive inside the `<kendo-rating>` tag
+ * [see example]({% slug templates_rating %}#toc-selected-item-template).
+ */
+class RatingSelectedItemTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+RatingSelectedItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RatingSelectedItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+RatingSelectedItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: RatingSelectedItemTemplateDirective, selector: "[kendoRatingSelectedItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RatingSelectedItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoRatingSelectedItemTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+/**
+ * Represents the [Kendo UI Rating component for Angular]({% slug overview_rating %}).
+ */
+class RatingComponent {
+    constructor(element, renderer, localizationService, cdr, zone) {
+        this.element = element;
+        this.renderer = renderer;
+        this.localizationService = localizationService;
+        this.cdr = cdr;
+        this.zone = zone;
+        /**
+         * Determines whether the Rating is disabled ([see example]({% slug disabledstate_rating %})). To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_rating#toc-managing-the-rating-disabled-state-in-reactive-forms).
+         *
+         * @default false
+         *
+         */
+        this.disabled = false;
+        /**
+         * Determines whether the Rating is in its read-only state ([see example]({% slug readonly_rating %})).
+         *
+         * @default false
+         *
+         */
+        this.readonly = false;
+        /**
+         * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the Rating.
+         *
+         * @default 0
+         *
+         */
+        this.tabindex = 0;
+        /**
+         * Sets the number of rating items ([see example]({% slug itemscount_rating %})).
+         *
+         * @default 5
+         *
+         */
+        this.itemsCount = 5;
+        /**
+         * Sets custom Rating SVG icon. It is the icon that is used for not selected/hovered state. [see example]({% slug icon_rating %}).
+         */
+        this.svgIcon = starIcon;
+        /**
+         * Sets custom Rating SVG icon. It is the icon that is used for selected/hovered state. [see example]({% slug icon_rating %}).
+         */
+        this.svgIconOutline = starOutlineIcon;
+        /**
+         * Fires each time the user selects a new value.
+         */
+        this.valueChange = new EventEmitter();
+        this.hostClass = true;
+        this.valueMin = 0;
+        this.ariaRole = 'slider';
+        /**
+         * @hidden
+         */
+        this.ratingItems = [];
+        this.ngChange = (_) => { };
+        this.ngTouched = () => { };
+        this._selection = 'continuous';
+        this._precision = 'item';
+        this.subscriptions = new Subscription();
+        validatePackage(packageMetadata);
+    }
+    /**
+     * The initial value of the Rating component.
+     * The component can use either NgModel or the `value` binding but not both of them at the same time.
+     *
+     */
+    set value(value) {
+        this._value = value;
+        this.updateRatingItems();
+    }
+    get value() {
+        return this._value;
+    }
+    /**
+     * Sets the selection mode of the Rating ([see example]({% slug selection_rating %})).
+     *
+     * @default 'continuous'
+     *
+     */
+    set selection(selection) {
+        this._selection = selection;
+        this.updateRatingItems();
+    }
+    get selection() {
+        return this._selection;
+    }
+    /**
+     * Determines the precision of the Rating ([see example]({% slug precision_rating %})).
+     *
+     * @default 'item'
+     *
+     */
+    set precision(precision) {
+        this._precision = precision;
+        this.updateRatingItems();
+    }
+    get precision() {
+        return this._precision;
+    }
+    get isControlInvalid() {
+        var _a, _b;
+        return (_b = ((_a = this.control) === null || _a === void 0 ? void 0 : _a.invalid)) === null || _b === void 0 ? void 0 : _b.toString();
+    }
+    get valueMax() {
+        return this.itemsCount;
+    }
+    get valueNow() {
+        return this.value;
+    }
+    ngOnInit() {
+        this.subscriptions.add(this.localizationService
+            .changes
+            .subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        }));
+        this.subscriptions.add(this.renderer.listen(this.element.nativeElement, 'blur', () => this.ngTouched()));
+        this.subscriptions.add(this.renderer.listen(this.element.nativeElement, 'keydown', event => this.onKeyDown(event)));
+        this.createRatingItems();
+    }
+    ngAfterViewInit() {
+        const items = this.element.nativeElement.querySelectorAll('.k-rating-item');
+        this.zone.runOutsideAngular(() => {
+            items.forEach((item, index) => this.subscriptions.add(this.renderer.listen(item, 'mousemove', (event) => this.onMouseMove(index, event))));
+        });
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    /**
+     * Focuses the Rating component.
+     */
+    focus() {
+        if (isDocumentAvailable() && !this.disabled) {
+            this.element.nativeElement.focus();
+        }
+    }
+    /**
+     * Blurs the Rating component.
+     */
+    blur() {
+        if (isDocumentAvailable()) {
+            this.element.nativeElement.blur();
+        }
+    }
+    /**
+     * @hidden
+     */
+    createRatingItems() {
+        for (let i = 0; i < this.itemsCount; i++) {
+            const item = {
+                title: this.isHalf(i, this.value) ? String(i + 0.5) : String(i + 1),
+                selected: this.isSelected(i, this.value),
+                selectedIndicator: false,
+                hovered: false,
+                half: this.isHalf(i, this.value)
+            };
+            this.ratingItems.push(item);
+        }
+    }
+    /**
+     * @hidden
+     */
+    onMouseEnter(event) {
+        this.rect = event.target.getBoundingClientRect();
+    }
+    /**
+     * @hidden
+     */
+    onMouseMove(value, event) {
+        const halfPrecision = this.precision === 'half';
+        const isFirstHalf = halfPrecision && this.isFirstHalf(this.rect, event.clientX);
+        this.zone.run(() => this.ratingItems.forEach((item, index) => {
+            item.title = (halfPrecision && value === index && isFirstHalf) ? String(index + 0.5) : String(index + 1);
+            item.selected = item.hovered = this.isSelected(index, value + 1);
+            item.selectedIndicator = this.isSelected(index, this.value);
+            item.half = (halfPrecision && value === index) ? isFirstHalf : false;
+        }));
+    }
+    /**
+     * @hidden
+     */
+    onMouseOut() {
+        this.rect = null;
+        this.updateRatingItems();
+    }
+    /**
+     * @hidden
+     * Called when the status of the component changes to or from `disabled`.
+     * Depending on the value, it enables or disables the appropriate DOM element.
+     *
+     * @param isDisabled
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    /**
+     * @hidden
+     */
+    changeValue(index, event) {
+        const rect = event.target.getBoundingClientRect();
+        const isFirstHalf = this.isFirstHalf(rect, event.clientX);
+        const value = (this.precision === 'half' && isFirstHalf) ? index + 0.5 : index + 1;
+        if (!areSame(this.value, value)) {
+            this.value = value;
+            this.ngChange(this.value);
+            this.valueChange.emit(this.value);
+            this.updateRatingItems();
+            this.cdr.markForCheck();
+        }
+    }
+    /**
+     * @hidden
+     */
+    updateRatingItems() {
+        this.ratingItems.forEach((item, index) => {
+            item.title = this.isHalf(index, this.value) ? String(index + 0.5) : String(index + 1);
+            item.selected = this.isSelected(index, this.value);
+            item.selectedIndicator = this.isSelected(index, this.value);
+            item.hovered = false;
+            item.half = this.isHalf(index, this.value);
+        });
+    }
+    /**
+     * @hidden
+     */
+    writeValue(value) {
+        this.value = value;
+        this.updateRatingItems();
+        this.cdr.markForCheck();
+    }
+    /**
+     * @hidden
+     */
+    registerOnChange(fn) {
+        this.ngChange = fn;
+    }
+    /**
+     * @hidden
+     */
+    registerOnTouched(fn) {
+        this.ngTouched = fn;
+    }
+    isSelected(index, value) {
+        return this.selection === 'single' ? index === Math.ceil(value - 1) : index <= Math.ceil(value - 1);
+    }
+    isHalf(index, value) {
+        return (this.precision === 'half' && (value > index) && (value < index + 1));
+    }
+    isFirstHalf(rect, clientX) {
+        const elementPosition = rect.x + (rect.width / 2);
+        return this.direction === 'ltr' ? clientX < elementPosition : clientX > elementPosition;
+    }
+    onKeyDown(event) {
+        const decreaseValue = () => {
+            if (this.value <= 0) {
+                return;
+            }
+            this.value = (this.precision === 'half') ? this.value - 0.5 : this.value - 1;
+            this.ngChange(this.value);
+            this.valueChange.emit(this.value);
+            this.updateRatingItems();
+            this.cdr.markForCheck();
+        };
+        const increaseValue = () => {
+            if (this.value >= this.itemsCount) {
+                return;
+            }
+            this.value = (this.precision === 'half') ? this.value + 0.5 : this.value + 1;
+            this.ngChange(this.value);
+            this.valueChange.emit(this.value);
+            this.updateRatingItems();
+            this.cdr.markForCheck();
+        };
+        const setMinValue = () => {
+            if (!areSame(this.value, this.valueMin)) {
+                this.value = this.valueMin;
+                this.ngChange(this.value);
+                this.valueChange.emit(this.value);
+                this.updateRatingItems();
+                this.cdr.markForCheck();
+            }
+        };
+        const setMaxValue = () => {
+            if (!areSame(this.value, this.valueMax)) {
+                this.value = this.valueMax;
+                this.ngChange(this.value);
+                this.valueChange.emit(this.value);
+                this.updateRatingItems();
+                this.cdr.markForCheck();
+            }
+        };
+        if (event.keyCode === Keys.ArrowDown) {
+            decreaseValue();
+        }
+        if (event.keyCode === Keys.ArrowLeft) {
+            if (this.direction === 'ltr') {
+                decreaseValue();
+            }
+            else {
+                increaseValue();
+            }
+        }
+        if (event.keyCode === Keys.ArrowUp) {
+            increaseValue();
+        }
+        if (event.keyCode === Keys.ArrowRight) {
+            if (this.direction === 'ltr') {
+                increaseValue();
+            }
+            else {
+                decreaseValue();
+            }
+        }
+        if (event.keyCode === Keys.Home) {
+            setMinValue();
+        }
+        if (event.keyCode === Keys.End) {
+            setMaxValue();
+        }
+    }
+}
+RatingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RatingComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+RatingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RatingComponent, selector: "kendo-rating", inputs: { disabled: "disabled", readonly: "readonly", tabindex: "tabindex", itemsCount: "itemsCount", value: "value", selection: "selection", precision: "precision", label: "label", icon: "icon", svgIcon: "svgIcon", svgIconOutline: "svgIconOutline" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.aria-disabled": "this.disabled", "class.k-disabled": "this.disabled", "attr.aria-readonly": "this.readonly", "class.k-readonly": "this.readonly", "attr.tabindex": "this.tabindex", "class.k-rating": "this.hostClass", "attr.dir": "this.direction", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-valuemin": "this.valueMin", "attr.aria-valuemax": "this.valueMax", "attr.aria-valuenow": "this.valueNow", "attr.role": "this.ariaRole" } }, providers: [
+        LocalizationService,
+        { provide: L10N_PREFIX, useValue: 'kendo.rating' },
+        {
+            multi: true,
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => RatingComponent) /* eslint-disable-line*/
+        },
+        {
+            provide: KendoInput,
+            useExisting: forwardRef(() => RatingComponent)
+        }
+    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: RatingItemTemplateDirective, descendants: true }, { propertyName: "hoveredItemTemplate", first: true, predicate: RatingHoveredItemTemplateDirective, descendants: true }, { propertyName: "selectedItemTemplate", first: true, predicate: RatingSelectedItemTemplateDirective, descendants: true }], exportAs: ["kendoRating"], ngImport: i0, template: `
+        <span class="k-rating-container">
+            <span
+                *ngFor="let item of ratingItems; index as i"
+                class="k-rating-item"
+                [title]="item.title"
+                [ngClass]="{
+                    'k-selected': item.selected || item.selectedIndicator,
+                    'k-hover': item.hovered
+                }"
+                (mouseenter)="onMouseEnter($event)"
+                (mouseout)="onMouseOut()"
+                (click)="changeValue(i, $event)"
+            >
+                <ng-container *ngIf="!item.half">
+                    <ng-container *ngIf="!itemTemplate">
+                        <kendo-icon-wrapper
+                            *ngIf="!icon"
+                            size="xlarge"
+                            [name]="item.selected || item.hovered ? 'star' : 'star-outline'"
+                            [svgIcon]="item.selected || item.hovered ? svgIcon : svgIconOutline"
+                        >
+                        </kendo-icon-wrapper>
+
+                        <kendo-icon-wrapper
+                            *ngIf="icon"
+                            size="xlarge"
+                            [name]="item.selected || item.hovered ? icon : icon + '-outline'"
+                        >
+                        </kendo-icon-wrapper>
+                    </ng-container>
+
+                    <ng-template
+                        *ngIf="itemTemplate && (!item.selected && !item.hovered)"
+                        [ngTemplateOutlet]="itemTemplate?.templateRef"
+                    >
+                    </ng-template>
+
+                    <ng-template
+                        *ngIf="hoveredItemTemplate && item.hovered"
+                        [ngTemplateOutlet]="hoveredItemTemplate?.templateRef"
+                    >
+                    </ng-template>
+
+                    <ng-template
+                        *ngIf="selectedItemTemplate && (item.selected && !item.hovered)"
+                        [ngTemplateOutlet]="selectedItemTemplate?.templateRef"
+                    >
+                    </ng-template>
+                </ng-container>
+
+                <ng-container *ngIf="item.half">
+                    <ng-container *ngIf="!itemTemplate">
+                        <span class="k-rating-precision-complement">
+                            <kendo-icon-wrapper
+                                *ngIf="!icon"
+                                size="xlarge"
+                                [name]="'star-outline'"
+                                [svgIcon]="svgIconOutline"
+                            >
+                            </kendo-icon-wrapper>
+
+                            <kendo-icon-wrapper
+                                *ngIf="icon"
+                                size="xlarge"
+                                [name]="icon + '-outline'"
+                            >
+                            </kendo-icon-wrapper>
+                        </span>
+
+                        <span
+                            class="k-rating-precision-part"
+                            [ngStyle]="{'clipPath': direction === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)'}"
+                        >
+                            <kendo-icon-wrapper
+                                *ngIf="!icon"
+                                size="xlarge"
+                                [name]="'star'"
+                                [svgIcon]="svgIcon"
+                            >
+                            </kendo-icon-wrapper>
+
+                            <kendo-icon-wrapper
+                                *ngIf="icon"
+                                size="xlarge"
+                                [name]="icon"
+                            >
+                            </kendo-icon-wrapper>
+                        </span>
+                    </ng-container>
+
+                    <span
+                        class="k-rating-precision-complement"
+                    >
+                        <ng-template
+                            [ngTemplateOutlet]="itemTemplate?.templateRef"
+                        >
+                        </ng-template>
+                    </span>
+
+                    <span
+                        *ngIf="hoveredItemTemplate && item.hovered"
+                        class="k-rating-precision-part"
+                        [ngStyle]="{'clipPath': direction === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)'}"
+                    >
+                        <ng-template
+                            [ngTemplateOutlet]="hoveredItemTemplate?.templateRef"
+                        >
+                        </ng-template>
+                    </span>
+
+                    <span
+                        *ngIf="selectedItemTemplate && (item.selected && !item.hovered)"
+                        class="k-rating-precision-part"
+                        [ngStyle]="{'clipPath': direction === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)'}"
+                    >
+                        <ng-template
+                            [ngTemplateOutlet]="selectedItemTemplate?.templateRef"
+                        >
+                        </ng-template>
+                    </span>
+
+                    <span [style.width.px]="24" [style.height.px]="24" [style.display]="'block'"></span>
+                </ng-container>
+            </span>
+        </span>
+
+        <span 
+            *ngIf="label"
+            class="k-rating-label"
+        >{{ label }}</span>
+  `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RatingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoRating',
+                    providers: [
+                        LocalizationService,
+                        { provide: L10N_PREFIX, useValue: 'kendo.rating' },
+                        {
+                            multi: true,
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RatingComponent) /* eslint-disable-line*/
+                        },
+                        {
+                            provide: KendoInput,
+                            useExisting: forwardRef(() => RatingComponent)
+                        }
+                    ],
+                    selector: 'kendo-rating',
+                    template: `
+        <span class="k-rating-container">
+            <span
+                *ngFor="let item of ratingItems; index as i"
+                class="k-rating-item"
+                [title]="item.title"
+                [ngClass]="{
+                    'k-selected': item.selected || item.selectedIndicator,
+                    'k-hover': item.hovered
+                }"
+                (mouseenter)="onMouseEnter($event)"
+                (mouseout)="onMouseOut()"
+                (click)="changeValue(i, $event)"
+            >
+                <ng-container *ngIf="!item.half">
+                    <ng-container *ngIf="!itemTemplate">
+                        <kendo-icon-wrapper
+                            *ngIf="!icon"
+                            size="xlarge"
+                            [name]="item.selected || item.hovered ? 'star' : 'star-outline'"
+                            [svgIcon]="item.selected || item.hovered ? svgIcon : svgIconOutline"
+                        >
+                        </kendo-icon-wrapper>
+
+                        <kendo-icon-wrapper
+                            *ngIf="icon"
+                            size="xlarge"
+                            [name]="item.selected || item.hovered ? icon : icon + '-outline'"
+                        >
+                        </kendo-icon-wrapper>
+                    </ng-container>
+
+                    <ng-template
+                        *ngIf="itemTemplate && (!item.selected && !item.hovered)"
+                        [ngTemplateOutlet]="itemTemplate?.templateRef"
+                    >
+                    </ng-template>
+
+                    <ng-template
+                        *ngIf="hoveredItemTemplate && item.hovered"
+                        [ngTemplateOutlet]="hoveredItemTemplate?.templateRef"
+                    >
+                    </ng-template>
+
+                    <ng-template
+                        *ngIf="selectedItemTemplate && (item.selected && !item.hovered)"
+                        [ngTemplateOutlet]="selectedItemTemplate?.templateRef"
+                    >
+                    </ng-template>
+                </ng-container>
+
+                <ng-container *ngIf="item.half">
+                    <ng-container *ngIf="!itemTemplate">
+                        <span class="k-rating-precision-complement">
+                            <kendo-icon-wrapper
+                                *ngIf="!icon"
+                                size="xlarge"
+                                [name]="'star-outline'"
+                                [svgIcon]="svgIconOutline"
+                            >
+                            </kendo-icon-wrapper>
+
+                            <kendo-icon-wrapper
+                                *ngIf="icon"
+                                size="xlarge"
+                                [name]="icon + '-outline'"
+                            >
+                            </kendo-icon-wrapper>
+                        </span>
+
+                        <span
+                            class="k-rating-precision-part"
+                            [ngStyle]="{'clipPath': direction === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)'}"
+                        >
+                            <kendo-icon-wrapper
+                                *ngIf="!icon"
+                                size="xlarge"
+                                [name]="'star'"
+                                [svgIcon]="svgIcon"
+                            >
+                            </kendo-icon-wrapper>
+
+                            <kendo-icon-wrapper
+                                *ngIf="icon"
+                                size="xlarge"
+                                [name]="icon"
+                            >
+                            </kendo-icon-wrapper>
+                        </span>
+                    </ng-container>
+
+                    <span
+                        class="k-rating-precision-complement"
+                    >
+                        <ng-template
+                            [ngTemplateOutlet]="itemTemplate?.templateRef"
+                        >
+                        </ng-template>
+                    </span>
+
+                    <span
+                        *ngIf="hoveredItemTemplate && item.hovered"
+                        class="k-rating-precision-part"
+                        [ngStyle]="{'clipPath': direction === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)'}"
+                    >
+                        <ng-template
+                            [ngTemplateOutlet]="hoveredItemTemplate?.templateRef"
+                        >
+                        </ng-template>
+                    </span>
+
+                    <span
+                        *ngIf="selectedItemTemplate && (item.selected && !item.hovered)"
+                        class="k-rating-precision-part"
+                        [ngStyle]="{'clipPath': direction === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)'}"
+                    >
+                        <ng-template
+                            [ngTemplateOutlet]="selectedItemTemplate?.templateRef"
+                        >
+                        </ng-template>
+                    </span>
+
+                    <span [style.width.px]="24" [style.height.px]="24" [style.display]="'block'"></span>
+                </ng-container>
+            </span>
+        </span>
+
+        <span 
+            *ngIf="label"
+            class="k-rating-label"
+        >{{ label }}</span>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { itemTemplate: [{
+                type: ContentChild,
+                args: [RatingItemTemplateDirective]
+            }], hoveredItemTemplate: [{
+                type: ContentChild,
+                args: [RatingHoveredItemTemplateDirective]
+            }], selectedItemTemplate: [{
+                type: ContentChild,
+                args: [RatingSelectedItemTemplateDirective]
+            }], disabled: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }, {
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }], readonly: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.aria-readonly']
+            }, {
+                type: HostBinding,
+                args: ['class.k-readonly']
+            }], tabindex: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], itemsCount: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], precision: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], svgIcon: [{
+                type: Input
+            }], svgIconOutline: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-rating']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], isControlInvalid: [{
+                type: HostBinding,
+                args: ['attr.aria-invalid']
+            }], valueMin: [{
+                type: HostBinding,
+                args: ['attr.aria-valuemin']
+            }], valueMax: [{
+                type: HostBinding,
+                args: ['attr.aria-valuemax']
+            }], valueNow: [{
+                type: HostBinding,
+                args: ['attr.aria-valuenow']
+            }], ariaRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }] } });
+
+const PUBLIC_DIRECTIVES = [
+    RatingComponent,
+    RatingItemTemplateDirective,
+    RatingHoveredItemTemplateDirective,
+    RatingSelectedItemTemplateDirective
+];
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the Rating component.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the Rating module
+ * import { RatingModule } from '@progress/kendo-angular-inputs';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, RatingModule], // import Rating module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+class RatingModule {
+}
+RatingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RatingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RatingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RatingModule, declarations: [RatingComponent,
+        RatingItemTemplateDirective,
+        RatingHoveredItemTemplateDirective,
+        RatingSelectedItemTemplateDirective], imports: [CommonModule, IconsModule], exports: [RatingComponent,
+        RatingItemTemplateDirective,
+        RatingHoveredItemTemplateDirective,
+        RatingSelectedItemTemplateDirective] });
+RatingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RatingModule, imports: [[CommonModule, IconsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RatingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PUBLIC_DIRECTIVES],
+                    exports: [PUBLIC_DIRECTIVES],
+                    imports: [CommonModule, IconsModule]
+                }]
+        }] });
+
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Inputs components.
@@ -15618,7 +16424,8 @@ InputsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         CheckBoxModule,
         RadioButtonModule,
         FormFieldModule,
-        SignatureModule] });
+        SignatureModule,
+        RatingModule] });
 InputsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: InputsModule, imports: [[CommonModule], TextAreaModule,
         TextBoxModule,
         SliderModule,
@@ -15630,7 +16437,8 @@ InputsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
         CheckBoxModule,
         RadioButtonModule,
         FormFieldModule,
-        SignatureModule] });
+        SignatureModule,
+        RatingModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: InputsModule, decorators: [{
             type: NgModule,
             args: [{
@@ -15646,7 +16454,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         CheckBoxModule,
                         RadioButtonModule,
                         FormFieldModule,
-                        SignatureModule
+                        SignatureModule,
+                        RatingModule
                     ],
                     imports: [CommonModule]
                 }]
@@ -15668,5 +16477,5 @@ class SwitchFocusEvent {
  * Generated bundle index. Do not edit.
  */
 
-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, 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 };
+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 };