@krumio/trailhand-ui 1.11.1 → 1.11.2
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.
|
@@ -7,6 +7,7 @@ export interface PopoverProps {
|
|
|
7
7
|
placement: PopoverPlacement;
|
|
8
8
|
title: string;
|
|
9
9
|
subtitle: string;
|
|
10
|
+
escapeBoundary: boolean;
|
|
10
11
|
}
|
|
11
12
|
/**
|
|
12
13
|
* A popover component that appears on click of a trigger element.
|
|
@@ -25,6 +26,7 @@ export declare class Popover extends LitElement {
|
|
|
25
26
|
placement: PopoverPlacement;
|
|
26
27
|
title: string;
|
|
27
28
|
subtitle: string;
|
|
29
|
+
escapeBoundary: boolean;
|
|
28
30
|
private _hasHeadingSlot;
|
|
29
31
|
private _boundHandleClickOutside;
|
|
30
32
|
static styles: import("lit").CSSResult;
|
|
@@ -34,6 +36,7 @@ export declare class Popover extends LitElement {
|
|
|
34
36
|
private _handleClickOutside;
|
|
35
37
|
private _handleTriggerClick;
|
|
36
38
|
private _open;
|
|
39
|
+
private _computeFixedPosition;
|
|
37
40
|
private _close;
|
|
38
41
|
private _handleHeadingSlotChange;
|
|
39
42
|
private _renderHeader;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAW,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAW,MAAM,KAAK,CAAC;AAGrE,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;;;GAIG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IAErC,IAAI,UAAS;IAEb;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,EAAE,gBAAgB,CAAY;IAGvC,KAAK,SAAM;IAGX,QAAQ,SAAM;IAKd,cAAc,UAAS;IAEd,OAAO,CAAC,eAAe,CAAS;IAEzC,OAAO,CAAC,wBAAwB,CAAqB;IAErD,OAAgB,MAAM,0BAuHpB;;IAOO,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAKrC,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,KAAK;IAOb,OAAO,CAAC,qBAAqB;IA0C7B,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,aAAa;IAkBZ,MAAM,IAAI,cAAc;CAiClC"}
|
|
@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { LitElement, html, css, nothing } from 'lit';
|
|
8
8
|
import { property, state } from 'lit/decorators.js';
|
|
9
|
+
import { styleMap } from 'lit/directives/style-map.js';
|
|
9
10
|
import '../icon/icon';
|
|
10
11
|
/**
|
|
11
12
|
* A popover component that appears on click of a trigger element.
|
|
@@ -26,6 +27,9 @@ export class Popover extends LitElement {
|
|
|
26
27
|
this.placement = 'bottom';
|
|
27
28
|
this.title = '';
|
|
28
29
|
this.subtitle = '';
|
|
30
|
+
// When true, the popover is positioned via `position: fixed` computed from the trigger,
|
|
31
|
+
// so it escapes a clipping ancestor (overflow: hidden/auto) instead of being cut off by it.
|
|
32
|
+
this.escapeBoundary = false;
|
|
29
33
|
this._hasHeadingSlot = false;
|
|
30
34
|
this._boundHandleClickOutside = this._handleClickOutside.bind(this);
|
|
31
35
|
}
|
|
@@ -58,6 +62,45 @@ export class Popover extends LitElement {
|
|
|
58
62
|
this.open = true;
|
|
59
63
|
this.dispatchEvent(new CustomEvent('popover-open', { bubbles: true, composed: true }));
|
|
60
64
|
}
|
|
65
|
+
_computeFixedPosition() {
|
|
66
|
+
const gap = 8;
|
|
67
|
+
const rect = this.getBoundingClientRect();
|
|
68
|
+
let style;
|
|
69
|
+
switch (this.placement) {
|
|
70
|
+
case 'top':
|
|
71
|
+
style = {
|
|
72
|
+
position: 'fixed',
|
|
73
|
+
left: `${rect.left + rect.width / 2}px`,
|
|
74
|
+
bottom: `${window.innerHeight - rect.top + gap}px`,
|
|
75
|
+
transform: 'translateX(-50%)',
|
|
76
|
+
};
|
|
77
|
+
break;
|
|
78
|
+
case 'left':
|
|
79
|
+
style = {
|
|
80
|
+
position: 'fixed',
|
|
81
|
+
top: `${rect.top + rect.height / 2}px`,
|
|
82
|
+
right: `${window.innerWidth - rect.left + gap}px`,
|
|
83
|
+
transform: 'translateY(-50%)',
|
|
84
|
+
};
|
|
85
|
+
break;
|
|
86
|
+
case 'right':
|
|
87
|
+
style = {
|
|
88
|
+
position: 'fixed',
|
|
89
|
+
top: `${rect.top + rect.height / 2}px`,
|
|
90
|
+
left: `${rect.right + gap}px`,
|
|
91
|
+
transform: 'translateY(-50%)',
|
|
92
|
+
};
|
|
93
|
+
break;
|
|
94
|
+
default:
|
|
95
|
+
style = {
|
|
96
|
+
position: 'fixed',
|
|
97
|
+
left: `${rect.left + rect.width / 2}px`,
|
|
98
|
+
top: `${rect.bottom + gap}px`,
|
|
99
|
+
transform: 'translateX(-50%)',
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
return style;
|
|
103
|
+
}
|
|
61
104
|
_close() {
|
|
62
105
|
this.open = false;
|
|
63
106
|
this.dispatchEvent(new CustomEvent('popover-close', { bubbles: true, composed: true }));
|
|
@@ -84,6 +127,13 @@ export class Popover extends LitElement {
|
|
|
84
127
|
`;
|
|
85
128
|
}
|
|
86
129
|
render() {
|
|
130
|
+
// Computed fresh on every render rather than cached in state: caching it
|
|
131
|
+
// meant a stale value could briefly apply whenever open/escapeBoundary/
|
|
132
|
+
// placement changed together, since state set during `updated()` only
|
|
133
|
+
// takes effect on the render after next.
|
|
134
|
+
const fixedStyle = this.open && this.escapeBoundary
|
|
135
|
+
? styleMap(this._computeFixedPosition())
|
|
136
|
+
: nothing;
|
|
87
137
|
return html `
|
|
88
138
|
<div
|
|
89
139
|
class="trigger-wrapper"
|
|
@@ -96,6 +146,7 @@ export class Popover extends LitElement {
|
|
|
96
146
|
|
|
97
147
|
<div
|
|
98
148
|
class="popover-content ${this.open ? 'popover-content--open' : ''}"
|
|
149
|
+
style=${fixedStyle}
|
|
99
150
|
role="dialog"
|
|
100
151
|
aria-hidden=${!this.open}
|
|
101
152
|
>
|
|
@@ -242,6 +293,9 @@ __decorate([
|
|
|
242
293
|
__decorate([
|
|
243
294
|
property({ type: String })
|
|
244
295
|
], Popover.prototype, "subtitle", void 0);
|
|
296
|
+
__decorate([
|
|
297
|
+
property({ type: Boolean, attribute: 'escape-boundary' })
|
|
298
|
+
], Popover.prototype, "escapeBoundary", void 0);
|
|
245
299
|
__decorate([
|
|
246
300
|
state()
|
|
247
301
|
], Popover.prototype, "_hasHeadingSlot", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.ts"],"names":[],"mappings":"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"}
|