diff --git a/apps/app/src/app/pages/(components)/components/(radio-group)/radio-group--card.example.ts b/apps/app/src/app/pages/(components)/components/(radio-group)/radio-group--card.example.ts new file mode 100644 index 000000000..d760db63f --- /dev/null +++ b/apps/app/src/app/pages/(components)/components/(radio-group)/radio-group--card.example.ts @@ -0,0 +1,114 @@ +import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { provideIcons } from '@ng-icons/core'; +import { lucideApple, lucideCreditCard } from '@ng-icons/lucide'; +import { BrnRadioComponent } from '@spartan-ng/brain/radio-group'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { HlmRadioDirective, HlmRadioGroupComponent } from '@spartan-ng/ui-radiogroup-helm'; + +@Component({ + selector: 'spartan-radio-card-preview', + standalone: true, + providers: [provideIcons({ lucideCreditCard, lucideApple })], + imports: [FormsModule, BrnRadioComponent, HlmRadioDirective, HlmRadioGroupComponent, HlmIconComponent], + template: ` + + +
+ + + Card +
+ + +
+ + PayPal + + + PayPal +
+ + +
+ + Apple + + + Apple +
+ + + `, +}) +export class RadioGroupCardComponent { + public payment = 'card'; +} + +export const cardCode = ` +import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { provideIcons } from '@ng-icons/core'; +import { lucideApple, lucideCreditCard } from '@ng-icons/lucide'; +import { BrnRadioComponent } from '@spartan-ng/brain/radio-group'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { HlmRadioDirective, HlmRadioGroupComponent } from '@spartan-ng/ui-radiogroup-helm'; + +@Component({ + selector: 'spartan-radio-card-preview', + standalone: true, + providers: [provideIcons({ lucideCreditCard, lucideApple })], + imports: [FormsModule, BrnRadioComponent, HlmRadioDirective, HlmRadioGroupComponent, HlmIconComponent], + template: \` + + +
+ + Card +
+ + +
+ + PayPal + + + PayPal +
+ + +
+ + Apple + + + Apple +
+ + + \`, +}) +export class RadioGroupCardComponent { + public payment = 'card'; +} +`; diff --git a/apps/app/src/app/pages/(components)/components/(radio-group)/radio-group.page.ts b/apps/app/src/app/pages/(components)/components/(radio-group)/radio-group.page.ts index d56250787..d39d225e1 100644 --- a/apps/app/src/app/pages/(components)/components/(radio-group)/radio-group.page.ts +++ b/apps/app/src/app/pages/(components)/components/(radio-group)/radio-group.page.ts @@ -1,5 +1,6 @@ import type { 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'; @@ -11,7 +12,8 @@ import { SectionSubHeadingComponent } from '../../../../shared/layout/section-su import { TabsCliComponent } from '../../../../shared/layout/tabs-cli.component'; import { TabsComponent } from '../../../../shared/layout/tabs.component'; import { metaWith } from '../../../../shared/meta/meta.util'; -import { RadioGroupPreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './radio-group.preview'; +import { cardCode, RadioGroupCardComponent } from './radio-group--card.example'; +import { defaultCode, defaultImports, defaultSkeleton, RadioGroupPreviewComponent } from './radio-group.preview'; export const routeMeta: RouteMeta = { data: { breadcrumb: 'Radio Group' }, @@ -36,6 +38,8 @@ export const routeMeta: RouteMeta = { PageBottomNavComponent, PageBottomNavLinkComponent, RadioGroupPreviewComponent, + RadioGroupPreviewComponent, + RadioGroupCardComponent, ], template: `
@@ -64,6 +68,15 @@ export const routeMeta: RouteMeta = { + Examples +

Card Layout

+ +
+ +
+ + + @@ -76,4 +89,6 @@ export default class LabelPageComponent { protected readonly defaultCode = defaultCode; protected readonly defaultSkeleton = defaultSkeleton; protected readonly defaultImports = defaultImports; + + protected readonly cardCode = cardCode; } diff --git a/apps/app/src/app/pages/(components)/components/(radio-group)/radio-group.preview.ts b/apps/app/src/app/pages/(components)/components/(radio-group)/radio-group.preview.ts index 8fe1226b2..bf8617b3a 100644 --- a/apps/app/src/app/pages/(components)/components/(radio-group)/radio-group.preview.ts +++ b/apps/app/src/app/pages/(components)/components/(radio-group)/radio-group.preview.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { BrnRadioComponent, BrnRadioGroupComponent } from '@spartan-ng/brain/radio-group'; -import { HlmRadioDirective, HlmRadioGroupDirective, HlmRadioIndicatorComponent } from '@spartan-ng/ui-radiogroup-helm'; +import { BrnRadioComponent } from '@spartan-ng/brain/radio-group'; +import { HlmRadioDirective, HlmRadioGroupComponent, HlmRadioIndicatorComponent } from '@spartan-ng/ui-radiogroup-helm'; import { HlmSmallDirective } from '@spartan-ng/ui-typography-helm'; @Component({ @@ -9,16 +9,15 @@ import { HlmSmallDirective } from '@spartan-ng/ui-typography-helm'; standalone: true, imports: [ FormsModule, - BrnRadioGroupComponent, BrnRadioComponent, HlmRadioIndicatorComponent, HlmRadioDirective, - HlmRadioGroupDirective, + HlmRadioGroupComponent, HlmSmallDirective, ], template: ` Choose a version - + v16.1.4 @@ -35,7 +34,7 @@ import { HlmSmallDirective } from '@spartan-ng/ui-typography-helm'; v15.2.0 - + `, }) export class RadioGroupPreviewComponent { @@ -45,8 +44,8 @@ export class RadioGroupPreviewComponent { export const defaultCode = ` import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { BrnRadioComponent, BrnRadioGroupComponent } from '@spartan-ng/brain/radio-group'; -import { HlmRadioDirective, HlmRadioGroupDirective, HlmRadioIndicatorComponent } from '@spartan-ng/ui-radiogroup-helm'; +import { BrnRadioComponent } from '@spartan-ng/brain/radio-group'; +import { HlmRadioDirective, HlmRadioGroupComponent, HlmRadioIndicatorComponent } from '@spartan-ng/ui-radiogroup-helm'; import { HlmSmallDirective } from '@spartan-ng/ui-typography-helm'; @Component({ @@ -54,33 +53,32 @@ import { HlmSmallDirective } from '@spartan-ng/ui-typography-helm'; standalone: true, imports: [ FormsModule, - BrnRadioGroupComponent, - BrnRadioComponent, - HlmRadioIndicatorComponent, - HlmRadioDirective, - HlmRadioGroupDirective, - HlmSmallDirective, + BrnRadioComponent, + HlmRadioIndicatorComponent, + HlmRadioDirective, + HlmRadioGroupComponent, + HlmSmallDirective, ], template: \` Choose a version - - - - v16.1.4 - - - - v16.0.0 - - - - v15.8.0 - - - - v15.2.0 - - + + + + v16.1.4 + + + + v16.0.0 + + + + v15.8.0 + + + + v15.2.0 + + \`, }) export class RadioGroupPreviewComponent { @@ -89,18 +87,18 @@ export class RadioGroupPreviewComponent { `; export const defaultImports = ` -import { BrnRadioComponent, BrnRadioGroupComponent } from '@spartan-ng/brain/radio-group'; +import { BrnRadioComponent } from '@spartan-ng/brain/radio-group'; import { HlmRadioDirective, - HlmRadioGroupDirective, + HlmRadioGroupComponent, HlmRadioIndicatorComponent, } from '@spartan-ng/ui-radiogroup-helm'; `; export const defaultSkeleton = ` - + v16.1.4 - + `; diff --git a/libs/brain/radio-group/src/index.ts b/libs/brain/radio-group/src/index.ts index 22f19056f..071b58f3e 100644 --- a/libs/brain/radio-group/src/index.ts +++ b/libs/brain/radio-group/src/index.ts @@ -1,12 +1,12 @@ import { NgModule } from '@angular/core'; -import { BrnRadioGroupComponent } from './lib/brn-radio-group.component'; +import { BrnRadioGroupDirective } from './lib/brn-radio-group.directive'; import { BrnRadioComponent } from './lib/brn-radio.component'; -export * from './lib/brn-radio-group.component'; +export * from './lib/brn-radio-group.directive'; export * from './lib/brn-radio.component'; -export const BrnRadioGroupImports = [BrnRadioGroupComponent, BrnRadioComponent] as const; +export const BrnRadioGroupImports = [BrnRadioGroupDirective, BrnRadioComponent] as const; @NgModule({ imports: [...BrnRadioGroupImports], diff --git a/libs/brain/radio-group/src/lib/brn-radio-group.component.ts b/libs/brain/radio-group/src/lib/brn-radio-group.directive.ts similarity index 88% rename from libs/brain/radio-group/src/lib/brn-radio-group.component.ts rename to libs/brain/radio-group/src/lib/brn-radio-group.directive.ts index 79a8af9f0..f13553ca2 100644 --- a/libs/brain/radio-group/src/lib/brn-radio-group.component.ts +++ b/libs/brain/radio-group/src/lib/brn-radio-group.directive.ts @@ -2,9 +2,9 @@ import { BooleanInput } from '@angular/cdk/coercion'; import { booleanAttribute, - Component, computed, contentChildren, + Directive, forwardRef, input, model, @@ -18,28 +18,28 @@ import { BrnRadioChange, BrnRadioComponent } from './brn-radio.component'; export const BRN_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => BrnRadioGroupComponent), + useExisting: forwardRef(() => BrnRadioGroupDirective), multi: true, }; -@Component({ - selector: 'brn-radio-group', +@Directive({ + selector: '[brnRadioGroup]', standalone: true, - providers: [BRN_RADIO_GROUP_CONTROL_VALUE_ACCESSOR, provideBrnRadioGroupToken(BrnRadioGroupComponent)], + providers: [BRN_RADIO_GROUP_CONTROL_VALUE_ACCESSOR, provideBrnRadioGroupToken(BrnRadioGroupDirective)], host: { role: 'radiogroup', + '[dir]': 'direction()', '(focusout)': 'onTouched()', }, - template: '', }) -export class BrnRadioGroupComponent implements ControlValueAccessor { +export class BrnRadioGroupDirective implements ControlValueAccessor { private static _nextUniqueId = 0; protected onChange: ChangeFn = () => {}; protected onTouched: TouchFn = () => {}; - public readonly name = input(`brn-radio-group-${BrnRadioGroupComponent._nextUniqueId++}`); + public readonly name = input(`brn-radio-group-${BrnRadioGroupDirective._nextUniqueId++}`); /** * The value of the selected radio button. diff --git a/libs/brain/radio-group/src/lib/brn-radio-group.token.ts b/libs/brain/radio-group/src/lib/brn-radio-group.token.ts index a19dce4bf..b4237c623 100644 --- a/libs/brain/radio-group/src/lib/brn-radio-group.token.ts +++ b/libs/brain/radio-group/src/lib/brn-radio-group.token.ts @@ -1,12 +1,12 @@ import { ExistingProvider, inject, InjectionToken, Type } from '@angular/core'; -import type { BrnRadioGroupComponent } from './brn-radio-group.component'; +import type { BrnRadioGroupDirective } from './brn-radio-group.directive'; -const BrnRadioGroupToken = new InjectionToken>('BrnRadioGroupToken'); +const BrnRadioGroupToken = new InjectionToken>('BrnRadioGroupToken'); -export function provideBrnRadioGroupToken(component: Type>): ExistingProvider { - return { provide: BrnRadioGroupToken, useExisting: component }; +export function provideBrnRadioGroupToken(directive: Type>): ExistingProvider { + return { provide: BrnRadioGroupToken, useExisting: directive }; } -export function injectBrnRadioGroup(): BrnRadioGroupComponent { - return inject(BrnRadioGroupToken) as BrnRadioGroupComponent; +export function injectBrnRadioGroup(): BrnRadioGroupDirective { + return inject(BrnRadioGroupToken) as BrnRadioGroupDirective; } diff --git a/libs/ui/radio-group/helm/package.json b/libs/ui/radio-group/helm/package.json index 83d6dae6d..c2967e0a5 100644 --- a/libs/ui/radio-group/helm/package.json +++ b/libs/ui/radio-group/helm/package.json @@ -5,6 +5,7 @@ "dependencies": {}, "peerDependencies": { "@angular/core": ">=18.0.0", + "@spartan-ng/brain": "0.0.1-alpha.357", "@spartan-ng/ui-core": "0.0.1-alpha.357", "clsx": "^2.1.1" }, diff --git a/libs/ui/radio-group/helm/src/index.ts b/libs/ui/radio-group/helm/src/index.ts index 1deea33c9..a08898513 100644 --- a/libs/ui/radio-group/helm/src/index.ts +++ b/libs/ui/radio-group/helm/src/index.ts @@ -1,14 +1,14 @@ import { NgModule } from '@angular/core'; -import { HlmRadioGroupDirective } from './lib/hlm-radio-group.directive'; +import { HlmRadioGroupComponent } from './lib/hlm-radio-group.component'; import { HlmRadioIndicatorComponent } from './lib/hlm-radio-indicator.component'; import { HlmRadioDirective } from './lib/hlm-radio.directive'; -export * from './lib/hlm-radio-group.directive'; +export * from './lib/hlm-radio-group.component'; export * from './lib/hlm-radio-indicator.component'; export * from './lib/hlm-radio.directive'; -export const HlmRadioGroupImports = [HlmRadioGroupDirective, HlmRadioDirective, HlmRadioIndicatorComponent]; +export const HlmRadioGroupImports = [HlmRadioGroupComponent, HlmRadioDirective, HlmRadioIndicatorComponent]; @NgModule({ imports: [...HlmRadioGroupImports], diff --git a/libs/ui/radio-group/helm/src/lib/hlm-radio-group.component.ts b/libs/ui/radio-group/helm/src/lib/hlm-radio-group.component.ts new file mode 100644 index 000000000..02f25e1dc --- /dev/null +++ b/libs/ui/radio-group/helm/src/lib/hlm-radio-group.component.ts @@ -0,0 +1,23 @@ +import { Component, computed, input } from '@angular/core'; +import { BrnRadioGroupDirective } from '@spartan-ng/brain/radio-group'; +import { hlm } from '@spartan-ng/ui-core'; +import type { ClassValue } from 'clsx'; + +@Component({ + selector: 'hlm-radio-group', + standalone: true, + hostDirectives: [ + { + directive: BrnRadioGroupDirective, + inputs: ['name', 'value', 'disabled', 'required', 'direction'], + }, + ], + host: { + '[class]': '_computedClass()', + }, + template: '', +}) +export class HlmRadioGroupComponent { + public readonly userClass = input('', { alias: 'class' }); + protected _computedClass = computed(() => hlm('grid gap-2', this.userClass())); +} diff --git a/libs/ui/radio-group/helm/src/lib/hlm-radio-group.directive.ts b/libs/ui/radio-group/helm/src/lib/hlm-radio-group.directive.ts deleted file mode 100644 index d5238d107..000000000 --- a/libs/ui/radio-group/helm/src/lib/hlm-radio-group.directive.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Directive, computed, input } from '@angular/core'; -import { hlm } from '@spartan-ng/ui-core'; -import type { ClassValue } from 'clsx'; - -@Directive({ - selector: 'brn-radio-group[hlm],[hlmRadioGroup]', - standalone: true, - host: { - '[class]': '_computedClass()', - }, -}) -export class HlmRadioGroupDirective { - public readonly userClass = input('', { alias: 'class' }); - protected _computedClass = computed(() => hlm('block', this.userClass())); -} diff --git a/libs/ui/radio-group/helm/src/lib/hlm-radio.directive.ts b/libs/ui/radio-group/helm/src/lib/hlm-radio.directive.ts index 18c962cfb..37fe20575 100644 --- a/libs/ui/radio-group/helm/src/lib/hlm-radio.directive.ts +++ b/libs/ui/radio-group/helm/src/lib/hlm-radio.directive.ts @@ -12,6 +12,9 @@ import type { ClassValue } from 'clsx'; export class HlmRadioDirective { public readonly userClass = input('', { alias: 'class' }); protected _computedClass = computed(() => - hlm('group [&.brn-radio-disabled]:text-muted-foreground flex items-center space-x-2', this.userClass()), + hlm( + 'group [&.brn-radio-disabled]:text-muted-foreground flex items-center space-x-2 rtl:space-x-reverse', + this.userClass(), + ), ); } diff --git a/libs/ui/radio-group/radio-group.stories.ts b/libs/ui/radio-group/radio-group.stories.ts index 640dac433..88fbcb8ec 100644 --- a/libs/ui/radio-group/radio-group.stories.ts +++ b/libs/ui/radio-group/radio-group.stories.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { BrnRadioGroupComponent, BrnRadioGroupImports } from '@spartan-ng/brain/radio-group'; +import { BrnRadioGroupDirective, BrnRadioGroupImports } from '@spartan-ng/brain/radio-group'; import { type Meta, type StoryObj, moduleMetadata } from '@storybook/angular'; import { HlmButtonDirective } from '../button/helm/src'; import { HlmIconComponent } from '../icon/helm/src'; @@ -21,7 +21,7 @@ import { HlmRadioGroupImports } from './helm/src'; ], template: ` Choose a version - + v16.1.4 @@ -38,7 +38,7 @@ import { HlmRadioGroupImports } from './helm/src'; v15.2.0 - +
@@ -53,9 +53,9 @@ class RadioGroupExampleComponent { version: string | null = '16.1.4'; } -const meta: Meta = { +const meta: Meta = { title: 'Radio Group', - component: BrnRadioGroupComponent, + component: BrnRadioGroupDirective, tags: ['autodocs'], decorators: [ moduleMetadata({ @@ -66,7 +66,7 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { render: () => ({