@brickclay-org/ui 0.1.39 → 0.1.41

package/package.json

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

package/src/assets/icons/custom-calender.svg

@@ -1,12 +1,12 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 1.5V3.75" stroke="black" stroke-width="1.25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 1.5V3.75" stroke="black" stroke-width="1.25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M2.625 6.81836H15.375" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15.75 6.375V12.75C15.75 15 14.625 16.5 12 16.5H6C3.375 16.5 2.25 15 2.25 12.75V6.375C2.25 4.125 3.375 2.625 6 2.625H12C14.625 2.625 15.75 4.125 15.75 6.375Z" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11.7693 10.2754H11.7761" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11.7693 12.5254H11.7761" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8.99588 10.2754H9.00262" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8.99588 12.5254H9.00262" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M6.22244 10.2754H6.22918" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M6.22244 12.5254H6.22918" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1.5V3.75" stroke="black" stroke-width="1.25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 1.5V3.75" stroke="black" stroke-width="1.25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.625 6.81836H15.375" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.75 6.375V12.75C15.75 15 14.625 16.5 12 16.5H6C3.375 16.5 2.25 15 2.25 12.75V6.375C2.25 4.125 3.375 2.625 6 2.625H12C14.625 2.625 15.75 4.125 15.75 6.375Z" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.7693 10.2754H11.7761" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.7693 12.5254H11.7761" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.99588 10.2754H9.00262" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.99588 12.5254H9.00262" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.22244 10.2754H6.22918" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.22244 12.5254H6.22918" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/select-column.svg

@@ -1,4 +1,4 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.875 14.925V3.075C7.875 1.95 7.395 1.5 6.2025 1.5H3.1725C1.98 1.5 1.5 1.95 1.5 3.075V14.925C1.5 16.05 1.98 16.5 3.1725 16.5H6.2025C7.395 16.5 7.875 16.05 7.875 14.925Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M16.5 14.925V3.075C16.5 1.95 16.02 1.5 14.8275 1.5H11.7975C10.605 1.5 10.125 1.95 10.125 3.075V14.925C10.125 16.05 10.605 16.5 11.7975 16.5H14.8275C16.02 16.5 16.5 16.05 16.5 14.925Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.875 14.925V3.075C7.875 1.95 7.395 1.5 6.2025 1.5H3.1725C1.98 1.5 1.5 1.95 1.5 3.075V14.925C1.5 16.05 1.98 16.5 3.1725 16.5H6.2025C7.395 16.5 7.875 16.05 7.875 14.925Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.5 14.925V3.075C16.5 1.95 16.02 1.5 14.8275 1.5H11.7975C10.605 1.5 10.125 1.95 10.125 3.075V14.925C10.125 16.05 10.605 16.5 11.7975 16.5H14.8275C16.02 16.5 16.5 16.05 16.5 14.925Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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: 125px;
+  }
+}
+
+@media (min-height: 701px) and (max-height: 900px) {
+  .column-select-options-list {
+    max-height: 165px;
+  }
+}
+
+@media (min-height: 901px) {
+  .column-select-options-list {
+    max-height: 210px;
+  }
+}

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

@@ -6,17 +6,19 @@
 
 /* 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]
+  @apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded cursor-pointer focus:border-[#E3E3E7]
+  focus-visible:!outline-[0.1px] focus-visible:!outline-[#6B7080]
   ;
+  transition: border-color 200ms, box-shadow 200ms;
   box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
 
-  &:focus-visible{
-    outline-style: solid !important
+  &:focus-visible {
+    outline-style: solid !important;
   }
 
   &.bk-focused {
     @apply border-[#6B7080] shadow-none z-10;
+    outline: none !important;
   }
 
   &.bk-disabled {
@@ -125,29 +127,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: 125px;
   }
 }
 
-/* Medium screens */
 @media (min-height: 701px) and (max-height: 900px) {
   .bk-options-list {
-    max-height: 210px;
+    max-height: 165px;
   }
 }
 
-/* Extra large screens */
 @media (min-height: 901px) {
   .bk-options-list {
-    max-height: 240px; /* adjust as needed */
+    max-height: 210px;
   }
 }
 
-
 /* Options */
 .bk-option {
   @apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] min-w-0;