@brickclay-org/ui 0.1.69 → 0.1.71

package/index.d.ts

@@ -239,7 +239,28 @@ declare class BkCustomCalendar implements OnInit, OnDestroy, OnChanges, ControlV
     /** Format to "H:MM AM/PM" string. */
     private formatTimeToAmPm;
     onClickOutside(event: MouseEvent): void;
-    onWindowEvents(): void;
+    /** True while capture-phase scroll + resize listeners are attached (only while the popup is open). */
+    private viewportListenersAttached;
+    /** Pending rAF id so bursts of scroll events collapse into one layout pass. */
+    private viewportRafId;
+    /**
+     * Recipe steps 2 & 4: while the popup is open, keep it glued to the trigger as the page
+     * (or any nested scroll container) scrolls, and dismiss it once the trigger leaves the viewport.
+     * Throttled through requestAnimationFrame to avoid layout thrash during fast scrolling.
+     */
+    private readonly onViewportChange;
+    private handleViewportChange;
+    /**
+     * Trigger is no longer visible and the fixed popup should be dismissed. True when the trigger is
+     * either entirely outside the viewport, or clipped out of ANY ancestor scroll container — e.g.
+     * scrolled behind the header/footer of a modal body. This makes step 4 work both on the plain
+     * page and inside a dialog when `appendToBody` positions the popup with `fixed`.
+     */
+    private isTriggerOutOfView;
+    /** An ancestor that clips overflowing content on an axis where its content actually overflows. */
+    private isScrollClippingContainer;
+    private attachViewportListeners;
+    private detachViewportListeners;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     private regenerateCalendarsForWeekStart;
@@ -249,6 +270,18 @@ declare class BkCustomCalendar implements OnInit, OnDestroy, OnChanges, ControlV
     toggle(): void;
     /** Update popup position when appendToBody is true (fixed positioning relative to viewport). */
     updatePosition(): void;
+    /**
+     * Horizontal placement for the fixed (appendToBody) popup.
+     *
+     * The base edge follows the author's {@link opens} preference:
+     *   • 'left'   → align left edges, panel opens rightwards (default)
+     *   • 'right'  → align right edges, panel opens leftwards
+     *   • 'center' → centred on the trigger
+     * When {@link autoPosition} is on, the panel auto-flips to the opposite edge if the preferred
+     * side would overflow the viewport, then clamps to an 8px margin so it can never leave the screen.
+     * When autoPosition is off, the explicit `opens` value is honoured as-is.
+     */
+    private computePopupLeft;
     /** Non–append-to-body: set `popupPlacementAbove` for CSS `drop-up` with viewport flip. */
     refreshPopupPlacement(): void;
     private computePlacementAbove;
@@ -422,7 +455,7 @@ declare class BkScheduledDatePicker implements OnInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<BkScheduledDatePicker, "bk-scheduled-date-picker", never, { "timeFormat": { "alias": "timeFormat"; "required": false; }; "enableSeconds": { "alias": "enableSeconds"; "required": false; }; }, { "scheduled": "scheduled"; "cleared": "cleared"; }, never, never, true, never>;
 }
 
-declare class BkTimePicker implements OnInit, OnChanges, AfterViewInit, ControlValueAccessor {
+declare class BkTimePicker implements OnInit, OnChanges, OnDestroy, AfterViewInit, ControlValueAccessor {
     required: boolean;
     /** @deprecated Prefer [(ngModel)] */
     value: string | null;
@@ -435,6 +468,11 @@ declare class BkTimePicker implements OnInit, OnChanges, AfterViewInit, ControlV
     closePicker: number;
     timeFormat: 12 | 24;
     showSeconds: boolean;
+    /** When true, auto-flip the dropdown above/below and left/right based on available viewport space. */
+    autoPosition: boolean;
+    /** When true, position the dropdown with `fixed` so it escapes ancestor overflow (dialogs, scroll containers),
+     *  follows the trigger on scroll, and closes when the trigger is scrolled out of view. */
+    appendToBody: boolean;
     change: EventEmitter<string | null>;
     timeChange: EventEmitter<string | null>;
     pickerOpened: EventEmitter<string>;
@@ -442,20 +480,35 @@ declare class BkTimePicker implements OnInit, OnChanges, AfterViewInit, ControlV
     private onChange;
     private onTouched;
     disabled: boolean;
-    timeScrollElements: QueryList<ElementRef>;
-    minuteScrollElements: QueryList<ElementRef>;
-    secondScrollElements: QueryList<ElementRef>;
-    private readonly WHEEL_CYCLE;
+    hourScrollEl?: ElementRef<HTMLElement>;
+    minuteScrollEl?: ElementRef<HTMLElement>;
+    secondScrollEl?: ElementRef<HTMLElement>;
+    /** The positioned trigger (its rect anchors the dropdown). */
+    tpWrapper?: ElementRef<HTMLElement>;
+    /** The dropdown panel element (measured for flip decisions). */
+    tpDropdown?: ElementRef<HTMLElement>;
+    /** Resolved placement state, driven by updatePosition(). */
+    placeAbove: boolean;
+    resolvedPosition: 'left' | 'right';
+    dropdownStyle: Record<string, string>;
     /** Row height in px. MUST match the .time-item height in CSS for the active variation. */
     private get ITEM_HEIGHT();
-    private get MIDDLE_OFFSET();
-    wheelMinutes: number[];
-    wheelSeconds: number[];
+    /** Finite lists (no cyclic loop) — same as the hours column, so 00..59 has a hard start/end. */
+    minutes: number[];
+    seconds: number[];
     showPicker: boolean;
     currentHour: number;
     currentMinute: number;
     currentSecond: number;
     currentAMPM: string;
+    /**
+     * Highlight that follows a column while scrolling. It is purely visual: scrolling moves it
+     * but does NOT commit the value. The value is only selected/committed when the user clicks
+     * an item (see onHourChange / onMinuteChange / onSecondChange).
+     */
+    activeHour: number;
+    activeMinute: number;
+    activeSecond: number;
     private _modelValue;
     brickclayIcons: {
         readonly arrowleft: "assets/icons/chevron-left.svg";
@@ -484,22 +537,45 @@ declare class BkTimePicker implements OnInit, OnChanges, AfterViewInit, ControlV
     };
     formatTimeFromComponents(hour: number, minute: number, second: number, ampm: string): string;
     togglePicker(): void;
+    /** Central close path so listeners are always detached and events emitted once. */
+    private dismiss;
     onHourChange(hour: number): void;
     onMinuteChange(minute: number): void;
     onSecondChange(second: number): void;
     onAMPMChange(ampm: string): void;
     updateTime(): void;
+    /** Position each column so the committed value sits at the top of its viewport. */
     scrollToSelectedTimes(): void;
-    private initMinuteWheelScroll;
-    private initSecondWheelScroll;
+    private scrollColumnTo;
+    /** Item nearest the viewport center for the current scroll position, clamped to [0, count - 1]. */
+    private scrollIndex;
     onDocumentClick(event: MouseEvent): void;
     private previousCloseCounter;
     getHours(): number[];
     getAMPMOptions(): string[];
-    onMinuteWheelScroll(): void;
-    onSecondWheelScroll(): void;
+    onHourScroll(): void;
+    onMinuteScroll(): void;
+    onSecondScroll(): void;
+    /**
+     * Resolve the dropdown placement against the current viewport.
+     * - autoPosition: flip above when there isn't room below, and flip the horizontal
+     *   side when the preferred side would overflow.
+     * - appendToBody: additionally anchor with `position: fixed` (inline style) so the
+     *   dropdown escapes ancestor overflow and follows the trigger on scroll.
+     */
+    private updatePosition;
+    private viewportListenersAttached;
+    private viewportRafId;
+    private readonly onViewportChange;
+    private handleViewportChange;
+    /** True when the trigger has scrolled out of the viewport or out of any clipping ancestor. */
+    private isTriggerOutOfView;
+    private isScrollClippingContainer;
+    private attachViewportListeners;
+    private detachViewportListeners;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BkTimePicker, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BkTimePicker, "bk-time-picker", never, { "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "position": { "alias": "position"; "required": false; }; "variation": { "alias": "variation"; "required": false; }; "pickerId": { "alias": "pickerId"; "required": false; }; "closePicker": { "alias": "closePicker"; "required": false; }; "timeFormat": { "alias": "timeFormat"; "required": false; }; "showSeconds": { "alias": "showSeconds"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; "timeChange": "timeChange"; "pickerOpened": "pickerOpened"; "pickerClosed": "pickerClosed"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkTimePicker, "bk-time-picker", never, { "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "position": { "alias": "position"; "required": false; }; "variation": { "alias": "variation"; "required": false; }; "pickerId": { "alias": "pickerId"; "required": false; }; "closePicker": { "alias": "closePicker"; "required": false; }; "timeFormat": { "alias": "timeFormat"; "required": false; }; "showSeconds": { "alias": "showSeconds"; "required": false; }; "autoPosition": { "alias": "autoPosition"; "required": false; }; "appendToBody": { "alias": "appendToBody"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; "timeChange": "timeChange"; "pickerOpened": "pickerOpened"; "pickerClosed": "pickerClosed"; }, never, never, true, never>;
 }
 
 /**
@@ -866,7 +942,7 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     disabled: i0.ModelSignal<boolean>;
     loading: i0.InputSignal<boolean>;
     closeOnSelect: i0.InputSignal<boolean>;
-    dropdownPosition: i0.InputSignal<"bottom" | "top">;
+    dropdownPosition: i0.InputSignal<"top" | "bottom">;
     hasError: boolean;
     errorMessage: string;
     appendToBody: i0.InputSignal<boolean>;
@@ -885,6 +961,7 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     optionsListContainer: ElementRef<HTMLDivElement>;
     optionsRef: QueryList<ElementRef>;
     controlWrapper: ElementRef<HTMLDivElement>;
+    dropdownPanel?: ElementRef<HTMLDivElement>;
     chipsViewport?: ElementRef<HTMLDivElement>;
     measureChips?: QueryList<ElementRef<HTMLElement>>;
     measurePlus?: ElementRef<HTMLElement>;
@@ -894,6 +971,10 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     selectedOptions: i0.WritableSignal<any[]>;
     searchTerm: i0.WritableSignal<string>;
     markedIndex: i0.WritableSignal<number>;
+    placement: i0.WritableSignal<"top" | "bottom">;
+    private originalPanelParent;
+    private originalPanelAnchor;
+    private panelInBody;
     visibleCount: i0.WritableSignal<number>;
     private resizeObserver?;
     dropdownStyle: i0.WritableSignal<{
@@ -907,6 +988,25 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     constructor();
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    private reposition;
+    /**
+     * True when the control is fully outside the visible area — either the
+     * viewport or a scrollable/clipping ancestor (e.g. a dialog's scroll body).
+     * Used to close the floating (append-to-body) panel once its anchor is no
+     * longer on screen, instead of leaving it hanging.
+     */
+    private isControlClipped;
+    /**
+     * Relocate the panel node to <body> so it truly escapes any transformed or
+     * overflow-clipped ancestor (dialogs, drawers, cards with overflow, etc.).
+     * Setting position:fixed alone is not enough when an ancestor has a transform.
+     */
+    private movePanelToBody;
+    /**
+     * Return the panel to its original DOM position so Angular's @if can remove
+     * it cleanly on close. Must run before isOpen is set to false.
+     */
+    private restorePanel;
     private scheduleRecompute;
     /**
      * Measures the off-screen chip row and works out how many chips fit on a
@@ -925,8 +1025,13 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     closeDropdown(): void;
     getTop(): string | null;
     getBottom(): string | null;
-    updatePosition(): void;
-    onWindowEvents(): void;
+    /**
+     * Decides which side the panel should open on (auto-flip) and, for
+     * append-to-body mode, computes the fixed coordinates. Shared by both modes
+     * and re-run on open and on every scroll/resize so the panel snaps to
+     * whichever side has room — honouring `dropdownPosition` when it fits.
+     */
+    applyPlacement(): void;
     toggleSelectAll(event: Event): void;
     handleSelection(item: any, event?: Event): void;
     removeOption(item: any, event: Event): void;
@@ -1929,7 +2034,7 @@ interface HierarchicalNode {
     children?: HierarchicalNode[];
     disabled?: boolean;
 }
-declare class BkHierarchicalSelect implements ControlValueAccessor {
+declare class BkHierarchicalSelect implements ControlValueAccessor, AfterViewInit, OnDestroy {
     /** Tree data (root-level array). */
     items: i0.InputSignal<HierarchicalNode[]>;
     /** Key for display label (e.g. 'noteType'). */
@@ -1963,7 +2068,7 @@ declare class BkHierarchicalSelect implements ControlValueAccessor {
     /** When true, dropdown is positioned fixed and sized to the trigger (use inside modals/popups). */
     appendToBody: i0.InputSignal<boolean>;
     /** Open above or below the trigger (also used when appendToBody is true for fixed coordinates). */
-    dropdownPosition: i0.InputSignal<"bottom" | "top">;
+    dropdownPosition: i0.InputSignal<"top" | "bottom">;
     /** Key for option color (e.g. "color"). When set, option label and selected value use this color. */
     colorKey: i0.InputSignal<string>;
     /** Whether to show clear button when a value is selected. */
@@ -1979,8 +2084,30 @@ declare class BkHierarchicalSelect implements ControlValueAccessor {
     clear: i0.OutputEmitterRef<any>;
     searchInput: ElementRef<HTMLInputElement>;
     controlWrapper: ElementRef<HTMLDivElement>;
+    dropdownPanel?: ElementRef<HTMLDivElement>;
     private el;
+    placement: i0.WritableSignal<"top" | "bottom">;
+    private originalPanelParent;
+    private originalPanelAnchor;
+    private panelInBody;
     constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private reposition;
+    /**
+     * True when the control is fully outside the visible area — either the
+     * viewport or a scrollable/clipping ancestor (e.g. a dialog's scroll body).
+     */
+    private isControlClipped;
+    /**
+     * Relocate the panel node to <body> so it truly escapes any transformed or
+     * overflow-clipped ancestor (dialogs, drawers, overflow cards, etc.).
+     */
+    private movePanelToBody;
+    /** Return the panel to its original DOM position before Angular removes it. */
+    private restorePanel;
+    /** Runs after the panel has rendered: relocate (append mode) + position + focus. */
+    private afterOpenInit;
     isOpen: i0.WritableSignal<boolean>;
     dropdownStyle: i0.WritableSignal<{
         top?: string;
@@ -2012,11 +2139,16 @@ declare class BkHierarchicalSelect implements ControlValueAccessor {
     private buildPathTo;
     toggleDropdown(event?: Event): void;
     openDropdown(): void;
-    updatePosition(): void;
+    /**
+     * Decides which side the panel opens on (auto-flip) and, for append-to-body
+     * mode, computes the fixed coordinates. Re-run on open and on scroll/resize so
+     * the panel snaps to whichever side has room — honouring `dropdownPosition`
+     * when it fits. Inline mode is positioned by CSS via the `placement` signal.
+     */
+    applyPlacement(): void;
     /** Fixed positioning when appendToBody; inset placement uses CSS + .hierarchical-select-field. */
     getTop(): string | null;
     getBottom(): string | null;
-    onWindowScrollOrResize(): void;
     closeDropdown(): void;
     goBack(): void;
     onSearchInput(event: Event): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.1.69",
+  "version": "0.1.71",
   "schematics": "./schematics/collection.json",
   "ng-add": {
     "save": "dependencies"

package/src/lib/tabs/tabs.css

@@ -7,7 +7,7 @@
    Grid layout: columns flow horizontally and size to content
    (auto-cols-max), matching the old flex row while giving grid control. */
 .tabs-list {
-  @apply grid grid-flow-col auto-cols-max gap-0 list-none m-0 px-0 py-0.5;
+  @apply grid grid-flow-col auto-cols-max gap-[4px] list-none m-0 px-0 py-0.5;
 }
 
 /* Tab Item */
@@ -29,9 +29,14 @@
 }
 
 /* Tab Button - Hover State */
-/* .tabs-button:hover:not(:disabled):not(.tabs-button--active) {
-  @apply text-[#141414] bg-[#F9FAFA];
-} */
+.tabs-button:hover:not(:disabled):not(.tabs-button--active) {
+  @apply text-[#141414] bg-[#EDEEF0];
+}
+
+/* Vertical (default variant): 9px top/bottom padding on stacked tabs */
+.tabs-list--vertical .tabs-button {
+  @apply py-[9px];
+}
 
 /* Tab Button - Active State */
 .tabs-button--active {
@@ -71,22 +76,26 @@
   @apply whitespace-nowrap;
 }
 
-
 /* =========================================================
    Segmented variant (pill-in-a-track)
    Colors are driven by CSS vars set per-usage via [colors],
    falling back to the default design tokens.
    ========================================================= */
 
-/* Track / wrapper — default background; override via colors.wrapper (use ! classes). */
+/* Track / wrapper — default background; override via colors.wrapper (use ! classes).
+   overflow-x-auto lets the pill row scroll horizontally when there are more
+   tabs than fit, instead of squishing them until the labels overlap. */
 .tabs-container--segmented {
-  @apply p-[3px] rounded-md w-full md:w-auto;
+  @apply p-[3px] rounded-md w-full md:w-auto overflow-x-auto;
   background: #54578E12;
 }
 
-/* Pill row — equal-width columns (auto-cols-fr) replace the old flex-1. */
+/* Pill row — columns are minmax(max-content, 1fr): they share the track
+   equally while they fit (like the old auto-cols-fr), but never shrink below
+   their content, so a long list overflows the track and scrolls. */
 .tabs-list--segmented {
-  @apply grid grid-flow-col auto-cols-fr items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;
+  @apply grid grid-flow-col items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;
+  grid-auto-columns: minmax(max-content, 1fr);
   color: #6B7080;
 }
 
@@ -121,4 +130,6 @@
 /* Left-align pill content in the vertical segmented layout */
 .tabs-list--segmented-vertical .tabs-button--segmented {
   @apply justify-start text-left;
-}
+}
+
+/* Testing */