Skip to content

Commit f7d2210

Browse files
alexcibotarialexcibotari
committed
Update Elements
1 parent 9f633cf commit f7d2210

File tree

14 files changed

+299
-79
lines changed

14 files changed

+299
-79
lines changed

‎libs/ui/card/src/index.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { HlmCard } from './lib/hlm-card';
2+
import { HlmCardAction } from './lib/hlm-card-action';
3+
import { HlmCardContent } from './lib/hlm-card-content';
4+
import { HlmCardDescription } from './lib/hlm-card-description';
5+
import { HlmCardFooter } from './lib/hlm-card-footer';
6+
import { HlmCardHeader } from './lib/hlm-card-header';
7+
import { HlmCardTitle } from './lib/hlm-card-title';
8+
9+
export * from './lib/hlm-card';
10+
export * from './lib/hlm-card-action';
11+
export * from './lib/hlm-card-content';
12+
export * from './lib/hlm-card-description';
13+
export * from './lib/hlm-card-footer';
14+
export * from './lib/hlm-card-header';
15+
export * from './lib/hlm-card-title';
16+
17+
export const HlmCardImports = [
18+
HlmCard,
19+
HlmCardHeader,
20+
HlmCardFooter,
21+
HlmCardTitle,
22+
HlmCardDescription,
23+
HlmCardContent,
24+
HlmCardAction,
25+
] as const;

‎libs/ui/card/src/lib/hlm-card-action.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Directive, computed, input } from '@angular/core';
2+
import { hlm } from '@spartan-ng/helm/utils';
3+
import type { ClassValue } from 'clsx';
4+
5+
@Directive({
6+
selector: '[hlmCardAction]',
7+
host: {
8+
'[class]': '_computedClass()',
9+
},
10+
})
11+
export class HlmCardAction {
12+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
13+
protected readonly _computedClass = computed(() =>
14+
hlm('col-start-2 row-span-2 row-start-1 self-start justify-self-end', this.userClass()),
15+
);
16+
}

‎libs/ui/card/src/lib/hlm-card-content.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Directive, computed, input } from '@angular/core';
2+
import { hlm } from '@spartan-ng/helm/utils';
3+
import type { ClassValue } from 'clsx';
4+
5+
@Directive({
6+
selector: '[hlmCardContent]',
7+
host: {
8+
'[class]': '_computedClass()',
9+
},
10+
})
11+
export class HlmCardContent {
12+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
13+
protected readonly _computedClass = computed(() => hlm('px-6', this.userClass()));
14+
}

‎libs/ui/card/src/lib/hlm-card-description.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Directive, computed, input } from '@angular/core';
2+
import { hlm } from '@spartan-ng/helm/utils';
3+
import type { ClassValue } from 'clsx';
4+
5+
@Directive({
6+
selector: '[hlmCardDescription]',
7+
host: {
8+
'[class]': '_computedClass()',
9+
},
10+
})
11+
export class HlmCardDescription {
12+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
13+
protected readonly _computedClass = computed(() => hlm('text-muted-foreground text-sm', this.userClass()));
14+
}

‎libs/ui/card/src/lib/hlm-card-footer.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Directive, computed, input } from '@angular/core';
2+
import { hlm } from '@spartan-ng/helm/utils';
3+
import type { ClassValue } from 'clsx';
4+
5+
@Directive({
6+
selector: '[hlmCardFooter]',
7+
host: {
8+
'[class]': '_computedClass()',
9+
},
10+
})
11+
export class HlmCardFooter {
12+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
13+
protected readonly _computedClass = computed(() => hlm('flex items-center px-6 [.border-t]:pt-6', this.userClass()));
14+
}

‎libs/ui/card/src/lib/hlm-card-header.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Directive, computed, input } from '@angular/core';
2+
import { hlm } from '@spartan-ng/helm/utils';
3+
import type { ClassValue } from 'clsx';
4+
5+
@Directive({
6+
selector: '[hlmCardHeader]',
7+
host: {
8+
'[class]': '_computedClass()',
9+
},
10+
})
11+
export class HlmCardHeader {
12+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
13+
protected readonly _computedClass = computed(() =>
14+
hlm(
15+
'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
16+
this.userClass(),
17+
),
18+
);
19+
}

‎libs/ui/card/src/lib/hlm-card-title.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Directive, computed, input } from '@angular/core';
2+
import { hlm } from '@spartan-ng/helm/utils';
3+
import type { ClassValue } from 'clsx';
4+
5+
@Directive({
6+
selector: '[hlmCardTitle]',
7+
host: {
8+
'[class]': '_computedClass()',
9+
},
10+
})
11+
export class HlmCardTitle {
12+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
13+
protected readonly _computedClass = computed(() => hlm('leading-none font-semibold', this.userClass()));
14+
}

‎libs/ui/card/src/lib/hlm-card.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Directive, computed, input } from '@angular/core';
2+
import { hlm } from '@spartan-ng/helm/utils';
3+
import { type VariantProps, cva } from 'class-variance-authority';
4+
import type { ClassValue } from 'clsx';
5+
6+
export const cardVariants = cva('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', {
7+
variants: {},
8+
defaultVariants: {},
9+
});
10+
export type CardVariants = VariantProps<typeof cardVariants>;
11+
12+
@Directive({
13+
selector: '[hlmCard]',
14+
host: {
15+
'[class]': '_computedClass()',
16+
},
17+
})
18+
export class HlmCard {
19+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
20+
protected readonly _computedClass = computed(() => hlm(cardVariants(), this.userClass()));
21+
}

‎libs/ui/progress/src/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { HlmProgress } from './lib/hlm-progress';
2+
import { HlmProgressIndicator } from './lib/hlm-progress-indicator';
3+
4+
export * from './lib/hlm-progress';
5+
export * from './lib/hlm-progress-indicator';
6+
7+
export const HlmProgressImports = [HlmProgress, HlmProgressIndicator] as const;

‎libs/ui/progress/src/lib/hlm-progress-indicator.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { computed, Directive, input } from '@angular/core';
2+
import { BrnProgressIndicator, injectBrnProgress } from '@spartan-ng/brain/progress';
3+
import { hlm } from '@spartan-ng/helm/utils';
4+
import type { ClassValue } from 'clsx';
5+
6+
@Directive({
7+
selector: '[hlmProgressIndicator],hlm-progress-indicator',
8+
hostDirectives: [BrnProgressIndicator],
9+
host: {
10+
'[class]': '_computedClass()',
11+
'[class.animate-indeterminate]': '_indeterminate()',
12+
'[style.transform]': '_transform()',
13+
},
14+
})
15+
export class HlmProgressIndicator {
16+
private readonly _progress = injectBrnProgress();
17+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
18+
19+
protected readonly _computedClass = computed(() =>
20+
hlm('bg-primary h-full w-full flex-1 transition-all', this.userClass()),
21+
);
22+
23+
protected readonly _transform = computed(() => `translateX(-${100 - (this._progress.value() ?? 100)}%)`);
24+
25+
protected readonly _indeterminate = computed(
26+
() => this._progress.value() === null || this._progress.value() === undefined,
27+
);
28+
}

0 commit comments

Comments
 (0)