docs(Dialog): Updated dialog snippet

Author: Mohammad Javed

projects/core/src/lib/dialog.ts

@@ -3,11 +3,11 @@ import { tv } from "tailwind-variants";
 import { NgpDialog, NgpDialogDescription, NgpDialogOverlay, NgpDialogTitle, NgpDialogTrigger } from "ng-primitives/dialog";
 
 const dialogOverlayVariants = tv({
-    base: 'fixed inset-0 z-50 bg-black/50'
+    base: 'data-[enter]:animate-in data-[exit]:animate-out data-[exit]:fade-out-0 data-[enter]:fade-in-0 fixed inset-0 z-50 bg-black/50'
 });
 
 const dialogVariants = tv({
-    base: 'bg-background data-[enter]:animate-slide-in data-[exit]:animate-slide-out fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border p-6 shadow-lg sm:max-w-lg'
+    base: 'bg-background data-[enter]:animate-in data-[exit]:animate-out data-[exit]:fade-out-0 data-[enter]:fade-in-0 data-[exit]:zoom-out-95 data-[enter]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border p-6 shadow-lg sm:max-w-lg'
 });
 
 const dialogHeaderVariants = tv({

projects/core/src/lib/menu.ts

@@ -4,11 +4,11 @@ import { injectPopoverTriggerState } from 'ng-primitives/popover';
 import { tv } from 'tailwind-variants';
 
 export const menuVariants = tv({
-    base: 'absolute bg-popover text-popover-foreground data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border border-border p-1 shadow-md'
+    base: 'absolute bg-popover text-popover-foreground data-[enter]:animate-in data-[exit]:animate-out data-[exit]:fade-out-0 data-[enter]:fade-in-0 data-[exit]:zoom-out-95 data-[enter]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--ngp-popover-transform-origin) overflow-hidden rounded-md border border-border p-1 shadow-md'
 });
 
 export const menuItemVariants = tv({
-    base: "w-full focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+    base: "w-full data-[focus-visible]:bg-accent data-[focus-visible]:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-[focus-visible]:bg-destructive/10 data-[variant=destructive]:data-[focus-visible]:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
 });
 
 const menuShortcutVariants = tv({

projects/docs/src/app/pages/docs/components/dialog/dialog.component.html

@@ -10,7 +10,7 @@ <h1 class="text-2xl font-semibold">Dialog</h1>
 
 <div class="mt-5">
     <docs-example [code]="BADGE_CODES.DEFAULT">
-        <button [uiDialogTrigger]="dialog" uiButton>Launch Dialog</button>
+        <button [uiDialogTrigger]="dialog" uiButton variant="outline">Launch Dialog</button>
 
         <ng-template #dialog let-close="close">
             <div uiDialogOverlay>

projects/docs/src/app/pages/docs/components/dialog/dialog.component.ts

@@ -14,7 +14,7 @@ import { bootstrapX } from '@ng-icons/bootstrap-icons';
   viewProviders: [provideIcons({ bootstrapX })]
 })
 export class DialogComponent {
-  importCode = `import { DialogDirective, DialogOverlayDirective, DialogTriggerDirective, DialogHeaderDirective, DialogFooterDirective, DialogTitleDirective, DialogDescriptionDirective} from @angularui/core;`
+  importCode = `import { UiDialog, UiDialogOverlay, UiDialogHeader, UiDialogTrigger, UiDialogDescription, UiDialogTitle, UiDialogFooter } from @angularui/core;`
   usageCode = `
   <button [uiDialogTrigger]="dialog" uiButton>Launch Dialog</button>
 

projects/docs/src/app/pages/docs/components/dialog/dialog.constants.ts

@@ -1,13 +1,13 @@
 export class DialogCodeConstants {
     static readonly DEFAULT = `
     import { Component } from '@angular/core';
-    import { DialogDirective, DialogOverlayDirective, DialogTriggerDirective, DialogHeaderDirective, DialogFooterDirective, DialogTitleDirective, DialogDescriptionDirective} from @angularui/core;
+    import { UiDialog, UiDialogOverlay, UiDialogHeader, UiDialogTrigger, UiDialogDescription, UiDialogTitle, UiDialogFooter } from @angularui/core;
     import { NgIcon, provideIcons } from '@ng-icons/core';
     import { bootstrapX } from '@ng-icons/bootstrap-icons';
 
     @Component({
         selector: 'dialog-demo',
-        imports: [DialogDirective, DialogOverlayDirective, DialogTriggerDirective, DialogHeaderDirective, DialogFooterDirective, DialogTitleDirective, DialogDescriptionDirective, ButtonDirective, NgIcon],
+        imports: [UiDialog, UiDialogOverlay, UiDialogHeader, UiDialogTrigger, UiDialogDescription, UiDialogTitle, UiDialogFooter, ButtonDirective, NgIcon],
         template: \` 
         <button [uiDialogTrigger]="dialog" uiButton>Launch Dialog</button>
 

projects/docs/src/styles.scss

@@ -63,86 +63,6 @@
             height: 0;
         }
     }
-
-    --animate-in: menu-show 0.2s ease-in-out forwards;
-
-    @keyframes menu-show {
-        0% {
-            opacity: 0;
-            transform: scale(0.9);
-        }
-
-        100% {
-            opacity: 1;
-            transform: scale(1);
-        }
-    }
-
-    --animate-out: menu-hide 0.2s ease-in-out forwards;
-
-    @keyframes menu-hide {
-        0% {
-            opacity: 1;
-            transform: scale(1);
-        }
-
-        100% {
-            opacity: 0;
-            transform: scale(0.9);
-        }
-    }
-
-    --animate-fade-in: fadeIn 300ms cubic-bezier(0.4, 0, 0.2, 1);
-
-    @keyframes fadeIn {
-        0% {
-            opacity: 0;
-        }
-
-        100% {
-            opacity: 1;
-        }
-    }
-
-    --animate-fade-in: fadeOut 300ms cubic-bezier(0.4, 0, 0.2, 1);
-
-    @keyframes fadeOut {
-        0% {
-            opacity: 1;
-        }
-
-        100% {
-            opacity: 0;
-        }
-    }
-
-    --animate-slide-in: slideIn 300ms cubic-bezier(0.4, 0, 0.2, 1);
-
-    @keyframes slideIn {
-        0% {
-            transform: translateY(-20px);
-            opacity: 0;
-        }
-
-        100% {
-            transform: translateY(0);
-            opacity: 1;
-        }
-    }
-
-    --animate-slide-out: slideOut 300ms cubic-bezier(0.4, 0, 0.2, 1);
-
-    @keyframes slideOut {
-        0% {
-            transform: translateY(0);
-            opacity: 1;
-        }
-
-        100% {
-            transform: translateY(-20px);
-            opacity: 0;
-        }
-    }
 }
 
 .dark {