@praxisui/dynamic-fields 9.0.67 → 9.0.68-rc.0

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-09-07T00:54:55.301Z",
+  "generatedAt": "2026-09-09T10:03:24.330Z",
   "packageName": "@praxisui/dynamic-fields",
-  "packageVersion": "9.0.67",
+  "packageVersion": "9.0.68-rc.0",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 76,

package/docs/dynamic-fields-field-catalog.md

@@ -152,6 +152,12 @@ Use `stateInitialValues` apenas quando o valor do preset precisa continuar coere
 | Week input     | <span id="week"></span>`week`                   | semana ISO                                                                            | quando o negocio trabalha por data convencional | `string`                | `{ name: 'weekRef', controlType: 'week' }`                           | `pdx-week-input.json-api.md`           |
 | Year input     | <span id="year"></span>`year`                   | ano isolado                                                                           | mes/ano ou data completa                        | `number \| string`      | `{ name: 'fiscalYear', controlType: 'year' }`                        | `pdx-year-input.json-api.md`           |
 
+No `dateRange`, os dois inputs devem conservar nomes acessiveis distintos mesmo
+quando o metadata fornece apenas um rotulo compartilhado. O fallback do runtime
+combina esse rotulo com os textos localizados de data inicial e data final.
+`startAriaLabel` e `endAriaLabel` continuam sendo as configuracoes canonicas para
+nomes especificos do dominio e têm precedencia quando diferem do rotulo comum.
+
 ## Selecao
 
 | Field             | controlType                                             | Quando usar                                                                    | Quando evitar                                              | Valor esperado               | Snippet                                                                                                            | Detail doc                                   |

package/fesm2022/praxisui-dynamic-fields.mjs

@@ -1,7 +1,7 @@
 import * as i1$1 from '@angular/forms';
 import { NgControl, FormControl, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormGroup, FormArray, FormsModule } from '@angular/forms';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, DestroyRef, ElementRef, ChangeDetectorRef, Injector, signal, output, computed, Input, Directive, viewChild, effect, EventEmitter, Output, Component, forwardRef, LOCALE_ID, Injectable, ChangeDetectionStrategy, ViewChild, ViewContainerRef, HostListener, HostBinding, ViewEncapsulation, model, input, contentChild, Renderer2, viewChildren, ENVIRONMENT_INITIALIZER, Inject, ViewChildren, afterNextRender, TemplateRef, ContentChild, APP_INITIALIZER, Optional } from '@angular/core';
+import { InjectionToken, inject, DestroyRef, ElementRef, ChangeDetectorRef, Injector, signal, output, computed, Input, Directive, viewChild, effect, EventEmitter, Output, Component, forwardRef, LOCALE_ID, Injectable, ChangeDetectionStrategy, afterRenderEffect, ViewChild, ViewContainerRef, HostListener, HostBinding, ViewEncapsulation, model, input, contentChild, Renderer2, viewChildren, ENVIRONMENT_INITIALIZER, Inject, ViewChildren, afterNextRender, TemplateRef, ContentChild, APP_INITIALIZER, Optional } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { providePraxisI18n, PraxisI18nService, isCssTextTransform, getTextTransformer, GlobalActionService, GenericCrudService, GlobalConfigService, PraxisIconDirective, FieldControlType, resolveBuiltinPresets, resolveDateRangeShortcutPreset, INLINE_FILTER_CONTROL_TYPES, FieldSelectorRegistry, FIELD_SELECTOR_REGISTRY_BASE, FIELD_SELECTOR_REGISTRY_DISABLE_DEFAULTS, LoggerService, normalizeControlTypeToken, resolveInlineFilterControlType, resolveControlTypeAlias, DEFAULT_FIELD_SELECTOR_CONTROL_TYPE_MAP, resolveValuePresentation, FieldDataType, PraxisJsonLogicService, renderPraxisPresentationVisualizationHtml, resolveFieldPresentation as resolveFieldPresentation$1, DynamicFormService, ResourceDiscoveryService, ResourceSurfaceOpenAdapterService, classifyEntityLookupResult, ComponentMetadataRegistry, GovernedColorPaletteService, materializeGovernedPaletteEntries, createCpfCnpjValidator, NumericFormat, interpolatePraxisTranslation, FIELD_METADATA_CAPABILITIES } from '@praxisui/core';
 import { Subscription, BehaviorSubject, combineLatest, of, Subject, EMPTY, timer, firstValueFrom, fromEvent, take as take$1 } from 'rxjs';
@@ -7564,9 +7564,51 @@ class MaterialDateRangeComponent extends SimpleBaseInputComponent {
     dateAdapter = inject(DateAdapter);
     datepickerIntl = inject(MatDatepickerIntl);
     picker;
+    startDateInput;
     endDateInput;
+    accessibleDateInputLabelsEffect = afterRenderEffect(() => {
+        // MatStartDate normalizes projected input accessibility attributes during
+        // its render cycle. Reapply both canonical names after Material settles.
+        this.applyAccessibleDateInputLabel(this.startDateInput?.nativeElement, this.startInputAriaLabel());
+        this.applyAccessibleDateInputLabel(this.endDateInput?.nativeElement, this.endInputAriaLabel());
+    });
+    applyAccessibleDateInputLabel(input, accessibleName) {
+        if (input && input.getAttribute('aria-label') !== accessibleName) {
+            input.setAttribute('aria-label', accessibleName);
+        }
+    }
     shouldShowShortcuts = () => !!this.metadata()?.showShortcuts;
     shortcutOverlayAriaLabel = computed(() => this.tDynamicFields('dateRange.shortcutsAriaLabel', 'Atalhos de período de datas'), ...(ngDevMode ? [{ debugName: "shortcutOverlayAriaLabel" }] : /* istanbul ignore next */ []));
+    startInputAriaLabel() {
+        return this.dateInputAriaLabel('start');
+    }
+    endInputAriaLabel() {
+        return this.dateInputAriaLabel('end');
+    }
+    dateInputAriaLabel(boundary) {
+        const metadata = this.metadata();
+        const label = String(metadata?.label || this.label || '').trim();
+        const normalizeComparableText = (value) => value.normalize('NFKC').replace(/\s+/g, ' ').trim();
+        const normalizedLabel = normalizeComparableText(label);
+        const explicitAriaLabel = String(boundary === 'start'
+            ? metadata?.startAriaLabel || ''
+            : metadata?.endAriaLabel || '').trim();
+        if (explicitAriaLabel &&
+            normalizeComparableText(explicitAriaLabel) !== normalizedLabel) {
+            return explicitAriaLabel;
+        }
+        const placeholder = String(boundary === 'start'
+            ? metadata?.startPlaceholder || ''
+            : metadata?.endPlaceholder || '').trim();
+        if (placeholder &&
+            normalizeComparableText(placeholder) !== normalizedLabel) {
+            return placeholder;
+        }
+        const boundaryLabel = this.tDynamicFields(boundary === 'start'
+            ? 'datepicker.startDateLabel'
+            : 'datepicker.endDateLabel', boundary === 'start' ? 'Data inicial' : 'Data final');
+        return label ? `${label} - ${boundaryLabel}` : boundaryLabel;
+    }
     overlayPositions = () => {
         const preferredPosition = this.metadata()?.shortcutsPosition ?? 'auto';
         const below = this.shortcutOverlayBelowPositions();
@@ -8090,7 +8132,7 @@ class MaterialDateRangeComponent extends SimpleBaseInputComponent {
                 useExisting: forwardRef(() => MaterialDateRangeComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true, static: true }, { propertyName: "endDateInput", first: true, predicate: ["endDateInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true, static: true }, { propertyName: "startDateInput", first: true, predicate: ["startDateInput"], descendants: true }, { propertyName: "endDateInput", first: true, predicate: ["endDateInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <div
       class="pdx-date-range-wrap"
       cdkOverlayOrigin
@@ -8131,6 +8173,7 @@ class MaterialDateRangeComponent extends SimpleBaseInputComponent {
           [matTooltipPosition]="tooltipPosition()"
         >
           <input
+            #startDateInput
             matStartDate
             formControlName="start"
             [attr.placeholder]="
@@ -8141,12 +8184,7 @@ class MaterialDateRangeComponent extends SimpleBaseInputComponent {
             "
             [readonly]="isReadonlyEffective()"
             [attr.aria-disabled]="disabledMode ? 'true' : null"
-            [attr.aria-label]="
-              metadata()?.startAriaLabel ||
-              metadata()?.startPlaceholder ||
-              label ||
-              null
-            "
+            [attr.aria-label]="startInputAriaLabel()"
             (keydown.tab)="focusEndDateInput($event)"
           />
           <input
@@ -8161,12 +8199,7 @@ class MaterialDateRangeComponent extends SimpleBaseInputComponent {
             "
             [readonly]="isReadonlyEffective()"
             [attr.aria-disabled]="disabledMode ? 'true' : null"
-            [attr.aria-label]="
-              metadata()?.endAriaLabel ||
-              metadata()?.endPlaceholder ||
-              label ||
-              null
-            "
+            [attr.aria-label]="endInputAriaLabel()"
           />
         </mat-date-range-input>
 
@@ -8298,6 +8331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           [matTooltipPosition]="tooltipPosition()"
         >
           <input
+            #startDateInput
             matStartDate
             formControlName="start"
             [attr.placeholder]="
@@ -8308,12 +8342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             "
             [readonly]="isReadonlyEffective()"
             [attr.aria-disabled]="disabledMode ? 'true' : null"
-            [attr.aria-label]="
-              metadata()?.startAriaLabel ||
-              metadata()?.startPlaceholder ||
-              label ||
-              null
-            "
+            [attr.aria-label]="startInputAriaLabel()"
             (keydown.tab)="focusEndDateInput($event)"
           />
           <input
@@ -8328,12 +8357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             "
             [readonly]="isReadonlyEffective()"
             [attr.aria-disabled]="disabledMode ? 'true' : null"
-            [attr.aria-label]="
-              metadata()?.endAriaLabel ||
-              metadata()?.endPlaceholder ||
-              label ||
-              null
-            "
+            [attr.aria-label]="endInputAriaLabel()"
           />
         </mat-date-range-input>
 
@@ -8466,6 +8490,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             }], picker: [{
                 type: ViewChild,
                 args: ['picker', { static: true }]
+            }], startDateInput: [{
+                type: ViewChild,
+                args: ['startDateInput']
             }], endDateInput: [{
                 type: ViewChild,
                 args: ['endDateInput']
@@ -24806,7 +24833,7 @@ class ConfirmDialogComponent {
       </mat-dialog-actions>
 
     </div>
-  `, isInline: true, styles: [".pdx-confirm-dialog{min-width:300px;max-width:500px;padding:24px;box-sizing:border-box}.pdx-dialog-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.pdx-dialog-icon{font-size:24px;height:24px;width:24px}.pdx-dialog-title{margin:0;color:var(--md-sys-color-on-surface);font-family:var(--md-sys-typescale-title-medium-font, inherit);font-size:var(--md-sys-typescale-title-medium-size, 16px);font-weight:var(--md-sys-typescale-title-medium-weight, 500);line-height:var(--md-sys-typescale-title-medium-line-height, 24px);letter-spacing:var(--md-sys-typescale-title-medium-letter-spacing, .15px)}.pdx-dialog-content{padding:0;margin:0 0 24px}.pdx-dialog-message{margin:0;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-sys-typescale-body-medium-font, inherit);font-size:var(--md-sys-typescale-body-medium-size, 14px);font-weight:var(--md-sys-typescale-body-medium-weight, 400);line-height:var(--md-sys-typescale-body-medium-line-height, 20px);letter-spacing:var(--md-sys-typescale-body-medium-letter-spacing, .25px);line-height:1.5}.pdx-dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 0 0;background:transparent}.pdx-cancel-button{color:var(--md-sys-color-on-surface-variant);margin-right:4px}.pdx-confirm-type-warning .pdx-dialog-icon{color:var(--md-sys-color-secondary)}.pdx-confirm-type-danger .pdx-dialog-icon{color:var(--md-sys-color-error)}.pdx-confirm-type-info .pdx-dialog-icon{color:var(--md-sys-color-primary)}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$5.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$5.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
+  `, isInline: true, styles: [":host{display:block;background:var(--mat-dialog-container-color, var(--md-sys-color-surface-container-high, Canvas));color:var(--mat-dialog-supporting-text-color, var(--md-sys-color-on-surface, CanvasText))}.pdx-confirm-dialog{min-width:min(300px,100%);max-width:500px;padding:24px;box-sizing:border-box}.pdx-dialog-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.pdx-dialog-icon{font-size:24px;height:24px;width:24px}.pdx-dialog-title{margin:0;color:var(--md-sys-color-on-surface);font-family:var(--md-sys-typescale-title-medium-font, inherit);font-size:var(--md-sys-typescale-title-medium-size, 16px);font-weight:var(--md-sys-typescale-title-medium-weight, 500);line-height:var(--md-sys-typescale-title-medium-line-height, 24px);letter-spacing:var(--md-sys-typescale-title-medium-letter-spacing, .15px)}.pdx-dialog-content{padding:0;margin:0 0 24px}.pdx-dialog-message{margin:0;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-sys-typescale-body-medium-font, inherit);font-size:var(--md-sys-typescale-body-medium-size, 14px);font-weight:var(--md-sys-typescale-body-medium-weight, 400);line-height:var(--md-sys-typescale-body-medium-line-height, 20px);letter-spacing:var(--md-sys-typescale-body-medium-letter-spacing, .25px);line-height:1.5}.pdx-dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 0 0;background:transparent}.pdx-cancel-button{color:var(--md-sys-color-on-surface-variant);margin-right:4px}.pdx-confirm-type-warning .pdx-dialog-icon{color:var(--md-sys-color-secondary)}.pdx-confirm-type-danger .pdx-dialog-icon{color:var(--md-sys-color-error)}.pdx-confirm-type-info .pdx-dialog-icon{color:var(--md-sys-color-primary)}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$5.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$5.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
@@ -24852,7 +24879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       </mat-dialog-actions>
 
     </div>
-  `, styles: [".pdx-confirm-dialog{min-width:300px;max-width:500px;padding:24px;box-sizing:border-box}.pdx-dialog-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.pdx-dialog-icon{font-size:24px;height:24px;width:24px}.pdx-dialog-title{margin:0;color:var(--md-sys-color-on-surface);font-family:var(--md-sys-typescale-title-medium-font, inherit);font-size:var(--md-sys-typescale-title-medium-size, 16px);font-weight:var(--md-sys-typescale-title-medium-weight, 500);line-height:var(--md-sys-typescale-title-medium-line-height, 24px);letter-spacing:var(--md-sys-typescale-title-medium-letter-spacing, .15px)}.pdx-dialog-content{padding:0;margin:0 0 24px}.pdx-dialog-message{margin:0;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-sys-typescale-body-medium-font, inherit);font-size:var(--md-sys-typescale-body-medium-size, 14px);font-weight:var(--md-sys-typescale-body-medium-weight, 400);line-height:var(--md-sys-typescale-body-medium-line-height, 20px);letter-spacing:var(--md-sys-typescale-body-medium-letter-spacing, .25px);line-height:1.5}.pdx-dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 0 0;background:transparent}.pdx-cancel-button{color:var(--md-sys-color-on-surface-variant);margin-right:4px}.pdx-confirm-type-warning .pdx-dialog-icon{color:var(--md-sys-color-secondary)}.pdx-confirm-type-danger .pdx-dialog-icon{color:var(--md-sys-color-error)}.pdx-confirm-type-info .pdx-dialog-icon{color:var(--md-sys-color-primary)}\n"] }]
+  `, styles: [":host{display:block;background:var(--mat-dialog-container-color, var(--md-sys-color-surface-container-high, Canvas));color:var(--mat-dialog-supporting-text-color, var(--md-sys-color-on-surface, CanvasText))}.pdx-confirm-dialog{min-width:min(300px,100%);max-width:500px;padding:24px;box-sizing:border-box}.pdx-dialog-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.pdx-dialog-icon{font-size:24px;height:24px;width:24px}.pdx-dialog-title{margin:0;color:var(--md-sys-color-on-surface);font-family:var(--md-sys-typescale-title-medium-font, inherit);font-size:var(--md-sys-typescale-title-medium-size, 16px);font-weight:var(--md-sys-typescale-title-medium-weight, 500);line-height:var(--md-sys-typescale-title-medium-line-height, 24px);letter-spacing:var(--md-sys-typescale-title-medium-letter-spacing, .15px)}.pdx-dialog-content{padding:0;margin:0 0 24px}.pdx-dialog-message{margin:0;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-sys-typescale-body-medium-font, inherit);font-size:var(--md-sys-typescale-body-medium-size, 14px);font-weight:var(--md-sys-typescale-body-medium-weight, 400);line-height:var(--md-sys-typescale-body-medium-line-height, 20px);letter-spacing:var(--md-sys-typescale-body-medium-letter-spacing, .25px);line-height:1.5}.pdx-dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 0 0;background:transparent}.pdx-cancel-button{color:var(--md-sys-color-on-surface-variant);margin-right:4px}.pdx-confirm-type-warning .pdx-dialog-icon{color:var(--md-sys-color-secondary)}.pdx-confirm-type-danger .pdx-dialog-icon{color:var(--md-sys-color-error)}.pdx-confirm-type-info .pdx-dialog-icon{color:var(--md-sys-color-primary)}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisui/dynamic-fields",
-  "version": "9.0.67",
+  "version": "9.0.68-rc.0",
   "description": "Angular Material-based dynamic form fields for Praxis UI with lazy loading and metadata-driven rendering.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
@@ -11,9 +11,9 @@
     "@angular/platform-browser": "^21.0.0",
     "@angular/router": "^21.0.0",
     "rxjs": "^7.8.0",
-    "@praxisui/core": "^9.0.67",
-    "@praxisui/dialog": "^9.0.67",
-    "@praxisui/cron-builder": "^9.0.67"
+    "@praxisui/core": "^9.0.68-rc.0",
+    "@praxisui/dialog": "^9.0.68-rc.0",
+    "@praxisui/cron-builder": "^9.0.68-rc.0"
   },
   "dependencies": {
     "libphonenumber-js": "^1.12.41",

package/types/praxisui-dynamic-fields.d.ts

@@ -2210,9 +2210,15 @@ declare class MaterialDateRangeComponent extends SimpleBaseInputComponent implem
     private readonly dateAdapter;
     private readonly datepickerIntl;
     picker: MatDateRangePicker<Date>;
+    private startDateInput?;
     private endDateInput?;
+    private readonly accessibleDateInputLabelsEffect;
+    private applyAccessibleDateInputLabel;
     readonly shouldShowShortcuts: () => boolean;
     readonly shortcutOverlayAriaLabel: _angular_core.Signal<string>;
+    startInputAriaLabel(): string;
+    endInputAriaLabel(): string;
+    private dateInputAriaLabel;
     readonly overlayPositions: () => ConnectedPosition[];
     private shortcutOverlayBelowPositions;
     private shortcutOverlayLeftPositions;