@brickclay-org/ui 0.1.75 → 0.1.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.d.ts
CHANGED
|
@@ -2949,7 +2949,7 @@ declare class BkPopover implements AfterViewInit, OnDestroy {
|
|
|
2949
2949
|
private cancelClose;
|
|
2950
2950
|
private clearTimers;
|
|
2951
2951
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BkPopover, never>;
|
|
2952
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BkPopover, "bk-popover",
|
|
2952
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BkPopover, "bk-popover", ["bkPopover"], { "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showArrow": { "alias": "showArrow"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "flip": { "alias": "flip"; "required": false; "isSignal": true; }; "closeOnClickOutside": { "alias": "closeOnClickOutside"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "openDelay": { "alias": "openDelay"; "required": false; "isSignal": true; }; "closeDelay": { "alias": "closeDelay"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "appendToBody": { "alias": "appendToBody"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; "openChange": "openChange"; }, never, ["[bkPopoverTrigger]", "*"], true, never>;
|
|
2953
2953
|
}
|
|
2954
2954
|
|
|
2955
2955
|
/** One entry in a stacked avatar group. Mirrors the display inputs of bk-avatar. */
|
package/package.json
CHANGED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
/* inline-flex, not inline: an inline host puts its contents on a baseline and
|
|
2
|
+
gains descender space, which knocks the trigger out of line with whatever
|
|
3
|
+
sits beside it. */
|
|
4
|
+
:host {
|
|
5
|
+
@apply inline-flex;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.bk-popover-anchor {
|
|
9
|
+
@apply inline-flex;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/* ---- Panel ----
|
|
13
|
+
No overflow:hidden here — the arrow deliberately hangs outside the box. Put
|
|
14
|
+
any scrolling on the content you project instead. */
|
|
15
|
+
.bk-popover-panel {
|
|
16
|
+
@apply fixed z-[10000] bg-white border border-[#E3E3E7] rounded-lg p-3 cursor-default;
|
|
17
|
+
box-shadow: 0 12px 24px -6px rgba(16, 24, 40, 0.12), 0 4px 8px -4px rgba(16, 24, 40, 0.06);
|
|
18
|
+
|
|
19
|
+
/* Hidden for the first frame, which exists only so the panel can be measured
|
|
20
|
+
(see position() in popover.ts). The fade starts from the already-painted
|
|
21
|
+
hidden state, so it happens in place — nothing slides in from a corner. */
|
|
22
|
+
visibility: hidden;
|
|
23
|
+
opacity: 0;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.bk-popover-panel.bk-popover-ready {
|
|
27
|
+
visibility: visible;
|
|
28
|
+
opacity: 1;
|
|
29
|
+
transition: opacity 120ms ease-out;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* ---- Arrow ----
|
|
33
|
+
A square rotated 45°, so it picks up the panel's own background and border
|
|
34
|
+
and matches it on every side — a CSS border-triangle can't have a border of
|
|
35
|
+
its own. Only the two outward-facing edges keep their border; the other two
|
|
36
|
+
sit inside the panel where a line would show. Being a positioned child, it
|
|
37
|
+
paints above the panel's border and hides the segment it crosses. */
|
|
38
|
+
.bk-popover-arrow {
|
|
39
|
+
@apply absolute block w-2.5 h-2.5 bg-white border border-[#E3E3E7];
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* Panel above the anchor: arrow on the bottom edge, pointing down. Under a 45°
|
|
43
|
+
rotation that tip is the square's bottom-right corner, so the bottom and
|
|
44
|
+
right borders are the ones on show. */
|
|
45
|
+
.bk-popover-panel[data-side="top"] .bk-popover-arrow {
|
|
46
|
+
bottom: -5px;
|
|
47
|
+
border-top: none;
|
|
48
|
+
border-left: none;
|
|
49
|
+
transform: translateX(-50%) rotate(45deg);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Panel below: arrow on the top edge, pointing up (top-left corner). */
|
|
53
|
+
.bk-popover-panel[data-side="bottom"] .bk-popover-arrow {
|
|
54
|
+
top: -5px;
|
|
55
|
+
border-bottom: none;
|
|
56
|
+
border-right: none;
|
|
57
|
+
transform: translateX(-50%) rotate(45deg);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Panel to the left: arrow on the right edge, pointing right (top-right corner). */
|
|
61
|
+
.bk-popover-panel[data-side="left"] .bk-popover-arrow {
|
|
62
|
+
right: -5px;
|
|
63
|
+
border-bottom: none;
|
|
64
|
+
border-left: none;
|
|
65
|
+
transform: translateY(-50%) rotate(45deg);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Panel to the right: arrow on the left edge, pointing left (bottom-left corner). */
|
|
69
|
+
.bk-popover-panel[data-side="right"] .bk-popover-arrow {
|
|
70
|
+
left: -5px;
|
|
71
|
+
border-top: none;
|
|
72
|
+
border-right: none;
|
|
73
|
+
transform: translateY(-50%) rotate(45deg);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* ---- Content ---- */
|
|
77
|
+
.bk-popover-header {
|
|
78
|
+
@apply flex items-start justify-between gap-3 mb-1;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.bk-popover-title {
|
|
82
|
+
@apply text-sm font-semibold text-[#141414];
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.bk-popover-close {
|
|
86
|
+
@apply shrink-0 text-gray-400 hover:text-[#141414] cursor-pointer -me-1 -mt-0.5;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.bk-popover-body {
|
|
90
|
+
@apply text-sm font-normal text-[#6B7080];
|
|
91
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/* =========================
|
|
2
|
+
Avatar Group (stacked list)
|
|
3
|
+
========================= */
|
|
4
|
+
.bk-avatar-group {
|
|
5
|
+
@apply inline-flex items-center;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/* Each slot wraps a bk-avatar. A white ring separates overlapping avatars;
|
|
9
|
+
hover lifts the avatar above its neighbours. */
|
|
10
|
+
.bk-avatar-group__item {
|
|
11
|
+
@apply relative inline-flex rounded-full transition-transform duration-150;
|
|
12
|
+
box-shadow: 0 0 0 2px #ffffff;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.bk-avatar-group__item:hover {
|
|
16
|
+
@apply z-10;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.bk-avatar-group__item--overflow {
|
|
20
|
+
@apply cursor-pointer;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* =========================
|
|
24
|
+
Overlap per size (~1/3 of the avatar width)
|
|
25
|
+
========================= */
|
|
26
|
+
.bk-avatar-group.xsm .bk-avatar-group__item:not(:first-child) { margin-left: -8px; }
|
|
27
|
+
.bk-avatar-group.sm .bk-avatar-group__item:not(:first-child) { margin-left: -10px; }
|
|
28
|
+
.bk-avatar-group.md .bk-avatar-group__item:not(:first-child) { margin-left: -12px; }
|
|
29
|
+
.bk-avatar-group.lg .bk-avatar-group__item:not(:first-child) { margin-left: -16px; }
|
|
30
|
+
.bk-avatar-group.xl .bk-avatar-group__item:not(:first-child) { margin-left: -18px; }
|
|
31
|
+
.bk-avatar-group.xxl .bk-avatar-group__item:not(:first-child) { margin-left: -20px; }
|