@brickclay-org/ui 0.1.93 → 0.1.94

package/package.json

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

package/src/assets/images/icons/global/popup-cross-white.svg

@@ -0,0 +1,11 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_256_95)">
+<path d="M10.9997 10.9301C10.8123 11.1163 10.5589 11.2209 10.2947 11.2209C10.0305 11.2209 9.77707 11.1163 9.5897 10.9301L1.0497 2.49009C0.955976 2.39713 0.881582 2.28653 0.830813 2.16467C0.780044 2.04281 0.753906 1.9121 0.753906 1.78009C0.753906 1.64808 0.780044 1.51737 0.830813 1.39551C0.881582 1.27365 0.955976 1.16305 1.0497 1.07009C1.23707 0.883839 1.49052 0.779297 1.7547 0.779297C2.01889 0.779297 2.27234 0.883839 2.4597 1.07009L10.9997 9.51009C11.0934 9.60305 11.1678 9.71365 11.2186 9.83551C11.2694 9.95737 11.2955 10.0881 11.2955 10.2201C11.2955 10.3521 11.2694 10.4828 11.2186 10.6047C11.1678 10.7265 11.0934 10.8371 10.9997 10.9301Z" fill="white"/>
+<path d="M2.45845 11.0007C2.2675 11.1943 2.00745 11.3041 1.73553 11.306C1.4636 11.3078 1.20206 11.2016 1.00845 11.0107C0.814846 10.8197 0.705025 10.5597 0.703149 10.2877C0.701274 10.0158 0.807498 9.75425 0.998454 9.56064L9.53845 1.00064C9.72941 0.807034 9.98945 0.697212 10.2614 0.695337C10.5333 0.693461 10.7948 0.799686 10.9885 0.990641C11.1821 1.1816 11.2919 1.44164 11.2938 1.71357C11.2956 1.9855 11.1894 2.24704 10.9985 2.44064L2.45845 11.0007Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_256_95">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/images/icons/global/popup-cross.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9997 10.9301C10.8123 11.1163 10.5589 11.2209 10.2947 11.2209C10.0305 11.2209 9.77707 11.1163 9.5897 10.9301L1.0497 2.49009C0.955976 2.39713 0.881582 2.28653 0.830813 2.16467C0.780044 2.04281 0.753906 1.9121 0.753906 1.78009C0.753906 1.64808 0.780044 1.51737 0.830813 1.39551C0.881582 1.27365 0.955976 1.16305 1.0497 1.07009C1.23707 0.883839 1.49052 0.779297 1.7547 0.779297C2.01889 0.779297 2.27234 0.883839 2.4597 1.07009L10.9997 9.51009C11.0934 9.60305 11.1678 9.71365 11.2186 9.83551C11.2694 9.95737 11.2955 10.0881 11.2955 10.2201C11.2955 10.3521 11.2694 10.4828 11.2186 10.6047C11.1678 10.7265 11.0934 10.8371 10.9997 10.9301Z" fill="#A1A5B7"/>
+<path d="M2.45845 11.0002C2.2675 11.1938 2.00745 11.3036 1.73553 11.3055C1.4636 11.3073 1.20206 11.2011 1.00845 11.0102C0.814846 10.8192 0.705025 10.5592 0.703149 10.2872C0.701274 10.0153 0.807498 9.75376 0.998454 9.56015L9.53845 1.00015C9.72941 0.806546 9.98945 0.696724 10.2614 0.694849C10.5333 0.692973 10.7948 0.799198 10.9885 0.990153C11.1821 1.18111 11.2919 1.44115 11.2938 1.71308C11.2956 1.98501 11.1894 2.24655 10.9985 2.44015L2.45845 11.0002Z" fill="#A1A5B7"/>
+</svg>

package/src/lib/kanban/component/kanban/kanban.css

@@ -39,8 +39,18 @@
    scrolling, or where its scrollbar sits — `.bk-kanban` fills
    `.bk-kanban-board`'s content box (`w-full h-full`, below), correctly
    inset by whatever padding/border `boardClass` added, and scrolls entirely
-   on its own from there. */
-.bk-kanban-board {
+   on its own from there.
+
+   `:where(...)` here (and on `.bk-kanban-column`/`.bk-kanban-column-header`
+   below) drops this rule's specificity to zero — Angular injects this
+   component's own stylesheet *after* the app's global Tailwind bundle, so
+   without it a same-specificity utility class passed through `boardClass`
+   would lose to whatever's declared here regardless of source order (a
+   plain class selector always beats a zero-specificity one, load order
+   doesn't matter). Wrapping the *base* rule instead of fighting that with
+   `!important` means any class `boardClass` supplies just wins outright,
+   no per-property workaround needed. */
+:where(.bk-kanban-board) {
   display: block;
   height: 100%;
 }
@@ -99,31 +109,35 @@
 /* ---------- Column ---------- */
 
 /*
-  `background` reads a custom property with a fallback, rather than a plain
-  `bg-[#F9FAFA]` utility, for the same reason `.bk-kanban-column-header`
-  does below: this component's styleUrl is injected after the app's global
-  stylesheet, so a same-specificity utility landing here via `columnClass`
-  would lose to a plain background utility regardless of source order.
-  `--bk-kanban-column-bg` is never assigned a value here, so it's the only
-  reliable way in.
+  `:where(...)` — see `.bk-kanban-board`'s own comment above for why. A
+  plain `columnClass="bg-red-500"` (or `border-2 border-red-500`,
+  `rounded-none`, anything this rule also declares) now reliably wins, the
+  same as it always did for properties this rule *doesn't* touch.
+
+  `background` still reads `--bk-kanban-column-bg` with a fallback rather
+  than a hardcoded `#f9fafa` — that's not the specificity workaround it used
+  to be (the `:where()` above already solves that for a plain `bg-*` utility
+  too), just a convenient second way in: set the custom property directly
+  (inline style, a global CSS rule, whatever) without needing to know this
+  component's exact Tailwind class name.
 */
-.bk-kanban-column {
+:where(.bk-kanban-column) {
   @apply flex flex-col shrink-0 w-[300px] max-w-[85vw] rounded-xl border border-[#EBEDF3] overflow-hidden;
   background: var(--bk-kanban-column-bg, #f9fafa);
   scroll-snap-align: start;
 }
 
-/* Same custom-property trick as `.bk-kanban-column` above, for the same
-   reason, so `columns[].colHeaderClass` can reliably win on background too —
-   plus the trick `bk-dialog` uses for `--bk-dialog-panel-bg` via
-   `panelClass`. */
-.bk-kanban-column-header {
+/* Same `:where()` + custom-property-as-convenience reasoning as
+   `.bk-kanban-column` above, so `columns[].colHeaderClass` reliably wins on
+   any property here — background included, same trick `bk-dialog` uses for
+   `--bk-dialog-panel-bg` via `panelClass`. */
+:where(.bk-kanban-column-header) {
   @apply flex items-center justify-between gap-2 px-3 py-2.5;
   background: var(--bk-kanban-header-bg, #f9fafa);
   border-bottom: 1px solid #ebedf3;
 }
 
-/* `columnDragEnabled` makes this the drag handle (see kanban.html) — cursor
+/* `dragColumn` makes this the drag handle (see kanban.html) — cursor
    feedback only shows up once dragging is actually possible, and switches to
    `grabbing` mid-drag the same way `.bk-kanban-card` does for cards. CDK adds
    `cdk-drag-disabled` to the `cdkDrag` host itself (`.bk-kanban-column`), not
@@ -170,16 +184,56 @@
   @apply text-xs font-medium text-[#78829D];
 }
 
+/* ---------- Header add button (showAddItem) ----------
+
+   `bk-button` (`variant="primary"`, `size="xxsm"`) supplies its own bg/
+   border/rounded/active/disabled chrome as-is — `buttonClass` (kanban.html)
+   only ever covers the two things `bk-button` itself doesn't: a fixed
+   square size (`size-6`, in place of the size's own text-button padding)
+   and a hover state (`.btn-primary` in `ui-button.css` defines
+   `active:`/`focus-visible:` but no `hover:` of its own — this is the
+   per-instance override that input exists for, not a reason to touch the
+   shared component). The remove button below takes a different approach
+   (`bk-icon-button` + a hover-driven icon swap) — the two aren't meant to
+   match, this one just didn't need it. This class only ever places the
+   button: sits in the same header row as the title/count/actions-template
+   slot, and `justify-between` on `.bk-kanban-column-header` already spreads
+   everything in that row apart, so `shrink-0` is the only thing this needs,
+   same reasoning as `.bk-kanban-column-actions` just above. */
+
+.bk-kanban-add-btn {
+  @apply shrink-0;
+}
+
 /* ---------- Card ---------- */
 
 .bk-kanban-card {
-  @apply bg-white rounded-lg border border-[#EBEDF3] p-3 cursor-pointer;
+  @apply relative bg-white rounded-lg border border-[#EBEDF3] p-3 cursor-pointer;
   box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
   transition:
     box-shadow 150ms ease,
     border-color 150ms ease;
 }
 
+/* ---------- Card remove button (showRemoveItem) ----------
+
+   Absolutely positioned over the card's own top-right corner rather than
+   flowed into `cardTemplate`'s content — it's board-owned chrome, present
+   regardless of what a consumer's own card body renders, so click/drag
+   isolation (stopped in the template before either reaches this button's
+   ancestors — see kanban.ts's onRemoveButtonClick doc comment) is
+   guaranteed by the board itself rather than left to every consumer to get
+   right. `.bk-kanban-card` picked up `relative` above specifically so this
+   has something to position against. `bk-icon-button` here, not `bk-button`
+   — `removeButtonVariant()`/`removeButtonIcon()` in kanban.ts swap `variant`
+   and the icon asset itself on `(hovered)`, mirroring `AddFleet`'s own close
+   button exactly (down to reusing its `popup-cross`/`popup-cross-white`
+   icon pair) — `bk-icon-button` has no real `:hover` of its own either, only
+   `active:`. This class only ever places it. */
+.bk-kanban-remove-btn {
+  @apply absolute top-1.5 right-1.5 z-10;
+}
+
 .bk-kanban-card:hover {
   @apply border-[#C4CADA];
   box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
@@ -249,7 +303,7 @@
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-/* Same treatment one level up, for `columnDragEnabled` — a column being
+/* Same treatment one level up, for `dragColumn` — a column being
    dragged gets the heavier shadow a whole column's worth of chrome warrants
    (cards use a lighter one, being the smaller unit), and its placeholder
    reuses the exact dashed-border look `.bk-kanban-card`'s placeholder uses,