Input

import { Component } from '@angular/core';
import { HlmInputImports } from '@spartan-ng/helm/input';

@Component({
	selector: 'spartan-input-preview',
	imports: [HlmInputImports],
	template: `
		<input class="w-80" hlmInput type="email" placeholder="Email" />
	`,
})
export class InputPreview {}

import { Component } from '@angular/core';
import { HlmInputImports } from '@spartan-ng/helm/input';
import { HlmLabelImports } from '@spartan-ng/helm/label';

@Component({
	selector: 'spartan-input-file',
	imports: [HlmInputImports, HlmLabelImports],
	template: `
		<div class="grid w-full max-w-sm items-center gap-3">
			<label hlmLabel for="picture">Upload file</label>
			<input hlmInput id="picture" type="file" />
		</div>
	`,
})
export class InputFilePreview {}

import { Component } from '@angular/core';
import { HlmInputImports } from '@spartan-ng/helm/input';

@Component({
	selector: 'spartan-input-disabled',
	imports: [HlmInputImports],
	template: `
		<input class="w-80" hlmInput disabled type="email" placeholder="Email" />
	`,
})
export class InputDisabledPreview {}

import { Component } from '@angular/core';
import { HlmInputImports } from '@spartan-ng/helm/input';
import { HlmLabelImports } from '@spartan-ng/helm/label';

@Component({
	selector: 'spartan-input-label',
	imports: [HlmInputImports, HlmLabelImports],
	template: `
		<div class="grid w-full max-w-sm items-center gap-3">
			<label hlmLabel for="email">Email</label>
			<input hlmInput type="email" id="email" placeholder="Email" />
		</div>
	`,
})
export class InputLabelPreview {}

import { Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmInputImports } from '@spartan-ng/helm/input';

@Component({
	selector: 'spartan-input-button',
	imports: [HlmInputImports, HlmButtonImports],
	template: `
		<div class="flex w-full max-w-sm items-center gap-2">
			<input class="w-80" hlmInput type="email" placeholder="Email" />
			<button hlmBtn variant="outline">Subscribe</button>
		</div>
	`,
})
export class InputButtonPreview {}

import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmFormFieldImports } from '@spartan-ng/helm/form-field';
import { HlmInputImports } from '@spartan-ng/helm/input';
import { HlmLabelImports } from '@spartan-ng/helm/label';

@Component({
	selector: 'spartan-input-form',
	imports: [HlmInputImports, HlmLabelImports, HlmButtonImports, HlmFormFieldImports, ReactiveFormsModule],
	template: `
		<form class="space-y-6" [formGroup]="form" (ngSubmit)="submit()">
			<div class="grid w-full max-w-sm items-center gap-2">
				<label hlmLabel for="username">Username</label>
				<input hlmInput type="text" id="username" placeholder="spartan" formControlName="username" />
				<hlm-hint>This is your public display name.</hlm-hint>
			</div>
			<button hlmBtn type="submit">Submit</button>
		</form>
	`,
})
export class InputFormPreview {
	private readonly _formBuilder = inject(FormBuilder);
	public form = this._formBuilder.group({
		username: [null, Validators.required],
	});

	submit() {
		console.log(this.form.value);
	}
}