@ngbase/adk 0.1.17 → 0.1.19

package/schematics/components/files/drawer/drawer.ts.template

@@ -1,24 +1,25 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
 import {
   ChangeDetectionStrategy,
   Component,
   ViewContainerRef,
-  afterNextRender,
+  computed,
   viewChild,
 } from '@angular/core';
 import { FocusTrap } from '@ngbase/adk/a11y';
 import { BaseDialog, basePortal, DialogInput, DialogOptions } from '@ngbase/adk/portal';
-import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
 
 @Component({
   selector: '<%= name %>-drawer',
   template: `
     <div class="pointer-events-none flex h-full flex-col justify-end">
       <div
-        class="pointer-events-auto flex max-h-[90vh] flex-col overflow-hidden rounded-tl-2xl rounded-tr-2xl border-t bg-background p-4 shadow-2xl"
-        [@bottomAnimation]
+        class="{{
+          'bg-background pointer-events-auto flex max-h-[90vh] flex-col overflow-hidden rounded-tl-2xl rounded-tr-2xl border-t p-4 shadow-2xl' +
+            (closing() ? ' drawer-content-leave' : ' drawer-content')
+        }}"
+        (animationend)="onAnimationEnd($event)"
       >
-        <button class="mx-auto h-2 w-20 rounded-full bg-muted-foreground"></button>
+        <button class="bg-muted-foreground mx-auto h-2 w-20 rounded-full"></button>
         @if (!isHideHeader) {
           <div class="flex h-8 items-center">
             <h2 class="flex-1 font-bold">{{ options.title }}</h2>
@@ -26,49 +27,45 @@ import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
           </div>
         }
         <div class="h-full overflow-auto">
-          <ng-container #myDialog />
+          <ng-container #contentContainer />
         </div>
       </div>
     </div>
     @if (backdropColor) {
       <div
-        class="absolute top-0 -z-10 h-full w-full bg-black/30"
-        [@fadeAnimation]
         (click)="close()"
+        (animationend)="onAnimationEnd($event)"
+        class="{{
+          'absolute top-0 -z-10 h-full w-full bg-black/30' +
+            (closing() ? ' dialog-backdrop-leave' : ' dialog-backdrop')
+        }}"
       ></div>
     }
   `,
   host: {
     class: 'fixed block top-0 bottom-0 left-0 right-0 overflow-hidden z-p',
-    '[@parentAnimation]': '',
-    '(@parentAnimation.done)': 'animationDone()',
   },
   hostDirectives: [FocusTrap],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    createHostAnimation(['@bottomAnimation', '@fadeAnimation']),
-    trigger('bottomAnimation', [
-      state('1', style({ transform: 'none' })),
-      state('void', style({ transform: 'translate3d(0, 100%, 0)' })),
-      state('0', style({ transform: 'translate3d(0, 100%, 0)' })),
-      transition('* => *', animate('200ms ease')),
-    ]),
-    fadeAnimation('200ms'),
-  ],
 })
 export class DrawerContainer extends BaseDialog {
-  myDialog = viewChild('myDialog', { read: ViewContainerRef });
+  protected override readonly hasAnimations = true;
+  readonly contentContainer = viewChild('contentContainer', { read: ViewContainerRef });
   backdropColor = true;
   options!: DialogOptions;
   classNames = '';
   isHideHeader = false;
 
-  constructor() {
-    super();
-    afterNextRender(() => {
-      this._afterViewSource.next(this.myDialog()!);
-    });
-  }
+  readonly style = computed(() => {
+    return {
+      width: this.options.fullWindow ? '100vw' : this.options.width,
+      height: this.options.fullWindow ? '100vh' : this.options.height,
+      maxWidth: this.options.fullWindow ? '100vw' : this.options.maxWidth,
+      maxHeight: this.options.fullWindow ? '100vh' : this.options.maxHeight || '96vh',
+      minHeight: this.options.minHeight,
+      minWidth: this.options.minWidth,
+    };
+  });
 
   override setOptions(options: DialogOptions): void {
     this.options = options;

package/schematics/components/files/form-field/form-field.ts.template

@@ -1,11 +1,11 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
   Directive,
   effect,
   ElementRef,
   inject,
-  OnDestroy,
   viewChild,
 } from '@angular/core';
 import {
@@ -13,7 +13,7 @@ import {
   NgbFormField,
   NgbInputError,
   NgbLabel,
-  toggleDiv,
+  NumberFormat,
 } from '@ngbase/adk/form-field';
 import { InputStyle } from './input-style.directive';
 import { NgbSelectTarget } from '@ngbase/adk/select';
@@ -26,20 +26,44 @@ import { NgbSelectTarget } from '@ngbase/adk/select';
   template: `
     <ng-content select="[<%= name %>Label]" />
     <ng-content select="[<%= name %>Description]" />
-    <div class="flex items-center" #target <%= name %>InputStyle>
+    <div
+      class="has-[[disabled]]:bg-input/30 flex items-center"
+      #target
+      <%= name %>InputStyle
+      [class]="
+        ngbFormField.hasErrors()
+          ? 'border-red-500 focus-within:border-red-500 focus-within:ring-red-500/30'
+          : ''
+      "
+    >
       <ng-content select="[<%= name %>Prefix]" />
       <ng-content />
       <ng-content select="[<%= name %>Suffix]" />
     </div>
-    <ng-content select="[<%= name %>Error]" />
+    @for (error of errors(); track error.kind) {
+      <div class="overflow-hidden" animate.enter="height-enter" animate.leave="height-leave">
+        <div class="mx-0.5 min-h-0 text-sm text-red-500">
+          {{ error.message }}
+        </div>
+      </div>
+    }
   `,
   host: {
     class: 'inline-flex flex-col font-medium gap-1',
   },
 })
-export class FormField {
+export class MeeFormField {
+  readonly ngbFormField = inject(NgbFormField);
   readonly selectTarget = inject(NgbSelectTarget);
   readonly target = viewChild.required<ElementRef<HTMLDivElement>>('target');
+  readonly errors = computed(() => {
+    const control = this.ngbFormField._control();
+    const state = control?.state();
+    if (state?.touched() && state?.errors()?.length) {
+      return state.errors();
+    }
+    return [];
+  });
   private _ = effect(() => {
     this.selectTarget.target.set(this.target().nativeElement);
   });
@@ -57,6 +81,16 @@ export class MeeInput {
   readonly formField = inject(NgbFormField, { optional: true });
 }
 
+@Directive({
+  selector: '[<%= name %>NumberInput]',
+  // hostDirectives: [{ directive: InputBase, inputs: ['value'], outputs: ['valueChange'] }],
+  host: {
+    class: 'outline-none w-full bg-transparent placeholder:text-gray-400',
+    '[class.border-red-500]': 'formField?.hasErrors()',
+  },
+})
+export class MeeNumberInput extends NumberFormat {}
+
 @Component({
   selector: '[<%= name %>Label]',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -76,10 +110,18 @@ export class Label {}
 })
 export class Description {}
 
+@Directive({
+  selector: '[<%= name %>Hint]',
+  host: {
+    class: 'text-xs text-muted-foreground mt-1',
+  },
+})
+export class Hint {}
+
 @Directive({
   selector: '[<%= name %>Prefix]',
   host: {
-    class: 'mr-2.5 text-muted-foreground',
+    class: 'mr-2.5 text-muted-foreground flex items-center',
   },
 })
 export class InputPrefix {}
@@ -87,7 +129,7 @@ export class InputPrefix {}
 @Directive({
   selector: '[<%= name %>Suffix]',
   host: {
-    class: 'ml-2.5 text-muted-foreground',
+    class: 'ml-2.5 text-muted-foreground flex items-center',
   },
 })
 export class InputSuffix {}
@@ -95,26 +137,20 @@ export class InputSuffix {}
 @Component({
   selector: '[<%= name %>Error]',
   hostDirectives: [{ directive: NgbInputError, inputs: ['ngbError: <%= name %>Error'] }],
-  template: `<ng-content />`,
+  template: `
+    @if (isInvalid()) {
+      <div class="overflow-hidden" animate.enter="height-enter" animate.leave="height-leave">
+        <div class="min-h-0">
+          <ng-content />
+        </div>
+      </div>
+    }
+  `,
   host: {
     class: 'text-red-500 mx-0.5',
-    '[@toggleDiv]': 'isInvalid() ? "visible" : "hidden"',
   },
-  animations: [toggleDiv],
 })
-export class InputError implements OnDestroy {
+export class InputError {
   readonly error = inject(NgbInputError);
-  readonly el = inject<ElementRef<HTMLDivElement>>(ElementRef);
-
   readonly isInvalid = this.error.isInvalid;
-
-  constructor() {
-    this.error.animate.set(true);
-  }
-
-  ngOnDestroy() {
-    if (!this.isInvalid()) {
-      this.el.nativeElement.classList.add('h-0', 'opacity-0');
-    }
-  }
 }

package/schematics/components/files/inline-edit/inline-edit.ts.template

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
   NgbInlineEdit,
   NgbInlineInput,
@@ -8,6 +8,8 @@ import {
 
 @Component({
   selector: '<%= name %>-inline-edit',
+  exportAs: '<%= name %>InlineEdit',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [aliasInlineEdit(InlineEdit)],
   imports: [NgbInlineInput, NgbInlineValue],
   template: `

package/schematics/components/files/pagination/pagination.ts.template

@@ -10,7 +10,7 @@ import {
   lucideChevronsLeft,
   lucideChevronsRight,
 } from '@ng-icons/lucide';
-import { FormField } from '<%= basepath %>/form-field';
+import { MeeFormField } from '<%= basepath %>/form-field';
 
 @Component({
   selector: '<%= name %>-pagination',
@@ -23,12 +23,12 @@ import { FormField } from '<%= basepath %>/form-field';
       lucideChevronsRight,
     }),
   ],
-  imports: [Button, Icon, Select, Option, NgbPaginationBtn, FormField],
+  imports: [Button, Icon, Select, Option, NgbPaginationBtn, MeeFormField],
   template: `
-    <div class="flex items-center gap-2">
-      <div>Rows per page</div>
+    <div class="flex flex-1 items-center gap-2">
+      <div class="hidden md:block">Rows per page</div>
       <<%= name %>-form-field class="!w-auto [&>.mis]:min-h-8 [&>.mis]:py-0">
-        <<%= name %>-select [value]="size()" (valueChange)="sizeChanged($event)">
+        <<%= name %>-select [value]="size()" (valueChange)="sizeChanged($any($event))">
           @for (size of sizeOptions(); track size) {
             <<%= name %>-option [value]="size">
               {{ size }}
@@ -51,7 +51,7 @@ import { FormField } from '<%= basepath %>/form-field';
             ngbPaginationBtn="page"
             [jump]="snap"
             <%= name %>Button="ghost"
-            class="min-w-9 !p-2 ring-offset-foreground aria-[current=page]:bg-muted aria-[current=page]:text-primary"
+            class="ring-offset-foreground aria-[current=page]:bg-muted aria-[current=page]:text-primary min-w-9 !p-2"
           >
             {{ snap }}
           </button>

package/schematics/components/files/picasa/picasa-base.component.ts.template

@@ -1,12 +1,5 @@
-import {
-  afterNextRender,
-  ChangeDetectionStrategy,
-  Component,
-  viewChild,
-  ViewContainerRef,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, viewChild, ViewContainerRef } from '@angular/core';
 import { BaseDialog, DialogOptions } from '@ngbase/adk/portal';
-import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
 import { Subject } from 'rxjs';
 
 @Component({
@@ -15,18 +8,20 @@ import { Subject } from 'rxjs';
   template: `
     <div class="pointer-events-none flex h-full items-center justify-center">
       <div class="pointer-events-auto">
-        <ng-container #myDialog />
+        <ng-container #contentContainer />
       </div>
       <div
-        class="backdropColor pointer-events-auto absolute top-0 -z-10 h-full w-full"
         (click)="!options.disableClose && close()"
-        [@fadeAnimation]=""
+        (animationend)="onAnimationEnd($event)"
+        class="{{
+          'backdropColor pointer-events-auto absolute top-0 -z-10 h-full w-full' +
+            (closing() ? ' dialog-backdrop-leave' : ' dialog-backdrop')
+        }}"
       ></div>
     </div>
   `,
   host: {
     class: 'fixed block top-0 bottom-0 left-0 right-0 overflow-auto pointer-events-none z-p',
-    '[@parentAnimation]': '',
   },
   styles: `
     .backdropColor {
@@ -41,10 +36,10 @@ import { Subject } from 'rxjs';
       border-radius: 0;
     }
   `,
-  animations: [createHostAnimation(['@fadeAnimation']), fadeAnimation('300ms')],
 })
 export class PicasaBase extends BaseDialog {
-  myDialog = viewChild('myDialog', { read: ViewContainerRef });
+  protected override readonly hasAnimations = true;
+  readonly contentContainer = viewChild('contentContainer', { read: ViewContainerRef });
 
   backdropColor = true;
   isSidePopup = true;
@@ -54,22 +49,6 @@ export class PicasaBase extends BaseDialog {
   isHideHeader = false;
   onDone = new Subject<any>();
 
-  constructor() {
-    super();
-    afterNextRender(() => {
-      this._afterViewSource.next(this.myDialog()!);
-
-      // setTimeout(() => {
-      //   this.show.set(false);
-      // }, 2000);
-    });
-    // this.dialogRef.afterClosed.subscribe(() => {
-    //   setTimeout(() => {
-    //     this.animationDone();
-    //   }, 500);
-    // });
-  }
-
   override setOptions(options: DialogOptions) {
     this.options = options;
     this.classNames = this.options.classNames?.join(' ') || '';

package/schematics/components/files/popover/popover.ts.template

@@ -18,11 +18,14 @@ import {
   imports: [NgbPopoverBackdrop, NgbPopoverMain, NgbPopoverArrow],
   template: ` <div
       ngbPopoverMain
-      [@slideInOutAnimation]
-      class="menu-container pointer-events-auto fixed z-10 flex flex-col rounded-lg border bg-popover text-popover-foreground shadow-md"
+      (animationend)="onAnimationEnd($event)"
+      class="{{
+        'menu-container pointer-events-auto fixed z-10 flex flex-col rounded-lg border bg-popover text-popover-foreground shadow-md' +
+          (closing() ? ' popover-content-leave' : ' popover-content')
+      }}"
     >
       <div class="flex flex-1 flex-col overflow-auto" ngbPopoverArrow>
-        <ng-container #myDialog />
+        <ng-container #contentContainer />
       </div>
     </div>
     @if (options().backdrop) {
@@ -33,7 +36,9 @@ import {
       'fixed top-0 left-0 w-full h-full pointer-events-none z-p flex items-center justify-center',
   },
 })
-class Popover extends NgbPopover {}
+class Popover extends NgbPopover {
+  protected override readonly hasAnimations = true;
+}
 
 export function registerPopover() {
   return registerNgbPopover(Popover);

package/schematics/components/files/select/list-selection.ts.template

@@ -1,12 +1,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { provideValueAccessor } from '@ngbase/adk/utils';
 import { SelectBase } from '@ngbase/adk/select';
 
 @Component({
   selector: '<%= name %>-list-selection',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<ng-content />`,
-  providers: [provideValueAccessor(ListSelection)],
 })
 export class ListSelection<T> extends SelectBase<T> {
   constructor() {

package/schematics/components/files/select/option.ts.template

@@ -24,7 +24,7 @@ export class Option<T> {
 @Component({
   selector: '<%= name %>-option-group, [<%= name %>OptionGroup]',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<div class="sticky -top-1 z-10 bg-popover px-2 py-1.5 text-sm text-muted-foreground">
+  template: `<div class="bg-popover text-muted-foreground sticky -top-1 z-10 px-2 py-1.5 text-sm">
       {{ label() }}
     </div>
     <ng-content />`,

package/schematics/components/files/selectable/selectable.ts.template

@@ -23,8 +23,8 @@ export class SelectableItem<T> {
   hostDirectives: [
     {
       directive: NgbSelectable,
-      inputs: ['activeIndex'],
-      outputs: ['activeIndexChange', 'valueChanged'],
+      inputs: ['value'],
+      outputs: ['valueChange'],
     },
   ],
   template: `<ng-content />`,

package/schematics/components/files/sheet/sheet.ts.template

@@ -4,10 +4,8 @@ import { Button } from '<%= basepath %>/button';
 import { Icon } from '<%= basepath %>/icon';
 import { provideIcons } from '@ng-icons/core';
 import { lucideX } from '@ng-icons/lucide';
-import { sideAnimation } from '@ngbase/adk/dialog';
 import { NgbSheet, NgbSheetContainer, ngbSheetPortal } from '@ngbase/adk/sheet';
 import { aliasSheet } from '@ngbase/adk/sheet';
-import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
 
 @Component({
   selector: '<%= name %>-sheet',
@@ -21,13 +19,22 @@ import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
       [class]="options.position === 'left' ? 'justify-start' : 'justify-end'"
     >
       <div
-        class="pointer-events-auto m-2 flex flex-col overflow-hidden rounded-lg border-l bg-background shadow-2xl will-change-transform"
-        [@sideAnimation]="position()"
+        class="{{
+          'pointer-events-auto m-2 flex flex-col overflow-hidden rounded-lg border-l bg-background shadow-2xl will-change-transform' +
+            (closing()
+              ? options.position === 'left'
+                ? ' sheet-content-left-leave'
+                : ' sheet-content-right-leave'
+              : options.position === 'left'
+                ? ' sheet-content-left'
+                : ' sheet-content-right')
+        }}"
         [ngStyle]="{
           width: options.width,
           minWidth: options.minWidth,
           maxWidth: options.maxWidth,
         }"
+        (animationend)="onAnimationEnd($event)"
       >
         @if (!isHideHeader) {
           <div class="flex items-center border-b px-4 py-2">
@@ -38,29 +45,28 @@ import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
           </div>
         }
         <div class="h-full overflow-auto p-4">
-          <ng-container #myDialog />
+          <ng-container #contentContainer />
         </div>
       </div>
     </div>
     @if (backdropColor) {
       <div
-        class="absolute top-0 -z-10 h-full w-full bg-black/30"
-        [@fadeAnimation]
         (click)="close()"
+        (animationend)="onAnimationEnd($event)"
+        class="{{
+          'absolute top-0 -z-10 h-full w-full bg-black/30' +
+            (closing() ? ' dialog-backdrop-leave' : ' dialog-backdrop')
+        }}"
       ></div>
-      <!-- [class]="status() ? 'pointer-events-auto' : 'pointer-events-none'" -->
     }
   `,
   host: {
     class: 'fixed block top-0 bottom-0 left-0 right-0  z-p',
   },
-  animations: [
-    createHostAnimation(['@fadeAnimation', '@sideAnimation']),
-    fadeAnimation('300ms'),
-    sideAnimation,
-  ],
 })
-export class SheetContainer extends NgbSheetContainer {}
+export class SheetContainer extends NgbSheetContainer {
+  protected override readonly hasAnimations = true;
+}
 
 export function sheetPortal() {
   return ngbSheetPortal(SheetContainer);

package/schematics/components/files/sidenav/sidenav.ts.template

@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, linkedSignal, Signal, signal } from '@angular/core';
+import { breakpointObserver } from '@ngbase/adk/layout';
 import {
   NgbSidenav,
   NgbSidenavHeader,
@@ -7,7 +8,6 @@ import {
   NgbSidenavOverlay,
   SidenavType,
   aliasSidenav,
-  slideAnimation,
 } from '@ngbase/adk/sidenav';
 
 export type { SidenavType };
@@ -19,9 +19,14 @@ export type { SidenavType };
   imports: [NgbSidenavOverlay, NgbSidenavHeaderTrack],
   template: `
     @if (showOverlay()) {
-      <div ngbSidenavOverlay class="z-p bg-black/70"></div>
+      <div
+        ngbSidenavOverlay
+        class="z-p bg-black/70"
+        animate.enter="dialog-backdrop"
+        animate.leave="dialog-backdrop-leave"
+      ></div>
     }
-    <div ngbSidenavHeaderTrack class="transition-[width] duration-500"></div>
+    <div ngbSidenavHeaderTrack class="sidenav-track"></div>
     <ng-content select="<%= name %>-sidenav-header" />
     <ng-content />
   `,
@@ -41,8 +46,66 @@ export class Sidenav extends NgbSidenav {}
     </div>
   `,
   host: {
-    class: 'block h-full bg-background z-p transition-[width] duration-500',
+    class: 'block h-full bg-background z-p sidenav-header',
   },
-  animations: [slideAnimation('500ms cubic-bezier(0.4, 0, 0.2, 1)')],
 })
 export class SidenavHeader extends NgbSidenavHeader {}
+
+/**
+ * A record mapping breakpoint names to their media query and the SidenavType to use when matched.
+ * Breakpoints are evaluated in order; the first match wins.
+ *
+ * @example
+ * { md: { query: '(max-width: 768px)', mode: 'over' }, lg: { query: '(max-width: 1200px)', mode: 'push' } }
+ */
+export type SidenavBreakpoints = Record<string, { query: string; mode: SidenavType }>;
+
+const DEFAULT_BREAKPOINTS: SidenavBreakpoints = {
+  md: { query: '(max-width: 768px)', mode: 'over' },
+};
+
+export function sidenavResponsive(
+  sidenav: Signal<Sidenav>,
+  breakpointConfig: SidenavBreakpoints = DEFAULT_BREAKPOINTS,
+  defaultMode: SidenavType = 'side',
+) {
+  const breakpoints = breakpointObserver();
+
+  // Build the queries record: { md: '(max-width: 768px)', lg: '(max-width: 1200px)' }
+  const queries = Object.fromEntries(
+    Object.entries(breakpointConfig).map(([key, { query }]) => [key, query]),
+  ) as Record<string, string>;
+
+  const bp = breakpoints.observe(queries);
+
+  const mode = linkedSignal({
+    source: bp.state,
+    computation: state => {
+      // Return the mode of the first matching breakpoint
+      for (const key of Object.keys(breakpointConfig)) {
+        if (state[key]) {
+          return breakpointConfig[key].mode;
+        }
+      }
+      return defaultMode;
+    },
+  });
+
+  // Initially hidden if any breakpoint matches
+  const initialMatch = Object.values(breakpointConfig).some(({ query }) =>
+    breakpoints.matches(query),
+  );
+  const show = signal(!initialMatch);
+
+  function toggle() {
+    sidenav().toggle();
+  }
+
+  function toggleMode() {
+    mode.update(current =>
+      current === defaultMode ? Object.values(breakpointConfig)[0].mode : defaultMode,
+    );
+  }
+
+  return { show, mode, toggle, toggleMode };
+}

package/schematics/components/files/sonner/sonner.ts.template

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgbSonner, ngbSonnerPortal, sonnerAnimation, SonnerBase } from '@ngbase/adk/sonner';
+import { NgbSonner, ngbSonnerPortal, SonnerBase } from '@ngbase/adk/sonner';
 import { Icon } from '<%= basepath %>/icon';
 import { provideIcons } from '@ng-icons/core';
 import {
@@ -41,7 +41,6 @@ import {
       }
     </ul>
   `,
-  animations: [sonnerAnimation],
 })
 export class Sonner extends NgbSonner {
   readonly icons = {

package/schematics/components/files/stepper/stepper-llm.md.template

@@ -30,3 +30,10 @@ import { Stepper, Step, StepHeader } from '@/ui/stepper';
   <<%= name %>-step title="Step 3"> Step 3 </<%= name %>-step>
 </<%= name %>-stepper>
 ```
+
+```ts
+class App {
+  readonly activeIndex = signal(0);
+  readonly direction = signal('horizontal');
+}
+```

package/schematics/components/files/stepper/stepper.ts.template

@@ -7,7 +7,6 @@ import {
   NgbStepper,
   NgbStepperStep,
   provideStep,
-  stepperAnimation,
 } from '@ngbase/adk/stepper';
 
 @Component({
@@ -46,8 +45,8 @@ import {
             }
           </div>
           @if (step.verticalTemplate(); as template) {
-            <div class="ml-12" [@slide]>
-              <div class="pt-4">
+            <div class="stepper-content ml-12">
+              <div class="min-h-0 pt-4">
                 <ng-container *ngTemplateOutlet="template" />
               </div>
             </div>
@@ -57,7 +56,6 @@ import {
     </div>
     <ng-content />
   `,
-  animations: [stepperAnimation],
 })
 export class Stepper extends NgbStepper {}