@dso-toolkit/core 45.0.0 → 45.1.0

package/dist/collection/components/image-overlay/image-overlay.js

@@ -6,12 +6,18 @@ export class ImageOverlay {
     this.active = false;
     this.focused = false;
     this.zoomable = false;
+    this.titelSlot = null;
+    this.bijschriftSlot = null;
   }
   loadListener(event) {
     if (event.target instanceof HTMLImageElement) {
       this.setZoomable(event.target);
     }
   }
+  connectedCallback() {
+    this.titelSlot = this.host.querySelector("div[slot='titel']");
+    this.bijschriftSlot = this.host.querySelector("div[slot='bijschrift']");
+  }
   componentDidLoad() {
     this.resizeObserver = new ResizeObserver(debounce(() => {
       const imgElement = this.host.querySelector('img');
@@ -62,12 +68,16 @@ export class ImageOverlay {
     var _a;
     const { src, alt } = (_a = this.host.querySelector('img')) !== null && _a !== void 0 ? _a : {};
     return (h(Host, { tabindex: this.focused || !this.zoomable ? -1 : 0, onFocus: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } },
-      this.active && src && alt && (h("div", { class: "dimmer", ref: element => this.wrapperElement = element },
-        h("div", { class: "wrapper" },
+      this.active && src && alt && (h("div", { class: "dimmer" },
+        h("div", { class: "wrapper", ref: element => this.wrapperElement = element },
+          h("div", { class: "titel", hidden: !this.titelSlot },
+            h("slot", { name: "titel" })),
           h("img", { src: src, alt: alt }),
           h("button", { type: "button", class: "close", onClick: () => this.active = false },
             h("dso-icon", { icon: "times" }),
-            h("span", null, "Sluiten"))))),
+            h("span", null, "Sluiten")),
+          h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot },
+            h("slot", { name: "bijschrift" }))))),
       h("slot", null),
       this.zoomable && (h("button", { type: "button", class: "open", ref: element => this.buttonElement = element, onClick: () => this.active = true, onFocus: () => this.focused = true, onBlur: () => this.focused = false },
         h("dso-icon", { icon: "external-link" }),

package/dist/collection/components/image-overlay/image-overlay.template.js

@@ -2,6 +2,14 @@ import { html } from "lit-html";
 import { imageTemplate } from "@dso-toolkit/css/src/components/image/image.template";
 export function imageOverlayTemplate({ image }) {
   return html `
-    <dso-image-overlay>${imageTemplate(image)}</dso-image-overlay>
+    <dso-image-overlay>
+      <div slot="titel">
+        <span>Afbeelding 1</span>
+      </div>
+      ${imageTemplate(image)}
+      <div slot="bijschrift">
+        <span>Bijschrift bij afbeelding</span>
+      </div>
+    </dso-image-overlay>
   `;
 }