feat: add pm prefix to all components & ignoreCustomElements fn (#163)

Author: Sobyt483

angular.json

@@ -44,7 +44,7 @@
       "projectType": "application",
       "root": "projects/wc",
       "sourceRoot": "projects/wc/src",
-      "prefix": "wc",
+      "prefix": "pm",
       "architect": {
         "build": {
           "builder": "ngx-build-plus:browser",

projects/wc/src/app/components/dynamic-select/dynamic-select.component.spec.ts

@@ -84,7 +84,7 @@ describe('DynamicSelectComponent', () => {
 
     fixture.detectChanges();
 
-    expect(component.testId()).toBe('dynamic-select-getData');
+    expect(component.testId()).toBe('pm-dynamic-select-getData');
   });
 
   it('should generate default testId without operation name', () => {
@@ -104,7 +104,7 @@ describe('DynamicSelectComponent', () => {
 
     fixture.detectChanges();
 
-    expect(component.testId()).toBe('dynamic-select');
+    expect(component.testId()).toBe('pm-dynamic-select');
   });
 
   it('should generate optionTestId with value', () => {
@@ -125,7 +125,7 @@ describe('DynamicSelectComponent', () => {
     fixture.detectChanges();
 
     expect(component.optionTestId('option1')).toBe(
-      'dynamic-select-getData-option-option1',
+      'pm-dynamic-select-getData-option-option1',
     );
   });
 
@@ -147,7 +147,7 @@ describe('DynamicSelectComponent', () => {
     fixture.detectChanges();
 
     expect(component.optionTestId('')).toBe(
-      'dynamic-select-getData-option-empty',
+      'pm-dynamic-select-getData-option-empty',
     );
   });
 
@@ -169,7 +169,7 @@ describe('DynamicSelectComponent', () => {
     fixture.detectChanges();
 
     expect(component.optionTestId(null)).toBe(
-      'dynamic-select-getData-option-empty',
+      'pm-dynamic-select-getData-option-empty',
     );
   });
 
@@ -191,7 +191,7 @@ describe('DynamicSelectComponent', () => {
     fixture.detectChanges();
 
     expect(component.optionTestId(undefined)).toBe(
-      'dynamic-select-getData-option-empty',
+      'pm-dynamic-select-getData-option-empty',
     );
   });
 });

projects/wc/src/app/components/dynamic-select/dynamic-select.component.ts

@@ -20,7 +20,7 @@ import { OptionComponent, SelectComponent } from '@ui5/webcomponents-ngx';
 import { Observable, map } from 'rxjs';
 
 @Component({
-  selector: 'dynamic-select',
+  selector: 'pm-dynamic-select',
   imports: [SelectComponent, OptionComponent],
   templateUrl: './dynamic-select.component.html',
   styleUrl: './dynamic-select.component.scss',
@@ -45,7 +45,7 @@ export class DynamicSelectComponent {
   testId = computed(() => {
     const definition = this.dynamicValuesDefinition();
     const operation = definition.operation?.trim();
-    return operation ? `dynamic-select-${operation}` : 'dynamic-select';
+    return operation ? `pm-dynamic-select-${operation}` : 'pm-dynamic-select';
   });
 
   private resourceService = inject(ResourceService);

projects/wc/src/app/components/error/error.component.ts

@@ -1,7 +1,6 @@
 import { ButtonConfig, ErrorConfig } from './models/error.model';
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   OnInit,
   ViewEncapsulation,
@@ -20,7 +19,7 @@ import {
 } from '@ui5/webcomponents-ngx';
 
 @Component({
-  selector: 'app-error',
+  selector: 'pm-error',
   standalone: true,
   templateUrl: './error.component.html',
   encapsulation: ViewEncapsulation.ShadowDom,

projects/wc/src/app/components/generic-ui/detail-view/detail-view.component.html

@@ -50,7 +50,7 @@
                 @for (field of viewField.group.fields; let last = $last; track field.label) {
                   <span [class.multiline]="viewField.group.multiline ?? true">
                     <span>{{ field.label }}: </span>
-                    <value-cell
+                    <pm-value-cell
                     [fieldDefinition]="field"
                     [resource]="resource"
                     [LuigiClient]="LuigiClient()"
@@ -64,7 +64,7 @@
             } @else {
               <ui5-label [attr.test-id]="'generic-detail-view-field-' + viewField.property + '-label'">{{ viewField.label }}</ui5-label>
               <p [attr.test-id]="'generic-detail-view-field-' + viewField.property + '-value'">
-                <value-cell
+                <pm-value-cell
                 [fieldDefinition]="viewField"
                 [resource]="resource"
                 [LuigiClient]="LuigiClient()"

projects/wc/src/app/components/generic-ui/detail-view/detail-view.component.ts

@@ -37,7 +37,7 @@ import {
 } from '@ui5/webcomponents-ngx';
 
 @Component({
-  selector: 'detail-view',
+  selector: 'pm-detail-view',
   standalone: true,
   imports: [
     DynamicPageComponent,
@@ -185,4 +185,4 @@ export class DetailViewComponent {
 
     return resourceDefinition;
   }
-}
+}

projects/wc/src/app/components/generic-ui/list-view/create-resource-modal/create-resource-modal.component.html

@@ -53,7 +53,7 @@
             }
           </ui5-select>
         } @else if (field.dynamicValuesDefinition) {
-          <dynamic-select
+          <pm-dynamic-select
             [attr.test-id]="'create-field-' + fieldProperty"
             [context]="context()"
             [dynamicValuesDefinition]="field.dynamicValuesDefinition"

projects/wc/src/app/components/generic-ui/list-view/create-resource-modal/create-resource-modal.component.ts

@@ -38,7 +38,7 @@ import {
 import { set } from 'lodash';
 
 @Component({
-  selector: 'create-resource-modal',
+  selector: 'pm-create-resource-modal',
   standalone: true,
   imports: [
     ReactiveFormsModule,

projects/wc/src/app/components/generic-ui/list-view/delete-resource-confirmation-modal/delete-resource-modal.component.ts

@@ -29,7 +29,7 @@ import {
 } from '@ui5/webcomponents-ngx';
 
 @Component({
-  selector: 'delete-resource-modal',
+  selector: 'pm-delete-resource-modal',
   standalone: true,
   imports: [
     ReactiveFormsModule,

projects/wc/src/app/components/generic-ui/list-view/list-view.component.html

@@ -48,7 +48,7 @@
       <ui5-table-header-cell test-id="generic-list-header-actions" class="actions-column">Actions</ui5-table-header-cell>
     </ui5-table-header-row>
 
-    <ui5-illustrated-message test-id="generic-list-view-nodata" slot="nodata" name="NoData">
+    <ui5-illustrated-message test-id="generic-list-view-nodata" slot="noData" name="NoData">
       <span slot="title">No Resources</span>
       <span slot="subtitle">There are currently no items to show.</span>
     </ui5-illustrated-message>
@@ -87,7 +87,7 @@
               ) {
                 <div [attr.test-id]="'generic-list-cell-' + i + '-' + column.property + '-' + field.property">
                   <span>{{ field.label }}: </span>
-                  <value-cell
+                  <pm-value-cell
                     [fieldDefinition]="field"
                     [resource]="item"
                     [LuigiClient]="LuigiClient()"
@@ -100,11 +100,11 @@
             </ui5-table-cell>
           } @else {
             <ui5-table-cell [attr.test-id]="'generic-list-cell-' + i + '-' + column.property">
-              <value-cell
+              <pm-value-cell
                 [fieldDefinition]="column"
                 [resource]="item"
                 [LuigiClient]="LuigiClient()"
-              />
+                />
             </ui5-table-cell>
           }
         }
@@ -130,7 +130,7 @@
 </ui5-dynamic-page>
 
 @if (hasUiCreateViewFields()) {
-  <create-resource-modal
+  <pm-create-resource-modal
     #createModal
     [fields]="resourceDefinition()?.ui?.createView?.fields ?? []"
     (resource)="create($event)"
@@ -139,7 +139,7 @@
   />
 }
 
-<delete-resource-modal
+<pm-delete-resource-modal
   #deleteModal
   (resource)="delete($event)"
   [context]="context()"