@brickclay-org/ui 0.1.39 → 0.1.40

package/index.d.ts

@@ -859,7 +859,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>;
@@ -1909,7 +1909,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<"top" | "bottom">;
+    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. */

package/package.json

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

package/src/lib/column-select/components/column-select/column-select.css

@@ -1,3 +1,27 @@
 .column-select-option-empty {
      @apply px-3 py-2 text-gray-400 cursor-default text-sm;
 }
+
+.column-select-options-list {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+@media (max-height: 700px) {
+  .column-select-options-list {
+    max-height: 160px;
+  }
+}
+
+@media (min-height: 701px) and (max-height: 900px) {
+  .column-select-options-list {
+    max-height: 200px;
+  }
+}
+
+@media (min-height: 901px) {
+  .column-select-options-list {
+    max-height: 240px;
+  }
+}

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

@@ -83,7 +83,25 @@
 }
 
 .hierarchical-options-list {
-  @apply max-h-60 overflow-auto relative flex flex-col gap-0.5 mt-1;
+  @apply overflow-auto relative flex flex-col gap-0.5 mt-1;
+}
+
+@media (max-height: 700px) {
+  .hierarchical-options-list {
+    max-height: 124px;
+  }
+}
+
+@media (min-height: 701px) and (max-height: 900px) {
+  .hierarchical-options-list {
+    max-height: 164px;
+  }
+}
+
+@media (min-height: 901px) {
+  .hierarchical-options-list {
+    max-height: 204px;
+  }
 }
 
 .hierarchical-option {
@@ -139,6 +157,14 @@
   background: #909090;
 }
 
+.hierarchical-breadcrumb-node {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .breadcrumb-separator {
   margin: 0 6px;
   flex-shrink: 0;

package/src/lib/select/select.css

@@ -7,10 +7,10 @@
 /* Control */
 .bk-select-control {
   @apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 cursor-pointer focus:border-transparent
-  focus-visible:!outline-[0.5px] focus-visible:!outline-[#6B7080]
+  focus-visible:!outline-[0.5px] focus-visible:!outline-[#6B7080] 
   ;
   box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
-
+  
   &:focus-visible{
     outline-style: solid !important
   }
@@ -125,29 +125,24 @@
   @apply overflow-y-auto overflow-x-hidden relative flex flex-col gap-0.5;
 }
 
-/* Medium screens (tablets) */
-/* Small screens */
 @media (max-height: 700px) {
   .bk-options-list {
-    max-height: 175px;
+    max-height: 160px;
   }
 }
 
-/* Medium screens */
 @media (min-height: 701px) and (max-height: 900px) {
   .bk-options-list {
-    max-height: 210px;
+    max-height: 200px;
   }
 }
 
-/* Extra large screens */
 @media (min-height: 901px) {
   .bk-options-list {
-    max-height: 240px; /* adjust as needed */
+    max-height: 240px;
   }
 }
 
-
 /* Options */
 .bk-option {
   @apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] min-w-0;