@ngbase/adk 0.1.1 → 0.1.2

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

@@ -1,20 +1,20 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Icon } from '<%= basepath %>/icon';
+import { provideIcons } from '@ng-icons/core';
+import { lucideGripVertical } from '@ng-icons/lucide';
 import {
   NgbGutter,
   NgbResizable,
   NgbResizableGroup,
-  provideResizable,
-  provideResizableGroup,
+  aliasResizable,
+  aliasResizableGroup,
 } from '@ngbase/adk/resizable';
-import { Icon } from '<%= basepath %>/icon';
-import { provideIcons } from '@ng-icons/core';
-import { lucideGripVertical } from '@ng-icons/lucide';
 
 @Component({
   selector: '<%= name %>-resizable-group',
   exportAs: '<%= name %>ResizableGroup',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideResizableGroup(ResizableGroup)],
+  providers: [aliasResizableGroup(ResizableGroup)],
   template: `<ng-content select="<%= name %>-resizable" />`,
   host: {
     class: 'flex w-full',
@@ -28,7 +28,7 @@ export class ResizableGroup extends NgbResizableGroup {}
   selector: '<%= name %>-resizable',
   exportAs: '<%= name %>Resizable',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideResizable(Resizable)],
+  providers: [aliasResizable(Resizable)],
   viewProviders: [provideIcons({ lucideGripVertical })],
   imports: [Icon, NgbGutter],
   template: `<ng-content />

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

@@ -13,6 +13,7 @@ import { ListStyle } from '<%= basepath %>/list';
     }
     <ng-content />`,
   host: {
+    class: 'outline-none',
     '[class.bg-muted-background]': 'option.active() || option.checked()',
   },
 })

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

@@ -1,16 +1,16 @@
 import { NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { Icon } from '<%= basepath %>/icon';
+import { provideIcons } from '@ng-icons/core';
+import { lucideChevronsUpDown } from '@ng-icons/lucide';
 import {
+  aliasSelect,
   NgbSelect,
   NgbSelectOption,
   NgbSelectOptionGroup,
-  provideSelect,
   SelectValue,
 } from '@ngbase/adk/select';
-import { Icon } from '<%= basepath %>/icon';
-import { provideIcons } from '@ng-icons/core';
-import { lucideChevronsUpDown } from '@ng-icons/lucide';
 import { Option } from './option';
 import { SelectInput } from './select-input';
 
@@ -24,7 +24,7 @@ export class SelectOption<T> {}
   selector: '<%= name %>-select',
   changeDetection: ChangeDetectionStrategy.OnPush,
   viewProviders: [provideIcons({ lucideChevronsUpDown })],
-  providers: [provideSelect(Select)],
+  providers: [aliasSelect(Select)],
   imports: [
     Icon,
     FormsModule,
@@ -38,12 +38,12 @@ export class SelectOption<T> {}
     <button
       ngbSelectValue
       [class.opacity-50]="disabled()"
-      class="flex min-h-5 w-full items-center justify-between gap-1 whitespace-nowrap outline-none"
+      class="flex min-h-5 w-full items-center gap-1 whitespace-nowrap text-left outline-none"
     >
       <!-- Prefix template -->
       <ng-content select=".select-prefix" />
 
-      <span class="truncate" [class.text-muted]="!cValue()">
+      <span class="flex-1 truncate" [class.text-muted]="!cValue()">
         <ng-content select="[<%= name %>SelectTrigger]">
           {{ cValue() || placeholder() }}
         </ng-content>
@@ -87,7 +87,7 @@ export class SelectOption<T> {}
     </ng-template>
   `,
   host: {
-    class: 'flex cursor-pointer font-medium',
+    class: 'flex cursor-pointer font-medium outline-none',
     '[class.pointer-events-none]': 'disabled()',
   },
 })

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

@@ -1,26 +1,20 @@
 import { NgStyle } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  OnDestroy,
-  ViewContainerRef,
-  afterNextRender,
-  inject,
-  signal,
-  viewChild,
-} from '@angular/core';
-import { BaseDialog, basePortal, DialogInput, DialogOptions, DialogRef } from '@ngbase/adk/portal';
-import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Button } from '<%= basepath %>/button';
-import { sideAnimation } from '@ngbase/adk/dialog';
 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',
-  imports: [NgStyle, Button, Icon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasSheet(SheetContainer)],
   viewProviders: [provideIcons({ lucideX })],
+  imports: [NgStyle, Button, Icon],
   template: `
     <div
       class="pointer-events-none flex h-full"
@@ -59,76 +53,17 @@ import { lucideX } from '@ng-icons/lucide';
   `,
   host: {
     class: 'fixed block top-0 bottom-0 left-0 right-0  z-p',
-    '[@parentAnimation]': '',
-    '(@parentAnimation.done)': 'animationDone()',
   },
-  changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
     createHostAnimation(['@fadeAnimation', '@sideAnimation']),
     fadeAnimation('300ms'),
     sideAnimation,
   ],
 })
-export class SheetContainer extends BaseDialog implements OnDestroy {
-  myDialog = viewChild('myDialog', { read: ViewContainerRef });
-  backdropColor = true;
-  options!: SheetOptions;
-  classNames = '';
-  isHideHeader = false;
-  position = signal<'left' | 'right' | 'center'>('left');
-
-  constructor() {
-    super();
-    afterNextRender(() => {
-      this._afterViewSource.next(this.myDialog()!);
-      this.position.set('center');
-    });
-    const ref = inject(DialogRef);
-    ref.afterClosed.subscribe(() => {
-      console.log('afterClosed', this.options.position);
-      this.position.set(this.options.position as 'left' | 'right' | 'center');
-    });
-  }
-
-  override setOptions(options: SheetOptions): void {
-    this.options = options;
-    this.classNames = this.options.classNames?.join(' ') || '';
-    this.isHideHeader = this.options.header || false;
-    this.backdropColor = this.options.backdropColor || true;
-    this.position.set(this.options.position as 'left' | 'right' | 'center');
-  }
-
-  ngOnDestroy(): void {
-    // this.position.set(this.options.position as 'left' | 'right' | 'center');
-  }
-}
-
-export class SheetOptions extends DialogOptions {
-  position?: 'left' | 'right' = 'right';
-}
+export class SheetContainer extends NgbSheetContainer {}
 
 export function sheetPortal() {
-  const NAME = 'sheet';
-  const base = basePortal(NAME, SheetContainer);
-
-  function open<T>(component: DialogInput, opt?: SheetOptions) {
-    const { diaRef } = base.open(
-      component,
-      comp => {
-        const options = { ...new SheetOptions(), ...opt };
-        comp.instance.setOptions(options);
-      },
-      opt,
-    );
-
-    const { afterClosed } = diaRef;
-    return { afterClosed };
-  }
-
-  function closeAll() {
-    base.closeAll();
-  }
-  return { open, closeAll };
+  return ngbSheetPortal(SheetContainer);
 }
 
-export type Sheet = ReturnType<typeof sheetPortal>;
+export type Sheet = NgbSheet;

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

@@ -5,9 +5,9 @@ import {
   NgbSidenavHeaderContent,
   NgbSidenavHeaderTrack,
   NgbSidenavOverlay,
-  provideSidenav,
-  slideAnimation,
   SidenavType,
+  aliasSidenav,
+  slideAnimation,
 } from '@ngbase/adk/sidenav';
 
 export type { SidenavType };
@@ -15,7 +15,7 @@ export type { SidenavType };
 @Component({
   selector: '<%= name %>-sidenav',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideSidenav(Sidenav)],
+  providers: [aliasSidenav(Sidenav)],
   imports: [NgbSidenavOverlay, NgbSidenavHeaderTrack],
   template: `
     @if (showOverlay()) {

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

@@ -1,18 +1,12 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import {
-  NgbSlider,
-  SliderRange,
-  SliderThumb,
-  SliderTrack,
-  provideSlider,
-} from '@ngbase/adk/slider';
+import { NgbSlider, SliderRange, SliderThumb, SliderTrack, aliasSlider } from '@ngbase/adk/slider';
 import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
 
 @Component({
   selector: '<%= name %>-slider',
   exportAs: '<%= name %>Slider',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideSlider(Slider)],
+  providers: [aliasSlider(Slider)],
   imports: [FocusStyle, SliderTrack, SliderRange, SliderThumb],
   template: `
     <div
@@ -35,8 +29,7 @@ import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
     }
   `,
   host: {
-    class: 'block relative my-1',
-    '[class]': 'orientation() === "vertical" ? "w-2" : "h-2"',
+    class: 'block relative my-2 aria-[orientation=vertical]:w-2 aria-[orientation=horizontal]:h-2',
   },
 })
 export class Slider extends NgbSlider {}

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgbSonner, ngbSonnerPortal, SonnerBase } from '@ngbase/adk/sonner';
+import { NgbSonner, ngbSonnerPortal, sonnerAnimation, SonnerBase } from '@ngbase/adk/sonner';
 import { Icon } from '<%= basepath %>/icon';
 import { provideIcons } from '@ng-icons/core';
 import {
@@ -12,10 +12,10 @@ import {
 @Component({
   selector: '<%= name %>-sonner',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [Icon, SonnerBase],
   providers: [
     provideIcons({ lucideCircleCheck, lucideInfo, lucideTriangleAlert, lucideCircleAlert }),
   ],
+  imports: [Icon, SonnerBase],
   template: `
     <ul class="fixed bottom-0 right-0 flex flex-col gap-1">
       @for (msg of messages(); track msg.id) {
@@ -41,6 +41,7 @@ import {
       }
     </ul>
   `,
+  animations: [sonnerAnimation],
 })
 export class Sonner extends NgbSonner {
   readonly icons = {

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

@@ -1,20 +1,20 @@
 import { NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
 import {
+  aliasStepper,
   NgbStep,
   NgbStepHeader,
   NgbStepper,
   NgbStepperStep,
   provideStep,
-  provideStepper,
-  slideAnimation,
+  stepperAnimation,
 } from '@ngbase/adk/stepper';
 
 @Component({
   selector: '<%= name %>-stepper',
   exportAs: '<%= name %>Stepper',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideStepper(Stepper)],
+  providers: [aliasStepper(Stepper)],
   imports: [NgTemplateOutlet, NgbStepperStep],
   template: `
     <div class="flex justify-between" [class.flex-col]="direction() === 'vertical'">
@@ -57,7 +57,7 @@ import {
     </div>
     <ng-content />
   `,
-  animations: [slideAnimation],
+  animations: [stepperAnimation],
 })
 export class Stepper extends NgbStepper {}
 

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

@@ -11,7 +11,7 @@ import { NgbSwitch, NgbSwitchLabel, NgbSwitchThumb, NgbSwitchTrack } from '@ngba
   template: `
     <button
       ngbSwitchTrack
-      class="relative w-9 rounded-full border-0.5 border-transparent bg-muted-background transition-colors aria-[checked=true]:bg-primary"
+      class="relative w-9 rounded-full border-2 border-transparent bg-muted-background transition-colors aria-[checked=true]:bg-primary"
     >
       <span
         #thumb="ngbSwitchThumb"

package/schematics/components/files/tabs/tab.ts.template

@@ -1,25 +1,26 @@
 import { NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { Icon } from '<%= basepath %>/icon';
+import { provideIcons } from '@ng-icons/core';
+import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
 import {
+  aliasTab,
+  aliasTabs,
   NgbTab,
+  NgbTabChangeEvent,
   NgbTabHeader,
   NgbTabLazy,
   NgbTabs,
-  provideTab,
-  provideTabs,
   TabButton,
   TabButtonsGroup,
   TabScroll,
 } from '@ngbase/adk/tabs';
-import { Icon } from '<%= basepath %>/icon';
-import { provideIcons } from '@ng-icons/core';
-import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
 
 @Component({
   selector: '<%= name %>-tabs',
   imports: [Icon, TabButton, TabButtonsGroup, TabScroll],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideTabs(Tabs)],
+  providers: [aliasTabs(Tabs)],
   viewProviders: [provideIcons({ lucideChevronRight, lucideChevronLeft })],
   template: `<div class="flex items-center border-b">
       <ng-content select=".tab-start-header-content" />
@@ -35,7 +36,7 @@ import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
             @for (tab of tabs(); track tab.id) {
               <button
                 [ngbTabButton]="tab"
-                class="whitespace-nowrap border-b-2 border-transparent aria-[disabled=true]:cursor-not-allowed aria-[selected=true]:!border-primary aria-[disabled=true]:text-muted aria-[selected=true]:!text-primary aria-[disabled=true]:opacity-50"
+                class="whitespace-nowrap border-b-2 border-transparent px-4 py-3 font-medium text-muted aria-[disabled=true]:cursor-not-allowed aria-[selected=true]:!border-primary aria-[disabled=true]:text-muted aria-[selected=true]:!text-primary aria-[disabled=true]:opacity-50"
               ></button>
             }
           </div>
@@ -60,7 +61,7 @@ export class Tabs extends NgbTabs<Tab> {}
   selector: '<%= name %>-tab',
   exportAs: '<%= name %>Tab',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideTab(Tab)],
+  providers: [aliasTab(Tab)],
   imports: [NgTemplateOutlet],
   template: `
     @if (lazyTemplate(); as template) {
@@ -87,3 +88,5 @@ export class TabHeader {}
   hostDirectives: [NgbTabLazy],
 })
 export class TabLazy {}
+
+export type TabChangeEvent = NgbTabChangeEvent;

package/schematics/components/files/theme/theme.service.ts.template

@@ -1,11 +1,8 @@
 import { inject, Injectable, signal } from '@angular/core';
 import { isClient } from '@ngbase/adk/utils';
-import { dialogPortal } from '<%= basepath %>/dialog';
-import { ThemeComponent } from './theme.component';
 
 @Injectable({ providedIn: 'root' })
 export class ThemeService {
-  dialog = dialogPortal();
   mode = signal<'light' | 'dark' | ''>('light');
 
   constructor() {
@@ -31,14 +28,6 @@ export class ThemeService {
     localStorage.setItem('theme', mode);
     this.mode.set(mode);
   }
-
-  open() {
-    this.dialog.open(ThemeComponent, {
-      title: 'Theme',
-      backdrop: false,
-      width: '20rem',
-    });
-  }
 }
 
 export const injectTheme = () => inject(ThemeService);

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

@@ -1,11 +1,13 @@
 import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { injectTheme } from '<%= basepath %>/theme';
+import { NgbPopoverArrow, providePopoverArrowTracker } from '@ngbase/adk/popover';
 import {
+  NgbTooltip,
   NgbTooltipTemplate,
   provideNgbTooltipOptions,
+  tooltipAnimation,
   TooltipOptions,
-  NgbTooltip,
 } from '@ngbase/adk/tooltip';
-import { injectTheme } from '<%= basepath %>/theme';
 
 @Directive({
   selector: '[<%= name %>Tooltip]',
@@ -25,12 +27,15 @@ export class Tooltip {}
 @Component({
   selector: '<%= name %>-tooltip',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `{{ content() }}`,
+  providers: [providePopoverArrowTracker()],
+  imports: [NgbPopoverArrow],
+  template: `<div ngbPopoverArrow>{{ content() }}</div>`,
   host: {
     class:
       'fixed inline-block rounded-lg bg-foreground px-3 py-1 border shadow-md z-p whitespace-pre-line max-w-[15rem] text-text',
     '[class]': `theme.mode() === 'dark' ? 'light' : 'dark'`,
   },
+  animations: [tooltipAnimation],
 })
 export class TooltipComponent extends NgbTooltipTemplate {
   readonly theme = injectTheme();

package/schematics/components/files/tour/index.ts.template

@@ -1,3 +1 @@
-export * from './tour-step';
 export * from './tour';
-export * from './tour.service';

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

@@ -1,8 +1,19 @@
-import { Directive } from '@angular/core';
-import { NgbTour } from '@ngbase/adk/tour';
+import { Directive, inject, InjectionToken } from '@angular/core';
+import { NgbTour, NgbTourService, NgbTourStep } from '@ngbase/adk/tour';
+
+export const TourService = new InjectionToken<NgbTourService>('TourService', {
+  providedIn: 'root',
+  factory: () => inject(NgbTourService),
+});
 
 @Directive({
   selector: '[<%= name %>Tour]',
   hostDirectives: [NgbTour],
 })
 export class Tour {}
+
+@Directive({
+  selector: '[<%= name %>TourStep]',
+  hostDirectives: [{ directive: NgbTourStep, inputs: ['ngbTourStep: <%= name %>TourStep'] }],
+})
+export class TourStep {}

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

@@ -5,16 +5,16 @@ import {
   NgbTreeNodeContent,
   NgbTreeNodeDef,
   NgbTreeNodeToggle,
-  provideTree,
-  provideTreeNode,
+  aliasTree,
+  aliasTreeNode,
 } from '@ngbase/adk/tree';
 
 @Component({
   selector: '<%= name %>-tree',
   exportAs: '<%= name %>Tree',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasTree(Tree)],
   template: `<ng-container #container />`,
-  providers: [provideTree(Tree)],
   host: {
     class: 'block',
   },

package/schematics/components/schema.json

@@ -52,12 +52,15 @@
         "list",
         "mask",
         "menu",
+        "otp",
         "pagination",
         "popover",
         "progress",
         "radio",
         "resizable",
+        "scroll-area",
         "select",
+        "selectable",
         "separator",
         "sheet",
         "sidenav",
@@ -68,6 +71,7 @@
         "stepper",
         "switch",
         "table",
+        "tabs",
         "toggle",
         "toggle-group",
         "tooltip",
@@ -102,12 +106,15 @@
           { "value": "list", "label": "List" },
           { "value": "mask", "label": "Mask" },
           { "value": "menu", "label": "Menu" },
+          { "value": "otp", "label": "OTP" },
           { "value": "pagination", "label": "Pagination" },
           { "value": "popover", "label": "Popover" },
           { "value": "progress", "label": "Progress" },
           { "value": "radio", "label": "Radio" },
           { "value": "resizable", "label": "Resizable" },
+          { "value": "scroll-area", "label": "Scroll Area" },
           { "value": "select", "label": "Select" },
+          { "value": "selectable", "label": "Selectable" },
           { "value": "separator", "label": "Separator" },
           { "value": "sheet", "label": "Sheet" },
           { "value": "sidenav", "label": "Sidenav" },
@@ -118,6 +125,7 @@
           { "value": "stepper", "label": "Stepper" },
           { "value": "switch", "label": "Switch" },
           { "value": "table", "label": "Table" },
+          { "value": "tabs", "label": "Tabs" },
           { "value": "toggle", "label": "Toggle" },
           { "value": "toggle-group", "label": "Toggle Group" },
           { "value": "tooltip", "label": "Tooltip" },

package/select/option-group.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from "@angular/core";
 export declare class NgbOptionGroup {
-    label: import("@angular/core").InputSignal<string>;
-    disabled: import("@angular/core").InputSignal<boolean>;
+    readonly label: import("@angular/core").InputSignal<string>;
+    readonly disabled: import("@angular/core").InputSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgbOptionGroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgbOptionGroup, "[ngbOptionGroup]", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbOptionGroup, "[ngbOptionGroup]", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/select/select.d.ts

@@ -35,9 +35,9 @@ export declare class NgbSelect<T> extends SelectBase<T> {
     };
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<NgbSelect<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgbSelect<any>, "[ngbSelect]", never, { "search": { "alias": "search"; "required": false; "isSignal": true; }; }, { "search": "searchChange"; }, ["optionTemplate"], [".select-prefix", "[ngbSelectTrigger]", "[ngbSelectInput]", "*"], true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbSelect<any>, "[ngbSelect]", never, { "search": { "alias": "search"; "required": false; "isSignal": true; }; }, { "search": "searchChange"; }, ["optionTemplate"], never, true, never>;
 }
-export declare function provideSelect(select: typeof NgbSelect): (({
+export declare function aliasSelect(select: typeof NgbSelect): (({
     provide: import("@angular/core").InjectionToken<readonly import("@angular/forms").ControlValueAccessor[]>;
     useExisting: import("@angular/core").Type<any>;
     multi: boolean;

package/sheet/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@ngbase/adk/sheet" />
+export * from './public-api';

package/sheet/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './sheet.service';
+export * from './sheet';

package/sheet/sheet.d.ts

@@ -0,0 +1,26 @@
+import { OnDestroy, ViewContainerRef } from '@angular/core';
+import { BaseDialog } from '@ngbase/adk/portal';
+import { SheetOptions } from './sheet.service';
+import * as i0 from "@angular/core";
+export declare class NgbSheetContainer extends BaseDialog implements OnDestroy {
+    myDialog: import("@angular/core").Signal<ViewContainerRef | undefined>;
+    readonly dir: import("@ngbase/adk/bidi").Directionality;
+    backdropColor: boolean;
+    options: SheetOptions;
+    classNames: string;
+    isHideHeader: boolean;
+    readonly position: import("@angular/core").Signal<{
+        params: {
+            outTransform: string;
+        };
+    }>;
+    constructor();
+    setOptions(options: SheetOptions): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgbSheetContainer, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbSheetContainer, "mee-sheet", never, {}, {}, never, never, true, never>;
+}
+export declare function aliasSheet(dialog: typeof NgbSheetContainer): {
+    provide: typeof NgbSheetContainer;
+    useExisting: typeof NgbSheetContainer;
+};

package/sheet/sheet.service.d.ts

@@ -0,0 +1,13 @@
+import { DialogInput, DialogOptions } from '@ngbase/adk/portal';
+import { NgbSheetContainer } from './sheet';
+export declare class SheetOptions extends DialogOptions {
+    position?: 'left' | 'right';
+}
+export declare function ngbSheetPortal(component: typeof NgbSheetContainer): {
+    open: <T>(component: DialogInput, opt?: SheetOptions) => {
+        afterClosed: import("rxjs").Observable<any>;
+        close: (data?: any) => void;
+    };
+    closeAll: () => void;
+};
+export type NgbSheet = ReturnType<typeof ngbSheetPortal>;

package/sidenav/public-api.d.ts

@@ -1,3 +1,3 @@
-export { NgbSidenav, NgbSidenavOverlay, provideSidenav } from './sidenav';
+export { NgbSidenav, NgbSidenavOverlay, aliasSidenav } from './sidenav';
 export { NgbSidenavHeader, NgbSidenavHeaderContent, NgbSidenavHeaderTrack, slideAnimation, } from './sidenav-header';
 export { type SidenavType } from './sidenav.service';

package/sidenav/sidenav.d.ts

@@ -17,7 +17,7 @@ export declare class NgbSidenav {
     static ɵfac: i0.ɵɵFactoryDeclaration<NgbSidenav, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgbSidenav, "[ngbSidenav]", ["ngbSidenav"], { "show": { "alias": "show"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, { "show": "showChange"; }, never, never, true, never>;
 }
-export declare const provideSidenav: (sidenav: Type<NgbSidenav>) => (typeof SidenavService | {
+export declare const aliasSidenav: (sidenav: Type<NgbSidenav>) => (typeof SidenavService | {
     provide: typeof NgbSidenav;
     useExisting: Type<NgbSidenav>;
 })[];

package/slider/public-api.d.ts

@@ -1 +1 @@
-export { NgbSlider, SliderTrack, SliderRange, SliderThumb, provideSlider } from './slider';
+export { NgbSlider, SliderTrack, SliderRange, SliderThumb, aliasSlider } from './slider';