@ngbase/adk 0.1.1 → 0.1.2

package/popover/utils.d.ts

@@ -1,10 +1,24 @@
-import { PopoverOptions, PopoverPosition } from './popover.service';
+export interface PopoverUtilConfig {
+    offset?: number;
+    sideOffset?: number;
+    smoothScroll?: boolean;
+    position?: Position | OverlayPosition;
+    client?: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    } | null;
+    target: HTMLElement;
+    el?: HTMLElement;
+}
 export interface Rect {
     top: number;
     left: number;
     width: number;
     height: number;
 }
+export type OverlayPosition = 'top' | 'bottom' | 'left' | 'right' | 'rs' | 're' | 'ls' | 'le' | 'tl' | 'tr' | 'bl' | 'br';
 export declare enum Position {
     Top = "top",
     Bottom = "bottom",
@@ -13,44 +27,15 @@ export declare enum Position {
     TopLeft = "tl",
     TopRight = "tr",
     BottomLeft = "bl",
-    BottomRight = "br"
-}
-export interface ConfigObj {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-    elWidth: number;
-    elHeight: number;
-    offset: number;
-    priority: PopoverPosition;
-    position: PopoverPosition;
-    windowWidth: number;
-    windowHeight: number;
-    scrollWidth: number;
-}
-export interface OverflowData {
-    top: boolean;
-    bottom: boolean;
-    left: boolean;
-    right: boolean;
-    leftSide: boolean;
-    rightSide: boolean;
-    any: boolean;
-    preferredHorizontal: 'left' | 'right' | undefined;
-    preferredVertical: 'top' | 'bottom' | undefined;
-    overflowAmount: {
-        top: number;
-        bottom: number;
-        left: number;
-        right: number;
-        leftSide: number;
-        rightSide: number;
-    };
+    BottomRight = "br",
+    RightStart = "rs",
+    RightEnd = "re",
+    LeftStart = "ls",
+    LeftEnd = "le"
 }
 export interface PositionResult {
-    top: number;
-    left: number;
+    top?: number;
+    left?: number;
     bottom?: number;
     right?: number;
     position: Position;
@@ -61,25 +46,24 @@ export declare class PopoverPositioner {
     private config;
     private windowDimensions;
     private scrollWidth;
-    private overflow;
-    private elRect;
     private offset;
-    constructor(config: PopoverOptions, windowDimensions: {
+    private sideOffset;
+    private elementRect;
+    constructor(config: PopoverUtilConfig, windowDimensions: {
         width: number;
         height: number;
-    }, scrollWidth: number);
+    }, scrollWidth?: number);
     calculatePosition(): PositionResult;
     private getTargetRect;
     private getElementRect;
-    private getInitialPosition;
-    private getCoordinatesForPosition;
-    private adjustForOverflow;
-    private checkOverflow;
-    getAlternativePosition(position: Position, overflow: OverflowData): Position;
+    private findBestPosition;
+    private getAvailableSpace;
+    private positionOverflows;
+    private getOverflowAmount;
+    private getPositionWithLeastOverflow;
     private finalizePosition;
-    private getOverallOffset;
 }
-export declare function tooltipPosition(config: PopoverOptions, windowDimensions?: {
+export declare function tooltipPosition(config: PopoverUtilConfig, windowDimensions?: {
     width: number;
     height: number;
 }, scrollWidth?: number): PositionResult;

package/portal/dialog-ref.d.ts

@@ -54,7 +54,6 @@ export declare class DialogOptions<T = any> {
     maxHeight?: string;
     classNames?: string[];
     header?: boolean;
-    overrideLowerDialog?: boolean;
     disableClose?: boolean | undefined;
     ayId?: string;
     focusTrap?: boolean | undefined;

package/resizable/resizable-group.d.ts

@@ -14,9 +14,9 @@ export declare class NgbResizableGroup {
     start(): void;
     end(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgbResizableGroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgbResizableGroup, "[ngbResizableGroup]", ["ngbResizableGroup"], { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; }, {}, ["panels"], ["[ngbResizable]"], true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbResizableGroup, "[ngbResizableGroup]", ["ngbResizableGroup"], { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; }, {}, ["panels"], never, true, never>;
 }
-export declare function provideResizableGroup(resizableGroup: typeof NgbResizableGroup): {
+export declare function aliasResizableGroup(resizableGroup: typeof NgbResizableGroup): {
     provide: typeof NgbResizableGroup;
     useExisting: typeof NgbResizableGroup;
 };

package/resizable/resizable.d.ts

@@ -42,9 +42,9 @@ export declare class NgbResizable {
     private updateFlex;
     updateElementSize(str: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgbResizable, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgbResizable, "[ngbResizable]", ["ngbResizable"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbResizable, "[ngbResizable]", ["ngbResizable"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
-export declare function provideResizable(resizable: typeof NgbResizable): {
+export declare function aliasResizable(resizable: typeof NgbResizable): {
     provide: typeof NgbResizable;
     useExisting: typeof NgbResizable;
 };

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

@@ -1,5 +1,6 @@
-import { ChangeDetectionStrategy, Component, Directive, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
 import {
+  aliasAccordion,
   NgbAccordion,
   NgbAccordionContent,
   NgbAccordionGroup,
@@ -20,14 +21,13 @@ export class AccordionGroup {}
 
 @Component({
   selector: '<%= name %>-accordion',
+  exportAs: '<%= name %>Accordion',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [
-    { directive: NgbAccordion, inputs: ['expanded', 'disabled'], outputs: ['expandedChange'] },
-  ],
+  providers: [aliasAccordion(Accordion)],
   imports: [NgbAccordionContent],
   template: `
     <ng-content select="[<%= name %>AccordionHeader]" />
-    @if (accordion.expanded()) {
+    @if (expanded()) {
       <div ngbAccordionContent [@slide] class="overflow-hidden">
         <div class="px-3 pb-4 text-muted">
           <ng-content />
@@ -40,9 +40,7 @@ export class AccordionGroup {}
   },
   animations: [slideAnimation],
 })
-export class Accordion {
-  readonly accordion = inject(NgbAccordion);
-}
+export class Accordion extends NgbAccordion {}
 
 @Directive({
   selector: '[<%= name %>AccordionHeader]',

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

@@ -1,15 +1,11 @@
 import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
-import {
-  NgbAutocomplete,
-  NgbAutocompleteInput,
-  provideAutocomplete,
-} from '@ngbase/adk/autocomplete';
+import { NgbAutocomplete, NgbAutocompleteInput, aliasAutocomplete } from '@ngbase/adk/autocomplete';
 import { NgbSelectOptionGroup } from '@ngbase/adk/select';
 
 @Component({
   selector: '<%= name %>-autocomplete',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideAutocomplete(Autocomplete)],
+  providers: [aliasAutocomplete(Autocomplete)],
   imports: [NgbSelectOptionGroup],
   template: `
     <ul #container class="readonly !flex w-full flex-wrap gap-2" (click)="prevent($event)">

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgbAvatar, NgbAvatarGroup, provideAvatar } from '@ngbase/adk/avatar';
+import { NgbAvatar, NgbAvatarGroup, aliasAvatar } from '@ngbase/adk/avatar';
 
 @Component({
   selector: '<%= name %>-avatar-group',
@@ -15,7 +15,7 @@ export class AvatarGroup {}
 @Component({
   selector: '<%= name %>-avatar, [<%= name %>Avatar]',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideAvatar(Avatar)],
+  providers: [aliasAvatar(Avatar)],
   template: `
     @if (src(); as img) {
       <img [src]="img" alt="avatar" class="h-full max-h-full max-w-full" />

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

@@ -1,15 +1,15 @@
 import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { Icon } from '<%= basepath %>/icon';
+import { provideIcons } from '@ng-icons/core';
+import { lucideChevronRight } from '@ng-icons/lucide';
 import {
+  aliasBreadcrumb,
   NgbBreadcrumb,
   NgbBreadcrumbLink,
   NgbBreadcrumbs,
   NgbBreadcrumbSeparator,
   NgbBreadcrumbSeparatorAria,
-  provideBreadcrumb,
 } from '@ngbase/adk/breadcrumb';
-import { Icon } from '<%= basepath %>/icon';
-import { provideIcons } from '@ng-icons/core';
-import { lucideChevronRight } from '@ng-icons/lucide';
 
 @Component({
   selector: '<%= name %>-breadcrumbs',
@@ -25,7 +25,7 @@ export class Breadcrumbs {}
 @Component({
   selector: '<%= name %>-breadcrumb',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideBreadcrumb(Breadcrumb)],
+  providers: [aliasBreadcrumb(Breadcrumb)],
   viewProviders: [provideIcons({ lucideChevronRight })],
   imports: [Icon, NgbBreadcrumbLink, NgbBreadcrumbSeparatorAria],
   template: `

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

@@ -5,13 +5,13 @@ import {
   NgbCarouselContainer,
   NgbCarouselItem,
   NgbCarouselSubContainer,
-  provideCarousel,
+  aliasCarousel,
 } from '@ngbase/adk/carousel';
 
 @Component({
   selector: '<%= name %>-carousel',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideCarousel(Carousel)],
+  providers: [aliasCarousel(Carousel)],
   imports: [NgbCarouselContainer, NgbCarouselSubContainer],
   template: `
     <div class="touch-none overflow-hidden" ngbCarouselContainer>

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgbChip, NgbChipGroup, NgbChipRemove, provideChip } from '@ngbase/adk/chip';
+import { NgbChip, NgbChipGroup, NgbChipRemove, aliasChip } from '@ngbase/adk/chip';
 import { Button } from '<%= basepath %>/button';
 import { Icon } from '<%= basepath %>/icon';
 import { provideIcons } from '@ng-icons/core';
@@ -15,7 +15,7 @@ export class ChipGroup<T> {}
 @Component({
   selector: '<%= name %>-chip, [<%= name %>Chip]',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideChip(Chip)],
+  providers: [aliasChip(Chip)],
   viewProviders: [provideIcons({ lucideX })],
   imports: [Button, Icon, NgbChipRemove],
   template: `<ng-content />

package/schematics/components/files/datepicker/calendar.ts.template

@@ -1,5 +1,9 @@
 import { NgClass } 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 { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
 import {
   CalendarBtn,
   CalendarDayBtn,
@@ -7,18 +11,14 @@ import {
   CalendarTitle,
   CalendarYearBtn,
   NgbCalendar,
-  provideCalendar,
+  aliasCalendar,
 } from '@ngbase/adk/datepicker';
-import { Button } from '<%= basepath %>/button';
-import { Icon } from '<%= basepath %>/icon';
-import { provideIcons } from '@ng-icons/core';
-import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
 import { TimePicker } from './time';
 
 @Component({
   selector: '<%= name %>-calendar',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideCalendar(Calendar)],
+  providers: [aliasCalendar(Calendar)],
   viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
   imports: [
     NgClass,

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

@@ -1,13 +1,19 @@
 import { NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { DatepickerGroup, NgbDatePicker, provideDatePicker } from '@ngbase/adk/datepicker';
+import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import {
+  DatepickerGroup,
+  NgbDatePicker,
+  NgbDatepickerTrigger,
+  aliasDatePicker,
+  registerDatePicker,
+} from '@ngbase/adk/datepicker';
 import { RangePipe } from '@ngbase/adk/utils';
 import { Calendar } from './calendar';
 
 @Component({
   selector: '<%= name %>-date-picker',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideDatePicker(DatePicker)],
+  providers: [aliasDatePicker(DatePicker)],
   imports: [Calendar, RangePipe, NgTemplateOutlet, DatepickerGroup],
   template: `
     <div class="flex" ngbDatepickerGroup>
@@ -26,3 +32,27 @@ import { Calendar } from './calendar';
   },
 })
 export class DatePicker<D> extends NgbDatePicker<D> {}
+
+@Directive({
+  selector: '[<%= name %>DatepickerTrigger]',
+  providers: [registerDatePicker(DatePicker)],
+  hostDirectives: [
+    {
+      directive: NgbDatepickerTrigger,
+      inputs: [
+        'noOfCalendars',
+        'range',
+        'time',
+        'format',
+        'fieldFormat',
+        'dateFilter',
+        'pickerType',
+        'pickerTemplate',
+      ],
+    },
+  ],
+  host: {
+    class: 'cursor-pointer hover:bg-muted-background outline-none',
+  },
+})
+export class DatepickerTrigger<D> {}

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

@@ -1,3 +1,2 @@
 export * from './datepicker';
-export * from './datepicker-trigger';
 export * from './time';

package/schematics/components/files/datepicker/time.ts.template

@@ -1,11 +1,11 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgbTimeInput, NgbTimePicker, provideTimePicker } from '@ngbase/adk/datepicker';
+import { NgbTimeInput, NgbTimePicker, aliasTimePicker } from '@ngbase/adk/datepicker';
 import { Button } from '<%= basepath %>/button';
 
 @Component({
   selector: '<%= name %>-time',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideTimePicker(TimePicker)],
+  providers: [aliasTimePicker(TimePicker)],
   imports: [Button, NgbTimeInput],
   template: `
     <input
@@ -30,10 +30,18 @@ import { Button } from '<%= basepath %>/button';
     />
     @if (!is24()) {
       <div class="ml-1 flex gap-2">
-        <button [<%= name %>Button]="am() ? 'primary' : 'ghost'" class="small" (click)="changeAm(true)">
+        <button
+          [<%= name %>Button]="am() ? 'primary' : 'ghost'"
+          class="small !px-1 !py-0"
+          (click)="changeAm(true)"
+        >
           AM
         </button>
-        <button [<%= name %>Button]="!am() ? 'primary' : 'ghost'" class="small" (click)="changeAm(false)">
+        <button
+          [<%= name %>Button]="!am() ? 'primary' : 'ghost'"
+          class="small !px-1 !py-0"
+          (click)="changeAm(false)"
+        >
           PM
         </button>
       </div>

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

@@ -1,23 +1,23 @@
 import { ChangeDetectionStrategy, Component, Directive } 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 {
+  aliasDialog,
+  NgbDialog,
   NgbDialogBackdrop,
+  NgbDialogClose,
   NgbDialogContainer,
   NgbDialogMain,
   ngbDialogPortal,
-  provideDialog,
-  NgbDialog,
-  NgbDialogClose,
 } from '@ngbase/adk/dialog';
 import { DragMove } from '@ngbase/adk/drag';
-import { Button } from '<%= basepath %>/button';
-import { Icon } from '<%= basepath %>/icon';
-import { provideIcons } from '@ng-icons/core';
-import { lucideX } from '@ng-icons/lucide';
 
 @Component({
   selector: '<%= name %>-dialog',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideDialog(DialogContainer)],
+  providers: [aliasDialog(DialogContainer)],
   viewProviders: [provideIcons({ lucideX })],
   imports: [Button, Icon, DragMove, NgbDialogMain, NgbDialogBackdrop],
   template: `

package/schematics/components/files/form-field/{input.ts.template → form-field.ts.template}

@@ -25,7 +25,7 @@ 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="mt-1 flex items-center" #target <%= name %>InputStyle>
       <ng-content select="[<%= name %>InputPrefix]" />
       <ng-content />
       <ng-content select="[<%= name %>InputSuffix]" />
@@ -33,7 +33,7 @@ import { NgbSelectTarget } from '@ngbase/adk/select';
     <ng-content select="[<%= name %>Error]" />
   `,
   host: {
-    class: 'inline-flex flex-col font-medium mb-2 gap-1',
+    class: 'inline-flex flex-col font-medium gap-1',
   },
 })
 export class FormField {
@@ -77,9 +77,20 @@ export class Description {}
 
 @Directive({
   selector: '[<%= name %>InputPrefix]',
+  host: {
+    class: 'mr-2.5',
+  },
 })
 export class InputPrefix {}
 
+@Directive({
+  selector: '[<%= name %>InputSuffix]',
+  host: {
+    class: 'ml-2.5',
+  },
+})
+export class InputSuffix {}
+
 @Component({
   selector: '[<%= name %>Error]',
   hostDirectives: [{ directive: NgbInputError, inputs: ['ngbError: <%= name %>Error'] }],

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

@@ -2,6 +2,5 @@
  * Public API Surface of input
  */
 
-export * from './input';
-export * from './otp';
+export * from './form-field';
 export * from './input-style.directive';

package/schematics/components/files/form-field/input-style.directive.ts.template

@@ -5,7 +5,7 @@ import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
   selector: '[<%= name %>InputStyle]',
   hostDirectives: [{ directive: FocusStyle, inputs: ['unfocus'] }],
   host: {
-    class: 'inline-block rounded-lg bg-foreground px-3 py-2 border font-normal min-h-10',
+    class: 'inline-block rounded-lg bg-foreground px-2.5 py-2 border font-normal min-h-10',
   },
 })
 export class InputStyle {}

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

@@ -1,13 +1,13 @@
 import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
 import { AccessibleGroup } from '@ngbase/adk/a11y';
-import { NgbMenu, NgbMenuTrigger, MenuGroup, provideMenu } from '@ngbase/adk/menu';
+import { NgbMenu, NgbMenuTrigger, NgpMenuGroup, aliasMenu } from '@ngbase/adk/menu';
 
 @Component({
   selector: '<%= name %>-menu',
   exportAs: '<%= name %>Menu',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideMenu(Menu)],
-  imports: [AccessibleGroup, MenuGroup],
+  providers: [aliasMenu(Menu)],
+  imports: [AccessibleGroup, NgpMenuGroup],
   template: `
     <ng-template #container>
       <div ngbMenuGroup class="flex flex-col p-1">

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

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

package/schematics/components/files/{form-field → otp}/otp.ts.template

@@ -1,13 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { injectDirectionality } from '@ngbase/adk/bidi';
-import { NgbInputOtp, NgbOtpInput, NgbOtpValue, provideInputOtp } from '@ngbase/adk/form-field';
+import { NgbInputOtp, NgbOtpInput, NgbOtpValue, aliasInputOtp } from '@ngbase/adk/otp';
 import { NumberOnly, RangePipe } from '@ngbase/adk/utils';
-import { InputStyle } from './input-style.directive';
+import { InputStyle } from '<%= basepath %>/form-field';
 
 @Component({
   selector: '<%= name %>-input-otp',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [provideInputOtp(InputOtp)],
+  providers: [aliasInputOtp(InputOtp)],
   imports: [InputStyle, RangePipe, NgbOtpInput, NgbOtpValue, NumberOnly],
   template: `
     @for (num of size(); track $index; let l = $last) {

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

@@ -1,5 +1,5 @@
 import { Component, input } from '@angular/core';
-import { NgbPagination, NgbPaginationBtn } from '@ngbase/adk/pagination';
+import { aliasPagination, NgbPagination, NgbPaginationBtn } from '@ngbase/adk/pagination';
 import { Button } from '<%= basepath %>/button';
 import { Icon } from '<%= basepath %>/icon';
 import { Option, Select } from '<%= basepath %>/select';
@@ -13,7 +13,7 @@ import {
 
 @Component({
   selector: '<%= name %>-pagination',
-  providers: [{ provide: NgbPagination, useExisting: Pagination }],
+  providers: [aliasPagination(Pagination)],
   viewProviders: [
     provideIcons({
       lucideChevronLeft,

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

@@ -1,50 +1,27 @@
 import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
 import {
+  aliasPopover,
   NgbPopover,
+  NgbPopoverArrow,
   NgbPopoverBackdrop,
   NgbPopoverClose,
   NgbPopoverMain,
   ngbPopoverPortal,
   NgbPopoverTrigger,
-  providePopover,
   registerNgbPopover,
 } from '@ngbase/adk/popover';
 
 @Component({
   selector: '<%= name %>-popover',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [providePopover(Popover)],
-  imports: [NgbPopoverBackdrop, NgbPopoverMain],
-  template: ` <style>
-      .popover-anchor {
-        --action-angle: 180deg;
-        --action-left: 50%;
-        --action-top: -1rem;
-      }
-      .popover-anchor::before {
-        content: '';
-        position: absolute;
-        width: 0;
-        height: 0;
-        border-style: solid;
-        border-top: 0.8rem solid;
-        @apply border-foreground;
-        border-left: 0.5rem solid transparent;
-        border-right: 0.5rem solid transparent;
-        top: var(--action-top);
-        left: var(--action-left);
-        transform: translateX(-50%) rotate(var(--action-angle, 180deg));
-      }
-    </style>
-    <div
+  providers: [aliasPopover(Popover)],
+  imports: [NgbPopoverBackdrop, NgbPopoverMain, NgbPopoverArrow],
+  template: ` <div
       ngbPopoverMain
       [@slideInOutAnimation]
-      class="{{
-        'menu-container pointer-events-auto fixed z-10 flex flex-col rounded-lg border bg-foreground shadow-md ' +
-          (options().anchor ? 'popover-anchor ' : 'overflow-auto ')
-      }}"
+      class="menu-container pointer-events-auto fixed z-10 flex flex-col rounded-lg border bg-foreground shadow-md"
     >
-      <div class="flex flex-1 flex-col overflow-auto">
+      <div class="flex flex-1 flex-col overflow-auto" ngbPopoverArrow>
         <ng-container #myDialog />
       </div>
     </div>

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

@@ -21,20 +21,15 @@ export class RadioGroup {}
     <button
       <%= name %>FocusStyle
       ngbRadioIndicator
-      #radioIndicator
-      class="custom-radio relative flex h-4 w-4 flex-none items-center justify-center rounded-full border border-primary"
-      [class]="radioIndicator.disabled() ? 'border-muted' : 'border-primary'"
+      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"
     >
-      <div
-        class="h-2 w-2 rounded-full"
-        [class]="radioIndicator.disabled() ? 'bg-muted' : 'bg-primary'"
-      ></div>
+       <div class="h-2 w-2 rounded-full bg-primary group-aria-[disabled='true']:bg-muted"></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',
+      'flex items-center gap-2 py-1 cursor-pointer aria-[disabled="true"]:opacity-40 aria-[disabled="true"]:cursor-not-allowed group',
   },
 })
 export class Radio {}