npm - @brickclay-org/ui - Versions diffs - 0.1.70 → 0.1.72 - Mend

@brickclay-org/ui 0.1.70 → 0.1.72

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/fesm2022/brickclay-org-ui.mjs +991 -174
package/fesm2022/brickclay-org-ui.mjs.map +1 -1
package/index.d.ts +278 -24
package/package.json +1 -1
package/src/assets/icons/alert-circle-red.svg +12 -0
package/src/lib/menu/menu.css +255 -0
package/src/lib/tabs/tabs.css +22 -1

package/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnInit, OnDestroy, OnChanges, EventEmitter, ElementRef, SimpleChanges, AfterViewInit, QueryList, ComponentRef, Type, InjectionToken, Renderer2, ApplicationRef, EnvironmentInjector, ChangeDetectorRef } from '@angular/core';
+import { OnInit, OnDestroy, OnChanges, EventEmitter, ElementRef, Renderer2, SimpleChanges, AfterViewInit, QueryList, ComponentRef, Type, InjectionToken, ApplicationRef, EnvironmentInjector, ChangeDetectorRef } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors, NgControl, NgModel } from '@angular/forms';
 import * as rxjs from 'rxjs';
 import { Observable } from 'rxjs';
@@ -76,6 +76,7 @@ declare class CalendarSelection {
 }
 declare class BkCustomCalendar implements OnInit, OnDestroy, OnChanges, ControlValueAccessor, Validator {
     private calendarManager;
+    private renderer;
     enableTimepicker: boolean;
     autoApply: boolean;
     closeOnAutoApply: boolean;
@@ -205,7 +206,25 @@ declare class BkCustomCalendar implements OnInit, OnDestroy, OnChanges, ControlV
     private unregisterFn?;
     private closeAllSubscription?;
     private closeFn?;
-    constructor(calendarManager: BkCalendarManagerService);
+    constructor(calendarManager: BkCalendarManagerService, renderer: Renderer2);
+    /**
+     * appendToBody popup relocation.
+     *
+     * `appendToBody` uses `position: fixed`, which only anchors to the viewport when NO ancestor
+     * establishes a containing block (transform / filter / perspective / will-change / contain /
+     * backdrop-filter). Consumers frequently place the calendar inside such an ancestor (an animated
+     * panel, a CSS-transformed modal, etc.), which silently re-anchors the fixed popup and pushes it
+     * off-position. To be robust everywhere we physically move the popup node to <body> while it is
+     * open, then move it back before Angular's *ngIf tears it down. Angular keeps managing the node by
+     * reference after the move, so its event bindings, change detection, and emulated-encapsulation
+     * styles all continue to work.
+     */
+    private popupMovedToBody;
+    private popupOriginalParent;
+    private popupOriginalNextSibling;
+    private movePopupToBody;
+    /** Return the popup to its original DOM slot so *ngIf can destroy it cleanly (safe to call twice). */
+    private restorePopupFromBody;
     /** Weekday headers; falls back to Mon–Sun if the input is not length 7. */
     get resolvedWeekDayLabels(): string[];
     /** When dual range mode, Apply is blocked until both endpoints exist. */
@@ -239,7 +258,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 +289,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 +474,8 @@ 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 {
+    private renderer;
     required: boolean;
     /** @deprecated Prefer [(ngModel)] */
     value: string | null;
@@ -435,6 +488,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 +500,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";
@@ -463,6 +536,21 @@ declare class BkTimePicker implements OnInit, OnChanges, AfterViewInit, ControlV
         readonly calenderIcon: "assets/icons/custom-calender.svg";
         readonly timerIcon: "assets/icons/timer.svg";
     };
+    constructor(renderer: Renderer2);
+    /**
+     * `appendToBody` anchors the dropdown with `position: fixed`, which only tracks the viewport when
+     * NO ancestor establishes a containing block (transform / filter / perspective / will-change /
+     * contain / backdrop-filter). Inside such an ancestor the fixed coordinates resolve against that
+     * ancestor instead and the dropdown drifts off-position. To be robust we physically move the panel
+     * to <body> while open (Angular keeps managing it by reference) and move it back before *ngIf
+     * tears it down. The panel carries a `tp-compact` self-class so its `default`-variation sizing —
+     * otherwise scoped under the `.time-input-group.default` ancestor it just left — still applies.
+     */
+    private dropdownMovedToBody;
+    private dropdownOriginalParent;
+    private moveDropdownToBody;
+    /** Return the dropdown to its original slot so *ngIf can destroy it cleanly (safe to call twice). */
+    private restoreDropdownFromBody;
     writeValue(value: string | null): void;
     registerOnChange(fn: (value: string | null) => void): void;
     registerOnTouched(fn: () => void): void;
@@ -484,22 +572,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>;
 }
 /**
@@ -885,6 +996,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 +1006,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 +1023,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 +1060,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;
@@ -1130,6 +1270,18 @@ interface TabItem {
     iconTooltip?: string | string[];
     iconTooltipDirection?: 'left' | 'right' | 'top' | 'bottom';
     error?: boolean;
+    /**
+     * When the tab is in an error state, render an error icon (on the side given
+     * by `direction`) with `iconTooltip` shown on hover of the icon.
+     * When false/omitted, no error icon is drawn and `iconTooltip` falls back to
+     * the tab button itself. Works for both variants and orientations.
+     */
+    showErrorIcon?: boolean;
+    /**
+     * Optional custom error icon URL. If omitted while `showErrorIcon` is true,
+     * the component's default error icon is used.
+     */
+    errorIcon?: string;
 }
 declare class BkTabs {
     list: TabItem[];
@@ -1138,16 +1290,26 @@ declare class BkTabs {
     orientation: TabsOrientation;
     variant: TabsVariant;
     colors: TabsColors;
+    /**
+     * When true, if the currently active tab is in an error state, navigation to
+     * the other tabs is blocked (they render disabled) until the error clears.
+     * Optional — defaults to false, so navigation stays free unless opted in.
+     */
+    lockNavigationOnError: boolean;
+    /** Fallback error icon used when a tab has `showErrorIcon` but no `errorIcon`. */
+    private readonly defaultErrorIcon;
     get isVertical(): boolean;
     get isSegmented(): boolean;
     get wrapperClass(): string;
     segmentedTabClass(tab: TabItem): string;
     change: EventEmitter<TabItem>;
+    get activeTabHasError(): boolean;
+    isLocked(tab: TabItem): boolean;
     setActiveTab(tab: TabItem): void;
     isActive(tabId: string): boolean;
     getTabIcon(tab: TabItem): string | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<BkTabs, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BkTabs, "bk-tabs", never, { "list": { "alias": "list"; "required": false; }; "activeTabId": { "alias": "activeTabId"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "colors": { "alias": "colors"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkTabs, "bk-tabs", never, { "list": { "alias": "list"; "required": false; }; "activeTabId": { "alias": "activeTabId"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "colors": { "alias": "colors"; "required": false; }; "lockNavigationOnError": { "alias": "lockNavigationOnError"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
 }
 /**
@@ -1929,7 +2091,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'). */
@@ -1979,8 +2141,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 +2196,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;
@@ -2383,5 +2572,70 @@ declare class BkDropdown {
     static ɵcmp: i0.ɵɵComponentDeclaration<BkDropdown, "bk-dropdown", never, { "label": { "alias": "label"; "required": false; }; "items": { "alias": "items"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "trigger": { "alias": "trigger"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "arrow": { "alias": "arrow"; "required": false; }; "splitButton": { "alias": "splitButton"; "required": false; }; "selectedId": { "alias": "selectedId"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "iconSrc": { "alias": "iconSrc"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; }, { "select": "select"; "openChange": "openChange"; "buttonClick": "buttonClick"; }, never, never, true, never>;
 }
-export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkPagination, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
-export type { AvatarFallback, AvatarSize, AvatarVariant, BadgeColor, BadgeSize, BadgeVariant, BkAnimationKeyframes, BkAvatarFallback, BkAvatarSize, BkDialogAnimation, BkDialogConfig, BkDialogPosition, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputType, BkLoaderVariant, BkPageSize, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, ButtonSize, ButtonVariant, CalendarRange, CountryOption, CustomRangesConfig, DotPosition, DotStatus, DropdownItem, DropdownPlacement, DropdownSize, DropdownTrigger, DropdownVariant, FileState, GroupItem, GroupMode, HierarchicalNode, IconButtonSize, IconButtonVariant, IconOrientation, PillColor, PillSize, PillVariant, ScheduledDateSelection, SortDirection, SpinnerSize, TabIconDirection, TabItem, TableAction, TableBadge, TableColumn, TableIcon, TabsColors, TabsOrientation, TabsVariant, TimeConfiguration, ToastConfig, ToastMessage, ToastMethodOptions, ToastPosition, ToastSeverity };
+type MenuOrientation = 'horizontal' | 'vertical';
+type MenuSubmenuMode = 'inline' | 'popup';
+interface MenuItem {
+    /** Unique id — matched against `activeItemId`. */
+    id: string;
+    /** Visible menu text. */
+    label: string;
+    /** Optional icon URL (tinted to the theme unless `tintIcons` is false). */
+    icon?: string;
+    /** Alt text for the icon; defaults to `label`. */
+    iconAlt?: string;
+    /** Disables just this item (and blocks opening its submenu). */
+    disabled?: boolean;
+    /** Nested items — presence of children turns this into an expandable node. */
+    children?: MenuItem[];
+}
+/**
+ * A simple, responsive navigation menu. Styled to match the default `bk-tabs`
+ * theme (dark active pill, light hover).
+ *
+ * - Orientation: `vertical` (stacked) / `horizontal` (menubar row).
+ * - Items with `children` are expandable, shown with a chevron that rotates
+ *   open/closed.
+ * - Submenus render inline (accordion) or as pop-ups. Pop-ups adapt to the
+ *   orientation: they drop *below* a horizontal top-level item and fly out to
+ *   the *right* for vertical menus / deeper levels.
+ */
+declare class BkMenu {
+    private readonly host;
+    items: MenuItem[];
+    orientation: MenuOrientation;
+    submenuMode: MenuSubmenuMode;
+    /**
+     * Keep only one submenu open per level: opening a parent collapses its
+     * siblings (and their descendants) so the menu stays compact. Pop-up mode
+     * always behaves this way; this input adds it to inline (accordion) mode.
+     */
+    singleOpen: boolean;
+    /** Id of the currently selected leaf item. Two-way bindable. */
+    activeItemId: string;
+    /** Tint item icons: dark by default, white on the active (dark) row. */
+    tintIcons: boolean;
+    activeItemIdChange: EventEmitter<string>;
+    itemClick: EventEmitter<MenuItem>;
+    /** Ids of currently expanded/opened parent nodes. */
+    private readonly openIds;
+    constructor(host: ElementRef<HTMLElement>);
+    get isVertical(): boolean;
+    get isPopup(): boolean;
+    hasChildren(item: MenuItem): boolean;
+    isOpen(item: MenuItem): boolean;
+    isActive(item: MenuItem): boolean;
+    isActiveAncestor(item: MenuItem): boolean;
+    isHighlighted(item: MenuItem): boolean;
+    inlineIndent(level: number): number | null;
+    onItemClick(item: MenuItem, siblings: MenuItem[], event: Event): void;
+    onItemEnter(item: MenuItem, siblings: MenuItem[]): void;
+    onItemLeave(item: MenuItem): void;
+    private toggle;
+    private closeBranch;
+    onDocumentClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BkMenu, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkMenu, "bk-menu", never, { "items": { "alias": "items"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "submenuMode": { "alias": "submenuMode"; "required": false; }; "singleOpen": { "alias": "singleOpen"; "required": false; }; "activeItemId": { "alias": "activeItemId"; "required": false; }; "tintIcons": { "alias": "tintIcons"; "required": false; }; }, { "activeItemIdChange": "activeItemIdChange"; "itemClick": "itemClick"; }, never, never, true, never>;
+}
+export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkMenu, BkPagination, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
+export type { AvatarFallback, AvatarSize, AvatarVariant, BadgeColor, BadgeSize, BadgeVariant, BkAnimationKeyframes, BkAvatarFallback, BkAvatarSize, BkDialogAnimation, BkDialogConfig, BkDialogPosition, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputType, BkLoaderVariant, BkPageSize, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, ButtonSize, ButtonVariant, CalendarRange, CountryOption, CustomRangesConfig, DotPosition, DotStatus, DropdownItem, DropdownPlacement, DropdownSize, DropdownTrigger, DropdownVariant, FileState, GroupItem, GroupMode, HierarchicalNode, IconButtonSize, IconButtonVariant, IconOrientation, MenuItem, MenuOrientation, MenuSubmenuMode, PillColor, PillSize, PillVariant, ScheduledDateSelection, SortDirection, SpinnerSize, TabIconDirection, TabItem, TableAction, TableBadge, TableColumn, TableIcon, TabsColors, TabsOrientation, TabsVariant, TimeConfiguration, ToastConfig, ToastMessage, ToastMethodOptions, ToastPosition, ToastSeverity };

package/package.json CHANGED Viewed

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

package/src/assets/icons/alert-circle-red.svg ADDED Viewed

@@ -0,0 +1,12 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.57007" y="3.56995" width="40" height="40" rx="20" fill="#FEE2E2"/>
+<rect x="3.57007" y="3.56995" width="40" height="40" rx="20" stroke="#FEE2E2" stroke-width="7.14"/>
+<g clip-path="url(#clip0_1_149094)">
+<path d="M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z" stroke="#EF4444" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1_149094">
+<rect width="20" height="20" fill="white" transform="translate(13.5701 13.5699)"/>
+</clipPath>
+</defs>
+</svg>