@dso-toolkit/core 57.0.0 → 58.0.0

package/dist/collection/components/table/table.css

@@ -24,53 +24,49 @@
 }
 
 :host .dso-modal {
-  bottom: 0;
-  height: 100%;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 530;
+  overflow: visible;
+  padding: 0;
+  border: 0;
   inset: 0px;
   height: 100%;
   position: fixed;
   z-index: 530;
 }
+:host .dso-modal::backdrop {
+  background-color: rgba(255, 255, 255, 0.8);
+}
 :host .dso-modal .dso-dialog {
-  animation: 1s ease-out 0s 1 slideInFromTop;
+  max-inline-size: 640px;
   background-color: #fff;
-  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: clamp(40px, 15vh, 15vh);
-  max-width: 640px;
   opacity: 1;
+  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
+  animation: 1s ease-out 0s 1 slideInFromTop;
 }
 :host .dso-modal .dso-header {
-  border-bottom: 1px solid #ccc;
-  padding: 16px;
   position: relative;
+  padding: 16px;
+  border-block-end: 1px solid #ccc;
 }
 :host .dso-modal .dso-header h2 {
-  color: #275937;
+  max-inline-size: calc(100% - 24px);
   margin: 0;
-  max-width: calc(100% - 24px);
+  color: #275937;
 }
 :host .dso-modal .dso-header .dso-close {
+  position: absolute;
+  inset-block-start: 16px;
+  inset-inline-end: 13px;
+  block-size: 32px;
+  inline-size: 32px;
+  padding: 0;
   background-color: transparent;
   border: 0;
-  height: 32px;
-  padding: 0;
-  position: absolute;
-  right: 13px;
   text-align: center;
-  top: 16px;
-  width: 32px;
 }
 :host .dso-modal > .dso-dialog > .dso-body {
-  height: calc(100% - 96px - 1.5rem);
-  max-height: calc(70vh - 144px - 1.5em);
-  min-height: 1.5rem;
+  block-size: calc(100% - 96px - 1.5rem);
+  max-block-size: calc(70vh - 144px - 1.5em);
+  min-block-size: 1.5rem;
   overflow-x: auto;
   padding: 32px;
 }
@@ -100,9 +96,9 @@
   max-width: 100%;
 }
 :host .dso-modal > .dso-dialog > dso-scrollable {
-  height: calc(100% - 96px - 1.5rem);
-  max-height: calc(70vh - 144px - 1.5em);
-  min-height: 6.5rem;
+  block-size: calc(100% - 96px - 1.5rem);
+  max-block-size: calc(70vh - 144px - 1.5em);
+  min-block-size: 6.5rem;
 }
 :host .dso-modal > .dso-dialog > dso-scrollable .dso-body {
   padding: 32px;
@@ -132,21 +128,24 @@
   height: auto;
   max-width: 100%;
 }
+:host .dso-modal .dso-body:focus-visible {
+  outline: none;
+}
 :host .dso-modal .dso-footer {
-  min-height: 80px;
+  min-block-size: 80px;
   padding: 16px 32px;
-  text-align: right;
+  text-align: end;
 }
 @media screen and (max-width: 767px) {
   :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   :host .dso-modal .dso-footer button {
+    inline-size: 100%;
     text-align: center;
-    width: 100%;
   }
   :host .dso-modal .dso-footer button + button {
-    margin-top: 8px;
+    margin-block-start: 8px;
   }
   :host .dso-modal .dso-footer button.dso-tertiary,
   :host .dso-modal .dso-footer button.dso-tertiary span {
@@ -155,26 +154,26 @@
 }
 @media screen and (min-width: 768px) {
   :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary {
-    margin-left: 16px;
+    margin-inline-start: 16px;
   }
   :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 }
 @media screen and (max-width: 767px) {
   :host .dso-modal .dso-dialog {
-    max-width: 100%;
-    margin-top: 0;
+    max-inline-size: 100%;
+    margin-block-start: 0;
   }
   :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   :host .dso-modal .dso-footer button {
+    inline-size: 100%;
     text-align: center;
-    width: 100%;
   }
   :host .dso-modal .dso-footer button + button {
-    margin-top: 8px;
+    margin-block-start: 8px;
   }
   :host .dso-modal .dso-footer button.dso-tertiary,
   :host .dso-modal .dso-footer button.dso-tertiary span {
@@ -183,21 +182,21 @@
 }
 @media screen and (max-height: 380px) {
   :host .dso-modal .dso-dialog {
-    margin-bottom: 8px;
-    margin-top: 8px;
-    min-height: 216px;
+    min-block-size: 216px;
+    margin-block-start: 8px;
+    margin-block-end: 8px;
   }
   :host .dso-modal .dso-header {
     padding: 8px 16px;
   }
   :host .dso-modal .dso-header .dso-close {
-    top: 8px;
+    inset-block-start: 8px;
   }
   :host .dso-modal .dso-body {
     padding: 16px 24px;
   }
   :host .dso-modal .dso-footer {
-    min-height: auto;
+    min-block-size: auto;
     overflow: auto;
     padding: 8px 32px;
   }
@@ -206,6 +205,8 @@
 .dso-modal .dso-dialog.dso-table-dialog {
   margin-top: 1rem;
   max-width: calc(100% - 2rem);
+  margin-left: auto;
+  margin-right: auto;
 }
 .dso-modal .dso-dialog.dso-table-dialog .dso-body {
   max-height: calc(100vh - 112px - 1.5em - 2rem);

package/dist/collection/components/viewer-grid/components/filterpanel.js

@@ -0,0 +1,7 @@
+import { h } from "@stencil/core";
+import { ViewerGridFilterpanelButtons } from "./viewer-grid-filterpanel-buttons";
+export const Filterpanel = ({ ref, onApply, onCancel }) => (h("dialog", { id: "filterpanel", class: "filterpanel", ref: ref, onCancel: (e) => {
+    e.preventDefault();
+    onCancel(e);
+  } }, h("h1", null, "Uw keuzes"), h(ViewerGridFilterpanelButtons, { onApply: onApply, onCancel: onCancel }), h("slot", { name: "filterpanel" }), h(ViewerGridFilterpanelButtons, { onApply: onApply, onCancel: onCancel })));
+//# sourceMappingURL=filterpanel.js.map

package/dist/collection/components/viewer-grid/components/filterpanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterpanel.js","sourceRoot":"","sources":["../../../../src/components/viewer-grid/components/filterpanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AAQjF,MAAM,CAAC,MAAM,WAAW,GAAoD,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC1G,cACE,EAAE,EAAC,aAAa,EAChB,KAAK,EAAC,aAAa,EACnB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;IACd,CAAC,CAAC,cAAc,EAAE,CAAC;IAEnB,QAAQ,CAAC,CAAC,CAAC,CAAC;EACd,CAAC;EAED,0BAAkB;EAClB,EAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI;EACtE,YAAM,IAAI,EAAC,aAAa,GAAG;EAC3B,EAAC,4BAA4B,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC/D,CACV,CAAC","sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Filterpanel: FunctionalComponent<ViewerGridFilterpanelProps> = ({ ref, onApply, onCancel }) => (\r\n  <dialog\r\n    id=\"filterpanel\"\r\n    class=\"filterpanel\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      onCancel(e);\r\n    }}\r\n  >\r\n    <h1>Uw keuzes</h1>\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n    <slot name=\"filterpanel\" />\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n  </dialog>\r\n);\r\n"]}

package/dist/collection/components/viewer-grid/components/index.js

@@ -0,0 +1,4 @@
+export { Filterpanel } from "./filterpanel";
+export { MainPanel } from "./main-panel";
+export { Overlay } from "./overlay";
+//# sourceMappingURL=index.js.map

package/dist/collection/components/viewer-grid/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/viewer-grid/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { Filterpanel } from \"./filterpanel\";\r\nexport { MainPanel } from \"./main-panel\";\r\nexport { Overlay } from \"./overlay\";\r\n"]}

package/dist/collection/components/viewer-grid/components/main-panel.js

@@ -0,0 +1,10 @@
+import { h } from "@stencil/core";
+export const MainPanel = ({ ref, tabView, mainSize, shrinkMain, expandMain, }) => {
+  const sizeLabelMap = {
+    small: "smal",
+    medium: "middel",
+    large: "breed",
+  };
+  return (h("div", { class: "dso-main-panel", ref: ref }, !tabView && (h("div", { class: "sizing-buttons" }, h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "Breedte hoofdpaneel: ", sizeLabelMap[mainSize]), h("button", { type: "button", class: "shrink", disabled: mainSize === "small", onClick: shrinkMain }, h("span", { class: "sr-only" }, "Hoofdpaneel smaller maken"), h("dso-icon", { icon: "chevron-left" })), h("button", { type: "button", class: "expand", disabled: mainSize === "large", onClick: expandMain }, h("span", { class: "sr-only" }, "Hoofdpaneel breder maken"), h("dso-icon", { icon: "chevron-right" })))), h("div", { class: "main" }, h("slot", { name: "main" }))));
+};
+//# sourceMappingURL=main-panel.js.map

package/dist/collection/components/viewer-grid/components/main-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-panel.js","sourceRoot":"","sources":["../../../../src/components/viewer-grid/components/main-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAWvD,MAAM,CAAC,MAAM,SAAS,GAAkD,CAAC,EACvE,GAAG,EACH,OAAO,EACP,QAAQ,EACR,UAAU,EACV,UAAU,GACX,EAAE,EAAE;EACH,MAAM,YAAY,GAAiB;IACjC,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;GACf,CAAC;EAEF,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB,EAAC,GAAG,EAAE,GAAG;IACjC,CAAC,OAAO,IAAI,CACX,WAAK,KAAK,EAAC,gBAAgB;MACzB,YAAM,KAAK,EAAC,SAAS,eAAW,QAAQ,iBAAa,MAAM;;QACnC,YAAY,CAAC,QAAQ,CAAC,CACvC;MACP,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,EAAE,OAAO,EAAE,UAAU;QACtF,YAAM,KAAK,EAAC,SAAS,gCAAiC;QACtD,gBAAU,IAAI,EAAC,cAAc,GAAY,CAClC;MACT,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,EAAE,OAAO,EAAE,UAAU;QACtF,YAAM,KAAK,EAAC,SAAS,+BAAgC;QACrD,gBAAU,IAAI,EAAC,eAAe,GAAY,CACnC,CACL,CACP;IACD,WAAK,KAAK,EAAC,MAAM;MACf,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { LabelSizeMap, MainSize } from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n  ref: ((element: HTMLDivElement | undefined) => void) | undefined;\r\n  tabView: boolean;\r\n  mainSize: MainSize;\r\n  shrinkMain: () => void;\r\n  expandMain: () => void;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n  ref,\r\n  tabView,\r\n  mainSize,\r\n  shrinkMain,\r\n  expandMain,\r\n}) => {\r\n  const sizeLabelMap: LabelSizeMap = {\r\n    small: \"smal\",\r\n    medium: \"middel\",\r\n    large: \"breed\",\r\n  };\r\n\r\n  return (\r\n    <div class=\"dso-main-panel\" ref={ref}>\r\n      {!tabView && (\r\n        <div class=\"sizing-buttons\">\r\n          <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n            Breedte hoofdpaneel: {sizeLabelMap[mainSize]}\r\n          </span>\r\n          <button type=\"button\" class=\"shrink\" disabled={mainSize === \"small\"} onClick={shrinkMain}>\r\n            <span class=\"sr-only\">Hoofdpaneel smaller maken</span>\r\n            <dso-icon icon=\"chevron-left\"></dso-icon>\r\n          </button>\r\n          <button type=\"button\" class=\"expand\" disabled={mainSize === \"large\"} onClick={expandMain}>\r\n            <span class=\"sr-only\">Hoofdpaneel breder maken</span>\r\n            <dso-icon icon=\"chevron-right\"></dso-icon>\r\n          </button>\r\n        </div>\r\n      )}\r\n      <div class=\"main\">\r\n        <slot name=\"main\" />\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"]}

package/dist/collection/components/viewer-grid/components/overlay.js

@@ -0,0 +1,6 @@
+import { h } from "@stencil/core";
+export const Overlay = ({ ref, dsoCloseOverlay }) => (h("dialog", { class: "overlay", ref: ref, onCancel: (e) => {
+    e.preventDefault();
+    dsoCloseOverlay(e);
+  } }, h("button", { type: "button", class: "overlay-close-button", onClick: dsoCloseOverlay }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")), h("slot", { name: "overlay" })));
+//# sourceMappingURL=overlay.js.map

package/dist/collection/components/viewer-grid/components/overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../../../../src/components/viewer-grid/components/overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAOvD,MAAM,CAAC,MAAM,OAAO,GAAgD,CAAC,EAAE,GAAG,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CAChG,cACE,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;IACd,CAAC,CAAC,cAAc,EAAE,CAAC;IAEnB,eAAe,CAAC,CAAC,CAAC,CAAC;EACrB,CAAC;EAED,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,eAAe;IACzE,gBAAU,IAAI,EAAC,OAAO,GAAY;IAClC,YAAM,KAAK,EAAC,SAAS,cAAe,CAC7B;EACT,YAAM,IAAI,EAAC,SAAS,GAAG,CAChB,CACV,CAAC","sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridOverlayProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  dsoCloseOverlay: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Overlay: FunctionalComponent<ViewerGridOverlayProps> = ({ ref, dsoCloseOverlay }) => (\r\n  <dialog\r\n    class=\"overlay\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      dsoCloseOverlay(e);\r\n    }}\r\n  >\r\n    <button type=\"button\" class=\"overlay-close-button\" onClick={dsoCloseOverlay}>\r\n      <dso-icon icon=\"times\"></dso-icon>\r\n      <span class=\"sr-only\">sluiten</span>\r\n    </button>\r\n    <slot name=\"overlay\" />\r\n  </dialog>\r\n);\r\n"]}

package/dist/collection/components/viewer-grid/components/viewer-grid-filterpanel-buttons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewer-grid-filterpanel-buttons.js","sourceRoot":"","sources":["../../../../src/components/viewer-grid/components/viewer-grid-filterpanel-buttons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAOvD,MAAM,CAAC,MAAM,4BAA4B,GAA2D,CAAC,EACnG,OAAO,EACP,QAAQ,GACT,EAAE,EAAE,CAAC,CACJ,WAAK,KAAK,EAAC,qBAAqB;EAC9B,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,QAAQ;IAC3D,4BAAsB,CACf;EACT,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,OAAO;IACzD,4BAAsB;IACtB,gBAAU,IAAI,EAAC,eAAe,GAAY,CACnC,CACL,CACP,CAAC","sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterpanelButtonsProps {\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (mouseEvent: MouseEvent) => void;\r\n}\r\n\r\nexport const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelButtonsProps> = ({\r\n  onApply,\r\n  onCancel,\r\n}) => (\r\n  <div class=\"filterpanel-buttons\">\r\n    <button type=\"button\" class=\"cancel-button\" onClick={onCancel}>\r\n      <span>Annuleren</span>\r\n    </button>\r\n    <button type=\"button\" class=\"apply-button\" onClick={onApply}>\r\n      <span>Toepassen</span>\r\n      <dso-icon icon=\"chevron-right\"></dso-icon>\r\n    </button>\r\n  </div>\r\n);\r\n"]}