@dso-toolkit/core 73.2.1 → 74.0.0

package/dist/collection/components/onboarding-tip/onboarding-tip.css

@@ -51,6 +51,12 @@
   --_dso-button-secondary-disabled-color: #b2b2b2;
   display: block;
   filter: drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.4));
+  transition: visibility 400ms, opacity 400ms;
+}
+
+:host(:not([ready])) {
+  opacity: 1;
+  animation: 400ms ease-in 1 normal both fadeInOpacity;
 }
 
 :host([popover]) {
@@ -121,7 +127,7 @@
   --link-hover-color: #b2b2b2;
   --link-visited-color: #7f7f7f;
   max-inline-size: min(360px, 100vw - 2 * 8px);
-  max-block-size: 40vh;
+  max-block-size: calc(100vh - 10px);
   overflow: auto;
   padding-block: 32px 8px;
   padding-inline: 8px;
@@ -136,6 +142,11 @@
   border-color: #2b5780;
   color: #fff;
 }
+@media screen and (max-width: 991px) {
+  .onboarding-tip-inner {
+    max-block-size: unset;
+  }
+}
 
 .onboarding-tip-arrow {
   border-start-start-radius: 4px;
@@ -157,4 +168,13 @@
 }
 .onboarding-tip-content-heading dso-icon {
   margin-inline-end: 8px;
+}
+
+@keyframes fadeInOpacity {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }

package/dist/collection/components/onboarding-tip/onboarding-tip.js

@@ -6,6 +6,7 @@ export class OnboardingTip {
          * Where to place the Onboarding Tip relative to its reference element.
          */
         this.placement = "right";
+        this.ready = false;
     }
     componentDidRender() {
         if (!this.host.matches(":popover-open")) {
@@ -27,16 +28,25 @@ export class OnboardingTip {
      * This function positions the Onboarding Tip relative to its reference element. It is static so the position is calculated
      * only using the passed arguments.
      */
-    static positionTip(referenceElement, tipRef, tipArrowRef, placement) {
-        // Get half the arrow box's hypotenuse length
-        const arrowLength = tipArrowRef.offsetWidth;
-        const floatingOffset = Math.sqrt(2 * arrowLength ** 2) / 2;
+    static positionTip(referenceElement, tipRef, tipArrowRef, position) {
         const padding = 5;
         return autoUpdate(referenceElement, tipRef, () => {
+            const arrowLength = tipArrowRef.offsetWidth;
+            // Get half the arrow box's hypotenuse length
+            const mainAxisOffset = Math.sqrt(2 * arrowLength ** 2) / 2;
+            // 1.5 times the diagonal of the arrow box
+            const arrowPadding = arrowLength * Math.sqrt(2) * 1.5;
+            // Same as media-query-breakpoints.$screen-md-min
+            const smallViewport = document.body.clientWidth < 992;
+            // Only use top and bottom placement when the viewport is small
+            const placement = smallViewport ? "top" : `${position}-start`;
             computePosition(referenceElement, tipRef, {
                 strategy: "fixed",
                 middleware: [
-                    offset(floatingOffset),
+                    offset({
+                        mainAxis: mainAxisOffset,
+                        alignmentAxis: -arrowPadding,
+                    }),
                     flip({
                         padding,
                     }),
@@ -44,18 +54,22 @@ export class OnboardingTip {
                         padding,
                     }),
                     arrow({
-                        padding: padding + arrowLength,
+                        padding: arrowPadding,
                         element: tipArrowRef,
                     }),
                     hide({
-                        padding: 42,
+                        padding: arrowPadding + arrowLength + padding,
                     }),
                 ],
                 placement,
             }).then(({ x, y, middlewareData, placement: computedPlacement }) => {
                 if (middlewareData.hide) {
+                    // Tooltip needs to be visible at all times on small viewports
+                    const disappear = !smallViewport && middlewareData.hide.referenceHidden;
                     Object.assign(tipRef.style, {
-                        visibility: middlewareData.hide.referenceHidden ? "hidden" : "visible",
+                        // Both of these properties have a CSS transition
+                        visibility: disappear ? "hidden" : "visible",
+                        opacity: disappear ? 0 : 1,
                     });
                 }
                 Object.assign(tipRef.style, {
@@ -102,7 +116,7 @@ export class OnboardingTip {
         });
     }
     render() {
-        return (h(Host, { key: '7c5150901a9ecbe69c373333009130db322d2303', popover: "manual" }, h("div", { key: 'ea013d32e5d7b74da14d420ca37a4eaffe377270', class: "onboarding-tip", role: "tooltip" }, h("div", { key: 'adb76bcf17737a81ff9a84e091b95c706261588a', class: "onboarding-tip-inner" }, h("div", { key: '9485bf312830f8788e3768719ced93d589c35de0', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '545450463fbf1c144481f5fa0cdf2b80744d3771', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '9c2ae3b0e5c6f3eb496dbbd46168ad10f417f4ab', icon: "light-bulb" }), h("slot", { key: 'a1db25995416339c41d1d2828a8b9257222a0917', name: "heading" }))), h("button", { key: '0a54cb67e9927602923fbda804f0839b1d995c4f', type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { key: 'e6c5d482f8ec171a6dd2969b66ac92b71d24bf8c', icon: "times" }), h("span", { key: '569fd4ac7d43b90c9c85d245636f34101dd28184', class: "sr-only" }, "Sluiten")), h("slot", { key: '984b8f980fa33e8d82a479c8c2a3b27a6645ee05' }))), h("div", { key: '7d0158f6329dec134ae9e049ce2110cbb4f27adf', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: 'f8cf37b8d7e355da0d6405553d9b711a342ff35b', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '2c24f70065a1739ac15645a2b95d0d1e7170bd69', class: "onboarding-tip", role: "tooltip" }, h("div", { key: '36ff549f3ee6540d95253aef4d42073f82c4e6ff', class: "onboarding-tip-inner" }, h("div", { key: '1679ac6427bf11e5204bd0558c2e3eb97e79f565', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'cd2ed8f12e580239a9f3b17f0c68e3cc47a354e3', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '75a04ff5bcf97b13350be0f9b73a1c4a2551469b', icon: "light-bulb" }), h("slot", { key: 'befb042560938e167ce7a4ddded30589cba74837', name: "heading" }))), h("button", { key: 'a39a55d736676f329ae0fb491dd20468c7a8ef90', type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { key: '32bd8339c3df104862246bc984ae590fe9134041', icon: "times" }), h("span", { key: '96e88dded1b34e9acee34a7e5a17416aee068f25', class: "sr-only" }, "Sluiten")), h("slot", { key: 'bdcee07fc2629e1026c8eb3a525d215305dcdb93' }))), h("div", { key: '2ce90e310b4e3b5b09bf155617b7280508551d72', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");
@@ -167,6 +181,11 @@ export class OnboardingTip {
             }
         };
     }
+    static get states() {
+        return {
+            "ready": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "dsoClose",

package/dist/collection/components/onboarding-tip/onboarding-tip.js.map

@@ -1 +1 @@
-{"version":3,"file":"onboarding-tip.js","sourceRoot":"","sources":["../../../../src/components/onboarding-tip/onboarding-tip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Placement, arrow, autoUpdate, computePosition, flip, hide, offset, shift } from \"@floating-ui/dom\";\r\nimport { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, h } from \"@stencil/core\";\r\n\r\nimport { OnboardingTipCloseEvent, OnboardingTipPlacement } from \"./onboarding-tip.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-onboarding-tip\",\r\n  styleUrl: \"onboarding-tip.scss\",\r\n  shadow: true,\r\n})\r\nexport class OnboardingTip implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoOnboardingTipElement;\r\n\r\n  /**\r\n   * Where to place the Onboarding Tip relative to its reference element.\r\n   */\r\n  @Prop()\r\n  placement: OnboardingTipPlacement = \"right\";\r\n\r\n  /**\r\n   * Emitted when the user closes the Onboarding Tip.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<OnboardingTipCloseEvent>;\r\n\r\n  componentDidRender() {\r\n    if (!this.host.matches(\":popover-open\")) {\r\n      this.host.showPopover();\r\n    }\r\n\r\n    if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {\r\n      this.cleanUp = OnboardingTip.positionTip(this.referenceElement, this.host, this.tipArrowRef, this.placement);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.host.matches(\":popover-open\")) {\r\n      this.host.hidePopover();\r\n    }\r\n\r\n    this.cleanUp?.();\r\n    this.cleanUp = undefined;\r\n  }\r\n\r\n  /**\r\n   * This function positions the Onboarding Tip relative to its reference element. It is static so the position is calculated\r\n   * only using the passed arguments.\r\n   */\r\n  private static positionTip(\r\n    referenceElement: HTMLElement,\r\n    tipRef: HTMLDsoOnboardingTipElement,\r\n    tipArrowRef: HTMLDivElement,\r\n    placement: Placement,\r\n  ) {\r\n    // Get half the arrow box's hypotenuse length\r\n    const arrowLength = tipArrowRef.offsetWidth;\r\n    const floatingOffset = Math.sqrt(2 * arrowLength ** 2) / 2;\r\n    const padding = 5;\r\n\r\n    return autoUpdate(referenceElement, tipRef, () => {\r\n      computePosition(referenceElement, tipRef, {\r\n        strategy: \"fixed\",\r\n        middleware: [\r\n          offset(floatingOffset),\r\n          flip({\r\n            padding,\r\n          }),\r\n          shift({\r\n            padding,\r\n          }),\r\n          arrow({\r\n            padding: padding + arrowLength,\r\n            element: tipArrowRef,\r\n          }),\r\n          hide({\r\n            padding: 42,\r\n          }),\r\n        ],\r\n        placement,\r\n      }).then(({ x, y, middlewareData, placement: computedPlacement }) => {\r\n        if (middlewareData.hide) {\r\n          Object.assign(tipRef.style, {\r\n            visibility: middlewareData.hide.referenceHidden ? \"hidden\" : \"visible\",\r\n          });\r\n        }\r\n\r\n        Object.assign(tipRef.style, {\r\n          left: `${x}px`,\r\n          top: `${y}px`,\r\n        });\r\n\r\n        const side = computedPlacement.split(\"-\")[0];\r\n\r\n        const staticSide = side\r\n          ? {\r\n              top: \"bottom\",\r\n              right: \"left\",\r\n              bottom: \"top\",\r\n              left: \"right\",\r\n            }[side]\r\n          : \"top\";\r\n\r\n        let angle;\r\n        switch (staticSide) {\r\n          default:\r\n          case \"top\":\r\n            angle = 45;\r\n            break;\r\n          case \"right\":\r\n            angle = 135;\r\n            break;\r\n          case \"bottom\":\r\n            angle = 225;\r\n            break;\r\n          case \"left\":\r\n            angle = 315;\r\n            break;\r\n        }\r\n\r\n        if (middlewareData.arrow && staticSide) {\r\n          const { x: arrowX, y: arrowY } = middlewareData.arrow;\r\n\r\n          Object.assign(tipArrowRef.style, {\r\n            right: \"\",\r\n            bottom: \"\",\r\n            left: arrowX ? `${arrowX}px` : \"\",\r\n            top: arrowY ? `${arrowY}px` : \"\",\r\n            [staticSide]: `${-arrowLength / 2}px`,\r\n            transform: `rotate(${angle}deg)`,\r\n          });\r\n        }\r\n      });\r\n    });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host popover=\"manual\">\r\n        <div class=\"onboarding-tip\" role=\"tooltip\">\r\n          <div class=\"onboarding-tip-inner\">\r\n            <div class=\"onboarding-tip-content-wrapper\">\r\n              {this.headingSlottedElement !== null && (\r\n                <div class=\"onboarding-tip-content-heading\">\r\n                  <dso-icon icon=\"light-bulb\"></dso-icon>\r\n                  <slot name=\"heading\" />\r\n                </div>\r\n              )}\r\n              <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n                <dso-icon icon=\"times\"></dso-icon>\r\n                <span class=\"sr-only\">Sluiten</span>\r\n              </button>\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n          <div class=\"onboarding-tip-arrow\" ref={(ref) => (this.tipArrowRef = ref)}></div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private tipArrowRef: HTMLDivElement | undefined;\r\n\r\n  private get headingSlottedElement() {\r\n    return this.host.querySelector(\"[slot='heading']\");\r\n  }\r\n\r\n  private cleanUp: ReturnType<typeof autoUpdate> | undefined;\r\n\r\n  private get referenceElement(): HTMLElement | undefined {\r\n    const id = this.host.id;\r\n\r\n    if (!id) {\r\n      console.warn(\"Unable to find reference. Onboarding Tip has no [id] attribute.\");\r\n\r\n      return;\r\n    }\r\n\r\n    const rootNode = this.host.getRootNode();\r\n    if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {\r\n      console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n      return;\r\n    }\r\n\r\n    const reference = rootNode.querySelector<HTMLElement>(`[aria-describedby=\"${id}`);\r\n    if (!reference) {\r\n      console.warn(`Unable to find reference element with aria-describedby ${id}`);\r\n\r\n      return;\r\n    }\r\n\r\n    return reference;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"onboarding-tip.js","sourceRoot":"","sources":["../../../../src/components/onboarding-tip/onboarding-tip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { arrow, autoUpdate, computePosition, flip, hide, offset, shift } from \"@floating-ui/dom\";\r\nimport { Side } from \"@floating-ui/utils\";\r\nimport { Placement } from \"@popperjs/core\";\r\nimport { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { OnboardingTipCloseEvent, OnboardingTipPlacement } from \"./onboarding-tip.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-onboarding-tip\",\r\n  styleUrl: \"onboarding-tip.scss\",\r\n  shadow: true,\r\n})\r\nexport class OnboardingTip implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoOnboardingTipElement;\r\n\r\n  /**\r\n   * Where to place the Onboarding Tip relative to its reference element.\r\n   */\r\n  @Prop()\r\n  placement: OnboardingTipPlacement = \"right\";\r\n\r\n  /**\r\n   * Emitted when the user closes the Onboarding Tip.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<OnboardingTipCloseEvent>;\r\n\r\n  @State()\r\n  ready = false;\r\n\r\n  componentDidRender() {\r\n    if (!this.host.matches(\":popover-open\")) {\r\n      this.host.showPopover();\r\n    }\r\n\r\n    if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {\r\n      this.cleanUp = OnboardingTip.positionTip(this.referenceElement, this.host, this.tipArrowRef, this.placement);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.host.matches(\":popover-open\")) {\r\n      this.host.hidePopover();\r\n    }\r\n\r\n    this.cleanUp?.();\r\n    this.cleanUp = undefined;\r\n  }\r\n\r\n  /**\r\n   * This function positions the Onboarding Tip relative to its reference element. It is static so the position is calculated\r\n   * only using the passed arguments.\r\n   */\r\n  private static positionTip(\r\n    referenceElement: HTMLElement,\r\n    tipRef: HTMLDsoOnboardingTipElement,\r\n    tipArrowRef: HTMLDivElement,\r\n    position: Side,\r\n  ) {\r\n    const padding = 5;\r\n    return autoUpdate(referenceElement, tipRef, () => {\r\n      const arrowLength = tipArrowRef.offsetWidth;\r\n\r\n      // Get half the arrow box's hypotenuse length\r\n      const mainAxisOffset = Math.sqrt(2 * arrowLength ** 2) / 2;\r\n\r\n      // 1.5 times the diagonal of the arrow box\r\n      const arrowPadding = arrowLength * Math.sqrt(2) * 1.5;\r\n\r\n      // Same as media-query-breakpoints.$screen-md-min\r\n      const smallViewport = document.body.clientWidth < 992;\r\n\r\n      // Only use top and bottom placement when the viewport is small\r\n      const placement: Placement = smallViewport ? \"top\" : `${position}-start`;\r\n\r\n      computePosition(referenceElement, tipRef, {\r\n        strategy: \"fixed\",\r\n        middleware: [\r\n          offset({\r\n            mainAxis: mainAxisOffset,\r\n            alignmentAxis: -arrowPadding,\r\n          }),\r\n          flip({\r\n            padding,\r\n          }),\r\n          shift({\r\n            padding,\r\n          }),\r\n          arrow({\r\n            padding: arrowPadding,\r\n            element: tipArrowRef,\r\n          }),\r\n          hide({\r\n            padding: arrowPadding + arrowLength + padding,\r\n          }),\r\n        ],\r\n        placement,\r\n      }).then(({ x, y, middlewareData, placement: computedPlacement }) => {\r\n        if (middlewareData.hide) {\r\n          // Tooltip needs to be visible at all times on small viewports\r\n          const disappear = !smallViewport && middlewareData.hide.referenceHidden;\r\n          Object.assign(tipRef.style, {\r\n            // Both of these properties have a CSS transition\r\n            visibility: disappear ? \"hidden\" : \"visible\",\r\n            opacity: disappear ? 0 : 1,\r\n          });\r\n        }\r\n\r\n        Object.assign(tipRef.style, {\r\n          left: `${x}px`,\r\n          top: `${y}px`,\r\n        });\r\n\r\n        const side = computedPlacement.split(\"-\")[0];\r\n\r\n        const staticSide = side\r\n          ? {\r\n              top: \"bottom\",\r\n              right: \"left\",\r\n              bottom: \"top\",\r\n              left: \"right\",\r\n            }[side]\r\n          : \"top\";\r\n\r\n        let angle;\r\n        switch (staticSide) {\r\n          default:\r\n          case \"top\":\r\n            angle = 45;\r\n            break;\r\n          case \"right\":\r\n            angle = 135;\r\n            break;\r\n          case \"bottom\":\r\n            angle = 225;\r\n            break;\r\n          case \"left\":\r\n            angle = 315;\r\n            break;\r\n        }\r\n\r\n        if (middlewareData.arrow && staticSide) {\r\n          const { x: arrowX, y: arrowY } = middlewareData.arrow;\r\n\r\n          Object.assign(tipArrowRef.style, {\r\n            right: \"\",\r\n            bottom: \"\",\r\n            left: arrowX ? `${arrowX}px` : \"\",\r\n            top: arrowY ? `${arrowY}px` : \"\",\r\n            [staticSide]: `${-arrowLength / 2}px`,\r\n            transform: `rotate(${angle}deg)`,\r\n          });\r\n        }\r\n      });\r\n    });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host popover=\"manual\" ready={this.ready} onAnimationend={() => (this.ready = true)}>\r\n        <div class=\"onboarding-tip\" role=\"tooltip\">\r\n          <div class=\"onboarding-tip-inner\">\r\n            <div class=\"onboarding-tip-content-wrapper\">\r\n              {this.headingSlottedElement !== null && (\r\n                <div class=\"onboarding-tip-content-heading\">\r\n                  <dso-icon icon=\"light-bulb\"></dso-icon>\r\n                  <slot name=\"heading\" />\r\n                </div>\r\n              )}\r\n              <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n                <dso-icon icon=\"times\"></dso-icon>\r\n                <span class=\"sr-only\">Sluiten</span>\r\n              </button>\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n          <div class=\"onboarding-tip-arrow\" ref={(ref) => (this.tipArrowRef = ref)}></div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private tipArrowRef: HTMLDivElement | undefined;\r\n\r\n  private get headingSlottedElement() {\r\n    return this.host.querySelector(\"[slot='heading']\");\r\n  }\r\n\r\n  private cleanUp: ReturnType<typeof autoUpdate> | undefined;\r\n\r\n  private get referenceElement(): HTMLElement | undefined {\r\n    const id = this.host.id;\r\n\r\n    if (!id) {\r\n      console.warn(\"Unable to find reference. Onboarding Tip has no [id] attribute.\");\r\n\r\n      return;\r\n    }\r\n\r\n    const rootNode = this.host.getRootNode();\r\n    if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {\r\n      console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n      return;\r\n    }\r\n\r\n    const reference = rootNode.querySelector<HTMLElement>(`[aria-describedby=\"${id}`);\r\n    if (!reference) {\r\n      console.warn(`Unable to find reference element with aria-describedby ${id}`);\r\n\r\n      return;\r\n    }\r\n\r\n    return reference;\r\n  }\r\n}\r\n"]}

package/dist/collection/components/project-item/project-item.js

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class ProjectItem {
     render() {
-        return (h(Fragment, null, h("div", { key: '8bec3fe60bcd97f8776cd94e82d00d54c70314e2', class: "project-item-header" }, h("div", { key: 'fd9590324b23b8f148aa3d7cddc0487306093532', class: "project-item-title" }, h("slot", { key: '693b88aeedb68781010f649ee11c9859cd9f08fe', name: "title" }), this.label && (h("dso-label", { key: '114c276b699f157482370f5d92d911aa43853598', status: "danger", compact: true }, this.label))), h("div", { key: 'fa5b04147e748c54fd7a3a43ed631c3ef63fe39f', class: "project-item-actions" }, h("slot", { key: '3264a097b0bd46bb1de61dca40b9ecd64c22bde3', name: "actions" }))), h("div", { key: '7a074f2fc46fc1bdf90df4ec6bfe0fa85d97dc52', class: "project-item-info" }, h("div", { key: 'b7a8b60f7159d5eeb38496cc226303461180f05e', class: "project-item-progress" }, h("slot", { key: '3dee23f206a0d67ec364bed453411e172160de9a', name: "progress" })), h("div", { key: '1a1219b5270b93d12b1ca657e277d40e9bfbad58', class: "project-item-status" }, h("slot", { key: '3ef9d93686d3131777cb469d9f634c84be9c6d55', name: "status" })))));
+        return (h(Fragment, null, h("div", { key: '8bec3fe60bcd97f8776cd94e82d00d54c70314e2', class: "project-item-header" }, h("div", { key: 'fd9590324b23b8f148aa3d7cddc0487306093532', class: "project-item-title" }, h("slot", { key: '693b88aeedb68781010f649ee11c9859cd9f08fe', name: "title" }), this.label && (h("dso-label", { key: '34f1c053a2d4b1bac5f2fa140500ad2f2f58d30a', status: "error", compact: true }, this.label))), h("div", { key: '981229a74497b06d9f046e7dcc4869fc2a0c5dcb', class: "project-item-actions" }, h("slot", { key: 'f2035abf99dba549caaa641cd9d6ce9bce1fca8a', name: "actions" }))), h("div", { key: '273a97d59cf7252ee484b34637b558c3cfbf2344', class: "project-item-info" }, h("div", { key: '4b30c63f983f7ab0ec3172bc73bddcb02566bbe3', class: "project-item-progress" }, h("slot", { key: '47e70c04a756464923840a46fcc36902de12a6d3', name: "progress" })), h("div", { key: '74b95a2892d4dd11b3885d940f37fdc2c3e9f837', class: "project-item-status" }, h("slot", { key: '057a799ac9299a5cbd1283a9a4bced77f82b86a2', name: "status" })))));
     }
     static get is() { return "dso-project-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/project-item/project-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"project-item.js","sourceRoot":"","sources":["../../../../src/components/project-item/project-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOjF,MAAM,OAAO,WAAW;IAOtB,MAAM;QACJ,OAAO,CACL;YACE,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,4DAAK,KAAK,EAAC,oBAAoB;oBAC7B,6DAAM,IAAI,EAAC,OAAO,GAAG;oBACpB,IAAI,CAAC,KAAK,IAAI,CACb,kEAAW,MAAM,EAAC,QAAQ,EAAC,OAAO,UAC/B,IAAI,CAAC,KAAK,CACD,CACb,CACG;gBACN,4DAAK,KAAK,EAAC,sBAAsB;oBAC/B,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF;YACN,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,4DAAK,KAAK,EAAC,uBAAuB;oBAChC,6DAAM,IAAI,EAAC,UAAU,GAAG,CACpB;gBACN,4DAAK,KAAK,EAAC,qBAAqB;oBAC9B,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF,CACL,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-project-item\",\r\n  styleUrl: \"project-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class ProjectItem implements ComponentInterface {\r\n  /**\r\n   * The label of the project item.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <div class=\"project-item-header\">\r\n          <div class=\"project-item-title\">\r\n            <slot name=\"title\" />\r\n            {this.label && (\r\n              <dso-label status=\"danger\" compact>\r\n                {this.label}\r\n              </dso-label>\r\n            )}\r\n          </div>\r\n          <div class=\"project-item-actions\">\r\n            <slot name=\"actions\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"project-item-info\">\r\n          <div class=\"project-item-progress\">\r\n            <slot name=\"progress\" />\r\n          </div>\r\n          <div class=\"project-item-status\">\r\n            <slot name=\"status\" />\r\n          </div>\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"project-item.js","sourceRoot":"","sources":["../../../../src/components/project-item/project-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOjF,MAAM,OAAO,WAAW;IAOtB,MAAM;QACJ,OAAO,CACL;YACE,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,4DAAK,KAAK,EAAC,oBAAoB;oBAC7B,6DAAM,IAAI,EAAC,OAAO,GAAG;oBACpB,IAAI,CAAC,KAAK,IAAI,CACb,kEAAW,MAAM,EAAC,OAAO,EAAC,OAAO,UAC9B,IAAI,CAAC,KAAK,CACD,CACb,CACG;gBACN,4DAAK,KAAK,EAAC,sBAAsB;oBAC/B,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF;YACN,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,4DAAK,KAAK,EAAC,uBAAuB;oBAChC,6DAAM,IAAI,EAAC,UAAU,GAAG,CACpB;gBACN,4DAAK,KAAK,EAAC,qBAAqB;oBAC9B,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF,CACL,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-project-item\",\r\n  styleUrl: \"project-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class ProjectItem implements ComponentInterface {\r\n  /**\r\n   * The label of the project item.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <div class=\"project-item-header\">\r\n          <div class=\"project-item-title\">\r\n            <slot name=\"title\" />\r\n            {this.label && (\r\n              <dso-label status=\"error\" compact>\r\n                {this.label}\r\n              </dso-label>\r\n            )}\r\n          </div>\r\n          <div class=\"project-item-actions\">\r\n            <slot name=\"actions\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"project-item-info\">\r\n          <div class=\"project-item-progress\">\r\n            <slot name=\"progress\" />\r\n          </div>\r\n          <div class=\"project-item-status\">\r\n            <slot name=\"status\" />\r\n          </div>\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -939,13 +939,13 @@ a.dso-tertiary, a.dso-tertiary:visited {
   }
 }
 
-:host([is-responsive]) .dso-table-body {
+:host([is-responsive=true]) .dso-table-body {
   border: 1px solid #ccc;
   margin-block-end: 0;
   overflow-y: auto;
   inline-size: 100%;
 }
-:host([is-responsive]) .dso-table-body.dso-body {
+:host([is-responsive=true]) .dso-table-body.dso-body {
   inline-size: calc(100% - 64px);
 }
 

package/dist/collection/components/table/table.js

@@ -9,10 +9,6 @@ export class Table {
          * Prevents the table being opened in a modal.
          */
         this.noModal = false;
-        /**
-         * Indicates whether the table is currently horizontally scrollable.
-         */
-        this.isResponsive = false;
         this.modalActive = false;
     }
     startResponsiveBehavior() {
@@ -33,9 +29,9 @@ export class Table {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        var _a, _b;
+        var _a, _b, _c;
         const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
-        return (h(Host, { key: '597c45b1c1d9daadde1c9bc790b7ac82caf1e3e9' }, this.modalActive && this.placeholderHeight && (h("div", { key: '6528e1257071d1cc882aa6b306e4f237b456043c', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '74223087b6990b7bfad1c13c9fe6505a1cfadd11', class: "dso-modal-overlay" }), h("div", { key: '2002f85851eeb384959030ca56540605333c3048', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: 'b3149d97f99a51a27767111236571e3c62752ddb', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: 'f8e00a412b6fcae44e39382efa095c7a1f10c814', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: 'aa5ac11abd7549558f69f678fa525339432dc451', class: "dso-responsive-message" }, h("span", { key: '58dcb714e2f7cdadc33065b6d7313fb84a2e05cc' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '9cfa4c5f22968b729b1c9ed81c8e07cd9d87f71c', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: 'f6463df449b32b8ccea6cd9b5458a5773a2b685e', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: 'ec916917ae6428412acb48416067b0f38e46a5cc' }, "vergroten"), h("dso-icon", { key: 'aea959472bcb120dfdbb860499b6c039896e6e87', icon: "external-link" }))))), this.modalActive && (h("div", { key: 'f31f95ea093300c6a567288410912e59bb1ed125', class: "dso-header" }, h("h2", { key: 'd52fa86bc4af3fd58d58860cba019bb7aa3308dc', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '51f618cedca322f7bd8aa05e8329f9642ef89d89', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: '5a720c5e9ce84795f48704f3764dd3ec94ead23c', icon: "times" }), h("span", { key: '5f1c813c0d339242181429ebfd8a7d99778f6212', class: "sr-only" }, "Sluiten")))), h("div", { key: '3d25249e219aaec8178a10f3488899ab795325f9', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '9249deaef3c3abde5a74b8af340c110a3e905bf4' }))))));
+        return (h(Host, { key: '2e3e36a2af519d04cc704561e1f96f32d8753c4b', "is-responsive": (_c = this.isResponsive) === null || _c === void 0 ? void 0 : _c.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: 'b91b4b4a9552f2b40dbcfe79cbcca31ea0d51747', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '12034faea5d74ae417241d8029575e93ab4d3d9d', class: "dso-modal-overlay" }), h("div", { key: 'cf5306514dbe5310b8ba0f13343dc78c9931d393', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '823618582ff57f7469da084b8e4ac0f39c0e5b5f', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: 'e39bd37081810df2506b1205c56d44193436c625', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: '5578938c4e5070051d8bcaceb9327428195e48a7', class: "dso-responsive-message" }, h("span", { key: 'a5c126e5a8b6ccf1b15c6e57b663b1b702ae385e' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '55764237e9959086b8e696959602646089616999', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: '9d3b6669fbcb8fb2364472a792e662d02096178a', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: '09f023589648b483cecb7de8c1691f1d85a4173a' }, "vergroten"), h("dso-icon", { key: '4474dbbee7d540ac6e68f0058166eab15732ea2c', icon: "external-link" }))))), this.modalActive && (h("div", { key: 'ccbf556d51530bc6d86b3ce66b7dd69b451fff3d', class: "dso-header" }, h("h2", { key: '39fe21305ac8a1df8cfa5ac3a5c56c067ead2a69', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '496c1135c8820f061642555d026da6f27cca5a9b', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: '62704273cddf8e2524ce038ca0270010748eac6e', icon: "times" }), h("span", { key: '9e3220f8f696877cd568cfc85f36f39447b074ee', class: "sr-only" }, "Sluiten")))), h("div", { key: '6f0ab07376dffb6ccdb90e15e8aa9c94159207b6', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '5471317311645d02906ae73e265ab6185aa3ceb3' }))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;
@@ -112,31 +108,12 @@ export class Table {
                 "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
-            },
-            "isResponsive": {
-                "type": "boolean",
-                "attribute": "is-responsive",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Indicates whether the table is currently horizontally scrollable."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
+            "isResponsive": {},
             "modalActive": {},
             "placeholderHeight": {}
         };

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

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Host, Prop, State, h } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\n@Component({\r\n  tag: \"dso-table\",\r\n  styleUrl: \"table.scss\",\r\n  shadow: true,\r\n})\r\nexport class Table implements ComponentInterface {\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  private focusTrapElement?: HTMLDivElement;\r\n\r\n  private buttonElement?: HTMLButtonElement;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private labelledbyId = v4();\r\n\r\n  @Element()\r\n  host!: HTMLDsoTableElement;\r\n\r\n  /**\r\n   * Prevents the table being opened in a modal.\r\n   */\r\n  @Prop({ reflect: true })\r\n  noModal = false;\r\n\r\n  /**\r\n   * Indicates whether the table is currently horizontally scrollable.\r\n   */\r\n  @Prop({ reflect: true })\r\n  isResponsive = false;\r\n\r\n  @State()\r\n  modalActive = false;\r\n\r\n  @State()\r\n  placeholderHeight?: number;\r\n\r\n  private startResponsiveBehavior(): void {\r\n    this.resizeObserver?.observe(this.host);\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.startResponsiveBehavior();\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setFocusTrap();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    const caption = this.host.querySelector(\":scope > table > caption\")?.textContent?.trim();\r\n\r\n    return (\r\n      <Host>\r\n        {this.modalActive && this.placeholderHeight && (\r\n          <div class=\"dso-table-placeholder\" style={{ height: `${this.placeholderHeight}px` }} />\r\n        )}\r\n\r\n        {this.modalActive && <div class=\"dso-modal-overlay\"></div>}\r\n\r\n        <div class={{ \"dso-modal\": this.modalActive }}>\r\n          <div\r\n            class={{ \"dso-dialog\": this.modalActive, \"dso-table-dialog\": true }}\r\n            ref={(element) => (this.focusTrapElement = element)}\r\n            {...(this.modalActive ? { [\"aria-labelledby\"]: this.labelledbyId, role: \"dialog\" } : {})}\r\n          >\r\n            {(this.isResponsive || !this.noModal) && (\r\n              <div class=\"dso-table-utilities\" style={this.modalActive ? { display: \"none\" } : undefined}>\r\n                {this.isResponsive && (\r\n                  <div class=\"dso-responsive-message\">\r\n                    <span>beweeg de tabel van links naar rechts</span>\r\n                  </div>\r\n                )}\r\n\r\n                {!this.noModal && (\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"dso-tertiary open-modal-button\"\r\n                    ref={(element) => (this.buttonElement = element)}\r\n                    onClick={() => this.openModal()}\r\n                  >\r\n                    <span class=\"sr-only\">tabel {caption ?? \"\"} </span>\r\n                    <span>vergroten</span>\r\n                    <dso-icon icon=\"external-link\"></dso-icon>\r\n                  </button>\r\n                )}\r\n              </div>\r\n            )}\r\n\r\n            {this.modalActive && (\r\n              <div class=\"dso-header\">\r\n                <h2 id={this.labelledbyId} class={{ \"sr-only\": !caption }}>\r\n                  {caption || \"Uitvergrote tabel dialoog\"}\r\n                </h2>\r\n                <button type=\"button\" class=\"dso-close\" onClick={() => this.closeModal()}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              </div>\r\n            )}\r\n\r\n            <div class={{ \"dso-body\": this.modalActive, \"dso-table-body\": true }}>\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private openModal() {\r\n    this.placeholderHeight = this.host.clientHeight;\r\n    this.modalActive = true;\r\n  }\r\n\r\n  private closeModal() {\r\n    this.placeholderHeight = undefined;\r\n    this.modalActive = false;\r\n  }\r\n\r\n  private setFocusTrap() {\r\n    if (this.modalActive && this.focusTrapElement && !this.trap) {\r\n      this.trap = createFocusTrap([this.host, this.focusTrapElement], {\r\n        escapeDeactivates: true,\r\n        clickOutsideDeactivates: (e) => {\r\n          if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {\r\n            this.closeModal();\r\n\r\n            return false;\r\n          }\r\n\r\n          return true;\r\n        },\r\n        setReturnFocus: this.buttonElement ?? false,\r\n        onDeactivate: () => this.closeModal(),\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      }).activate();\r\n    } else if (!this.modalActive && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  private setResponsiveTable([dsoTable]: ResizeObserverEntry[]): void {\r\n    if (!dsoTable) {\r\n      throw new Error(\"No dsoTable found\");\r\n    }\r\n\r\n    const tableElement = dsoTable.target.querySelector(\"table\");\r\n\r\n    if (dsoTable && tableElement instanceof HTMLTableElement) {\r\n      this.isResponsive =\r\n        Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);\r\n    }\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Host, Prop, State, h } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\n@Component({\r\n  tag: \"dso-table\",\r\n  styleUrl: \"table.scss\",\r\n  shadow: true,\r\n})\r\nexport class Table implements ComponentInterface {\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  private focusTrapElement?: HTMLDivElement;\r\n\r\n  private buttonElement?: HTMLButtonElement;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private labelledbyId = v4();\r\n\r\n  @Element()\r\n  host!: HTMLDsoTableElement;\r\n\r\n  /**\r\n   * Prevents the table being opened in a modal.\r\n   */\r\n  @Prop({ reflect: true })\r\n  noModal = false;\r\n\r\n  @State()\r\n  isResponsive?: boolean;\r\n\r\n  @State()\r\n  modalActive = false;\r\n\r\n  @State()\r\n  placeholderHeight?: number;\r\n\r\n  private startResponsiveBehavior(): void {\r\n    this.resizeObserver?.observe(this.host);\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.startResponsiveBehavior();\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setFocusTrap();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    const caption = this.host.querySelector(\":scope > table > caption\")?.textContent?.trim();\r\n\r\n    return (\r\n      <Host is-responsive={this.isResponsive?.toString()}>\r\n        {this.modalActive && this.placeholderHeight && (\r\n          <div class=\"dso-table-placeholder\" style={{ height: `${this.placeholderHeight}px` }} />\r\n        )}\r\n\r\n        {this.modalActive && <div class=\"dso-modal-overlay\"></div>}\r\n\r\n        <div class={{ \"dso-modal\": this.modalActive }}>\r\n          <div\r\n            class={{ \"dso-dialog\": this.modalActive, \"dso-table-dialog\": true }}\r\n            ref={(element) => (this.focusTrapElement = element)}\r\n            {...(this.modalActive ? { [\"aria-labelledby\"]: this.labelledbyId, role: \"dialog\" } : {})}\r\n          >\r\n            {(this.isResponsive || !this.noModal) && (\r\n              <div class=\"dso-table-utilities\" style={this.modalActive ? { display: \"none\" } : undefined}>\r\n                {this.isResponsive && (\r\n                  <div class=\"dso-responsive-message\">\r\n                    <span>beweeg de tabel van links naar rechts</span>\r\n                  </div>\r\n                )}\r\n\r\n                {!this.noModal && (\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"dso-tertiary open-modal-button\"\r\n                    ref={(element) => (this.buttonElement = element)}\r\n                    onClick={() => this.openModal()}\r\n                  >\r\n                    <span class=\"sr-only\">tabel {caption ?? \"\"} </span>\r\n                    <span>vergroten</span>\r\n                    <dso-icon icon=\"external-link\"></dso-icon>\r\n                  </button>\r\n                )}\r\n              </div>\r\n            )}\r\n\r\n            {this.modalActive && (\r\n              <div class=\"dso-header\">\r\n                <h2 id={this.labelledbyId} class={{ \"sr-only\": !caption }}>\r\n                  {caption || \"Uitvergrote tabel dialoog\"}\r\n                </h2>\r\n                <button type=\"button\" class=\"dso-close\" onClick={() => this.closeModal()}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              </div>\r\n            )}\r\n\r\n            <div class={{ \"dso-body\": this.modalActive, \"dso-table-body\": true }}>\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private openModal() {\r\n    this.placeholderHeight = this.host.clientHeight;\r\n    this.modalActive = true;\r\n  }\r\n\r\n  private closeModal() {\r\n    this.placeholderHeight = undefined;\r\n    this.modalActive = false;\r\n  }\r\n\r\n  private setFocusTrap() {\r\n    if (this.modalActive && this.focusTrapElement && !this.trap) {\r\n      this.trap = createFocusTrap([this.host, this.focusTrapElement], {\r\n        escapeDeactivates: true,\r\n        clickOutsideDeactivates: (e) => {\r\n          if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {\r\n            this.closeModal();\r\n\r\n            return false;\r\n          }\r\n\r\n          return true;\r\n        },\r\n        setReturnFocus: this.buttonElement ?? false,\r\n        onDeactivate: () => this.closeModal(),\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      }).activate();\r\n    } else if (!this.modalActive && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  private setResponsiveTable([dsoTable]: ResizeObserverEntry[]): void {\r\n    if (!dsoTable) {\r\n      throw new Error(\"No dsoTable found\");\r\n    }\r\n\r\n    const tableElement = dsoTable.target.querySelector(\"table\");\r\n\r\n    if (dsoTable && tableElement instanceof HTMLTableElement) {\r\n      this.isResponsive =\r\n        Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);\r\n    }\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,3 @@
+import { h } from "@stencil/core";
+export const FilterPanel = ({ title, ref, dsoCloseFilterPanel }) => (h("dialog", { class: "filter-panel", ref: ref }, title && h("h3", null, title), h("button", { type: "button", class: "dso-close", onClick: dsoCloseFilterPanel }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten")), h("slot", { name: "filter-panel" })));
+//# sourceMappingURL=filter-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-panel.js","sourceRoot":"","sources":["../../../../../src/components/viewer-grid/components/filter-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAQvD,MAAM,CAAC,MAAM,WAAW,GAAoD,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,mBAAmB,EAAE,EAAE,EAAE,CAAC,CACnH,cAAQ,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,GAAG;IAClC,KAAK,IAAI,cAAK,KAAK,CAAM;IAC1B,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,mBAAmB;QAClE,gBAAU,IAAI,EAAC,OAAO,GAAY;QAClC,YAAM,KAAK,EAAC,SAAS,cAAe,CAC7B;IACT,YAAM,IAAI,EAAC,cAAc,GAAG,CACrB,CACV,CAAC","sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterPanelProps {\r\n  title?: string;\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  dsoCloseFilterPanel: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const FilterPanel: FunctionalComponent<ViewerGridFilterPanelProps> = ({ title, ref, dsoCloseFilterPanel }) => (\r\n  <dialog class=\"filter-panel\" ref={ref}>\r\n    {title && <h3>{title}</h3>}\r\n    <button type=\"button\" class=\"dso-close\" onClick={dsoCloseFilterPanel}>\r\n      <dso-icon icon=\"times\"></dso-icon>\r\n      <span class=\"sr-only\">Sluiten</span>\r\n    </button>\r\n    <slot name=\"filter-panel\" />\r\n  </dialog>\r\n);\r\n"]}

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

@@ -1,5 +1,5 @@
 export { DocumentPanel } from "./document-panel";
-export { Filterpanel } from "./filterpanel";
+export { FilterPanel } from "./filter-panel";
 export { MainPanel } from "./main-panel";
 export { Overlay } from "./overlay";
 //# sourceMappingURL=index.js.map

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,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"]}
+{"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,gBAAgB,CAAC;AAC7C,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 \"./filter-panel\";\r\nexport { MainPanel } from \"./main-panel\";\r\nexport { Overlay } from \"./overlay\";\r\n"]}

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

@@ -1,16 +1,13 @@
 import { h } from "@stencil/core";
 import clsx from "clsx";
-import { SizingButtons } from "./sizing-buttons";
-export const MainPanel = ({ mode, tabView, mainSize, documentPanelOpen, mainPanelExpanded, mainPanelHidden, shrinkMain, expandMain, toggleMainPanel, dsoMainSizeChangeAnimationEnd, }) => (h("div", { class: clsx("dso-main-panel", {
+export const MainPanel = ({ tabView, mainSize, documentPanelOpen, mainPanelExpanded, mainPanelHidden, toggleMainPanel, dsoMainSizeChangeAnimationEnd, }) => (h("div", { class: clsx("dso-main-panel", {
         compact: !tabView && documentPanelOpen && !mainPanelExpanded,
-        contracted: !tabView && !documentPanelOpen && !mainPanelExpanded && mode === "vdk",
+        contracted: !tabView && !documentPanelOpen && !mainPanelExpanded,
         expanded: !tabView && documentPanelOpen && mainPanelExpanded,
         collapsed: mainPanelHidden,
     }), onTransitionEnd: (e) => {
         if (e.propertyName === "flex-basis") {
             dsoMainSizeChangeAnimationEnd.emit({ currentSize: mainSize });
         }
-    } }, !tabView &&
-    ((mode === "vrk" && (h(SizingButtons, { panelLabel: "Hoofdpaneel", size: mainSize, expand: expandMain, shrink: shrinkMain, placement: "left" }))) ||
-        (mode === "vdk" && documentPanelOpen && (h("div", { class: "toggle-button" }, h("button", { type: "button", onClick: toggleMainPanel }, h("span", { class: "sr-only" }, "Zoeken paneel ", 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("div", { class: "toggle-button" }, h("button", { type: "button", onClick: toggleMainPanel }, h("span", { class: "sr-only" }, "Zoeken paneel ", mainPanelHidden ? "tonen" : "verbergen"), h("dso-icon", { icon: mainPanelHidden ? "chevron-right" : "chevron-left" })))), h("div", { class: clsx("content", { invisible: mainPanelHidden }) }, h("slot", { name: "main" }))));
 //# 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,EAAqC,CAAC,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAejD,MAAM,CAAC,MAAM,SAAS,GAAkD,CAAC,EACvE,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,UAAU,EACV,UAAU,EACV,eAAe,EACf,6BAA6B,GAC9B,EAAE,EAAE,CAAC,CACJ,WACE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE;QAC5B,OAAO,EAAE,CAAC,OAAO,IAAI,iBAAiB,IAAI,CAAC,iBAAiB;QAC5D,UAAU,EAAE,CAAC,OAAO,IAAI,CAAC,iBAAiB,IAAI,CAAC,iBAAiB,IAAI,IAAI,KAAK,KAAK;QAClF,QAAQ,EAAE,CAAC,OAAO,IAAI,iBAAiB,IAAI,iBAAiB;QAC5D,SAAS,EAAE,eAAe;KAC3B,CAAC,EACF,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;QACrB,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,EAAE,CAAC;YACpC,6BAA6B,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC;QAChE,CAAC;IACH,CAAC;IAEA,CAAC,OAAO;QACP,CAAC,CAAC,IAAI,KAAK,KAAK,IAAI,CAClB,EAAC,aAAa,IACZ,UAAU,EAAC,aAAa,EACxB,IAAI,EAAE,QAAQ,EACd,MAAM,EAAE,UAAU,EAClB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAC,MAAM,GAChB,CACH,CAAC;YACA,CAAC,IAAI,KAAK,KAAK,IAAI,iBAAiB,IAAI,CACtC,WAAK,KAAK,EAAC,eAAe;gBACxB,cAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,eAAe;oBAC5C,YAAM,KAAK,EAAC,SAAS;;wBAAgB,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAQ;oBACpF,gBAAU,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,GAAa,CACxE,CACL,CACP,CAAC,CAAC;IACP,WAAK,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;QACzD,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,CACP,CAAC","sourcesContent":["import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridChangeSizeAnimationEndEvent, ViewerGridMode, ViewerGridPanelSize } from \"../viewer-grid.interfaces\";\r\n\r\nimport { SizingButtons } from \"./sizing-buttons\";\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  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  toggleMainPanel,\r\n  dsoMainSizeChangeAnimationEnd,\r\n}) => (\r\n  <div\r\n    class={clsx(\"dso-main-panel\", {\r\n      compact: !tabView && documentPanelOpen && !mainPanelExpanded,\r\n      contracted: !tabView && !documentPanelOpen && !mainPanelExpanded && mode === \"vdk\",\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      ((mode === \"vrk\" && (\r\n        <SizingButtons\r\n          panelLabel=\"Hoofdpaneel\"\r\n          size={mainSize}\r\n          expand={expandMain}\r\n          shrink={shrinkMain}\r\n          placement=\"left\"\r\n        />\r\n      )) ||\r\n        (mode === \"vdk\" && documentPanelOpen && (\r\n          <div class=\"toggle-button\">\r\n            <button type=\"button\" onClick={toggleMainPanel}>\r\n              <span class=\"sr-only\">Zoeken paneel {mainPanelHidden ? \"tonen\" : \"verbergen\"}</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    </div>\r\n  </div>\r\n);\r\n"]}
+{"version":3,"file":"main-panel.js","sourceRoot":"","sources":["../../../../../src/components/viewer-grid/components/main-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,CAAC,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,IAAI,MAAM,MAAM,CAAC;AAcxB,MAAM,CAAC,MAAM,SAAS,GAAkD,CAAC,EACvE,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,6BAA6B,GAC9B,EAAE,EAAE,CAAC,CACJ,WACE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE;QAC5B,OAAO,EAAE,CAAC,OAAO,IAAI,iBAAiB,IAAI,CAAC,iBAAiB;QAC5D,UAAU,EAAE,CAAC,OAAO,IAAI,CAAC,iBAAiB,IAAI,CAAC,iBAAiB;QAChE,QAAQ,EAAE,CAAC,OAAO,IAAI,iBAAiB,IAAI,iBAAiB;QAC5D,SAAS,EAAE,eAAe;KAC3B,CAAC,EACF,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;QACrB,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,EAAE,CAAC;YACpC,6BAA6B,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC;QAChE,CAAC;IACH,CAAC;IAEA,CAAC,OAAO,IAAI,iBAAiB,IAAI,CAChC,WAAK,KAAK,EAAC,eAAe;QACxB,cAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,eAAe;YAC5C,YAAM,KAAK,EAAC,SAAS;;gBAAgB,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAQ;YACpF,gBAAU,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,GAAa,CACxE,CACL,CACP;IACD,WAAK,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;QACzD,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,CACP,CAAC","sourcesContent":["import { EventEmitter, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ViewerGridChangeSizeAnimationEndEvent, ViewerGridPanelSize } from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n  tabView: boolean;\r\n  mainSize: ViewerGridPanelSize;\r\n  documentPanelOpen: boolean;\r\n  mainPanelExpanded: boolean;\r\n  mainPanelHidden: boolean;\r\n  toggleMainPanel: () => void;\r\n  dsoMainSizeChangeAnimationEnd: EventEmitter<ViewerGridChangeSizeAnimationEndEvent>;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n  tabView,\r\n  mainSize,\r\n  documentPanelOpen,\r\n  mainPanelExpanded,\r\n  mainPanelHidden,\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      contracted: !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 && documentPanelOpen && (\r\n      <div class=\"toggle-button\">\r\n        <button type=\"button\" onClick={toggleMainPanel}>\r\n          <span class=\"sr-only\">Zoeken paneel {mainPanelHidden ? \"tonen\" : \"verbergen\"}</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    </div>\r\n  </div>\r\n);\r\n"]}