import { CustomElement } from '../../../Abstracts/CustomElement'; import type { IItemsElementProps } from './IItemsElementProps'; /** * Items - An abstract foundation for components that display and manage collections of data items. * * @description * The ItemsElement serves as the base class for components that work with arrays of data objects, * providing a reactive source property and change detection mechanisms. This element is designed * to be extended by concrete implementations like lists, grids, carousels, data tables, or any * component that needs to render and manage collections of items. It handles source data updates, * provides lifecycle hooks for reacting to data changes, and establishes a consistent pattern * for item-based components throughout the design system. The generic type parameter allows * type-safe item handling for different data structures. * * @name Items * @category Selectors * * @fires changed {PropertyChangedEvent} - Fired when any property changes * @fires connected {ConnectedEvent} - Fired when the element is connected to the DOM * * @example * Extending for a custom list component: * ```typescript * interface IUser { * id: string; * name: string; * email: string; * } * * class UserListElement extends ItemsElement { * protected override onSourceChanged(prev: Array, next: Array): void { * super.onSourceChanged(prev, next); * this.renderUsers(next); * } * } * ``` * * @example * Setting and updating the source data: * ```typescript * const list = new MyItemsElement(); * list.source = [ * { id: '1', name: 'Product A', price: 29.99 }, * { id: '2', name: 'Product B', price: 39.99 } * ]; * ``` * * @example * Reacting to source changes: * ```typescript * class DataGridElement extends ItemsElement { * protected override onSourceChanged(prev: Array, next: Array): void { * super.onSourceChanged(prev, next); * console.log(`Items changed from ${prev.length} to ${next.length}`); * this.invalidateLayout(); * } * } * ``` * * @example * Type-safe item access: * ```typescript * interface ITask { * id: number; * title: string; * completed: boolean; * } * * const taskList = new TaskListElement(); * taskList.source = tasks; * const firstTask = taskList.source[0]; // Fully typed as ITask * ``` * * @public * @abstract */ export declare abstract class ItemsElement extends CustomElement implements IItemsElementProps { private _source; /** * @protected */ constructor(); /** * Gets or sets the `source` property. * * @public */ get source(): Array; set source(value: Array); /** * This method is invoked when the `source` property is changed. * * @protected * @virtual * @param prev - The old value of the `source` property. * @param next - The new value of the `source` property. */ protected onSourceChanged(prev: Array, next: Array): void; } //# sourceMappingURL=ItemsElement.d.ts.map