igniteui-webcomponents
Version:
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.
172 lines (171 loc) • 5.92 kB
TypeScript
import { LitElement } from 'lit';
import type { Constructor } from '../common/mixins/constructor.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>;
/**
* A rating component that allows users to view and provide ratings using customizable symbols.
* It supports fractional values, hover previews, keyboard navigation, single-selection mode,
* and integrates with forms as a number input.
*
* @example
* ```html
* <!-- Basic rating -->
* <igc-rating value="3" max="5" label="Rate this product"></igc-rating>
* ```
*
* @example
* ```html
* <!-- Half-star rating with hover preview -->
* <igc-rating step="0.5" hover-preview value-format="{0} out of {1} stars"></igc-rating>
* ```
*
* @example
* ```html
* <!-- Custom symbols via projected rating symbols -->
* <igc-rating>
* <igc-rating-symbol>
* <igc-icon name="heart_filled" collection="default"></igc-icon>
* <igc-icon name="heart_outlined" collection="default" slot="empty"></igc-icon>
* </igc-rating-symbol>
* <igc-rating-symbol>
* <igc-icon name="heart_filled" collection="default"></igc-icon>
* <igc-icon name="heart_outlined" collection="default" slot="empty"></igc-icon>
* </igc-rating-symbol>
* </igc-rating>
* ```
*
* @element igc-rating
*
* @slot symbol - Slot for projecting custom `igc-rating-symbol` elements. When used, the number of symbols determines the `max` value.
* @slot value-label - Slot for custom content displayed alongside the rating value.
*
* @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 readonly _slots: import("../common/controllers/slot.js").SlotController<"symbol" | "[default]" | "value-label">;
protected readonly _formValue: import("../common/mixins/forms/form-value.js").FormValue<number>;
private _max;
private _step;
private _single;
private _symbols;
private _container?;
private _hoverValue;
private _hoverState;
private get _isInteractive();
private get _hasProjectedSymbols();
private get _valueText();
/**
* 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
* @default false
*/
allowReset: boolean;
constructor();
protected firstUpdated(): void;
protected updated(): void;
private _handleClick;
private _handlePointerMove;
private _handleSlotChange;
private _handleHoverEnabled;
private _handleHoverDisabled;
private _emitValueUpdate;
private _calcNewValue;
private _round;
private _updateProjectedSymbols;
private _clipSymbol;
/**
* 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;
private _renderSymbols;
protected render(): import("lit-html").TemplateResult<1>;
}
declare global {
interface HTMLElementTagNameMap {
'igc-rating': IgcRatingComponent;
}
}
export {};