orbiq-neural-ui-kit 1.1.5 → 1.1.7

package/fesm2022/orbiq-neural-ui-kit.mjs

@@ -11487,6 +11487,10 @@ class NeuralDrawerComponent {
     onClose = new EventEmitter();
     drawerTemplate;
     dialogRef = null;
+    // Animation states
+    isVisible = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
+    isClosing = false;
     constructor(dialog) {
         this.dialog = dialog;
         effect(() => {
@@ -11494,31 +11498,45 @@ class NeuralDrawerComponent {
             if (isOpen && !this.dialogRef && this.drawerTemplate) {
                 this.openDrawer();
             }
-            else if (!isOpen && this.dialogRef) {
-                this.dialogRef.close();
-                this.dialogRef = null;
+            else if (!isOpen && this.dialogRef && !this.isClosing) {
+                this.close();
             }
-        });
+        }, { allowSignalWrites: true });
     }
     openDrawer() {
+        this.isClosing = false;
         this.dialogRef = this.dialog.open(this.drawerTemplate, {
-            disableClose: !this.dismissible(),
+            disableClose: true, // We handle close manually for animation
             backdropClass: 'bg-black-overlay-200',
             panelClass: ['w-full', 'h-full', 'bg-transparent', 'shadow-none', 'outline-none', 'pointer-events-none'],
             hasBackdrop: true,
         });
-        this.dialogRef.closed.subscribe(() => {
-            this.dialogRef = null;
-            if (this.openModel()) {
-                this.openModel.set(false);
+        // Wait a tick so the DOM renders the translated state, then trigger transition
+        setTimeout(() => {
+            this.isVisible.set(true);
+        }, 10);
+        // Listen to backdrop clicks if dismissible
+        this.dialogRef.backdropClick.subscribe(() => {
+            if (this.dismissible()) {
+                this.close();
             }
-            this.onClose.emit();
         });
     }
     close() {
-        if (this.dialogRef) {
-            this.dialogRef.close();
-        }
+        if (!this.dialogRef || this.isClosing)
+            return;
+        this.isClosing = true;
+        this.isVisible.set(false);
+        setTimeout(() => {
+            if (this.dialogRef) {
+                this.dialogRef.close();
+                this.dialogRef = null;
+                if (this.openModel()) {
+                    this.openModel.set(false);
+                }
+                this.onClose.emit();
+            }
+        }, 300); // 300ms matches transition-transform duration
     }
     ngOnDestroy() {
         if (this.dialogRef) {
@@ -11536,27 +11554,62 @@ class NeuralDrawerComponent {
         return map[this.size()] || 'w-80';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
+    wrapperClasses = computed(() => {
+        const p = this.position();
+        if (p === 'right')
+            return 'justify-end';
+        if (p === 'left')
+            return 'justify-start';
+        if (p === 'bottom')
+            return 'flex-col justify-end';
+        if (p === 'top')
+            return 'flex-col justify-start';
+        return '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
+    panelClasses = computed(() => {
+        const p = this.position();
+        const isVisible = this.isVisible();
+        const base = 'bg-white shadow-2xl flex flex-col outline-none border-outline-gray-2 pointer-events-auto transition-transform duration-300 ease-in-out transform';
+        let sizing = '';
+        let borders = '';
+        let translate = '';
+        if (p === 'right' || p === 'left') {
+            sizing = `h-full ${this.sizeClass()}`;
+            borders = p === 'right' ? 'border-l' : 'border-r';
+            translate = !isVisible
+                ? (p === 'right' ? 'translate-x-full' : '-translate-x-full')
+                : 'translate-x-0';
+        }
+        else {
+            sizing = 'w-full max-h-[90vh]'; // Leaves a little gap at the top for bottom sheets
+            borders = p === 'bottom' ? 'border-t rounded-t-xl' : 'border-b rounded-b-xl';
+            translate = !isVisible
+                ? (p === 'bottom' ? 'translate-y-full' : '-translate-y-full')
+                : 'translate-y-0';
+        }
+        return `${base} ${sizing} ${borders} ${translate}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDrawerComponent, deps: [{ token: i1$3.Dialog }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralDrawerComponent, isStandalone: true, selector: "neural-drawer", inputs: { openModel: { classPropertyName: "openModel", publicName: "openModel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openModel: "openModelChange", onClose: "onClose" }, viewQueries: [{ propertyName: "drawerTemplate", first: true, predicate: ["drawerTemplate"], descendants: true }], ngImport: i0, template: `
     <ng-template #drawerTemplate>
-      <div class="fixed inset-0 z-50 flex" [ngClass]="position() === 'right' ? 'justify-end' : 'justify-start'">
-        <div 
-          class="h-full bg-white shadow-2xl flex flex-col outline-none border-outline-gray-2 pointer-events-auto"
-          [class.border-l]="position() === 'right'"
-          [class.border-r]="position() === 'left'"
-          [class]="sizeClass()"
-        >
+      <div class="fixed inset-0 z-50 flex" [ngClass]="wrapperClasses()">
+        <div [class]="panelClasses()">
           <!-- Header -->
           <div class="flex items-center justify-between px-6 py-4 border-b border-outline-gray-2 shrink-0">
             <h2 class="text-lg font-semibold text-ink-gray-9">{{ title() }}</h2>
             @if (showCloseButton()) {
-              <button 
-                class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-2 text-ink-gray-5 hover:text-ink-gray-9 transition-colors"
-                (click)="close()"
+              <neural-button 
+                variant="ghost" 
+                theme="gray" 
+                size="sm" 
+                [iconOnly]="true" 
+                icon="lucide-x" 
+                (clicked)="close()" 
                 title="Cerrar"
-              >
-                <i class="lucide-x size-[18px]" style="stroke-width: 1.5px;"></i>
-              </button>
+                class="text-ink-gray-5 hover:text-ink-gray-9"
+              ></neural-button>
             }
           </div>
 
@@ -11566,40 +11619,38 @@ class NeuralDrawerComponent {
           </div>
 
           <!-- Footer (Optional) -->
-          <div class="shrink-0">
+          <div class="shrink-0 px-6 py-4 border-t border-outline-gray-2">
             <ng-content select="[footer]"></ng-content>
           </div>
         </div>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DialogModule }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDrawerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'neural-drawer',
                     standalone: true,
-                    imports: [CommonModule, DialogModule],
+                    imports: [CommonModule, DialogModule, NeuralButtonComponent],
                     template: `
     <ng-template #drawerTemplate>
-      <div class="fixed inset-0 z-50 flex" [ngClass]="position() === 'right' ? 'justify-end' : 'justify-start'">
-        <div 
-          class="h-full bg-white shadow-2xl flex flex-col outline-none border-outline-gray-2 pointer-events-auto"
-          [class.border-l]="position() === 'right'"
-          [class.border-r]="position() === 'left'"
-          [class]="sizeClass()"
-        >
+      <div class="fixed inset-0 z-50 flex" [ngClass]="wrapperClasses()">
+        <div [class]="panelClasses()">
           <!-- Header -->
           <div class="flex items-center justify-between px-6 py-4 border-b border-outline-gray-2 shrink-0">
             <h2 class="text-lg font-semibold text-ink-gray-9">{{ title() }}</h2>
             @if (showCloseButton()) {
-              <button 
-                class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-2 text-ink-gray-5 hover:text-ink-gray-9 transition-colors"
-                (click)="close()"
+              <neural-button 
+                variant="ghost" 
+                theme="gray" 
+                size="sm" 
+                [iconOnly]="true" 
+                icon="lucide-x" 
+                (clicked)="close()" 
                 title="Cerrar"
-              >
-                <i class="lucide-x size-[18px]" style="stroke-width: 1.5px;"></i>
-              </button>
+                class="text-ink-gray-5 hover:text-ink-gray-9"
+              ></neural-button>
             }
           </div>
 
@@ -11609,7 +11660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           </div>
 
           <!-- Footer (Optional) -->
-          <div class="shrink-0">
+          <div class="shrink-0 px-6 py-4 border-t border-outline-gray-2">
             <ng-content select="[footer]"></ng-content>
           </div>
         </div>