Native Select

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmNativeSelectImports } from '@spartan-ng/helm/native-select';

@Component({
	selector: 'spartan-native-select-preview',
	imports: [HlmNativeSelectImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-native-select>
			<option hlmNativeSelectOption value="">Select status</option>
			<option hlmNativeSelectOption value="todo">Todo</option>
			<option hlmNativeSelectOption value="in-progress">In Progress</option>
			<option hlmNativeSelectOption value="done">Done</option>
			<option hlmNativeSelectOption value="cancelled">Cancelled</option>
		</hlm-native-select>
	`,
})
export class NativeSelectPreview {}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmNativeSelectImports } from '@spartan-ng/helm/native-select';

@Component({
	selector: 'spartan-native-select-groups-example',
	imports: [HlmNativeSelectImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-native-select>
			<option hlmNativeSelectOption value="">Select department</option>
			<optgroup hlmNativeSelectOptGroup label="Engineering">
				<option hlmNativeSelectOption value="frontend">Frontend</option>
				<option hlmNativeSelectOption value="backend">Backend</option>
				<option hlmNativeSelectOption value="devops">DevOps</option>
			</optgroup>
			<optgroup hlmNativeSelectOptGroup label="Sales">
				<option hlmNativeSelectOption value="sales-rep">Sales Rep</option>
				<option hlmNativeSelectOption value="account-manager">Account Manager</option>
				<option hlmNativeSelectOption value="sales-director">Sales Director</option>
			</optgroup>
			<optgroup hlmNativeSelectOptGroup label="Operations">
				<option hlmNativeSelectOption value="support">Support</option>
				<option hlmNativeSelectOption value="product-manager">Product Manager</option>
				<option hlmNativeSelectOption value="ops-manager">Ops Manager</option>
			</optgroup>
		</hlm-native-select>
	`,
})
export class NativeSelectGroupsExample {}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmNativeSelectImports } from '@spartan-ng/helm/native-select';

@Component({
	selector: 'spartan-native-select-disabled-example',
	imports: [HlmNativeSelectImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-native-select disabled>
			<option hlmNativeSelectOption value="">Select a fruit</option>
			<option hlmNativeSelectOption value="apple">Apple</option>
			<option hlmNativeSelectOption value="banana">Banana</option>
			<option hlmNativeSelectOption value="blueberry">Blueberry</option>
		</hlm-native-select>
	`,
})
export class NativeSelectDisabledExample {}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmNativeSelectImports } from '@spartan-ng/helm/native-select';

@Component({
	selector: 'spartan-native-select-invalid-example',
	imports: [HlmNativeSelectImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-native-select aria-invalid="true">
			<option hlmNativeSelectOption value="">Select a fruit</option>
			<option hlmNativeSelectOption value="apple">Apple</option>
			<option hlmNativeSelectOption value="banana">Banana</option>
			<option hlmNativeSelectOption value="blueberry">Blueberry</option>
		</hlm-native-select>
	`,
})
export class NativeSelectInvalidExample {}

import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmFieldImports } from '@spartan-ng/helm/field';
import { HlmNativeSelectImports } from '@spartan-ng/helm/native-select';

@Component({
	selector: 'spartan-native-select-form-example',
	imports: [ReactiveFormsModule, HlmNativeSelectImports, HlmFieldImports, HlmButtonImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'w-full max-w-xs',
	},
	template: `
		<form [formGroup]="form" (ngSubmit)="submit()">
			<hlm-field-group>
				<hlm-field>
					<label hlmFieldLabel for="fruit">Favorite Fruit</label>
					<hlm-native-select selectId="fruit" formControlName="fruit">
						<option hlmNativeSelectOption value="">Select a fruit</option>
						<option hlmNativeSelectOption value="apple">Apple</option>
						<option hlmNativeSelectOption value="banana">Banana</option>
						<option hlmNativeSelectOption value="blueberry">Blueberry</option>
					</hlm-native-select>
				</hlm-field>
				<hlm-field orientation="horizontal">
					<button hlmBtn type="submit" [disabled]="form.invalid">Submit</button>
				</hlm-field>
			</hlm-field-group>
		</form>
	`,
})
export class NativeSelectFormExample {
	private readonly _formBuilder = inject(FormBuilder);

	public form = this._formBuilder.group({
		fruit: new FormControl<string | null>('', Validators.required),
	});

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