@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
169 lines (168 loc) • 6.66 kB
JavaScript
import { e as p } from "./class-map-BpTj9gtz.js";
import { P as k, E as f, x as r, n as l, a as v } from "./element-CgEWt74-.js";
import { r as g } from "./state-Bo2bck5_.js";
import { P as _ } from "./pkt-slot-controller-BPGj-LC5.js";
import { e as u, n as m } from "./ref-BBYSqgeW.js";
import "./icon-CC1js8eR.js";
const y = {
hideCloseButton: {
default: !1
},
closeOnBackdropClick: {
default: !1
},
size: {
default: "medium"
}
}, h = {
props: y
};
var w = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (e, t, o, i) => {
for (var n = i > 1 ? void 0 : i ? b(t, o) : t, c = e.length - 1, d; c >= 0; c--)
(d = e[c]) && (n = (i ? d(t, o, n) : d(n)) || n);
return i && n && w(t, o, n), n;
};
let s = class extends k {
constructor() {
super(), this.headingText = "", this.removePadding = !1, this.hideCloseButton = h.props.hideCloseButton.default, this.closeOnBackdropClick = h.props.closeOnBackdropClick.default, this.closeButtonSkin = "blue", this.size = h.props.size.default, this.variant = "dialog", this.drawerPosition = "right", this.transparentBackdrop = !1, this.defaultSlot = u(), this.dialogRef = u(), this._isOpen = !1, this.close = (e, t = !1) => {
var i;
if (!this._isOpen) return;
this._isOpen = !1, document.body.classList.remove("pkt-modal--open");
const o = document.activeElement;
o && !this.isElementInViewport(o) && o.scrollIntoView({ behavior: "smooth", block: "nearest" }), this.dispatchEvent(
new CustomEvent("close", { detail: { origin: e }, bubbles: !0, composed: !0 })
), t || (i = this.dialogRef.value) == null || i.close(), this.requestUpdate();
}, this.showModal = (e = null) => {
var o;
this._isOpen = !0, (o = this.dialogRef.value) == null || o.showModal();
const t = document.querySelector(".pkt-modal");
requestAnimationFrame(() => {
var i;
this.dialogRef.value && ((i = this.dialogRef.value) == null || i.focus());
}), t && document.body.classList.add("pkt-modal--open"), this.dispatchEvent(
new CustomEvent("showModal", { detail: { origin: e }, bubbles: !0, composed: !0 })
), this.requestUpdate();
}, this.slotController = new _(this, this.defaultSlot), this._isOpen = !1;
}
async connectedCallback() {
super.connectedCallback(), document.addEventListener("keydown", this.handleKeyDown.bind(this)), document.addEventListener("click", this.handleBackdropClick.bind(this));
}
disconnectedCallback() {
super.disconnectedCallback(), document.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("click", this.handleBackdropClick);
}
async firstUpdated(e) {
super.firstUpdated(e), this.dialogRef.value && !window.HTMLDialogElement && !this.dialogRef.value.showModal && ("document" in window && "createElement" in document && (await import("./dialog-polyfill.esm-CbjBMXAG.js").then((o) => o.default)).registerDialog(this.dialogRef.value), this.dialogRef.value.addEventListener("close", () => {
this.close(new Event("close"), !0);
}));
}
// P R I V A T E M E T H O D S
handleKeyDown(e) {
e.key === "Escape" && this.close(e);
}
handleBackdropClick(e) {
var t;
this.closeOnBackdropClick && e.target === ((t = this.dialogRef) == null ? void 0 : t.value) && this.close(e);
}
isElementInViewport(e) {
const t = e.getBoundingClientRect();
return t.top >= 0 && t.left >= 0 && t.bottom <= (window.innerHeight || document.documentElement.clientHeight) && t.right <= (window.innerWidth || document.documentElement.clientWidth);
}
render() {
const e = {
"pkt-modal": !0,
"pkt-modal--removePadding": this.removePadding ?? !1,
"pkt-modal--noHeadingText": this.headingText === "" || this.headingText === void 0,
"pkt-modal--noShadow": this.closeButtonSkin === "yellow-filled",
"pkt-modal--transparentBackdrop": this.transparentBackdrop ?? !1,
[`pkt-modal--${this.size}`]: this.size !== void 0,
[`pkt-modal__${this.variant}`]: this.variant !== void 0,
[`pkt-modal__drawer--${this.drawerPosition}`]: this.variant === "drawer"
}, t = {
"pkt-modal__headingText": !0,
"pkt-txt-24": !0
}, o = {
"pkt-modal__content": !0,
"pkt-txt-18-light": !0
}, i = this.closeButtonSkin === "blue", n = {
"pkt-modal__closeButton": !0,
[`pkt-modal__closeButton--${this.closeButtonSkin}`]: !0
}, c = {
"pkt-btn": !0,
[`pkt-btn--${i ? "tertiary" : "primary"}`]: !0,
"pkt-btn--icon-only": !0,
"pkt-btn--medium": !0
};
return r`
<dialog
class=${p(e)}
${m(this.dialogRef)}
aria-labelledby="pkt-modal__headingText"
aria-describedby="pkt-modal__content"
=${(d) => this.close(d, !0)}
>
<div class="pkt-modal__wrapper">
${this.headingText || !this.hideCloseButton ? r`<div class="pkt-modal__header">
<div class="pkt-modal__header-background"></div>
${this.headingText ? r`<h1 id="pkt-modal__headingText" class=${p(t)}>
${this.headingText}
</h1>` : r`<div class="pkt-modal__headingText"></div>`}
${this.hideCloseButton ? r`<div class="pkt-modal__noCloseButton"></div>` : r`<div class="${p(n)}">
<pkt-button
=${(d) => this.close(d)}
class=${p(c)}
aria-label="close"
iconname="close"
variant="icon-only"
>
Lukk
</pkt-button>
</div>`}
</div>` : f}
<div class="pkt-modal__container">
<div
id="pkt-modal__content"
class=${p(o)}
${m(this.defaultSlot)}
></div>
</div>
</div>
</dialog>
`;
}
};
a([
l({ type: String })
], s.prototype, "headingText", 2);
a([
l({ type: Boolean })
], s.prototype, "removePadding", 2);
a([
l({ type: Boolean })
], s.prototype, "hideCloseButton", 2);
a([
l({ type: Boolean })
], s.prototype, "closeOnBackdropClick", 2);
a([
l({ type: String })
], s.prototype, "closeButtonSkin", 2);
a([
l({ type: String })
], s.prototype, "size", 2);
a([
l({ type: String })
], s.prototype, "variant", 2);
a([
l({ type: String })
], s.prototype, "drawerPosition", 2);
a([
l({ type: Boolean })
], s.prototype, "transparentBackdrop", 2);
a([
g()
], s.prototype, "_isOpen", 2);
s = a([
v("pkt-modal")
], s);
export {
s as P
};