@pega/angular-sdk-overrides 0.25.3 → 0.25.5

package/lib/designSystemExtension/wss-quick-create/wss-quick-create.component.scss

@@ -23,7 +23,6 @@
 .quick-link-button {
   text-transform: capitalize !important;
   font-size: 16px !important;
-  color: var(--app-form-color) !important;
   cursor: pointer;
   padding: calc(0.5rem * 2) !important;
   height: 10rem;

package/lib/field/date/date.component.html

@@ -20,7 +20,7 @@
           (dateChange)="fieldOnDateChange($event)"
         />
         <mat-datepicker-toggle matSuffix [for]="pegadate" [disabled]="bDisabled$"></mat-datepicker-toggle>
-        <mat-datepicker #pegadate [startAt]="value$"></mat-datepicker>
+        <mat-datepicker #pegadate [startAt]="value$" xPosition="end"></mat-datepicker>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/lib/field/date-time/date-time.component.html

@@ -17,7 +17,7 @@
           [readonly]="bDisabled$"
         />
         <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
-        <owl-date-time #dtPicker [disabled]="bDisabled$"></owl-date-time>
+        <owl-date-time #dtPicker [disabled]="bDisabled$" [scrollStrategy]="scrollStrategy"></owl-date-time>
         <mat-error *ngIf="fieldControl?.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/lib/field/date-time/date-time.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit, forwardRef, OnDestroy } from '@angular/core';
+import { Component, OnInit, forwardRef, OnDestroy, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
 import dayjs from 'dayjs';
 
@@ -45,6 +46,9 @@ export class DateTimeComponent extends FieldBase implements OnInit, OnDestroy {
   timezone = PCore.getEnvironmentInfo()?.getTimeZone();
   override placeholder = `${this.theDateFormat.dateFormatStringLC}, hh:mm A`;
 
+  private sso = inject(ScrollStrategyOptions);
+  scrollStrategy = this.sso.reposition();
+
   override ngOnInit(): void {
     super.ngOnInit();
 

package/lib/field/location/location.component.html

@@ -6,13 +6,13 @@
       matInput
       type="text"
       [placeholder]="placeholder"
-      [formControl]="searchControl"
+      [formControl]="fieldControl"
       [required]="bRequired$"
       [matAutocomplete]="auto"
       [attr.data-test-id]="testId"
       (blur)="fieldOnBlur()"
     />
-    <mat-error *ngIf="searchControl.invalid">{{ getErrorMessage() }}</mat-error>
+    <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
     <button
       mat-icon-button
       matSuffix

package/lib/field/location/location.component.ts

@@ -1,6 +1,6 @@
-import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -8,12 +8,10 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { GoogleMapsModule } from '@angular/google-maps';
+import { debounceTime, from, of, switchMap } from 'rxjs';
 
-import { debounceTime, from, interval, of, switchMap } from 'rxjs';
-
-import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { FieldBase } from '@pega/angular-sdk-components';
 import { GoogleMapsLoaderService } from '@pega/angular-sdk-components';
-import { Utils } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 
 import { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -41,9 +39,8 @@ interface LocationProps extends PConnFieldProps {
   templateUrl: './location.component.html',
   styleUrl: './location.component.scss'
 })
-export class LocationComponent implements OnInit, OnDestroy {
-  @Input() pConn$: typeof PConnect;
-  @Input() formGroup$: FormGroup;
+export class LocationComponent extends FieldBase {
+  private loader = inject(GoogleMapsLoaderService);
 
   private autocompleteService!: google.maps.places.AutocompleteService;
   private geocoder!: google.maps.Geocoder;
@@ -51,137 +48,52 @@ export class LocationComponent implements OnInit, OnDestroy {
   // Dom variables
   mapReady = false;
   isLocating = false;
-  searchControl = new FormControl('');
   showMap = true;
   filteredOptions: string[] = [];
   center: google.maps.LatLngLiteral;
   markerPosition: google.maps.LatLngLiteral | null = null;
 
-  // Used with AngularPConnect
-  angularPConnectData: AngularPConnectData = {};
   configProps$: LocationProps;
-  label$ = '';
   onlyCoordinates: boolean;
   coordinates: string;
-  bRequired$ = false;
-  bReadonly$ = false;
   showMapReadOnly$: boolean;
-  bDisabled$ = false;
-  bVisible$ = true;
-  controlName$: string;
-  bHasForm$ = true;
-  testId = '';
-  helperText: string;
-  placeholder: string;
-  actionsApi: object;
   valueProp: string;
   coordinatesProp: string;
 
-  constructor(
-    private loader: GoogleMapsLoaderService,
-    private angularPConnect: AngularPConnectService,
-    private utils: Utils,
-    private cdRef: ChangeDetectorRef
-  ) {}
+  override async ngOnInit() {
+    super.ngOnInit();
 
-  async ngOnInit() {
     // Loading map
     const apiKey = this.pConn$.getGoogleMapsAPIKey();
     await this.loader.load(apiKey);
     this.mapReady = true;
     this.initializeGoogleServices();
     this.getPlacePredictions();
-
-    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-    this.controlName$ = this.angularPConnect.getComponentID(this);
-    this.checkAndUpdate();
-
-    if (this.formGroup$) {
-      // add control to formGroup
-      this.formGroup$.addControl(this.controlName$, this.searchControl);
-      this.bHasForm$ = true;
-    } else {
-      this.bReadonly$ = true;
-      this.bHasForm$ = false;
-    }
   }
 
-  ngOnDestroy(): void {
-    if (this.formGroup$) {
-      this.formGroup$.removeControl(this.controlName$);
-    }
-
-    if (this.angularPConnectData.unsubscribeFn) {
-      this.angularPConnectData.unsubscribeFn();
-    }
-  }
-
-  checkAndUpdate() {
-    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
-    if (bUpdateSelf) {
-      this.updateSelf();
-    }
-  }
+  /**
+   * Updates the component when there are changes in the state.
+   */
+  override updateSelf(): void {
+    // Resolve configuration properties
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as LocationProps;
 
-  onStateChange() {
-    setTimeout(() => {
-      this.checkAndUpdate();
-    }, 0);
-  }
+    // Update component common properties
+    this.updateComponentCommonProperties(this.configProps$);
 
-  updateSelf(): void {
-    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as LocationProps;
-    if (this.configProps$.visibility != null) {
-      this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
-    }
     this.onlyCoordinates = !!this.configProps$.onlyCoordinates;
-    this.label$ = this.configProps$.label;
-    this.testId = this.configProps$.testId;
-
-    this.helperText = this.configProps$.helperText || '';
-    this.placeholder = this.configProps$.placeholder || '';
     this.showMapReadOnly$ = !!this.configProps$.showMapReadOnly;
-    if (this.configProps$.readOnly != null) {
-      this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
-    }
     this.showMap = this.bReadonly$ ? this.showMapReadOnly$ : !!this.configProps$.showMap;
+
     if (this.configProps$.coordinates) {
       const latAndLong: number[] = this.configProps$.coordinates.split(',').map(Number);
       const latitude = Number(latAndLong[0]);
       const longitude = Number(latAndLong[1]);
       this.updateMap(latitude, longitude, this.configProps$.value);
     }
-    // // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
-    setTimeout(() => {
-      if (this.configProps$.required != null) {
-        this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
-      }
-      this.cdRef.detectChanges();
-    });
-    // // disabled
-    if (this.configProps$.disabled != undefined) {
-      this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
-    }
 
-    if (this.bDisabled$ || this.bReadonly$) {
-      this.searchControl.disable();
-    } else {
-      this.searchControl.enable();
-    }
-
-    this.actionsApi = this.pConn$.getActionsApi();
     this.valueProp = this.pConn$.getStateProps().value;
     this.coordinatesProp = this.pConn$.getStateProps().coordinates;
-
-    // // trigger display of error message with field control
-    if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
-      const timer = interval(100).subscribe(() => {
-        this.searchControl.setErrors({ message: true });
-        this.searchControl.markAsTouched();
-
-        timer.unsubscribe();
-      });
-    }
   }
 
   onOptionSelected(event: any) {
@@ -236,23 +148,6 @@ export class LocationComponent implements OnInit, OnDestroy {
     }
   }
 
-  getErrorMessage() {
-    let errMessage = '';
-
-    // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
-    if (this.searchControl.hasError('message')) {
-      errMessage = this.angularPConnectData.validateMessage ?? '';
-      return errMessage;
-    }
-    if (this.searchControl.hasError('required')) {
-      errMessage = 'You must enter a value';
-    } else if (this.searchControl.errors) {
-      errMessage = this.searchControl.errors.toString();
-    }
-
-    return errMessage;
-  }
-
   private tryGetLocation(retryCount: number) {
     navigator.geolocation.getCurrentPosition(
       position => {
@@ -312,7 +207,7 @@ export class LocationComponent implements OnInit, OnDestroy {
   }
 
   private getPlacePredictions() {
-    this.searchControl.valueChanges
+    this.fieldControl.valueChanges
       .pipe(
         debounceTime(300),
         switchMap(value => this.getSuggestions(value || ''))
@@ -371,7 +266,7 @@ export class LocationComponent implements OnInit, OnDestroy {
   }
 
   private updateProps() {
-    handleEvent(this.actionsApi, 'change', this.valueProp, this.searchControl.value);
+    handleEvent(this.actionsApi, 'change', this.valueProp, this.fieldControl.value);
     handleEvent(this.actionsApi, 'change', this.coordinatesProp, this.coordinates);
   }
 
@@ -380,6 +275,6 @@ export class LocationComponent implements OnInit, OnDestroy {
   }
 
   private setLocationValue(value: string) {
-    this.searchControl.setValue(value, { emitEvent: false });
+    this.fieldControl.setValue(value, { emitEvent: false });
   }
 }

package/lib/field/phone/phone.component.scss

@@ -24,11 +24,6 @@
   font-size: 0.7rem;
 }
 
-::ng-deep .cdk-overlay-pane {
-  left: 32rem !important;
-  top: 20rem !important;
-}
-
 ::ng-deep .mat-mdc-menu-panel {
   max-width: 20rem;
 }

package/lib/infra/Containers/flow-container/flow-container.component.html

@@ -32,7 +32,7 @@
   </div>
   <div *ngIf="bHasCaseMessages$">
     <mat-card class="psdk-message-card">
-      <div style="display: flex; flex-direction: row">
+      <div style="display: flex; flex-direction: row; align-items: center">
         <div><img class="psdk-icon" src="{{ checkSvg$ }}" /></div>
         <div>{{ caseMessages$ }}</div>
       </div>

package/lib/infra/Containers/flow-container/flow-container.component.ts

@@ -280,7 +280,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
 
     // this.containerName$ = oWorkMeta["name"];
     if (bLoadChildren && oWorkData) {
-      this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments[0].name, undefined, this.localeReference);
+      this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name, undefined, this.localeReference);
     }
 
     // turn off spinner

package/lib/infra/multi-step/multi-step.component.html

@@ -12,25 +12,17 @@
         </div>
       </div>
       <div class="{{ _getVBodyClass(i) }}">
-        <ng-container *ngIf="mainStep?.steps">
-          <ul style="padding-inline-start: 0rem; margin-left: -7px">
-            <li *ngFor="let subStep of mainStep.steps" class="psdk-sub-step-list">
-              <div style="display: inline-flex">
-                <img *ngIf="subStep.visited_status == 'current'" class="psdk-current-svg-icon" src="{{ svgCurrent$ }}" />
-                <img *ngIf="subStep.visited_status != 'current'" class="psdk-not-current-svg-icon" src="{{ svgNotCurrent$ }}" />
-                <label *ngIf="subStep.visited_status == 'current'" class="psdk-sub-step-current">{{ subStep.name }}</label>
-                <label *ngIf="subStep.visited_status != 'current'" class="psdk-sub-step-not-current">{{ subStep.name }}</label>
-              </div>
-              <div *ngIf="subStep.visited_status == 'current'">
-                <component-mapper
-                  name="AssignmentCard"
-                  [props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
-                  [parent]="this"
-                  [outputEvents]="{ actionButtonClick: onActionButtonClick }"
-                ></component-mapper>
-              </div>
-            </li>
-          </ul>
+        <ng-container *ngIf="mainStep?.steps && mainStep.visited_status == 'current'">
+          <div *ngFor="let subStep of mainStep.steps">
+            <div *ngIf="subStep.visited_status == 'current'">
+              <component-mapper
+                name="AssignmentCard"
+                [props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
+                [parent]="this"
+                [outputEvents]="{ actionButtonClick: onActionButtonClick }"
+              ></component-mapper>
+            </div>
+          </div>
         </ng-container>
 
         <ng-container *ngIf="!mainStep?.steps && mainStep.visited_status == 'current'">
@@ -64,25 +56,17 @@
       </ng-container>
     </div>
     <div *ngFor="let mainStep of arNavigationSteps$" class="psdk-horizontal-stepper-body">
-      <ng-container *ngIf="mainStep?.steps">
-        <ul style="padding-inline-start: 0rem; margin-left: 35px">
-          <li *ngFor="let subStep of mainStep.steps" class="psdk-sub-step-list">
-            <div style="display: inline-flex">
-              <img *ngIf="subStep.visited_status == 'current'" class="psdk-current-svg-icon" src="{{ svgCurrent$ }}" />
-              <img *ngIf="subStep.visited_status != 'current'" class="psdk-not-current-svg-icon" src="{{ svgNotCurrent$ }}" />
-              <label *ngIf="subStep.visited_status == 'current'" class="psdk-sub-step-current">{{ subStep.name }}</label>
-              <label *ngIf="subStep.visited_status != 'current'" class="psdk-sub-step-not-current">{{ subStep.name }}</label>
-            </div>
-            <div *ngIf="subStep.visited_status == 'current'">
-              <component-mapper
-                name="AssignmentCard"
-                [props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
-                [parent]="this"
-                [outputEvents]="{ actionButtonClick: onActionButtonClick }"
-              ></component-mapper>
-            </div>
-          </li>
-        </ul>
+      <ng-container *ngIf="mainStep?.steps && mainStep.visited_status == 'current'">
+        <div *ngFor="let subStep of mainStep.steps">
+          <div *ngIf="subStep.visited_status == 'current'">
+            <component-mapper
+              name="AssignmentCard"
+              [props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
+              [parent]="this"
+              [outputEvents]="{ actionButtonClick: onActionButtonClick }"
+            ></component-mapper>
+          </div>
+        </div>
       </ng-container>
 
       <ng-container *ngIf="!mainStep?.steps && mainStep.visited_status == 'current'">

package/lib/infra/multi-step/multi-step.component.scss

@@ -7,12 +7,6 @@
   min-width: unset;
 }
 
-.psdk-icon-current {
-}
-
-.psdk-icon-not-current {
-}
-
 .psdk-current-svg-icon {
   width: 1rem;
   filter: var(--app-primary-color-filter);
@@ -33,9 +27,11 @@ mat-horizontal-stepper {
 .psdk-sub-step-current {
   padding-left: 0.625rem;
   font-weight: bold;
+  color: var(--mat-sys-on-secondary-container);
 }
 
 .psdk-sub-step-not-current {
+  color: var(--mat-sys-on-surface-variant);
   padding-left: 0.625rem;
 }
 
@@ -76,6 +72,7 @@ mat-horizontal-stepper {
 
 .psdk-vertical-step-icon {
   margin-right: 12px;
+  background-color: var(--mat-sys-secondary);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -92,6 +89,8 @@ mat-horizontal-stepper {
 
 .psdk-vertical-step-icon-selected {
   margin-right: 12px;
+  background-color: var(--mat-sys-primary);
+  color: var(--mat-sys-surface);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -100,6 +99,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-vertical-step-label {
+  color: var(--mat-sys-on-surface-variant);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -111,6 +111,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-vertical-step-label-selected {
+  color: var(--mat-sys-on-secondary-container);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -169,6 +170,8 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-icon {
+  background-color: var(--mat-sys-secondary);
+  color: var(--mat-sys-surface);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -188,6 +191,8 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-icon-selected {
+  background-color: var(--mat-sys-primary);
+  color: var(--mat-sys-surface);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -199,6 +204,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-label {
+  color: var(--mat-sys-on-surface-variant);
   display: inline-block;
   min-width: 50px;
   vertical-align: middle;
@@ -208,6 +214,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-label-selected {
+  color: var(--mat-sys-on-secondary-container);
   display: inline-block;
   min-width: 50px;
   vertical-align: middle;

package/lib/infra/navbar/navbar.component.html

@@ -36,17 +36,15 @@
     </mat-list-item>
   </mat-list>
   <div class="psdk-nav-divider"></div>
-  <div>
-    <mat-list id="profile">
-      <mat-list-item [matMenuTriggerFor]="menu" class="psdk-profile-list-item">
-        <div class="flex-box">
-          <div class="psdk-nav-oper-avatar">{{ portalOperatorInitials$ }}</div>
-          <span class="psdk-nav-button-span">{{ portalOperator$ }}</span>
-        </div>
-      </mat-list-item>
-      <mat-menu #menu="matMenu">
-        <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Log off', localeCategory) }}</button>
-      </mat-menu>
-    </mat-list>
-  </div>
+  <mat-list id="profile" class="psdk-logout-button">
+    <mat-list-item [matMenuTriggerFor]="menu" class="psdk-profile-list-item">
+      <div class="flex-box">
+        <div class="psdk-nav-oper-avatar">{{ portalOperatorInitials$ }}</div>
+        <span class="psdk-nav-button-span">{{ portalOperator$ }}</span>
+      </div>
+    </mat-list-item>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Log off', localeCategory) }}</button>
+    </mat-menu>
+  </mat-list>
 </div>

package/lib/infra/navbar/navbar.component.scss

@@ -39,6 +39,7 @@ $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
 .psdk-appshell-nav {
   z-index: 199;
   position: fixed;
+  top: 0;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -162,3 +163,8 @@ mat-list-item {
   height: 24px;
   border-radius: 50%;
 }
+
+.psdk-logout-button {
+  flex: 1;
+  align-content: flex-end;
+}

package/lib/infra/reference/reference.component.ts

@@ -71,6 +71,11 @@ export class ReferenceComponent {
       pageReference: context && context.startsWith('@CLASS') ? '' : context
     });
 
+    if (referenceConfig.inheritedProps && referenceConfig.inheritedProps.length > 0) {
+      const inheritedProps = inPConn.getInheritedProps();
+      referenceConfig.inheritedProps = Object.keys(inheritedProps).map(prop => ({ prop, value: inheritedProps[prop] }));
+    }
+
     // Get the PConnect object from the created component
     const newCompPConnect = viewComponent.getPConnect();
 

package/lib/infra/view/view.component.ts

@@ -7,7 +7,7 @@ import { getAllFields } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
-const NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs'];
+const NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs', 'ListView'];
 const DETAILS_TEMPLATES = [
   'Details',
   'DetailsFields',
@@ -158,10 +158,9 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
 
     this.templateName$ = this.configProps$.template || '';
     this.title$ = this.configProps$.title || '';
-    this.label$ = this.configProps$.label || '';
-    this.showLabel$ = this.configProps$.showLabel || isDetailsTemplate(this.templateName$) || this.showLabel$;
     // label & showLabel within inheritedProps takes precedence over configProps
-    this.label$ = this.inheritedProps$.label || this.label$;
+    this.label$ = this.inheritedProps$.label || this.configProps$.label || '';
+    this.showLabel$ = this.inheritedProps$.showLabel || this.configProps$.showLabel || isDetailsTemplate(this.templateName$);
     // children may have a 'reference' so normalize the children array
     this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
     this.visibility$ = this.configProps$.visibility ?? this.visibility$;