11 | ML
12 |
40 |
41 | ML
42 |
43 |
11 | Messages
12 | 12
13 |
14 |
15 | `,
16 | })
17 | export class Badge07Component {}
18 |
19 | export const badge07Code = `
20 | import { Component } from '@angular/core';
21 | import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
22 |
23 | @Component({
24 | selector: 'sim-badge-07',
25 | standalone: true,
26 | imports: [HlmBadgeDirective],
27 | template: \`
28 |
29 |
30 | Messages
31 | 12
32 |
33 |
34 | \`,
35 | })
36 | export class Badge07Component {}
37 | `;
38 |
--------------------------------------------------------------------------------
/src/app/components/badge/badge-08.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
3 |
4 | @Component({
5 | selector: 'sim-badge-08',
6 | standalone: true,
7 | imports: [HlmBadgeDirective],
8 | template: `
9 |
10 |
11 |
12 | Badge
13 |
14 |
15 | `,
16 | })
17 | export class Badge08Component {}
18 |
19 | export const badge08Code = `
20 | import { Component } from '@angular/core';
21 | import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
22 |
23 | @Component({
24 | selector: 'sim-badge-08',
25 | standalone: true,
26 | imports: [HlmBadgeDirective],
27 | template: \`
28 |
29 |
30 |
31 | Badge
32 |
33 |
34 | \`,
35 | })
36 | export class Badge08Component {}
37 | `;
38 |
--------------------------------------------------------------------------------
/src/app/components/badge/badge-09.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
3 |
4 | @Component({
5 | selector: 'sim-badge-09',
6 | standalone: true,
7 | imports: [HlmBadgeDirective],
8 | template: `
9 |
10 |
11 |
12 | Badge
13 |
14 |
15 | `,
16 | })
17 | export class Badge09Component {}
18 |
19 | export const badge09Code = `
20 | import { Component } from '@angular/core';
21 | import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
22 |
23 | @Component({
24 | selector: 'sim-badge-09',
25 | standalone: true,
26 | imports: [HlmBadgeDirective],
27 | template: \`
28 |
29 |
30 |
31 | Badge
32 |
33 |
34 | \`,
35 | })
36 | export class Badge09Component {}
37 | `;
38 |
--------------------------------------------------------------------------------
/src/app/components/badge/badge-10.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
3 |
4 | @Component({
5 | selector: 'sim-badge-10',
6 | standalone: true,
7 | imports: [HlmBadgeDirective],
8 | template: `
9 |
10 |
11 |
12 | Badge
13 |
14 |
15 | `,
16 | })
17 | export class Badge10Component {}
18 |
19 | export const badge10Code = `
20 | import { Component } from '@angular/core';
21 | import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
22 |
23 | @Component({
24 | selector: 'sim-badge-10',
25 | standalone: true,
26 | imports: [HlmBadgeDirective],
27 | template: \`
28 |
29 |
30 |
31 | Badge
32 |
33 |
34 | \`,
35 | })
36 | export class Badge10Component {}
37 | `;
38 |
--------------------------------------------------------------------------------
/src/app/components/badge/badge-13.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
3 |
4 | @Component({
5 | selector: 'sim-badge-13',
6 | standalone: true,
7 | imports: [HlmBadgeDirective],
8 | template: `
9 |
10 |
11 |
12 | Badge
13 |
14 |
15 | `,
16 | })
17 | export class Badge13Component {}
18 |
19 | export const badge13Code = `
20 | import { Component } from '@angular/core';
21 | import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
22 |
23 | @Component({
24 | selector: 'sim-badge-13',
25 | standalone: true,
26 | imports: [HlmBadgeDirective],
27 | template: \`
28 |
29 |
30 |
31 | Badge
32 |
33 |
34 | \`,
35 | })
36 | export class Badge13Component {}
37 | `;
38 |
--------------------------------------------------------------------------------
/src/app/components/badge/badge-14.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
3 |
4 | @Component({
5 | selector: 'sim-badge-14',
6 | standalone: true,
7 | imports: [HlmBadgeDirective],
8 | template: `
9 |
10 |
11 |
12 | Badge
13 |
14 |
15 | `,
16 | })
17 | export class Badge14Component {}
18 |
19 | export const badge14Code = `
20 | import { Component } from '@angular/core';
21 | import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
22 |
23 | @Component({
24 | selector: 'sim-badge-14',
25 | standalone: true,
26 | imports: [HlmBadgeDirective],
27 | template: \`
28 |
29 |
30 |
31 | Badge
32 |
33 |
34 | \`,
35 | })
36 | export class Badge14Component {}
37 | `;
38 |
--------------------------------------------------------------------------------
/src/app/components/badge/badge-15.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
3 |
4 | @Component({
5 | selector: 'sim-badge-15',
6 | standalone: true,
7 | imports: [HlmBadgeDirective],
8 | template: `
9 |
10 |
11 |
12 | Badge
13 |
14 |
15 | `,
16 | })
17 | export class Badge15Component {}
18 |
19 | export const badge15Code = `
20 | import { Component } from '@angular/core';
21 | import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
22 |
23 | @Component({
24 | selector: 'sim-badge-15',
25 | standalone: true,
26 | imports: [HlmBadgeDirective],
27 | template: \`
28 |
29 |
30 |
31 | Badge
32 |
33 |
34 | \`,
35 | })
36 | export class Badge15Component {}
37 | `;
38 |
--------------------------------------------------------------------------------
/src/app/components/badge/index.ts:
--------------------------------------------------------------------------------
1 | export * from './badge-01.component';
2 | export * from './badge-02.component';
3 | export * from './badge-03.component';
4 | export * from './badge-04.component';
5 | export * from './badge-05.component';
6 | export * from './badge-06.component';
7 | export * from './badge-07.component';
8 | export * from './badge-08.component';
9 | export * from './badge-09.component';
10 | export * from './badge-10.component';
11 | export * from './badge-11.component';
12 | export * from './badge-12.component';
13 | export * from './badge-13.component';
14 | export * from './badge-14.component';
15 | export * from './badge-15.component';
16 | export * from './badge-16.component';
17 | export * from './badge-17.component';
18 | export * from './badge-18.component';
19 | export * from './badge-19.component';
20 | export * from './badge-20.component';
21 | export * from './badge-21.component';
22 | export * from './badge-22.component';
23 | export * from './badge-23.component';
24 |
--------------------------------------------------------------------------------
/src/app/components/banner/index.ts:
--------------------------------------------------------------------------------
1 | export * from './banner-01.component';
2 | export * from './banner-02.component';
3 | export * from './banner-03.component';
4 | export * from './banner-04.component';
5 | export * from './banner-05.component';
6 | export * from './banner-06.component';
7 | export * from './banner-07.component';
8 | export * from './banner-08.component';
9 | export * from './banner-09.component';
10 | export * from './banner-10.component';
11 | export * from './banner-11.component';
12 |
--------------------------------------------------------------------------------
/src/app/components/breadcrumb/index.ts:
--------------------------------------------------------------------------------
1 | export * from './breadcrumb-01.component';
2 | export * from './breadcrumb-02.component';
3 | export * from './breadcrumb-03.component';
4 | export * from './breadcrumb-04.component';
5 | export * from './breadcrumb-05.component';
6 | export * from './breadcrumb-06.component';
7 | export * from './breadcrumb-07.component';
8 | export * from './breadcrumb-08.component';
9 | export * from './breadcrumb-09.component';
10 |
--------------------------------------------------------------------------------
/src/app/components/button/button-01.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
3 |
4 | @Component({
5 | selector: 'sim-button-01',
6 | standalone: true,
7 | imports: [HlmButtonDirective],
8 | template: `
9 |
10 | `,
11 | })
12 | export class Button01Component {}
13 |
14 | export const button01Code = `
15 | import { Component } from '@angular/core';
16 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
17 |
18 | @Component({
19 | selector: 'sim-button-01',
20 | standalone: true,
21 | imports: [HlmButtonDirective],
22 | template: \` \`,
23 | })
24 | export class Button01Component {}
25 | `;
26 |
--------------------------------------------------------------------------------
/src/app/components/button/button-02.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { NgIcon, provideIcons } from '@ng-icons/core';
3 | import { lucideTrash } from '@ng-icons/lucide';
4 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
5 | import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
6 |
7 | @Component({
8 | selector: 'sim-button-02',
9 | standalone: true,
10 | imports: [NgIcon, HlmButtonDirective, HlmIconDirective],
11 | providers: [provideIcons({ lucideTrash })],
12 | template: `
13 |
17 | `,
18 | })
19 | export class Button02Component {}
20 |
21 | export const button02Code = `
22 | import { Component } from '@angular/core';
23 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
24 | import { NgIcon, provideIcons } from '@ng-icons/core';
25 | import { lucideTrash } from '@ng-icons/lucide';
26 | import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
27 |
28 | @Component({
29 | selector: 'sim-button-02',
30 | standalone: true,
31 | imports: [NgIcon, HlmButtonDirective, HlmIconDirective],
32 | providers: [provideIcons({ lucideTrash })],
33 | template: \`
34 |
38 | \`,
39 | })
40 | export class Button02Component {}
41 | `;
42 |
--------------------------------------------------------------------------------
/src/app/components/button/button-03.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
3 |
4 | @Component({
5 | selector: 'sim-button-03',
6 | standalone: true,
7 | imports: [HlmButtonDirective],
8 | template: `
9 |
10 | `,
11 | })
12 | export class Button03Component {}
13 |
14 | export const button03Code = `
15 | import { Component } from '@angular/core';
16 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
17 |
18 | @Component({
19 | selector: 'sim-button-03',
20 | standalone: true,
21 | imports: [HlmButtonDirective],
22 | template: \` \`,
23 | })
24 | export class Button03Component {}
25 | `;
26 |
--------------------------------------------------------------------------------
/src/app/components/button/button-04.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { NgIcon, provideIcons } from '@ng-icons/core';
3 | import { lucideArchive } from '@ng-icons/lucide';
4 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
5 | import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
6 |
7 | @Component({
8 | selector: 'sim-button-04',
9 | standalone: true,
10 | imports: [NgIcon, HlmButtonDirective, HlmIconDirective],
11 | providers: [provideIcons({ lucideArchive })],
12 | template: `
13 |
17 | `,
18 | })
19 | export class Button04Component {}
20 |
21 | export const button04Code = `
22 | import { Component } from '@angular/core';
23 | import { NgIcon, provideIcons } from '@ng-icons/core';
24 | import { lucideArchive } from '@ng-icons/lucide';
25 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
26 | import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
27 |
28 | @Component({
29 | selector: 'sim-button-04',
30 | standalone: true,
31 | imports: [NgIcon, HlmButtonDirective, HlmIconDirective],
32 | providers: [provideIcons({ lucideArchive })],
33 | template: \`
34 |
38 | \`,
39 | })
40 | export class Button04Component {}
41 | `;
42 |
--------------------------------------------------------------------------------
/src/app/components/button/button-05.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
3 |
4 | @Component({
5 | selector: 'sim-button-05',
6 | standalone: true,
7 | imports: [HlmButtonDirective],
8 | template: `
9 |
10 | `,
11 | })
12 | export class Button05Component {}
13 |
14 | export const button05Code = `
15 | import { Component } from '@angular/core';
16 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
17 |
18 | @Component({
19 | selector: 'sim-button-05',
20 | standalone: true,
21 | imports: [HlmButtonDirective],
22 | template: \` \`,
23 | })
24 | export class Button05Component {}
25 | `;
26 |
--------------------------------------------------------------------------------
/src/app/components/button/button-06.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { NgIcon, provideIcons } from '@ng-icons/core';
3 | import { lucideX } from '@ng-icons/lucide';
4 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
5 | import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
6 |
7 | @Component({
8 | selector: 'sim-button-06',
9 | standalone: true,
10 | providers: [provideIcons({ lucideX })],
11 | imports: [HlmButtonDirective, NgIcon, HlmIconDirective],
12 | template: `
13 |
17 | `,
18 | })
19 | export class Button06Component {}
20 |
21 | export const button06Code = `
22 | import { Component } from '@angular/core';
23 | import { NgIcon, provideIcons } from '@ng-icons/core';
24 | import { lucideX } from '@ng-icons/lucide';
25 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
26 | import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
27 |
28 | @Component({
29 | selector: 'sim-button-06',
30 | standalone: true,
31 | providers: [provideIcons({ lucideX })],
32 | imports: [HlmButtonDirective, NgIcon, HlmIconDirective],
33 | template: \`
34 |
38 | \`,
39 | })
40 | export class Button06Component {}
41 | `;
42 |
--------------------------------------------------------------------------------
/src/app/components/button/button-07.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { NgIcon, provideIcons } from '@ng-icons/core';
3 | import { lucideFlame } from '@ng-icons/lucide';
4 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
5 | import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
6 |
7 | @Component({
8 | selector: 'sim-button-07',
9 | standalone: true,
10 | providers: [provideIcons({ lucideFlame })],
11 | imports: [HlmButtonDirective, NgIcon, HlmIconDirective],
12 | template: `
13 |
17 | `,
18 | })
19 | export class Button07Component {}
20 |
21 | export const button07Code = `
22 | import { Component } from '@angular/core';
23 | import { NgIcon, provideIcons } from '@ng-icons/core';
24 | import { lucideFlame } from '@ng-icons/lucide';
25 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
26 | import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
27 |
28 | @Component({
29 | selector: 'sim-button-07',
30 | standalone: true,
31 | providers: [provideIcons({ lucideFlame })],
32 | imports: [HlmButtonDirective, NgIcon, HlmIconDirective],
33 | template: \`
34 |
38 | \`,
39 | })
40 | export class Button07Component {}
41 | `;
42 |
--------------------------------------------------------------------------------
/src/app/components/button/button-11.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { NgIcon, provideIcons } from '@ng-icons/core';
3 | import { lucideChevronDown } from '@ng-icons/lucide';
4 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
5 | import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
6 |
7 | @Component({
8 | selector: 'sim-button-11',
9 | standalone: true,
10 | providers: [provideIcons({ lucideChevronDown })],
11 | imports: [HlmButtonDirective, NgIcon, HlmIconDirective],
12 | template: `
13 |
17 | `,
18 | })
19 | export class Button11Component {}
20 |
21 | export const button11Code = `
22 | import { Component } from '@angular/core';
23 | import { NgIcon, provideIcons } from '@ng-icons/core';
24 | import { lucideChevronDown } from '@ng-icons/lucide';
25 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
26 | import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
27 |
28 | @Component({
29 | selector: 'sim-button-11',
30 | standalone: true,
31 | providers: [provideIcons({ lucideChevronDown })],
32 | imports: [HlmButtonDirective, NgIcon, HlmIconDirective],
33 | template: \`
34 |
38 | \`,
39 | })
40 | export class Button11Component {}
41 | `;
42 |
--------------------------------------------------------------------------------
/src/app/components/button/button-12.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
3 |
4 | @Component({
5 | selector: 'sim-button-12',
6 | standalone: true,
7 | imports: [HlmButtonDirective],
8 | template: `
9 |
10 |
11 |
12 |
13 | `,
14 | })
15 | export class Button12Component {}
16 |
17 | export const button12Code = `
18 | import { Component } from '@angular/core';
19 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
20 |
21 | @Component({
22 | selector: 'sim-button-12',
23 | standalone: true,
24 | imports: [HlmButtonDirective],
25 | template: \`
26 |
27 |
28 |
29 |
30 | \`,
31 | })
32 | export class Button12Component {}
33 | `;
34 |
--------------------------------------------------------------------------------
/src/app/components/button/button-13.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
3 | import { HlmSpinnerComponent } from '@spartan-ng/ui-spinner-helm';
4 |
5 | @Component({
6 | selector: 'sim-button-13',
7 | standalone: true,
8 | imports: [HlmButtonDirective, HlmSpinnerComponent],
9 | template: `
10 |
14 | `,
15 | })
16 | export class Button13Component {}
17 |
18 | export const button13Code = `
19 | import { Component } from '@angular/core';
20 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
21 | import { HlmSpinnerComponent } from '@spartan-ng/ui-spinner-helm';
22 |
23 | @Component({
24 | selector: 'sim-button-13',
25 | standalone: true,
26 | imports: [HlmButtonDirective, HlmSpinnerComponent],
27 | template: \`
28 |
32 | \`,
33 | })
34 | export class Button13Component {}
35 | `;
36 |
--------------------------------------------------------------------------------
/src/app/components/button/button-15.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
3 |
4 | @Component({
5 | selector: 'sim-button-15',
6 | standalone: true,
7 | imports: [HlmButtonDirective],
8 | template: `
9 |
16 | `,
17 | })
18 | export class Button15Component {}
19 |
20 | export const button15Code = `
21 | import { Component } from '@angular/core';
22 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
23 |
24 | @Component({
25 | selector: 'sim-button-15',
26 | standalone: true,
27 | imports: [HlmButtonDirective],
28 | template: \`
29 |
37 | \`,
38 | })
39 | export class Button15Component {}
40 | `;
41 |
--------------------------------------------------------------------------------
/src/app/components/button/button-19.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { NgIcon, provideIcons } from '@ng-icons/core';
3 | import { lucidePlus } from '@ng-icons/lucide';
4 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
5 | import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
6 |
7 | @Component({
8 | selector: 'sim-button-19',
9 | standalone: true,
10 | providers: [provideIcons({ lucidePlus })],
11 | imports: [HlmButtonDirective, NgIcon, HlmIconDirective],
12 | template: `
13 |
17 | `,
18 | })
19 | export class Button19Component {}
20 |
21 | export const button19Code = `
22 | import { Component } from '@angular/core';
23 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
24 | import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
25 | import { NgIcon, provideIcons } from '@ng-icons/core';
26 | import { lucidePlus } from '@ng-icons/lucide';
27 |
28 | @Component({
29 | selector: 'sim-button-19',
30 | standalone: true,
31 | providers: [provideIcons({ lucidePlus })],
32 | imports: [HlmButtonDirective, NgIcon, HlmIconDirective],
33 | template: \`
34 |
38 | \`,
39 | })
40 | export class Button19Component {}
41 | `;
42 |
--------------------------------------------------------------------------------
/src/app/components/button/button-20.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { NgIcon, provideIcons } from '@ng-icons/core';
3 | import { lucidePlus } from '@ng-icons/lucide';
4 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
5 | import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
6 |
7 | @Component({
8 | selector: 'sim-button-20',
9 | standalone: true,
10 | providers: [provideIcons({ lucidePlus })],
11 | imports: [HlmButtonDirective, NgIcon, HlmIconDirective],
12 | template: `
13 |
16 | `,
17 | })
18 | export class Button20Component {}
19 |
20 | export const button20Code = `
21 | import { Component } from '@angular/core';
22 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
23 | import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
24 | import { NgIcon, provideIcons } from '@ng-icons/core';
25 | import { lucidePlus } from '@ng-icons/lucide';
26 |
27 | @Component({
28 | selector: 'sim-button-20',
29 | standalone: true,
30 | providers: [provideIcons({ lucidePlus })],
31 | imports: [HlmButtonDirective, NgIcon, HlmIconDirective],
32 | template: \`
33 |
36 | \`,
37 | })
38 | export class Button20Component {}
39 | `;
40 |
--------------------------------------------------------------------------------
/src/app/components/card/index.ts:
--------------------------------------------------------------------------------
1 | export * from './card-01.component';
2 | export * from './card-02.component';
3 | export * from './card-03.component';
4 | export * from './card-04.component';
5 | export * from './card-05.component';
6 | export * from './card-06.component';
7 | export * from './card-07.component';
8 | export * from './card-08.component';
9 | export * from './card-09.component';
10 | export * from './card-10.component';
11 | export * from './card-11.component';
12 |
--------------------------------------------------------------------------------
/src/app/components/checkbox/checkbox-01.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HlmCheckboxComponent } from '@spartan-ng/ui-checkbox-helm';
3 | import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
4 |
5 | @Component({
6 | selector: 'sim-checkbox-01',
7 | standalone: true,
8 | imports: [HlmCheckboxComponent, HlmLabelDirective],
9 | template: `
10 |
14 | `,
15 | })
16 | export class Checkbox01Component {}
17 |
18 | export const checkbox01Code = `
19 | import { Component } from '@angular/core';
20 | import { HlmCheckboxComponent } from '@spartan-ng/ui-checkbox-helm';
21 | import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
22 |
23 | @Component({
24 | selector: 'sim-checkbox-01',
25 | standalone: true,
26 | imports: [HlmCheckboxComponent, HlmLabelDirective],
27 | template: \`
28 |
32 | \`,
33 | })
34 | export class Checkbox01Component {}
35 | `;
36 |
--------------------------------------------------------------------------------
/src/app/components/checkbox/checkbox-03.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { provideIcons } from '@ng-icons/core';
3 | import { lucideMoon } from '@ng-icons/lucide';
4 | import { HlmCheckboxComponent } from '@spartan-ng/ui-checkbox-helm';
5 | import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
6 |
7 | @Component({
8 | selector: 'sim-checkbox-03',
9 | standalone: true,
10 | imports: [HlmCheckboxComponent, HlmLabelDirective],
11 | providers: [provideIcons({ lucideMoon })],
12 | template: `
13 |
17 | `,
18 | })
19 | export class Checkbox03Component {}
20 |
21 | export const checkbox03Code = `
22 | import { provideIcons } from '@ng-icons/core';
23 | import { lucideMoon } from '@ng-icons/lucide';
24 | import { HlmCheckboxComponent } from '@spartan-ng/ui-checkbox-helm';
25 | import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
26 |
27 | @Component({
28 | selector: 'sim-checkbox-03',
29 | standalone: true,
30 | imports: [HlmCheckboxComponent, HlmLabelDirective],
31 | providers: [provideIcons({ lucideMoon })],
32 | template: \`
33 |
37 | \`,
38 | })
39 | export class Checkbox03Component {}
40 | `;
41 |
--------------------------------------------------------------------------------
/src/app/components/checkbox/checkbox-04.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, model } from '@angular/core';
2 | import { HlmCheckboxComponent } from '@spartan-ng/ui-checkbox-helm';
3 | import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
4 |
5 | @Component({
6 | selector: 'sim-checkbox-04',
7 | standalone: true,
8 | imports: [HlmCheckboxComponent, HlmLabelDirective],
9 | template: `
10 |
14 | `,
15 | })
16 | export class Checkbox04Component {
17 | public readonly checked = model
14 |
15 |
17 | `,
18 | })
19 | export class Checkbox11Component {}
20 |
21 | export const checkbox11Code = `
22 | import { Component } from '@angular/core';
23 | import { HlmCheckboxComponent } from '@spartan-ng/ui-checkbox-helm';
24 | import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
25 |
26 | @Component({
27 | selector: 'sim-checkbox-11',
28 | standalone: true,
29 | imports: [HlmCheckboxComponent, HlmLabelDirective],
30 | host: {
31 | class: 'w-full',
32 | },
33 | template: \`
34 |
35 |
36 |
38 | \`,
39 | })
40 | export class Checkbox11Component {}
41 | `;
42 |
--------------------------------------------------------------------------------
/src/app/components/checkbox/checkbox-13.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HlmCheckboxComponent } from '@spartan-ng/ui-checkbox-helm';
3 | import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
4 |
5 | @Component({
6 | selector: 'sim-checkbox-13',
7 | standalone: true,
8 | imports: [HlmCheckboxComponent, HlmLabelDirective],
9 | template: `
10 |
17 | `,
18 | })
19 | export class Checkbox13Component {}
20 |
21 | export const checkbox13Code = `
22 | import { Component } from '@angular/core';
23 | import { HlmCheckboxComponent } from '@spartan-ng/ui-checkbox-helm';
24 | import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
25 |
26 | @Component({
27 | selector: 'sim-checkbox-13',
28 | standalone: true,
29 | imports: [HlmCheckboxComponent, HlmLabelDirective],
30 | template: \`
31 |
38 | \`,
39 | })
40 | export class Checkbox13Component {}
41 | `;
42 |
--------------------------------------------------------------------------------
/src/app/components/checkbox/index.ts:
--------------------------------------------------------------------------------
1 | export * from './checkbox-01.component';
2 | export * from './checkbox-02.component';
3 | export * from './checkbox-03.component';
4 | export * from './checkbox-04.component';
5 | export * from './checkbox-05.component';
6 | export * from './checkbox-06.component';
7 | export * from './checkbox-07.component';
8 | export * from './checkbox-08.component';
9 | export * from './checkbox-09.component';
10 | export * from './checkbox-10.component';
11 | export * from './checkbox-11.component';
12 | export * from './checkbox-12.component';
13 | export * from './checkbox-13.component';
14 | export * from './checkbox-14.component';
15 | export * from './checkbox-15.component';
16 | export * from './checkbox-16.component';
17 | export * from './checkbox-17.component';
18 | export * from './checkbox-18.component';
19 | export * from './checkbox-19.component';
20 | export * from './checkbox-20.component';
21 | export * from './checkbox-21.component';
22 | export * from './checkbox-22.component';
23 |
--------------------------------------------------------------------------------
/src/app/components/dialog/index.ts:
--------------------------------------------------------------------------------
1 | export * from './dialog-01.component';
2 | export * from './dialog-02.component';
3 | export * from './dialog-03.component';
4 | export * from './dialog-04.component';
5 | export * from './dialog-05.component';
6 | export * from './dialog-06.component';
7 | export * from './dialog-07.component';
8 | export * from './dialog-08.component';
9 | export * from './dialog-09.component';
10 | export * from './dialog-10.component';
11 | export * from './dialog-11.component';
12 | export * from './dialog-12.component';
13 | export * from './dialog-13.component';
14 | export * from './dialog-14.component';
15 | export * from './dialog-15.component';
16 | export * from './dialog-16.component';
17 | export * from './dialog-17.component';
18 | export * from './dialog-18.component';
19 | export * from './dialog-19.component';
20 | export * from './dialog-20.component';
21 | export * from './dialog-21.component';
22 | export * from './dialog-22.component';
23 | export * from './dialog-23.component';
24 | export * from './dialog-24.component';
25 | export * from './dialog-25.component';
26 | export * from './dialog-26.component';
27 | export * from './dialog-27.component';
28 | export * from './dialog-28.component';
29 | export * from './dialog-29.component';
30 | export * from './dialog-30.component';
31 | export * from './dialog-31.component';
32 | export * from './dialog-32.component';
33 | export * from './dialog-33.component';
34 | export * from './dialog-34.component';
35 | export * from './dialog-35.component';
36 |
--------------------------------------------------------------------------------
/src/app/components/file-upload/index.ts:
--------------------------------------------------------------------------------
1 | export * from './file-upload-01.component';
2 | export * from './file-upload-02.component';
3 | export * from './file-upload-03.component';
4 | export * from './file-upload-04.component';
5 | export * from './file-upload-05.component';
6 | export * from './file-upload-06.component';
7 | export * from './file-upload-07.component';
8 | export * from './file-upload-08.component';
9 | export * from './file-upload-09.component';
10 | export * from './file-upload-10.component';
11 | export * from './file-upload-11.component';
12 | export * from './file-upload-12.component';
13 | export * from './file-upload-13.component';
14 |
--------------------------------------------------------------------------------
/src/app/components/notification/notification-31.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
3 | import { toast } from 'ngx-sonner';
4 |
5 | @Component({
6 | selector: 'sim-notification-31',
7 | standalone: true,
8 | imports: [HlmButtonDirective],
9 | template: `
10 |
11 | `,
12 | })
13 | export class Notification31Component {
14 | showNotification() {
15 | toast.success('Saved your changes', { position: 'bottom-center' });
16 | }
17 | }
18 |
19 | export const notification31Code = `
20 | import { Component } from '@angular/core';
21 | import { toast } from 'ngx-sonner';
22 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
23 |
24 | @Component({
25 | selector: 'sim-notification-31',
26 | standalone: true,
27 | imports: [HlmButtonDirective],
28 | template: \`
29 |
38 | \`,
39 | })
40 | export class Notification31Component {
41 | showNotification() {
42 | toast.success('Saved your changes', { position: 'bottom-center' });
43 | }
44 | }
45 | `;
46 |
--------------------------------------------------------------------------------
/src/app/components/notification/notification-32.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
3 | import { toast } from 'ngx-sonner';
4 |
5 | @Component({
6 | selector: 'sim-notification-32',
7 | standalone: true,
8 | imports: [HlmButtonDirective],
9 | template: `
10 |
11 | `,
12 | })
13 | export class Notification32Component {
14 | showNotification() {
15 | toast.success('Saved your changes', {
16 | closeButton: true,
17 | });
18 | }
19 | }
20 |
21 | export const notification32Code = `
22 | import { Component } from '@angular/core';
23 | import { toast } from 'ngx-sonner';
24 | import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
25 |
26 | @Component({
27 | selector: 'sim-notification-32',
28 | standalone: true,
29 | imports: [HlmButtonDirective],
30 | template: \`
31 |
40 | \`,
41 | })
42 | export class Notification32Component {
43 | showNotification() {
44 | toast.success('Saved your changes', {
45 | closeButton: true,
46 | });
47 | }
48 | }
49 | `;
50 |
--------------------------------------------------------------------------------
/src/app/components/tabs/index.ts:
--------------------------------------------------------------------------------
1 | export * from './tabs-01.component';
2 | export * from './tabs-02.component';
3 | export * from './tabs-03.component';
4 | export * from './tabs-04.component';
5 | export * from './tabs-05.component';
6 | export * from './tabs-06.component';
7 | export * from './tabs-07.component';
8 | export * from './tabs-08.component';
9 | export * from './tabs-09.component';
10 | export * from './tabs-10.component';
11 | export * from './tabs-11.component';
12 | export * from './tabs-12.component';
13 | export * from './tabs-13.component';
14 | export * from './tabs-14.component';
15 | export * from './tabs-15.component';
16 | export * from './tabs-16.component';
17 | export * from './tabs-17.component';
18 | export * from './tabs-18.component';
19 | export * from './tabs-19.component';
20 | export * from './tabs-20.component';
21 |
--------------------------------------------------------------------------------
/src/app/constants/index.ts:
--------------------------------------------------------------------------------
1 | export * from './accordion.constant';
2 | export * from './alert.constant';
3 | export * from './avatar.constant';
4 | export * from './badge.constant';
5 | export * from './banner.constant';
6 | export * from './breadcrumb.constant';
7 | export * from './button.constant';
8 | export * from './card.constant';
9 | export * from './checkbox.constant';
10 | export * from './dialog.constant';
11 | export * from './file-upload.constant';
12 | export * from './notification.constant';
13 | export * from './tabs.constant';
14 |
--------------------------------------------------------------------------------
/src/app/core/card/card-background.directive.ts:
--------------------------------------------------------------------------------
1 | import { computed, Directive, input } from '@angular/core';
2 | import { hlm } from '@spartan-ng/brain/core';
3 | import { ClassValue } from 'clsx';
4 |
5 | @Directive({
6 | selector: '[dfCardBackground]',
7 | standalone: true,
8 | host: {
9 | '[class]': '_computedClass()',
10 | },
11 | })
12 | export class CardBackgroundDirective {
13 | public readonly userClass = input
8 |
13 | `,
14 | })
15 | export class ComponentHeaderComponent {
16 | name = input.required{{ name() }}
9 |
10 | {{ description() }}
11 |
12 |
11 |
25 | `,
26 | imports: [ComponentCardComponent, SuggestionComponent],
27 | })
28 | export class PageGridComponent {
29 | components = input
12 |
23 |
13 | @for (component of components(); track component.id) {
14 |
22 |
10 | Didn't find what you were looking for?
11 |
12 |
13 | `,
14 | })
15 | export class SuggestionComponent {
16 | goToDiscussion() {
17 | window.open(DISCUSSION_LINK, '_blank');
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/core/types.ts:
--------------------------------------------------------------------------------
1 | import { Type } from '@angular/core';
2 |
3 | export type ComponentCardItem = {
4 | id: string;
5 | component: Type
11 |
14 | Button
12 |
13 |
9 |
13 | `,
14 | })
15 | export class CompLayoutComponent {}
16 |
--------------------------------------------------------------------------------
/src/app/pages/dialog.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { dialogComponents } from '../constants';
3 | import { ComponentHeaderComponent, PageGridComponent } from '../core';
4 |
5 | @Component({
6 | selector: 'app-dialog',
7 | imports: [PageGridComponent, ComponentHeaderComponent],
8 | template: `
9 |
10 |
12 |
8 |
9 |
10 | `,
11 | })
12 | export class HlmInputOtpFakeCaretComponent {}
13 |
--------------------------------------------------------------------------------
/src/libs/ui/ui-inputotp-helm/src/lib/hlm-input-otp-group.directive.ts:
--------------------------------------------------------------------------------
1 | import { computed, Directive, input } from '@angular/core';
2 | import { hlm } from '@spartan-ng/brain/core';
3 | import { type ClassValue } from 'clsx';
4 |
5 | @Directive({
6 | selector: '[hlmInputOtpGroup]',
7 | standalone: true,
8 | host: {
9 | '[class]': '_computedClass()',
10 | },
11 | })
12 | export class HlmInputOtpGroupDirective {
13 | public readonly userClass = input{{ switchValue }}
19 |{{ changedValueTo }}
20 | `, 21 | imports: [HlmSwitchComponent, FormsModule], 22 | }) 23 | export class SwitchFormComponent { 24 | @Input() 25 | public switchValue = false; 26 | 27 | protected changedValueTo: boolean | undefined; 28 | 29 | handleChange(value: boolean) { 30 | this.changedValueTo = value; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/libs/ui/ui-switch-helm/src/lib/hlm-switch-thumb.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, computed, input } from '@angular/core'; 2 | import { hlm } from '@spartan-ng/brain/core'; 3 | import type { ClassValue } from 'clsx'; 4 | 5 | @Directive({ 6 | selector: 'brn-switch-thumb[hlm],[hlmSwitchThumb]', 7 | standalone: true, 8 | host: { 9 | '[class]': '_computedClass()', 10 | }, 11 | }) 12 | export class HlmSwitchThumbDirective { 13 | public readonly userClass = input