Merge branch '20.0.x' of https://github.com/IgniteUI/igniteui-angular into mkirkova/feat-combo-close-on-blur-15838-master

Author: MonikaKirkova

.github/workflows/nodejs.yml

@@ -42,8 +42,7 @@ jobs:
         run: npm run build:migrations
       - name: Build TypeDoc & SassDoc
         run: |
-            npm run build:typedoc:en:production
-            npm run build:sassdoc:en:production
+            npm run build:docs
       - name: Test
         run: |
             npm run test:lib

.gitignore

@@ -48,7 +48,8 @@ src/**/*.js
 src/**/*.js.map
 src/**/*.css.map
 
-# Typedoc Theme
+# Typedoc and SassDoc Themes
+extras/sassdoc/**/*
 extras/docs/themes/typedoc/bin
 extras/docs/themes/sassdoc/node_modules
 extras/docs/themes/sassdoc/sassdoc/*

CHANGELOG.md

@@ -2,6 +2,45 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 20.0.2
+
+### New Features
+- **Separating Button and Icon Button Themes** - The `button-theme` and `icon-button-theme` functions are still available, but for more targeted customization, you can now use the specific theme function for each button type.
+- **Component Themes Enchancements** - Component themes have been improved to automatically calculate all necessary states (e.g., hover, focus, active) based on just a few key values. For example, customizing a contained button requires only a background color:
+```scss
+    $custom-contained-button: contained-button-theme(
+        $background: #09f;
+    );
+```
+
+## 20.0.0
+
+### General
+- **Angular 20 Compatibility** - Ignite UI for Angular now plays nice with Angular 20! Upgrade your apps and enjoy the latest features.
+- `IgxActionStrip`
+    - **Behavioral Changes** - When using the Action Strip standalone, outside of Grid, scenarios the component is no longer initially visible and the `hidden` property now defaults to `true`.
+- `IgxChip`
+    - **Behavioral Change** The `variant` is now strictly typed with the union of supported options and no longer accepts invalid values for the default state, provide no value (nullish) instead is needed.
+
+### New Features
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`, `IgxPivotGrid`
+  - Added a new `igxGridEmpty` template directive that allows assigning the `emptyGridTemplate` declaratively, without the need to get and assign reference, like other grid templates like:
+    ```html
+    <igx-grid>
+      <ng-template igxGridEmpty>
+        <!-- content to show when the grid is empty -->
+      </ng-template>
+    </igx-grid>
+    ```
+  - Added a new `igxGridLoading` template directive that allows assigning the `loadingGridTemplate` declaratively, without the need to get and assign reference, like other grid templates like:
+    ```html
+    <igx-grid>
+      <ng-template igxGridLoading>
+        <!-- content to show when the grid is loading -->
+      </ng-template>
+    </igx-grid>
+    ```
+
 ## 19.2.0
 
 ### General

angular.json

@@ -15,7 +15,7 @@
       },
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": {
               "base": "dist/igniteui-dev-demos"
@@ -82,7 +82,7 @@
           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "options": {
             "buildTarget": "igniteui-dev-demos:build"
           },
@@ -97,13 +97,13 @@
           }
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "igniteui-dev-demos:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "main": "src/test.ts",
             "polyfills": [
@@ -171,7 +171,7 @@
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "builder": "@angular/build:ng-packagr",
           "options": {
             "tsConfig": "projects/igniteui-angular/tsconfig.lib.json",
             "project": "projects/igniteui-angular/ng-package.json"
@@ -184,15 +184,16 @@
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "polyfills": [
               "zone.js",
               "zone.js/testing",
               "hammerjs"
             ],
             "styles": [
-              "src/styles/styles.scss"
+              "src/styles/styles.scss",
+              "projects/igniteui-angular/test.css"
             ],
             "assets": [
               "projects/igniteui-angular/src/assets"
@@ -265,7 +266,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": {
               "base": "dist/igniteui-angular-elements"
@@ -322,7 +323,7 @@
               ],
               "outputHashing": "none",
               "optimization": true,
-              "externalDependencies": ["lit-html"]
+              "externalDependencies": ["lit"]
             },
             "development": {
               "optimization": false,
@@ -338,7 +339,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "igniteui-angular-elements:build:production,dev-app"
@@ -350,16 +351,18 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "igniteui-angular-elements:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "main": "projects/igniteui-angular-elements/src/test.ts",
-            "polyfills": "projects/igniteui-angular-elements/src/polyfills.ts",
+            "polyfills":  [
+              "projects/igniteui-angular-elements/src/polyfills.ts"
+            ],
             "tsConfig": "projects/igniteui-angular-elements/tsconfig.spec.json",
             "karmaConfig": "projects/igniteui-angular-elements/karma.conf.js",
             "inlineStyleLanguage": "scss",
@@ -390,7 +393,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist/bundle-test",
             "index": "projects/bundle-test/src/index.html",
@@ -401,7 +404,8 @@
             "tsConfig": "projects/bundle-test/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "styles": [
-              "projects/bundle-test/src/styles.scss"
+              "projects/bundle-test/src/styles.scss",
+              "projects/igniteui-angular/test.css"
             ],
             "scripts": [],
             "stylePreprocessorOptions": {
@@ -441,7 +445,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "bundle-test:build:production"
@@ -453,13 +457,13 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "bundle-test:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "polyfills": [
               "zone.js",
@@ -485,6 +489,30 @@
     },
     "@angular-eslint/schematics:library": {
       "setParserOptionsProject": true
+    },
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
     }
   }
 }

gulpfile.js

@@ -1,19 +1,11 @@
 'use strict';
 
-const del = require('del');
 const gulp = require('gulp');
 const process = require('process');
 const fs = require('fs');
-const argv = require('yargs').argv;
-const sassdoc = require('sassdoc');
 const path = require('path');
-const { series } = require('gulp');
-const slash = require('slash');
-
-const DOCS_OUTPUT_PATH = slash(path.join(__dirname, 'dist', 'igniteui-angular', 'docs'));
 
 module.exports.copyGitHooks = async (cb) => {
-
     if (process.env.AZURE_PIPELINES || process.env.TRAVIS || process.env.CI || !fs.existsSync('.git')) {
         return;
     }
@@ -88,93 +80,6 @@ module.exports.copySchematics = (cb) => {
 };
 
 
-function createDocsOutputDirFn(cb) {
-    !fs.existsSync(DOCS_OUTPUT_PATH) && fs.mkdirSync(DOCS_OUTPUT_PATH);
-    cb();
-}
-
-const SASSDOC = {
-    PROJECT_PATHS: [
-        `${path.join(__dirname, 'projects', 'igniteui-angular', 'src', 'lib', 'core', 'styles')}/**/*.scss`,
-        `${path.join(__dirname, 'node_modules', 'igniteui-theming', 'sass')}/**/*.scss`
-    ],
-    DEST: path.join(DOCS_OUTPUT_PATH, 'sass'),
-    OPTIONS: path.join(__dirname, '.sassdocrc'),
-};
-
-const sassdocCleanOutputDir = (cb) => {
-    del.sync(SASSDOC.DEST);
-    cb();
-}
-
-function sassdocBuildJson(cb) {
-    const options = JSON.parse(fs.readFileSync(SASSDOC.OPTIONS, 'utf8'));
-
-    const { convert, exportDir } = argv;
-
-    options.convert = convert;
-    options.exportDir = exportDir;
-
-    gulp.src(SASSDOC.PROJECT_PATHS)
-        .pipe(sassdoc(options));
-
-    cb();
-
-}
-
-function sassdocImportJson(cb) {
-    const options = JSON.parse(fs.readFileSync(SASSDOC.OPTIONS, 'utf8'));
-
-    const { render, importDir } = argv;
-
-    options.render = render;
-    options.json_dir = importDir;
-    options.shellStringsPath = path.join(__dirname, 'extras', 'template', 'strings', 'shell-strings.json');
-
-    gulp.src(SASSDOC.PROJECT_PATHS)
-        .pipe(sassdoc(options));
-
-    cb();
-}
-
-function sassdocBuildJA(cb) {
-    const pathTranslations = path.join(__dirname, 'i18nRepo', 'sassdoc', 'ja');
-    const options = JSON.parse(fs.readFileSync(SASSDOC.OPTIONS, 'utf8'));
-
-    options.lang = 'jp';
-    options.render = argv.render;
-    options.json_dir = pathTranslations;
-    options.shellStringsPath = path.join(__dirname, 'extras', 'template', 'strings', 'shell-strings.json');
-
-    gulp.src(SASSDOC.PROJECT_PATHS)
-        .pipe(sassdoc(options));
-
-    cb();
-}
-
-function sassdocBuildEN(cb) {
-    const options = JSON.parse(fs.readFileSync(SASSDOC.OPTIONS, 'utf8'));
-
-    options.lang = 'en';
-    options.shellStringsPath = path.join(__dirname, 'extras', 'template', 'strings', 'shell-strings.json');
-
-    gulp.src(SASSDOC.PROJECT_PATHS)
-        .pipe(sassdoc(options));
-
-    cb();
-}
-
-module.exports.createDocsOutputDir = createDocsOutputDirFn;
-
-/**
- * Sassdoc build tasks
- */
-module.exports.sassdocCleanOutputDir = sassdocCleanOutputDir;
-module.exports.sassdocImportJson = sassdocImportJson;
-module.exports.sassdocBuildJson = sassdocBuildJson;
-module.exports.sassdocBuildJA = series(sassdocCleanOutputDir, sassdocBuildJA);
-module.exports.sassdocBuildEN = series(sassdocCleanOutputDir, sassdocBuildEN);
-
 module.exports.copyPackageForElements = (cb) => {
     return gulp.src([
         path.join(__dirname, 'projects/igniteui-angular-elements/package.json')