Input Group

import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideArrowUp, lucideCheck, lucideInfo, lucidePlus, lucideSearch, lucideSend } from '@ng-icons/lucide';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmSeparatorImports } from '@spartan-ng/helm/separator';
import { HlmTooltipImports } from '@spartan-ng/helm/tooltip';

@Component({
	selector: 'spartan-input-group-preview',
	imports: [HlmInputGroupImports, HlmIcon, NgIcon, HlmSeparatorImports, HlmTooltipImports, ReactiveFormsModule],
	providers: [provideIcons({ lucideSend, lucideSearch, lucideInfo, lucidePlus, lucideArrowUp, lucideCheck })],
	host: {
		class: 'grid w-full max-w-sm gap-6',
	},
	template: `
		<div hlmInputGroup>
			<input hlmInputGroupInput placeholder="Search..." />
			<div hlmInputGroupAddon>
				<ng-icon hlm name="lucideSearch" />
			</div>
			<div hlmInputGroupAddon align="inline-end">12 results</div>
		</div>
		<div hlmInputGroup>
			<input hlmInputGroupInput placeholder="example.com" class="!pl-1" />
			<div hlmInputGroupAddon>
				<span hlmInputGroupText>https://</span>
			</div>
			<div hlmInputGroupAddon align="inline-end">
				<button
					hlmInputGroupButton
					class="rounded-full"
					size="icon-xs"
					[hlmTooltipTrigger]="'This is content in a tooltip.'"
				>
					<ng-icon hlm name="lucideInfo" />
				</button>
			</div>
		</div>
		<div hlmInputGroup>
			<textarea hlmInputGroupTextarea placeholder="Ask, Search or Chat..."></textarea>
			<div hlmInputGroupAddon align="block-end">
				<button hlmInputGroupButton variant="outline" class="rounded-full" size="icon-xs">
					<ng-icon hlm name="lucidePlus" />
				</button>
				<span hlmInputGroupText class="ml-auto">52% used</span>
				<hlm-separator orientation="vertical" class="!h-4" />
				<button hlmInputGroupButton variant="default" class="rounded-full" size="icon-xs" disabled>
					<ng-icon hlm name="lucideArrowUp" />
					<span class="sr-only">Send</span>
				</button>
			</div>
		</div>
		<div hlmInputGroup>
			<input hlmInputGroupInput placeholder="@spartan" />
			<div hlmInputGroupAddon align="inline-end">
				<div class="bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full">
					<ng-icon hlm name="lucideCheck" size="xs" />
				</div>
			</div>
		</div>
	`,
})
export class InputGroupPreview {}

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideCheck, lucideCreditCard, lucideInfo, lucideMail, lucideSearch, lucideStar } from '@ng-icons/lucide';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';

@Component({
	selector: 'spartan-input-group-icon-preview',
	imports: [HlmInputGroupImports, NgIcon, HlmIconImports],
	providers: [provideIcons({ lucideSearch, lucideMail, lucideCheck, lucideCreditCard, lucideStar, lucideInfo })],
	host: {
		class: 'grid w-full max-w-sm gap-6',
	},
	template: `
		<div hlmInputGroup>
			<input hlmInputGroupInput placeholder="Search..." />
			<div hlmInputGroupAddon>
				<ng-icon hlm name="lucideSearch" />
			</div>
		</div>
		<div hlmInputGroup>
			<input hlmInputGroupInput type="email" placeholder="Enter your email" />
			<div hlmInputGroupAddon>
				<ng-icon hlm name="lucideMail" />
			</div>
		</div>
		<div hlmInputGroup>
			<input hlmInputGroupInput placeholder="Card number" />
			<div hlmInputGroupAddon>
				<ng-icon hlm name="lucideCreditCard" />
			</div>
			<div hlmInputGroupAddon align="inline-end">
				<ng-icon hlm name="lucideCheck" />
			</div>
		</div>
		<div hlmInputGroup>
			<input hlmInputGroupInput placeholder="Card number" />
			<div hlmInputGroupAddon align="inline-end">
				<ng-icon hlm name="lucideStar" />
				<ng-icon hlm name="lucideInfo" />
			</div>
		</div>
	`,
})
export class InputGroupIconPreview {}

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideCheck, lucideCreditCard, lucideInfo, lucideMail, lucideSearch, lucideStar } from '@ng-icons/lucide';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';

@Component({
	selector: 'spartan-input-group-icon-preview',
	imports: [HlmInputGroupImports, NgIcon, HlmIconImports],
	providers: [provideIcons({ lucideSearch, lucideMail, lucideCheck, lucideCreditCard, lucideStar, lucideInfo })],
	host: {
		class: 'grid w-full max-w-sm gap-6',
	},
	template: `
		<div hlmInputGroup>
			<input hlmInputGroupInput placeholder="Search..." />
			<div hlmInputGroupAddon>
				<ng-icon hlm name="lucideSearch" />
			</div>
		</div>
		<div hlmInputGroup>
			<input hlmInputGroupInput type="email" placeholder="Enter your email" />
			<div hlmInputGroupAddon>
				<ng-icon hlm name="lucideMail" />
			</div>
		</div>
		<div hlmInputGroup>
			<input hlmInputGroupInput placeholder="Card number" />
			<div hlmInputGroupAddon>
				<ng-icon hlm name="lucideCreditCard" />
			</div>
			<div hlmInputGroupAddon align="inline-end">
				<ng-icon hlm name="lucideCheck" />
			</div>
		</div>
		<div hlmInputGroup>
			<input hlmInputGroupInput placeholder="Card number" />
			<div hlmInputGroupAddon align="inline-end">
				<ng-icon hlm name="lucideStar" />
				<ng-icon hlm name="lucideInfo" />
			</div>
		</div>
	`,
})
export class InputGroupIconPreview {}

import { Component, computed, signal } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';

import { tablerCheck, tablerCopy, tablerInfoCircle, tablerStar } from '@ng-icons/tabler-icons';
import { BrnPopoverImports } from '@spartan-ng/brain/popover';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmPopoverImports } from '@spartan-ng/helm/popover';

@Component({
	selector: 'spartan-input-group-button-preview',
	imports: [HlmInputGroupImports, HlmIconImports, BrnPopoverImports, HlmPopoverImports],
	providers: [provideIcons({ tablerCheck, tablerCopy, tablerInfoCircle, tablerStar })],
	host: {
		class: 'grid w-full max-w-sm gap-6',
	},
	template: `
		<div hlmInputGroup>
			<input hlmInputGroupInput placeholder="https://github.com/spartan-ng/spartan" readOnly />
			<div hlmInputGroupAddon align="inline-end">
				<button
					hlmInputGroupButton
					aria-label="Copy"
					title="Copy"
					size="icon-xs"
					(click)="_copy('https://github.com/spartan-ng/spartan')"
				>
					<ng-icon hlm [name]="_isCopied() ? 'tablerCheck' : 'tablerCopy'" />
				</button>
			</div>
		</div>
		<div hlmInputGroup class="[--radius:9999px]">
			<div hlmInputGroupAddon>
				<button
					hlmInputGroupButton
					variant="secondary"
					size="icon-xs"
					brnPopoverTrigger
					[brnPopoverTriggerFor]="brnPopover"
				>
					<ng-icon hlm name="tablerInfoCircle" />
				</button>
			</div>

			<div hlmInputGroupAddon class="text-muted-foreground pl-1.5">https://</div>
			<input hlmInputGroupInput id="input-secure-19" />
			<div hlmInputGroupAddon align="inline-end">
				<button hlmInputGroupButton size="icon-xs" (click)="_toggleFavorite()">
					<ng-icon hlm name="tablerStar" [class]="_favoriteClass()" />
				</button>
			</div>
		</div>
		<div hlmInputGroup>
			<input hlmInputGroupInput placeholder="Type to search..." />
			<div hlmInputGroupAddon align="inline-end">
				<button hlmInputGroupButton variant="secondary">Search</button>
			</div>
		</div>

		<brn-popover sideOffset="5" #brnPopover>
			<div hlmPopoverContent class="flex flex-col gap-1 rounded-xl text-sm" *brnPopoverContent="let ctx">
				<p class="font-medium">Your connection is not secure.</p>
				<p>You should not enter any sensitive information on this site.</p>
			</div>
		</brn-popover>
	`,
})
export class InputGroupButtonPreview {
	protected readonly _isCopied = signal(false);
	protected readonly _isFavorite = signal(false);
	protected readonly _favoriteClass = computed(() =>
		this._isFavorite() ? '[&>svg]:fill-blue-600 [&>svg]:stroke-blue-600' : '',
	);

	protected _copy(text: string) {
		void navigator.clipboard.writeText(text);
		this._isCopied.set(true);

		setTimeout(() => {
			this._isCopied.set(false);
		}, 3000);
	}

	protected _toggleFavorite(): void {
		this._isFavorite.update((f) => !f);
	}
}

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideHelpCircle, lucideInfo } from '@ng-icons/lucide';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmTooltipImports } from '@spartan-ng/helm/tooltip';

@Component({
	selector: 'spartan-input-group-tooltip-preview',
	providers: [
		provideIcons({
			lucideInfo,
			lucideHelpCircle,
		}),
	],
	imports: [HlmInputGroupImports, HlmTooltipImports, HlmIconImports],
	host: {
		class: 'grid w-full max-w-sm gap-6',
	},
	template: `
		<div hlmInputGroup>
			<input hlmInputGroupInput placeholder="Enter password" type="password" />
			<div hlmInputGroupAddon align="inline-end">
				<button
					hlmInputGroupButton
					hlmTooltipTrigger="Password must be at least 8 characters"
					variant="ghost"
					aria-label="Info"
					size="icon-xs"
				>
					<ng-icon hlm name="lucideInfo" />
				</button>
			</div>
		</div>
		<div hlmInputGroup>
			<input hlmInputGroupInput placeholder="Your email address" />
			<div hlmInputGroupAddon align="inline-end">
				<button
					hlmInputGroupButton
					hlmTooltipTrigger="We'll use this to send you notifications"
					variant="ghost"
					aria-label="Info"
					size="icon-xs"
				>
					<ng-icon hlm name="lucideHelpCircle" />
				</button>
			</div>
		</div>
		<div hlmInputGroup>
			<input hlmInputGroupInput placeholder="Enter API key" />
			<div hlmInputGroupAddon>
				<button
					hlmInputGroupButton
					hlmTooltipTrigger="Click for help with API keys"
					position="left"
					variant="ghost"
					aria-label="Info"
					size="icon-xs"
				>
					<ng-icon hlm name="lucideHelpCircle" />
				</button>
			</div>
		</div>
	`,
})
export class InputGroupTooltipPreview {}

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';

import { tablerBrandJavascript, tablerCopy, tablerCornerDownLeft, tablerRefresh } from '@ng-icons/tabler-icons';
import { HlmIconImports } from '@spartan-ng/helm/icon';

@Component({
	selector: 'spartan-input-group-textarea-preview',
	imports: [HlmInputGroupImports, HlmIconImports],
	providers: [
		provideIcons({
			tablerBrandJavascript,
			tablerCopy,
			tablerCornerDownLeft,
			tablerRefresh,
		}),
	],
	host: {
		class: 'grid w-full max-w-sm gap-6',
	},
	template: `
		<div hlmInputGroup>
			<textarea
				hlmInputGroupTextarea
				id="textarea-code-32"
				placeholder="console.log('Hello, world!');"
				class="min-h-[200px]"
			></textarea>
			<div hlmInputGroupAddon align="block-end" class="border-t">
				<span hlmInputGroupText>Line 1, Column 1</span>
				<button hlmInputGroupButton size="sm" class="ml-auto" variant="default">
					Run
					<ng-icon hlm name="tablerCornerDownLeft" />
				</button>
			</div>
			<div hlmInputGroupAddon align="block-start" class="border-b">
				<span hlmInputGroupText class="font-mono font-medium">
					<ng-icon hlm name="tablerBrandJavascript" />
					script.js
				</span>
				<button hlmInputGroupButton class="ml-auto" size="icon-xs">
					<ng-icon hlm name="tablerRefresh" />
				</button>
				<button hlmInputGroupButton variant="ghost" size="icon-xs">
					<ng-icon hlm name="tablerCopy" />
				</button>
			</div>
		</div>
	`,
})
export class InputGroupTextareaPreview {}

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideLoader, lucideLoader2 } from '@ng-icons/lucide';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';

@Component({
	selector: 'spartan-input-group-spinner-preview',
	imports: [HlmInputGroupImports, NgIcon, HlmIconImports],
	providers: [provideIcons({ lucideLoader, lucideLoader2 })],
	host: {
		class: 'grid w-full max-w-sm gap-6',
	},
	template: `
		<div hlmInputGroup data-disabled="true">
			<input hlmInputGroupInput placeholder="Searching..." disabled />
			<div hlmInputGroupAddon align="inline-end">
				<ng-icon name="lucideLoader2" class="animate-spin" />
			</div>
		</div>

		<div hlmInputGroup data-disabled="true">
			<input hlmInputGroupInput placeholder="Processing..." disabled />
			<div hlmInputGroupAddon>
				<ng-icon name="lucideLoader2" class="animate-spin" />
			</div>
		</div>

		<div hlmInputGroup data-disabled="true">
			<input hlmInputGroupInput placeholder="Saving changes..." disabled />
			<div hlmInputGroupAddon align="inline-end">
				<span hlmInputGroupText>Saving...</span>
				<ng-icon name="lucideLoader2" class="animate-spin" />
			</div>
		</div>

		<div hlmInputGroup data-disabled="true">
			<input hlmInputGroupInput placeholder="Refreshing data..." disabled />

			<div hlmInputGroupAddon>
				<ng-icon hlm name="lucideLoader" class="animate-spin" />
			</div>

			<div hlmInputGroupAddon align="inline-end">
				<span hlmInputGroupText class="text-muted-foreground">Please wait...</span>
			</div>
		</div>
	`,
})
export class InputGroupSpinnerPreview {}

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideInfo } from '@ng-icons/lucide';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmLabelImports } from '@spartan-ng/helm/label';
import { HlmTooltipImports } from '@spartan-ng/helm/tooltip';

@Component({
	selector: 'spartan-input-group-label-preview',
	imports: [HlmInputGroupImports, HlmIconImports, HlmTooltipImports, HlmLabelImports],
	providers: [
		provideIcons({
			lucideInfo,
		}),
	],
	host: {
		class: 'grid w-full max-w-sm gap-6',
	},
	template: `
		<div hlmInputGroup>
			<input hlmInputGroupInput id="email" placeholder="spartan" />
			<div hlmInputGroupAddon>
				<label for="email" hlmLabel>&#64;</label>
			</div>
		</div>

		<div hlmInputGroup>
			<input hlmInputGroupInput id="email-2" placeholder="spartan-ng@github.com" />
			<div hlmInputGroupAddon align="block-start">
				<label for="email-2" class="text-foreground" hlmLabel>Email</label>
				<button
					hlmInputGroupButton
					hlmTooltipTrigger="We'll use this to send you notifications"
					variant="ghost"
					aria-label="Help"
					class="ml-auto rounded-full"
					size="icon-xs"
				>
					<ng-icon hlm name="lucideInfo" />
				</button>
			</div>
		</div>
	`,
})
export class InputGroupLabelPreview {}

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideChevronDown, lucideMoreHorizontal } from '@ng-icons/lucide';
import { BrnMenuImports } from '@spartan-ng/brain/menu';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmMenuImports } from '@spartan-ng/helm/menu';

@Component({
	selector: 'spartan-input-group-dropdown-preview',
	imports: [HlmInputGroupImports, HlmIconImports, BrnMenuImports, HlmMenuImports],
	providers: [
		provideIcons({
			lucideMoreHorizontal,
			lucideChevronDown,
		}),
	],
	host: {
		class: 'grid w-full max-w-sm gap-6',
	},
	template: `
		<div hlmInputGroup>
			<input hlmInputGroupInput placeholder="Enter file name" />

			<div hlmInputGroupAddon align="inline-end">
				<button
					hlmInputGroupButton
					variant="ghost"
					aria-label="More"
					size="icon-xs"
					[brnMenuTriggerFor]="fileMenu"
					align="end"
				>
					<ng-icon hlm name="lucideMoreHorizontal" />
				</button>
			</div>
		</div>
		<div hlmInputGroup class="[--radius:1rem]">
			<input hlmInputGroupInput placeholder="Enter search query" />

			<div hlmInputGroupAddon align="inline-end">
				<button
					hlmInputGroupButton
					variant="ghost"
					class="!pr-1.5 text-xs"
					[brnMenuTriggerFor]="searchMenu"
					align="end"
				>
					Search In...
					<ng-icon hlm name="lucideChevronDown" />
				</button>
			</div>
		</div>

		<ng-template #fileMenu>
			<hlm-menu class="w-48">
				<button hlmMenuItem>Settings</button>
				<button hlmMenuItem>Copy path</button>
				<button hlmMenuItem>Open location</button>
			</hlm-menu>
		</ng-template>

		<ng-template #searchMenu>
			<hlm-menu class="w-56 [--radius:0.95rem]">
				<button hlmMenuItem>Documentation</button>
				<button hlmMenuItem>Blog Posts</button>
				<button hlmMenuItem>Changelog</button>
			</hlm-menu>
		</ng-template>
	`,
})
export class InputGroupDropdownPreview {}

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideLink2 } from '@ng-icons/lucide';
import { HlmButtonGroupImports } from '@spartan-ng/helm/button-group';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmLabelImports } from '@spartan-ng/helm/label';

@Component({
	selector: 'spartan-input-group-button-group-preview',
	providers: [
		provideIcons({
			lucideLink2,
		}),
	],
	imports: [HlmInputGroupImports, HlmButtonGroupImports, HlmLabelImports, HlmIconImports],
	host: {
		class: 'grid w-full max-w-sm gap-6',
	},
	template: `
		<div hlmButtonGroup>
			<div hlmButtonGroupText>
				<label hlmLabel for="url">https://</label>
			</div>
			<div hlmInputGroup>
				<input hlmInputGroupInput id="url" />
				<div hlmInputGroupAddon align="inline-end">
					<ng-icon hlm name="lucideLink2" />
				</div>
			</div>
			<div hlmButtonGroupText>.com</div>
		</div>
	`,
})
export class InputGroupButtonGroupPreview {}

import { CdkTextareaAutosize } from '@angular/cdk/text-field';
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideLink2 } from '@ng-icons/lucide';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';

@Component({
	selector: 'spartan-input-group-custom-input-preview',
	providers: [
		provideIcons({
			lucideLink2,
		}),
	],
	imports: [HlmInputGroupImports, CdkTextareaAutosize],
	host: {
		class: 'grid w-full max-w-sm gap-6',
	},
	template: `
		<div hlmInputGroup>
			<textarea
				data-slot="input-group-control"
				placeholder="Autoresize textarea..."
				cdkTextareaAutosize
				class="flex min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2.5 text-base transition-[color,box-shadow] outline-none md:text-sm"
			></textarea>

			<div hlmInputGroupAddon align="block-end">
				<button hlmInputGroupButton class="ml-auto" size="sm" variant="default">Submit</button>
			</div>
		</div>
	`,
})
export class InputGroupCustomInputPreview {}