fix(elements): fixing elements bugs

CHANGELOG.md

@@ -27,6 +27,12 @@ All notable changes for each version of this project will be documented in this
     - Touch pans no longer leave slides partially moved or visible behind the current slide, for example when a pan is cancelled, reversed past the first or last slide of a non-looping carousel, released as a tap, or interrupted by removing slides or changing `gesturesSupport` or `vertical`.
     - Panning a carousel without slides no longer throws an error, and panning a carousel with a single slide no longer moves the slide against itself.
     - A slide activated through its `active` property now animates in the direction of its position, or in its own `direction` when one is set.
+- `IgxTreeGridComponent`
+    - Setting `data` before the grid is initialized while `autoGenerate` is enabled no longer throws an error. In Ignite UI for Web Components this happened when `data` was set on `igc-tree-grid` before the element was attached to the page.
+- Ignite UI for Web Components grids
+    - Writable properties that are not inputs, such as `selected` of `igc-column` and `totalPages` of `igc-paginator`, are now applied when set on the element. Previously the value was ignored and an `NG0303` error was logged.
+    - The deprecated `getFilterFactory` method is now available on `igc-grid`, as intended for backwards compatibility.
+    - Icon changes broadcast from other pages now update only the icons or icon references that match the message's action type.
 - `IgxNavigationToggleDirective`, `IgxNavigationCloseDirective`
     - The `igxNavToggle` and `igxNavClose` inputs are now public, so they can be set in applications compiled with `strictInputAccessModifiers`. Previously the inputs were private and setting them failed the template type check.
 - `IgxStepperComponent`

projects/igniteui-angular-elements/src/app/create-custom-element.spec.ts

@@ -14,6 +14,7 @@ import { ComponentConfig } from './component-config';
 import { createIgxCustomElement, withRegister } from './create-custom-element';
 import { ComponentRefKey, IgcNgElement } from './custom-strategy';
 import { injector } from '../utils/injector-ref';
+import { IgcGridComponent, IgcTreeGridComponent } from './components';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 
 @Component({
@@ -100,15 +101,31 @@ describe('createIgxCustomElement', () => {
 
     it('should only allow setting writable additional properties', async () => {
         const instance = await getInstance();
-        const setInputSpy = vi.spyOn(element.ngElementStrategy, 'setInputValue').mockImplementation(() => {});
+        const errorSpy = vi.spyOn(console, 'error');
 
         element.writableProp = 'updated';
-        expect(setInputSpy).toHaveBeenCalledExactlyOnceWith('writableProp', 'updated');
+        expect(instance.writableProp).toBe('updated');
+        expect(element.writableProp).toBe('updated');
+        expect(errorSpy).not.toHaveBeenCalled();
 
         expect(() => (element as any).readonlyProp = 'nope').toThrow(TypeError);
         expect(instance.readonlyProp).toBe('readonly');
     });
 
+    it('should apply writable additional properties set before the element is connected', async () => {
+        const otherElement = document.createElement(TEST_TAG) as IgcNgElement & CustomElementTestComponent;
+        otherElement.writableProp = 'initial';
+        expect(otherElement.writableProp).toBe('initial');
+
+        document.body.appendChild(otherElement);
+        try {
+            const instance = (await otherElement.ngElementStrategy[ComponentRefKey]).instance as CustomElementTestComponent;
+            expect(instance.writableProp).toBe('initial');
+        } finally {
+            otherElement.remove();
+        }
+    });
+
     it('should throw for additional properties that clash with the element prototype', () => {
         const config = createConfig({ additionalProperties: [{ name: 'connectedCallback' }] });
 
@@ -143,6 +160,12 @@ describe('createIgxCustomElement', () => {
         expect(tree.operator).toBe(FilteringLogic.Or);
         expect(tree.fieldName).toBe('Name');
     });
+
+    it('should add the deprecated getFilterFactory to the igc-grid element', () => {
+        expect(IgcGridComponent.prototype.getFilterFactory).toBeTypeOf('function');
+        expect(IgcGridComponent.prototype.getFilterFactory().stringFilteringOperand).toBe(IgxStringFilteringOperand.instance());
+        expect(IgcTreeGridComponent.prototype.getFilterFactory).toBeUndefined();
+    });
 });
 
 describe('withRegister', () => {

projects/igniteui-angular-elements/src/app/create-custom-element.ts

@@ -61,7 +61,8 @@ export function createIgxCustomElement<T>(component: Type<T>, config: IgxNgEleme
         });
     });
 
-    if (component === IgxGridComponent) {
+    // Elements register their own grid that extends the base one:
+    if (component === IgxGridComponent || component.prototype instanceof IgxGridComponent) {
         /**
          * @deprecated API access workaround moved from Grid for possible existing use compat. Remove in future version
          */