@brickclay-org/ui 0.1.22 → 0.1.23

package/index.d.ts

@@ -790,7 +790,7 @@ declare class BkSelect implements ControlValueAccessor {
     disabled: i0.ModelSignal<boolean>;
     loading: i0.InputSignal<boolean>;
     closeOnSelect: i0.InputSignal<boolean>;
-    dropdownPosition: i0.InputSignal<"top" | "bottom">;
+    dropdownPosition: i0.InputSignal<"bottom" | "top">;
     hasError: boolean;
     errorMessage: string;
     appendToBody: i0.InputSignal<boolean>;
@@ -1824,6 +1824,8 @@ declare class BkHierarchicalSelect implements ControlValueAccessor {
     searchable: i0.InputSignal<boolean>;
     /** 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">;
     /** 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. */
@@ -1870,9 +1872,9 @@ declare class BkHierarchicalSelect implements ControlValueAccessor {
     toggleDropdown(event?: Event): void;
     openDropdown(): void;
     updatePosition(): void;
-    getDropdownTop(): string | null;
-    getDropdownLeft(): string | null;
-    getDropdownWidth(): string | null;
+    /** Fixed positioning when appendToBody; inset placement uses CSS + .hierarchical-select-field. */
+    getTop(): string | null;
+    getBottom(): string | null;
     onWindowScrollOrResize(): void;
     closeDropdown(): void;
     goBack(): void;
@@ -1890,7 +1892,7 @@ declare class BkHierarchicalSelect implements ControlValueAccessor {
     private findNodeByValue;
     handleClear(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BkHierarchicalSelect, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BkHierarchicalSelect, "bk-hierarchical-select", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "valueKey": { "alias": "valueKey"; "required": false; "isSignal": true; }; "childrenKey": { "alias": "childrenKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "iconSrc": { "alias": "iconSrc"; "required": false; "isSignal": true; }; "iconAlt": { "alias": "iconAlt"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "allowParentSelection": { "alias": "allowParentSelection"; "required": false; "isSignal": true; }; "backToMainText": { "alias": "backToMainText"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "appendToBody": { "alias": "appendToBody"; "required": false; "isSignal": true; }; "colorKey": { "alias": "colorKey"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "valueChange": "valueChange"; "clear": "clear"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkHierarchicalSelect, "bk-hierarchical-select", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "valueKey": { "alias": "valueKey"; "required": false; "isSignal": true; }; "childrenKey": { "alias": "childrenKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "iconSrc": { "alias": "iconSrc"; "required": false; "isSignal": true; }; "iconAlt": { "alias": "iconAlt"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "allowParentSelection": { "alias": "allowParentSelection"; "required": false; "isSignal": true; }; "backToMainText": { "alias": "backToMainText"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "appendToBody": { "alias": "appendToBody"; "required": false; "isSignal": true; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; "isSignal": true; }; "colorKey": { "alias": "colorKey"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "valueChange": "valueChange"; "clear": "clear"; }, never, never, true, never>;
 }
 
 type ToastSeverity = 'success' | 'error' | 'warn' | 'info' | 'default';

package/package.json

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

package/src/lib/hierarchical-select/hierarchical-select.css

@@ -2,6 +2,11 @@
   @apply relative w-full box-border;
 }
 
+/* Positioning context for the dropdown: trigger height only (not label), so top/bottom + % work. */
+.hierarchical-select-field {
+  @apply relative w-full;
+}
+
 .hierarchical-select-control {
   @apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 px-3 py-2.5 cursor-pointer;
 }
@@ -43,7 +48,18 @@
 }
 
 .hierarchical-dropdown-panel {
-  @apply absolute left-0 top-[calc(100%+4px)] w-full min-w-[250px] max-w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;
+  @apply absolute left-0 w-full min-w-[250px] max-w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;
+}
+
+/* Inset dropdown: anchor to .hierarchical-select-field (trigger), not the outer container + label. */
+.hierarchical-dropdown-panel[data-position='bottom'] {
+  top: calc(100% + 4px);
+  bottom: auto;
+}
+
+.hierarchical-dropdown-panel[data-position='top'] {
+  bottom: calc(100% + 4px);
+  top: auto;
 }
 
 .hierarchical-dropdown-panel-fixed {