@dso-toolkit/core 45.2.0 → 46.0.0

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

@@ -1,14 +1,9 @@
-import { h, Component, Fragment, Prop, State, Watch, Listen } from "@stencil/core";
-import { createFocusTrap } from 'focus-trap';
+import { h, Fragment } 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";
-    this.slideState = "close";
-    this.loadIframe = false;
     this.openClick = () => {
       this.visibility = "visible";
       this.slideState = "open";
@@ -28,26 +23,32 @@ export class HelpcenterPanel {
         this.visibility = "hidden";
       }, maxCssTransitionMilliseconds);
     };
+    this.label = "Hulp nodig";
+    this.url = undefined;
+    this.visibility = "hidden";
+    this.isOpen = "close";
+    this.slideState = "close";
+    this.loadIframe = false;
   }
   watchUrl(url) {
-    if (this.isOpen === 'open' && this.iframeUrl !== 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');
+    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');
+      body === null || body === void 0 ? void 0 : body.style.removeProperty("overflow");
     }
   }
   keyDownListener(event) {
-    if (event.key === 'Escape' && this.isOpen === 'open') {
+    if (event.key === "Escape" && this.isOpen === "open") {
       this.closeClick();
     }
   }
@@ -67,92 +68,95 @@ export class HelpcenterPanel {
   }
   componentDidRender() {
     var _a;
-    if (this.isOpen === 'open' && this.iframeLoaded && !this.trap) {
+    if (this.isOpen === "open" && this.iframeLoaded && !this.trap) {
       this.createTrap();
     }
-    else if (this.isOpen === 'close' && this.trap) {
+    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": 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", { id: "dso-panel-wrapper", class: `wrapper ${this.visibility}`, "aria-label": "helpcentrum", role: "dialog", 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.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")))));
+    return (h(Fragment, null, 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", { id: "dso-panel-wrapper", class: `wrapper ${this.visibility}`, "aria-label": "helpcentrum", role: "dialog", 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.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"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["helpcenter-panel.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["helpcenter-panel.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "\"Hulp nodig\""
-    },
-    "url": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["helpcenter-panel.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["helpcenter-panel.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"Hulp nodig\""
       },
-      "attribute": "url",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "visibility": {},
-    "isOpen": {},
-    "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
-    }]; }
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "url",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "visibility": {},
+      "isOpen": {},
+      "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.js

@@ -1,114 +1,125 @@
-import { Component, h, Prop, Element } from '@stencil/core';
-import clsx from 'clsx';
+import { h } from "@stencil/core";
+import clsx from "clsx";
 export class HighlightBox {
+  constructor() {
+    this.yellow = undefined;
+    this.border = undefined;
+    this.white = undefined;
+    this.dropShadow = undefined;
+    this.step = undefined;
+  }
   render() {
     var _a;
-    const hasCounter = this.step || !!this.element.querySelector('[slot=icon]');
-    const classes = clsx('dso-highlight-box', {
-      'dso-yellow': this.yellow,
-      'dso-border': this.border,
-      'dso-white': this.white,
-      'dso-drop-shadow': this.dropShadow,
-      'dso-has-counter': hasCounter
+    const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
+    const classes = clsx("dso-highlight-box", {
+      "dso-yellow": this.yellow,
+      "dso-border": this.border,
+      "dso-white": this.white,
+      "dso-drop-shadow": this.dropShadow,
+      "dso-has-counter": hasCounter,
     });
-    return (h("div", { class: classes },
-      hasCounter && (h("div", { class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : (h("slot", { name: "icon" })))),
-      h("slot", null)));
+    return (h("div", { class: classes }, hasCounter && h("div", { class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { name: "icon" })), h("slot", null)));
   }
   static get is() { return "dso-highlight-box"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["highlight-box.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["highlight-box.css"]
-  }; }
-  static get properties() { return {
-    "yellow": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "yellow",
-      "reflect": false
-    },
-    "border": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "border",
-      "reflect": false
-    },
-    "white": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "white",
-      "reflect": false
-    },
-    "dropShadow": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean | undefined",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["highlight-box.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["highlight-box.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "yellow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "yellow",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "border": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "border",
+        "reflect": false
       },
-      "attribute": "drop-shadow",
-      "reflect": false
-    },
-    "step": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number | undefined",
-        "references": {}
+      "white": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "white",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "dropShadow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "drop-shadow",
+        "reflect": false
       },
-      "attribute": "step",
-      "reflect": false
-    }
-  }; }
+      "step": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "step",
+        "reflect": false
+      }
+    };
+  }
   static get elementRef() { return "element"; }
 }