@dso-toolkit/core 45.0.0 → 45.1.0

package/dist/collection/components/ozon-content/nodes/figuur.node.js

@@ -1,22 +1,57 @@
 import { h } from '@stencil/core';
 import { getNodeName } from '../get-node-name.function';
+const Bijschrift = ({ bijschrift, bron, mapNodeToJsx }) => {
+  return (h("span", { class: "figuur-bijschrift" },
+    bijschrift && bijschrift.inhoud && mapNodeToJsx(bijschrift.inhoud),
+    bron && (`${bijschrift ? ' ' : ''}(bron: ${mapNodeToJsx(bron)})`)));
+};
 export class OzonContentFiguurNode {
   constructor() {
     this.name = [
       'Figuur',
     ];
   }
-  render(node) {
-    var _a, _b, _c, _d, _e;
+  setImageDimensions(imageElement, schaal) {
+    const { naturalHeight, naturalWidth } = imageElement;
+    imageElement.height = naturalHeight * (schaal / 100);
+    imageElement.width = naturalWidth * (schaal / 100);
+  }
+  onImageLoad(event, schaal) {
+    if (event.target instanceof HTMLImageElement && schaal) {
+      this.setImageDimensions(event.target, schaal);
+    }
+  }
+  render(node, { mapNodeToJsx }) {
+    var _a, _b, _c, _d, _e, _f, _g;
     const childNodes = Array.from(node.childNodes);
     const titel = (_a = childNodes.find(n => getNodeName(n) === 'Titel')) === null || _a === void 0 ? void 0 : _a.textContent;
-    const bijschrift = (_b = childNodes.find(n => getNodeName(n) === 'Bijschrift')) === null || _b === void 0 ? void 0 : _b.textContent;
+    const bron = (_b = childNodes.find(n => getNodeName(n) === 'Bron')) === null || _b === void 0 ? void 0 : _b.childNodes;
     const illustratieNode = childNodes.find(n => getNodeName(n) === 'Illustratie');
+    const bijschriftNode = childNodes.find(n => getNodeName(n) === 'Bijschrift');
     if (illustratieNode instanceof Element) {
-      return (h("div", { class: "dso-ozon-figuur" },
+      const illustratie = {
+        naam: illustratieNode.getAttribute('naam'),
+        breedte: illustratieNode.getAttribute('breedte'),
+        hoogte: illustratieNode.getAttribute('hoogte'),
+        uitlijning: illustratieNode.getAttribute('uitlijning'),
+        alt: illustratieNode.getAttribute('alt'),
+        schaal: illustratieNode.getAttribute('schaal'),
+      };
+      const bijschrift = bijschriftNode instanceof Element ? {
+        inhoud: bijschriftNode.childNodes,
+        locatie: (_c = bijschriftNode.getAttribute('locatie')) !== null && _c !== void 0 ? _c : 'onder',
+      }
+        : undefined;
+      return (h("div", { class: `dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : 'onder'}` },
+        titel && (h("span", { class: "figuur-titel" }, titel)),
+        (bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === 'boven' && h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx }),
         h("dso-image-overlay", null,
-          h("img", { src: (_c = illustratieNode.getAttribute('naam')) !== null && _c !== void 0 ? _c : undefined, alt: (_e = (_d = titel !== null && titel !== void 0 ? titel : illustratieNode.getAttribute('alt')) !== null && _d !== void 0 ? _d : illustratieNode.getAttribute('naam')) !== null && _e !== void 0 ? _e : undefined })),
-        bijschrift && (h("span", { class: "figuur-bijschrift" }, bijschrift))));
+          h("div", { slot: "titel" },
+            h("span", null, titel)),
+          h("img", { src: (_d = illustratie.naam) !== null && _d !== void 0 ? _d : undefined, alt: (_g = (_f = (_e = illustratie.alt) !== null && _e !== void 0 ? _e : titel) !== null && _f !== void 0 ? _f : illustratie.naam) !== null && _g !== void 0 ? _g : undefined, onLoad: (event) => this.onImageLoad(event, Number(illustratie.schaal)) }),
+          h("div", { slot: "bijschrift" },
+            h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx }))),
+        ((bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === 'onder' || (!bijschrift && bron)) && h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx })));
     }
   }
 }

package/dist/collection/components/ozon-content/ozon-content.css

@@ -65,14 +65,6 @@ button.toggle-note:focus, button.toggle-note:focus-visible {
 button.toggle-note:active {
   outline: 0;
 }
-button.toggle-note.extern::after, button.toggle-note.download::after {
-  content: "";
-  display: inline-block;
-  height: 1.5em;
-  margin-left: 8px;
-  vertical-align: top;
-  width: 1.5em;
-}
 button.toggle-note[disabled] {
   color: #afcf9d;
 }
@@ -92,38 +84,6 @@ button.toggle-note.btn-align {
   padding: 11px 0;
   position: relative;
 }
-button.toggle-note.extern::after, button.toggle-note.download::after {
-  position: relative;
-  top: -2px;
-}
-button.toggle-note.download::after {
-  background: var(--dso-icon, var(--di-download)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 24px;
-  vertical-align: top;
-  width: 24px;
-}
-button.toggle-note.download[disabled]::after {
-  --dso-icon: var(--di-download-grasgroen-40);
-}
-button.toggle-note.download:not([disabled]):hover::after, button.toggle-note.download:not([disabled]):active::after {
-  --dso-icon: var(--di-download-scampi);
-}
-button.toggle-note.extern::after {
-  background: var(--dso-icon, var(--di-external-link)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 24px;
-  vertical-align: top;
-  width: 24px;
-}
-button.toggle-note.extern[disabled]::after {
-  --dso-icon: var(--di-external-link-grasgroen-40);
-}
-button.toggle-note.extern:not([disabled]):hover::after, button.toggle-note.extern:not([disabled]):active::after {
-  --dso-icon: var(--di-external-link-scampi);
-}
 button.toggle-note.dso-spinner-left::before {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
@@ -150,6 +110,12 @@ button.toggle-note span:not(.sr-only) + dso-icon,
 button.toggle-note span:not(.sr-only) + svg.di {
   margin-left: 8px;
 }
+button.toggle-note svg.di.di-chevron-down + span:not(.sr-only),
+button.toggle-note svg.di.di-chevron-up + span:not(.sr-only),
+button.toggle-note span:not(.sr-only) + svg.di.di-chevron-down,
+button.toggle-note span:not(.sr-only) + svg.di.di-chevron-up {
+  margin-left: 4px;
+}
 button.toggle-note dso-icon[icon=chevron-left] + span:not(.sr-only),
 button.toggle-note dso-icon[icon=chevron-right] + span:not(.sr-only),
 button.toggle-note svg.di.di-angle-down + span:not(.sr-only),
@@ -210,10 +176,25 @@ span[role=paragraph] {
   text-align: right;
 }
 
+.dso-ozon-figuur {
+  margin-bottom: 16px;
+}
 .dso-ozon-figuur .figuur-bijschrift {
   display: block;
   font-size: 0.75rem;
-  padding-bottom: 2.5rem;
+  font-style: italic;
+}
+.dso-ozon-figuur.bijschrift-boven .figuur-bijschrift {
+  padding-bottom: 0.25rem;
+}
+.dso-ozon-figuur.bijschrift-onder .figuur-bijschrift {
+  padding-top: 0.25rem;
+}
+.dso-ozon-figuur .figuur-titel {
+  color: #8b4a6a;
+  display: block;
+  font-weight: 500;
+  padding-bottom: 0.5rem;
 }
 
 .od-Tabel thead {

package/dist/collection/components/pagination/pagination.css

@@ -9,6 +9,7 @@
 }
 
 .pagination {
+  padding-inline-start: initial;
   text-align: center;
 }
 .pagination > li {

package/dist/collection/components/pagination/pagination.js

@@ -1,11 +1,22 @@
-import { h, Component, Event, Prop } from '@stencil/core';
+import { h, Component, Element, Event, Fragment, Listen, Prop, State } from '@stencil/core';
 export class Pagination {
   constructor() {
+    this.sizePositionsMap = {
+      small: 7,
+      medium: 9,
+      large: 11,
+    };
     /**
      * This function is called to format the href
      */
     this.formatHref = (page) => '#' + page;
   }
+  /**
+   * Listens to the dsoSizeChange event on Responsive Element
+   */
+  sizeChangeHandler(event) {
+    this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);
+  }
   clickHandler(e, page) {
     this.dsoSelectPage.emit({
       originalEvent: e,
@@ -14,24 +25,110 @@ export class Pagination {
     });
   }
   ;
+  componentDidLoad() {
+    var _a;
+    (_a = this.responsiveElement) === null || _a === void 0 ? void 0 : _a.getSize().then((size) => this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size]));
+  }
   render() {
     var _a;
     if (!this.totalPages) {
       return null;
     }
+    if (this.availablePositions === undefined) {
+      return (h("dso-responsive-element", { ref: element => this.responsiveElement = element }));
+    }
+    const availablePositions = this.availablePositions;
     const currentPage = (_a = this.currentPage) !== null && _a !== void 0 ? _a : 0;
-    const pages = Array.from({ length: this.totalPages }, (_value, i) => i + 1);
-    const currentPageOutOfBounds = currentPage < pages[0] || currentPage > pages[pages.length - 1];
-    return (h("ul", { class: "pagination" },
-      h("li", { class: (currentPage <= pages[0] || currentPageOutOfBounds) ? 'dso-page-hidden' : undefined },
-        h("a", { href: this.formatHref(pages[0]), "aria-label": "Vorige", onClick: e => currentPage && this.clickHandler(e, pages[currentPage - 2]) },
-          h("dso-icon", { icon: "chevron-left" }))),
-      pages.map(page => (h("li", { key: page, class: currentPage === page ? 'active' : undefined }, currentPage === page
-        ? (h("span", { "aria-current": "page" }, page))
-        : (h("a", { href: this.formatHref(page), onClick: e => this.clickHandler(e, page) }, page))))),
-      h("li", { class: (currentPage >= pages[pages.length - 1] || currentPageOutOfBounds) ? 'dso-page-hidden' : undefined },
-        h("a", { href: this.formatHref(pages[pages.length - 1]), "aria-label": "Volgende", onClick: e => currentPage && this.clickHandler(e, pages[currentPage]) },
-          h("dso-icon", { icon: "chevron-right" })))));
+    const pages = this.getPages(currentPage, this.availablePositions, this.totalPages);
+    return (h("dso-responsive-element", { ref: element => this.responsiveElement = element },
+      h("ul", { class: "pagination" },
+        h("li", { class: (currentPage <= 1 || currentPage > this.totalPages) ? 'dso-page-hidden' : undefined },
+          h("a", { href: this.formatHref(pages[0]), "aria-label": "Vorige", onClick: e => currentPage && this.clickHandler(e, pages[currentPage - 2]) },
+            h("dso-icon", { icon: "chevron-left" }))),
+        (pages).map(page => (h(Fragment, null,
+          this.showEllipsisBeforeLast(pages, page, availablePositions, pages[pages.length - 1]) &&
+            h("li", null,
+              h("span", null, "...")),
+          h("li", { key: page, class: currentPage === page ? 'active' : undefined }, currentPage === page
+            ? (h("span", { "aria-current": "page" }, page))
+            : (h("a", { href: this.formatHref(page), onClick: e => this.clickHandler(e, page) }, page))),
+          this.showEllipsisAfterFirst(pages, page, availablePositions) &&
+            h("li", null,
+              h("span", null, "..."))))),
+        h("li", { class: (currentPage < 1 || currentPage >= this.totalPages) ? 'dso-page-hidden' : undefined },
+          h("a", { href: this.formatHref(pages[pages.length - 1]), "aria-label": "Volgende", onClick: e => currentPage && this.clickHandler(e, pages[currentPage]) },
+            h("dso-icon", { icon: "chevron-right" }))))));
+  }
+  getAvailablePositions(sizePositions) {
+    if (sizePositions % 2 === 0) { // Even aantal posities zorgt voor een scheve pagination
+      return sizePositions - 1;
+    }
+    if (sizePositions <= 3) { // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.
+      return 3;
+    }
+    return sizePositions;
+  }
+  getPages(currentPage, availablePositions, totalPages) {
+    if (totalPages + 2 <= availablePositions) { // + 2 voor de vorige en volgende knop
+      return Array.from({ length: totalPages }, (_value, i) => i + 1);
+    }
+    if (availablePositions === 3) {
+      return [currentPage];
+    }
+    if (availablePositions === 5) {
+      return [1, currentPage, totalPages];
+    }
+    return [
+      1,
+      ...this.getPageRange(currentPage, availablePositions, totalPages),
+      totalPages
+    ];
+  }
+  getPageRange(currentPage, availablePositions, totalPages) {
+    const range = [];
+    const positionRange = Math.floor(availablePositions / 2);
+    if (currentPage <= positionRange) {
+      for (let i = 2; i <= availablePositions - 4; i++) {
+        range.push(i);
+      }
+    }
+    if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {
+      if (positionRange === 1) {
+        if (currentPage > totalPages - 2) {
+          range.push(totalPages - 2);
+        }
+        range.push(currentPage);
+        if (currentPage < 3) {
+          range.push(3);
+        }
+      }
+      if (positionRange > 1) {
+        const pagesBeforeOrAfter = positionRange - 3;
+        for (let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange); i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange); i++) {
+          if (i > 2 && i < totalPages - 1) {
+            range.push(i);
+          }
+        }
+      }
+    }
+    if (currentPage > totalPages - positionRange) {
+      for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {
+        range.push(i);
+      }
+    }
+    return range.filter((v, i, a) => a.indexOf(v) === i);
+  }
+  showEllipsisAfterFirst(pages, page, availablePositions) {
+    return pages.indexOf(page) === 0 &&
+      pages[pages.length - 1] > availablePositions - 2 &&
+      !pages.some(p => p === 2) &&
+      availablePositions >= 7;
+  }
+  showEllipsisBeforeLast(pages, page, availablePositions, totalPages) {
+    return pages.indexOf(page) === pages.length - 1 &&
+      pages[pages.length - 1] > availablePositions - 2 &&
+      !pages.some(p => p === totalPages - 1) &&
+      availablePositions >= 7;
   }
   static get is() { return "dso-pagination"; }
   static get encapsulation() { return "shadow"; }
@@ -93,6 +190,9 @@ export class Pagination {
       "defaultValue": "(page) => '#' + page"
     }
   }; }
+  static get states() { return {
+    "availablePositions": {}
+  }; }
   static get events() { return [{
       "method": "dsoSelectPage",
       "name": "dsoSelectPage",
@@ -114,4 +214,12 @@ export class Pagination {
         }
       }
     }]; }
+  static get elementRef() { return "host"; }
+  static get listeners() { return [{
+      "name": "dsoSizeChange",
+      "method": "sizeChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
 }

package/dist/collection/components/responsive-element/responsive-element.interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/responsive-element/responsive-element.js

@@ -1,4 +1,4 @@
-import { Component, Element, Host, State, h } from '@stencil/core';
+import { Component, Element, Event, h, Host, Method, State } from '@stencil/core';
 const elementSizes = [
   {
     width: 624, alias: 'large'
@@ -18,8 +18,12 @@ export class ResponsiveElement {
       var _a, _b;
       const size = (_b = (_a = elementSizes.find(s => entry.contentRect.width >= s.width)) === null || _a === void 0 ? void 0 : _a.alias) !== null && _b !== void 0 ? _b : elementSizes[0].alias;
       this.sizeAlias = size;
+      this.dsoSizeChange.emit(size);
     });
   }
+  async getSize() {
+    return this.sizeAlias;
+  }
   componentWillLoad() {
     this.observer.observe(this.host);
   }
@@ -42,5 +46,48 @@ export class ResponsiveElement {
     "sizeAlias": {},
     "sizeWidth": {}
   }; }
+  static get events() { return [{
+      "method": "dsoSizeChange",
+      "name": "dsoSizeChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "ResponsiveElementSize",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {
+          "ResponsiveElementSize": {
+            "location": "import",
+            "path": "./responsive-element.interfaces"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "getSize": {
+      "complexType": {
+        "signature": "() => Promise<ResponsiveElementSize>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "ResponsiveElementSize": {
+            "location": "import",
+            "path": "./responsive-element.interfaces"
+          }
+        },
+        "return": "Promise<ResponsiveElementSize>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
   static get elementRef() { return "host"; }
 }

package/dist/collection/components/responsive-element/responsive-element.template.js

@@ -1,7 +1,9 @@
 import { html } from 'lit-html';
-export function responsiveElementTemplate({ children }) {
+export function responsiveElementTemplate({ dsoSizeChange }, children) {
   return html `
-    <dso-responsive-element>
+    <dso-responsive-element
+      @dsoSizeChange=${dsoSizeChange}
+    >
       ${children}
     </dso-responsive-element>
   `;

package/dist/collection/components/toggletip/toggletip.css

@@ -4,6 +4,10 @@
   box-sizing: border-box;
 }
 
+:host {
+  display: inline-block;
+}
+
 :host(:focus) {
   outline: none;
 }