@ng-cn/core 1.0.20 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-cn/core",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "Beautifully designed Angular components built with Tailwind CSS v4 - The official Angular port of shadcn/ui",
   "keywords": [
     "angular",
@@ -15,7 +15,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://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@github.com/Tigayon-Innovations/angular-shadcn.git"
+    "url": "https://github.com/Tigayon-Innovations/angular-shadcn.git"
   },
   "homepage": "https://shadcn-angular.tigayon.com/",
   "bugs": {
@@ -58,17 +58,17 @@
     ]
   },
   "dependencies": {
-    "@angular-devkit/core": "^21.2.5",
-    "@angular-devkit/schematics": "^21.2.5",
-    "@angular/cdk": "^21.2.4",
-    "@angular/common": "^21.2.6",
-    "@angular/compiler": "^21.2.6",
-    "@angular/core": "^21.2.6",
-    "@angular/forms": "^21.2.6",
-    "@angular/platform-browser": "^21.2.6",
-    "@angular/platform-server": "^21.2.6",
-    "@angular/router": "^21.2.6",
-    "@angular/ssr": "^21.2.5",
+    "@angular-devkit/core": "^22.0.1",
+    "@angular-devkit/schematics": "^22.0.1",
+    "@angular/cdk": "^22.0.1",
+    "@angular/common": "^22.0.1",
+    "@angular/compiler": "^22.0.1",
+    "@angular/core": "^22.0.1",
+    "@angular/forms": "^22.0.1",
+    "@angular/platform-browser": "^22.0.1",
+    "@angular/platform-server": "^22.0.1",
+    "@angular/router": "^22.0.1",
+    "@angular/ssr": "^22.0.1",
     "@tailwindcss/postcss": "^4.2.2",
     "apexcharts": "^5.10.4",
     "class-variance-authority": "^0.7.1",
@@ -87,9 +87,9 @@
   "devDependencies": {
     "@analogjs/vite-plugin-angular": "^2.2.0",
     "@analogjs/vitest-angular": "^2.3.1",
-    "@angular/build": "^21.2.5",
-    "@angular/cli": "^21.2.5",
-    "@angular/compiler-cli": "^21.2.6",
+    "@angular/build": "^22.0.1",
+    "@angular/cli": "^22.0.1",
+    "@angular/compiler-cli": "^22.0.1",
     "@modelcontextprotocol/sdk": "^1.28.0",
     "@testing-library/angular": "^19.2.1",
     "@testing-library/dom": "^10.4.1",
@@ -103,7 +103,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.2.0",
-    "typescript": "~5.9.3",
+    "typescript": "~6.0.3",
     "vitest": "^4.1.2"
   }
 }

package/schematics/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "ignoreDeprecations": "6.0",
     "baseUrl": ".",
     "lib": ["es2020"],
     "module": "commonjs",

package/src/app/lib/components/ui/chart/chart-context.ts

@@ -28,11 +28,13 @@ export interface ChartContext {
 
 export const CHART_CONTEXT = new InjectionToken<ChartContext>('ChartContext');
 
-// CSS variable name mapping for chart colors
+// CSS variable name mapping for chart colors.
+// The --chart-* tokens are full oklch() colors, so reference them directly
+// (wrapping in hsl() produced invalid hsl(oklch(...)) and rendered monochrome).
 export const CHART_COLORS = {
-  chart1: 'hsl(var(--chart-1))',
-  chart2: 'hsl(var(--chart-2))',
-  chart3: 'hsl(var(--chart-3))',
-  chart4: 'hsl(var(--chart-4))',
-  chart5: 'hsl(var(--chart-5))',
+  chart1: 'var(--chart-1)',
+  chart2: 'var(--chart-2)',
+  chart3: 'var(--chart-3)',
+  chart4: 'var(--chart-4)',
+  chart5: 'var(--chart-5)',
 } as const;

package/src/app/lib/components/ui/collapsible/collapsible.component.ts

@@ -8,7 +8,6 @@ import {
   forwardRef,
   input,
   model,
-  output,
   signal,
 } from '@angular/core';
 import { COLLAPSIBLE_CONTEXT, CollapsibleContext } from './collapsible-context';
@@ -62,9 +61,6 @@ export class Collapsible implements CollapsibleContext {
     });
   }
 
-  /** Event emitted when open state changes */
-  readonly openChange = output<boolean>();
-
   /** Controlled open state - two-way binding supported */
   readonly open = model<boolean | undefined>(undefined);
 
@@ -96,6 +92,5 @@ export class Collapsible implements CollapsibleContext {
     }
 
     this.open.set(newState);
-    this.openChange.emit(newState);
   };
 }

package/src/app/lib/components/ui/input/input.component.ts

@@ -30,7 +30,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
  * <Input type="email" formControlName="email" placeholder="Enter email" />
  */
 @Component({
-  selector: 'input[Input]',
+  selector: 'input[Input], Input',
   template: '',
   host: {
     '[type]': 'type()',
@@ -98,9 +98,8 @@ export class Input implements ControlValueAccessor, AfterViewInit {
   /** Classes applied to the input element */
   protected readonly inputClass = computed(() =>
     cn(
-      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input w-full min-w-0 rounded-xl border px-4 py-1 text-base text-left shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
-      'bg-zinc-50 dark:bg-zinc-800/50 border-zinc-300 dark:border-zinc-700/50 !text-zinc-900 dark:!text-zinc-50 placeholder:text-zinc-500',
-      'focus-visible:border-primary/30 dark:focus-visible:border-white/30 focus-visible:ring-primary/20 dark:focus-visible:ring-white/20 focus-visible:ring-2',
+      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
       'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
       this.class(),
     ),

package/src/app/lib/components/ui/radio-group/radio-group.component.ts

@@ -8,7 +8,6 @@ import {
   inject,
   input,
   model,
-  output,
   signal,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -121,9 +120,6 @@ export type RadioGroupProps = {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RadioGroup implements ControlValueAccessor {
-  /** Emitted when value changes */
-  readonly valueChange = output<string>();
-
   /** The current selected value */
   readonly value = model<string>('');
 
@@ -169,7 +165,6 @@ export class RadioGroup implements ControlValueAccessor {
         this.context.value.set(value);
         this.onChange(value);
         this.onTouched();
-        this.valueChange.emit(value);
       }
     },
     focusNext: (currentValue: string) => this.focusItem(currentValue, 1),

package/src/app/lib/components/ui/select/select.component.ts

@@ -10,7 +10,6 @@ import {
   inject,
   input,
   model,
-  output,
   signal,
 } from '@angular/core';
 import { SELECT_CONTEXT, type SelectContext } from './select-context';
@@ -168,11 +167,6 @@ export class Select {
     });
   }
 
-  /** Event handler called when the value changes */
-  readonly valueChange = output<string>();
-  /** Event handler called when the open state changes */
-  readonly openChange = output<boolean>();
-
   /** The controlled value of the select */
   readonly value = model<string>('');
   /** The controlled open state of the select */
@@ -211,7 +205,6 @@ export class Select {
     setOpen: (open: boolean) => {
       this._isOpen.set(open);
       this.open.set(open);
-      this.openChange.emit(open);
     },
     disabled: this._isDisabled,
     placeholder: signal(''),
@@ -225,7 +218,6 @@ export class Select {
     setValue: (value: string, label?: string) => {
       this._value.set(value);
       this.value.set(value);
-      this.valueChange.emit(value);
       if (label) {
         this.context.selectedLabel.set(label);
       }

package/src/app/lib/components/ui/sidebar/sidebar-provider.component.ts

@@ -10,7 +10,6 @@ import {
   HostListener,
   input,
   model,
-  output,
   signal,
 } from '@angular/core';
 import {
@@ -71,9 +70,6 @@ export class SidebarProvider {
     });
   }
 
-  /** Open state change event */
-  readonly openChange = output<boolean>();
-
   /** Controlled open state */
   readonly open = model<boolean>(true);
 
@@ -101,7 +97,6 @@ export class SidebarProvider {
       this.context.open.set(value);
       this.context.state.set(value ? 'expanded' : 'collapsed');
       this.open.set(value);
-      this.openChange.emit(value);
     },
     openMobile: signal(false),
     setOpenMobile: (value: boolean) => {

package/src/app/lib/components/ui/slider/slider.component.ts

@@ -168,8 +168,6 @@ export class Slider implements ControlValueAccessor {
   private readonly thumb = viewChild<ElementRef<HTMLElement>>('thumb');
   private readonly elementRef = viewChild<ElementRef<HTMLElement>>('slider');
 
-  /** Emitted when value changes */
-  readonly valueChange = output<number>();
   /** Emitted when value change is committed (on release) */
   readonly valueCommit = output<number>();
 
@@ -373,7 +371,6 @@ export class Slider implements ControlValueAccessor {
     if (newValue !== this.value()) {
       this.value.set(newValue);
       this.onChange(newValue);
-      this.valueChange.emit(newValue);
     }
   }
 
@@ -406,7 +403,6 @@ export class Slider implements ControlValueAccessor {
     if (newValue !== this.value()) {
       this.value.set(newValue);
       this.onChange(newValue);
-      this.valueChange.emit(newValue);
     }
   }
 }

package/src/app/lib/components/ui/switch/switch.component.ts

@@ -7,7 +7,6 @@ import {
   forwardRef,
   input,
   model,
-  output,
   signal,
   viewChild,
 } from '@angular/core';
@@ -144,9 +143,6 @@ export class Switch implements ControlValueAccessor {
 
   private readonly buttonElement = viewChild<ElementRef<HTMLButtonElement>>('buttonElement');
 
-  /** Emitted when checked state changes */
-  readonly checkedChange = output<boolean>();
-
   /** Whether the switch is checked/on */
   readonly checked = model<boolean>(false);
 
@@ -237,7 +233,6 @@ export class Switch implements ControlValueAccessor {
       this.checked.set(newValue);
       this.onChange(newValue);
       this.onTouched();
-      this.checkedChange.emit(newValue);
     }
   }
 

package/src/app/lib/components/ui/textarea/textarea.component.ts

@@ -31,7 +31,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
  * <textarea Textarea formControlName="message" placeholder="Enter message"></textarea>
  */
 @Component({
-  selector: 'textarea[Textarea]',
+  selector: 'textarea[Textarea], Textarea',
   template: '',
   host: {
     '[class]': 'computedClass()',

package/src/app/lib/components/ui/toggle/toggle.component.ts

@@ -6,7 +6,6 @@ import {
   forwardRef,
   input,
   model,
-  output,
   signal,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -120,9 +119,6 @@ export class Toggle implements ControlValueAccessor {
     }
   }
 
-  /** Emitted when pressed state changes */
-  readonly pressedChange = output<boolean>();
-
   /** Whether the toggle is pressed/on */
   readonly pressed = model<boolean>(false);
 
@@ -170,7 +166,6 @@ export class Toggle implements ControlValueAccessor {
       this.pressed.set(newValue);
       this.onChange(newValue);
       this.onTouched();
-      this.pressedChange.emit(newValue);
     }
   }
   // ControlValueAccessor implementation

package/src/app/lib/components/ui/toggle-group/toggle-group.component.ts

@@ -8,7 +8,6 @@ import {
   inject,
   input,
   model,
-  output,
   signal,
 } from '@angular/core';
 import type { ToggleVariants } from '../toggle/toggle-variants';
@@ -138,9 +137,6 @@ export type ToggleGroupProps = {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ToggleGroup {
-  /** Emitted when value changes */
-  readonly valueChange = output<string | string[]>();
-
   /** The current selected value(s) */
   readonly value = model<string | string[]>('');
 
@@ -205,7 +201,6 @@ export class ToggleGroup {
 
       this.value.set(newValue);
       this.context.value.set(newValue);
-      this.valueChange.emit(newValue);
     },
     isPressed: (itemValue: string) => {
       const currentValue = this.context.value();