@anglr/select 17.2.0 → 18.0.0-beta.20260805050455

package/.claude/skills/angular-developer/references/define-routes.md

@@ -1,67 +1,67 @@
-# Define Routes
-
-Routes are objects that define which component should render for a specific URL path.
-
-## Basic Configuration
-
-Define routes in a `Routes` array and provide them using `provideRouter` in your `appConfig`.
-
-```ts
-// app.routes.ts
-export const routes: Routes = [
-  {path: '', component: HomePage},
-  {path: 'admin', component: AdminPage},
-];
-
-// app.config.ts
-export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)],
-};
-```
-
-## URL Paths
-
-- **Static**: Matches an exact string (e.g., `'admin'`).
-- **Route Parameters**: Dynamic segments prefixed with a colon (e.g., `'user/:id'`).
-- **Wildcard**: Matches any URL using `**`. Useful for "Not Found" pages. **Always place at the end of the array.**
-
-## Matching Strategy
-
-Angular uses a **first-match wins** strategy. Specific routes must come before less specific ones.
-
-## Redirects
-
-Use `redirectTo` to point one path to another.
-
-```ts
-{ path: 'articles', redirectTo: '/blog' },
-{ path: 'blog', component: Blog },
-```
-
-## Page Titles
-
-Associate titles with routes for accessibility. Titles can be static or dynamic (via `ResolveFn` or a custom `TitleStrategy`).
-
-```ts
-{ path: 'home', component: Home, title: 'Home Page' }
-```
-
-## Route Data and Providers
-
-- **Static Data**: Attach metadata using the `data` property.
-- **Route Providers**: Scope dependencies to a specific route and its children using the `providers` array.
-
-## Nested (Child) Routes
-
-Define sub-views using the `children` property. Parent components must include a `<router-outlet />`.
-
-```ts
-{
-  path: 'product/:id',
-  component: Product,
-  children: [
-    { path: 'info', component: ProductInfo },
-    { path: 'reviews', component: ProductReviews },
-  ],
-}
-```
+# Define Routes
+
+Routes are objects that define which component should render for a specific URL path.
+
+## Basic Configuration
+
+Define routes in a `Routes` array and provide them using `provideRouter` in your `appConfig`.
+
+```ts
+// app.routes.ts
+export const routes: Routes = [
+  {path: '', component: HomePage},
+  {path: 'admin', component: AdminPage},
+];
+
+// app.config.ts
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes)],
+};
+```
+
+## URL Paths
+
+- **Static**: Matches an exact string (e.g., `'admin'`).
+- **Route Parameters**: Dynamic segments prefixed with a colon (e.g., `'user/:id'`).
+- **Wildcard**: Matches any URL using `**`. Useful for "Not Found" pages. **Always place at the end of the array.**
+
+## Matching Strategy
+
+Angular uses a **first-match wins** strategy. Specific routes must come before less specific ones.
+
+## Redirects
+
+Use `redirectTo` to point one path to another.
+
+```ts
+{ path: 'articles', redirectTo: '/blog' },
+{ path: 'blog', component: Blog },
+```
+
+## Page Titles
+
+Associate titles with routes for accessibility. Titles can be static or dynamic (via `ResolveFn` or a custom `TitleStrategy`).
+
+```ts
+{ path: 'home', component: Home, title: 'Home Page' }
+```
+
+## Route Data and Providers
+
+- **Static Data**: Attach metadata using the `data` property.
+- **Route Providers**: Scope dependencies to a specific route and its children using the `providers` array.
+
+## Nested (Child) Routes
+
+Define sub-views using the `children` property. Parent components must include a `<router-outlet />`.
+
+```ts
+{
+  path: 'product/:id',
+  component: Product,
+  children: [
+    { path: 'info', component: ProductInfo },
+    { path: 'reviews', component: ProductReviews },
+  ],
+}
+```

package/.claude/skills/angular-developer/references/defining-providers.md

@@ -1,72 +1,72 @@
-# Defining Dependency Providers
-
-Angular offers automatic and manual ways to provide dependencies to its Dependency Injection (DI) system.
-
-## Automatic Provision
-
-The most common way to provide a service is using `providedIn: 'root'` on an `@Injectable()`.
-
-### InjectionToken
-
-Use `InjectionToken` for non-class dependencies (configuration objects, functions, primitives). An `InjectionToken` can also be automatically provided.
-
-```ts
-import {InjectionToken} from '@angular/core';
-
-export interface AppConfig {
-  apiUrl: string;
-}
-
-export const APP_CONFIG = new InjectionToken<AppConfig>('app.config', {
-  providedIn: 'root',
-  factory: () => ({apiUrl: 'https://api.example.com'}),
-});
-```
-
-## Manual Provision
-
-You use the `providers` array when a service lacks `providedIn`, when you want a new instance for a specific component, or when configuring runtime values.
-
-```ts
-@Component({
-  providers: [
-    // Shorthand for { provide: LocalService, useClass: LocalService }
-    LocalService,
-
-    // useClass: Swap implementations
-    {provide: Logger, useClass: BetterLogger},
-
-    // useValue: Provide static values
-    {provide: API_URL_TOKEN, useValue: 'https://api.example.com'},
-
-    // useFactory: Generate value dynamically
-    {
-      provide: ApiClient,
-      useFactory: (http = inject(HttpClient)) => new ApiClient(http),
-    },
-
-    // useExisting: Create an alias
-    {provide: OldLogger, useExisting: NewLogger},
-
-    // multi: Provide multiple values for the same token as an array
-    {provide: INTERCEPTOR_TOKEN, useClass: AuthInterceptor, multi: true},
-  ],
-})
-export class Example {}
-```
-
-## Scopes of Providers
-
-- **Application Bootstrap**: Global singletons. Use for HTTP clients, logging, or app-wide config.
-- **Component/Directive**: Isolated instances. Use for component-specific state or forms. Services are destroyed when the component is destroyed.
-- **Route**: Feature-specific services loaded only with specific routes.
-
-## Library Pattern: `provide*` functions
-
-Library authors should export functions that return provider arrays to encapsulate configuration:
-
-```ts
-export function provideAnalytics(config: AnalyticsConfig): Provider[] {
-  return [{provide: ANALYTICS_CONFIG, useValue: config}, AnalyticsService];
-}
-```
+# Defining Dependency Providers
+
+Angular offers automatic and manual ways to provide dependencies to its Dependency Injection (DI) system.
+
+## Automatic Provision
+
+The most common way to provide a service is using `providedIn: 'root'` on an `@Injectable()`.
+
+### InjectionToken
+
+Use `InjectionToken` for non-class dependencies (configuration objects, functions, primitives). An `InjectionToken` can also be automatically provided.
+
+```ts
+import {InjectionToken} from '@angular/core';
+
+export interface AppConfig {
+  apiUrl: string;
+}
+
+export const APP_CONFIG = new InjectionToken<AppConfig>('app.config', {
+  providedIn: 'root',
+  factory: () => ({apiUrl: 'https://api.example.com'}),
+});
+```
+
+## Manual Provision
+
+You use the `providers` array when a service lacks `providedIn`, when you want a new instance for a specific component, or when configuring runtime values.
+
+```ts
+@Component({
+  providers: [
+    // Shorthand for { provide: LocalService, useClass: LocalService }
+    LocalService,
+
+    // useClass: Swap implementations
+    {provide: Logger, useClass: BetterLogger},
+
+    // useValue: Provide static values
+    {provide: API_URL_TOKEN, useValue: 'https://api.example.com'},
+
+    // useFactory: Generate value dynamically
+    {
+      provide: ApiClient,
+      useFactory: (http = inject(HttpClient)) => new ApiClient(http),
+    },
+
+    // useExisting: Create an alias
+    {provide: OldLogger, useExisting: NewLogger},
+
+    // multi: Provide multiple values for the same token as an array
+    {provide: INTERCEPTOR_TOKEN, useClass: AuthInterceptor, multi: true},
+  ],
+})
+export class Example {}
+```
+
+## Scopes of Providers
+
+- **Application Bootstrap**: Global singletons. Use for HTTP clients, logging, or app-wide config.
+- **Component/Directive**: Isolated instances. Use for component-specific state or forms. Services are destroyed when the component is destroyed.
+- **Route**: Feature-specific services loaded only with specific routes.
+
+## Library Pattern: `provide*` functions
+
+Library authors should export functions that return provider arrays to encapsulate configuration:
+
+```ts
+export function provideAnalytics(config: AnalyticsConfig): Provider[] {
+  return [{provide: ANALYTICS_CONFIG, useValue: config}, AnalyticsService];
+}
+```

package/.claude/skills/angular-developer/references/di-fundamentals.md

@@ -1,120 +1,120 @@
-# Dependency Injection (DI) Fundamentals
-
-Dependency Injection (DI) is a design pattern used to organize and share code across an application by allowing you to "inject" features into different parts. This improves code maintainability, scalability, and testability.
-
-## How DI Works in Angular
-
-There are two primary ways code interacts with Angular's DI system:
-
-1.  **Providing**: Making values (objects, functions, primitives) available to the DI system.
-2.  **Injecting**: Asking the DI system for those values.
-
-Angular components, directives, and services automatically participate in DI.
-
-## Services
-
-A **service** is the most common way to share data and functionality across an application. It is a TypeScript class decorated with `@Injectable()`.
-
-### Creating a Service
-
-Use the `providedIn: 'root'` option in the `@Injectable` decorator to make the service a singleton available throughout the entire application. This is the recommended approach for most services.
-
-```ts
-import {Injectable} from '@angular/core';
-
-@Injectable({
-  providedIn: 'root', // Makes this a singleton available everywhere
-})
-export class AnalyticsLogger {
-  trackEvent(category: string, value: string) {
-    console.log('Analytics event logged:', {category, value});
-  }
-}
-```
-
-Common uses for services include:
-
-- Data clients (API calls)
-- State management
-- Authentication and authorization
-- Logging and error handling
-- Utility functions
-
-## Injecting Dependencies
-
-Use Angular's `inject()` function to request dependencies.
-
-### The `inject()` Function
-
-You can use the `inject()` function to get an instance of a service (or any other provided token).
-
-```ts
-import {Component, inject} from '@angular/core';
-import {Router} from '@angular/router';
-import {AnalyticsLogger} from './analytics-logger.service';
-
-@Component({
-  selector: 'app-navbar',
-  template: `<a href="#" (click)="navigateToDetail($event)">Detail Page</a>`,
-})
-export class Navbar {
-  // Injecting dependencies using class field initializers
-  private router = inject(Router);
-  private analytics = inject(AnalyticsLogger);
-
-  navigateToDetail(event: Event) {
-    event.preventDefault();
-    this.analytics.trackEvent('navigation', '/details');
-    this.router.navigate(['/details']);
-  }
-}
-```
-
-### Where can `inject()` be used? (Injection Context)
-
-You can call `inject()` in an **injection context**. The most common injection contexts are during the construction of a component, directive, or service.
-
-Valid places to call `inject()`:
-
-1.  **Class field initializers** (Recommended)
-2.  **Constructor body**
-3.  **Route guards and resolvers** (which are executed in an injection context)
-4.  **Factory functions** used in providers
-
-```typescript
-import {Component, Directive, Injectable, inject, ElementRef} from '@angular/core';
-import {HttpClient} from '@angular/common/http';
-
-// 1. In a Component (Field Initializer & Constructor)
-@Component({
-  /*...*/
-})
-export class Example {
-  private service1 = inject(MyService); // ✅ Field initializer
-
-  private service2: MyService;
-  constructor() {
-    this.service2 = inject(MyService); // ✅ Constructor body
-  }
-}
-
-// 2. In a Directive
-@Directive({
-  /*...*/
-})
-export class MyDirective {
-  private element = inject(ElementRef); // ✅ Field initializer
-}
-
-// 3. In a Service
-@Injectable({providedIn: 'root'})
-export class MyService {
-  private http = inject(HttpClient); // ✅ Field initializer
-}
-
-// 4. In a Route Guard (Functional)
-export const authGuard = () => {
-  const auth = inject(AuthService); // ✅ Route Guard
-  return auth.isAuthenticated();
-};
-```
+# Dependency Injection (DI) Fundamentals
+
+Dependency Injection (DI) is a design pattern used to organize and share code across an application by allowing you to "inject" features into different parts. This improves code maintainability, scalability, and testability.
+
+## How DI Works in Angular
+
+There are two primary ways code interacts with Angular's DI system:
+
+1.  **Providing**: Making values (objects, functions, primitives) available to the DI system.
+2.  **Injecting**: Asking the DI system for those values.
+
+Angular components, directives, and services automatically participate in DI.
+
+## Services
+
+A **service** is the most common way to share data and functionality across an application. It is a TypeScript class decorated with `@Injectable()`.
+
+### Creating a Service
+
+Use the `providedIn: 'root'` option in the `@Injectable` decorator to make the service a singleton available throughout the entire application. This is the recommended approach for most services.
+
+```ts
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root', // Makes this a singleton available everywhere
+})
+export class AnalyticsLogger {
+  trackEvent(category: string, value: string) {
+    console.log('Analytics event logged:', {category, value});
+  }
+}
+```
+
+Common uses for services include:
+
+- Data clients (API calls)
+- State management
+- Authentication and authorization
+- Logging and error handling
+- Utility functions
+
+## Injecting Dependencies
+
+Use Angular's `inject()` function to request dependencies.
+
+### The `inject()` Function
+
+You can use the `inject()` function to get an instance of a service (or any other provided token).
+
+```ts
+import {Component, inject} from '@angular/core';
+import {Router} from '@angular/router';
+import {AnalyticsLogger} from './analytics-logger.service';
+
+@Component({
+  selector: 'app-navbar',
+  template: `<a href="#" (click)="navigateToDetail($event)">Detail Page</a>`,
+})
+export class Navbar {
+  // Injecting dependencies using class field initializers
+  private router = inject(Router);
+  private analytics = inject(AnalyticsLogger);
+
+  navigateToDetail(event: Event) {
+    event.preventDefault();
+    this.analytics.trackEvent('navigation', '/details');
+    this.router.navigate(['/details']);
+  }
+}
+```
+
+### Where can `inject()` be used? (Injection Context)
+
+You can call `inject()` in an **injection context**. The most common injection contexts are during the construction of a component, directive, or service.
+
+Valid places to call `inject()`:
+
+1.  **Class field initializers** (Recommended)
+2.  **Constructor body**
+3.  **Route guards and resolvers** (which are executed in an injection context)
+4.  **Factory functions** used in providers
+
+```typescript
+import {Component, Directive, Injectable, inject, ElementRef} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+
+// 1. In a Component (Field Initializer & Constructor)
+@Component({
+  /*...*/
+})
+export class Example {
+  private service1 = inject(MyService); // ✅ Field initializer
+
+  private service2: MyService;
+  constructor() {
+    this.service2 = inject(MyService); // ✅ Constructor body
+  }
+}
+
+// 2. In a Directive
+@Directive({
+  /*...*/
+})
+export class MyDirective {
+  private element = inject(ElementRef); // ✅ Field initializer
+}
+
+// 3. In a Service
+@Injectable({providedIn: 'root'})
+export class MyService {
+  private http = inject(HttpClient); // ✅ Field initializer
+}
+
+// 4. In a Route Guard (Functional)
+export const authGuard = () => {
+  const auth = inject(AuthService); // ✅ Route Guard
+  return auth.isAuthenticated();
+};
+```

package/.claude/skills/angular-developer/references/e2e-testing.md

@@ -1,66 +1,66 @@
-# End-to-End (E2E) Testing
-
-This project uses [Cypress](https://www.cypress.io/) for end-to-end (E2E) testing, which simulates real user interactions in a browser. The E2E tests are located primarily within the `devtools/` package.
-
-## Running E2E Tests
-
-The primary way to run E2E tests is through the `pnpm` script defined in the root `package.json`.
-
-1.  **Build DevTools:** The E2E tests run against a built version of the devtools extension. You must build it first:
-
-    ```shell
-    pnpm -F ng-devtools-mcp build:dev
-    ```
-
-2.  **Run Cypress:** Use the `cy:open` or `cy:run` script:
-    - To open the interactive Cypress Test Runner:
-      ```shell
-      pnpm -F ng-devtools-mcp cy:open
-      ```
-    - To run the tests headlessly in the terminal (ideal for CI):
-      ```shell
-      pnpm -F ng-devtools-mcp cy:run
-      ```
-
-## Test Structure
-
-- **Configuration:** The main Cypress configuration is located at `devtools/cypress.json`.
-- **Specs:** Test files (specs) are located in `devtools/cypress/integration/`.
-- **Custom Commands:** Reusable custom commands and actions are defined in `devtools/cypress/support/`.
-
-### Example E2E Test Snippet
-
-A typical test might look like this:
-
-```typescript
-// in devtools/cypress/integration/profiler.spec.ts
-
-describe('Profiler', () => {
-  beforeEach(() => {
-    cy.visit('/?e2e-app');
-    cy.wait(1000);
-    cy.get('ng-devtools-tabs').find('a').contains('Profiler').click();
-  });
-
-  it('should record and display profiling data', () => {
-    // Find the record button and click it
-    cy.get('button[aria-label="start-recording-button"]').click();
-
-    // Interact with the test application to generate profiling data
-    cy.get('body').find('#cards button').first().click();
-    cy.wait(500);
-
-    // Stop recording
-    cy.get('button[aria-label="stop-recording-button"]').click();
-
-    // Assert that the flame graph is now visible
-    cy.get('ng-devtools-recording-timeline').find('canvas').should('be.visible');
-  });
-});
-```
-
-### Best Practices
-
-- **Use `data-` attributes:** Whenever possible, use `data-cy` or similar attributes for selecting elements to make tests more resilient to CSS or structural changes.
-- **Custom Commands:** Encapsulate common sequences of actions into custom commands in the `support` directory to keep tests clean and readable.
-- **Wait for Application State:** Use `cy.wait()` for arbitrary waits sparingly. Prefer to wait for specific UI elements to appear or for network requests to complete to avoid flaky tests.
+# End-to-End (E2E) Testing
+
+This project uses [Cypress](https://www.cypress.io/) for end-to-end (E2E) testing, which simulates real user interactions in a browser. The E2E tests are located primarily within the `devtools/` package.
+
+## Running E2E Tests
+
+The primary way to run E2E tests is through the `pnpm` script defined in the root `package.json`.
+
+1.  **Build DevTools:** The E2E tests run against a built version of the devtools extension. You must build it first:
+
+    ```shell
+    pnpm -F ng-devtools-mcp build:dev
+    ```
+
+2.  **Run Cypress:** Use the `cy:open` or `cy:run` script:
+    - To open the interactive Cypress Test Runner:
+      ```shell
+      pnpm -F ng-devtools-mcp cy:open
+      ```
+    - To run the tests headlessly in the terminal (ideal for CI):
+      ```shell
+      pnpm -F ng-devtools-mcp cy:run
+      ```
+
+## Test Structure
+
+- **Configuration:** The main Cypress configuration is located at `devtools/cypress.json`.
+- **Specs:** Test files (specs) are located in `devtools/cypress/integration/`.
+- **Custom Commands:** Reusable custom commands and actions are defined in `devtools/cypress/support/`.
+
+### Example E2E Test Snippet
+
+A typical test might look like this:
+
+```typescript
+// in devtools/cypress/integration/profiler.spec.ts
+
+describe('Profiler', () => {
+  beforeEach(() => {
+    cy.visit('/?e2e-app');
+    cy.wait(1000);
+    cy.get('ng-devtools-tabs').find('a').contains('Profiler').click();
+  });
+
+  it('should record and display profiling data', () => {
+    // Find the record button and click it
+    cy.get('button[aria-label="start-recording-button"]').click();
+
+    // Interact with the test application to generate profiling data
+    cy.get('body').find('#cards button').first().click();
+    cy.wait(500);
+
+    // Stop recording
+    cy.get('button[aria-label="stop-recording-button"]').click();
+
+    // Assert that the flame graph is now visible
+    cy.get('ng-devtools-recording-timeline').find('canvas').should('be.visible');
+  });
+});
+```
+
+### Best Practices
+
+- **Use `data-` attributes:** Whenever possible, use `data-cy` or similar attributes for selecting elements to make tests more resilient to CSS or structural changes.
+- **Custom Commands:** Encapsulate common sequences of actions into custom commands in the `support` directory to keep tests clean and readable.
+- **Wait for Application State:** Use `cy.wait()` for arbitrary waits sparingly. Prefer to wait for specific UI elements to appear or for network requests to complete to avoid flaky tests.