orbiq-neural-ui-kit 1.1.4 → 1.1.6

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,32 +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',
-            // Fix it to the right or left edge taking full height
-            panelClass: ['fixed', 'inset-y-0', this.position() === 'right' ? 'right-0' : 'left-0', 'h-full', 'bg-transparent', 'outline-none', 'z-50'],
+            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) {
@@ -11537,41 +11554,75 @@ 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="h-full bg-white shadow-2xl flex flex-col outline-none border-outline-gray-2"
-        [class.border-l]="position() === 'right'"
-        [class.border-r]="position() === 'left'"
-        [class]="sizeClass()"
-      >
-        <!-- 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()"
-              title="Cerrar"
-            >
-              <i class="lucide-x size-[18px]" style="stroke-width: 1.5px;"></i>
-            </button>
-          }
-        </div>
+      <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()"
+                title="Cerrar"
+              >
+                <i class="lucide-x size-[18px]" style="stroke-width: 1.5px;"></i>
+              </button>
+            }
+          </div>
 
-        <!-- Body -->
-        <div class="flex-1 overflow-y-auto p-6 text-sm font-normal text-ink-gray-7">
-          <ng-content></ng-content>
-        </div>
+          <!-- Body -->
+          <div class="flex-1 overflow-y-auto p-6 text-sm font-normal text-ink-gray-7">
+            <ng-content></ng-content>
+          </div>
 
-        <!-- Footer (Optional) -->
-        <div class="shrink-0">
-          <ng-content select="[footer]"></ng-content>
+          <!-- Footer (Optional) -->
+          <div class="shrink-0">
+            <ng-content select="[footer]"></ng-content>
+          </div>
         </div>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDrawerComponent, decorators: [{
             type: Component,
@@ -11581,34 +11632,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     imports: [CommonModule, DialogModule],
                     template: `
     <ng-template #drawerTemplate>
-      <div 
-        class="h-full bg-white shadow-2xl flex flex-col outline-none border-outline-gray-2"
-        [class.border-l]="position() === 'right'"
-        [class.border-r]="position() === 'left'"
-        [class]="sizeClass()"
-      >
-        <!-- 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()"
-              title="Cerrar"
-            >
-              <i class="lucide-x size-[18px]" style="stroke-width: 1.5px;"></i>
-            </button>
-          }
-        </div>
+      <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()"
+                title="Cerrar"
+              >
+                <i class="lucide-x size-[18px]" style="stroke-width: 1.5px;"></i>
+              </button>
+            }
+          </div>
 
-        <!-- Body -->
-        <div class="flex-1 overflow-y-auto p-6 text-sm font-normal text-ink-gray-7">
-          <ng-content></ng-content>
-        </div>
+          <!-- Body -->
+          <div class="flex-1 overflow-y-auto p-6 text-sm font-normal text-ink-gray-7">
+            <ng-content></ng-content>
+          </div>
 
-        <!-- Footer (Optional) -->
-        <div class="shrink-0">
-          <ng-content select="[footer]"></ng-content>
+          <!-- Footer (Optional) -->
+          <div class="shrink-0">
+            <ng-content select="[footer]"></ng-content>
+          </div>
         </div>
       </div>
     </ng-template>