@dso-toolkit/core 46.0.0 → 47.0.0

package/dist/collection/components/card/card.js

@@ -0,0 +1,112 @@
+import { h, Host } from "@stencil/core";
+import { isModifiedEvent } from "../../utils/is-modified-event";
+export class Card {
+  constructor() {
+    this.isSelectable = false;
+    this.hasImage = false;
+  }
+  clickEventHandler(e) {
+    if (!(e.target instanceof HTMLElement)) {
+      return;
+    }
+    let element = e.target;
+    while (element !== this.host && element !== null) {
+      if (element instanceof HTMLButtonElement ||
+        element instanceof HTMLAnchorElement ||
+        element instanceof HTMLInputElement ||
+        element === null) {
+        return;
+      }
+      if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {
+        element = element.parentNode.host;
+      }
+      else {
+        element = element.parentElement;
+      }
+    }
+    return this.dsoCardClicked.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
+  }
+  componentWillLoad() {
+    this.isSelectable = this.host.querySelector("*[slot = 'selectable']") !== null;
+    this.hasImage = this.host.querySelector("*[slot = 'image']") !== null;
+  }
+  render() {
+    return (h(Host, { onClick: (e) => this.clickEventHandler(e) }, h("div", { class: "dso-card-selectable", hidden: !this.isSelectable }, h("slot", { name: "selectable" })), h("div", { class: "dso-card-image", hidden: !this.hasImage }, h("slot", { name: "image" })), h("div", { class: "dso-card-heading" }, h("slot", { name: "heading" }), h("slot", { name: "interactions" })), h("div", { class: "dso-card-content" }, h("slot", { name: "content" }))));
+  }
+  static get is() { return "dso-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "isSelectable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-selectable",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "hasImage": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "has-image",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dsoCardClicked",
+        "name": "dsoCardClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "DsoCardClickedEvent",
+          "resolved": "DsoCardClickedEvent",
+          "references": {
+            "DsoCardClickedEvent": {
+              "location": "import",
+              "path": "./card.interfaces"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/card-container/card-container.css

@@ -0,0 +1,12 @@
+:host .dso-card-list {
+  padding-left: 0;
+  list-style: none;
+  border-bottom: 1px solid #ccc;
+  margin-top: -1px;
+}
+:host .dso-card-grid {
+  display: grid;
+  gap: 32px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 1fr;
+}

package/dist/collection/components/card-container/card-container.interfaces.js

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

package/dist/collection/components/card-container/card-container.js

@@ -0,0 +1,48 @@
+import { h, Fragment } from "@stencil/core";
+export class CardContainer {
+  constructor() {
+    this.mode = "list";
+  }
+  render() {
+    return (h(Fragment, null, this.mode === "list" && (h("ul", { class: "dso-card-list" }, h("slot", null))), this.mode === "grid" && (h("div", { class: "dso-card-grid" }, h("slot", null)))));
+  }
+  static get is() { return "dso-card-container"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["card-container.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["card-container.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CardContainerMode",
+          "resolved": "\"grid\" | \"list\"",
+          "references": {
+            "CardContainerMode": {
+              "location": "import",
+              "path": "./card-container.interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "\"list\""
+      }
+    };
+  }
+}

package/dist/collection/components/header/header.css

@@ -25,25 +25,10 @@
 .logo-container {
   display: flex;
   flex-wrap: wrap;
+  gap: 0 24px;
   padding-bottom: 16px;
   padding-top: 16px;
 }
-@media screen and (max-width: 767px) {
-  .logo-container {
-    max-height: 40px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .sub-logo {
-    margin-left: 24px;
-  }
-}
-@media screen and (max-width: 767px) {
-  .sub-logo {
-    flex-basis: 100%;
-  }
-}
 
 .login .dso-tertiary,
 .logout .dso-tertiary {
@@ -101,11 +86,6 @@ dso-dropdown-menu button {
   font-family: Asap, sans-serif;
   padding-right: 32px;
 }
-@media screen and (max-width: 767px) {
-  dso-dropdown-menu {
-    top: 12px;
-  }
-}
 dso-dropdown-menu .dso-dropdown-options {
   border: 0;
   border-radius: 0;
@@ -200,6 +180,9 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
   border-bottom: 4px solid #8b4a6a;
   font-weight: bold;
 }
+.dso-nav.dso-nav-main {
+  display: flex !important;
+}
 .dso-nav.dso-nav-main > li > a {
   text-decoration: none;
   font-size: 1.25em;
@@ -235,18 +218,6 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
   top: auto;
   transform: none;
 }
-.dso-nav.dso-nav-sub > li {
-  display: inline-block;
-}
-.dso-nav.dso-nav-sub > li > a {
-  text-decoration: none;
-  font-size: 16px;
-  margin-top: 4px;
-  padding: 4px 8px 3px;
-}
-.dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus, .dso-nav.dso-nav-sub > li > a:active {
-  text-decoration: underline;
-}
 .dso-nav .menu-user-home {
   margin-left: auto;
 }

package/dist/collection/components/header/header.js

@@ -1,6 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 import clsx from "clsx";
 import debounce from "debounce";
+import { isModifiedEvent } from "../../utils/is-modified-event";
 const minDesktopViewportWidth = 992;
 export class Header {
   constructor() {
@@ -27,7 +28,7 @@ export class Header {
     var _a, _b;
     this.dsoHeaderClick.emit({
       originalEvent: e,
-      isModifiedEvent: e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey,
+      isModifiedEvent: isModifiedEvent(e),
       type,
       menuItem: options === null || options === void 0 ? void 0 : options.menuItem,
       url: (_a = options === null || options === void 0 ? void 0 : options.url) !== null && _a !== void 0 ? _a : (_b = options === null || options === void 0 ? void 0 : options.menuItem) === null || _b === void 0 ? void 0 : _b.url,

package/dist/collection/components/icon/icon.js

@@ -78,10 +78,13 @@ import sortAscending from "@dso-toolkit/sources/src/icons/sort-ascending.svg";
 import sortDescending from "@dso-toolkit/sources/src/icons/sort-descending.svg";
 import sort from "@dso-toolkit/sources/src/icons/sort.svg";
 import sound from "@dso-toolkit/sources/src/icons/sound.svg";
+import statusError from "@dso-toolkit/sources/src/icons/status-error.svg";
 import statusDanger from "@dso-toolkit/sources/src/icons/status-danger.svg";
 import statusInfo from "@dso-toolkit/sources/src/icons/status-info.svg";
 import statusSuccess from "@dso-toolkit/sources/src/icons/status-success.svg";
 import statusWarning from "@dso-toolkit/sources/src/icons/status-warning.svg";
+import statusWarningInline from "@dso-toolkit/sources/src/icons/status-warning-inline.svg";
+import statusWarningInlineNegative from "@dso-toolkit/sources/src/icons/status-warning-inline-negative.svg";
 import table from "@dso-toolkit/sources/src/icons/table.svg";
 import times from "@dso-toolkit/sources/src/icons/times.svg";
 import trash from "@dso-toolkit/sources/src/icons/trash.svg";
@@ -172,9 +175,12 @@ const icons = [
   { alias: "sort", svg: sort },
   { alias: "sound", svg: sound },
   { alias: "status-danger", svg: statusDanger },
+  { alias: "status-error", svg: statusError },
   { alias: "status-info", svg: statusInfo },
   { alias: "status-success", svg: statusSuccess },
   { alias: "status-warning", svg: statusWarning },
+  { alias: "status-warning-inline", svg: statusWarningInline },
+  { alias: "status-warning-inline-negative", svg: statusWarningInlineNegative },
   { alias: "table", svg: table },
   { alias: "times", svg: times },
   { alias: "trash", svg: trash },

package/dist/collection/components/modal/modal.js

@@ -7,6 +7,7 @@ export class Modal {
     this.hasFooter = undefined;
     this.modalTitle = undefined;
     this.role = "dialog";
+    this.showCloseButton = true;
   }
   componentWillLoad() {
     this.hasFooter = this.host.querySelector("*[slot = 'footer']") !== null;
@@ -21,7 +22,7 @@ export class Modal {
     (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
   }
   render() {
-    return (h(Host, { class: "dso-modal", role: this.role, "aria-modal": "true", "aria-labelledby": this.ariaId }, h("div", { class: "dso-dialog", role: "document", ref: (element) => (this.dialogElement = element) }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten")))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("div", { class: "dso-body" }, h("slot", { name: "body" })), this.hasFooter && (h("div", { class: "dso-footer" }, h("slot", { name: "footer" }))))));
+    return (h(Host, { class: "dso-modal", role: this.role, "aria-modal": "true", "aria-labelledby": this.ariaId }, h("div", { class: "dso-dialog", role: "document", ref: (element) => (this.dialogElement = element) }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("div", { class: "dso-body" }, h("slot", { name: "body" })), this.hasFooter && (h("div", { class: "dso-footer" }, h("slot", { name: "footer" }))))));
   }
   setFocusTrap() {
     if (this.dialogElement && !this.trap) {
@@ -97,6 +98,24 @@ export class Modal {
         "attribute": "role",
         "reflect": false,
         "defaultValue": "\"dialog\""
+      },
+      "showCloseButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "when `false` the close button in the header will not be rendered. Defaults to `true`"
+        },
+        "attribute": "show-close-button",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }

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

@@ -39,7 +39,7 @@ export class OzonContentFiguurNode {
           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("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 }))));
+      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, titel && (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)) }), (bijschrift || bron) && (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/pagination/pagination.js

@@ -1,4 +1,5 @@
 import { h, Fragment, } from "@stencil/core";
+import { isModifiedEvent } from "../../utils/is-modified-event";
 export class Pagination {
   constructor() {
     this.sizePositionsMap = {
@@ -21,7 +22,7 @@ export class Pagination {
     this.dsoSelectPage.emit({
       originalEvent: e,
       page,
-      isModifiedEvent: e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey,
+      isModifiedEvent: isModifiedEvent(e),
     });
   }
   componentDidLoad() {

package/dist/collection/utils/is-modified-event.js

@@ -0,0 +1,2 @@
+/** returns `true` when the event is triggered while holding Ctrl, Alt or other modifiers, or on right-click. Can be used to determine navigation. */
+export const isModifiedEvent = (e) => e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey;

package/dist/custom-elements/index.d.ts

@@ -44,6 +44,18 @@ export const DsoBanner: {
   new (): DsoBanner;
 };
 
+interface DsoCard extends Components.DsoCard, HTMLElement {}
+export const DsoCard: {
+  prototype: DsoCard;
+  new (): DsoCard;
+};
+
+interface DsoCardContainer extends Components.DsoCardContainer, HTMLElement {}
+export const DsoCardContainer: {
+  prototype: DsoCardContainer;
+  new (): DsoCardContainer;
+};
+
 interface DsoDatePicker extends Components.DsoDatePicker, HTMLElement {}
 export const DsoDatePicker: {
   prototype: DsoDatePicker;