Merge branch 'master' into dmdimitrov/hgrid-adv-filtering-schema

Author: igdmdimitrov

.github/CONTRIBUTING.md

@@ -94,20 +94,31 @@ There are several ways to localize components' string resources:
     1.1. Localize a given instance of component - each component which supports localization has input property `resourceStrings`. Setting a newly instantiated object to this property will localize only that given component's instance.
     1.2. Localize all resources for a component type - each component which supports localization has input property `resourceStrings`. To localize all instances of a given component in the application the following steps should be performed - get the value of the input property `resourceStrings` of the component to be localized; do not create a new instance but replace the existing strings within the object. By default all components of a given type in an application share one instance of the resource strings. Replacing a value in that instance affects all components of that type in the application.
     1.3. Localize all resources for all components - use global method `getCurrentResourceStrings` to get an object containing current resource strings for all components. To provide localized resources just pass an object of type `IResourceStrings` to the global method `changei18n`.
+    1.4 As of 21.1.x the localization has new implementation and you can use the new API `registerI18n` to register resource string for a component or all components for the whole app, as well as which locale it corresponds to. To localize a single component you will need to get is corresponding resource string keys using one of the available resources and provide only those keys.
 
 2. Using npm package:
 We've created new repository which will hold the resource strings for languages different than English:
 https://github.com/IgniteUI/igniteui-angular-i18n 
 
-**NOTE** The localization repo has been moved to live inside the `igniteui-angular` repository under `./projects/igniteui-angular-i18n`  
+**NOTE** The localization repo has been moved to live inside the `igniteui-angular` repository under `./projects/igniteui-angular-i18n`
+**NOTE** As of 21.1.x the localization resource strings have been moved to the [`igniteui-i18n`](https://github.com/IgniteUI/igniteui-i18n) repository under `projects/igniteui-i18n-resources`.
 
 A npm package should be published each time we release new version of Ignite UI for Angular. Its version should correspond to the version of the igniteui-angular npm package.
 One could localize an application by importing the corresponding localized resource strings from the localization package (`igniteui-angular-i18n`) and use the methods described in the previous bullet to localize the whole application or part of it.
-Example:
+
+**Example:**
+
 Inside app.module you can perform:
-_import { IgxResouceStringsJA } from ‘igniteui-angular-i18n’;_
-And then:
-_Changei18n(IgxResouceStringsJA);_
+```ts
+import { IgxResouceStringsJA } from ‘igniteui-angular-i18n’;
+changei18n(IgxResouceStringsJA);
+```
+
+**Example new API:**
+```ts
+import { ResouceStringsJA } from ‘igniteui-i18n-resources’;
+registerI18n(IgxResouceStringsJA, 'ja');
+```
 
 ### Resource strings keys naming convention
 Each key in the `IResourceStrings` (and `IGridResourceStrings`, `ITimePickerResourceStrings`, etc.) is prefixed with components' selector and followed by the resource string key. Having components' selectors as prefixes allows us to have same resource strings keys for more than one component.
@@ -220,3 +231,15 @@ In order to test a pull request that is awaiting test, perform the following act
 4. Verify that the expected behavior is observed with the changes in the pull request.
 5. Return the pull request in a not fixed state if you're still reproducing the issue.
 6. Don't forget to make the necessary status updates, as described in the workflow section.
+
+# Running the Dev Demos
+The developer demos for testing purposes are runnable:
+
+```bash
+npm i
+npm start
+```
+
+If you cannot find a suitable demo for a component, when trying to test and reproduce an issue or scenario, then add a new demo for the scenario.
+
+

.github/ISSUE_TEMPLATE/feature_request.md

@@ -2,6 +2,7 @@
 name: Feature request
 about: Suggest an idea for this project
 title: ''
+type: Feature
 labels: ':toolbox: feature-request,:new: status: new'
 assignees: ''
 projects: IgniteUI/16

.github/copilot-instructions.md

@@ -0,0 +1,123 @@
+# Persona
+
+You are a dedicated Angular developer who thrives on leveraging the absolute latest features of the framework to build cutting-edge applications. You are currently immersed in Angular v20+, passionately adopting signals for reactive state management, embracing standalone components for streamlined architecture, and utilizing the new control flow for more intuitive template logic. Performance is paramount to you, who constantly seeks to optimize change detection and improve user experience through these modern Angular paradigms. When prompted, assume You are familiar with all the newest APIs and best practices, valuing clean, efficient, and maintainable code. Before committing any code to the repository, you check [`CONTRIBUTING.md`](CONTRIBUTING.md) for instructions on how to work with the repository and what the best practices for it are.
+
+## Examples
+
+These are modern examples of how to write an Angular 20 component with signals
+
+```ts
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+
+
+@Component({
+  selector: '{{tag-name}}-root',
+  templateUrl: '{{tag-name}}.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class {{ClassName}} {
+  protected readonly isServerRunning = signal(true);
+  toggleServerStatus() {
+    this.isServerRunning.update(isServerRunning => !isServerRunning);
+  }
+}
+```
+
+```css
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+
+    button {
+        margin-top: 10px;
+    }
+}
+```
+
+```html
+<section class="container">
+    @if (isServerRunning()) {
+        <span>Yes, the server is running</span>
+    } @else {
+        <span>No, the server is not running</span>
+    }
+    <button (click)="toggleServerStatus()">Toggle Server Status</button>
+</section>
+```
+
+When you update a component, be sure to put the logic in the ts file, the styles in the css file and the html template in the html file. When introducing a breaking change, always include a relevant migration schematic to migrate existing applications.
+
+## Resources
+
+Here are some links to the essentials for building Angular applications. Use these to get an understanding of how some of the core functionality works
+https://angular.dev/essentials/components
+https://angular.dev/essentials/signals
+https://angular.dev/essentials/templates
+https://angular.dev/essentials/dependency-injection
+
+## Best practices & Style guide
+
+Here are the best practices and the style guide information.
+
+### Coding Style guide
+
+Here is a link to the most recent Angular style guide https://angular.dev/style-guide
+
+### TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+### Angular Best Practices
+
+- Always use standalone components over `NgModules`
+- Do NOT set `standalone: true` inside the `@Component`, `@Directive` and `@Pipe` decorators
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Use `NgOptimizedImage` for all static images.
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+
+### Components
+
+- New components should have their own entry-point
+- Keep components small and focused on a single responsibility
+- Use `input()` signal instead of decorators, learn more here https://angular.dev/guide/components/inputs
+- Use `output()` function instead of decorators, learn more here https://angular.dev/guide/components/outputs
+- Use `computed()` for derived state learn more about signals here https://angular.dev/guide/signals.
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead, for context: https://angular.dev/guide/templates/binding#css-class-and-style-property-bindings
+- Do NOT use `ngStyle`, use `style` bindings instead, for context: https://angular.dev/guide/templates/binding#css-class-and-style-property-bindings
+
+### State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+### Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+- Use built in pipes and import pipes when being used in a template, learn more https://angular.dev/guide/templates/pipes#
+
+### Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection
+
+## Copilot Skills
+
+Domain-specific skills for AI-assisted development are located in the [`skills/`](../skills/) directory. Each sub-folder contains a `SKILL.md` file that teaches agents how to work with a particular area of the library:
+
+- [`skills/igniteui-angular-components`](../skills/igniteui-angular-components/SKILL.md) — UI Components (form controls, layout, data display, feedback/overlays, directives — Input Group, Combo, Select, Date/Time Pickers, Calendar, Tabs, Stepper, Accordion, List, Card, Dialog, Snackbar, Button, Ripple, Tooltip, Drag and Drop, Layout Manager, Dock Manager) and Charts (Area Chart, Bar Chart, Column Chart, Stock/Financial Chart, Pie Chart)
+- [`skills/igniteui-angular-grids`](../skills/igniteui-angular-grids/SKILL.md) — Data Grids (grid type selection, column config, sorting, filtering, selection, editing, grouping, paging, remote data, state persistence, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid)
+- [`skills/igniteui-angular-theming`](../skills/igniteui-angular-theming/SKILL.md) — Theming & Styling (includes MCP server setup)

.github/workflows/codeql-analysis.yml

@@ -2,6 +2,8 @@
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
 name: Node.js CI
+permissions:
+  contents: read
 
 on:
   push:
@@ -16,7 +18,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [20.x, 22.17.1]
+        node-version: [22.x]
 
     steps:
       - name: Checkout
@@ -50,7 +52,7 @@ jobs:
             npm run test:schematics
             npm run test:i18n
         env:
-            NODE_OPTIONS: --max_old_space_size=4096
+            NODE_OPTIONS: --max_old_space_size=4096 --no-experimental-strip-types
             TZ: America/New_York
       - name: Build i18n & validate output
         run: |
@@ -71,7 +73,6 @@ jobs:
       - name: Bundle Tree-Shake & SSR Test
         run: npm run build:bundletest
       - name: Publish to coveralls.io
-        if: github.repository == 'IgniteUI/igniteui-angular' && matrix.node-version == '20.x'
-        uses: coverallsapp/github-action@v2.3.4
+        uses: coverallsapp/github-action@v2
         with:
             github-token: ${{ github.token }}

.github/workflows/nodejs.yml

@@ -1,4 +1,7 @@
 name: Npm.js deploy
+permissions:
+  id-token: write
+  contents: read
 
 on:
   release:
@@ -8,12 +11,16 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: 'npm'
           registry-url: 'https://registry.npmjs.org'
+
+      - name: Update NPM
+        run: npm install -g npm@latest
+
       - run: echo "VERSION=${GITHUB_REF/refs\/tags\//}" >> $GITHUB_ENV
       - run: echo ${VERSION}
 
@@ -34,10 +41,11 @@ jobs:
             if [[ ${VERSION} == *"alpha"* || ${VERSION} == *"beta"* || ${VERSION} == *"rc"* ]]; then echo "NPM_TAG=next"; else echo "NPM_TAG=latest"; fi >> $GITHUB_ENV
             echo ${NPM_TAG}
 
-      - name: Copy readme and license for igniteui-angular
+      - name: Copy readme, license & skills for igniteui-angular
         run: |
             cp ../../README.md README.md
             cp ../../LICENSE LICENSE
+            cp -r ../../skills/. skills
         working-directory: dist/igniteui-angular
 
       - name: Copy i18n files
@@ -58,11 +66,7 @@ jobs:
       - name: Publish igniteui-angular
         run: npm publish --tag ${NPM_TAG}
         working-directory: dist/igniteui-angular
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
 
       - name: Publish igniteui-angular-i18n
         run: npm publish --tag ${NPM_TAG}
         working-directory: dist/igniteui-angular-i18n
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.github/workflows/npm-publish.yml

@@ -7,6 +7,11 @@ on:
 jobs:
   stale:
 
+    permissions:
+      contents: read
+      issues: write
+      pull-requests: write
+
     runs-on: ubuntu-latest
 
     steps:

.github/workflows/stale.yml

@@ -0,0 +1,30 @@
+name: Trigger Licensed Release
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  dispatch-to-private-repo:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Get app token
+        id: app-token
+        uses: actions/create-github-app-token@v2
+        with:
+          app-id: ${{ secrets.IGNITEUI_GITHUB_APP_ID }}
+          private-key: ${{ secrets.IGNITEUI_GITHUB_APP_PRIVATE_KEY }}
+          owner: IgniteUI
+
+      - name: Send repository dispatch to private repo
+        uses: peter-evans/repository-dispatch@v3
+        with:
+          token: ${{ steps.app-token.outputs.token }}
+          repository: IgniteUI/igniteui-actions
+          event-type: igniteui-angular-public-release-created
+          client-payload: |
+            {
+              "release_tag": "${{ github.event.release.tag_name }}",
+              "public_repo": "${{ github.repository }}"
+            }