Merge branch 'dmdimitrov/query-builder-improvements' of https://github.com/IgniteUI/igniteui-angular into dmdimitrov/query-builder-improvements

Author: igdmdimitrov

.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"

package-lock.json

@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.21.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^14.2.0-beta.1",
+    "igniteui-theming": "^14.2.0-beta.2",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",

package.json

@@ -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/esbuild.mjs

@@ -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/component.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/elements.config.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)))),