-
+
Enable notifications
@@ -173,11 +137,10 @@ export class CheckboxDisabledExample {
`,
standalone: true,
- imports: [UiCheckbox, NgIcon, UiFormField, UiDescription, UiLabel],
- providers: [provideIcons({ lucideCheck })]
+ imports: [UiCheckbox, UiFormField, UiDescription, UiLabel]
})
export class CheckboxCustomStylingExample {
- checked = model(true);
+ checked = signal(true);
}
// Form with multiple checkboxes example
@@ -196,66 +159,42 @@ export class CheckboxCustomStylingExample {
-
+
-
+
-
+
-
+
-
+
-
+
@@ -278,19 +217,18 @@ export class CheckboxCustomStylingExample {
`,
standalone: true,
- imports: [UiCheckbox, UiLabel, UiButton, NgIcon, UiFormField],
- providers: [provideIcons({ lucideCheck })],
+ imports: [UiCheckbox, UiLabel, UiButton, UiFormField],
host: {
'class': 'w-2/3 space-y-6 mx-auto'
}
})
export class CheckboxFormExample {
- recents = model(true);
- home = model(true);
- applications = model(false);
- desktop = model(false);
- downloads = model(false);
- documents = model(false);
+ recents = signal(true);
+ home = signal(true);
+ applications = signal(false);
+ desktop = signal(false);
+ downloads = signal(false);
+ documents = signal(false);
get selectedItems(): string[] {
const items = [
@@ -317,12 +255,8 @@ export const checkboxMeta: IComponentMeta = {
title: 'Checkbox',
description: 'A control that allows the user to toggle between checked and not checked.',
installation: {
- import: `import { UiCheckbox } from '@workspace/ui/directives/checkbox';`,
- usage: `
`
+ import: `import { UiCheckbox } from '@workspace/ui/checkbox';`,
+ usage: `
`
},
api: {
props: [
@@ -381,125 +315,97 @@ export const checkboxVariants: IVariant[] = [
{
title: 'Default',
description: 'A basic checkbox control.',
- code: `import { Component, model } from '@angular/core';
-import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideCheck } from '@ng-icons/lucide';
-import { UiCheckbox, UiLabel, UiFormField, UiDescription } from '@workspace/ui/directives/checkbox';
+ code: `import { Component, signal } from '@angular/core';
+import { UiCheckbox, UiLabel, UiFormField, UiDescription } from '@workspace/ui/checkbox';
@Component({
selector: 'checkbox-default-example',
template: \`
-
-
-
-
-
-
-
-
-
- By clicking this checkbox, you agree to the terms and conditions.
-
+
+
+
-
-
-
-
-
-
-
-
-
-
- Enable notifications
-
-
- You can enable or disable notifications at any time.
-
-
+
+
+
+
+
+ By clicking this checkbox, you agree to the terms and conditions.
+
+
+
+
+
+
+
+
+
+
+
+
+ Enable notifications
+
+
+ You can enable or disable notifications at any time.
+
+
+
-
\`,
standalone: true,
- imports: [UiCheckbox, NgIcon, UiLabel, UiFormField, UiDescription],
- providers: [provideIcons({ lucideCheck })]
+ imports: [UiCheckbox, UiLabel, UiFormField, UiDescription],
+ host: {
+ 'class': 'w-2/3 space-y-6 mx-auto'
+ }
})
export class CheckboxDefaultExample {
- termsChecked = model(false);
- termsWithDescChecked = model(true);
- disabledChecked = model(false);
- notificationsChecked = model(true);
+ termsChecked = signal(false);
+ termsWithDescChecked = signal(true);
+ disabledChecked = signal(false);
+ notificationsChecked = signal(true);
+ termsCheckedChange(event: boolean) {
+ console.log('termsCheckedChange', event);
+ }
}`,
component: CheckboxDefaultExample
},
{
title: 'With Label',
description: 'A checkbox with a label.',
- code: `import { Component, model } from '@angular/core';
-import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideCheck } from '@ng-icons/lucide';
-import { UiCheckbox, UiLabel, NgIcon, UiFormField } from '@workspace/ui/directives/checkbox';
+ code: `import { Component, signal } from '@angular/core';
+import { UiCheckbox, UiLabel, UiFormField } from '@workspace/ui/checkbox';
@Component({
- selector: 'checkbox-with-label-example',
- template: \`
-
-
-
+ selector: 'checkbox-with-label-example',
+ template: \`
+
+
+
- \`,
- standalone: true,
- imports: [UiCheckbox, UiLabel, NgIcon, UiFormField],
- providers: [provideIcons({ lucideCheck })]
-})
-export class CheckboxWithLabelExample {
- checked = model(true);
-}`,
+ \`,
+ standalone: true,
+ imports: [UiCheckbox, UiLabel, UiFormField]
+ })
+ export class CheckboxWithLabelExample {
+ checked = signal(true);
+ }`,
component: CheckboxWithLabelExample
},
{
title: 'With Description',
description: 'A checkbox with additional descriptive text.',
- code: `import { Component, model } from '@angular/core';
-import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideCheck } from '@ng-icons/lucide';
-import { UiCheckbox, UiLabel, UiFormField, UiDescription } from '@workspace/ui/directives/checkbox';
+ code: `import { Component, signal } from '@angular/core';
+import { UiCheckbox, UiLabel, UiFormField, UiDescription } from '@workspace/ui/checkbox';
@Component({
selector: 'checkbox-with-description-example',
template: \`
-
+
@@ -510,199 +416,164 @@ import { UiCheckbox, UiLabel, UiFormField, UiDescription } from '@workspace/ui/d
\`,
standalone: true,
- imports: [UiCheckbox, UiLabel, NgIcon, UiFormField, UiDescription],
- providers: [provideIcons({ lucideCheck })]
+ imports: [UiCheckbox, UiLabel, UiFormField, UiDescription]
})
export class CheckboxWithDescriptionExample {
- checked = model(true);
+ checked = signal(true);
}`,
component: CheckboxWithDescriptionExample
},
{
title: 'Disabled',
description: 'A disabled checkbox that cannot be interacted with.',
- code: `import { Component, model } from '@angular/core';
-import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideCheck } from '@ng-icons/lucide';
-import { UiCheckbox, UiLabel, UiFormField } from '@workspace/ui/directives/checkbox';
+ code: `import { Component, signal } from '@angular/core';
+import { UiCheckbox, UiLabel, UiFormField } from '@workspace/ui/checkbox';
@Component({
selector: 'checkbox-disabled-example',
template: \`
-
-
-
+
\`,
standalone: true,
- imports: [UiCheckbox, UiLabel, NgIcon, UiFormField],
- providers: [provideIcons({ lucideCheck })]
+ imports: [UiCheckbox, UiLabel, UiFormField],
+ host: {
+ 'class': 'w-2/3 space-y-6 mx-auto'
+ }
})
export class CheckboxDisabledExample {
- checked = model(false);
+ checked = signal(false);
}`,
component: CheckboxDisabledExample
},
{
title: 'Custom Styling',
description: 'A checkbox with custom colors and hover effects.',
- code: `import { Component, model } from '@angular/core';
-import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideCheck } from '@ng-icons/lucide';
-import { UiCheckbox, UiFormField, UiDescription } from '@workspace/ui/directives/checkbox';
+ code: `import { Component, signal } from '@angular/core';
+import { UiCheckbox, UiFormField, UiDescription, UiLabel } from '@workspace/ui/checkbox';
@Component({
selector: 'checkbox-custom-styling-example',
template: \`
-
+
-
+
-
- Enable notifications
-
-
- You can enable or disable notifications at any time.
-
+
+ Enable notifications
+
+
+ You can enable or disable notifications at any time.
+
+
-
\`,
standalone: true,
- imports: [UiCheckbox, NgIcon, UiFormField, UiDescription],
- providers: [provideIcons({ lucideCheck })]
+ imports: [UiCheckbox, UiFormField, UiDescription, UiLabel]
})
export class CheckboxCustomStylingExample {
- checked = model(true);
+ checked = signal(true);
}`,
component: CheckboxCustomStylingExample
},
{
title: 'Form with Multiple Checkboxes',
description: 'Multiple checkboxes in a form with state management.',
- code: `import { Component, model } from '@angular/core';
-import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideCheck } from '@ng-icons/lucide';
-import { UiCheckbox, UiLabel, UiButton, UiFormField } from '@workspace/ui/directives/checkbox';
+ code: `import { Component, signal } from '@angular/core';
+import { UiCheckbox, UiLabel, UiButton, UiFormField } from '@workspace/ui/checkbox';
@Component({
selector: 'checkbox-form-example',
template: \`
-
-
-
Sidebar
-
- Select the items you want to display in the sidebar.
-
-
-
-
-
-
-
-
-
+
+
+
+
Sidebar
+
+ Select the items you want to display in the sidebar.
+
-
-
-
-
+
-
-
-
-
-
+
+
-
-
-
-
-
-
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
+
+
+ @if (selectedItems.length > 0) {
+
+ Selected: {{ selectedItems.join(', ') }}
-
+ }
-
-
-
- @if (selectedItems.length > 0) {
-
- Selected: {{ selectedItems.join(', ') }}
-
- }
\`,
standalone: true,
- imports: [UiCheckbox, UiLabel, UiButton, NgIcon, UiFormField],
- providers: [provideIcons({ lucideCheck })]
+ imports: [UiCheckbox, UiLabel, UiButton, UiFormField],
+ host: {
+ 'class': 'w-2/3 space-y-6 mx-auto'
+ }
})
export class CheckboxFormExample {
- recents = model(true);
- home = model(true);
- applications = model(false);
- desktop = model(false);
- downloads = model(false);
- documents = model(false);
+ recents = signal(true);
+ home = signal(true);
+ applications = signal(false);
+ desktop = signal(false);
+ downloads = signal(false);
+ documents = signal(false);
get selectedItems(): string[] {
const items = [
@@ -721,6 +592,7 @@ export class CheckboxFormExample {
submitForm(): void {
console.log('Selected items:', this.selectedItems);
+ // In a real app, you would submit this data
}
}`,
component: CheckboxFormExample
diff --git a/projects/ui/src/directives/alert-dialog.ts b/projects/ui/src/directives/alert-dialog.ts
index ff18110..9e17afc 100644
--- a/projects/ui/src/directives/alert-dialog.ts
+++ b/projects/ui/src/directives/alert-dialog.ts
@@ -1,4 +1,4 @@
-import { computed, Directive, input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
import { tv } from "tailwind-variants";
import { NgpDialog, NgpDialogDescription, NgpDialogOverlay, NgpDialogTitle, NgpDialogTrigger, provideDialogConfig } from "ng-primitives/dialog";
@@ -18,82 +18,84 @@ const alertDialogVariants = tv({
const { alertDialog, alertDialogOverlay, alertDialogHeader, alertDialogFooter, alertDialogTitle, alertDialogDescription, alertDialogTrigger, alertDialogCancel, alertDialogAction } = alertDialogVariants();
-@Directive({
- selector: '[uiAlertDialog]',
+@Component({
+ selector: 'ui-alert-dialog',
exportAs: 'uiAlertDialog',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
},
- hostDirectives: [
- {
- directive: NgpDialog,
- inputs: [
- 'ngpDialogRole: uiAlertDialogRole',
- 'ngpDialogModal: uiAlertDialogModal'
- ]
- }
- ]
+ hostDirectives: [NgpDialog],
+ template: `
`
})
export class UiAlertDialog {
inputClass = input
('', { alias: 'class' });
computedClass = computed(() => alertDialog({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiAlertDialogHeader]',
+@Component({
+ selector: 'ui-alert-dialog-header',
exportAs: 'uiAlertDialogHeader',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
},
- hostDirectives: []
+ hostDirectives: [],
+ template: ``
})
export class UiAlertDialogHeader {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => alertDialogHeader({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiAlertDialogTitle]',
+@Component({
+ selector: 'ui-alert-dialog-title',
exportAs: 'uiAlertDialogTitle',
host: {
'[class]': 'computedClass()'
},
- hostDirectives: [NgpDialogTitle]
+ hostDirectives: [NgpDialogTitle],
+ template: ``
})
export class UiAlertDialogTitle {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => alertDialogTitle({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiAlertDialogDescription]',
+@Component({
+ selector: 'ui-alert-dialog-description',
exportAs: 'uiAlertDialogDescription',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
},
- hostDirectives: [NgpDialogDescription]
+ hostDirectives: [NgpDialogDescription],
+ template: ``
})
export class UiAlertDialogDescription {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => alertDialogDescription({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiAlertDialogFooter]',
+@Component({
+ selector: 'ui-alert-dialog-footer',
exportAs: 'uiAlertDialogFooter',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
},
- hostDirectives: []
+ hostDirectives: [],
+ template: ``
})
export class UiAlertDialogFooter {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => alertDialogFooter({ class: this.inputClass() }));
}
-@Directive({
+@Component({
selector: '[uiAlertDialogTrigger]',
exportAs: 'uiAlertDialogTrigger',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
},
@@ -101,59 +103,58 @@ export class UiAlertDialogFooter {
{
directive: NgpDialogTrigger,
inputs: [
- 'ngpDialogTrigger: uiAlertDialogTrigger',
- 'ngpDialogTriggerCloseOnEscape: uiAlertDialogTriggerCloseOnEscape'
+ 'ngpDialogTrigger: uiAlertDialogTrigger'
]
}
],
- providers: [provideDialogConfig({ closeOnEscape: false })]
+ providers: [provideDialogConfig({ closeOnEscape: false })],
+ template: ``
})
export class UiAlertDialogTrigger {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => alertDialogTrigger({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiAlertDialogOverlay]',
+@Component({
+ selector: 'ui-alert-dialog-overlay',
exportAs: 'uiAlertDialogOverlay',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
},
- hostDirectives: [
- {
- directive: NgpDialogOverlay,
- inputs: [
- 'ngpDialogOverlayCloseOnClick: uiAlertDialogOverlayCloseOnClick'
- ]
- }
- ],
- providers: [provideDialogConfig({ closeOnClick: false })]
+ hostDirectives: [NgpDialogOverlay],
+ providers: [provideDialogConfig({ closeOnClick: false })],
+ template: ``
})
export class UiAlertDialogOverlay {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => alertDialogOverlay({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiAlertDialogCancel]',
+@Component({
+ selector: 'ui-alert-dialog-cancel',
exportAs: 'uiAlertDialogCancel',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
},
- hostDirectives: []
+ hostDirectives: [],
+ template: ``
})
export class UiAlertDialogCancel {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => alertDialogCancel({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiAlertDialogAction]',
+@Component({
+ selector: 'ui-alert-dialog-action',
exportAs: 'uiAlertDialogAction',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
},
- hostDirectives: []
+ hostDirectives: [],
+ template: ``
})
export class UiAlertDialogAction {
inputClass = input('', { alias: 'class' });
diff --git a/projects/ui/src/directives/breadcrumb.ts b/projects/ui/src/directives/breadcrumb.ts
index 00a40ec..0dbb116 100644
--- a/projects/ui/src/directives/breadcrumb.ts
+++ b/projects/ui/src/directives/breadcrumb.ts
@@ -1,5 +1,7 @@
-import { computed, Directive, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
import { tv } from 'tailwind-variants';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideEllipsis } from '@ng-icons/lucide';
const breadcrumbVariants = tv({
slots: {
@@ -15,84 +17,91 @@ const breadcrumbVariants = tv({
const { breadcrumb, breadcrumbList, breadcrumbItem, breadcrumbLink, breadcrumbPage, breadcrumbSeparator, breadcrumbEllipsis } = breadcrumbVariants();
-@Directive({
- selector: '[uiBreadcrumb]',
+@Component({
+ selector: 'ui-breadcrumb',
exportAs: 'uiBreadcrumb',
- host: {
- '[class]': 'computedClass()'
- }
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: ``
})
export class UiBreadcrumb {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => breadcrumb({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiBreadcrumbList]',
+@Component({
+ selector: 'ui-breadcrumb-list',
exportAs: 'uiBreadcrumbList',
- host: {
- '[class]': 'computedClass()'
- }
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: `
`
})
export class UiBreadcrumbList {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => breadcrumbList({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiBreadcrumbItem]',
+@Component({
+ selector: 'ui-breadcrumb-item',
exportAs: 'uiBreadcrumbItem',
- host: {
- '[class]': 'computedClass()'
- }
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: ``
})
export class UiBreadcrumbItem {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => breadcrumbItem({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiBreadcrumbLink]',
+@Component({
+ selector: 'ui-breadcrumb-link',
exportAs: 'uiBreadcrumbLink',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
- }
+ },
+ template: ``
})
export class UiBreadcrumbLink {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => breadcrumbLink({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiBreadcrumbPage]',
+@Component({
+ selector: 'ui-breadcrumb-page',
exportAs: 'uiBreadcrumbPage',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
- }
+ },
+ template: ``
})
export class UiBreadcrumbPage {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => breadcrumbPage({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiBreadcrumbSeparator]',
+@Component({
+ selector: 'ui-breadcrumb-separator',
exportAs: 'uiBreadcrumbSeparator',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
- }
+ },
+ template: ``
})
export class UiBreadcrumbSeparator {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => breadcrumbSeparator({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiBreadcrumbEllipsis]',
+@Component({
+ selector: 'ui-breadcrumb-ellipsis',
exportAs: 'uiBreadcrumbEllipsis',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
- }
+ },
+ template: ``,
+ imports: [NgIcon],
+ providers: [provideIcons({ lucideEllipsis })]
})
export class UiBreadcrumbEllipsis {
inputClass = input('', { alias: 'class' });
diff --git a/projects/ui/src/directives/card.ts b/projects/ui/src/directives/card.ts
index 944f015..784b23e 100644
--- a/projects/ui/src/directives/card.ts
+++ b/projects/ui/src/directives/card.ts
@@ -1,4 +1,4 @@
-import { computed, Directive, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
import { tv } from 'tailwind-variants';
const badgeVariants = tv({
@@ -15,84 +15,98 @@ const badgeVariants = tv({
const { card, cardHeader, cardTitle, cardDescription, cardAction, cardContent, cardFooter } = badgeVariants();
-@Directive({
- selector: '[uiCard]',
+@Component({
+ selector: 'ui-card',
exportAs: 'uiCard',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
- }
+ },
+ template: ``
})
export class UiCard {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => card({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiCardHeader]',
+@Component({
+ selector: 'ui-card-header',
exportAs: 'uiCardHeader',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
- }
+ },
+ template: ``
})
export class UiCardHeader {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => cardHeader({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiCardTitle]',
+@Component({
+ selector: 'ui-card-title',
exportAs: 'uiCardTitle',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
- }
+ },
+ template: ``
})
export class UiCardTitle {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => cardTitle({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiCardDescription]',
+@Component({
+ selector: 'ui-card-description',
exportAs: 'uiCardDescription',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
- }
+ },
+ template: ``
})
export class UiCardDescription {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => cardDescription({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiCardAction]',
+@Component({
+ selector: 'ui-card-action',
exportAs: 'uiCardAction',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
- }
+ },
+ template: ``
})
export class UiCardAction {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => cardAction({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiCardContent]',
+@Component({
+ selector: 'ui-card-content',
exportAs: 'uiCardContent',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
- }
+ },
+ template: ``
})
export class UiCardContent {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => cardContent({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiCardFooter]',
+@Component({
+ selector: 'ui-card-footer',
exportAs: 'uiCardFooter',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
- }
+ },
+ template: ``
})
export class UiCardFooter {
inputClass = input('', { alias: 'class' });
diff --git a/projects/ui/src/directives/checkbox.ts b/projects/ui/src/directives/checkbox.ts
index 170bd99..48f941d 100644
--- a/projects/ui/src/directives/checkbox.ts
+++ b/projects/ui/src/directives/checkbox.ts
@@ -1,33 +1,42 @@
-import { computed, Directive, input } from "@angular/core";
+import { computed, Component, input, ChangeDetectionStrategy, model, booleanAttribute, output } from "@angular/core";
import { tv } from "tailwind-variants";
import { NgpCheckbox } from "ng-primitives/checkbox";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { lucideCheck } from "@ng-icons/lucide";
+import { BooleanInput } from "@angular/cdk/coercion";
const checkboxVariants = tv({
base: "peer border-input dark:bg-input/30 data-[checked]:bg-primary data-[checked]:text-primary-foreground dark:data-[checked]:bg-primary data-[checked]:border-primary data-[focus-visible]:border-ring data-[focus-visible]:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none data-[focus-visible]:ring-[3px] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 flex items-center justify-center text-current transition-none"
});
-@Directive({
- selector: '[uiCheckbox]',
+@Component({
+ selector: 'ui-checkbox',
exportAs: 'uiCheckbox',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
- '[class]': 'computedClass()'
+ 'class': 'peer',
+ '[attr.data-disabled]': 'this.disabled() || null'
},
- hostDirectives: [{
- directive: NgpCheckbox,
- inputs: [
- 'ngpCheckboxChecked: checked',
- 'ngpCheckboxIndeterminate: indeterminate',
- 'ngpCheckboxRequired: required',
- 'ngpCheckboxDisabled: disabled',
- ],
- outputs: [
- 'ngpCheckboxCheckedChange: checkedChange',
- 'ngpCheckboxIndeterminateChange: indeterminateChange',
- ],
- }],
+ template: ``,
+ imports: [NgIcon, NgpCheckbox],
+ providers: [provideIcons({ lucideCheck })]
})
export class UiCheckbox {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => checkboxVariants({ class: this.inputClass() }));
+ readonly checked = model(false);
+ readonly required = input(false, {
+ transform: booleanAttribute,
+ });
+ readonly disabled = input(false, {
+ transform: booleanAttribute,
+ });
+ readonly indeterminate = input(false, {
+ transform: booleanAttribute,
+ });
}
diff --git a/projects/ui/src/directives/form-field.ts b/projects/ui/src/directives/form-field.ts
index 75450a1..e646933 100644
--- a/projects/ui/src/directives/form-field.ts
+++ b/projects/ui/src/directives/form-field.ts
@@ -5,7 +5,7 @@ import { NgpFormField, NgpLabel, NgpDescription, NgpError } from "ng-primitives/
const formFieldVariants = tv({
slots: {
field: '',
- label: 'flex items-center gap-2 text-sm leading-none font-medium select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+ label: 'flex items-center gap-2 text-sm leading-none font-medium select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 peer-data-[disabled]:cursor-not-allowed peer-data-[disabled]:opacity-50',
description: 'text-sm text-muted-foreground',
error: 'text-sm font-medium text-destructive'
}
diff --git a/projects/ui/src/directives/label.ts b/projects/ui/src/directives/label.ts
index c372ccf..64c9ebb 100644
--- a/projects/ui/src/directives/label.ts
+++ b/projects/ui/src/directives/label.ts
@@ -4,7 +4,7 @@ import { NgpLabel } from "ng-primitives/form-field";
const labelVariants = tv({
slots: {
- label: 'flex items-center gap-2 text-sm leading-none font-medium select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50'
+ label: 'flex items-center gap-2 text-sm leading-none font-medium select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 peer-data-[disabled]:cursor-not-allowed peer-data-[disabled]:opacity-50'
}
});