UI(skeleton): Add Skeleton directive

Author: immohammadjaved

projects/ui/src/directives/skeleton.ts

@@ -0,0 +1,22 @@
+import { computed, Directive, input } from "@angular/core";
+import { tv } from "tailwind-variants";
+
+const skeletonVariants = tv({
+    slots: {
+        skeleton: 'bg-accent animate-pulse rounded-md'
+    }
+});
+
+const { skeleton } = skeletonVariants();
+
+@Directive({
+    selector: '[uiSkeleton]',
+    exportAs: 'uiSkeleton',
+    host: {
+        '[class]': 'computedClass()'
+    }
+})
+export class UiSkeleton {
+    inputClass = input<string>('', { alias: 'class' });
+    computedClass = computed(() => skeleton({ class: this.inputClass() }));
+}

projects/ui/src/public-api.ts

@@ -20,4 +20,5 @@ export * from './directives/breadcrumb';
 export * from './directives/form-field';
 export * from './directives/checkbox';
 export * from './directives/toggle';
-export * from './directives/toggle-group';
+export * from './directives/toggle-group';
+export * from './directives/skeleton';