@ngbase/adk 0.1.11 → 0.1.14

package/radio/index.d.ts

@@ -1,5 +1,45 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@ngbase/adk/radio" />
-export * from './public-api';
+import * as _angular_core from '@angular/core';
+import * as i1 from '@ngbase/adk/a11y';
+import { AccessibleGroup, AccessibleItem } from '@ngbase/adk/a11y';
+import { ControlValueAccessor } from '@angular/forms';
+
+declare class NgbRadioGroup implements ControlValueAccessor {
+    readonly allyGroup: AccessibleGroup;
+    readonly radios: _angular_core.Signal<readonly any[]>;
+    readonly value: _angular_core.ModelSignal<any>;
+    readonly ayId: string;
+    onChange?: (value: any) => {};
+    onTouched?: () => {};
+    constructor();
+    updateValue(value: any): void;
+    writeValue(value: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgbRadioGroup, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgbRadioGroup, "[ngbRadioGroup]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["radios"], never, true, [{ directive: typeof i1.AccessibleGroup; inputs: {}; outputs: {}; }]>;
+}
+
+declare class NgbRadioIndicator {
+    readonly radio: NgbRadio;
+    readonly allyItem: AccessibleItem<any>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgbRadioIndicator, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgbRadioIndicator, "[ngbRadioIndicator]", ["ngbRadioIndicator"], {}, {}, never, ["*"], true, [{ directive: typeof i1.AccessibleItem; inputs: {}; outputs: {}; }]>;
+}
+declare class NgbRadio {
+    readonly radio: NgbRadioGroup;
+    readonly value: _angular_core.InputSignal<any>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly checked: _angular_core.Signal<boolean>;
+    readonly ayId: string;
+    updateValue(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgbRadio, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgbRadio, "[ngbRadio]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare function aliasRadio(radio: typeof NgbRadio): {
+    provide: typeof NgbRadio;
+    useExisting: typeof NgbRadio;
+};
+
+export { NgbRadio, NgbRadioGroup, NgbRadioIndicator, aliasRadio };

package/resizable/index.d.ts

@@ -1,5 +1,73 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@ngbase/adk/resizable" />
-export * from './public-api';
+import * as _angular_core from '@angular/core';
+import { ElementRef, ViewContainerRef, TemplateRef } from '@angular/core';
+import * as i1 from '@ngbase/adk/drag';
+import { Drag, DragData } from '@ngbase/adk/drag';
+
+declare class NgbResizableGroup {
+    readonly document: Document;
+    readonly el: ElementRef<HTMLElement>;
+    readonly panels: _angular_core.Signal<readonly any[]>;
+    readonly direction: _angular_core.InputSignal<"horizontal" | "vertical">;
+    readonly id: string;
+    private overlayDiv?;
+    constructor();
+    get w(): number;
+    get h(): number;
+    setAuto(): void;
+    start(): void;
+    end(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgbResizableGroup, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgbResizableGroup, "[ngbResizableGroup]", ["ngbResizableGroup"], { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; }, {}, ["panels"], never, true, never>;
+}
+declare function aliasResizableGroup(resizableGroup: typeof NgbResizableGroup): {
+    provide: typeof NgbResizableGroup;
+    useExisting: typeof NgbResizableGroup;
+};
+
+declare class NgbGutter {
+    readonly resizable: NgbResizable;
+    readonly drag: Drag;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgbGutter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgbGutter, "[ngbGutter]", ["ngbGutter"], {}, {}, never, never, true, [{ directive: typeof i1.Drag; inputs: {}; outputs: {}; }]>;
+}
+declare class NgbResizable {
+    readonly el: ElementRef<HTMLElement>;
+    readonly resizable: NgbResizableGroup;
+    readonly containerRef: ViewContainerRef;
+    readonly dragElement: _angular_core.Signal<TemplateRef<any> | undefined>;
+    readonly drag: _angular_core.Signal<Drag | undefined>;
+    readonly id: string;
+    readonly lockAxis: _angular_core.Signal<"x" | "y">;
+    readonly size: _angular_core.InputSignal<string | number>;
+    readonly min: _angular_core.InputSignal<string | number>;
+    readonly max: _angular_core.InputSignal<string | number | undefined>;
+    readonly lSize: _angular_core.WritableSignal<string | number>;
+    readonly draggable: _angular_core.WritableSignal<boolean>;
+    private reducedSize;
+    private localMinSize;
+    private localMaxSize;
+    private lastReducedSize;
+    index: number;
+    str: string;
+    constructor();
+    cSize(): number;
+    onStart(): void;
+    onEnd(): void;
+    private getSize;
+    onDrag(data: DragData): void;
+    handleDrag(event?: DragData): void;
+    private getUpdatedSize;
+    updateSize(px: number, direct: 'both' | 'prev' | 'next'): void;
+    private calculateSize;
+    private updateFlex;
+    updateElementSize(str: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgbResizable, never>;
+    static ɵdir: _angular_core.ɵɵ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>;
+}
+declare function aliasResizable(resizable: typeof NgbResizable): {
+    provide: typeof NgbResizable;
+    useExisting: typeof NgbResizable;
+};
+
+export { NgbGutter, NgbResizable, NgbResizableGroup, aliasResizable, aliasResizableGroup };

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

@@ -11,7 +11,7 @@ import {
 @Component({
   selector: '<%= name %>-accordion-group',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [{ directive: NgbAccordionGroup, inputs: ['multiple'] }],
+  hostDirectives: [{ directive: NgbAccordionGroup, inputs: ['multiple', 'expandAll'] }],
   template: `<ng-content />`,
   host: {
     class: 'block rounded-lg border bg-background',
@@ -29,7 +29,7 @@ export class AccordionGroup {}
     <ng-content select="[<%= name %>AccordionHeader]" />
     @if (expanded()) {
       <div ngbAccordionContent [@slide] class="overflow-hidden">
-        <div class="text-muted-foreground px-3 pb-4">
+        <div class="px-3 pb-4">
           <ng-content />
         </div>
       </div>

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

@@ -9,7 +9,7 @@ export interface AlertOptions {
   actions?: {
     text: string;
     type?: ButtonVariant;
-    handler: (fn: VoidFunction) => any;
+    handler: (fn: (v?: any) => any) => any;
   }[];
 }
 
@@ -45,7 +45,7 @@ export function alertPortal() {
   imports: [Button],
   template: `
     <h4 class="mb-2 text-base font-bold">{{ data?.title }}</h4>
-    <p class="pb-3 text-muted-foreground">{{ data?.description }}</p>
+    <p class="text-muted-foreground pb-3">{{ data?.description }}</p>
     <div class="flex justify-end gap-4 pt-1">
       @for (action of data?.actions; track action) {
         <button [<%= name %>Button]="action.type || 'primary'" (click)="action.handler(diaRef.close)">

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

@@ -4,6 +4,7 @@ import { NgbSelectOptionGroup } from '@ngbase/adk/select';
 
 @Component({
   selector: '<%= name %>-autocomplete',
+  exportAs: '<%= name %>Autocomplete',
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [aliasAutocomplete(Autocomplete)],
   imports: [NgbSelectOptionGroup],

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

@@ -1,6 +1,22 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { NgbAvatar, NgbAvatarGroup, aliasAvatar } from '@ngbase/adk/avatar';
 
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg';
+export type AvatarVariant = 'primary' | 'secondary' | 'default';
+
+const avatarSizesStyles = {
+  xs: 'h-5 w-5 text-[10px] !border',
+  sm: 'h-6 w-6',
+  md: 'h-8 w-8 text-xs',
+  lg: 'h-10 w-10',
+};
+
+const avatarVariantStyles = {
+  primary: ' bg-primary text-white',
+  secondary: ' bg-primary-foreground text-primary',
+  default: ' bg-background text-muted-foreground border-2 border-muted',
+};
+
 @Component({
   selector: '<%= name %>-avatar-group',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -10,7 +26,9 @@ import { NgbAvatar, NgbAvatarGroup, aliasAvatar } from '@ngbase/adk/avatar';
     class: 'flex flex-row',
   },
 })
-export class AvatarGroup {}
+export class AvatarGroup {
+  readonly size = input<AvatarSize>();
+}
 
 @Component({
   selector: '<%= name %>-avatar, [<%= name %>Avatar]',
@@ -25,10 +43,19 @@ export class AvatarGroup {}
   `,
   host: {
     class:
-      'inline-flex aspect-square rounded-full overflow-hidden border-2 border-muted relative bg-background text-muted-foreground items-center justify-center',
-    '[class]': `size() === 'sm' ? 'h-6 w-6' : size() === 'md' ? 'h-8 w-8' : size() === 'lg' ? 'h-10 w-10' : ''`,
+      'inline-flex aspect-square rounded-full overflow-hidden relative items-center justify-center flex-none',
+    '[class]': `classess()`,
   },
 })
 export class Avatar extends NgbAvatar {
-  readonly size = input<'sm' | 'md' | 'lg'>('md');
+  readonly group = inject(AvatarGroup, { optional: true });
+
+  readonly size = input<AvatarSize>();
+  readonly variant = input<AvatarVariant>('default');
+
+  readonly aSize = computed(() => this.size() ?? this.group?.size() ?? 'md');
+
+  readonly classess = computed(() => {
+    return `${avatarSizesStyles[this.aSize()]} ${avatarVariantStyles[this.variant()]}`;
+  });
 }

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

@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
+export type BadgeVariant = 'default' | 'secondary' | 'outline' | 'destructive';
+
 @Component({
   selector: '<%= name %>-badge, [<%= name %>Badge]',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -7,7 +9,7 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
   host: {
     class: 'inline-flex items-center gap-1 rounded-md border px-2.5 py-0.5 text-xs font-semibold',
     '[class]': `variant() === 'default'
-      ? 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent' 
+      ? 'bg-primary text-primary-foreground border-transparent' 
       : variant() === 'secondary' ? 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent' 
       : variant() === 'outline' ? 'text-foreground border-input bg-background hover:bg-accent border-border' 
       : variant() === 'destructive' ? 'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent' 
@@ -15,5 +17,5 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
   },
 })
 export class Badge {
-  readonly variant = input<'default' | 'secondary' | 'outline' | 'destructive'>('default');
+  readonly variant = input<BadgeVariant>('default');
 }

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

@@ -1,7 +1,25 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
 
-export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'icon';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'icon' | 'link';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'icon';
+
+const buttonStyles = {
+  primary: 'bg-primary text-primary-foreground border-primary',
+  secondary: 'bg-secondary text-secondary-foreground border-secondary hover:bg-secondary/80',
+  ghost: 'hover:bg-accent hover:text-accent-foreground border-transparent',
+  icon: 'hover:bg-accent hover:text-accent-foreground border-transparent',
+  outline: 'bg-background hover:bg-accent hover:text-accent-foreground',
+  link: 'hover:text-primary/80 border-transparent',
+};
+
+const buttonSizeStyles = {
+  xs: 'w-4 h-4',
+  md: '',
+  sm: 'py-1 px-2',
+  lg: 'h-9 px-4',
+  icon: 'w-8 h-8',
+};
 
 @Component({
   selector: '[<%= name %>Button]',
@@ -11,21 +29,22 @@ export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'ico
   host: {
     type: 'button',
     class:
-      'inline-flex items-center justify-center rounded-lg py-2 border disabled:opacity-50 disabled:pointer-events-none',
-    '[class]': `variant() === 'primary'
-          ? 'bg-primary text-primary-foreground border-primary'
-          : variant() === 'secondary'
-          ? 'bg-secondary text-secondary-foreground border-secondary hover:bg-secondary/80'
-          : variant() === 'ghost' || variant() === 'icon'
-            ? 'hover:bg-accent hover:text-accent-foreground border-transparent'
-              : 'bg-background hover:bg-accent hover:text-accent-foreground'`,
-    '[class.px-4]': 'variant() !== "icon"',
-    '[class.px-2]': 'variant() === "icon"',
+      'inline-flex items-center justify-center rounded-lg border cursor-pointer disabled:opacity-50 disabled:pointer-events-none gap-2',
+    '[class]': 'styles()',
   },
 })
 export class Button {
-  variant = input('primary', {
+  readonly variant = input('primary', {
     alias: '<%= name %>Button',
     transform: (value: ButtonVariant | '') => value || 'primary',
   });
+
+  readonly size = input<ButtonSize>('lg');
+
+  readonly styles = computed(() => {
+    return [
+      buttonStyles[this.variant()],
+      buttonSizeStyles[this.variant() === 'icon' ? 'icon' : this.size()],
+    ].join(' ');
+  });
 }

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

@@ -1,10 +1,10 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { AccessibleGroup, AccessibleItem, Autofocus } from '@ngbase/adk/a11y';
 import { DialogRef } from '@ngbase/adk/portal';
 import { filterFunction, uniqueId } from '@ngbase/adk/utils';
 import { List } from '<%= basepath %>/list';
+import { MeeInput } from '<%= basepath %>/form-field';
 
 export interface CommandGroup {
   name: string;
@@ -19,15 +19,16 @@ export interface CommandItem {
 @Component({
   selector: '<%= name %>-command',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [FormsModule, List, AccessibleGroup, AccessibleItem, Autofocus, RouterLink],
+  imports: [List, AccessibleGroup, AccessibleItem, Autofocus, RouterLink, MeeInput],
   template: `
     <div ngbAccessibleGroup [ayId]="ayId" [isPopup]="true" class="static w-full">
       <input
         ngbAutofocus
-        [(ngModel)]="filter.search"
+        <%= name %>Input
+        [(value)]="filter.search"
         type="text"
         placeholder="Search for apps and commands"
-        class="sticky -top-4 w-full border-b bg-background p-4 outline-none"
+        class="bg-background sticky -top-4 w-full border-b p-4 outline-none"
       />
       @for (group of filter.filteredList(); track group.name) {
         <h4 class="mx-4 my-2 text-sm text-gray-500">{{ group.name }}</h4>
@@ -70,10 +71,10 @@ export class Command {
 
   readonly ayId = uniqueId();
 
-  readonly filter = filterFunction<CommandGroup, CommandItem>(this.dialogRef.data!, () => ({
-    filter: item => item.name,
-    key: 'items',
-  }));
+  readonly filter = filterFunction<CommandGroup, CommandItem>(
+    this.dialogRef.data!,
+    signal({ filter: item => item.name, key: 'items' }),
+  );
 
   close() {
     this.dialogRef.close();

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

@@ -2,7 +2,7 @@
 
 ```typescript
 import { FormField, Label } from '@/ui/form-field';
-import { DatepickerTrigger } from '@/ui/datepicker';
+import { DatepickerTrigger, DatePicker } from '@/ui/datepicker';
 ```
 
 ## Components
@@ -20,12 +20,22 @@ import { DatepickerTrigger } from '@/ui/datepicker';
   - `pickerType`: 'date' | 'month' | 'year' - The type of picker to display
   - `pickerTemplate`: TemplateRef<any> - A template to display in the picker
 
+### `<%= name %>-date-picker`
+
+- **Inputs:**
+
+  - `dateFilter`: (date: Date) => boolean - A function to filter dates
+  - `pickerType`: 'date' | 'month' | 'year' - The type of picker to display
+  - `noOfCalendar`: number - The number of calendars to display
+  - `range`: boolean - Whether to display a range of dates
+
 ## Usage
 
 ```html
 <<%= name %>-form-field>
   <label <%= name %>Label>Date</label>
-  <<%= name %>-datepicker-trigger
+  <input
+    <%= name %>DatepickerTrigger
     [noOfCalendars]="noOfCalendars"
     [range]="range"
     [time]="time"
@@ -40,4 +50,7 @@ import { DatepickerTrigger } from '@/ui/datepicker';
     <button <%= name %>Button>Yesterday</button>
   </ng-template>
 </<%= name %>-form-field>
+
+<!-- Calendar -->
+<<%= name %>-date-picker />
 ```

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

@@ -51,19 +51,30 @@ export class AddTaskComponent {
   }
 }
 
-const ref = dialog.open(AddTaskComponent, {
-  backdrop: true,
-  hideOverlay: false,
-  data: {},
-});
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+  readonly dialog = dialogPortal();
+
+  open() {
+    const ref = dialog.open(AddTaskComponent, {
+      backdrop: true,
+      hideOverlay: false,
+      data: {},
+    });
 
-ref.afterClosed.subscribe(data => {
-  console.log(data);
-});
+    ref.afterClosed.subscribe(data => {
+      console.log(data);
+    });
 
-dialog.open(dialogContent(), {
-  backdrop: true,
-  hideOverlay: false,
-  data: {},
-});
+    // or with template
+    dialog.open(dialogContent(), {
+      backdrop: true,
+      hideOverlay: false,
+      data: {},
+    });
+  }
+}
 ```

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

@@ -11,8 +11,10 @@ import {
   NgbDialogContainer,
   NgbDialogMain,
   ngbDialogPortal,
+  viewAnimation,
 } from '@ngbase/adk/dialog';
 import { DragMove } from '@ngbase/adk/drag';
+import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
 
 @Component({
   selector: '<%= name %>-dialog',
@@ -53,16 +55,23 @@ import { DragMove } from '@ngbase/adk/drag';
       </div>
       @if (showBackdrop()) {
         <div
-          class="pointer-events-auto absolute top-0 -z-10 h-full w-full bg-black bg-opacity-30"
-          ngbDialogBackdrop
+          class="pointer-events-auto absolute top-0 -z-10 h-full w-full bg-black/30"
           [@fadeAnimation]
+          ngbDialogBackdrop
         ></div>
       }
     </div>
   `,
   host: {
     class: 'fixed block top-0 bottom-0 left-0 right-0 overflow-auto pointer-events-none z-p',
+    '[@parentAnimation]': '',
+    '(@parentAnimation.done)': 'animationDone()',
   },
+  animations: [
+    createHostAnimation(['@viewAnimation', '@fadeAnimation']),
+    fadeAnimation('200ms'),
+    viewAnimation,
+  ],
 })
 export class DialogContainer extends NgbDialogContainer {}
 

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

@@ -32,7 +32,7 @@ import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
     </div>
     @if (backdropColor) {
       <div
-        class="absolute top-0 -z-10 h-full w-full bg-black bg-opacity-30"
+        class="absolute top-0 -z-10 h-full w-full bg-black/30"
         [@fadeAnimation]
         (click)="close()"
       ></div>

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

@@ -5,6 +5,7 @@ import {
   effect,
   ElementRef,
   inject,
+  OnDestroy,
   viewChild,
 } from '@angular/core';
 import {
@@ -101,11 +102,19 @@ export class InputSuffix {}
   },
   animations: [toggleDiv],
 })
-export class InputError {
+export class InputError implements OnDestroy {
   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/form-field/input-style.directive.ts.template

@@ -5,7 +5,7 @@ import { ɵFocusStyles as focusStyles } from '<%= basepath %>/checkbox';
   selector: '[<%= name %>InputStyle]',
   host: {
     '[class]':
-      "'mis inline-block rounded-lg bg-transparent px-2.5 py-2 border font-normal min-h-10 ' + focusStyles.focus + ' ' + focusStyles.within",
+      "'mis inline-flex rounded-lg bg-transparent px-2.5 py-2 border font-normal min-h-10 ' + focusStyles.focus + ' ' + focusStyles.within",
   },
 })
 export class InputStyle {

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

@@ -18,7 +18,6 @@ import { lucideHouse } from '@ng-icons/lucide';
 
 ```typescript
 @Component({
-  standalone: true,
   viewProviders: [provideIcons({ lucideHouse })],
   imports: [Icon],
   template: `<<%= name %>-icon name="lucideHouse" />`,

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

@@ -3,13 +3,13 @@ import {
   NgbInlineEdit,
   NgbInlineInput,
   NgbInlineValue,
-  provideInlineEdit,
+  aliasInlineEdit,
 } from '@ngbase/adk/inline-edit';
 
 @Component({
   selector: '<%= name %>-inline-edit',
+  providers: [aliasInlineEdit(InlineEdit)],
   imports: [NgbInlineInput, NgbInlineValue],
-  providers: [provideInlineEdit(), { provide: NgbInlineEdit, useExisting: InlineEdit }],
   template: `
     @if (isEditing()) {
       <input

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

@@ -16,7 +16,7 @@ import { InputStyle } from '<%= basepath %>/form-field';
           <%= name %>InputStyle
           ngbOtpValue
           class="{{
-            'mb-0 aspect-square w-10 rounded-none !px-0 text-center text-base font-semibold data-[disabled]:bg-muted/40 data-[disabled]:text-muted-foreground data-[focus]:relative' +
+            'mb-0 aspect-square w-10 rounded-none !px-0 justify-center text-base font-semibold data-[disabled]:bg-muted/40 data-[disabled]:text-muted-foreground data-[focus]:relative data-[focus]:ring-2' +
               ((dir.isRtl() ? ll : i === 0) ? ' !rounded-l-lg' : '') +
               ((dir.isRtl() ? i === 0 : ll) ? ' !rounded-r-lg' : '')
           }}"

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

@@ -10,7 +10,7 @@ import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
 import { Subject } from 'rxjs';
 
 @Component({
-  selector: '<%= name %>-dialog',
+  selector: '<%= name %>-picasa',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="pointer-events-none flex h-full items-center justify-center">
@@ -25,7 +25,6 @@ import { Subject } from 'rxjs';
     </div>
   `,
   host: {
-    '[ngStyle]': '{ "z-index": options.overrideLowerDialog ? "982" : "980" }',
     class: 'fixed block top-0 bottom-0 left-0 right-0 overflow-auto pointer-events-none z-p',
     '[@parentAnimation]': '',
   },

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

@@ -18,10 +18,10 @@ import { PicasaBase } from './picasa-base.component';
   },
 })
 export class PicasaContainer {
-  data = inject(DialogRef);
-  imgEl = viewChild<ElementRef<HTMLImageElement>>('imgEl');
-  dialogRef = inject(DialogRef);
-  picasa = inject(PicasaBase);
+  readonly data = inject(DialogRef);
+  readonly imgEl = viewChild<ElementRef<HTMLImageElement>>('imgEl');
+  readonly dialogRef = inject(DialogRef);
+  readonly picasa = inject(PicasaBase);
 
   constructor() {
     let transform = '';