@brickclay-org/ui 0.1.84 → 0.1.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.1.84",
+  "version": "0.1.86",
   "schematics": "./schematics/collection.json",
   "ng-add": {
     "save": "dependencies"
@@ -12,11 +12,6 @@
     "moment": "^2.29.0",
     "ngx-mask": "^20.0.3"
   },
-  "peerDependenciesMeta": {
-    "@angular/cdk": {
-      "optional": true
-    }
-  },
   "dependencies": {
     "tslib": "^2.3.0"
   },

package/src/assets/icons/dollar-icon-script.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.3231 9.64369V12.858C10.4542 12.7564 10.9302 12.1229 10.9302 11.2862C10.9302 10.4804 10.56 10.0037 9.3231 9.64369ZM8.35882 8.03655V5.14369C7.30678 5.27709 6.75167 5.89262 6.75167 6.56762C6.75167 7.24262 7.1901 7.73987 8.35882 8.03655ZM9.27167 8.27344L9.61625 8.36248C11.5037 8.81537 12.5374 9.61702 12.5374 11.1981C12.5374 13.0168 11.1019 14.0486 9.27167 14.1823V15.4294H8.46071V14.1823C6.63757 14.0412 5.195 12.9798 5.14453 11.1981H6.63017C6.75939 12.0666 7.30517 12.705 8.46071 12.831V9.59516L8.16628 9.52091C6.34314 9.0828 5.35989 8.23648 5.35989 6.72962C5.35989 5.06687 6.65203 3.96823 8.46071 3.82712V2.57227H9.27167V3.8268C11.0659 3.9753 12.3651 5.08873 12.4226 6.77398H10.9296C10.8364 5.83862 10.1903 5.29669 9.27167 5.17777V8.27344Z" fill="#6D7793"/>
+</svg>

package/src/assets/icons/dollar-icon-thin.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.61453 15.375V13.8495C7.97103 13.7665 7.41828 13.5438 6.95628 13.1813C6.49428 12.8188 6.15078 12.3173 5.92578 11.6768L6.62103 11.3737C6.83753 11.9352 7.13503 12.3678 7.51353 12.6713C7.89203 12.9748 8.40503 13.126 9.05253 13.125C9.62253 13.125 10.1435 12.983 10.6155 12.699C11.0875 12.415 11.3233 11.957 11.3228 11.325C11.3228 10.7915 11.1493 10.363 10.8023 10.0395C10.4548 9.716 9.80528 9.40125 8.85378 9.09525C7.88428 8.78675 7.20203 8.43425 6.80703 8.03775C6.41203 7.64075 6.21453 7.124 6.21453 6.4875C6.21453 5.7905 6.48178 5.23375 7.01628 4.81725C7.55078 4.40125 8.08328 4.17625 8.61378 4.14225V2.625H9.36378V4.14225C9.88328 4.19425 10.3293 4.33825 10.7018 4.57425C11.0743 4.81025 11.3833 5.146 11.6288 5.5815L10.962 5.922C10.7835 5.599 10.5375 5.3375 10.224 5.1375C9.91053 4.9375 9.51153 4.8375 9.02703 4.8375C8.44803 4.8375 7.95953 4.99075 7.56153 5.29725C7.16353 5.60325 6.96453 6 6.96453 6.4875C6.96453 6.948 7.12778 7.321 7.45428 7.6065C7.78128 7.8925 8.43628 8.19075 9.41928 8.50125C10.3293 8.78925 10.9993 9.1595 11.4293 9.612C11.8583 10.0645 12.0728 10.6325 12.0728 11.316C12.0728 12.069 11.8078 12.6673 11.2778 13.1108C10.7478 13.5543 10.1098 13.8032 9.36378 13.8577V15.375H8.61453Z" fill="#6D7793"/>
+</svg>

package/src/assets/icons/dollar-icon.svg

@@ -1,5 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 1.66666C5.39763 1.66666 1.66667 5.39762 1.66667 10C1.66667 14.6024 5.39763 18.3333 10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 10C18.3333 5.39762 14.6024 1.66666 10 1.66666Z" stroke="#A1A3AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10 5.83334V14.1667" stroke="#A1A3AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12.5 7.91666C12.5 6.85609 11.3807 5.99999 10 5.99999C8.61931 5.99999 7.5 6.85609 7.5 7.91666C7.5 8.97723 8.61931 9.83332 10 9.83332C11.3807 9.83332 12.5 10.6894 12.5 11.75C12.5 12.8106 11.3807 13.6667 10 13.6667C8.61931 13.6667 7.5 12.8106 7.5 11.75" stroke="#A1A3AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.01795 15.75C8.80545 15.75 8.62745 15.678 8.48395 15.534C8.34045 15.39 8.26845 15.212 8.26795 15V14.1375C7.70545 14.0125 7.2117 13.7938 6.7867 13.4813C6.3617 13.1688 6.01795 12.7313 5.75545 12.1688C5.66795 11.9938 5.66495 11.8095 5.74645 11.616C5.82795 11.4225 5.9747 11.2818 6.1867 11.1938C6.3617 11.1188 6.54296 11.122 6.73046 11.2035C6.91796 11.285 7.0617 11.4193 7.1617 11.6063C7.3742 11.9813 7.64295 12.2658 7.96795 12.4598C8.29295 12.6538 8.69296 12.7505 9.16796 12.75C9.68046 12.75 10.1147 12.6345 10.4707 12.4035C10.8267 12.1725 11.005 11.813 11.0055 11.325C11.0055 10.8875 10.868 10.5408 10.593 10.2848C10.318 10.0288 9.68045 9.738 8.68045 9.4125C7.60545 9.075 6.86795 8.672 6.46795 8.2035C6.06795 7.735 5.86795 7.163 5.86795 6.4875C5.86795 5.675 6.13045 5.04375 6.65545 4.59375C7.18045 4.14375 7.71795 3.8875 8.26795 3.825V3C8.26795 2.7875 8.33995 2.60925 8.48395 2.46525C8.62795 2.32125 8.80595 2.2495 9.01795 2.25C9.22995 2.2505 9.4082 2.3225 9.5527 2.466C9.6972 2.6095 9.76895 2.7875 9.76795 3V3.825C10.243 3.9 10.6555 4.05325 11.0055 4.28475C11.3555 4.51625 11.643 4.8005 11.868 5.1375C11.9805 5.3 12.0025 5.48125 11.934 5.68125C11.8655 5.88125 11.7247 6.025 11.5117 6.1125C11.3367 6.1875 11.1555 6.19075 10.968 6.12225C10.7805 6.05375 10.6055 5.93175 10.443 5.75625C10.2805 5.58075 10.0897 5.4465 9.8707 5.3535C9.6517 5.2605 9.37995 5.2135 9.05545 5.2125C8.50545 5.2125 8.0867 5.3345 7.7992 5.5785C7.5117 5.8225 7.36795 6.1255 7.36795 6.4875C7.36795 6.9 7.55545 7.225 7.93045 7.4625C8.30545 7.7 8.95546 7.95 9.88046 8.2125C10.743 8.4625 11.3962 8.8595 11.8402 9.4035C12.2842 9.9475 12.506 10.5755 12.5055 11.2875C12.5055 12.175 12.243 12.85 11.718 13.3125C11.193 13.775 10.543 14.0625 9.76795 14.175V15C9.76795 15.2125 9.69596 15.3908 9.55196 15.5348C9.40796 15.6788 9.22995 15.7505 9.01795 15.75Z" fill="#A1A3AE"/>
 </svg>

package/src/assets/icons/double-chevron-left.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 5L11 10L16 15" stroke="#6B7080" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 5L3 10L8 15" stroke="#6B7080" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/double-chevron-right.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 15L9 10L4 5" stroke="#6B7080" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 15L17 10L12 5" stroke="#6B7080" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -72,23 +72,24 @@
   @apply rotate-180;
 }
 
+/*
+ * Positioning (top/left, width, flip above/below) is now owned entirely by CDK's connected
+ * overlay strategy in hierarchical-select.html — this panel is portalled into .cdk-overlay-pane,
+ * not laid out inline next to the control anymore. `position: static` (plus left-auto) reflects
+ * that: the panel no longer self-positions, so it must not compete with the pane's own placement.
+ * The old `[data-position]` top/bottom rules are gone for the same reason — `position: static`
+ * makes top/bottom inert either way, but stating that directly beats relying on it implicitly.
+ *
+ * Declared explicitly rather than just omitted: CSS cascades per-property, and a consumer with a
+ * stale cached copy of this package (or their own pre-CDK fork of this class name) could still
+ * have `position: absolute` on `.hierarchical-dropdown-panel` loaded globally elsewhere — if this
+ * rule simply stopped mentioning `position` instead of stating `static`, that stale declaration
+ * would be the only one left, and it would win by default. This exact mechanism broke
+ * `bk-input`'s phone-country dropdown in a downstream consumer before this component and
+ * `bk-select` were fixed here too.
+ */
 .hierarchical-dropdown-panel {
-  @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 {
-  z-index: 10050;
+  @apply static left-auto w-full min-w-[250px] max-w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg overflow-hidden cursor-default p-2.5;
 }
 
 .hierarchical-search {
@@ -141,11 +142,25 @@
   }
 }
 
-.hierarchical-option:hover{
-  @apply bg-[#f9f9f9];
+/* Hover/marked is a touch darker than the selected fill so the two states
+   don't look identical. */
+.hierarchical-option:hover,
+.hierarchical-option.marked {
+  @apply bg-[#F1F1F3];
+}
+
+.hierarchical-option.marked.disabled-item {
+  @apply bg-transparent;
 }
 .hierarchical-option.selected {
-  @apply bg-[#f7f7f7];
+  @apply bg-[#F8F8F8];
+}
+
+/* A selected row still reacts to hover/keyboard-mark for feedback, while
+   staying clearly selected. */
+.hierarchical-option.selected:hover,
+.hierarchical-option.selected.marked {
+  @apply bg-[#F1F1F3];
 }
 
 .hierarchical-option.selected.disabled-item {

package/src/lib/input/input.css

@@ -23,7 +23,7 @@
   height: 40px;
   box-sizing: border-box;
   box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
-
+  
 }
 
 /* Default/Initial State */
@@ -141,8 +141,23 @@
 }
 
 /* Phone Dropdown Menu */
+/*
+ * Positioning (top/left, flip above/below) is now owned entirely by CDK's connected overlay
+ * strategy in input.html — this panel is portalled into .cdk-overlay-pane, not laid out inline
+ * next to the trigger anymore. `absolute`/`top-full`/`mt-1` here would take it out of the pane's
+ * normal flow, making CDK always measure a 0-height pane (nothing left in-flow to size against)
+ * and silently bypassing its fit/flip logic entirely — this rule is visual styling only now.
+ *
+ * `position: static` is declared explicitly rather than just omitted: CSS cascades per-property,
+ * and a consumer with a stale cached copy of this package (or their own pre-CDK fork of this
+ * class name) could still have `position: absolute; top-full; mt-1` on `.input-phone-dropdown`
+ * loaded globally elsewhere — if this rule simply stopped mentioning `position` instead of
+ * stating `static`, that stale declaration would be the only one left, and it would win by
+ * default. This exact mechanism broke this dropdown in a downstream consumer before it was
+ * fixed here at the source.
+ */
 .input-phone-dropdown {
-  @apply absolute left-0 top-full mt-1 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg z-50 max-h-48 overflow-y-auto;
+  @apply static left-auto top-auto mt-0 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg max-h-48 overflow-y-auto;
 }
 
 .input-phone-dropdown-item {
@@ -394,4 +409,4 @@
 
 .input-container--sm .input-phone-selector-arrow {
   @apply w-3 h-3;
-}
+}

package/src/lib/popover/popover.css

@@ -9,11 +9,25 @@
   @apply inline-flex;
 }
 
-/* ---- Panel ----
-   No overflow:hidden here — the arrow deliberately hangs outside the box. Put
-   any scrolling on the content you project instead. */
+/*
+ * ---- Panel ----
+ * No overflow:hidden here — the arrow deliberately hangs outside the box. Put
+ * any scrolling on the content you project instead.
+ *
+ * Positioning (top/left, flip above/below/left/right) is now owned entirely by CDK's connected
+ * overlay strategy in popover.html — this panel is portalled into .cdk-overlay-pane, not laid
+ * out inline next to the trigger anymore. `position: static` reflects that: the panel no longer
+ * self-positions, so it must not compete with the pane's own placement.
+ *
+ * Declared explicitly rather than just omitted: CSS cascades per-property, and a consumer with a
+ * stale cached copy of this package (or their own pre-CDK fork of this class name) could still
+ * have `position: fixed` on `.bk-popover-panel` loaded globally elsewhere — if this rule simply
+ * stopped mentioning `position` instead of stating `static`, that stale declaration would be the
+ * only one left, and it would win by default. This exact mechanism broke `bk-input`'s
+ * phone-country dropdown in a downstream consumer before it was fixed at the source.
+ */
 .bk-popover-panel {
-  @apply fixed z-[10000] bg-white border border-[#E3E3E7] rounded-lg p-3 cursor-default;
+  @apply static z-[10000] bg-white border border-[#E3E3E7] rounded-lg p-3 cursor-default;
   box-shadow: 0 12px 24px -6px rgba(16, 24, 40, 0.12), 0 4px 8px -4px rgba(16, 24, 40, 0.06);
 
   /* Hidden for the first frame, which exists only so the panel can be measured

package/src/lib/select/select.css

@@ -165,9 +165,23 @@
   }
 }
 
-/* Dropdown */
+/*
+ * Dropdown
+ *
+ * Positioning (top/left, width, flip above/below) is now owned entirely by CDK's connected
+ * overlay strategy in select.html — this panel is portalled into .cdk-overlay-pane, not laid
+ * out inline next to the control anymore. `position: static` (plus left-auto) reflects that: the
+ * panel no longer self-positions, so it must not compete with the pane's own placement.
+ *
+ * Declared explicitly rather than just omitted: CSS cascades per-property, and a consumer with a
+ * stale cached copy of this package (or their own pre-CDK fork of this class name) could still
+ * have `position: absolute` on `.bk-dropdown-panel` loaded globally elsewhere — if this rule
+ * simply stopped mentioning `position` instead of stating `static`, that stale declaration would
+ * be the only one left, and it would win by default. This exact mechanism broke `bk-input`'s
+ * phone-country dropdown in a downstream consumer before this component itself was fixed here.
+ */
 .bk-dropdown-panel {
-  @apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[100] overflow-hidden cursor-default p-2.5;
+  @apply static left-auto w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg overflow-hidden cursor-default p-2.5;
 }
 
 /* Opt-in grid dropdown. List-mode selectors above and below remain unchanged. */
@@ -350,15 +364,25 @@
 .bk-option {
   @apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] min-w-0;
 
+  /* Hover/marked is a touch darker than the selected fill so the two states
+     no longer look identical. */
   &:hover,
   &.bk-marked {
-    @apply bg-[#F8F8F8] rounded-md;
+    @apply bg-[#F1F1F3] rounded-md;
   }
 
   &.bk-selected {
     @apply bg-[#F8F8F8] rounded-md;
   }
 
+  /* A selected row still reacts to hover (it stays clickable — e.g. to
+     de-select), so give it the same hover fill instead of letting the
+     selected background suppress the hover feedback. */
+  &.bk-selected:hover,
+  &.bk-selected.bk-marked {
+    @apply bg-[#F1F1F3];
+  }
+
   &.bk-option-disabled {
     @apply opacity-50 cursor-not-allowed;
 

package/src/styles.css

@@ -1,4 +1,17 @@
 /* Brickclay Component Styles - Tailwind source files */
+/*
+ * CDK Overlay's own base positioning CSS (.cdk-overlay-container/.cdk-overlay-pane/
+ * .cdk-overlay-backdrop position: fixed/absolute rules). bk-dialog and every CDK-Overlay-based
+ * control (bk-select, bk-input's phone dropdown, bk-hierarchical-select, ...) rely on it —
+ * without it, the position strategy sets top/left via JS on elements that have no positioning
+ * base rule, so nothing actually moves. Bundled here (not left for each consumer to add to their
+ * own angular.json) so it ships automatically with the package: any app already importing this
+ * file gets it for free. A bare specifier (not a relative path) is deliberate — this file is
+ * consumed from two different depths (this workspace's own `projects/brickclay-lib/src/`, and,
+ * once published, `<consumer>/node_modules/@brickclay-org/ui/src/`), and only Node-style
+ * resolution (walk up until `node_modules/@angular/cdk` is found) works correctly from both.
+ */
+@import '@angular/cdk/overlay-prebuilt.css';
 @import './lib/breadcrumb/breadcrumb.css';
 @import './lib/toggle/toggle.css';
 @import './lib/checkbox/checkbox.css';