@dso-toolkit/core 45.0.1 → 45.1.0

package/dist/collection/components/helpcenter-panel/helpcenter-panel.css

@@ -1,7 +1,5 @@
 :host {
   display: block;
-  --di-times: url("data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e");
-  --di-times-wit: url("data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e");
 }
 
 .sr-only {
@@ -35,15 +33,6 @@
 }
 
 .open-button {
-  display: inline-block;
-  font-size: 1em;
-  font-weight: 500;
-  margin-bottom: 0;
-  text-decoration: none;
-  touch-action: manipulation;
-  text-align: left;
-  user-select: none;
-  vertical-align: middle;
   display: inline-block;
   font-size: 1em;
   font-weight: 500;
@@ -75,28 +64,6 @@
 .open-button:active {
   outline: 0;
 }
-.open-button.extern::after, .open-button.download::after {
-  content: "";
-  display: inline-block;
-  height: 1.5em;
-  margin-left: 8px;
-  vertical-align: top;
-  width: 1.5em;
-}
-.open-button:focus, .open-button:focus-visible {
-  outline-offset: 2px;
-}
-.open-button:active {
-  outline: 0;
-}
-.open-button.extern::after, .open-button.download::after {
-  content: "";
-  display: inline-block;
-  height: 1.5em;
-  margin-left: 8px;
-  vertical-align: top;
-  width: 1.5em;
-}
 .open-button:hover {
   background-color: #275937;
   border-color: #275937;
@@ -128,22 +95,6 @@
   height: 16px;
   width: 16px;
 }
-.open-button.download::after {
-  background: var(--dso-icon, var(--di-download-wit)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 24px;
-  vertical-align: top;
-  width: 24px;
-}
-.open-button.extern::after {
-  background: var(--dso-icon, var(--di-external-link-wit)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 24px;
-  vertical-align: top;
-  width: 24px;
-}
 .open-button dso-icon,
 .open-button svg.di {
   margin-left: -8px;
@@ -222,14 +173,6 @@
 .close-button:active {
   outline: 0;
 }
-.close-button.extern::after, .close-button.download::after {
-  content: "";
-  display: inline-block;
-  height: 1.5em;
-  margin-left: 8px;
-  vertical-align: top;
-  width: 1.5em;
-}
 .close-button:hover {
   background-color: #39870c;
   border-color: #39870c;
@@ -261,34 +204,6 @@
   height: 16px;
   width: 16px;
 }
-.close-button.download::after {
-  background: var(--dso-icon, var(--di-download)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 24px;
-  vertical-align: top;
-  width: 24px;
-}
-.close-button.download:hover::after {
-  --dso-icon: var(--di-download-wit);
-}
-.close-button.download[disabled]::after {
-  --dso-icon: var(--di-download-grasgroen-40);
-}
-.close-button.extern::after {
-  background: var(--dso-icon, var(--di-external-link)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 24px;
-  vertical-align: top;
-  width: 24px;
-}
-.close-button.extern:hover::after {
-  --dso-icon: var(--di-external-link-wit);
-}
-.close-button.extern[disabled]::after {
-  --dso-icon: var(--di-external-link-grasgroen-40);
-}
 .close-button dso-icon,
 .close-button svg.di {
   margin-left: -8px;
@@ -352,15 +267,9 @@
   height: 16px;
   width: 16px;
 }
-.close-button::before {
-  background: var(--dso-icon, var(--di-times)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 24px;
-  vertical-align: top;
-  width: 24px;
-  content: "";
-  display: inline-block;
+.close-button dso-icon {
+  margin-left: 0;
+  margin-right: 0;
   position: absolute;
   left: 50%;
   top: 50%;
@@ -369,14 +278,6 @@
 .close-button:hover, .close-button:active, .close-button:focus {
   cursor: pointer;
 }
-.close-button:hover::before, .close-button:active::before, .close-button:focus::before {
-  background: var(--dso-icon, var(--di-times-wit)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 24px;
-  vertical-align: top;
-  width: 24px;
-}
 .close-button.close {
   display: none;
 }

package/dist/collection/components/helpcenter-panel/helpcenter-panel.js

@@ -1,7 +1,9 @@
-import { h, Component, Fragment, Prop, State } from "@stencil/core";
+import { h, Component, Fragment, Prop, State, Watch, Listen } from "@stencil/core";
+import { createFocusTrap } from 'focus-trap';
 const maxCssTransitionMilliseconds = 500;
 export class HelpcenterPanel {
   constructor() {
+    this.iframeLoaded = false;
     this.label = "Hulp nodig";
     this.visibility = "hidden";
     this.isOpen = "close";
@@ -27,15 +29,65 @@ export class HelpcenterPanel {
       }, maxCssTransitionMilliseconds);
     };
   }
+  watchUrl(url) {
+    if (this.isOpen === 'open' && this.iframeUrl !== url) {
+      this.iframeUrl = url;
+    }
+  }
+  watchIsOpen(isOpen) {
+    const body = document.querySelector('body');
+    if (isOpen === 'open') {
+      body === null || body === void 0 ? void 0 : body.style.setProperty('overflow', 'hidden');
+      if (this.iframeUrl !== this.url) {
+        this.iframeUrl = this.url;
+      }
+    }
+    else {
+      body === null || body === void 0 ? void 0 : body.style.removeProperty('overflow');
+    }
+  }
+  keyDownListener(event) {
+    if (event.key === 'Escape' && this.isOpen === 'open') {
+      this.closeClick();
+    }
+  }
+  createTrap() {
+    var _a, _b;
+    if (!this.panelWrapperElement) {
+      return;
+    }
+    this.trap = createFocusTrap(this.panelWrapperElement, {
+      allowOutsideClick: true,
+      tabbableOptions: {
+        getShadowRoot: true,
+      },
+      setReturnFocus: (_a = this.openButtonElement) !== null && _a !== void 0 ? _a : false,
+      initialFocus: (_b = this.closeButtonElement) !== null && _b !== void 0 ? _b : false,
+    }).activate();
+  }
+  componentDidRender() {
+    var _a;
+    if (this.isOpen === 'open' && this.iframeLoaded && !this.trap) {
+      this.createTrap();
+    }
+    else if (this.isOpen === 'close' && this.trap) {
+      (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+      delete this.trap;
+    }
+  }
   render() {
     return (h(Fragment, null,
-      h("button", { type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded": "false", "aria-haspopup": "dialog" },
+      h("button", { type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded": this.isOpen === 'open' ? 'true' : 'false', "aria-haspopup": "dialog", "aria-controls": "dso-panel-wrapper", ref: element => this.openButtonElement = element },
         h("dso-icon", { icon: "help" }),
         h("span", null, this.label)),
-      h("div", { class: `wrapper ${this.visibility}` },
+      h("div", { id: "dso-panel-wrapper", class: `wrapper ${this.visibility}`, ref: element => this.panelWrapperElement = element },
         h("div", { class: "dimscreen", onClick: this.closeClick }),
-        h("div", { class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe ? h("iframe", { src: this.url }) : h("div", null)),
-        h("button", { type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick, "aria-expanded": "true" },
+        h("div", { class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe
+          ?
+            h("iframe", { src: this.iframeUrl, tabindex: "0", onLoad: () => { this.createTrap(); this.iframeLoaded = true; } })
+          : h("div", null)),
+        h("button", { type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick, "aria-expanded": this.isOpen === 'open' ? 'true' : 'false', "aria-controls": "dso-panel-wrapper", ref: element => this.closeButtonElement = element },
+          h("dso-icon", { icon: "times" }),
           h("span", { class: "sr-only" }, "sluiten")))));
   }
   static get is() { return "dso-helpcenter-panel"; }
@@ -89,4 +141,18 @@ export class HelpcenterPanel {
     "slideState": {},
     "loadIframe": {}
   }; }
+  static get watchers() { return [{
+      "propName": "url",
+      "methodName": "watchUrl"
+    }, {
+      "propName": "isOpen",
+      "methodName": "watchIsOpen"
+    }]; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "keyDownListener",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
 }

package/dist/collection/components/highlight-box/highlight-box.css

@@ -1,6 +1,4 @@
 :host {
-  --di-external-link-grijs90: url("data:image/svg+xml,%3csvg id='external-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M19%2c6V9.69c0%2c.33-.2.41-.43.17L17.06%2c8.35l-3.35%2c3.36a1%2c1%2c0%2c0%2c1-1.42%2c0%2c1%2c1%2c0%2c0%2c1%2c0-1.42l3.36-3.35L14.14%2c5.43C13.9%2c5.19%2c14%2c5%2c14.31%2c5H19V6ZM18%2c17V13a1%2c1%2c0%2c0%2c0-2%2c0v4a1%2c1%2c0%2c0%2c1-1%2c1H7a1%2c1%2c0%2c0%2c1-1-1V9A1%2c1%2c0%2c0%2c1%2c7%2c8h4a1%2c1%2c0%2c0%2c0%2c0-2H7A3%2c3%2c0%2c0%2c0%2c4%2c9v8a3%2c3%2c0%2c0%2c0%2c3%2c3h8A3%2c3%2c0%2c0%2c0%2c18%2c17Z'/%3e %3c/svg%3e");
-  --di-download-grijs90: url("data:image/svg+xml,%3csvg id='download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M18.72%2c10.44%2c12%2c17l-6.7-6.52C4.8%2c10%2c5%2c9.63%2c5.63%2c9.63H8.5V1.82A.8.8%2c0%2c0%2c1%2c9.28%2c1h5.44a.8.8%2c0%2c0%2c1%2c.78.82V9.61h2.87C19%2c9.6%2c19.2%2c10%2c18.72%2c10.44ZM1%2c17v6H23V17Zm16%2c3a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c17%2c20Zm5%2c0a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c22%2c20Z'/%3e %3c/svg%3e");
   display: block;
 }