@ngbase/adk 0.1.10 → 0.1.12

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/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,8 @@
-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';
+
 @Component({
   selector: '<%= name %>-avatar-group',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -10,7 +12,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]',
@@ -26,9 +30,13 @@ 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' : ''`,
+    '[class]': `aSize() === 'xs' ? 'h-5 w-5 text-[10px] !border' : aSize() === 'sm' ? 'h-6 w-6' : aSize() === 'md' ? 'h-8 w-8' : aSize() === 'lg' ? 'h-10 w-10' : ''`,
   },
 })
 export class Avatar extends NgbAvatar {
-  readonly size = input<'sm' | 'md' | 'lg'>('md');
+  readonly group = inject(AvatarGroup, { optional: true });
+
+  readonly size = input<AvatarSize>();
+
+  readonly aSize = computed(() => this.size() ?? this.group?.size() ?? 'md');
 }

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.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,9 +55,9 @@ 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>
@@ -63,6 +65,11 @@ import { DragMove } from '@ngbase/adk/drag';
   host: {
     class: 'fixed block top-0 bottom-0 left-0 right-0 overflow-auto pointer-events-none z-p',
   },
+  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 = '';

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

@@ -6,7 +6,6 @@ import {
   Directive,
   input,
 } 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';
@@ -29,23 +28,16 @@ export class SelectOption<T> {}
 
 @Component({
   selector: '<%= name %>-select',
+  exportAs: '<%= name %>Select',
   changeDetection: ChangeDetectionStrategy.OnPush,
   viewProviders: [provideIcons({ lucideChevronsUpDown })],
   providers: [aliasSelect(Select)],
-  imports: [
-    Icon,
-    FormsModule,
-    SelectInput,
-    Option,
-    NgTemplateOutlet,
-    SelectValue,
-    NgbSelectOptionGroup,
-  ],
+  imports: [Icon, 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"
+      class="flex min-h-5 w-full items-center gap-1 text-left whitespace-nowrap outline-none"
     >
       <!-- Prefix template -->
       <ng-content select=".select-prefix" />
@@ -56,7 +48,7 @@ export class SelectOption<T> {}
         </ng-content>
       </span>
       @if (!noIcon()) {
-        <<%= name %>-icon name="lucideChevronsUpDown" class="ml-0.5 text-muted-foreground" />
+        <<%= name %>-icon name="lucideChevronsUpDown" class="text-muted-foreground ml-0.5" />
       }
     </button>
 
@@ -65,12 +57,7 @@ export class SelectOption<T> {}
       <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 }"
-            />
+            <input <%= name %>SelectInput placeholder="Search options" [(value)]="optionsFilter.search" />
           }
         </ng-content>
         <div #optionsGroup ngbSelectOptionGroup class="overflow-auto p-1">

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

@@ -44,7 +44,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 will-change-transform"
+        class="absolute top-0 -z-10 h-full w-full bg-black/30"
         [@fadeAnimation]
         (click)="close()"
       ></div>

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

@@ -26,7 +26,6 @@ import { Sidenav, SidenavHeader } from '@/ui/sidenav';
 
 ```typescript
 @Component({
-  standalone: true,
   imports: [Sidenav, SidenavHeader],
   template: ` <<%= name %>-sidenav [show]="show()" [mode]="mode()">
     <<%= name %>-sidenav-header width="100px" minWidth="50px">

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

@@ -1,28 +1,4 @@
 import { Component, input } from '@angular/core';
-import { animate, keyframes, style, transition, trigger } from '@angular/animations';
-
-const spinnerAnimation = trigger('enterLeave', [
-  transition(':enter', [
-    animate(
-      '500ms cubic-bezier(0.68, -0.55, 0.265, 1.55)',
-      keyframes([
-        style({ opacity: 0, transform: 'scale(0)', offset: 0 }),
-        style({ opacity: 1, transform: 'scale(1.5)', offset: 0.7 }),
-        style({ opacity: 1, transform: 'scale(1)', offset: 1 }),
-      ]),
-    ),
-  ]),
-  transition(':leave', [
-    animate(
-      '500ms cubic-bezier(0.68, -0.55, 0.265, 1.55)',
-      keyframes([
-        style({ opacity: 1, transform: 'scale(1)', offset: 0 }),
-        style({ opacity: 1, transform: 'scale(1.5)', offset: 0.3 }),
-        style({ opacity: 0, transform: 'scale(0)', offset: 1 }),
-      ]),
-    ),
-  ]),
-]);
 
 @Component({
   selector: '<%= name %>-spinner',
@@ -64,12 +40,8 @@ const spinnerAnimation = trigger('enterLeave', [
   `,
   host: {
     class: 'inline-flex items-center justify-center transition-all duration-300 text-primary',
-    '[class]': `root() ? 'fixed inset-0 z-p bg-background bg-opacity-60 backdrop-blur-sm' : 'relative'`,
+    '[class]': `root() ? 'fixed inset-0 z-p bg-background/60 backdrop-blur-sm' : 'relative'`,
   },
-  animations: [
-    // animation for entering and exiting, with a bouncy effect
-    spinnerAnimation,
-  ],
 })
 export class Spinner {
   readonly mode = input<'light' | 'dark' | ''>('light');

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

@@ -1,7 +1,7 @@
 # Table
 
 ```typescript
-import { TableComponents } from '@/ui/table';
+import { TableComponents, Sort, SortHeader, EmptyState } from '@/ui/table';
 ```
 
 ### `<%= name %>Table`
@@ -13,6 +13,29 @@ import { TableComponents } from '@/ui/table';
 
 - **Exports** - `<%= name %>Table`
 
+### `<%= name %>EmptyState`
+
+### `<%= name %>Sort`
+
+- **inputs**
+
+  - `mode`: `'selection' | 'toggle'`
+  - `sortFn`: `(data: T[], column: string, direction: 'asc' | 'desc') => T[]`
+  - `disableClear`: `boolean`
+  - `sortMode`: `'client' | 'server'`
+
+- **Outputs**
+
+  - `sortChange`: `(sort: Sort) => void`
+
+### `<%= name %>SortHeader`
+
+- **inputs**
+
+  - `disableClear`: `boolean`
+
+- **Exports** - `<%= name %>SortHeader`
+
 ## Usage
 
 ```html
@@ -25,6 +48,23 @@ import { TableComponents } from '@/ui/table';
     <th <%= name %>Head *<%= name %>HeadDef>Age</th>
     <td <%= name %>Cell *<%= name %>CellDef="let row">{{row.age}}</td>
   </ng-container>
+  <tr <%= name %>EmptyState>
+    No data
+  </tr>
+  <tr <%= name %>HeadRow *<%= name %>HeadRowDef="columns()"></tr>
+  <tr <%= name %>BodyRow *<%= name %>BodyRowDef="let row; columns: columns()"></tr>
+</table>
+
+<!-- Table with sort -->
+<table <%= name %>Table [data]="data" [trackBy]="trackBy" <%= name %>Sort>
+  <ng-container <%= name %>Column="name">
+    <th <%= name %>Head *<%= name %>HeadDef <%= name %>SortHeader>Name</th>
+    <td <%= name %>Cell *<%= name %>CellDef="let row">{{row.name}}</td>
+  </ng-container>
+  <ng-container <%= name %>Column="age">
+    <th <%= name %>Head *<%= name %>HeadDef <%= name %>SortHeader>Age</th>
+    <td <%= name %>Cell *<%= name %>CellDef="let row">{{row.age}}</td>
+  </ng-container>
   <tr <%= name %>HeadRow *<%= name %>HeadRowDef="columns()"></tr>
   <tr <%= name %>BodyRow *<%= name %>BodyRowDef="let row; columns: columns()"></tr>
 </table>