Skip to content

Commit 2dedc2b

Browse files
alexcibotarialexcibotari
committed
Update Content Section
1 parent b3e4013 commit 2dedc2b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+689
-133
lines changed

‎libs/ui/button-group/src/index.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { HlmButtonGroup } from './lib/hlm-button-group';
2+
import { HlmButtonGroupSeparator } from './lib/hlm-button-group-separator';
3+
import { HlmButtonGroupText } from './lib/hlm-button-group-text';
4+
5+
export * from './lib/hlm-button-group';
6+
export * from './lib/hlm-button-group-separator';
7+
export * from './lib/hlm-button-group-text';
8+
9+
export const HlmButtonGroupImports = [HlmButtonGroup, HlmButtonGroupText, HlmButtonGroupSeparator] as const;

‎libs/ui/button-group/src/lib/hlm-button-group-separator.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { computed, Directive, input } from '@angular/core';
2+
import { BrnSeparator, provideBrnSeparatorConfig } from '@spartan-ng/brain/separator';
3+
import { hlm } from '@spartan-ng/helm/utils';
4+
import type { ClassValue } from 'clsx';
5+
6+
@Directive({
7+
selector: '[hlmButtonGroupSeparator],hlm-button-group-separator',
8+
providers: [provideBrnSeparatorConfig({ orientation: 'vertical' })],
9+
hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
10+
host: {
11+
'data-slot': 'button-group-separator',
12+
'[class]': '_computedClass()',
13+
},
14+
})
15+
export class HlmButtonGroupSeparator {
16+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
17+
18+
protected readonly _computedClass = computed(() =>
19+
hlm(
20+
'bg-input relative inline-flex shrink-0 self-stretch data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-px',
21+
this.userClass(),
22+
),
23+
);
24+
}

‎libs/ui/button-group/src/lib/hlm-button-group-text.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { computed, Directive, input } from '@angular/core';
2+
import { hlm } from '@spartan-ng/helm/utils';
3+
import { ClassValue } from 'clsx';
4+
5+
@Directive({
6+
selector: '[hlmButtonGroupText],hlm-button-group-text',
7+
host: {
8+
'[class]': '_computedClass()',
9+
},
10+
})
11+
export class HlmButtonGroupText {
12+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
13+
14+
protected readonly _computedClass = computed(() =>
15+
hlm(
16+
"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_ng-icon]:pointer-events-none [&_ng-icon:not([class*='text-'])]:text-base",
17+
this.userClass(),
18+
),
19+
);
20+
}

‎libs/ui/button-group/src/lib/hlm-button-group.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { computed, Directive, input } from '@angular/core';
2+
import { hlm } from '@spartan-ng/helm/utils';
3+
import { cva } from 'class-variance-authority';
4+
import { ClassValue } from 'clsx';
5+
6+
export const buttonGroupVariants = cva(
7+
"flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
8+
{
9+
variants: {
10+
orientation: {
11+
horizontal:
12+
'[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
13+
vertical:
14+
'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
15+
},
16+
},
17+
defaultVariants: {
18+
orientation: 'horizontal',
19+
},
20+
},
21+
);
22+
23+
@Directive({
24+
selector: '[hlmButtonGroup],hlm-button-group',
25+
host: {
26+
'data-slot': 'button-group',
27+
role: 'group',
28+
'[class]': '_computedClass()',
29+
'[attr.data-orientation]': 'orientation()',
30+
},
31+
})
32+
export class HlmButtonGroup {
33+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
34+
public readonly orientation = input<'horizontal' | 'vertical'>('horizontal');
35+
36+
protected readonly _computedClass = computed(() =>
37+
hlm(buttonGroupVariants({ orientation: this.orientation() }), this.userClass()),
38+
);
39+
}

‎libs/ui/input-group/src/index.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { HlmInputGroup } from './lib/hlm-input-group';
2+
import { HlmInputGroupAddon } from './lib/hlm-input-group-addon';
3+
import { HlmInputGroupButton } from './lib/hlm-input-group-button';
4+
import { HlmInputGroupInput } from './lib/hlm-input-group-input';
5+
import { HlmInputGroupText } from './lib/hlm-input-group-text';
6+
import { HlmInputGroupTextarea } from './lib/hlm-input-group-textarea';
7+
8+
export * from './lib/hlm-input-group';
9+
export * from './lib/hlm-input-group-addon';
10+
export * from './lib/hlm-input-group-button';
11+
export * from './lib/hlm-input-group-input';
12+
export * from './lib/hlm-input-group-text';
13+
export * from './lib/hlm-input-group-textarea';
14+
15+
export const HlmInputGroupImports = [
16+
HlmInputGroup,
17+
HlmInputGroupAddon,
18+
HlmInputGroupButton,
19+
HlmInputGroupInput,
20+
HlmInputGroupText,
21+
HlmInputGroupTextarea,
22+
] as const;

‎libs/ui/input-group/src/lib/hlm-input-group-addon.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { computed, Directive, input } from '@angular/core';
2+
import { hlm } from '@spartan-ng/helm/utils';
3+
import { cva, type VariantProps } from 'class-variance-authority';
4+
import type { ClassValue } from 'clsx';
5+
6+
const inputGroupAddonVariants = cva(
7+
"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>ng-icon:not([class*='text-'])]:text-base",
8+
{
9+
variants: {
10+
align: {
11+
'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
12+
'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
13+
'block-start':
14+
'order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3',
15+
'block-end': 'order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3',
16+
},
17+
},
18+
defaultVariants: {
19+
align: 'inline-start',
20+
},
21+
},
22+
);
23+
24+
type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;
25+
26+
@Directive({
27+
selector: 'hlm-input-group-addon,[hlmInputGroupAddon]',
28+
host: {
29+
role: 'group',
30+
'data-slot': 'input-group-addon',
31+
'[attr.data-align]': 'align()',
32+
'[class]': '_computedClass()',
33+
},
34+
})
35+
export class HlmInputGroupAddon {
36+
public readonly align = input<InputGroupAddonVariants['align']>('inline-start');
37+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
38+
39+
protected readonly _computedClass = computed(() =>
40+
hlm(inputGroupAddonVariants({ align: this.align() }), this.userClass()),
41+
);
42+
}

‎libs/ui/input-group/src/lib/hlm-input-group-button.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { computed, Directive, effect, inject, input } from '@angular/core';
2+
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
3+
import { hlm } from '@spartan-ng/helm/utils';
4+
import { cva, type VariantProps } from 'class-variance-authority';
5+
import type { ClassValue } from 'clsx';
6+
7+
const inputGroupAddonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
8+
variants: {
9+
size: {
10+
xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>ng-icon]:px-2 [&>ng-icon:not([class*='text-'])]:text-sm",
11+
sm: 'h-8 gap-1.5 rounded-md px-2.5 has-[>ng-icon]:px-2.5',
12+
'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>ng-icon]:p-0',
13+
'icon-sm': 'size-8 p-0 has-[>ng-icon]:p-0',
14+
},
15+
},
16+
defaultVariants: {
17+
size: 'xs',
18+
},
19+
});
20+
21+
type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;
22+
23+
@Directive({
24+
selector: 'button[hlmInputGroupButton]',
25+
providers: [
26+
provideBrnButtonConfig({
27+
variant: 'ghost',
28+
}),
29+
],
30+
hostDirectives: [
31+
{
32+
directive: HlmButton,
33+
inputs: ['variant'],
34+
},
35+
],
36+
host: {
37+
'[attr.data-size]': 'size()',
38+
'[type]': 'type()',
39+
},
40+
})
41+
export class HlmInputGroupButton {
42+
private readonly _hlmButton = inject(HlmButton);
43+
public readonly size = input<InputGroupAddonVariants['size']>('xs');
44+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
45+
public readonly type = input<'button' | 'submit' | 'reset'>('button');
46+
47+
protected readonly _computedClass = computed(() =>
48+
hlm(inputGroupAddonVariants({ size: this.size() }), this.userClass()),
49+
);
50+
51+
constructor() {
52+
effect(() => {
53+
this._hlmButton.setClass(this._computedClass());
54+
});
55+
}
56+
}

‎libs/ui/input-group/src/lib/hlm-input-group-input.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { computed, Directive, effect, inject, input } from '@angular/core';
2+
import { HlmInput } from '@spartan-ng/helm/input';
3+
import { hlm } from '@spartan-ng/helm/utils';
4+
import type { ClassValue } from 'clsx';
5+
6+
@Directive({
7+
selector: 'input[hlmInputGroupInput]',
8+
hostDirectives: [HlmInput],
9+
host: {
10+
'data-slot': 'input-group-control',
11+
'[class]': '_computedClass()',
12+
},
13+
})
14+
export class HlmInputGroupInput {
15+
private readonly _hlmInput = inject(HlmInput);
16+
17+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
18+
19+
protected readonly _computedClass = computed(() =>
20+
hlm(
21+
'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
22+
this.userClass(),
23+
),
24+
);
25+
26+
constructor() {
27+
effect(() => {
28+
this._hlmInput.setClass(this._computedClass());
29+
});
30+
}
31+
}

‎libs/ui/input-group/src/lib/hlm-input-group-text.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { computed, Directive, input } from '@angular/core';
2+
import { hlm } from '@spartan-ng/helm/utils';
3+
import type { ClassValue } from 'clsx';
4+
5+
@Directive({
6+
selector: 'span[hlmInputGroupText]',
7+
host: {
8+
'[class]': '_computedClass()',
9+
},
10+
})
11+
export class HlmInputGroupText {
12+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
13+
14+
protected readonly _computedClass = computed(() =>
15+
hlm(
16+
`text-muted-foreground flex items-center gap-2 text-sm [&_ng-icon]:pointer-events-none [&_ng-icon:not([class*='text-'])]:text-base`,
17+
this.userClass(),
18+
),
19+
);
20+
}

‎libs/ui/input-group/src/lib/hlm-input-group-textarea.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { computed, Directive, effect, inject, input } from '@angular/core';
2+
import { HlmTextarea } from '@spartan-ng/helm/textarea';
3+
import { hlm } from '@spartan-ng/helm/utils';
4+
import type { ClassValue } from 'clsx';
5+
6+
@Directive({
7+
selector: 'textarea[hlmInputGroupTextarea]',
8+
hostDirectives: [HlmTextarea],
9+
host: {
10+
'data-slot': 'input-group-control',
11+
'[class]': '_computedClass()',
12+
},
13+
})
14+
export class HlmInputGroupTextarea {
15+
private readonly _hlmInput = inject(HlmTextarea);
16+
17+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
18+
19+
protected readonly _computedClass = computed(() =>
20+
hlm(
21+
'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
22+
this.userClass(),
23+
),
24+
);
25+
26+
constructor() {
27+
effect(() => {
28+
this._hlmInput.setClass(this._computedClass());
29+
});
30+
}
31+
}

0 commit comments

Comments
 (0)