nebula/pkg/wa/input.templ

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

package wa

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

// Inputs collect data from the user.
//
// Web Awesome component: <wa-input>

// InputProps holds all properties for the wa-input component
type InputProps struct {
	// The type of input. Works the same as a native <input> element, but only a subset of types are supported. Defaults
	// Valid values: "date", "datetime-local", "email", "number", "password", "search", "tel", "text", "time", "url"
	Type string `attr:"type"`
	// The default value of the form control. Primarily used for resetting the form control.
	Value string `attr:"value"`
	// The input's size.
	// Valid values: "small", "medium", "large"
	Size string `attr:"size"`
	// The input's visual appearance.
	// Valid values: "filled", "outlined", "filled-outlined"
	Appearance string `attr:"appearance"`
	// Draws a pill-style input with rounded edges.
	Pill bool `attr:"pill"`
	// The input's label. If you need to display HTML, use the label slot instead.
	Label string `attr:"label"`
	// The input's hint. If you need to display HTML, use the hint slot instead.
	Hint string `attr:"hint"`
	// Adds a clear button when the input is not empty.
	WithClear bool `attr:"with-clear"`
	// Placeholder text to show as a hint when the input is empty.
	Placeholder string `attr:"placeholder"`
	// Makes the input readonly.
	Readonly bool `attr:"readonly"`
	// Adds a button to toggle the password's visibility. Only applies to password types.
	PasswordToggle bool `attr:"password-toggle"`
	// Determines whether or not the password is currently visible. Only applies to password input types.
	PasswordVisible bool `attr:"password-visible"`
	// Hides the browser's built-in increment/decrement spin buttons for number inputs.
	WithoutSpinButtons bool `attr:"without-spin-buttons"`
	// Makes the input a required field.
	Required bool `attr:"required"`
	// A regular expression pattern to validate input against.
	Pattern string `attr:"pattern"`
	// The minimum length of input that will be considered valid.
	Minlength float64 `attr:"minlength"`
	// The maximum length of input that will be considered valid.
	Maxlength float64 `attr:"maxlength"`
	// The input's minimum value. Only applies to date and number input types.
	Min string `attr:"min"`
	// The input's maximum value. Only applies to date and number input types.
	Max string `attr:"max"`
	// Specifies the granularity that the value must adhere to, or the special value any which means no stepping is
	// Valid values: "any"
	Step string `attr:"step"`
	// Controls whether and how text input is automatically capitalized as it is entered by the user.
	// Valid values: "off", "none", "on", "sentences", "words", "characters"
	Autocapitalize string `attr:"autocapitalize"`
	// Indicates whether the browser's autocorrect feature is on or off.
	// Valid values: "off", "on"
	Autocorrect string `attr:"autocorrect"`
	// Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
	Autocomplete string `attr:"autocomplete"`
	// Indicates that the input should receive focus on page load.
	Autofocus bool `attr:"autofocus"`
	// Used to customize the label or icon of the Enter key on virtual keyboards.
	// Valid values: "enter", "done", "go", "next", "previous", "search", "send"
	Enterkeyhint string `attr:"enterkeyhint"`
	// Enables spell checking on the input.
	Spellcheck bool `attr:"spellcheck"`
	// Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
	// Valid values: "none", "text", "decimal", "numeric", "tel", "search", "email", "url"
	Inputmode string `attr:"inputmode"`
	// Used for SSR. Will determine if the SSRed component will have the label slot rendered on initial paint.
	WithLabel bool `attr:"with-label"`
	// Used for SSR. Will determine if the SSRed component will have the hint slot rendered on initial paint.
	WithHint bool `attr:"with-hint"`

	// Events
	// Emitted when the control receives input.
	OnInput string `attr:"x-on:input"`
	// Emitted when an alteration to the control's value is committed by the user.
	OnChange string `attr:"x-on:change"`
	// Emitted when the control loses focus.
	OnBlur string `attr:"x-on:blur"`
	// Emitted when the control gains focus.
	OnFocus string `attr:"x-on:focus"`
	// Emitted when the clear button is activated.
	OnClear string `attr:"x-on:wa-clear"`
	// Emitted when the form control has been checked for validity and its constraints aren't satisfied.
	OnInvalid string `attr:"x-on:wa-invalid"`

	// Slots contains named slot content
	Slots InputSlots

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

// InputSlots holds named slot content for the component
type InputSlots struct {
	// The input's label. Alternatively, you can use the label attribute.
	Label templ.Component
	// An element, such as <wa-icon>, placed at the start of the input control.
	Start templ.Component
	// An element, such as <wa-icon>, placed at the end of the input control.
	End templ.Component
	// An icon to use in lieu of the default clear icon.
	ClearIcon templ.Component
	// An icon to use in lieu of the default show password icon.
	ShowPasswordIcon templ.Component
	// An icon to use in lieu of the default hide password icon.
	HidePasswordIcon templ.Component
	// Text that describes how to use the input. Alternatively, you can use the hint attribute.
	Hint templ.Component
}

// InputBuilder provides a fluent API for constructing InputProps
type InputBuilder struct {
	props InputProps
}

// NewInput creates a new builder for wa-input
func NewInput() *InputBuilder {
	return &InputBuilder{}
}

// Type sets the type attribute
// The type of input. Works the same as a native <input> element, but only a subset of types are supported. Defaults
func (b *InputBuilder) Type(v string) *InputBuilder {
	b.props.Type = v
	return b
}

// Value sets the value attribute
// The default value of the form control. Primarily used for resetting the form control.
func (b *InputBuilder) Value(v string) *InputBuilder {
	b.props.Value = v
	return b
}

// Size sets the size attribute
// The input's size.
func (b *InputBuilder) Size(v string) *InputBuilder {
	b.props.Size = v
	return b
}

// Appearance sets the appearance attribute
// The input's visual appearance.
func (b *InputBuilder) Appearance(v string) *InputBuilder {
	b.props.Appearance = v
	return b
}

// Pill sets the pill attribute
// Draws a pill-style input with rounded edges.
func (b *InputBuilder) Pill(v bool) *InputBuilder {
	b.props.Pill = v
	return b
}

// Label sets the label attribute
// The input's label. If you need to display HTML, use the label slot instead.
func (b *InputBuilder) Label(v string) *InputBuilder {
	b.props.Label = v
	return b
}

// Hint sets the hint attribute
// The input's hint. If you need to display HTML, use the hint slot instead.
func (b *InputBuilder) Hint(v string) *InputBuilder {
	b.props.Hint = v
	return b
}

// WithClear sets the with-clear attribute
// Adds a clear button when the input is not empty.
func (b *InputBuilder) WithClear(v bool) *InputBuilder {
	b.props.WithClear = v
	return b
}

// Placeholder sets the placeholder attribute
// Placeholder text to show as a hint when the input is empty.
func (b *InputBuilder) Placeholder(v string) *InputBuilder {
	b.props.Placeholder = v
	return b
}

// Readonly sets the readonly attribute
// Makes the input readonly.
func (b *InputBuilder) Readonly(v bool) *InputBuilder {
	b.props.Readonly = v
	return b
}

// PasswordToggle sets the password-toggle attribute
// Adds a button to toggle the password's visibility. Only applies to password types.
func (b *InputBuilder) PasswordToggle(v bool) *InputBuilder {
	b.props.PasswordToggle = v
	return b
}

// PasswordVisible sets the password-visible attribute
// Determines whether or not the password is currently visible. Only applies to password input types.
func (b *InputBuilder) PasswordVisible(v bool) *InputBuilder {
	b.props.PasswordVisible = v
	return b
}

// WithoutSpinButtons sets the without-spin-buttons attribute
// Hides the browser's built-in increment/decrement spin buttons for number inputs.
func (b *InputBuilder) WithoutSpinButtons(v bool) *InputBuilder {
	b.props.WithoutSpinButtons = v
	return b
}

// Required sets the required attribute
// Makes the input a required field.
func (b *InputBuilder) Required(v bool) *InputBuilder {
	b.props.Required = v
	return b
}

// Pattern sets the pattern attribute
// A regular expression pattern to validate input against.
func (b *InputBuilder) Pattern(v string) *InputBuilder {
	b.props.Pattern = v
	return b
}

// Minlength sets the minlength attribute
// The minimum length of input that will be considered valid.
func (b *InputBuilder) Minlength(v float64) *InputBuilder {
	b.props.Minlength = v
	return b
}

// Maxlength sets the maxlength attribute
// The maximum length of input that will be considered valid.
func (b *InputBuilder) Maxlength(v float64) *InputBuilder {
	b.props.Maxlength = v
	return b
}

// Min sets the min attribute
// The input's minimum value. Only applies to date and number input types.
func (b *InputBuilder) Min(v string) *InputBuilder {
	b.props.Min = v
	return b
}

// Max sets the max attribute
// The input's maximum value. Only applies to date and number input types.
func (b *InputBuilder) Max(v string) *InputBuilder {
	b.props.Max = v
	return b
}

// Step sets the step attribute
// Specifies the granularity that the value must adhere to, or the special value any which means no stepping is
func (b *InputBuilder) Step(v string) *InputBuilder {
	b.props.Step = v
	return b
}

// Autocapitalize sets the autocapitalize attribute
// Controls whether and how text input is automatically capitalized as it is entered by the user.
func (b *InputBuilder) Autocapitalize(v string) *InputBuilder {
	b.props.Autocapitalize = v
	return b
}

// Autocorrect sets the autocorrect attribute
// Indicates whether the browser's autocorrect feature is on or off.
func (b *InputBuilder) Autocorrect(v string) *InputBuilder {
	b.props.Autocorrect = v
	return b
}

// Autocomplete sets the autocomplete attribute
// Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
func (b *InputBuilder) Autocomplete(v string) *InputBuilder {
	b.props.Autocomplete = v
	return b
}

// Autofocus sets the autofocus attribute
// Indicates that the input should receive focus on page load.
func (b *InputBuilder) Autofocus(v bool) *InputBuilder {
	b.props.Autofocus = v
	return b
}

// Enterkeyhint sets the enterkeyhint attribute
// Used to customize the label or icon of the Enter key on virtual keyboards.
func (b *InputBuilder) Enterkeyhint(v string) *InputBuilder {
	b.props.Enterkeyhint = v
	return b
}

// Spellcheck sets the spellcheck attribute
// Enables spell checking on the input.
func (b *InputBuilder) Spellcheck(v bool) *InputBuilder {
	b.props.Spellcheck = v
	return b
}

// Inputmode sets the inputmode attribute
// Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
func (b *InputBuilder) Inputmode(v string) *InputBuilder {
	b.props.Inputmode = v
	return b
}

// WithLabel sets the with-label attribute
// Used for SSR. Will determine if the SSRed component will have the label slot rendered on initial paint.
func (b *InputBuilder) WithLabel(v bool) *InputBuilder {
	b.props.WithLabel = v
	return b
}

// WithHint sets the with-hint attribute
// Used for SSR. Will determine if the SSRed component will have the hint slot rendered on initial paint.
func (b *InputBuilder) WithHint(v bool) *InputBuilder {
	b.props.WithHint = v
	return b
}

// OnInput sets the handler for input event
// Emitted when the control receives input.
func (b *InputBuilder) OnInput(handler string) *InputBuilder {
	b.props.OnInput = handler
	return b
}

// OnChange sets the handler for change event
// Emitted when an alteration to the control's value is committed by the user.
func (b *InputBuilder) OnChange(handler string) *InputBuilder {
	b.props.OnChange = handler
	return b
}

// OnBlur sets the handler for blur event
// Emitted when the control loses focus.
func (b *InputBuilder) OnBlur(handler string) *InputBuilder {
	b.props.OnBlur = handler
	return b
}

// OnFocus sets the handler for focus event
// Emitted when the control gains focus.
func (b *InputBuilder) OnFocus(handler string) *InputBuilder {
	b.props.OnFocus = handler
	return b
}

// OnClear sets the handler for wa-clear event
// Emitted when the clear button is activated.
func (b *InputBuilder) OnClear(handler string) *InputBuilder {
	b.props.OnClear = handler
	return b
}

// OnInvalid sets the handler for wa-invalid event
// Emitted when the form control has been checked for validity and its constraints aren't satisfied.
func (b *InputBuilder) OnInvalid(handler string) *InputBuilder {
	b.props.OnInvalid = handler
	return b
}

// LabelSlot sets the label slot content
// The input's label. Alternatively, you can use the label attribute.
func (b *InputBuilder) LabelSlot(c templ.Component) *InputBuilder {
	b.props.Slots.Label = c
	return b
}

// StartSlot sets the start slot content
// An element, such as <wa-icon>, placed at the start of the input control.
func (b *InputBuilder) StartSlot(c templ.Component) *InputBuilder {
	b.props.Slots.Start = c
	return b
}

// EndSlot sets the end slot content
// An element, such as <wa-icon>, placed at the end of the input control.
func (b *InputBuilder) EndSlot(c templ.Component) *InputBuilder {
	b.props.Slots.End = c
	return b
}

// ClearIconSlot sets the clear-icon slot content
// An icon to use in lieu of the default clear icon.
func (b *InputBuilder) ClearIconSlot(c templ.Component) *InputBuilder {
	b.props.Slots.ClearIcon = c
	return b
}

// ShowPasswordIconSlot sets the show-password-icon slot content
// An icon to use in lieu of the default show password icon.
func (b *InputBuilder) ShowPasswordIconSlot(c templ.Component) *InputBuilder {
	b.props.Slots.ShowPasswordIcon = c
	return b
}

// HidePasswordIconSlot sets the hide-password-icon slot content
// An icon to use in lieu of the default hide password icon.
func (b *InputBuilder) HidePasswordIconSlot(c templ.Component) *InputBuilder {
	b.props.Slots.HidePasswordIcon = c
	return b
}

// HintSlot sets the hint slot content
// Text that describes how to use the input. Alternatively, you can use the hint attribute.
func (b *InputBuilder) HintSlot(c templ.Component) *InputBuilder {
	b.props.Slots.Hint = c
	return b
}

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

// Attrs merges multiple attributes
func (b *InputBuilder) Attrs(attrs templ.Attributes) *InputBuilder {
	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 *InputBuilder) Props() InputProps {
	return b.props
}

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

// Input renders the wa-input component
templ Input(props InputProps) {
	<wa-input
		if props.Type != "" {
			type={ props.Type }
		}
		if props.Value != "" {
			value={ props.Value }
		}
		if props.Size != "" {
			size={ props.Size }
		}
		if props.Appearance != "" {
			appearance={ props.Appearance }
		}
		if props.Pill {
			pill
		}
		if props.Label != "" {
			label={ props.Label }
		}
		if props.Hint != "" {
			hint={ props.Hint }
		}
		if props.WithClear {
			with-clear
		}
		if props.Placeholder != "" {
			placeholder={ props.Placeholder }
		}
		if props.Readonly {
			readonly
		}
		if props.PasswordToggle {
			password-toggle
		}
		if props.PasswordVisible {
			password-visible
		}
		if props.WithoutSpinButtons {
			without-spin-buttons
		}
		if props.Required {
			required
		}
		if props.Pattern != "" {
			pattern={ props.Pattern }
		}
		if props.Minlength != 0 {
			minlength={ templ.Sprintf("%v", props.Minlength) }
		}
		if props.Maxlength != 0 {
			maxlength={ templ.Sprintf("%v", props.Maxlength) }
		}
		if props.Min != 0 {
			min={ templ.Sprintf("%v", props.Min) }
		}
		if props.Max != 0 {
			max={ templ.Sprintf("%v", props.Max) }
		}
		if props.Step != 0 {
			step={ templ.Sprintf("%v", props.Step) }
		}
		if props.Autocapitalize != "" {
			autocapitalize={ props.Autocapitalize }
		}
		if props.Autocorrect != "" {
			autocorrect={ props.Autocorrect }
		}
		if props.Autocomplete != "" {
			autocomplete={ props.Autocomplete }
		}
		if props.Autofocus {
			autofocus
		}
		if props.Enterkeyhint != "" {
			enterkeyhint={ props.Enterkeyhint }
		}
		if props.Spellcheck {
			spellcheck
		}
		if props.Inputmode != "" {
			inputmode={ props.Inputmode }
		}
		if props.WithLabel {
			with-label
		}
		if props.WithHint {
			with-hint
		}
		if props.OnInput != "" {
			x-on:input={ props.OnInput }
		}
		if props.OnChange != "" {
			x-on:change={ props.OnChange }
		}
		if props.OnBlur != "" {
			x-on:blur={ props.OnBlur }
		}
		if props.OnFocus != "" {
			x-on:focus={ props.OnFocus }
		}
		if props.OnClear != "" {
			x-on:wa-clear={ props.OnClear }
		}
		if props.OnInvalid != "" {
			x-on:wa-invalid={ props.OnInvalid }
		}
		{ props.Attrs... }
	>
		if props.Slots.Label != nil {
			<div slot="label">
				@props.Slots.Label
			</div>
		}
		if props.Slots.Start != nil {
			<div slot="start">
				@props.Slots.Start
			</div>
		}
		if props.Slots.End != nil {
			<div slot="end">
				@props.Slots.End
			</div>
		}
		if props.Slots.ClearIcon != nil {
			<div slot="clear-icon">
				@props.Slots.ClearIcon
			</div>
		}
		if props.Slots.ShowPasswordIcon != nil {
			<div slot="show-password-icon">
				@props.Slots.ShowPasswordIcon
			</div>
		}
		if props.Slots.HidePasswordIcon != nil {
			<div slot="hide-password-icon">
				@props.Slots.HidePasswordIcon
			</div>
		}
		if props.Slots.Hint != nil {
			<div slot="hint">
				@props.Slots.Hint
			</div>
		}
		{ children... }
	</wa-input>
}

// InputFunc renders with a builder function for inline configuration
templ InputFunc(fn func(*InputBuilder)) {
	{{ b := NewInput(); fn(b) }}
	@Input(b.Props()) {
		{ children... }
	}
}