Accordion

import { Component } from '@angular/core';
import { NgIcon } from '@ng-icons/core';
import { HlmAccordionImports } from '@spartan-ng/helm/accordion';
import { HlmIconImports } from '@spartan-ng/helm/icon';

@Component({
	selector: 'spartan-accordion-preview',
	imports: [HlmAccordionImports, NgIcon, HlmIconImports],
	host: {
		class: 'max-w-lg block h-[250px]',
	},
	template: `
		<hlm-accordion>
			<hlm-accordion-item>
				<h3 class="contents">
					<button hlmAccordionTrigger>
						Product Information
						<ng-icon name="lucideChevronDown" hlm hlmAccIcon />
					</button>
				</h3>
				<hlm-accordion-content>
					<p>
						Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it
						offers unparalleled performance and reliability.
					</p>

					<p>
						Key features include advanced processing capabilities, and an intuitive user interface designed for both
						beginners and experts.
					</p>
				</hlm-accordion-content>
			</hlm-accordion-item>

			<hlm-accordion-item>
				<h3 class="contents">
					<button hlmAccordionTrigger>
						Shipping Details
						<ng-icon name="lucideChevronDown" hlm hlmAccIcon />
					</button>
				</h3>
				<hlm-accordion-content>
					<p>
						We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5 business days,
						while express shipping ensures delivery within 1-2 business days.
					</p>

					<p>
						All orders are carefully packaged and fully insured. Track your shipment in real-time through our dedicated
						tracking portal.
					</p>
				</hlm-accordion-content>
			</hlm-accordion-item>

			<hlm-accordion-item>
				<h3 class="contents">
					<button hlmAccordionTrigger>
						Return Policy
						<ng-icon name="lucideChevronDown" hlm hlmAccIcon />
					</button>
				</h3>
				<hlm-accordion-content>
					<p>
						We stand behind our products with a comprehensive 30-day return policy. If you're not completely satisfied,
						simply return the item in its original condition.
					</p>

					<p>
						Our hassle-free return process includes free return shipping and full refunds processed within 48 hours of
						receiving the returned item.
					</p>
				</hlm-accordion-content>
			</hlm-accordion-item>
		</hlm-accordion>
	`,
})
export class AccordionPreview {}

import { Component, signal } from '@angular/core';
import { NgIcon } from '@ng-icons/core';
import { HlmAccordionImports } from '@spartan-ng/helm/accordion';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmIconImports } from '@spartan-ng/helm/icon';

@Component({
	selector: 'spartan-accordion-multiple',
	imports: [HlmButtonImports, HlmAccordionImports, HlmIconImports, NgIcon],
	host: {
		class: 'max-w-lg h-[320px] flex flex-col justify-between',
	},
	template: `
		<hlm-accordion type="multiple">
			<hlm-accordion-item [isOpened]="true">
				<h3 class="contents">
					<button hlmAccordionTrigger>
						Is it accessible?
						<ng-icon name="lucideChevronDown" hlm hlmAccIcon />
					</button>
				</h3>
				<hlm-accordion-content>Yes. It adheres to the WAI-ARIA design pattern.</hlm-accordion-content>
			</hlm-accordion-item>

			<hlm-accordion-item>
				<h3 class="contents">
					<button hlmAccordionTrigger>
						Is it styled?
						<ng-icon name="lucideChevronDown" hlm hlmAccIcon />
					</button>
				</h3>
				<hlm-accordion-content>
					Yes. It comes with default styles that match the other components' aesthetics.
				</hlm-accordion-content>
			</hlm-accordion-item>

			<hlm-accordion-item (openedChange)="_thirdOpened.set($event)" [isOpened]="_thirdOpened()">
				<h3 class="contents">
					<button hlmAccordionTrigger>
						Is it animated?
						<ng-icon name="lucideChevronDown" hlm hlmAccIcon />
					</button>
				</h3>
				<hlm-accordion-content>
					Yes. It's animated by default, but you can disable it if you prefer.
				</hlm-accordion-content>
			</hlm-accordion-item>
		</hlm-accordion>
		<button hlmBtn class="w-fit" (click)="toggleThird()">Toggle Third Item</button>
	`,
})
export class AccordionMultiple {
	protected readonly _thirdOpened = signal(false);
	toggleThird() {
		this._thirdOpened.set(!this._thirdOpened());
	}
}

import { Component } from '@angular/core';
import { NgIcon } from '@ng-icons/core';
import { HlmAccordionImports } from '@spartan-ng/helm/accordion';
import { HlmIconImports } from '@spartan-ng/helm/icon';

@Component({
	selector: 'spartan-accordion-borders',
	imports: [HlmAccordionImports, HlmIconImports, NgIcon],
	host: {
		class: 'max-w-lg h-[320px] flex flex-col justify-between',
	},
	template: `
		<hlm-accordion class="rounded-lg border">
			@for (item of items; track $index) {
				<hlm-accordion-item class="border-b px-4 last:border-b-0">
					<h3 class="contents">
						<button hlmAccordionTrigger>
							{{ item.trigger }}
							<ng-icon name="lucideChevronDown" hlm hlmAccIcon />
						</button>
					</h3>
					<hlm-accordion-content>{{ item.content }}</hlm-accordion-content>
				</hlm-accordion-item>
			}
		</hlm-accordion>
	`,
})
export class AccordionBorders {
	public items = [
		{
			value: 'billing',
			trigger: 'How does billing work?',
			content:
				'We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.',
		},
		{
			value: 'security',
			trigger: 'Is my data secure?',
			content:
				'Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols.',
		},
		{
			value: 'integration',
			trigger: 'What integrations do you support?',
			content:
				'We integrate with 500+ popular tools including Slack, Zapier, Salesforce, HubSpot, and more. You can also build custom integrations using our REST API and webhooks.',
		},
	];
}

import { Component } from '@angular/core';
import { NgIcon } from '@ng-icons/core';
import { HlmAccordionImports } from '@spartan-ng/helm/accordion';
import { HlmCardImports } from '@spartan-ng/helm/card';
import { HlmIconImports } from '@spartan-ng/helm/icon';

@Component({
	selector: 'spartan-accordion-card',
	imports: [HlmAccordionImports, HlmIconImports, HlmCardImports, NgIcon],
	host: {
		class: 'max-w-lg h-[32rem] md:h-[28rem] flex flex-col justify-between',
	},
	template: `
		<hlm-card class="w-full max-w-sm">
			<hlm-card-header>
				<h3 hlmCardTitle>Subscription & Billing</h3>
				<p hlmCardDescription>Common questions about your account, plans, payments and cancellations.</p>
			</hlm-card-header>
			<div hlmCardContent>
				<hlm-accordion>
					@for (item of items; track $index) {
						<hlm-accordion-item>
							<h3 class="contents">
								<button hlmAccordionTrigger>
									{{ item.trigger }}
									<ng-icon name="lucideChevronDown" hlm hlmAccIcon />
								</button>
							</h3>
							<hlm-accordion-content>{{ item.content }}</hlm-accordion-content>
						</hlm-accordion-item>
					}
				</hlm-accordion>
			</div>
		</hlm-card>
	`,
})
export class AccordionCard {
	public items = [
		{
			value: 'plans',
			trigger: 'What subscription plans do you offer?',
			content:
				'We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features.',
		},
		{
			value: 'billing',
			trigger: 'How does billing work?',
			content:
				"Billing occurs automatically at the start of each billing cycle. We accept all major credit cards, PayPal, and ACH transfers for enterprise customers. You'll receive an invoice via email after each payment.",
		},
		{
			value: 'cancel',
			trigger: 'How do I cancel my subscription?',
			content:
				'You can cancel your subscription anytime from your account settings. There are no cancellation fees or penalties. Your access will continue until the end of your current billing period.',
		},
	];
}