/** * @license * Copyright 2017 Google LLC * SPDX-License-Identifier: BSD-3-Clause */ import { ChildPart, noChange } from '../lit-html.js'; import { Directive, PartInfo } from '../directive.js'; export type KeyFn = (item: T, index: number) => unknown; export type ItemTemplate = (item: T, index: number) => unknown; declare class RepeatDirective extends Directive { private _itemKeys?; constructor(partInfo: PartInfo); private _getValuesAndKeys; render(items: Iterable, template: ItemTemplate): Array; render(items: Iterable, keyFn: KeyFn | ItemTemplate, template: ItemTemplate): Array; update(containerPart: ChildPart, [items, keyFnOrTemplate, template]: [ Iterable, KeyFn | ItemTemplate, ItemTemplate ]): unknown[] | typeof noChange; } export interface RepeatDirectiveFn { (items: Iterable, keyFnOrTemplate: KeyFn | ItemTemplate, template?: ItemTemplate): unknown; (items: Iterable, template: ItemTemplate): unknown; (items: Iterable, keyFn: KeyFn | ItemTemplate, template: ItemTemplate): unknown; } /** * A directive that repeats a series of values (usually `TemplateResults`) * generated from an iterable, and updates those items efficiently when the * iterable changes based on user-provided `keys` associated with each item. * * Note that if a `keyFn` is provided, strict key-to-DOM mapping is maintained, * meaning previous DOM for a given key is moved into the new position if * needed, and DOM will never be reused with values for different keys (new DOM * will always be created for new keys). This is generally the most efficient * way to use `repeat` since it performs minimum unnecessary work for insertions * and removals. * * The `keyFn` takes two parameters, the item and its index, and returns a unique key value. * * ```js * html` *
    * ${repeat(this.items, (item) => item.id, (item, index) => { * return html`
  1. ${index}: ${item.name}
  2. `; * })} *
* ` * ``` * * **Important**: If providing a `keyFn`, keys *must* be unique for all items in a * given call to `repeat`. The behavior when two or more items have the same key * is undefined. * * If no `keyFn` is provided, this directive will perform similar to mapping * items to values, and DOM will be reused against potentially different items. */ export declare const repeat: RepeatDirectiveFn; /** * The type of the class that powers this directive. Necessary for naming the * directive's return type. */ export type { RepeatDirective }; //# sourceMappingURL=repeat.d.ts.map