@ngbase/adk 0.1.3 → 0.1.4

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

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { aliasRadio, NgbRadio, NgbRadioGroup, NgbRadioIndicator } from '@ngbase/adk/radio';
+import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
+
+@Component({
+  selector: '<%= name %>-radio-group',
+  hostDirectives: [{ directive: NgbRadioGroup, inputs: ['value'], outputs: ['valueChange'] }],
+  template: `<ng-content />`,
+  host: {
+    class: 'flex gap-2',
+  },
+})
+export class RadioGroup {}
+
+@Component({
+  selector: '<%= name %>-radio, [<%= name %>Radio]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasRadio(Radio)],
+  imports: [FocusStyle, NgbRadioIndicator],
+  template: `
+    <button
+      <%= name %>FocusStyle
+      ngbRadioIndicator
+      class="custom-radio relative flex h-4 w-4 flex-none items-center justify-center rounded-full border border-primary group-aria-[disabled='true']:border-muted-foreground"
+    >
+       <div
+        class="h-2 w-2 rounded-full bg-primary group-aria-[disabled='true']:bg-muted-foreground"
+      ></div>
+    </button>
+    <ng-content />
+  `,
+  host: {
+    class:
+      'flex items-center gap-2 py-1 cursor-pointer aria-[disabled="true"]:opacity-40 aria-[disabled="true"]:cursor-not-allowed group',
+  },
+})
+export class Radio extends NgbRadio {}

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

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of resizable
+ */
+
+export * from './resizable';

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

@@ -0,0 +1,59 @@
+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,
+  aliasResizable,
+  aliasResizableGroup,
+} from '@ngbase/adk/resizable';
+
+@Component({
+  selector: '<%= name %>-resizable-group',
+  exportAs: '<%= name %>ResizableGroup',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasResizableGroup(ResizableGroup)],
+  template: `<ng-content select="<%= name %>-resizable" />`,
+  host: {
+    class: 'flex w-full',
+    '[class.flex-col]': "direction() === 'vertical'",
+    '[attr.id]': 'id',
+  },
+})
+export class ResizableGroup extends NgbResizableGroup {}
+
+@Component({
+  selector: '<%= name %>-resizable',
+  exportAs: '<%= name %>Resizable',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasResizable(Resizable)],
+  viewProviders: [provideIcons({ lucideGripVertical })],
+  imports: [Icon, NgbGutter],
+  template: `<ng-content />
+    <ng-template #dragElement>
+      @if (draggable()) {
+        <div
+          ngbGutter
+          class="{{
+            'dragElement relative flex cursor-ew-resize items-center justify-center after:absolute after:top-0' +
+              (resizable.direction() === 'vertical'
+                ? ' bottom-0 left-0 h-0 w-full cursor-ns-resize border-b after:-mt-1 after:h-2 after:w-full'
+                : ' right-0 top-0 w-0 cursor-ew-resize border-l after:h-full after:w-2')
+          }}"
+        >
+          <<%= name %>-icon
+            name="lucideGripVertical"
+            class="z-30 rounded-lg border bg-muted py-0.5"
+            size=".75rem"
+            [class]="resizable.direction() === 'vertical' ? 'rotate-90' : ''"
+          />
+        </div>
+      }
+    </ng-template>`,
+  host: {
+    class: 'relative overflow-hidden block flex-none',
+  },
+})
+export class Resizable extends NgbResizable {}

package/schematics/components/files/scroll-area/index.ts.template

@@ -0,0 +1 @@
+export * from './scroll-area';

package/schematics/components/files/scroll-area/scroll-area.ts.template

@@ -0,0 +1,40 @@
+import { Component, ChangeDetectionStrategy, input } from '@angular/core';
+import { NgbScrollArea, NgbScrollBar, ScrollBarOrientation } from '@ngbase/adk/scroll-area';
+
+@Component({
+  selector: '<%= name %>-scroll-area',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgbScrollBar, NgbScrollArea],
+  template: `
+    <div
+      ngbScrollArea
+      [alwaysShow]="alwaysShow()"
+      [orientation]="orientation()"
+      [hideDelay]="hideDelay()"
+      class="flex-1"
+    >
+      <ng-content></ng-content>
+
+      <div
+        ngbScrollBar="vertical"
+        class="!right-0.5 rounded bg-black/10 opacity-0 transition-colors duration-150 hover:bg-black/50 data-[active=true]:bg-black/50 data-[visible=true]:opacity-100"
+      ></div>
+
+      <div
+        ngbScrollBar="horizontal"
+        class="!bottom-0.5 rounded bg-black/10 opacity-0 transition-colors duration-150 hover:bg-black/50 data-[active=true]:bg-black/50 data-[visible=true]:opacity-100"
+      ></div>
+
+      <!-- Corner piece when both scrollbars are visible -->
+      <div class="scroll-area-corner absolute bottom-0 right-0 h-2 w-2 rounded bg-black/10"></div>
+    </div>
+  `,
+  host: {
+    class: 'flex flex-col w-full',
+  },
+})
+export class ScrollArea {
+  readonly alwaysShow = input<boolean>(false);
+  readonly orientation = input<ScrollBarOrientation>('both');
+  readonly hideDelay = input(1000);
+}

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

@@ -0,0 +1,8 @@
+/*
+ * Public API Surface of select
+ */
+
+export * from './select';
+export * from './option';
+export * from './select-input';
+export * from './list-selection';

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

@@ -0,0 +1,15 @@
+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() {
+    super(true);
+  }
+}

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

@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { NgbOption, NgbOptionGroup } from '@ngbase/adk/select';
+import { Checkbox } from '<%= basepath %>/checkbox';
+import { ListStyle } from '<%= basepath %>/list';
+
+@Component({
+  selector: '<%= name %>-option, [<%= name %>Option]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [ListStyle, { directive: NgbOption, inputs: ['value', 'disabled', 'ayId'] }],
+  imports: [Checkbox],
+  template: ` @if (option.multiple()) {
+      <<%= name %>-checkbox [checked]="option.checked()" class="!py-0" />
+    }
+    <ng-content />`,
+  host: {
+    class: 'outline-none',
+    '[class.bg-muted]': 'option.active() || option.checked()',
+  },
+})
+export class Option<T> {
+  readonly option = inject(NgbOption<T>);
+}
+
+@Component({
+  selector: '<%= name %>-option-group, [<%= name %>OptionGroup]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<div class="text-muted-foreground bg-popover sticky -top-1 z-10 px-2 py-1.5 text-sm">
+      {{ label() }}
+    </div>
+    <ng-content />`,
+  host: {
+    class: 'block',
+  },
+})
+export class OptionGroup extends NgbOptionGroup {}

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

@@ -0,0 +1,21 @@
+import { Directive } from '@angular/core';
+import { NgbSelectInput, NgbSelectTrigger } from '@ngbase/adk/select';
+import { InputStyle } from '<%= basepath %>/form-field';
+
+@Directive({
+  selector: '[<%= name %>SelectInput]',
+  hostDirectives: [
+    { directive: NgbSelectInput, inputs: ['placeholder', 'options', 'filterFn'] },
+    InputStyle,
+  ],
+  host: {
+    class: 'w-full !m-0 mb-1 !ring-0 !border-0 !border-b rounded-none px-3 z-10',
+  },
+})
+export class SelectInput<T> {}
+
+@Directive({
+  selector: '[<%= name %>SelectTrigger]',
+  hostDirectives: [NgbSelectTrigger],
+})
+export class SelectTrigger {}

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

@@ -0,0 +1,96 @@
+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,
+  SelectValue,
+} from '@ngbase/adk/select';
+import { Option } from './option';
+import { SelectInput } from './select-input';
+
+@Directive({
+  selector: '[<%= name %>SelectOption]',
+  hostDirectives: [NgbSelectOption],
+})
+export class SelectOption<T> {}
+
+@Component({
+  selector: '<%= name %>-select',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [provideIcons({ lucideChevronsUpDown })],
+  providers: [aliasSelect(Select)],
+  imports: [
+    Icon,
+    FormsModule,
+    SelectInput,
+    Option,
+    NgTemplateOutlet,
+    SelectValue,
+    NgbSelectOptionGroup,
+  ],
+  template: `
+    <button
+      ngbSelectValue
+      [class.opacity-50]="disabled()"
+      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="flex-1 truncate" [class.text-muted-foreground]="!cValue()">
+        <ng-content select="[<%= name %>SelectTrigger]">
+          {{ cValue() || placeholder() }}
+        </ng-content>
+      </span>
+      <<%= name %>-icon name="lucideChevronsUpDown" class="ml-0.5 text-muted-foreground" />
+    </button>
+
+    <!-- Options template -->
+    <ng-template #optionsTemplate>
+      <div class="flex flex-col overflow-hidden">
+        <ng-content select="[<%= name %>SelectInput]">
+          @if (options().length) {
+            <input
+              <%= name %>SelectInput
+              placeholder="Search options"
+              [(ngModel)]="optionsFilter.search"
+              [ngModelOptions]="{ standalone: true }"
+            />
+          }
+        </ng-content>
+        <div #optionsGroup ngbSelectOptionGroup class="overflow-auto p-1">
+          <div class="h-full" role="listbox" aria-label="Suggestions">
+            <ng-content>
+              @for (option of optionsFilter.filteredList(); track option; let i = $index) {
+                <<%= name %>-option [value]="option" [ayId]="ayId">
+                  @if (optionTemplate(); as ot) {
+                    <ng-template
+                      [ngTemplateOutlet]="ot.template"
+                      [ngTemplateOutletContext]="{ $implicit: option, index: i }"
+                    />
+                  } @else {
+                    {{ option }}
+                  }
+                </<%= name %>-option>
+              }
+            </ng-content>
+          </div>
+        </div>
+        <ng-content select=".select-footer" />
+      </div>
+    </ng-template>
+  `,
+  host: {
+    class: 'flex cursor-pointer font-medium outline-none w-full',
+    '[class.pointer-events-none]': 'disabled()',
+  },
+})
+export class Select<T> extends NgbSelect<T> {
+  override sideOffset = 16;
+}

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

@@ -0,0 +1 @@
+export * from './selectable';

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

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { NgbSelectable, NgbSelectableItem } from '@ngbase/adk/selectable';
+
+@Component({
+  selector: '<%= name %>-selectable-item, [<%= name %>SelectableItem]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: NgbSelectableItem, inputs: ['value'] }],
+  template: `<ng-content />`,
+  host: {
+    class:
+      'flex-1 flex items-center font-medium justify-center px-3 py-1.5 cursor-pointer transition-colors rounded-md whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+    '[class]': `selectable.selected() ? 'bg-background text-primary shadow-md ring-1 ring-border' : 'opacity-60'`,
+  },
+})
+export class SelectableItem<T> {
+  readonly selectable = inject(NgbSelectableItem);
+}
+
+@Component({
+  selector: '<%= name %>-selectable',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [
+    {
+      directive: NgbSelectable,
+      inputs: ['activeIndex'],
+      outputs: ['activeIndexChange', 'valueChanged'],
+    },
+  ],
+  template: `<ng-content />`,
+  host: {
+    class: 'inline-flex relative bg-muted text-muted-foreground rounded-md p-0.5',
+  },
+})
+export class Selectable<T> {}

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

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of separator
+ */
+
+export * from './separator';

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

@@ -0,0 +1,19 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  selector: '<%= name %>-separator',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: ``,
+  host: {
+    class: 'bg-border block flex-none',
+    '[class]': `vertical() ? 'w-[1px]' : 'h-[1px] w-full'`,
+    // '[class.my-1]': `menu`,
+  },
+})
+export class Separator {
+  vertical = input(false, { transform: booleanAttribute });
+
+  constructor() {
+    // console.log('Separator', this.menu);
+  }
+}

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

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of sheet
+ */
+
+export * from './sheet';

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

@@ -0,0 +1,69 @@
+import { NgStyle } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+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',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasSheet(SheetContainer)],
+  viewProviders: [provideIcons({ lucideX })],
+  imports: [NgStyle, Button, Icon],
+  template: `
+    <div
+      class="pointer-events-none flex h-full"
+      [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()"
+        [ngStyle]="{
+          width: options.width,
+          minWidth: options.minWidth,
+          maxWidth: options.maxWidth,
+        }"
+      >
+        @if (!isHideHeader) {
+          <div class="flex items-center border-b px-4 py-2">
+            <h2 class="flex-1 font-bold">{{ options.title }}</h2>
+            <button <%= name %>Button="ghost" class="-mr-2 !p-2" (click)="close()">
+              <<%= name %>-icon name="lucideX" />
+            </button>
+          </div>
+        }
+        <div class="h-full overflow-auto p-4">
+          <ng-container #myDialog />
+        </div>
+      </div>
+    </div>
+    @if (backdropColor) {
+      <div
+        class="absolute top-0 -z-10 h-full w-full bg-black bg-opacity-30 will-change-transform"
+        [@fadeAnimation]
+        (click)="close()"
+      ></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 function sheetPortal() {
+  return ngbSheetPortal(SheetContainer);
+}
+
+export type Sheet = NgbSheet;

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

@@ -0,0 +1 @@
+export * from './sidenav';

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

@@ -0,0 +1,48 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  NgbSidenav,
+  NgbSidenavHeader,
+  NgbSidenavHeaderContent,
+  NgbSidenavHeaderTrack,
+  NgbSidenavOverlay,
+  SidenavType,
+  aliasSidenav,
+  slideAnimation,
+} from '@ngbase/adk/sidenav';
+
+export type { SidenavType };
+
+@Component({
+  selector: '<%= name %>-sidenav',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [aliasSidenav(Sidenav)],
+  imports: [NgbSidenavOverlay, NgbSidenavHeaderTrack],
+  template: `
+    @if (showOverlay()) {
+      <div ngbSidenavOverlay class="z-p bg-black/70"></div>
+    }
+    <div ngbSidenavHeaderTrack class="transition-[width] duration-500"></div>
+    <ng-content select="<%= name %>-sidenav-header" />
+    <ng-content />
+  `,
+  host: {
+    class: 'flex w-full overflow-hidden relative top-0 left-0 h-full',
+  },
+})
+export class Sidenav extends NgbSidenav {}
+
+@Component({
+  selector: '<%= name %>-sidenav-header',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgbSidenavHeaderContent],
+  template: `
+    <div ngbSidenavHeaderContent class="h-full overflow-auto">
+      <ng-content />
+    </div>
+  `,
+  host: {
+    class: 'block h-full bg-background z-p transition-[width] duration-500',
+  },
+  animations: [slideAnimation('500ms cubic-bezier(0.4, 0, 0.2, 1)')],
+})
+export class SidenavHeader extends NgbSidenavHeader {}

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

@@ -0,0 +1 @@
+export * from './skeleton';

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

@@ -0,0 +1,15 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: '<%= name %>-skeleton',
+  template: ``,
+  host: {
+    class: 'block animate-pulse bg-muted',
+    '[class]': `shape() === 'circle' ? 'rounded-full' : 'rounded-md'`,
+  },
+})
+export class Skeleton {
+  readonly shape = input<'circle' | 'rectangle'>('rectangle');
+  readonly width = input<string>('100%');
+  readonly height = input<string>('20px');
+}

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

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of slider
+ */
+
+export * from './slider';

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

@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+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: [aliasSlider(Slider)],
+  imports: [FocusStyle, SliderTrack, SliderRange, SliderThumb],
+  template: `
+    <div
+      ngbSliderTrack
+      class="h-full overflow-hidden rounded-full bg-muted aria-[disabled=true]:bg-opacity-30"
+    >
+      <div ngbSliderRange class="bg-primary aria-[disabled=true]:bg-muted"></div>
+    </div>
+    @for (thumb of noOfThumbs(); track thumb) {
+      <button
+        ngbSliderThumb
+        <%= name %>FocusStyle
+        class="{{
+          'inline-block h-5 w-5 rounded-full border-2 bg-background shadow-md aria-[disabled=false]:border-primary aria-[disabled=true]:bg-muted ' +
+            (orientation() === 'vertical'
+              ? '-left-1.5 -translate-y-1/2'
+              : '-top-1.5 -translate-x-1/2')
+        }}"
+      ></button>
+    }
+  `,
+  host: {
+    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/index.ts.template

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of sonner
+ */
+
+export { sonnerPortal } from './sonner';

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

@@ -0,0 +1,59 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgbSonner, ngbSonnerPortal, sonnerAnimation, SonnerBase } from '@ngbase/adk/sonner';
+import { Icon } from '<%= basepath %>/icon';
+import { provideIcons } from '@ng-icons/core';
+import {
+  lucideCircleAlert,
+  lucideCircleCheck,
+  lucideInfo,
+  lucideTriangleAlert,
+} from '@ng-icons/lucide';
+
+@Component({
+  selector: '<%= name %>-sonner',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    provideIcons({ lucideCircleCheck, lucideInfo, lucideTriangleAlert, lucideCircleAlert }),
+  ],
+  imports: [Icon, SonnerBase],
+  template: `
+    <ul class="fixed bottom-0 right-0 z-p flex flex-col gap-1">
+      @for (msg of messages(); track msg.id) {
+        <li
+          [ngbSonnerBase]="$index"
+          class="{{
+            'm-4 w-96 rounded-lg border bg-background p-4 shadow-lg transition-all duration-300' +
+              (msg.type === 'success' ? ' bg-green-50 text-green-600' : '') +
+              (msg.type === 'error' ? ' bg-red-50 text-red-600' : '') +
+              (msg.type === 'warning' ? ' bg-yellow-50 text-yellow-600' : '')
+          }}"
+        >
+          <h4 class="flex items-center gap-2 font-semibold">
+            @if (msg.type && icons[msg.type]; as iconName) {
+              <<%= name %>-icon [name]="iconName" />
+            }
+            {{ msg.message }}
+          </h4>
+          @if (msg.data?.description) {
+            <p class="text-muted-foreground">{{ msg.data?.description }}</p>
+          }
+        </li>
+      }
+    </ul>
+  `,
+  animations: [sonnerAnimation],
+})
+export class Sonner extends NgbSonner {
+  readonly icons = {
+    success: 'lucideCircleCheck',
+    error: 'lucideCircleAlert',
+    info: 'lucideInfo',
+    warning: 'lucideTriangleAlert',
+    default: '',
+  };
+}
+
+export function sonnerPortal() {
+  const portal = ngbSonnerPortal(Sonner);
+  return portal;
+}

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

@@ -0,0 +1 @@
+export * from './spinner';