@ngbase/adk 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngbase/adk",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "repository": {
     "type": "git",
     "url": "https://github.com/ng-base/ngbase.git"
@@ -40,14 +40,18 @@
       "types": "./accordion/index.d.ts",
       "default": "./fesm2022/ngbase-adk-accordion.mjs"
     },
-    "./avatar": {
-      "types": "./avatar/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-avatar.mjs"
-    },
     "./autocomplete": {
       "types": "./autocomplete/index.d.ts",
       "default": "./fesm2022/ngbase-adk-autocomplete.mjs"
     },
+    "./bidi": {
+      "types": "./bidi/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-bidi.mjs"
+    },
+    "./avatar": {
+      "types": "./avatar/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-avatar.mjs"
+    },
     "./breadcrumb": {
       "types": "./breadcrumb/index.d.ts",
       "default": "./fesm2022/ngbase-adk-breadcrumb.mjs"
@@ -56,10 +60,6 @@
       "types": "./cache/index.d.ts",
       "default": "./fesm2022/ngbase-adk-cache.mjs"
     },
-    "./bidi": {
-      "types": "./bidi/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-bidi.mjs"
-    },
     "./carousel": {
       "types": "./carousel/index.d.ts",
       "default": "./fesm2022/ngbase-adk-carousel.mjs"
@@ -224,10 +224,6 @@
       "types": "./toggle/index.d.ts",
       "default": "./fesm2022/ngbase-adk-toggle.mjs"
     },
-    "./toggle-group": {
-      "types": "./toggle-group/index.d.ts",
-      "default": "./fesm2022/ngbase-adk-toggle-group.mjs"
-    },
     "./tooltip": {
       "types": "./tooltip/index.d.ts",
       "default": "./fesm2022/ngbase-adk-tooltip.mjs"
@@ -251,6 +247,10 @@
     "./virtualizer": {
       "types": "./virtualizer/index.d.ts",
       "default": "./fesm2022/ngbase-adk-virtualizer.mjs"
+    },
+    "./toggle-group": {
+      "types": "./toggle-group/index.d.ts",
+      "default": "./fesm2022/ngbase-adk-toggle-group.mjs"
     }
   }
 }

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

@@ -35,3 +35,5 @@ import { Avatar, AvatarGroup } from '@/ui/avatar';
   <button <%= name %>Avatar src="https://x.me/1.jpg" size="lg" />
 </<%= name %>-avatar-group>
 ```
+
+Note: Use `<%= name %>-avatar-group` to wrap the `<%= name %>-avatar` and `button`. Always use `<%= name %>-avatar` for image avatar.

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

@@ -10,12 +10,12 @@ import { Badge } from '@/ui/badge';
 
 - **Inputs:**
 
-  - `variant`: 'info' | 'success' | 'warning' | 'danger' = 'info' - Badge variant
+  - `variant`: 'default' | 'secondary' | 'outline' | 'destructive' = 'default' - Badge variant
 
 - **Export:** `<%= name %>Badge`
 
 ## Usage
 
 ```html
-<<%= name %>-badge>Badge</<%= name %>-badge> <button <%= name %>Badge variant="success">Badge</button>
+<<%= name %>-badge>Badge</<%= name %>-badge> <button <%= name %>Badge variant="secondary">Badge</button>
 ```

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

@@ -5,10 +5,15 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<ng-content />`,
   host: {
-    class: 'flex items-center gap-1 rounded-full px-2 py-1 text-xs font-semibold',
-    '[class]': `variant() === 'success' ? 'bg-green-100 text-green-700' : variant() === 'warning' ? 'bg-yellow-100 text-yellow-700' : variant() === 'danger' ? 'bg-red-100 text-red-700' : 'bg-muted'`,
+    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' 
+      : 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' 
+      : 'bg-muted border-transparent'`,
   },
 })
 export class Badge {
-  readonly variant = input<'info' | 'success' | 'warning' | 'danger'>('info');
+  readonly variant = input<'default' | 'secondary' | 'outline' | 'destructive'>('default');
 }

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

@@ -19,4 +19,9 @@ import { Button } from '@/ui/button';
 
 ```html
 <button <%= name %>Button>Button</button> <button <%= name %>Button variant="ghost">Button</button>
+<button <%= name %>Button="icon">
+  <<%= name %>-icon name="lucideHouse" />
+</button>
 ```
+
+Note: When you use icon as button, then make sure to use icon variant

package/schematics/components/files/checkbox/focus-style.directive.ts.template

@@ -1,12 +1,15 @@
-import { booleanAttribute, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
+
+export const focusStyles = {
+  within: 'focus-within:ring-[2px] focus-within:border-primary',
+  focus:
+    'outline-none focus-visible:ring-[2px] ring-primary/30 ring-offset-background focus-visible:border-primary',
+};
 
 @Directive({
   selector: '[<%= name %>FocusStyle]',
   host: {
-    class: 'outline-none',
-    '[class]': `!unfocus() ? 'focus-visible:ring-2 focus-within:ring-2 focus-within:ring-offset-2 ring-primary focus-visible:ring-offset-2 ring-offset-background data-[focus]:ring-2 data-[focus]:ring-offset-2 data-[focus]:ring-offset-background data-[focus]:ring-primary' : ''`,
+    class: focusStyles.focus,
   },
 })
-export class FocusStyle {
-  unfocus = input(false, { transform: booleanAttribute });
-}
+export class FocusStyle {}

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

@@ -3,4 +3,4 @@
  */
 
 export * from './checkbox';
-export { FocusStyle as ɵFocusStyle } from './focus-style.directive';
+export { FocusStyle as ɵFocusStyle, focusStyles as ɵFocusStyles } from './focus-style.directive';

package/schematics/components/files/form-field/form-field-llm.md.template

@@ -42,15 +42,17 @@ import {
 ```html
 <<%= name %>-form-field>
   <label <%= name %>Label>Label</label>
-  <input <%= name %>Input [(value)]="value" />
   <p <%= name %>Description>Description</p>
-  <p <%= name %>Error="required">Error</p>
-  <p <%= name %>Error="!required && minlength">Error</p>
   <<%= name %>-icon <%= name %>Prefix name="info" />
+  <input <%= name %>Input [(value)]="value" />
   <<%= name %>-icon <%= name %>Suffix name="info" />
+  <p <%= name %>Error="required">Error</p>
+  <p <%= name %>Error="!required && minlength">Error</p>
 </<%= name %>-form-field>
 
 <<%= name %>-form-field>
   <input <%= name %>Input [(ngModel)]="value" />
 </<%= name %>-form-field>
 ```
+
+Note: Use `<%= name %>-form-field` to wrap the `<%= name %>Input`, `<%= name %>-select` or `<%= name %>-autocomplete` and label. Never use any input, select or autocomplete directly.

package/schematics/components/files/form-field/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="mt-1 flex items-center" #target <%= name %>InputStyle>
+    <div class="flex items-center" #target <%= name %>InputStyle>
       <ng-content select="[<%= name %>Prefix]" />
       <ng-content />
       <ng-content select="[<%= name %>Suffix]" />

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

@@ -1,11 +1,10 @@
 import { Directive } from '@angular/core';
-import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
+import { ɵFocusStyles as focusStyles } from '<%= basepath %>/checkbox';
 
 @Directive({
   selector: '[<%= name %>InputStyle]',
-  hostDirectives: [{ directive: FocusStyle, inputs: ['unfocus'] }],
   host: {
-    class: 'inline-block rounded-lg bg-transparent px-2.5 py-2 border font-normal min-h-10',
+    class: `mis inline-block 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

@@ -2,6 +2,8 @@
 
 ```typescript
 import { Icon } from '@/ui/icon';
+import { provideIcons } from '@ng-icons/core';
+import { lucideHouse } from '@ng-icons/lucide';
 ```
 
 ## Components
@@ -14,6 +16,12 @@ import { Icon } from '@/ui/icon';
 
 ## Usage
 
-```html
-<<%= name %>-icon name="info" />
+```typescript
+@Component({
+  standalone: true,
+  viewProviders: [provideIcons({ lucideHouse })],
+  imports: [Icon],
+  template: `<<%= name %>-icon name="lucideHouse" />`,
+})
+export class AppComponent {}
 ```

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

@@ -1,5 +1,6 @@
 import { Directive } from '@angular/core';
 import { NgbList, NgbListActionGroup, provideList } from '@ngbase/adk/list';
+import { FocusStyle } from '../checkbox/focus-style.directive';
 
 @Directive({
   selector: '[<%= name %>ListStyle]',
@@ -12,7 +13,7 @@ export class ListStyle {}
 
 @Directive({
   selector: '[<%= name %>List]',
-  hostDirectives: [ListStyle],
+  hostDirectives: [ListStyle, FocusStyle],
   providers: [provideList(List)],
   host: {
     role: 'list',

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

@@ -10,6 +10,7 @@ import {
   lucideChevronsLeft,
   lucideChevronsRight,
 } from '@ng-icons/lucide';
+import { FormField } from '<%= basepath %>/form-field';
 
 @Component({
   selector: '<%= name %>-pagination',
@@ -22,21 +23,19 @@ import {
       lucideChevronsRight,
     }),
   ],
-  imports: [Button, Icon, Select, Option, NgbPaginationBtn],
+  imports: [Button, Icon, Select, Option, NgbPaginationBtn, FormField],
   template: `
     <div class="flex items-center gap-2">
       <div>Rows per page</div>
-      <<%= name %>-select
-        [value]="size()"
-        (valueChange)="sizeChanged($event)"
-        class="h-8 !w-auto rounded-md border px-2"
-      >
-        @for (size of sizeOptions(); track size) {
-          <<%= name %>-option [value]="size">
-            {{ size }}
-          </<%= name %>-option>
-        }
-      </<%= name %>-select>
+      <<%= name %>-form-field class="!w-auto [&>.mis]:min-h-8 [&>.mis]:py-0">
+        <<%= name %>-select [value]="size()" (valueChange)="sizeChanged($event)">
+          @for (size of sizeOptions(); track size) {
+            <<%= name %>-option [value]="size">
+              {{ size }}
+            </<%= name %>-option>
+          }
+        </<%= name %>-select>
+      </<%= name %>-form-field>
     </div>
     <div>Page {{ active() }} of {{ totalSnaps() }}</div>
     <div class="flex items-center gap-2">

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

@@ -14,7 +14,7 @@ import { ListStyle } from '<%= basepath %>/list';
     <ng-content />`,
   host: {
     class: 'outline-none',
-    '[class.bg-muted]': 'option.active() || option.checked()',
+    '[class.bg-muted]': 'option.active() || (!option.multiple() && option.checked())',
   },
 })
 export class Option<T> {
@@ -24,7 +24,7 @@ export class Option<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">
+  template: `<div class="sticky -top-1 z-10 bg-popover px-2 py-1.5 text-sm text-muted-foreground">
       {{ label() }}
     </div>
     <ng-content />`,

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

@@ -1,15 +1,16 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { NgbSelectable, NgbSelectableItem } from '@ngbase/adk/selectable';
+import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
 
 @Component({
   selector: '<%= name %>-selectable-item, [<%= name %>SelectableItem]',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [{ directive: NgbSelectableItem, inputs: ['value'] }],
+  hostDirectives: [{ directive: NgbSelectableItem, inputs: ['value'] }, FocusStyle],
   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'`,
+      'flex-1 flex items-center font-medium justify-center px-3 py-1.5 cursor-pointer transition-colors rounded-md whitespace-nowrap border',
+    '[class]': `selectable.selected() ? 'bg-background text-primary shadow-md border-border' : 'opacity-60 border-transparent'`,
   },
 })
 export class SelectableItem<T> {

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

@@ -24,14 +24,27 @@ import { Sidenav, SidenavHeader } from '@/ui/sidenav';
 
 ## Usage
 
-```html
-<<%= name %>-sidenav [show]="show()" [mode]="mode()">
-  <<%= name %>-sidenav-header width="100px" minWidth="50px">
-    <div class="p-2">Collapsible content like side menu</div>
-  </<%= name %>-sidenav-header>
-  <div class="p-2">
-    <p>Main content</p>
-    <button (click)="toggle()">Toggle</button>
-  </div>
-</<%= name %>-sidenav>
+```typescript
+@Component({
+  standalone: true,
+  imports: [Sidenav, SidenavHeader],
+  template: ` <<%= name %>-sidenav [show]="show()" [mode]="mode()">
+    <<%= name %>-sidenav-header width="100px" minWidth="50px">
+      <div class="p-2">Collapsible content like side menu</div>
+    </<%= name %>-sidenav-header>
+    <div class="p-2">
+      <button <%= name %>Button="icon" (click)="toggle()">
+        <<%= name %>-icon name="lucideMenu" />
+      </button>
+      <p>Main content</p>
+    </div>
+  </<%= name %>-sidenav>`,
+})
+export class AppComponent {
+  readonly show = signal(false);
+  readonly mode = signal<'side' | 'over'>('side');
+  toggle() {
+    this.show.update(show => !show);
+  }
+}
 ```

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

@@ -36,7 +36,7 @@ import {
             @for (tab of tabs(); track tab.id) {
               <button
                 [ngbTabButton]="tab"
-                class="whitespace-nowrap border-b-2 border-transparent px-4 py-3 font-medium text-muted-foreground aria-[disabled=true]:cursor-not-allowed aria-[selected=true]:!border-primary aria-[disabled=true]:text-muted-foreground aria-[selected=true]:!text-primary aria-[disabled=true]:opacity-50"
+                class="whitespace-nowrap border-b-2 border-transparent font-medium text-muted-foreground aria-[disabled=true]:cursor-not-allowed aria-[selected=true]:!border-primary aria-[disabled=true]:text-muted-foreground aria-[selected=true]:!text-primary aria-[disabled=true]:opacity-50 [&[data-ch='false']]:px-4 [&[data-ch='false']]:py-3 [&[data-ch='true']>*:first-child]:px-4 [&[data-ch='true']>*:first-child]:py-3"
               ></button>
             }
           </div>

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

@@ -12,7 +12,7 @@ import { injectTheme } from './theme.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
   viewProviders: [provideIcons({ lucideMoon, lucideSun })],
   template: `
-    <button <%= name %>Button="icon" class="tour-mode h-9 w-9" (click)="themeService.toggle()">
+    <button <%= name %>Button="icon" class="tour-mode" (click)="themeService.toggle()">
       <<%= name %>-icon [name]="themeService.mode() === 'dark' ? 'lucideSun' : 'lucideMoon'" />
       <span class="sr-only">Toggle theme</span>
     </button>

package/slider/slider.d.ts

@@ -25,6 +25,7 @@ export declare class SliderThumb {
 export declare class NgbSlider implements ControlValueAccessor {
     private readonly el;
     private readonly dir;
+    private cdr;
     private readonly drag;
     private readonly track;
     readonly thumbs: import("@angular/core").Signal<readonly ElementRef<HTMLElement>[]>;
@@ -35,6 +36,7 @@ export declare class NgbSlider implements ControlValueAccessor {
     readonly range: import("@angular/core").InputSignalWithTransform<number, unknown>;
     readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     readonly orientation: import("@angular/core").InputSignal<"horizontal" | "vertical">;
+    readonly afterChange: import("@angular/core").OutputEmitterRef<number | number[]>;
     private onChange?;
     private onTouched?;
     readonly noOfThumbs: import("@angular/core").Signal<number[]>;
@@ -43,7 +45,7 @@ export declare class NgbSlider implements ControlValueAccessor {
     private activeIndex;
     private totalWidth;
     private totalSliderWidth;
-    private cdr;
+    private isChanged;
     constructor();
     private handleValueUpdate;
     private updateElement;
@@ -62,7 +64,7 @@ export declare class NgbSlider implements ControlValueAccessor {
     private updateValue;
     private notifyChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgbSlider, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbSlider, "[ngbSlider]", ["ngbSlider"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbSlider, "[ngbSlider]", ["ngbSlider"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "afterChange": "afterChange"; }, never, never, true, never>;
 }
 export declare const aliasSlider: (slider: typeof NgbSlider) => ({
     provide: import("@angular/core").InjectionToken<readonly import("@angular/forms").ControlValueAccessor[]>;

package/schematics/components/files/theme/theme-button.component.ts.template

@@ -1,26 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { Button } from '<%= basepath %>/button';
-import { Icon } from '<%= basepath %>/icon';
-import { provideIcons } from '@ng-icons/core';
-import { lucideMoon, lucideSun } from '@ng-icons/lucide';
-import { injectTheme } from './theme.service';
-
-@Component({
-  selector: '<%= name %>-theme-button',
-  imports: [Icon, Button],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  viewProviders: [provideIcons({ lucideMoon, lucideSun })],
-  template: `
-    <button <%= name %>Button="icon" class="tour-mode h-9 w-9" (click)="themeService.toggle()">
-      <<%= name %>-icon [name]="themeService.mode() === 'dark' ? 'lucideSun' : 'lucideMoon'" />
-      <span class="sr-only">Toggle theme</span>
-    </button>
-  `,
-})
-export class ThemeButton {
-  readonly themeService = injectTheme();
-
-  constructor() {
-    // shortcutListener('ctrl+d', () => this.themeService.toggle());
-  }
-}