@dso-toolkit/core 51.4.1 → 52.0.1

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-annotation-output.cjs",[[4,"dso-annotation-output",{"identifier":[1],"annotationPrefix":[1,"annotation-prefix"],"toggleAnnotation":[64]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-expandable-heading.cjs",[[1,"dso-expandable-heading",{"open":[4],"heading":[1],"color":[1]}]]],["dso-header.cjs",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32],"labelText":[32]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-accordion-section.cjs",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"state":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"status":[1],"open":[1540],"hasNestedSection":[32],"toggleSection":[64],"scrollSectionIntoView":[64]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-annotation-button.cjs",[[0,"dso-annotation-button",{"identifier":[1]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"subcontent":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal.cjs",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"ariaId":[32],"hasFooter":[32]}]]],["dso-table.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"allowMultipleOpen":[516,"allow-multiple-open"],"getState":[64],"toggleSection":[64],"animationEnd":[64],"closeOpenSections":[64]}]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-slide-toggle.cjs",[[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]]], options);
+  return index.bootstrapLazy([["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-annotation-output.cjs",[[4,"dso-annotation-output",{"identifier":[1],"annotationPrefix":[1,"annotation-prefix"],"toggleAnnotation":[64]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-expandable-heading.cjs",[[1,"dso-expandable-heading",{"open":[4],"heading":[1],"color":[1]}]]],["dso-header.cjs",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32],"labelText":[32],"truncateLabel":[64],"updateTooltipText":[64]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-accordion-section.cjs",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"state":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"status":[1],"open":[1540],"hasNestedSection":[32],"toggleSection":[64],"scrollSectionIntoView":[64]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-annotation-button.cjs",[[0,"dso-annotation-button",{"identifier":[1]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"subcontent":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal.cjs",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"ariaId":[32],"hasFooter":[32]}]]],["dso-table.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"allowMultipleOpen":[516,"allow-multiple-open"],"getState":[64],"toggleSection":[64],"animationEnd":[64],"closeOpenSections":[64]}]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-slide-toggle.cjs",[[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]]], options);
   });
 };
 

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

@@ -7,6 +7,7 @@ export class Card {
     this.isSelectable = false;
     this.hasImage = false;
     this.clickable = true;
+    this.imageShape = "normal";
   }
   clickEventHandler(e) {
     if (!(e.target instanceof HTMLElement) || !this.clickable) {
@@ -100,6 +101,29 @@ export class Card {
         "attribute": "clickable",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "imageShape": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ImageShape",
+          "resolved": "\"normal\" | \"wide\"",
+          "references": {
+            "ImageShape": {
+              "location": "import",
+              "path": "./card.interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Presentation of image in header.\r\n - \"normal\" (\"24 x 24\").\r\n - \"wide\" (\"30 x 26\")"
+        },
+        "attribute": "image-shape",
+        "reflect": true,
+        "defaultValue": "\"normal\""
       }
     };
   }

package/dist/collection/components/date-picker/date-picker-day.js

@@ -3,17 +3,15 @@ import { isEqual, printDutchDate } from "./date-utils";
 export const DatePickerDay = ({ focusedDay, today, day, onDaySelect, onKeyboardNavigation, focusedDayRef, inRange, }) => {
   const isToday = isEqual(day, today);
   const isFocused = isEqual(day, focusedDay);
-  const isDisabled = day.getMonth() !== focusedDay.getMonth();
+  const notCurrentMonth = day.getMonth() !== focusedDay.getMonth();
   const isOutsideRange = !inRange;
   function handleClick(e) {
     onDaySelect(e, day);
   }
   return (h("button", { class: {
       "dso-date__day": true,
-      "is-outside": isOutsideRange,
-      "is-disabled": isDisabled,
       "is-today": isToday,
-    }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, disabled: isOutsideRange || isDisabled, type: "button", ref: (el) => {
+    }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, disabled: isOutsideRange || notCurrentMonth, type: "button", ref: (el) => {
       if (isFocused && el && focusedDayRef) {
         focusedDayRef(el);
       }

package/dist/collection/components/date-picker/date-picker.css

@@ -1,6 +1,9 @@
 :host {
   display: block;
 }
+:host[invalid] .dso-date__input {
+  border-color: #ce3f51;
+}
 
 .dso-date *,
 .dso-date *::before,
@@ -103,7 +106,7 @@
 }
 .dso-date__toggle:disabled {
   color: #afcf9d;
-  cursor: pointer;
+  cursor: default;
 }
 
 .dso-date__dialog {
@@ -204,6 +207,7 @@
   font-weight: 600;
   height: 36px;
   line-height: 36px;
+  text-align: center;
   text-decoration: none;
   text-transform: uppercase;
 }
@@ -268,20 +272,11 @@
   border: 1px solid #fff;
   line-height: 32px;
 }
-.dso-date__day.is-outside {
-  background: #f2f2f2;
-  box-shadow: none;
-  color: #666;
-  cursor: default;
-  pointer-events: none;
-}
-.dso-date__day.is-disabled {
+.dso-date__day:disabled {
   background: #fff;
+  color: #ccc;
   cursor: default;
 }
-.dso-date__day.is-disabled:hover {
-  color: #666;
-}
 .dso-date__day span[aria-hidden=true] {
   border-radius: 50%;
   display: inline-block;

package/dist/collection/components/date-picker/date-picker.js

@@ -271,6 +271,7 @@ export class DsoDatePicker {
     this.role = null;
     this.direction = "right";
     this.required = false;
+    this.invalid = undefined;
     this.dsoAutofocus = false;
     this.value = "";
     this.min = undefined;
@@ -388,7 +389,7 @@ export class DsoDatePicker {
    * Always the last one in the class.
    */
   render() {
-    var _a;
+    var _a, _b;
     const valueAsDate = parseDutchDate(this.value);
     const formattedDate = valueAsDate && printDutchDate(valueAsDate);
     const selectedYear = (valueAsDate || this.focusedDay).getFullYear();
@@ -406,7 +407,7 @@ export class DsoDatePicker {
     if (maxDate) {
       maxYear = Math.min(maxYear, maxDate.getFullYear());
     }
-    return (h(Host, null, h("div", { class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { class: "dso-date__input-wrapper" }, h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerInput = element) }), h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerButton = element) }, h("span", { class: "dso-date__toggle-icon" }, h("dso-icon", { icon: "calendar" })), h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { class: {
+    return (h(Host, null, h("div", { class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { class: "dso-date__input-wrapper" }, h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerInput = element) }), h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerButton = element) }, h("span", { class: "dso-date__toggle-icon" }, h("dso-icon", { icon: "calendar" })), h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { class: {
         "dso-date__dialog": true,
         "is-left": this.direction === "left",
         "is-active": this.open,
@@ -538,6 +539,23 @@ export class DsoDatePicker {
         "reflect": false,
         "defaultValue": "false"
       },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Is input invalid?"
+        },
+        "attribute": "invalid",
+        "reflect": false
+      },
       "dsoAutofocus": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/expandable-heading/expandable-heading.css

@@ -1,3 +1,18 @@
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  color: #275937;
+}
+
 h1,
 .h1,
 h2,
@@ -14,7 +29,6 @@ h1,
 }
 
 h1 {
-  color: #275937;
   font-size: 2rem;
   font-weight: 700;
 }

package/dist/collection/components/label/label.js

@@ -1,17 +1,12 @@
 import { h, Host, } from "@stencil/core";
 import clsx from "clsx";
+import { mutationObserver } from "./mutation-observer";
+import { resizeObserver } from "./resize-observer";
 function hasEllipses(el) {
   return el.scrollWidth > el.clientWidth;
 }
 export class Label {
   constructor() {
-    this.mutationObserver = new MutationObserver(() => {
-      this.labelText = this.host.innerText;
-      if (this.truncate) {
-        this.truncateLabel();
-      }
-    });
-    this.resizeObserver = new ResizeObserver(() => this.truncateLabel());
     this.keydownListenerActive = false;
     this.keyDownListener = (event) => {
       if (event.key === "Escape") {
@@ -48,16 +43,22 @@ export class Label {
       this.keydownListenerActive = false;
     }
   }
-  truncateLabel() {
+  async truncateLabel() {
     setTimeout(() => {
       if (this.labelContent) {
         this.truncatedContent = hasEllipses(this.labelContent) ? this.host.innerText : undefined;
       }
     });
   }
+  async updateTooltipText() {
+    this.labelText = this.host.innerText;
+    if (this.truncate) {
+      this.truncateLabel();
+    }
+  }
   componentDidLoad() {
     this.labelText = this.host.innerText;
-    this.mutationObserver.observe(this.host, {
+    mutationObserver.observe(this.host, {
       attributes: true,
       subtree: true,
     });
@@ -66,17 +67,16 @@ export class Label {
     }
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    mutationObserver === null || mutationObserver === void 0 ? void 0 : mutationObserver.disconnect();
     this.stopTruncate();
   }
   startTruncate() {
-    this.resizeObserver.observe(this.host);
+    resizeObserver.observe(this.host);
     this.truncateLabel();
   }
   stopTruncate() {
     document.removeEventListener("keydown", this.keyDownListener);
-    this.resizeObserver.unobserve(this.host);
+    resizeObserver.unobserve(this.host);
     this.truncatedContent = undefined;
     this.keydownListenerActive = false;
   }
@@ -208,6 +208,42 @@ export class Label {
         }
       }];
   }
+  static get methods() {
+    return {
+      "truncateLabel": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "updateTooltipText": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "host"; }
   static get watchers() {
     return [{

package/dist/collection/components/label/mutation-observer.js

@@ -0,0 +1,11 @@
+export const mutationObserver = new MutationObserver((entries) => {
+  entries.forEach((entry) => {
+    const component = entry.target;
+    if (isDsoLabelComponent(component)) {
+      component.updateTooltipText();
+    }
+  });
+});
+function isDsoLabelComponent(element) {
+  return element.updateTooltipText !== undefined;
+}

package/dist/collection/components/label/resize-observer.js

@@ -0,0 +1,11 @@
+export const resizeObserver = new ResizeObserver((entries) => {
+  entries.forEach((entry) => {
+    const component = entry.target;
+    if (isDsoLabelComponent(component)) {
+      component.truncateLabel();
+    }
+  });
+});
+function isDsoLabelComponent(element) {
+  return element.truncateLabel !== undefined;
+}

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

@@ -13,8 +13,8 @@ export class OzonContentLijstNode {
     return (h("div", { class: "dso-ozon-lijst od-Lijst" }, aanhef && mapNodeToJsx(aanhef), h("ul", { class: (_a = node.getAttribute("type")) !== null && _a !== void 0 ? _a : "" }, listItems.map((item) => {
       var _a;
       const itemNodes = Array.from(item.childNodes);
-      const liNummer = (_a = itemNodes.find((n) => getNodeName(n) === "LiNummer")) === null || _a === void 0 ? void 0 : _a.textContent;
-      return (h("li", { class: "od-Li" }, liNummer && h("span", { class: "od-LiNummer" }, liNummer), mapNodeToJsx(itemNodes.filter((n) => getNodeName(n) !== "LiNummer"))));
+      const liNummer = (_a = itemNodes.find((n) => getNodeName(n) === "LiNummer")) === null || _a === void 0 ? void 0 : _a.childNodes;
+      return (h("li", { class: "od-Li" }, liNummer && h("span", { class: "od-LiNummer" }, mapNodeToJsx(liNummer)), mapNodeToJsx(itemNodes.filter((n) => getNodeName(n) !== "LiNummer"))));
     })), sluiting && mapNodeToJsx(sluiting)));
   }
 }

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

@@ -0,0 +1,9 @@
+import { h } from "@stencil/core";
+export class OzonContentNieuweTekstNode {
+  constructor() {
+    this.name = "NieuweTekst";
+  }
+  render(node, { mapNodeToJsx }) {
+    return h("ins", null, mapNodeToJsx(node.childNodes));
+  }
+}

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import clsx from "clsx";
 import { v4 as uuidv4 } from "uuid";
 import { getNodeName } from "../../get-node-name.function";
 import { mapColspecs } from "./colspec/colspec-mapper";
@@ -14,6 +15,7 @@ function mapData(node) {
     colspecs: tgroup && columnCount ? mapColspecs(columnCount, tgroup.querySelectorAll(":scope > colspec")) : undefined,
     headRows: Array.from(node.querySelectorAll(":scope > tgroup > thead > row")),
     bodyRows: Array.from(node.querySelectorAll(":scope > tgroup > tbody > row")),
+    editAction: node.getAttribute("wijzigactie"),
   };
 }
 export class OzonContentTableNode {
@@ -23,8 +25,11 @@ export class OzonContentTableNode {
     this.id = uuidv4();
   }
   render(node, context) {
-    const { caption, colspecs, headRows, bodyRows } = mapData(node);
+    const { caption, colspecs, headRows, bodyRows, editAction } = mapData(node);
     const bron = Array.from(node.childNodes).find((n) => getNodeName(n) === "Bron");
-    return (h("dso-table", null, h("table", Object.assign({ class: "table dso-table-vertical-lines" }, (bron ? { "aria-describedby": this.id } : {})), caption && h("caption", null, caption), colspecs && h(Colgroup, { colspecs: colspecs }), headRows.length > 0 && (h("thead", null, h(Rows, { rows: headRows, colspecs: colspecs, context: context }))), bodyRows.length > 0 && (h("tbody", null, h(Rows, { rows: bodyRows, colspecs: colspecs, context: context })))), bron && h("div", { id: this.id }, context.mapNodeToJsx(bron))));
+    return (h("dso-table", null, h("table", Object.assign({ class: clsx("table dso-table-vertical-lines", {
+        "dso-del": editAction === "verwijder",
+        "dso-ins": editAction === "voegtoe",
+      }) }, (bron ? { "aria-describedby": this.id } : {})), caption && h("caption", null, caption), colspecs && h(Colgroup, { colspecs: colspecs }), headRows.length > 0 && (h("thead", null, h(Rows, { rows: headRows, colspecs: colspecs, context: context }))), bodyRows.length > 0 && (h("tbody", null, h(Rows, { rows: bodyRows, colspecs: colspecs, context: context })))), bron && h("div", { id: this.id }, context.mapNodeToJsx(bron))));
   }
 }

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

@@ -0,0 +1,9 @@
+import { h } from "@stencil/core";
+export class OzonContentVerwijderdeTekstNode {
+  constructor() {
+    this.name = "VerwijderdeTekst";
+  }
+  render(node, { mapNodeToJsx }) {
+    return h("del", null, mapNodeToJsx(node.childNodes));
+  }
+}

package/dist/collection/components/ozon-content/ozon-content-mapper.js

@@ -12,10 +12,12 @@ import { OzonContentInlineNodes } from "./nodes/inline.nodes";
 import { OzonContentIntIoRefNode } from "./nodes/int-io-ref.node";
 import { OzonContentIntRefNode } from "./nodes/int-ref.node";
 import { OzonContentLijstNode } from "./nodes/lijst.node";
+import { OzonContentNieuweTekstNode } from "./nodes/nieuwe-tekst.node";
 import { OzonContentNootNode } from "./nodes/noot.node";
 import { OzonContentOpschriftNode } from "./nodes/opschrift.node";
 import { OzonContentTableNode } from "./nodes/table.node";
 import { OzonContentTextNode } from "./nodes/text.node";
+import { OzonContentVerwijderdeTekstNode } from "./nodes/verwijderde-tekst.node";
 export class Mapper {
   constructor() {
     this.mappers = [
@@ -34,6 +36,8 @@ export class Mapper {
       new OzonContentFiguurNode(),
       new OzonContentLijstNode(),
       new OzonContentBronNode(),
+      new OzonContentNieuweTekstNode(),
+      new OzonContentVerwijderdeTekstNode(),
     ];
     this.skip = this.mappers.reduce((t, m) => {
       if (m.handles) {

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

@@ -219,4 +219,21 @@ span[role=paragraph] {
   border: 1px solid #e5e5e5;
   margin-bottom: 1rem;
   padding: 1rem;
+}
+
+.dso-del {
+  background-color: #f5d8dc;
+  color: #000;
+  text-decoration: line-through;
+}
+.dso-del a {
+  color: #000;
+}
+
+.dso-ins {
+  background-color: #e4f1d4;
+  color: #000;
+}
+.dso-ins a {
+  color: #000;
 }

package/dist/collection/components/selectable/selectable.css

@@ -1,5 +1,6 @@
 :host {
   display: block;
+  padding-left: 32px;
   position: relative;
 }
 :host .dso-selectable-options {
@@ -137,6 +138,9 @@
   margin: 8px 16px 0 -32px;
   width: calc(100% + 32px);
 }
+:host[invalid] {
+  --dso-selectable-color: #ce3f51;
+}
 
 :host(:not(:last-child)) {
   margin-bottom: 8px;
@@ -150,6 +154,7 @@
 
 .dso-selectable-input-wrapper {
   display: inline-block;
+  margin-left: -32px;
   min-height: 24px;
   padding-left: 32px;
 }

package/dist/collection/components/viewer-grid/viewer-grid.css

@@ -438,7 +438,7 @@ button::-moz-focus-inner {
 
 .filterpanel {
   box-shadow: 2px 0 5px #666;
-  padding: 40px 16px 8px;
+  padding: 8px 16px;
   left: 0;
   max-width: 896px;
   width: calc(100vw - 40px);
@@ -451,6 +451,14 @@ button::-moz-focus-inner {
     display: none !important;
   }
 }
+.filterpanel h2 {
+  color: #275937;
+  margin-bottom: 16px;
+  margin-top: 24px;
+  color: #275937;
+  font-size: 1.5rem;
+  font-weight: 700;
+}
 .filterpanel::before {
   content: "";
   display: block;

package/dist/components/dso-card.js

@@ -20,6 +20,7 @@ const Card = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.isSelectable = false;
     this.hasImage = false;
     this.clickable = true;
+    this.imageShape = "normal";
   }
   clickEventHandler(e) {
     if (!(e.target instanceof HTMLElement) || !this.clickable) {
@@ -51,7 +52,8 @@ const Card = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
 }, [1, "dso-card", {
     "isSelectable": [516, "is-selectable"],
     "hasImage": [516, "has-image"],
-    "clickable": [4]
+    "clickable": [4],
+    "imageShape": [513, "image-shape"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {