@progress/kendo-angular-inputs
Version:
Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te
184 lines (180 loc) • 6.67 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { SVGIcon } from '@progress/kendo-svg-icons';
import { RatingSelectionMode } from './models/selection';
import { RatingItem } from './models/rating-item.interface';
import { RatingItemTemplateDirective } from './directives/rating-item.directive';
import { RatingHoveredItemTemplateDirective } from './directives/rating-hovered-item.directive';
import { RatingSelectedItemTemplateDirective } from './directives/rating-selected-item.directive';
import { RatingPrecision } from './models/precision';
import * as i0 from "@angular/core";
/**
* Represents the Kendo UI Rating component for Angular.
* Use this component to let users select a rating value.
*
* @example
* ```html
* <kendo-rating [itemsCount]="5" [(value)]="ratingValue"></kendo-rating>
* ```
*/
export declare class RatingComponent implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor {
element: ElementRef;
private renderer;
private localizationService;
private cdr;
private zone;
itemTemplate: RatingItemTemplateDirective;
hoveredItemTemplate: RatingHoveredItemTemplateDirective;
selectedItemTemplate: RatingSelectedItemTemplateDirective;
/**
* When `true`, disables the Rating ([see example]({% slug disabledstate_rating %})).
* To disable the component in reactive forms, see [Forms Support](slug:formssupport_rating#toc-managing-the-rating-disabled-state-in-reactive-forms).
*
* @default false
*/
disabled: boolean;
/**
* When `true`, sets the Rating to read-only ([see example]({% slug readonly_rating %})).
*
* @default false
*/
readonly: boolean;
/**
* Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the Rating.
*
* @default 0
*/
tabindex: number;
/**
* Sets the number of Rating items ([see example]({% slug itemscount_rating %})).
*
* @default 5
*/
itemsCount: number;
/**
* Sets the initial value of the Rating component.
* Use either `ngModel` or the `value` binding, but not both at the same time.
*/
set value(value: number);
get value(): number;
/**
* Sets the selection mode of the Rating ([see example]({% slug selection_rating %})).
*
* @default 'continuous'
*/
set selection(selection: RatingSelectionMode);
get selection(): RatingSelectionMode;
/**
* Sets the precision of the Rating ([see example]({% slug precision_rating %})).
*
* @default 'item'
*/
set precision(precision: RatingPrecision);
get precision(): RatingPrecision;
/**
* Sets the label text for the Rating. The text renders in a `<span>` element ([see example]({% slug label_rating %})).
*/
label: string;
/**
* Sets a custom font icon for the Rating items ([see example]({% slug icon_rating %})).
*/
icon: string;
/**
* Sets a custom SVG icon for the selected or hovered state of the Rating items ([see example]({% slug icon_rating %})).
*/
svgIcon: SVGIcon;
/**
* Sets a custom SVG icon for the default state of the Rating items when not hovered or selected ([see example]({% slug icon_rating %})).
*/
svgIconOutline: SVGIcon;
/**
* Fires when the user selects a new value.
*/
valueChange: EventEmitter<number>;
hostClass: boolean;
direction: string;
get isControlInvalid(): string;
valueMin: number;
get valueMax(): number;
get valueNow(): number;
ariaRole: string;
/**
* @hidden
*/
ratingItems: RatingItem[];
private control;
private ngChange;
private ngTouched;
private rect;
private _value;
private _selection;
private _precision;
private subscriptions;
constructor(element: ElementRef, renderer: Renderer2, localizationService: LocalizationService, cdr: ChangeDetectorRef, zone: NgZone);
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
/**
* Focuses the Rating component.
*/
focus(): void;
/**
* Blurs the Rating component.
*/
blur(): void;
/**
* @hidden
*/
private createRatingItems;
/**
* @hidden
*/
onMouseEnter(event: any): void;
/**
* @hidden
*/
onMouseMove(value: number, event: any): void;
/**
* @hidden
*/
onMouseOut(): void;
/**
* @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: boolean): void;
/**
* @hidden
*/
changeValue(index: number, event: any): void;
/**
* @hidden
*/
updateRatingItems(): void;
/**
* @hidden
*/
writeValue(value: number): void;
/**
* @hidden
*/
registerOnChange(fn: () => any): void;
/**
* @hidden
*/
registerOnTouched(fn: () => any): void;
private isSelected;
private isHalf;
private isFirstHalf;
private onKeyDown;
static ɵfac: i0.ɵɵFactoryDeclaration<RatingComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<RatingComponent, "kendo-rating", ["kendoRating"], { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "itemsCount": { "alias": "itemsCount"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selection": { "alias": "selection"; "required": false; }; "precision": { "alias": "precision"; "required": false; }; "label": { "alias": "label"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "svgIconOutline": { "alias": "svgIconOutline"; "required": false; }; }, { "valueChange": "valueChange"; }, ["itemTemplate", "hoveredItemTemplate", "selectedItemTemplate"], never, true, never>;
}