feature/select

apps/app/src/app/pages/(components)/components/(scroll-area)/scroll-area.page.ts

@@ -62,7 +62,7 @@ export const routeMeta: RouteMeta = {
 			</div>
 
 			<spartan-page-bottom-nav>
-				<spartan-page-bottom-nav-link href="separator" label="Separator" />
+				<spartan-page-bottom-nav-link href="select" label="Select" />
 				<spartan-page-bottom-nav-link direction="previous" href="radio-group" label="Radio Group" />
 			</spartan-page-bottom-nav>
 		</section>

apps/app/src/app/pages/(components)/components/(select)/select--multiple.preview.ts

@@ -0,0 +1,55 @@
+import { Component } from '@angular/core';
+import { provideIcons } from '@ng-icons/core';
+import { radixChevronDown, radixChevronUp } from '@ng-icons/radix-icons';
+import { BrnSelectImports } from '@spartan-ng/ui-select-brain';
+import { HlmSelectImports } from '@spartan-ng/ui-select-helm';
+
+@Component({
+	selector: 'spartan-select-multiple-preview',
+	standalone: true,
+	imports: [BrnSelectImports, HlmSelectImports],
+	providers: [provideIcons({ radixChevronUp, radixChevronDown })],
+	template: `
+		<brn-select class="inline-block" placeholder="Select some fruit" [multiple]="true">
+			<hlm-select-trigger class="w-56">
+				<hlm-select-value />
+			</hlm-select-trigger>
+			<hlm-select-content class="w-56">
+				<hlm-option value="Apples">Apples</hlm-option>
+				<hlm-option value="Bananas">Bananas</hlm-option>
+				<hlm-option value="Pears">Pears</hlm-option>
+				<hlm-option value="Strawberries">Strawberries</hlm-option>
+			</hlm-select-content>
+		</brn-select>
+	`,
+})
+export class SelectMultiplePreviewComponent {}
+
+export const multipleCode = `
+import { Component } from '@angular/core';
+import { provideIcons } from '@ng-icons/core';
+import { radixChevronDown, radixChevronUp } from '@ng-icons/radix-icons';
+import { BrnSelectImports } from '@spartan-ng/ui-select-brain';
+import { HlmSelectImports } from '@spartan-ng/ui-select-helm';
+
+@Component({
+  selector: 'spartan-select-multiple-preview',
+  standalone: true,
+  imports: [BrnSelectImports, HlmSelectImports],
+  providers: [provideIcons({ radixChevronUp, radixChevronDown })],
+  template: \`
+    <brn-select class="inline-block" placeholder="Select some fruit" [multiple]="true">
+      <hlm-select-trigger class="w-56">
+        <hlm-select-value />
+      </hlm-select-trigger>
+      <hlm-select-content class="w-56">
+        <hlm-option value="Apples">Apples</hlm-option>
+        <hlm-option value="Bananas">Bananas</hlm-option>
+        <hlm-option value="Pears">Pears</hlm-option>
+        <hlm-option value="Strawberries">Strawberries</hlm-option>
+      </hlm-select-content>
+    </brn-select>
+  \`,
+})
+export class SelectMultiplePreviewComponent {}
+`;

apps/app/src/app/pages/(components)/components/(select)/select--scrollable.preview.ts

@@ -0,0 +1,139 @@
+import { Component } from '@angular/core';
+import { BrnSelectImports } from '@spartan-ng/ui-select-brain';
+import { HlmSelectImports } from '@spartan-ng/ui-select-helm';
+
+@Component({
+	selector: 'spartan-select-scrollable-preview',
+	standalone: true,
+	imports: [BrnSelectImports, HlmSelectImports],
+	template: `
+		<hlm-select scrollable="true" placeholder="Select a timezone">
+			<hlm-select-trigger class="w-[280px]">
+				<hlm-select-value />
+			</hlm-select-trigger>
+			<hlm-select-content class="min-w-content max-h-96">
+				<hlm-select-scroll-up />
+
+				<hlm-select-group>
+					<hlm-select-label>North America</hlm-select-label>
+					<hlm-option value="est">Eastern Standard Time (EST)</hlm-option>
+					<hlm-option value="cst">Central Standard Time (CST)</hlm-option>
+					<hlm-option value="mst">Mountain Standard Time (MST)</hlm-option>
+					<hlm-option value="pst">Pacific Standard Time (PST)</hlm-option>
+					<hlm-option value="akst">Alaska Standard Time (AKST)</hlm-option>
+					<hlm-option value="hst">Hawaii Standard Time (HST)</hlm-option>
+				</hlm-select-group>
+
+				<hlm-select-group>
+					<hlm-select-label>Europe & Africa</hlm-select-label>
+					<hlm-option value="gmt">Greenwich Mean Time (GMT)</hlm-option>
+					<hlm-option value="cet">Central European Time (CET)</hlm-option>
+					<hlm-option value="eet">Eastern European Time (EET)</hlm-option>
+					<hlm-option value="west">Western European Summer Time (WEST)</hlm-option>
+					<hlm-option value="cat">Central Africa Time (CAT)</hlm-option>
+					<hlm-option value="eat">East Africa Time (EAT)</hlm-option>
+				</hlm-select-group>
+
+				<hlm-select-group>
+					<hlm-select-label>Asia</hlm-select-label>
+					<hlm-option value="msk">Moscow Time (MSK)</hlm-option>
+					<hlm-option value="ist">India Standard Time (IST)</hlm-option>
+					<hlm-option value="cst_china">China Standard Time (CST)</hlm-option>
+					<hlm-option value="jst">Japan Standard Time (JST)</hlm-option>
+					<hlm-option value="kst">Korea Standard Time (KST)</hlm-option>
+					<hlm-option value="ist_indonesia">Indonesia Central Standard Time (WITA)</hlm-option>
+				</hlm-select-group>
+
+				<hlm-select-group>
+					<hlm-select-label>Australia & Pacific</hlm-select-label>
+					<hlm-option value="awst">Australian Western Standard Time (AWST)</hlm-option>
+					<hlm-option value="acst">Australian Central Standard Time (ACST)</hlm-option>
+					<hlm-option value="aest">Australian Eastern Standard Time (AEST)</hlm-option>
+					<hlm-option value="nzst">New Zealand Standard Time (NZST)</hlm-option>
+					<hlm-option value="fjt">Fiji Time (FJT)</hlm-option>
+				</hlm-select-group>
+
+				<hlm-select-group>
+					<hlm-select-label>South America</hlm-select-label>
+					<hlm-option value="art">Argentina Time (ART)</hlm-option>
+					<hlm-option value="bot">Bolivia Time (BOT)</hlm-option>
+					<hlm-option value="brt">Brasilia Time (BRT)</hlm-option>
+					<hlm-option value="clt">Chile Standard Time (CLT)</hlm-option>
+				</hlm-select-group>
+
+				<hlm-select-scroll-down />
+			</hlm-select-content>
+		</hlm-select>
+	`,
+})
+export class SelectScrollablePreviewComponent {}
+
+export const scrollableCode = `import { Component } from '@angular/core';
+import { BrnSelectImports } from '@spartan-ng/ui-select-brain';
+import { HlmSelectImports } from '@spartan-ng/ui-select-helm';
+
+@Component({
+	selector: 'spartan-select-scrollable-preview',
+	standalone: true,
+	imports: [BrnSelectImports, HlmSelectImports],
+	template: \`
+		<hlm-select scrollable="true" placeholder="Select a timezone">
+			<hlm-select-trigger class="w-[280px]">
+				<hlm-select-value />
+			</hlm-select-trigger>
+			<hlm-select-content class="min-w-content max-h-96">
+				<hlm-select-scroll-up/>
+
+				<hlm-select-group>
+					<hlm-select-label>North America</hlm-select-label>
+					<hlm-option value="est">Eastern Standard Time (EST)</hlm-option>
+					<hlm-option value="cst">Central Standard Time (CST)</hlm-option>
+					<hlm-option value="mst">Mountain Standard Time (MST)</hlm-option>
+					<hlm-option value="pst">Pacific Standard Time (PST)</hlm-option>
+					<hlm-option value="akst">Alaska Standard Time (AKST)</hlm-option>
+					<hlm-option value="hst">Hawaii Standard Time (HST)</hlm-option>
+				</hlm-select-group>
+
+				<hlm-select-group>
+					<hlm-select-label>Europe & Africa</hlm-select-label>
+					<hlm-option value="gmt">Greenwich Mean Time (GMT)</hlm-option>
+					<hlm-option value="cet">Central European Time (CET)</hlm-option>
+					<hlm-option value="eet">Eastern European Time (EET)</hlm-option>
+					<hlm-option value="west">Western European Summer Time (WEST)</hlm-option>
+					<hlm-option value="cat">Central Africa Time (CAT)</hlm-option>
+					<hlm-option value="eat">East Africa Time (EAT)</hlm-option>
+				</hlm-select-group>
+
+				<hlm-select-group>
+					<hlm-select-label>Asia</hlm-select-label>
+					<hlm-option value="msk">Moscow Time (MSK)</hlm-option>
+					<hlm-option value="ist">India Standard Time (IST)</hlm-option>
+					<hlm-option value="cst_china">China Standard Time (CST)</hlm-option>
+					<hlm-option value="jst">Japan Standard Time (JST)</hlm-option>
+					<hlm-option value="kst">Korea Standard Time (KST)</hlm-option>
+					<hlm-option value="ist_indonesia">Indonesia Central Standard Time (WITA)</hlm-option>
+				</hlm-select-group>
+
+				<hlm-select-group>
+					<hlm-select-label>Australia & Pacific</hlm-select-label>
+					<hlm-option value="awst">Australian Western Standard Time (AWST)</hlm-option>
+					<hlm-option value="acst">Australian Central Standard Time (ACST)</hlm-option>
+					<hlm-option value="aest">Australian Eastern Standard Time (AEST)</hlm-option>
+					<hlm-option value="nzst">New Zealand Standard Time (NZST)</hlm-option>
+					<hlm-option value="fjt">Fiji Time (FJT)</hlm-option>
+				</hlm-select-group>
+
+				<hlm-select-group>
+					<hlm-select-label>South America</hlm-select-label>
+					<hlm-option value="art">Argentina Time (ART)</hlm-option>
+					<hlm-option value="bot">Bolivia Time (BOT)</hlm-option>
+					<hlm-option value="brt">Brasilia Time (BRT)</hlm-option>
+					<hlm-option value="clt">Chile Standard Time (CLT)</hlm-option>
+				</hlm-select-group>
+
+				<hlm-select-scroll-down/>
+			</hlm-select-content>
+		</hlm-select>
+	\`,
+})
+export class SelectScrollablePreviewComponent {}`;

apps/app/src/app/pages/(components)/components/(select)/select.page.ts

@@ -0,0 +1,93 @@
+import { RouteMeta } from '@analogjs/router';
+import { Component } from '@angular/core';
+import { hlmH4 } from '@spartan-ng/ui-typography-helm';
+import { CodePreviewDirective } from '../../../../shared/code/code-preview.directive';
+import { CodeComponent } from '../../../../shared/code/code.component';
+import { MainSectionDirective } from '../../../../shared/layout/main-section.directive';
+import { PageBottomNavLinkComponent } from '../../../../shared/layout/page-bottom-nav/page-bottom-nav-link.component';
+import { PageBottomNavComponent } from '../../../../shared/layout/page-bottom-nav/page-bottom-nav.component';
+import { PageNavComponent } from '../../../../shared/layout/page-nav/page-nav.component';
+import { SectionIntroComponent } from '../../../../shared/layout/section-intro.component';
+import { SectionSubHeadingComponent } from '../../../../shared/layout/section-sub-heading.component';
+import { TabsComponent } from '../../../../shared/layout/tabs.component';
+import { metaWith } from '../../../../shared/meta/meta.util';
+import { SelectMultiplePreviewComponent, multipleCode } from './select--multiple.preview';
+import { SelectScrollablePreviewComponent, scrollableCode } from './select--scrollable.preview';
+import { SelectPreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './select.preview';
+
+export const routeMeta: RouteMeta = {
+	data: { breadcrumb: 'Select' },
+	meta: metaWith('spartan/ui - Select', 'A control that allows the user to toggle between checked and not checked.'),
+	title: 'spartan/ui - Select',
+};
+@Component({
+	selector: 'spartan-select',
+	standalone: true,
+	imports: [
+		MainSectionDirective,
+		CodeComponent,
+		SectionIntroComponent,
+		SectionSubHeadingComponent,
+		TabsComponent,
+		CodePreviewDirective,
+		PageNavComponent,
+		PageBottomNavComponent,
+		PageBottomNavLinkComponent,
+		SelectPreviewComponent,
+		SelectMultiplePreviewComponent,
+		SelectScrollablePreviewComponent,
+	],
+	template: `
+		<section spartanMainSection>
+			<spartan-section-intro name="Select" lead="Select a value from a list of options." />
+
+			<spartan-tabs firstTab="Preview" secondTab="Code">
+				<div spartanCodePreview firstTab>
+					<spartan-select-preview />
+				</div>
+				<spartan-code secondTab [code]="defaultCode" />
+			</spartan-tabs>
+
+			<spartan-section-sub-heading id="installation">Installation</spartan-section-sub-heading>
+			<spartan-tabs class="mt-4" firstTab="Nx Plugin" secondTab="Angular CLI">
+				<spartan-code firstTab language="sh" code="npx nx g @spartan-ng/cli:ui select" />
+				<spartan-code secondTab language="sh" code="ng g @spartan-ng/cli:ui select" />
+			</spartan-tabs>
+
+			<spartan-section-sub-heading id="usage">Usage</spartan-section-sub-heading>
+			<div class="space-y-4">
+				<spartan-code [code]="defaultImports" />
+				<spartan-code [code]="defaultSkeleton" />
+			</div>
+
+			<spartan-section-sub-heading id="examples">Examples</spartan-section-sub-heading>
+			<h3 id="examples__multiple" class="${hlmH4} mb-2 mt-6">Multiple</h3>
+			<spartan-tabs firstTab="Preview" secondTab="Code">
+				<div spartanCodePreview firstTab>
+					<spartan-select-multiple-preview />
+				</div>
+				<spartan-code secondTab [code]="multipleCode" />
+			</spartan-tabs>
+			<h3 id="examples__scrollable" class="${hlmH4} mb-2 mt-6">Scrollable with Groups</h3>
+			<spartan-tabs firstTab="Preview" secondTab="Code">
+				<div spartanCodePreview firstTab>
+					<spartan-select-scrollable-preview />
+				</div>
+				<spartan-code secondTab [code]="scrollableCode" />
+			</spartan-tabs>
+
+			<spartan-page-bottom-nav>
+				<spartan-page-bottom-nav-link href="separator" label="Separator" />
+				<spartan-page-bottom-nav-link direction="previous" href="scroll-area" label="Scroll Area" />
+			</spartan-page-bottom-nav>
+		</section>
+		<spartan-page-nav />
+	`,
+})
+export default class SkeletonPageComponent {
+	protected readonly defaultCode = defaultCode;
+	protected readonly defaultSkeleton = defaultSkeleton;
+	protected readonly defaultImports = defaultImports;
+	protected readonly multipleCode = multipleCode;
+	protected readonly scrollableCode = scrollableCode;
+}

apps/app/src/app/pages/(components)/components/(select)/select.preview.ts

@@ -0,0 +1,69 @@
+import { Component } from '@angular/core';
+import { BrnSelectImports } from '@spartan-ng/ui-select-brain';
+import { HlmSelectImports } from '@spartan-ng/ui-select-helm';
+
+@Component({
+	selector: 'spartan-select-preview',
+	standalone: true,
+	imports: [BrnSelectImports, HlmSelectImports],
+	template: `
+		<brn-select class="inline-block" placeholder="Select an option">
+			<hlm-select-trigger class="w-56">
+				<hlm-select-value />
+			</hlm-select-trigger>
+			<hlm-select-content class="w-56">
+				<hlm-option value="Refresh">Refresh</hlm-option>
+				<hlm-option value="Settings">Settings</hlm-option>
+				<hlm-option value="Help">Help</hlm-option>
+				<hlm-option value="Signout">Sign out</hlm-option>
+			</hlm-select-content>
+		</brn-select>
+	`,
+})
+export class SelectPreviewComponent {}
+
+export const defaultCode = `
+import { Component } from '@angular/core';
+import { BrnSelectImports } from '@spartan-ng/ui-select-brain';
+import { HlmSelectImports } from '@spartan-ng/ui-select-helm';
+
+@Component({
+  selector: 'spartan-select-preview',
+  standalone: true,
+  imports: [BrnSelectImports, HlmSelectImports],
+  providers: [provideIcons({ radixChevronUp, radixChevronDown })],
+  template: \`
+    <brn-select class="inline-block" placeholder="Select an option">
+      <hlm-select-trigger class="w-56">
+        <hlm-select-value />
+      </hlm-select-trigger>
+      <hlm-select-content class="w-56">
+        <hlm-option value="Refresh">Refresh</hlm-option>
+        <hlm-option value="Settings">Settings</hlm-option>
+        <hlm-option value="Help">Help</hlm-option>
+        <hlm-option value="Signout">Sign out</hlm-option>
+      </hlm-select-content>
+    </brn-select>
+  \`,
+})
+export class SelectPreviewComponent {}
+`;
+
+export const defaultImports = `
+import { Component } from '@angular/core';
+import { BrnSelectImports } from '@spartan-ng/ui-select-brain';
+import { HlmSelectImports } from '@spartan-ng/ui-select-helm';
+`;
+export const defaultSkeleton = `
+<brn-select class="inline-block" placeholder="Select an option">
+	<hlm-select-trigger>
+		<hlm-select-value />
+	</hlm-select-trigger>
+	<hlm-select-content class="w-56">
+			<hlm-option value="Refresh">Refresh</hlm-option>
+			<hlm-option value="Settings">Settings</hlm-option>
+			<hlm-option value="Help">Help</hlm-option>
+			<hlm-option value="Signout">Sign out</hlm-option>
+	</hlm-select-content>
+</brn-select>
+`;

apps/app/src/app/pages/(components)/components/(separator)/separator.page.ts

@@ -57,7 +57,7 @@ export const routeMeta: RouteMeta = {
 
 			<spartan-page-bottom-nav>
 				<spartan-page-bottom-nav-link href="sheet" label="Sheet" />
-				<spartan-page-bottom-nav-link direction="previous" href="scroll-area" label="Scroll Area" />
+				<spartan-page-bottom-nav-link direction="previous" href="select" label="Select" />
 			</spartan-page-bottom-nav>
 		</section>
 		<spartan-page-nav />

apps/app/src/app/shared/layout/side-nav/side-nav-content.component.ts

@@ -93,10 +93,7 @@ import { SideNavLinksComponent } from './side-nav-links.directive';
 				<a (click)="linkClicked.emit()" spartanSideNavLink="/components/progress">Progress</a>
 				<a (click)="linkClicked.emit()" spartanSideNavLink="/components/radio-group">Radio Group</a>
 				<a (click)="linkClicked.emit()" spartanSideNavLink="/components/scroll-area">Scroll Area</a>
-				<a disabled spartanSideNavLink="/components/select">
-					Select
-					<spartan-side-nav-cs />
-				</a>
+				<a (click)="linkClicked.emit()" spartanSideNavLink="/components/select">Select</a>
 				<a (click)="linkClicked.emit()" spartanSideNavLink="/components/separator">Separator</a>
 				<a (click)="linkClicked.emit()" spartanSideNavLink="/components/sheet">Sheet</a>
 				<a (click)="linkClicked.emit()" spartanSideNavLink="/components/skeleton">Skeleton</a>