@dso-toolkit/core 59.0.1 → 61.0.0

package/dist/collection/components/logo/logo.js

@@ -0,0 +1,61 @@
+import { Host, h } from "@stencil/core";
+export class Logo {
+  constructor() {
+    this.label = undefined;
+    this.ribbon = undefined;
+  }
+  render() {
+    return (h(Host, { "aria-label": ["Omgevingsloket", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(" ") }, h("svg", { fill: "none", viewBox: "0 0 48 48", height: "100%", class: "logo-target" }, h("path", { class: "outer", d: "M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z" }), h("path", { class: "middle", d: "M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z" }), h("path", { class: "inner", d: "M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z" })), h("div", { class: "logo-wordmark" }, h("span", { class: "logo-wordmark-omgevings" }, "Omgevings"), h("span", { class: "logo-wordmark-loket" }, "loket")), this.label && h("span", { class: "logo-label" }, this.label), this.ribbon && h("div", { class: "logo-ribbon" }, this.ribbon)));
+  }
+  static get is() { return "dso-logo"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["logo.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["logo.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The label clarifies the service within the Omgevingsloket, shown\r\nas a subtitle (and on smaller screens as the main wordmark itself)."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "ribbon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The ribbon contains the text for a possible 'sticker' on top of the logo.\r\nUsed to clarify status of the page, like 'beta'."
+        },
+        "attribute": "ribbon",
+        "reflect": false
+      }
+    };
+  }
+}
+//# sourceMappingURL=logo.js.map

package/dist/collection/components/logo/logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.js","sourceRoot":"","sources":["../../../src/components/logo/logo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7E,MAAM,OAAO,IAAI;;;;;EAgBf,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,kBAAa,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;MAC9G,WAAK,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,aAAa;QACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,4CAA4C,GAAG;QACrE,YAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,0CAA0C,GAAG;QACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,uCAAuC,GAAG,CAC5D;MAEN,WAAK,KAAK,EAAC,eAAe;QACxB,YAAM,KAAK,EAAC,yBAAyB,gBAAiB;QACtD,YAAM,KAAK,EAAC,qBAAqB,YAAa,CAC1C;MAEL,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ;MAC1D,IAAI,CAAC,MAAM,IAAI,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,MAAM,CAAO,CACvD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-logo\",\r\n  styleUrl: \"logo.scss\",\r\n  shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n  /**\r\n   * The label clarifies the service within the Omgevingsloket, shown\r\n   * as a subtitle (and on smaller screens as the main wordmark itself).\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n   * Used to clarify status of the page, like 'beta'.\r\n   *\r\n   */\r\n  @Prop()\r\n  ribbon?: string;\r\n\r\n  render() {\r\n    return (\r\n      <Host aria-label={[\"Omgevingsloket\", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(\" \")}>\r\n        <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n          <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n          <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n          <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n        </svg>\r\n\r\n        <div class=\"logo-wordmark\">\r\n          <span class=\"logo-wordmark-omgevings\">Omgevings</span>\r\n          <span class=\"logo-wordmark-loket\">loket</span>\r\n        </div>\r\n\r\n        {this.label && <span class=\"logo-label\">{this.label}</span>}\r\n        {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/progress-indicator/progress-indicator.js

@@ -9,7 +9,7 @@ export class Progressindicator {
     return (h(Host, null, h("span", { class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("svg", { class: "spinner", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, h("style", null, `
                 .spinner { animation: rotator 8s linear infinite; transform-origin: center; }
                 @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-                .path { stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }
+                .path { stroke-dasharray: var(--_progress-indicator-spinner-stroke-dasharray, 265); stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }
                 @keyframes dash { 0% { stroke-dashoffset: 265; } 50% { stroke-dashoffset: 65; transform:rotate(90deg); } 100% { stroke-dashoffset: 265; transform:rotate(360deg); }
               `), h("circle", { class: "path", fill: "none", "stroke-width": "10", "stroke-linecap": "butt", cx: "50", cy: "50", r: "45" }))), h("span", { id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label)));
   }

package/dist/collection/components/progress-indicator/progress-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-indicator.js","sourceRoot":"","sources":["../../../src/components/progress-indicator/progress-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,iBAAiB;;iBAKpB,kDAAkD;;;;EAgB1D,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,YAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B;QAExG,WAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B;UAC3E,iBACG;;;;;eAKA,CACK;UACR,cAAQ,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,kBAAc,IAAI,oBAAgB,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAU,CACrG,CACD;MACP,YAAM,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,CACN,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-progress-indicator\",\r\n  styleUrl: \"progress-indicator.scss\",\r\n  shadow: true,\r\n})\r\nexport class Progressindicator {\r\n  /**\r\n   * The label of the Progress Indicator.\r\n   */\r\n  @Prop()\r\n  label = \"Resultaten laden: een moment geduld alstublieft.\";\r\n\r\n  /**\r\n   * The size (width) of the Progress Indicator.\r\n   *\r\n   * If no size is set, falls back to `small`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  size?: \"small\" | \"medium\" | \"large\";\r\n\r\n  /**\r\n   * Set for bloatier Progress Indicator.\r\n   */\r\n  @Prop()\r\n  block?: boolean;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n          {/* Keep in sync with /packages/css/src/components/progress-indicator/progress-indicator.scss */}\r\n          <svg class=\"spinner\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <style>\r\n              {`\r\n                .spinner { animation: rotator 8s linear infinite; transform-origin: center; }\r\n                @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n                .path { stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }\r\n                @keyframes dash { 0% { stroke-dashoffset: 265; } 50% { stroke-dashoffset: 65; transform:rotate(90deg); } 100% { stroke-dashoffset: 265; transform:rotate(360deg); }\r\n              `}\r\n            </style>\r\n            <circle class=\"path\" fill=\"none\" stroke-width=\"10\" stroke-linecap=\"butt\" cx=\"50\" cy=\"50\" r=\"45\"></circle>\r\n          </svg>\r\n        </span>\r\n        <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n          {this.label}\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"progress-indicator.js","sourceRoot":"","sources":["../../../src/components/progress-indicator/progress-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,iBAAiB;;iBAKpB,kDAAkD;;;;EAgB1D,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,YAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B;QAExG,WAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B;UAC3E,iBACG;;;;;eAKA,CACK;UACR,cAAQ,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,kBAAc,IAAI,oBAAgB,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAU,CACrG,CACD;MACP,YAAM,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,CACN,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-progress-indicator\",\r\n  styleUrl: \"progress-indicator.scss\",\r\n  shadow: true,\r\n})\r\nexport class Progressindicator {\r\n  /**\r\n   * The label of the Progress Indicator.\r\n   */\r\n  @Prop()\r\n  label = \"Resultaten laden: een moment geduld alstublieft.\";\r\n\r\n  /**\r\n   * The size (width) of the Progress Indicator.\r\n   *\r\n   * If no size is set, falls back to `small`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  size?: \"small\" | \"medium\" | \"large\";\r\n\r\n  /**\r\n   * Set for bloatier Progress Indicator.\r\n   */\r\n  @Prop()\r\n  block?: boolean;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n          {/* Keep in sync with /packages/css/src/components/progress-indicator/progress-indicator.scss */}\r\n          <svg class=\"spinner\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <style>\r\n              {`\r\n                .spinner { animation: rotator 8s linear infinite; transform-origin: center; }\r\n                @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n                .path { stroke-dasharray: var(--_progress-indicator-spinner-stroke-dasharray, 265); stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }\r\n                @keyframes dash { 0% { stroke-dashoffset: 265; } 50% { stroke-dashoffset: 65; transform:rotate(90deg); } 100% { stroke-dashoffset: 265; transform:rotate(360deg); }\r\n              `}\r\n            </style>\r\n            <circle class=\"path\" fill=\"none\" stroke-width=\"10\" stroke-linecap=\"butt\" cx=\"50\" cy=\"50\" r=\"45\"></circle>\r\n          </svg>\r\n        </span>\r\n        <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n          {this.label}\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -1,6 +1,6 @@
 :host {
-  display: block;
   position: relative;
+  display: var(--dso-selectable-display, block);
 }
 :host .dso-selectable-options {
   list-style: none;
@@ -161,9 +161,7 @@
 }
 .dso-selectable-container .dso-selectable-input-wrapper {
   display: inline-block;
-  margin-inline: -32px;
   min-height: 24px;
-  padding-inline: 32px;
 }
 .dso-selectable-container .dso-selectable-input-wrapper:focus-within.dso-keyboard-focus {
   border-radius: 2px;

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

@@ -10,4 +10,5 @@
 
 :host(:focus) {
   outline: none;
+  z-index: 410;
 }

package/dist/collection/components/tooltip/tooltip.css

@@ -3,19 +3,19 @@
 }
 
 :host-context(dso-toggletip) *[data-popper-placement=top] .tooltip-arrow {
-  margin-left: 3px;
+  margin-inline-start: 3px;
 }
 :host-context(dso-toggletip) *[data-popper-placement=right] .tooltip-arrow {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 :host-context(dso-toggletip) *[data-popper-placement=bottom] .tooltip-arrow {
-  margin-left: 3px;
+  margin-inline-start: 3px;
 }
 :host-context(dso-toggletip) *[data-popper-placement=left] {
-  margin-right: -8px !important;
+  margin-inline-end: -8px !important;
 }
 :host-context(dso-toggletip) *[data-popper-placement=left] .tooltip-arrow {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 
 *,
@@ -59,7 +59,8 @@
   display: inline-block;
   font-size: 1rem;
   max-width: 640px;
-  padding: 8px 16px;
+  padding-block: 8px;
+  padding-inline: 16px;
   position: relative;
 }
 .tooltip .tooltip-inner.dso-small {
@@ -72,42 +73,50 @@
   width: 0;
 }
 .tooltip[data-popper-placement=top] {
-  margin-top: -3px;
-  padding: 6px 0;
+  margin-block-start: -3px;
+  padding-block: 6px;
+  padding-inline: 0;
 }
 .tooltip[data-popper-placement=top] .tooltip-arrow {
-  border-top-color: #fff;
-  border-width: 6px 6px 0;
   bottom: 0;
-  margin-left: -3px;
+  border-block-start-color: #fff;
+  border-width: 6px;
+  border-block-end-width: 0;
+  margin-inline-start: -3px;
 }
 .tooltip[data-popper-placement=right] {
-  margin-left: 3px;
-  padding: 0 6px;
+  margin-inline-start: 3px;
+  padding-block: 0;
+  padding-inline: 6px;
 }
 .tooltip[data-popper-placement=right] .tooltip-arrow {
-  border-right-color: #fff;
-  border-width: 6px 6px 6px 0;
   left: 0;
-  margin-top: -3px;
+  border-inline-end-color: #fff;
+  border-width: 6px;
+  border-inline-start-width: 0;
+  margin-block-start: -3px;
 }
 .tooltip[data-popper-placement=bottom] {
-  margin-top: 3px;
-  padding: 6px 0;
+  margin-block-start: 3px;
+  padding-block: 6px;
+  padding-inline: 0;
 }
 .tooltip[data-popper-placement=bottom] .tooltip-arrow {
-  border-bottom-color: #fff;
-  border-width: 0 6px 6px;
   top: 0;
-  margin-left: -3px;
+  border-block-end-color: #fff;
+  border-width: 6px;
+  border-block-start-width: 0;
+  margin-inline-start: -3px;
 }
 .tooltip[data-popper-placement=left] {
-  margin-left: -3px;
-  padding: 0 6px;
+  margin-inline-start: -3px;
+  padding-block: 0;
+  padding-inline: 6px;
 }
 .tooltip[data-popper-placement=left] .tooltip-arrow {
-  border-left-color: #fff;
-  border-width: 6px 0 6px 6px;
   right: 0;
-  margin-top: -3px;
+  border-inline-start-color: #fff;
+  border-width: 6px;
+  border-inline-end-width: 0;
+  margin-block-start: -3px;
 }

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

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+import { viewerGridSizeLabelMap, } from "../viewer-grid.interfaces";
+export const DocumentPanel = ({ tabView, panelSize, shrinkDocumentPanel, expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd, }) => (h("div", { class: "dso-document-panel", onTransitionEnd: (e) => {
+    if (e.propertyName === "flex-basis") {
+      dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });
+    }
+  } }, !tabView && (h("div", { class: "sizing-buttons" }, h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "Breedte documentpaneel: ", viewerGridSizeLabelMap[panelSize]), panelSize !== "small" && (h("button", { type: "button", class: "shrink", onClick: shrinkDocumentPanel }, h("span", { class: "sr-only" }, "Documentpaneel smaller maken"), h("dso-icon", { icon: "chevron-right" }))), panelSize !== "large" && (h("button", { type: "button", class: "expand", onClick: expandDocumentPanel }, h("span", { class: "sr-only" }, "Documentpaneel breder maken"), h("dso-icon", { icon: "chevron-left" }))))), h("div", { class: "content" }, h("slot", { name: "document-panel" }))));
+//# sourceMappingURL=document-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"document-panel.js","sourceRoot":"","sources":["../../../../src/components/viewer-grid/components/document-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,CAAC,EAAE,MAAM,eAAe,CAAC;AAErE,OAAO,EAGL,sBAAsB,GACvB,MAAM,2BAA2B,CAAC;AAUnC,MAAM,CAAC,MAAM,aAAa,GAAsD,CAAC,EAC/E,OAAO,EACP,SAAS,EACT,mBAAmB,EACnB,mBAAmB,EACnB,sCAAsC,GACvC,EAAE,EAAE,CAAC,CACJ,WACE,KAAK,EAAC,oBAAoB,EAC1B,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;IACrB,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,EAAE;MACnC,sCAAsC,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;KACzE;EACH,CAAC;EAEA,CAAC,OAAO,IAAI,CACX,WAAK,KAAK,EAAC,gBAAgB;IACzB,YAAM,KAAK,EAAC,SAAS,eAAW,QAAQ,iBAAa,MAAM;;MAChC,sBAAsB,CAAC,SAAS,CAAC,CACrD;IACN,SAAS,KAAK,OAAO,IAAI,CACxB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,mBAAmB;MAC/D,YAAM,KAAK,EAAC,SAAS,mCAAoC;MACzD,gBAAU,IAAI,EAAC,eAAe,GAAY,CACnC,CACV;IACA,SAAS,KAAK,OAAO,IAAI,CACxB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,mBAAmB;MAC/D,YAAM,KAAK,EAAC,SAAS,kCAAmC;MACxD,gBAAU,IAAI,EAAC,cAAc,GAAY,CAClC,CACV,CACG,CACP;EACD,WAAK,KAAK,EAAC,SAAS;IAClB,YAAM,IAAI,EAAC,gBAAgB,GAAG,CAC1B,CACF,CACP,CAAC","sourcesContent":["import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport {\r\n  ViewerGridPanelSize,\r\n  ViewerGridChangeSizeAnimationEndEvent,\r\n  viewerGridSizeLabelMap,\r\n} from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridDocumentPanelProps {\r\n  tabView: boolean;\r\n  panelSize: ViewerGridPanelSize;\r\n  shrinkDocumentPanel: () => void;\r\n  expandDocumentPanel: () => void;\r\n  dsoDocumentPanelSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const DocumentPanel: FunctionalComponent<ViewerGridDocumentPanelProps> = ({\r\n  tabView,\r\n  panelSize,\r\n  shrinkDocumentPanel,\r\n  expandDocumentPanel,\r\n  dsoDocumentPanelSizeChangeAnimationEnd,\r\n}) => (\r\n  <div\r\n    class=\"dso-document-panel\"\r\n    onTransitionEnd={(e) => {\r\n      if (e.propertyName === \"flex-basis\") {\r\n        dsoDocumentPanelSizeChangeAnimationEnd.emit({ currentSize: panelSize });\r\n      }\r\n    }}\r\n  >\r\n    {!tabView && (\r\n      <div class=\"sizing-buttons\">\r\n        <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n          Breedte documentpaneel: {viewerGridSizeLabelMap[panelSize]}\r\n        </span>\r\n        {panelSize !== \"small\" && (\r\n          <button type=\"button\" class=\"shrink\" onClick={shrinkDocumentPanel}>\r\n            <span class=\"sr-only\">Documentpaneel smaller maken</span>\r\n            <dso-icon icon=\"chevron-right\"></dso-icon>\r\n          </button>\r\n        )}\r\n        {panelSize !== \"large\" && (\r\n          <button type=\"button\" class=\"expand\" onClick={expandDocumentPanel}>\r\n            <span class=\"sr-only\">Documentpaneel breder maken</span>\r\n            <dso-icon icon=\"chevron-left\"></dso-icon>\r\n          </button>\r\n        )}\r\n      </div>\r\n    )}\r\n    <div class=\"content\">\r\n      <slot name=\"document-panel\" />\r\n    </div>\r\n  </div>\r\n);\r\n"]}

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

@@ -1,3 +1,4 @@
+export { DocumentPanel } from "./document-panel";
 export { Filterpanel } from "./filterpanel";
 export { MainPanel } from "./main-panel";
 export { Overlay } from "./overlay";

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

@@ -1 +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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/viewer-grid/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,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 { DocumentPanel } from \"./document-panel\";\r\nexport { 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

@@ -1,10 +1,14 @@
 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" }))));
-};
+import clsx from "clsx";
+import { viewerGridSizeLabelMap, } from "../viewer-grid.interfaces";
+export const MainPanel = ({ mode, tabView, mainSize, documentPanelOpen, mainPanelExpanded, mainPanelHidden, shrinkMain, expandMain, expandContent, toggleMainPanel, dsoMainSizeChangeAnimationEnd, }) => (h("div", { class: clsx("dso-main-panel", {
+    compact: !tabView && documentPanelOpen && !mainPanelExpanded,
+    expanded: !tabView && documentPanelOpen && mainPanelExpanded,
+    collapsed: mainPanelHidden,
+  }), onTransitionEnd: (e) => {
+    if (e.propertyName === "flex-basis") {
+      dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });
+    }
+  } }, !tabView &&
+  (!documentPanelOpen ? (h("div", { class: "sizing-buttons" }, h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "Breedte ", mode === "vdk" ? "zoeken paneel" : "hoofdpaneel", ": ", viewerGridSizeLabelMap[mainSize]), mainSize !== "small" && (h("button", { type: "button", class: "shrink", onClick: shrinkMain }, h("span", { class: "sr-only" }, mode === "vdk" ? "Zoeken paneel" : "Hoofdpaneel", " smaller maken"), h("dso-icon", { icon: "chevron-left" }))), mainSize !== "large" && (h("button", { type: "button", class: "expand", onClick: expandMain }, h("span", { class: "sr-only" }, mode === "vdk" ? "Zoeken paneel" : "Hoofdpaneel", " breder maken"), h("dso-icon", { icon: "chevron-right" }))))) : (h("div", { class: "toggle-button" }, h("button", { type: "button", onClick: toggleMainPanel }, h("span", { class: "sr-only" }, mode === "vdk" ? "Zoeken paneel" : "Hoofdpaneel", " ", mainPanelHidden ? "Tonen" : "Verbergen"), h("dso-icon", { icon: mainPanelHidden ? "chevron-right" : "chevron-left" }))))), h("div", { class: clsx("content", { invisible: mainPanelHidden }) }, h("slot", { name: "main" }), !tabView && documentPanelOpen && (h("button", { class: "dso-tertiary expand-button", onClick: expandContent }, h("dso-icon", { icon: mainPanelExpanded ? "chevron-up" : "chevron-down" }), h("span", null, mainPanelExpanded ? "Verberg" : "Toon", " documenten op gekozen locatie"))), documentPanelOpen && mainPanelExpanded && h("slot", { name: "main-expanded" }))));
 //# sourceMappingURL=main-panel.js.map

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

@@ -1 +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"]}
+{"version":3,"file":"main-panel.js","sourceRoot":"","sources":["../../../../src/components/viewer-grid/components/main-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport {\r\n  ViewerGridPanelSize,\r\n  ViewerGridChangeSizeAnimationEndEvent,\r\n  ViewerGridMode,\r\n  viewerGridSizeLabelMap,\r\n} from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n  mode: ViewerGridMode;\r\n  tabView: boolean;\r\n  mainSize: ViewerGridPanelSize;\r\n  documentPanelOpen: boolean;\r\n  mainPanelExpanded: boolean;\r\n  mainPanelHidden: boolean;\r\n  shrinkMain: () => void;\r\n  expandMain: () => void;\r\n  expandContent: () => void;\r\n  toggleMainPanel: () => void;\r\n  dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n  mode,\r\n  tabView,\r\n  mainSize,\r\n  documentPanelOpen,\r\n  mainPanelExpanded,\r\n  mainPanelHidden,\r\n  shrinkMain,\r\n  expandMain,\r\n  expandContent,\r\n  toggleMainPanel,\r\n  dsoMainSizeChangeAnimationEnd,\r\n}) => (\r\n  <div\r\n    class={clsx(\"dso-main-panel\", {\r\n      compact: !tabView && documentPanelOpen && !mainPanelExpanded,\r\n      expanded: !tabView && documentPanelOpen && mainPanelExpanded,\r\n      collapsed: mainPanelHidden,\r\n    })}\r\n    onTransitionEnd={(e) => {\r\n      if (e.propertyName === \"flex-basis\") {\r\n        dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });\r\n      }\r\n    }}\r\n  >\r\n    {!tabView &&\r\n      (!documentPanelOpen ? (\r\n        <div class=\"sizing-buttons\">\r\n          <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n            Breedte {mode === \"vdk\" ? \"zoeken paneel\" : \"hoofdpaneel\"}: {viewerGridSizeLabelMap[mainSize]}\r\n          </span>\r\n          {mainSize !== \"small\" && (\r\n            <button type=\"button\" class=\"shrink\" onClick={shrinkMain}>\r\n              <span class=\"sr-only\">{mode === \"vdk\" ? \"Zoeken paneel\" : \"Hoofdpaneel\"} smaller maken</span>\r\n              <dso-icon icon=\"chevron-left\"></dso-icon>\r\n            </button>\r\n          )}\r\n          {mainSize !== \"large\" && (\r\n            <button type=\"button\" class=\"expand\" onClick={expandMain}>\r\n              <span class=\"sr-only\">{mode === \"vdk\" ? \"Zoeken paneel\" : \"Hoofdpaneel\"} breder maken</span>\r\n              <dso-icon icon=\"chevron-right\"></dso-icon>\r\n            </button>\r\n          )}\r\n        </div>\r\n      ) : (\r\n        <div class=\"toggle-button\">\r\n          <button type=\"button\" onClick={toggleMainPanel}>\r\n            <span class=\"sr-only\">\r\n              {mode === \"vdk\" ? \"Zoeken paneel\" : \"Hoofdpaneel\"} {mainPanelHidden ? \"Tonen\" : \"Verbergen\"}\r\n            </span>\r\n            <dso-icon icon={mainPanelHidden ? \"chevron-right\" : \"chevron-left\"}></dso-icon>\r\n          </button>\r\n        </div>\r\n      ))}\r\n    <div class={clsx(\"content\", { invisible: mainPanelHidden })}>\r\n      <slot name=\"main\" />\r\n      {!tabView && documentPanelOpen && (\r\n        <button class=\"dso-tertiary expand-button\" onClick={expandContent}>\r\n          <dso-icon icon={mainPanelExpanded ? \"chevron-up\" : \"chevron-down\"}></dso-icon>\r\n          <span>{mainPanelExpanded ? \"Verberg\" : \"Toon\"} documenten op gekozen locatie</span>\r\n        </button>\r\n      )}\r\n      {documentPanelOpen && mainPanelExpanded && <slot name=\"main-expanded\" />}\r\n    </div>\r\n  </div>\r\n);\r\n"]}