tp-elements/tp-popup
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add clampToContainer property for containing-block clamping

Browse Source 
Expose a reflected clampToContainer boolean that, when set, makes fit()
clamp the popup against its nearest containing-block rect instead of the
viewport. Required for popups under an ancestor with transform/filter/
contain:layout|paint, where position: fixed resolves against that ancestor.

Bumps @tp/helpers dependency to ^2.13.0 for the matching _posFixed support.
This commit is contained in:
pk
2026-08-09 23:15:22 +02:00
parent f675a6f394
commit f9e8dffc16
2 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -2
View File
@@ -1,6 +1,6 @@
{ {
"name": "@tp/tp-popup", "name": "@tp/tp-popup",
"version": "1.3.0", "version": "1.4.0",
"description": "", "description": "",
"main": "tp-popup.js", "main": "tp-popup.js",
"scripts": { "scripts": {
@@ -13,7 +13,7 @@
"author": "trading_peter", "author": "trading_peter",
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"@tp/helpers": "^2.0.0", "@tp/helpers": "^2.13.0",
"@tp/tp-icon": "^1.0.1", "@tp/tp-icon": "^1.0.1",
"lit": "^3.0.0" "lit": "^3.0.0"
} }
tp-popup.js
+9 -2
View File
@@ -89,7 +89,12 @@ class TpPopup extends EventHelpers(Position(DomQuery(LitElement))) {
alwaysToggle: { type: Boolean, reflect: true }, alwaysToggle: { type: Boolean, reflect: true },
halign: { type: String }, halign: { type: String },
valign: { type: String }, valign: { type: String },
scrollTarget: { type: Object } scrollTarget: { type: Object },
// When true, clamp the popup against its containing-block rect instead
// of the viewport. Enable for popups under an ancestor with transform /
// filter / contain:layout|paint, where position: fixed resolves against
// that ancestor and the viewport is the wrong clamp edge.
clampToContainer: { type: Boolean, reflect: true }
}; };
} }
@@ -100,6 +105,7 @@ class TpPopup extends EventHelpers(Position(DomQuery(LitElement))) {
this.halign = 'middle'; this.halign = 'middle';
this.valign = 'bottom'; this.valign = 'bottom';
this.scrollTarget = document; this.scrollTarget = document;
this.clampToContainer = false;
this.fit = this.fit.bind(this); this.fit = this.fit.bind(this);
this._onDocClickHandler = () => this.close(); this._onDocClickHandler = () => this.close();
} }
@@ -165,7 +171,8 @@ class TpPopup extends EventHelpers(Position(DomQuery(LitElement))) {
this._posFixed(this.shadowRoot.querySelector('.toggle'), this.$.content, { this._posFixed(this.shadowRoot.querySelector('.toggle'), this.$.content, {
valign: this.valign || 'bottom', valign: this.valign || 'bottom',
halign: this.halign || 'middle', halign: this.halign || 'middle',
spacing: 5 spacing: 5,
clampToContainer: this.clampToContainer
}); });
} }