Merge remote-tracking branch 'origin/master' into dmdimitrov/query-builder-improvements

# Conflicts:
#	package-lock.json
#	package.json
#	projects/igniteui-angular/package.json

Author: desig9stein

.vscode/launch.json

@@ -27,20 +27,13 @@
             // "cwd": "<absolute directory of the project, having an old version of igniteui-angular, on which the migrations are applied>",
             "cwd": "C:\\Users\\User\\Desktop\\ng_proj\\test_migrations",
             "args": [
-                "-r",
-
-                // you need to install ts-node for the test project
-                "ts-node/register",
-
                 // "<path/to/ng>", "g",
                 "${env:AppData}/npm/node_modules/@angular/cli/bin/ng", "g",
 
-                // "<../../relative/path/from/cwd/to>/igniteui-angular/projects/igniteui-angular/migrations/migration-collection.json:migration-<number>
-                "../../../../../work/git/igniteui-angular/projects/igniteui-angular/migrations/migration-collection.json:migration-24"
+                // "<../../relative/path/from/cwd/to>/igniteui-angular/dist/igniteui-angular/migrations/migration-collection.json:migration-<number>
+                "../../../../../work/git/igniteui-angular/dist/igniteui-angular/migrations/migration-collection.json:migration-23"
             ],
-            "env": {
-                "TS_NODE_PROJECT": "${workspaceFolder}/projects/igniteui-angular/migrations/tsconfig.json"
-            }
+            "preLaunchTask": "buildMigrations"
         },
         {
             "name": "Run schematics",

.vscode/tasks.json

@@ -0,0 +1,32 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "npm",
+            "script": "build:schematics",
+            "problemMatcher": [],
+            "label": "buildSchematics",
+            "detail": "Build schematics"
+        },
+        {
+            "type": "npm",
+            "script": "build:migrations -- --sourceMap",
+            "dependsOn": [
+                "buildSchematics"
+            ],
+            "problemMatcher": [],
+            "label": "buildMigrationsSourceMap",
+            "detail": "Build migrations with sourceMap for debugging"
+        },
+        {
+            "type": "shell",
+            "command": "node ./scripts/migrations-sourcemap-shift.mjs",
+            "dependsOn": [
+                "buildMigrationsSourceMap"
+            ],
+            "problemMatcher": [],
+            "label": "buildMigrations",
+            "detail": "Build migrations with sourceMap for debugging"
+        },
+    ]
+}

CHANGELOG.md

@@ -48,6 +48,10 @@ For Firefox users, we provide limited scrollbar styling options through the foll
     - **Behavioral Changes** - the `keyboardSupport` input property now defaults to `false`.
     - **Deprecation** - the `keyboardSupport` input property has been deprecated and will be removed in a future version. Keyboard navigation with `ArrowLeft`, `ArrowRight`, `Home`, and `End` keys will be supported when focusing the indicators' container via ` Tab`/`Shift+Tab`. 
 
+- `IgxBadge`
+    - **Breaking Change** The `$border-width` property has been removed from the badge theme.
+    - New outlined variant of the badge component has been added. Users can switch to `outlined` by adding the newly created `outlined` property to a badge.
+
 ## 18.1.0
 ### New Features
 - `IgxPivotGrid`

angular.json

@@ -264,12 +264,13 @@
             "polyfills": [
               "projects/igniteui-angular-elements/src/polyfills.ts"
             ],
-            "tsConfig": "projects/igniteui-angular-elements/tsconfig.app.json",
+            "tsConfig": "projects/igniteui-angular-elements/tsconfig.main.json",
             "inlineStyleLanguage": "scss",
             "assets": [
               "projects/igniteui-angular-elements/src/favicon.ico",
               "projects/igniteui-angular-elements/src/assets",
-              "projects/igniteui-angular-elements/src/index.js"
+              "projects/igniteui-angular-elements/src/index.js",
+              "projects/igniteui-angular-elements/src/index.bundle.js"
             ],
             "styles": [
               "projects/igniteui-angular-elements/src/styles.scss"
@@ -318,6 +319,10 @@
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
+            },
+            "dev-app": {
+                "browser": "projects/igniteui-angular-elements/src/main.app.ts",
+                "tsConfig": "projects/igniteui-angular-elements/tsconfig.app.json"
             }
           },
           "defaultConfiguration": "production"
@@ -326,10 +331,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "buildTarget": "igniteui-angular-elements:build:production"
+              "buildTarget": "igniteui-angular-elements:build:production,dev-app"
             },
             "development": {
-              "buildTarget": "igniteui-angular-elements:build:development"
+              "buildTarget": "igniteui-angular-elements:build:development,dev-app"
             }
           },
           "defaultConfiguration": "development"

projects/igniteui-angular-elements/esbuild.mjs

@@ -3,7 +3,7 @@ import * as esbuild from 'esbuild';
 const ROOT = 'dist/igniteui-angular-elements/browser';
 const config = {
     // logLevel: 'verbose',
-    entryPoints: [`${ROOT}/index.js`],
+    entryPoints: [`${ROOT}/index.bundle.js`],
     bundle: true,
     minify: false, // temporary disabled due to Webpack issues https://github.com/webpack/webpack/issues/16262
     outfile: `${ROOT}/elements.js`,

projects/igniteui-angular-elements/src/analyzer/component.ts

@@ -1,6 +1,6 @@
 import * as ts from 'typescript';
 import type { ComponentMetadata, ContentQuery } from './types';
-import { asString, first, getDecoratorName, getDecorators, getProvidedAs, getTypeExpressionIdentifier, isMethod, isOverride, isProperty, isPublic, isReadOnly } from './utils';
+import { asString, first, getDecoratorName, getDecorators, getProvidedAs, getSelector, getTypeExpressionIdentifier, isMethod, isOverride, isProperty, isPublic, isReadOnly } from './utils';
 
 
 const isInput = (dec: ts.Decorator) => getDecoratorName(dec).includes('Input');
@@ -42,6 +42,7 @@ export class AnalyzerComponent {
     public get metadata(): ComponentMetadata<string> {
         let parents = this.parents;
         let provideAs!: ts.Type;
+        const selector = getSelector(this.node as ts.ClassDeclaration, ['igx-', 'igc-']);
 
         if (parents.length) {
             parents = this.standaloneParents;
@@ -53,6 +54,7 @@ export class AnalyzerComponent {
         }
 
         return {
+            selector,
             parents,
             contentQueries: this.parseQueryProps(),
             methods: this.publicMethods.map(m => ({ name: m.name })),

projects/igniteui-angular-elements/src/analyzer/elements.config.ts

@@ -38,6 +38,7 @@ export const registerComponents = [
 export var registerConfig = [
   {
     component: IgxActionStripComponent,
+    selector: "igc-action-strip",
     parents: [
       IgxGridComponent,
       IgxTreeGridComponent,
@@ -58,6 +59,7 @@ export var registerConfig = [
   },
   {
     component: IgxColumnComponent,
+    selector: "igc-column",
     parents: [
       IgxGridComponent,
       IgxTreeGridComponent,
@@ -113,6 +115,7 @@ export var registerConfig = [
   },
   {
     component: IgxColumnGroupComponent,
+    selector: "igc-column-group",
     parents: [
       IgxGridComponent,
       IgxTreeGridComponent,
@@ -173,6 +176,7 @@ export var registerConfig = [
   },
   {
     component: IgxColumnLayoutComponent,
+    selector: "igc-column-layout",
     parents: [IgxGridComponent],
     contentQueries: [
       {
@@ -227,6 +231,7 @@ export var registerConfig = [
   },
   {
     component: IgxGridComponent,
+    selector: "igc-grid",
     parents: [],
     contentQueries: [
       {
@@ -395,6 +400,7 @@ export var registerConfig = [
   },
   {
     component: IgxGridEditingActionsComponent,
+    selector: "igc-grid-editing-actions",
     parents: [IgxActionStripComponent],
     contentQueries: [],
     additionalProperties: [{ name: "hasChildren" }],
@@ -404,6 +410,7 @@ export var registerConfig = [
   },
   {
     component: IgxGridPinningActionsComponent,
+    selector: "igc-grid-pinning-actions",
     parents: [IgxActionStripComponent],
     contentQueries: [],
     additionalProperties: [],
@@ -413,6 +420,7 @@ export var registerConfig = [
   },
   {
     component: IgxGridStateComponent,
+    selector: "igc-grid-state",
     parents: [
       IgxGridComponent,
       IgxTreeGridComponent,
@@ -430,20 +438,23 @@ export var registerConfig = [
   },
   {
     component: IgxGridToolbarActionsComponent,
+    selector: "igc-grid-toolbar-actions",
     parents: [IgxGridToolbarComponent],
     contentQueries: [],
     additionalProperties: [],
     methods: [],
   },
   {
     component: IgxGridToolbarAdvancedFilteringComponent,
+    selector: "igc-grid-toolbar-advanced-filtering",
     parents: [IgxGridToolbarComponent],
     contentQueries: [],
     additionalProperties: [],
     methods: [],
   },
   {
     component: IgxGridToolbarComponent,
+    selector: "igc-grid-toolbar",
     parents: [
       IgxGridComponent,
       IgxTreeGridComponent,
@@ -460,6 +471,7 @@ export var registerConfig = [
   },
   {
     component: IgxGridToolbarExporterComponent,
+    selector: "igc-grid-toolbar-exporter",
     parents: [IgxGridToolbarComponent],
     contentQueries: [],
     additionalProperties: [],
@@ -468,6 +480,7 @@ export var registerConfig = [
   },
   {
     component: IgxGridToolbarHidingComponent,
+    selector: "igc-grid-toolbar-hiding",
     parents: [IgxGridToolbarComponent],
     contentQueries: [],
     additionalProperties: [],
@@ -477,6 +490,7 @@ export var registerConfig = [
   },
   {
     component: IgxGridToolbarPinningComponent,
+    selector: "igc-grid-toolbar-pinning",
     parents: [IgxGridToolbarComponent],
     contentQueries: [],
     additionalProperties: [],
@@ -486,13 +500,15 @@ export var registerConfig = [
   },
   {
     component: IgxGridToolbarTitleComponent,
+    selector: "igc-grid-toolbar-title",
     parents: [IgxGridToolbarComponent],
     contentQueries: [],
     additionalProperties: [],
     methods: [],
   },
   {
     component: IgxHierarchicalGridComponent,
+    selector: "igc-hierarchical-grid",
     parents: [],
     contentQueries: [
       {
@@ -665,6 +681,7 @@ export var registerConfig = [
   },
   {
     component: IgxPaginatorComponent,
+    selector: "igc-paginator",
     parents: [
       IgxGridComponent,
       IgxTreeGridComponent,
@@ -684,6 +701,7 @@ export var registerConfig = [
   },
   {
     component: IgxPivotDataSelectorComponent,
+    selector: "igc-pivot-data-selector",
     parents: [],
     contentQueries: [],
     additionalProperties: [{ name: "animationSettings", writable: true }],
@@ -697,6 +715,7 @@ export var registerConfig = [
   },
   {
     component: IgxPivotGridComponent,
+    selector: "igc-pivot-grid",
     parents: [],
     contentQueries: [
       {
@@ -809,6 +828,7 @@ export var registerConfig = [
   },
   {
     component: IgxRowIslandComponent,
+    selector: "igc-row-island",
     parents: [IgxHierarchicalGridComponent, IgxRowIslandComponent],
     contentQueries: [
       {
@@ -957,6 +977,7 @@ export var registerConfig = [
   },
   {
     component: IgxTreeGridComponent,
+    selector: "igc-tree-grid",
     parents: [],
     contentQueries: [
       {

projects/igniteui-angular-elements/src/analyzer/printer.ts

@@ -71,6 +71,7 @@ export class AnalyzerPrinter {
     private createMetaLiteralObject([type, meta]: readonly [ts.InterfaceType, ComponentMetadata]) {
         const properties = [
             ts.factory.createPropertyAssignment('component', ts.factory.createIdentifier(type.symbol.name)),
+            ts.factory.createPropertyAssignment('selector', ts.factory.createStringLiteral(meta.selector)),
             ts.factory.createPropertyAssignment('parents', ts.factory.createArrayLiteralExpression(meta.parents.map(x => ts.factory.createIdentifier(x.symbol.name)))),
             ts.factory.createPropertyAssignment('contentQueries', ts.factory.createArrayLiteralExpression(meta.contentQueries.map(x => this.createContentQueryLiteral(x)))),
             ts.factory.createPropertyAssignment('additionalProperties', ts.factory.createArrayLiteralExpression(meta.additionalProperties.map(x => this.createPropertyLiteral(x)))),

projects/igniteui-angular-elements/src/analyzer/types.ts

@@ -11,6 +11,7 @@ export type ContentQuery = {
 }
 
 export type ComponentMetadata<T = ts.InterfaceType> = {
+    selector: string;
     parents: T[],
     contentQueries: ContentQuery[],
     methods: MethodInfo[],

projects/igniteui-angular-elements/src/analyzer/utils.ts

@@ -96,6 +96,21 @@ export function asString(x?: ts.Symbol) {
     return x ? x.escapedName.toString() : '';
 }
 
+/** Get the properties of the `@Component({ ...properties })` decorator object param */
+function getDecoratorProps(component: ts.ClassDeclaration): ts.NodeArray<ts.ObjectLiteralElementLike> | null {
+    const expression = getDecorators(component)?.find(x => getDecoratorName(x) === 'Component')?.expression;
+
+    if (!expression || !ts.isCallExpression(expression))
+        return null;
+
+    const args = [...expression.arguments];
+
+    if (!ts.isObjectLiteralExpression(args[0]))
+        return null;
+
+    const literal = args[0];
+    return literal?.properties;
+}
 
 /**
  * Looks through the component decorator for providers that match the existing class to a different type/token, such as:
@@ -113,18 +128,8 @@ export function asString(x?: ts.Symbol) {
  * @returns Alternative type/token the component is provided as OR null
  */
 export function getProvidedAs(component: ts.ClassDeclaration, type: ts.InterfaceType) {
-    const expression = getDecorators(component)?.find(x => getDecoratorName(x) === 'Component')?.expression;
-
-    if (!expression || !ts.isCallExpression(expression))
-        return null;
-
-    const args = [...expression.arguments];
-
-    if (!ts.isObjectLiteralExpression(args[0]))
-        return null;
-
-    const literal = args[0];
-    const providers = literal?.properties.find(x => x.name?.getText() === 'providers');
+    const properties = getDecoratorProps(component);
+    const providers = properties?.find(x => x.name?.getText() === 'providers');
     if (!(providers && ts.isPropertyAssignment(providers) && ts.isArrayLiteralExpression(providers.initializer)))
         return null;
 
@@ -141,6 +146,21 @@ export function getProvidedAs(component: ts.ClassDeclaration, type: ts.Interface
 
 }
 
+/**
+ * Get the selector from the component decorator
+ * @param component The component node
+ * @param replace Find and replace pair
+ * @returns The transformed selector as OR null
+ */
+export function getSelector(component: ts.ClassDeclaration, replace: [string, string]) {
+    const properties = getDecoratorProps(component);
+    const selector = properties?.find(x => x.name?.getText() === 'selector');
+    if (!(selector && ts.isPropertyAssignment(selector) && ts.isStringLiteral(selector.initializer)))
+        return null;
+
+    return selector.initializer.text.replace(replace[0], replace[1]);
+}
+
 
 /**
  * Get type identifier from expression, unpacking Angular's `forwardRef` if needed.