dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
226 lines (225 loc) • 8.54 kB
JavaScript
var O = Object.getPrototypeOf;
var W = Reflect.get;
var y = (h, t, e) => W(O(h), e, t);
var u = (h, t, e) => new Promise((n, p) => {
var l = (s) => {
try {
g(e.next(s));
} catch (a) {
p(a);
}
}, d = (s) => {
try {
g(e.throw(s));
} catch (a) {
p(a);
}
}, g = (s) => s.done ? n(s.value) : Promise.resolve(s.value).then(l, d);
g((e = e.apply(h, t)).next());
});
import { autoUpdate as H, computePosition as U, offset as M, flip as T, shift as k, size as V, arrow as q } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
import { clsx as _ } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as o } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { query as S } from "../../node_modules/@lit/reactive-element/decorators/query.js";
import { html as w } from "../../node_modules/lit-html/static.js";
import { SizedMixin as B } from "../../internal/mixin/sizedMixin.js";
import { DdsElement as j } from "../../internal/dds-hu-element.js";
import z from "./popup.scss.js";
import { unsafeCSS as L } from "../../node_modules/@lit/reactive-element/css-tag.js";
var N = Object.defineProperty, r = (h, t, e, n) => {
for (var p = void 0, l = h.length - 1, d; l >= 0; l--)
(d = h[l]) && (p = d(t, e, p) || p);
return p && N(t, e, p), p;
};
const c = class c extends B(j) {
constructor() {
super(...arguments), this.triggerElement = null, this.intersectionObserver = null, this.disabled = !1, this.opened = !1, this.placement = "bottom", this.floatingStrategy = "absolute", this.offset = 0, this.maxHeight = 250, this.maxWidth = "auto", this.disableViewportAutoClose = !1;
}
connectedCallback() {
return u(this, null, function* () {
y(c.prototype, this, "connectedCallback").call(this), yield this.updateComplete, this.startUpdate();
});
}
firstUpdated(t) {
var e, n;
super.firstUpdated(t), (e = this.triggerElement) == null || e.setAttribute("aria-controls", "popup"), (n = this.triggerElement) == null || n.setAttribute("aria-expanded", "false");
}
updated(t) {
return u(this, null, function* () {
var e, n;
y(c.prototype, this, "updated").call(this, t), t.has("opened") && (this.opened ? (this.startUpdate(), (e = this.triggerElement) == null || e.setAttribute("aria-expanded", "true"), this.emit("dds-opened")) : (this.stopUpdate(), (n = this.triggerElement) == null || n.setAttribute("aria-expanded", "false"), this.emit("dds-closed"))), t.has("anchor") && this._handleTriggerSlotChange(), this.opened && (yield this.updateComplete, this.updatePosition());
});
}
_handleTriggerSlotChange(t) {
return u(this, null, function* () {
var e;
this._handleTriggerSlotChangeCallback(t), yield this.stopUpdate(), this.triggerElement = this.querySelector(
':scope > [slot="trigger"]'
), this.triggerElement || (this.triggerElement = (e = this.shadowRoot) == null ? void 0 : e.querySelector(
'slot[name="trigger"] *'
)), this.triggerElement instanceof HTMLSlotElement && (this.triggerElement = this.triggerElement.assignedElements({
flatten: !0
})[0]), this.triggerElement && this.startUpdate();
});
}
_handleTriggerSlotChangeCallback(t) {
}
_handleContentSlotChange(t) {
}
startUpdate() {
var t;
this.triggerElement && ((t = this.intersectionObserver) == null || t.disconnect(), this.intersectionObserver = new IntersectionObserver(
(e) => {
e[0] && !e[0].isIntersecting && this.opened && !this.disableViewportAutoClose && (this.opened = !1, this.emit("dds-close"));
},
{ threshold: 0 }
), this.intersectionObserver.observe(this.triggerElement), this.cleanup = H(this.triggerElement, this.popup, () => {
this.updatePosition();
}));
}
stopUpdate() {
return u(this, null, function* () {
return new Promise((t) => {
this.intersectionObserver && (this.intersectionObserver.disconnect(), this.intersectionObserver = null), this.cleanup ? (this.cleanup(), this.cleanup = void 0, requestAnimationFrame(() => t())) : t();
});
});
}
disconnectedCallback() {
super.disconnectedCallback(), this.intersectionObserver && (this.intersectionObserver.disconnect(), this.intersectionObserver = null), this.stopUpdate();
}
updatePosition() {
return u(this, null, function* () {
var g;
if (this.disabled || !this.triggerElement)
return;
const t = this.triggerElement.getBoundingClientRect();
if (!(t.top < window.innerHeight && t.bottom > 0 && t.left < window.innerWidth && t.right > 0)) {
this.opened && !this.disableViewportAutoClose && (this.opened = !1, this.emit("dds-close"));
return;
}
const { x: n, y: p, placement: l, middlewareData: d } = yield U(
this.triggerElement,
this.popup,
{
placement: this.placement,
strategy: this.floatingStrategy,
middleware: [
M(this.offset),
T(),
k(),
V({
apply: ({ rects: s, availableHeight: a, availableWidth: m, elements: f }) => {
const b = Math.max(0, a), x = Math.max(0, m), $ = this.sync;
this.popup.style.width = $ ? `${s.reference.width}px` : "";
const v = typeof this.maxHeight == "number" ? this.maxHeight : void 0, C = v != null ? Math.min(v, b) : b;
this.popup.style.maxHeight = C >= f.floating.scrollHeight ? "" : `${C}px`;
const E = typeof this.maxWidth == "number" ? this.maxWidth : void 0, A = E != null ? Math.min(E, x) : x;
this.popup.style.maxWidth = `${A}px`, this.fullWidth && (this.popup.style.width = "100vw");
}
}),
...this.arrowElement ? [q({ element: this.arrowElement, padding: 8 })] : []
]
}
);
if (Object.assign(this.popup.style, {
left: `${n}px`,
top: `${p}px`
}), this.arrowElement) {
const { x: s, y: a } = d.arrow, [m] = l.split("-"), f = (g = {
top: "bottom",
right: "left",
bottom: "top",
left: "right"
}[m]) != null ? g : "";
Object.assign(this.arrowElement.style, {
left: s != null ? `${s}px` : "",
top: a != null ? `${a}px` : "",
[f]: "-5px"
}), this.arrowElement.classList.remove(
"popup__arrow--top",
"popup__arrow--right",
"popup__arrow--bottom",
"popup__arrow--left"
), this.arrowElement.classList.add(`popup__arrow--${m}`);
}
});
}
renderTrigger() {
return w``;
}
renderPopup() {
return w`
<slot name="trigger" =${this._handleTriggerSlotChange}>
${this.renderTrigger()}
</slot>
<div
part="popup"
id="popup"
?inert=${!this.opened}
class=${_("popup", `popup--${this.size}`, {
"popup--opened": this.opened,
"popup--fixed": this.floatingStrategy === "fixed",
"popup--has-arrow": this.hasArrow,
"popup--overflow": this.overflow,
"popup--full-width": this.fullWidth
})}>
<slot =${this._handleContentSlotChange}></slot>
${this.hasArrow ? w`<div
part="arrow"
class=${_("popup__arrow")}
role="presentation"></div>` : ""}
</div>
`;
}
};
c.styles = L(z);
let i = c;
r([
S(".popup")
], i.prototype, "popup");
r([
S(".popup__arrow")
], i.prototype, "arrowElement");
r([
o({ reflect: !0, type: Boolean })
], i.prototype, "disabled");
r([
o({ reflect: !0, type: Boolean })
], i.prototype, "opened");
r([
o({ reflect: !0 })
], i.prototype, "placement");
r([
o({ reflect: !0 })
], i.prototype, "floatingStrategy");
r([
o({ type: Number })
], i.prototype, "offset");
r([
o({ type: Boolean })
], i.prototype, "sync");
r([
o({ type: Number })
], i.prototype, "maxHeight");
r([
o({ type: Number })
], i.prototype, "maxWidth");
r([
o({ type: Boolean })
], i.prototype, "hasArrow");
r([
o({ type: Boolean })
], i.prototype, "overflow");
r([
o({ type: Boolean })
], i.prototype, "fullWidth");
r([
o({ type: Boolean })
], i.prototype, "disableViewportAutoClose");
export {
i as default
};
//# sourceMappingURL=popup-base-element.js.map