nebula/pkg/wa/animated-image.templ

// Code generated by wa-generator. DO NOT EDIT.
// Source: Web Awesome wa-animated-image

package wa

import (
	"github.com/a-h/templ"
)

// A component for displaying animated GIFs and WEBPs that play and pause on interaction.
//
// Web Awesome component: <wa-animated-image>

// AnimatedImageProps holds all properties for the wa-animated-image component
type AnimatedImageProps struct {
	// The path to the image to load.
	Src string `attr:"src"`
	// A description of the image used by assistive devices.
	Alt string `attr:"alt"`
	// Plays the animation. When this attribute is remove, the animation will pause.
	Play bool `attr:"play"`

	// Events
	// Emitted when the image loads successfully.
	OnLoad string `attr:"x-on:wa-load"`
	// Emitted when the image fails to load.
	OnError string `attr:"x-on:wa-error"`

	// Slots contains named slot content
	Slots AnimatedImageSlots

	// Attrs contains additional HTML attributes
	Attrs templ.Attributes
}

// AnimatedImageSlots holds named slot content for the component
type AnimatedImageSlots struct {
	// Optional play icon to use instead of the default. Works best with <wa-icon>.
	PlayIcon templ.Component
	// Optional pause icon to use instead of the default. Works best with <wa-icon>.
	PauseIcon templ.Component
}

// AnimatedImageBuilder provides a fluent API for constructing AnimatedImageProps
type AnimatedImageBuilder struct {
	props AnimatedImageProps
}

// NewAnimatedImage creates a new builder for wa-animated-image
func NewAnimatedImage() *AnimatedImageBuilder {
	return &AnimatedImageBuilder{}
}

// Src sets the src attribute
// The path to the image to load.
func (b *AnimatedImageBuilder) Src(v string) *AnimatedImageBuilder {
	b.props.Src = v
	return b
}

// Alt sets the alt attribute
// A description of the image used by assistive devices.
func (b *AnimatedImageBuilder) Alt(v string) *AnimatedImageBuilder {
	b.props.Alt = v
	return b
}

// Play sets the play attribute
// Plays the animation. When this attribute is remove, the animation will pause.
func (b *AnimatedImageBuilder) Play(v bool) *AnimatedImageBuilder {
	b.props.Play = v
	return b
}

// OnLoad sets the handler for wa-load event
// Emitted when the image loads successfully.
func (b *AnimatedImageBuilder) OnLoad(handler string) *AnimatedImageBuilder {
	b.props.OnLoad = handler
	return b
}

// OnError sets the handler for wa-error event
// Emitted when the image fails to load.
func (b *AnimatedImageBuilder) OnError(handler string) *AnimatedImageBuilder {
	b.props.OnError = handler
	return b
}

// PlayIconSlot sets the play-icon slot content
// Optional play icon to use instead of the default. Works best with <wa-icon>.
func (b *AnimatedImageBuilder) PlayIconSlot(c templ.Component) *AnimatedImageBuilder {
	b.props.Slots.PlayIcon = c
	return b
}

// PauseIconSlot sets the pause-icon slot content
// Optional pause icon to use instead of the default. Works best with <wa-icon>.
func (b *AnimatedImageBuilder) PauseIconSlot(c templ.Component) *AnimatedImageBuilder {
	b.props.Slots.PauseIcon = c
	return b
}

// Attr adds a custom HTML attribute
func (b *AnimatedImageBuilder) Attr(name, value string) *AnimatedImageBuilder {
	if b.props.Attrs == nil {
		b.props.Attrs = templ.Attributes{}
	}
	b.props.Attrs[name] = value
	return b
}

// Attrs merges multiple attributes
func (b *AnimatedImageBuilder) Attrs(attrs templ.Attributes) *AnimatedImageBuilder {
	if b.props.Attrs == nil {
		b.props.Attrs = templ.Attributes{}
	}
	for k, v := range attrs {
		b.props.Attrs[k] = v
	}
	return b
}

// Props returns the built properties
func (b *AnimatedImageBuilder) Props() AnimatedImageProps {
	return b.props
}

// Build returns the props (alias for Props for semantic clarity)
func (b *AnimatedImageBuilder) Build() AnimatedImageProps {
	return b.props
}

// AnimatedImage renders the wa-animated-image component
templ AnimatedImage(props AnimatedImageProps) {
	<wa-animated-image
		if props.Src != "" {
			src={ props.Src }
		}
		if props.Alt != "" {
			alt={ props.Alt }
		}
		if props.Play {
			play
		}
		if props.OnLoad != "" {
			x-on:wa-load={ props.OnLoad }
		}
		if props.OnError != "" {
			x-on:wa-error={ props.OnError }
		}
		{ props.Attrs... }
	>
		if props.Slots.PlayIcon != nil {
			<div slot="play-icon">
				@props.Slots.PlayIcon
			</div>
		}
		if props.Slots.PauseIcon != nil {
			<div slot="pause-icon">
				@props.Slots.PauseIcon
			</div>
		}
		{ children... }
	</wa-animated-image>
}

// AnimatedImageFunc renders with a builder function for inline configuration
templ AnimatedImageFunc(fn func(*AnimatedImageBuilder)) {
	{{ b := NewAnimatedImage(); fn(b) }}
	@AnimatedImage(b.Props()) {
		{ children... }
	}
}