@ieeesa-npm/presentation 0.33.19 → 0.33.20

package/lib/components/autocomplete/autocomplete.component.d.ts

@@ -6,6 +6,7 @@ import { FormField } from '../../models/form-field.model';
 import { AutoCompleteOption } from '../../models/autocomplete-option.model';
 import { SelectOption } from '@ieeesa-npm/models';
 import { FormUtilityService } from '../../services/form-utility.service';
+import { FormOverlayBoundsService } from '../../services/form-overlay-bounds.service';
 import * as i0 from "@angular/core";
 /**
  * Provides auto suggestion for the entered input by filtering the options from the given list of options.
@@ -17,6 +18,7 @@ import * as i0 from "@angular/core";
  */
 export declare class AutocompleteComponent implements OnInit, FormField, OnDestroy, AfterViewInit {
     private formUtilityService;
+    private formOverlayBounds;
     private elementRef;
     config: FieldConfig;
     group: FormGroup;
@@ -31,11 +33,10 @@ export declare class AutocompleteComponent implements OnInit, FormField, OnDestr
     autoComplete: ElementRef;
     destroy$: Subject<boolean>;
     autocompleteConstInfo: any;
-    constructor(formUtilityService: FormUtilityService, elementRef: ElementRef<HTMLElement>);
+    constructor(formUtilityService: FormUtilityService, formOverlayBounds: FormOverlayBoundsService, elementRef: ElementRef<HTMLElement>);
     private formOverlayScrollContainer?;
     private readonly preferredAutocompleteOverlayHeight;
     private readonly overlayWheelListener;
-    private readonly formScrollListener;
     /**
      * Implementation of ngOnInit lifecycle hook method to initialize components instance properties.
      * @memberof AutocompleteComponent
@@ -82,7 +83,6 @@ export declare class AutocompleteComponent implements OnInit, FormField, OnDestr
     onAutocompleteClose(): void;
     private setOverlayClipBounds;
     private getFormOverlayScrollContainer;
-    private updateOverlayClipBounds;
     private makeRoomForAutocompleteOverlay;
     private clearOverlayClipBounds;
     static ɵfac: i0.ɵɵFactoryDeclaration<AutocompleteComponent, never>;

package/lib/components/date-picker/date-picker.component.d.ts

@@ -7,6 +7,7 @@ import { CalendarType } from '../../models/calendar.model';
 import { DatepickerService } from '../../services/datepicker.service';
 import { FormField } from '../../models/form-field.model';
 import { FormUtilityService } from '../../services/form-utility.service';
+import { FormOverlayBoundsService } from '../../services/form-overlay-bounds.service';
 import { SelectedDate } from '../../models/selected-date.model';
 import * as i0 from "@angular/core";
 export declare class CustomDateAdapter extends MomentDateAdapter {
@@ -32,6 +33,7 @@ export declare class DatePickerComponent implements FormField, OnInit, OnDestroy
     private changeDetectorRef;
     private datepickerService;
     private formUtilityService;
+    private formOverlayBounds;
     private elementRef;
     config: FieldConfig;
     group: FormGroup;
@@ -84,7 +86,7 @@ export declare class DatePickerComponent implements FormField, OnInit, OnDestroy
     buttonActionsInfo: any;
     private formOverlayScrollContainer?;
     private readonly overlayWheelListener;
-    constructor(fb: FormBuilder, changeDetectorRef: ChangeDetectorRef, datepickerService: DatepickerService, formUtilityService: FormUtilityService, elementRef: ElementRef<HTMLElement>);
+    constructor(fb: FormBuilder, changeDetectorRef: ChangeDetectorRef, datepickerService: DatepickerService, formUtilityService: FormUtilityService, formOverlayBounds: FormOverlayBoundsService, elementRef: ElementRef<HTMLElement>);
     /**
      * Implementation of  ngOnInit lifecycle hook method to creates config if its undefined and sets components instance variables if config is defined. Sets the form group value if form group is defined.
      * @memberof DatePickerComponent

package/lib/components/select/select.component.d.ts

@@ -5,6 +5,7 @@ import { FieldConfig } from '../../models/field-config.model';
 import { SearchType } from '../../models/search.model';
 import { SearchComponent } from '../../components/search/search.component';
 import { FormUtilityService } from '../../services/form-utility.service';
+import { FormOverlayBoundsService } from '../../services/form-overlay-bounds.service';
 import { SelectOpenedState } from '../../models/select-opened-state.model';
 import * as i0 from "@angular/core";
 /**
@@ -17,6 +18,7 @@ import * as i0 from "@angular/core";
  */
 export declare class SelectComponent implements OnInit, AfterViewInit, OnDestroy {
     private formUtilityService;
+    private formOverlayBounds;
     private elementRef;
     formFields: QueryList<SearchComponent>;
     group: FormGroup;
@@ -30,7 +32,10 @@ export declare class SelectComponent implements OnInit, AfterViewInit, OnDestroy
     private _isSortNeeded;
     private unsortedDropdownOptions;
     private formOverlayScrollContainer?;
+    private isTopSelectPanelPinned;
+    private pinnedPanelMaxHeight;
     private readonly overlayWheelListener;
+    private readonly repositionPinnedPanel;
     /**
      * Takes isSortNeeded as input to check if the passed options are sorted or not.
      * @memberof SelectComponent
@@ -60,7 +65,7 @@ export declare class SelectComponent implements OnInit, AfterViewInit, OnDestroy
     optionSelected: EventEmitter<SelectOption>;
     optionSearched: EventEmitter<string>;
     dropdownOpenedChange: EventEmitter<SelectOpenedState>;
-    constructor(formUtilityService: FormUtilityService, elementRef: ElementRef<HTMLElement>);
+    constructor(formUtilityService: FormUtilityService, formOverlayBounds: FormOverlayBoundsService, elementRef: ElementRef<HTMLElement>);
     /**
      * Initializes components instance properties from config if its defined otherwise creates form group and config.
      * @memberof SelectComponent
@@ -87,7 +92,21 @@ export declare class SelectComponent implements OnInit, AfterViewInit, OnDestroy
     private setOverlayClipBounds;
     private getFormOverlayScrollContainer;
     private clearOverlayClipBounds;
+    /**
+     * Material flips the panel above its field when it will not fit below. Inside a
+     * form that pushes the panel over the form's heading and pinned tab strip, so
+     * when the field is near the top of the usable band the panel is forced back
+     * below the field and capped to the space left inside the band.
+     * @memberof SelectComponent
+     */
     private keepTopSelectPanelInsideFormBody;
+    /**
+     * Positions the pinned panel just below its field, recomputed from the current
+     * trigger and band so it tracks the field as the page/form scrolls instead of
+     * staying at a stale fixed offset.
+     * @memberof SelectComponent
+     */
+    private pinTopSelectPanel;
     /**
      * Takes the index and the current option as arguments and needs to return the unique identifier for this option.
      * @param {number} index

package/lib/components/time-picker/time-picker.component.d.ts

@@ -2,8 +2,10 @@ import { ElementRef, EventEmitter, OnDestroy } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { FieldConfig } from '../../models/field-config.model';
 import { SelectedTime } from '../../models/selected-time.model';
+import { FormOverlayBoundsService } from '../../services/form-overlay-bounds.service';
 import * as i0 from "@angular/core";
 export declare class TimePickerComponent implements OnDestroy {
+    private formOverlayBounds;
     private elementRef;
     config: FieldConfig;
     group: FormGroup;
@@ -12,7 +14,7 @@ export declare class TimePickerComponent implements OnDestroy {
     picker: ElementRef;
     private formOverlayScrollContainer?;
     private readonly overlayWheelListener;
-    constructor(elementRef: ElementRef<HTMLElement>);
+    constructor(formOverlayBounds: FormOverlayBoundsService, elementRef: ElementRef<HTMLElement>);
     /**
      * Handles form time selection event
      * @type {void}

package/lib/services/form-overlay-bounds.service.d.ts

@@ -0,0 +1,85 @@
+import * as i0 from "@angular/core";
+/**
+ * Keeps a field overlay — a select panel, autocomplete list, date picker or time
+ * picker — inside the bounds of the form it belongs to.
+ *
+ * Without this, the CDK positions these panels against the viewport, so a panel
+ * that cannot fit below its field flips upward and is drawn over the form's
+ * heading and pinned tab strip, visually escaping the form.
+ *
+ * Containment is expressed as a clip band published on the document element and
+ * consumed by each overlay's stylesheet:
+ *   --ieeesa-form-overlay-clip-top     distance from the viewport top to the band
+ *   --ieeesa-form-overlay-clip-bottom  distance from the band to the viewport bottom
+ * plus an `ieeesa-form-overlay-open` class that activates those rules.
+ *
+ * The band is the form's field area intersected with the space the form's own
+ * pinned chrome leaves free, so a panel never covers the tab strip / step header
+ * above it or the action bar below it. It is recalculated on scroll and resize:
+ * the form scrolls with the page, so a band measured only when the panel opened
+ * would drift and clip the panel away as the user scrolled.
+ * @export
+ * @class FormOverlayBoundsService
+ */
+export declare class FormOverlayBoundsService {
+    private static readonly OPEN_CLASS;
+    private static readonly CLIP_TOP_PROPERTY;
+    private static readonly CLIP_BOTTOM_PROPERTY;
+    /** Field areas an overlay can be contained within, most specific first. */
+    private static readonly FIELD_AREA_SELECTORS;
+    /** Chrome pinned above the field area, which a panel must not cover. */
+    private static readonly PINNED_ABOVE_SELECTORS;
+    /** Chrome pinned below the field area, which a panel must not cover. */
+    private static readonly PINNED_BELOW_SELECTORS;
+    private fieldArea?;
+    private updateBand?;
+    /**
+     * Returns the form field area the given host element sits in, or null when the
+     * host is not inside a form (a filter popover, a dialog) and so needs no
+     * containment.
+     * @param {HTMLElement} host
+     * @return {(HTMLElement | null)}
+     * @memberof FormOverlayBoundsService
+     */
+    getFieldArea(host: HTMLElement): HTMLElement | null;
+    /**
+     * Starts containing overlays to the form the host element belongs to, and keeps
+     * the band current until `release` is called.
+     * @param {HTMLElement} host
+     * @return {(HTMLElement | null)} the field area, or null when not in a form
+     * @memberof FormOverlayBoundsService
+     */
+    contain(host: HTMLElement): HTMLElement | null;
+    /**
+     * Returns the band an overlay is currently confined to, in viewport
+     * coordinates. Callers use it to position a panel inside the form.
+     * @return {({ top: number; bottom: number } | null)}
+     * @memberof FormOverlayBoundsService
+     */
+    getBand(): {
+        top: number;
+        bottom: number;
+    } | null;
+    /**
+     * Stops containing overlays and removes the published band, so unrelated
+     * overlays are positioned normally.
+     * @memberof FormOverlayBoundsService
+     */
+    release(): void;
+    /**
+     * Measures the usable band: the field area, trimmed by any of the form's own
+     * chrome that is currently pinned over it.
+     * @param {HTMLElement} fieldArea
+     * @return {{ top: number; bottom: number }}
+     * @memberof FormOverlayBoundsService
+     */
+    private measureBand;
+    /**
+     * Publishes the band as clip custom properties for the overlay stylesheets.
+     * @param {HTMLElement} fieldArea
+     * @memberof FormOverlayBoundsService
+     */
+    private publishBand;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormOverlayBoundsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<FormOverlayBoundsService>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ieeesa-npm/presentation",
-  "version": "0.33.19",
+  "version": "0.33.20",
   "peerDependencies": {
     "@angular/common": "^16.1.0",
     "@angular/core": "^16.1.0",

package/public-api.d.ts

@@ -111,6 +111,7 @@ export * from './lib/models/home-group-selection.model';
 export * from './lib/models/credit-selection.model';
 export * from './lib/services/datepicker.service';
 export * from './lib/services/form-utility.service';
+export * from './lib/services/form-overlay-bounds.service';
 export * from './lib/services/file-upload.service';
 export * from './lib/services/break-point-observer.service';
 export * from './lib/pipes/safe.pipe';

package/src/lib/assets/constants.json

@@ -635,5 +635,5 @@
       }
     }
   },
-  "breakPointMaxWidth": "767px"
+  "breakPointMaxWidth": "900px"
 }