igniteui-webcomponents/components/rating/rating.d.ts

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

import { LitElement } from 'lit';
import type { Constructor } from '../common/mixins/constructor.js';
import { type FormValue } from '../common/mixins/forms/form-value.js';
import IgcRatingSymbolComponent from './rating-symbol.js';
export interface IgcRatingComponentEventMap {
    igcChange: CustomEvent<number>;
    igcHover: CustomEvent<number>;
}
declare const IgcRatingComponent_base: Constructor<import("../common/mixins/forms/types.js").FormAssociatedElementInterface> & Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcRatingComponentEventMap>> & Constructor<LitElement>;
/**
 * Rating provides insight regarding others' opinions and experiences,
 * and can allow the user to submit a rating of their own
 *
 * @element igc-rating
 *
 * @fires igcChange - Emitted when the value of the control changes.
 * @fires igcHover - Emitted when hover is enabled and the user mouses over a symbol of the rating.
 *
 * @csspart base - The main wrapper which holds all of the rating elements.
 * @csspart label - The label part.
 * @csspart value-label - The value label part.
 * @csspart symbols - A wrapper for all rating symbols.
 * @csspart symbol - The part of the encapsulated default symbol.
 * @csspart full - The part of the encapsulated full symbols.
 * @csspart empty - The part of the encapsulated empty symbols.
 *
 * @cssproperty --symbol-size - The size of the symbols.
 * @cssproperty --symbol-full-color - The color of the filled symbol.
 * @cssproperty --symbol-empty-color - The color of the empty symbol.
 * @cssproperty --symbol-full-filter - The filter(s) used for the filled symbol.
 * @cssproperty --symbol-empty-filter - The filter(s) used for the empty symbol.
 */
export default class IgcRatingComponent extends IgcRatingComponent_base {
    static readonly tagName = "igc-rating";
    static styles: import("lit").CSSResult[];
    static register(): void;
    protected _formValue: FormValue<number>;
    private _max;
    private _step;
    private _single;
    protected ratingSymbols: IgcRatingSymbolComponent[];
    protected container: HTMLElement;
    protected valueLabel: Node[];
    protected hoverValue: number;
    protected hoverState: boolean;
    protected get isInteractive(): boolean;
    protected get hasProjectedSymbols(): boolean;
    protected get valueText(): string;
    /**
     * The maximum value for the rating.
     *
     * If there are projected symbols, the maximum value will be resolved
     * based on the number of symbols.
     * @attr max
     * @default 5
     */
    set max(value: number);
    get max(): number;
    /**
     * The minimum value change allowed.
     *
     * Valid values are in the interval between 0 and 1 inclusive.
     * @attr step
     * @default 1
     */
    set step(value: number);
    get step(): number;
    /**
     * The label of the control.
     * @attr label
     */
    label: string;
    /**
     * A format string which sets aria-valuetext. Instances of '{0}' will be replaced
     * with the current value of the control and instances of '{1}' with the maximum value for the control.
     *
     * Important for screen-readers and useful for localization.
     * @attr value-format
     */
    valueFormat: string;
    /**
     * The current value of the component
     * @attr value
     * @default 0
     */
    set value(number: number);
    get value(): number;
    /**
     * Sets hover preview behavior for the component
     * @attr hover-preview
     */
    hoverPreview: boolean;
    /**
     * Makes the control a readonly field.
     * @attr readonly
     */
    readOnly: boolean;
    /**
     * Toggles single selection visual mode.
     * @attr single
     * @default false
     */
    set single(value: boolean);
    get single(): boolean;
    /**
     * Whether to reset the rating when the user selects the same value.
     * @attr allow-reset
     */
    allowReset: boolean;
    constructor();
    protected firstUpdated(): Promise<void>;
    protected handleClick({ clientX }: PointerEvent): void;
    protected handlePointerMove({ clientX }: PointerEvent): void;
    protected emitValueUpdate(value: number): void;
    protected handleSlotChange(): void;
    protected handleHoverEnabled(): void;
    protected handleHoverDisabled(): void;
    protected calcNewValue(x: number): number;
    protected round(value: number): number;
    protected clipSymbol(index: number, isLTR?: boolean): {
        backward: string;
        forward: string;
    };
    /**
     * Increments the value of the control by `n` steps multiplied by the
     * step factor.
     */
    stepUp(n?: number): void;
    /**
     * Decrements the value of the control by `n` steps multiplied by
     * the step factor.
     */
    stepDown(n?: number): void;
    protected renderSymbols(): Generator<import("lit-html").TemplateResult<1>, void, unknown>;
    protected clipProjected(): void;
    protected render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'igc-rating': IgcRatingComponent;
    }
}
export {};