@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
210 lines (209 loc) • 8.36 kB
JavaScript
import { c as e, d as t, l as n, o as r, r as i, s as a } from "./element-cZ85T_aa.js";
import { t as o } from "./class-map-C8HuhNzZ.js";
import { n as s, t as c } from "./element-with-slot-4J2o3SeU.js";
import "./icon-Co72KtgF.js";
import { n as l, t as u } from "./ref-RS8Uv6uC.js";
var d = {
name: "pkt-modal",
react: "PktModal",
"css-class": "pkt-modal",
isElement: !0,
isPureReact: !0,
events: {
"background-click": { description: "Event som trigges når bakgrunnen trykkes på" },
close: { description: "Event som trigges når meldingsboksen lukkes" }
},
props: {
open: {
name: "Åpen",
description: "Deklarativ styring av modalens åpen/lukket-tilstand. Kan brukes i stedet for showModal()/close()-metodene.",
type: "boolean",
category: "tech",
default: !1
},
headingText: {
name: "Heading text",
description: "Heading tekst på modalen",
type: "string",
category: "contents"
},
hideCloseButton: {
name: "Gjem 'Lukk'-knapp",
description: "Gjemmer lukkeknappen. Dersom denne er satt til true, vil ikke lukkeknappen vises, og dermed er det viktig at man tilbyr en annen måte som f.eks. en knapp for å lukke modalen på.",
type: "boolean",
category: "ui",
default: !1
},
closeOnBackdropClick: {
name: "Lukk modalen når bakgrunnen trykkes på",
description: "Lukk modalen når bakgrunnen trykkes på",
type: "boolean",
category: "tech",
default: !1
},
closeButtonSkin: {
name: "Stil på lukkeknappen",
description: "Stil på lukkeknappen",
type: ["blue", "yellow-filled"],
category: "ui",
default: "blue"
},
size: {
name: "Størrelse",
description: "Størrelsen på modalen",
type: [
"small",
"medium",
"large",
"fit-content"
],
category: "ui",
default: "medium"
},
variant: {
name: "Variant",
description: "Standard dialog eller skuff",
type: ["dialog", "drawer"],
category: "ui",
default: "dialog"
},
drawerPosition: {
name: "Skuffposisjon",
description: "Posisjonen til skuffen",
type: ["left", "right"],
category: "ui",
default: "right"
},
transparentBackdrop: {
name: "Gjennomsiktig bakgrunn",
description: "Bakgrunnen er gjennomsiktig",
type: "boolean",
category: "ui",
default: !1
},
removePadding: {
name: "Fjern padding",
description: "Fjerner paddingen rundt innholdet i modalen",
type: "boolean",
category: "ui",
default: !1
}
},
slots: { default: { description: "Innholdet i meldingen. Her tilbyr vi støtteklasser for å style 1-3 knapper i modalen." } }
}, f = class extends c {
constructor() {
super(), this.open = !1, this.headingText = "", this.removePadding = !1, this.hideCloseButton = d.props.hideCloseButton.default, this.closeOnBackdropClick = d.props.closeOnBackdropClick.default, this.closeButtonSkin = "blue", this.size = d.props.size.default, this.variant = "dialog", this.drawerPosition = "right", this.transparentBackdrop = !1, this.dialogRef = u(), this._isOpen = !1, this.close = (e, t = !1) => {
if (!this._isOpen) return;
this._isOpen = !1, this.open = !1, document.body.classList.remove("pkt-modal--open");
let n = document.activeElement;
n && !this.isElementInViewport(n) && n.scrollIntoView({
behavior: "smooth",
block: "nearest"
}), this.dispatchEvent(new CustomEvent("close", {
detail: { origin: e },
bubbles: !0,
composed: !0
})), t || this.dialogRef.value?.close(), this.requestUpdate();
}, this.showModal = (e = null) => {
this._isOpen = !0, this.open = !0, this.dialogRef.value?.showModal(), document.body.classList.add("pkt-modal--open"), this.dispatchEvent(new CustomEvent("showModal", {
detail: { origin: e },
bubbles: !0,
composed: !0
})), this.requestUpdate();
}, 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);
}
updated(e) {
super.updated(e), e.has("open") && (this.open && !this._isOpen ? this.showModal() : !this.open && this._isOpen && this.close(new Event("close"), !1));
}
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-B7W3teD0.js").then((e) => e.default)).registerDialog(this.dialogRef.value), this.dialogRef.value.addEventListener("close", () => {
this.close(new Event("close"), !0);
}));
}
handleKeyDown(e) {
e.key === "Escape" && this.close(e);
}
handleBackdropClick(e) {
this.closeOnBackdropClick && e.target === this.dialogRef?.value && this.close(e);
}
isElementInViewport(e) {
let 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() {
let 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"
}, r = {
"pkt-modal__headingText": !0,
"pkt-txt-24": !0
}, i = {
"pkt-modal__content": !0,
"pkt-txt-18-light": !0
}, a = this.closeButtonSkin === "blue", c = {
"pkt-modal__closeButton": !0,
[`pkt-modal__closeButton--${this.closeButtonSkin}`]: !0
};
return t`
<dialog
class=${o(e)}
${l(this.dialogRef)}
aria-labelledby=${this.headingText ? "pkt-modal__headingText" : n}
aria-describedby="pkt-modal__content"
=${(e) => this.close(e, !0)}
>
<div class="pkt-modal__wrapper">
${this.headingText || !this.hideCloseButton ? t`<div class="pkt-modal__header">
<div class="pkt-modal__header-background"></div>
${this.headingText ? t`<h1 id="pkt-modal__headingText" class=${o(r)}>
${this.headingText}
</h1>` : t`<div class="pkt-modal__headingText"></div>`}
${this.hideCloseButton ? t`<div class="pkt-modal__noCloseButton"></div>` : t`<div class="${o(c)}">
<pkt-button
=${(e) => this.close(e)}
aria-label="close"
iconname="close"
variant="icon-only"
size="medium"
skin=${a ? "tertiary" : "primary"}
>
Lukk
</pkt-button>
</div>`}
</div>` : n}
<div class="pkt-modal__container">
<div id="pkt-modal__content" class=${o(i)}>
${s(this)}
</div>
</div>
</div>
</dialog>
`;
}
};
i([a({
type: Boolean,
reflect: !0
})], f.prototype, "open", void 0), i([a({ type: String })], f.prototype, "headingText", void 0), i([a({ type: Boolean })], f.prototype, "removePadding", void 0), i([a({ type: Boolean })], f.prototype, "hideCloseButton", void 0), i([a({ type: Boolean })], f.prototype, "closeOnBackdropClick", void 0), i([a({ type: String })], f.prototype, "closeButtonSkin", void 0), i([a({ type: String })], f.prototype, "size", void 0), i([a({ type: String })], f.prototype, "variant", void 0), i([a({ type: String })], f.prototype, "drawerPosition", void 0), i([a({ type: Boolean })], f.prototype, "transparentBackdrop", void 0), i([r()], f.prototype, "_isOpen", void 0);
try {
e("pkt-modal")(f);
} catch {
console.warn("Forsøker å definere <pkt-modal>, men den er allerede definert");
}
//#endregion
//#region src/components/modal/index.ts
var p = f;
//#endregion
export { f as n, p as t };