@brickclay-org/ui 0.1.92 → 0.1.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.1.92",
+  "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

@@ -0,0 +1,342 @@
+/* =====================================================================
+   bk-kanban
+
+   Visual language matches bk-table / bk-grid: #EBEDF3 rules, #F9FAFA header
+   fill, #15191E / #60646C text, 0.75rem corners. WIP-limit feedback reuses
+   Tailwind's amber-* scale — the same family table-demo already reaches for
+   on its tree-drag refusal message — rather than inventing a new warning
+   color for this one control.
+
+   Styles are global (ViewEncapsulation.None): `cardTemplate`'s content is
+   projected in from the consumer and never carries this component's scope
+   attribute, so column/card chrome has to be reachable without it. Every
+   class is namespaced `bk-kanban-` to keep that safe.
+   ===================================================================== */
+
+.bk-kanban-host {
+  display: block;
+  height: 100%;
+}
+
+/* ---------- Board ----------
+
+   Three nested boxes now, each with exactly one job:
+
+     .bk-kanban-host   — structural passthrough only (above). Never styled.
+     .bk-kanban-board  — `boardClass` lands here. Purely decorative: a
+                          background, a border, padding around the whole
+                          board. Never scrolls, never sized by CDK.
+     .bk-kanban        — the scroll container. Holds every column, owns
+                          `overflow-x`/`overflow-y`, and is what
+                          `cdkDropList` (column reordering) attaches to.
+
+   Collapsing `boardClass` onto the same box that scrolls was the bug this
+   split fixes: a consumer's `padding` became part of what had to be
+   scrolled past, and the scrollbar itself ended up sitting inside that
+   padding instead of at the board's true content edge. Keeping
+   `.bk-kanban-board` between `boardClass` and the scrolling box means
+   nothing a consumer passes in can ever change *which* element owns
+   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.
+
+   `: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%;
+}
+
+/* `height: 100%` resolves against whatever the host was given: a container
+   with an explicit height (e.g. `class="h-[calc(100vh-200px)]"` on
+   <bk-kanban>) makes the board itself bounded; against an auto-height
+   ancestor it computes as auto instead (ordinary CSS behaviour for a
+   percentage height), so the board just grows with its content when nothing
+   constrains it. No JS measurement needed either way.
+
+   `overflow-x: auto` is what makes the board responsive on its own — always
+   on, regardless of `columnScrollMode` — and stays on `.bk-kanban` in both
+   modes: columns never shrink below their own min-width, so a narrow
+   viewport (or ten columns' worth of width) scrolls the row horizontally
+   (the standard kanban pattern) rather than squeezing every column
+   unreadably thin. `columnScrollMode` only ever decides where the *vertical*
+   scroll lives.
+
+   `items-stretch` is what makes `columnScrollMode: 'body'` (the default,
+   see below) actually work rather than being aspirational: every column
+   stretches to fill `.bk-kanban`'s own cross-axis size, so once that size is
+   *definite* (host given an explicit height) each column is bounded too,
+   and `.bk-kanban-column-body`'s own `overflow-y: auto` has something to
+   clip against. `.bk-kanban--scroll-wrapper` (also below) overrides this for
+   `'wrapper'` mode, where columns go back to their own natural height and
+   the board handles scrolling instead. */
+.bk-kanban {
+  @apply flex items-stretch gap-4 w-full h-full overflow-x-auto;
+  scroll-snap-type: x proximity;
+}
+
+/* `columnScrollMode: 'wrapper'` (`BkKanbanColumnScrollMode`) — moves
+   vertical scrolling from each column's own body up to the board itself, so
+   every column (header *and* body, all of them, together) scrolls as one
+   region instead of each column scrolling independently. `align-items:
+   flex-start` undoes the stretch above: columns no longer need bounding
+   individually now that the board itself is the bounded, scrollable one.
+   `overflow-x` stays `auto` (inherited from `.bk-kanban` — nothing here
+   touches it), so horizontal scrolling across columns keeps working exactly
+   as it does in `'body'` mode; this box just scrolls on both axes now. */
+.bk-kanban--scroll-wrapper {
+  align-items: flex-start;
+  overflow-y: auto;
+}
+
+/* Columns are naturally-sized in this mode (no `items-stretch` to fill), so
+   a column's own body never actually has surplus space to overflow into —
+   this is mostly documentation of that fact rather than a fix for a real
+   collision, kept explicit so nobody re-adds a per-column scrollbar here by
+   accident later. */
+.bk-kanban--scroll-wrapper .bk-kanban-column-body {
+  overflow-y: visible;
+}
+
+/* ---------- Column ---------- */
+
+/*
+  `: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.
+*/
+: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 `: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;
+}
+
+/* `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
+   this handle, hence scoping through the parent rather than the class living
+   here directly. */
+.bk-kanban-column:not(.cdk-drag-disabled) > .bk-kanban-column-header {
+  cursor: grab;
+}
+
+.bk-kanban-column.cdk-drag-dragging > .bk-kanban-column-header {
+  cursor: grabbing;
+}
+
+.bk-kanban-column-title {
+  @apply text-[13px] font-semibold text-[#15191E] truncate;
+}
+
+.bk-kanban-column-count {
+  @apply shrink-0;
+}
+
+/* No `ms-auto` here — `justify-between` on `.bk-kanban-column-header` above
+   already spreads title, count badge, and this slot apart on its own; a
+   `margin-inline-start: auto` on top of that would claim all the header's
+   leftover space for itself before `justify-content` ever sees it, silently
+   cancelling the spread between title and badge whenever an actions
+   template renders. */
+.bk-kanban-column-actions {
+  @apply shrink-0 flex items-center;
+}
+
+/* ---------- Column body / drop list ---------- */
+
+.bk-kanban-column-body {
+  @apply flex-1 flex flex-col gap-2 p-2.5 overflow-y-auto;
+  min-height: 96px;
+}
+
+.bk-kanban-empty {
+  @apply flex flex-1 flex-col items-center justify-center py-6 text-center;
+}
+
+.bk-kanban-empty-text {
+  @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 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);
+}
+
+/* CDK holds the dragged card at a fixed pointer offset while it flies to its
+   drop position; a stray transition on `transform` during that flight reads
+   as lag rather than motion. `cdk-drag-animating` (added only for the
+   settle-into-place snap after release) is what should transition. */
+.bk-kanban-card.cdk-drag-dragging {
+  transition: none;
+}
+
+/* ---------- WIP limit feedback ----------
+
+   `-warn` is the persistent, post-drop state (`wipLimitBehavior: 'warn'`,
+   §6). `-live-over` is the transient one drawn while a card is being
+   dragged over a column that would exceed its limit (§12) — independent of
+   `wipLimitBehavior`, since it's pure information shown before anything has
+   actually happened. Both can theoretically apply at once (a column already
+   over limit being hovered again); the rules simply stack. */
+
+.bk-kanban-column-warn {
+  @apply border-amber-300 bg-amber-50;
+}
+
+.bk-kanban-column-warn .bk-kanban-column-header {
+  @apply bg-amber-50 border-amber-200;
+}
+
+.bk-kanban-column-live-over {
+  @apply border-amber-400 bg-amber-50;
+  outline: 2px dashed theme('colors.amber.400');
+  outline-offset: -2px;
+}
+
+.bk-kanban-column-live-over .bk-kanban-column-header {
+  @apply bg-amber-50 border-amber-200;
+}
+
+/* ---------- Drag sorting ----------
+
+   Deliberately scoped to `.bk-kanban-card` rather than the bare
+   `.cdk-drag-preview` / `.cdk-drag-placeholder` selectors bk-table and
+   bk-grid already publish globally (ViewEncapsulation.None puts all three
+   stylesheets in the same global scope) — CDK's `display: table` there is
+   right for a cloned `<tr>` and wrong for a card `<div>`; the extra class
+   also just wins on specificity, so which stylesheet loads last can't flip
+   this component's own drag visuals. */
+
+.bk-kanban-card.cdk-drag-preview {
+  @apply rounded-lg;
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  cursor: grabbing;
+}
+
+.bk-kanban-card.cdk-drag-placeholder {
+  @apply border-dashed border-[#C4CADA] bg-[#F1F2F4];
+  box-shadow: none;
+  opacity: 0.6;
+}
+
+.bk-kanban-column-body.cdk-drop-list-dragging .bk-kanban-card:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+/* 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,
+   just sized to a column instead. */
+.bk-kanban-column.cdk-drag-preview {
+  box-shadow:
+    0 8px 10px -6px rgba(0, 0, 0, 0.2),
+    0 20px 25px -5px rgba(0, 0, 0, 0.14);
+}
+
+.bk-kanban-column.cdk-drag-placeholder {
+  @apply border-dashed border-[#C4CADA] bg-[#F1F2F4];
+  box-shadow: none;
+  opacity: 0.5;
+}
+
+.bk-kanban-column.cdk-drag-placeholder .bk-kanban-column-header,
+.bk-kanban-column.cdk-drag-placeholder .bk-kanban-column-body {
+  visibility: hidden;
+}
+
+.bk-kanban.cdk-drop-list-dragging .bk-kanban-column:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+/* ---------- Responsive ----------
+
+   Below tablet width, a fixed 300px column plus its neighbours peeking in
+   reads as clutter rather than an obvious "swipe for more" board — one
+   column at a time (minus a sliver of the next, so the horizontal scroll is
+   still discoverable) reads better on a phone-width viewport. */
+@media (max-width: 640px) {
+  .bk-kanban-column {
+    width: 86vw;
+  }
+}

package/src/styles.css

@@ -44,7 +44,7 @@
 @import './lib/menu/menu.css';
 @import './lib/ui-avatar-group/ui-avatar-group.css';
 @import './lib/table/table.css';
-@import './lib/kanban/kanban.css';
+@import './lib/kanban/component/kanban/kanban.css';
 @import './lib/calender/components/custom-calendar/custom-calendar.component.css';
 @import './lib/calender/components/scheduled-date-picker/scheduled-date-picker.component.css';
 @import './lib/calender/components/time-picker/time-picker.component.css';