import { CSSResultGroup, PropertyValues } from "lit"; import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/random-content/random-content.d.ts /** * * * @summary Randomly displays one or more elements from a list. * @tag sigvelo-random-content * @documentation https://design-system.sigvelo.com/docs/components/random-content * @status stable * @since 1.0 * * @slot - A pool of items that will be randomly displayed. Each item _must_ be a direct descendant of the host element. * * @example Default * Perfect for showcasing rotating testimonials, featured products, helpful tips, or inspirational quotes, keeping content fresh and engaging without overwhelming users or repeating the same material. * * ```html * * * *
* "The new scratching post is perfect! I sharpen my claws on it every morning." * – Meowy McGee *
* * * *
* "Those catnip toys make me go absolutely bonkers! * – Princess Mittens *
* * * *
* "Finally, a food that meets my refined palate." * – Sir Fluffington *
* * * *
* "The automatic feeder ensures my 3 AM breakfast is always on time. * – Shadow *
* * * *
* "One day I'll catch that red dot, mark my words." * – Captain Paws *
* * * *
* "I've been sleeping 20 hours a day instead of my usual 18!" * – Luna Belle *
* * * *
* "I no longer need to demand fresh water from the tap every hour." * – Duchess Whiskertons *
* * * *
* "I survey my kingdom from the top of the fridge daily." * – King Mewington III *
* * * * Randomize * * * * * ``` * * @example Providing content * You can provide virtually any type of HTML element, as long as they are _direct descendants_. Simply slot the elements into the host as shown below. * * The host element uses `display: contents` by default, which allows parent styles to pass through to the child elements, essentially making the host element "invisible" from a layout perspective. * * ```html * *
A
*
B
*
C
*
D
* * ``` * * @example Setting the number of items * Use the `items` attribute to display multiple random items at once. This is useful for showing a rotating selection of content like featured products or testimonials. * * ```html *
* *
1
*
2
*
3
*
4
*
5
*
6
*
7
*
8
*
9
*
10
* * * *
* * * * * ``` * * @example Styling the container * The component uses `display: contents` by default, but you can override this behavior and use a flex or grid layout if you prefer. * * ```html * * An orange kitten meows while perched on a stone wall * A multicolored cat walking through the grass stops to look at the camera * A white fluffy kitten lays comfortably on the arm of a chair * A gray tabby lays in a bed and looks out past the camera * A black and white kitten lays on its bed and looks at the camera * A young gray tabby lays on the steps and yawns * A gray cat lays in the light of a window at night * A Himalayan cat with bright blue eyes smells the air * A tabby looks into the distance on a blue sky backdrop * An orange and white cat lays in a wicker basket * * * * ``` * * You can render random content inline by setting `display: inline`. * * ```html *
* I'm just a * * cat * kitten * fluffy beast * purr machine * * on a mission! *

* Randomize *
* * * * * ``` * * @example Showing items in sequence * You can set the `mode` attribute to `sequence` to display items in order rather than randomly. Each time you call `randomize()`, the component advances to the next set of items in the sequence. * * ```html *
* *
1
*
2
*
3
*
4
*
5
*
6
*
7
*
8
*
9
* * * Next Set *
* * * * * ``` */ declare class SigveloRandomContent extends SigveloElement { static styles: CSSResultGroup; private currentIndices; private sequencePosition; /** The number of items to show. */ items: number; /** * The selection mode. The default is 'unique', which ensures different items are shown after calling `randomize()`, * when possible. Use `random` for true randomization or `sequence` to show the next set of items based on their DOM * position. */ mode: "unique" | "random" | "sequence"; firstUpdated(): void; updated(changedProperties: PropertyValues): void; /** Applies selection based on the mode and items properties. */ private applySelection; /** Gets truly random indices with possible duplicates from previous selection. */ private getRandomIndices; /** Gets sequence indices, advancing position on manual randomize. */ private getSequenceIndices; /** Gets unique random indices, avoiding excluded indices if possible. */ private getUniqueRandomIndices; /** Rotates the visible item(s) based on the selected mode. */ randomize(): void; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-random-content": SigveloRandomContent; } } //#endregion export { SigveloRandomContent as t };