{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{# components #}
{% import "general/building-blocks/button/button-macros.njk" as button %}
{% import "general/building-blocks/input/input-macros.njk" as input %}

{# ========================================================================== #}
{# :: Settings #}
{# ========================================================================== #}
{% set params = {
	isFullWidth: false,
	styleVendors: [],
	scriptVendors: [],
	order: 5,
	scope: "s-bp-input"
} %}

{# ========================================================================== #}
{# :: Info #}
{# ========================================================================== #}
{% set info %}

The input field can be supported by a button, indicating an action. This is
usually applied when there is just one input field present within the form.
For example: a subscription form which only requires an e-mail field.

{% endset %}

{# ========================================================================== #}
{# :: Preview #}
{# ========================================================================== #}
{% set preview %}

	{{input.default("", {
		label: { text: "Text input with button" },
		id: "components-input-with-button-1",
		name: "components-input-with-button-1",
		input: {
			type: "text",
			placeholder: "placeholder",
			button: button.default("", { text: "button" })
		}
	})}}

	{{input.default("", {
		label: { text: "Disabled input with button" },
		isDisabled: true,
		id: "components-input-with-button-2",
		name: "components-input-with-button-2",
		input: {
			type: "text",
			placeholder: "placeholder",
			button: button.default("", { text: "button" })
		}
	})}}

{% endset %}

{# ========================================================================== #}
{# :: Code #}
{# ========================================================================== #}
{% set code %}

	{{input.default("", {
		label: { text: "Text input with button" },
		id: "components-input-with-button-3",
		name: "components-input-with-button-3",
		input: {
			type: "text",
			placeholder: "placeholder",
			button: button.default("", { text: "button" })
		}
	})}}

{% endset %}