@dso-toolkit/core 45.2.0 → 46.0.0

package/dist/collection/components/accordion/components/accordion-section.js

@@ -1,7 +1,13 @@
-import { h, Component, Host, Element, State, Prop, Fragment, Method, forceUpdate } from '@stencil/core';
+import { h, Host, Fragment, forceUpdate, } from "@stencil/core";
 export class AccordionSection {
   constructor() {
-    this.heading = 'h2';
+    this.handleTitle = undefined;
+    this.heading = "h2";
+    this.handleUrl = undefined;
+    this.state = undefined;
+    this.attachmentCount = undefined;
+    this.icon = undefined;
+    this.status = undefined;
     this.open = false;
     this.hasNestedSection = false;
   }
@@ -9,14 +15,14 @@ export class AccordionSection {
     const accordion = this.host.parentElement;
     if (isAccordion(accordion)) {
       this.accordion = accordion;
-      accordion.getState().then(state => {
+      accordion.getState().then((state) => {
         this.accordionState = state;
         forceUpdate(this.host);
       });
     }
   }
   componentDidLoad() {
-    this.hasNestedSection = this.host.querySelector('dso-accordion') !== null;
+    this.hasNestedSection = this.host.querySelector("dso-accordion") !== null;
   }
   /** Toggle this section */
   async toggleSection() {
@@ -33,233 +39,227 @@ export class AccordionSection {
       return;
     }
     const { variant, reverseAlign } = this.accordionState;
-    const hasAddons = this.status || this.state || this.icon || this.attachmentCount;
+    const hasAddons = !!this.status || !!this.state || !!this.icon || !!this.attachmentCount;
     return (h(Host, { class: {
-        'dso-accordion-section': true,
-        ['dso-accordion-' + variant]: true,
-        'dso-nested-accordion': this.hasNestedSection,
-      } },
-      h(Handle, { heading: this.heading },
-        h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, reverseAlign
-          ? (h(Fragment, null,
-            hasAddons && (h("div", { class: "dso-section-handle-addons" },
-              h(HandleIcon, { icon: this.icon }))),
-            h("span", null, this.handleTitle),
-            h("dso-icon", { icon: this.open ? 'chevron-up' : 'chevron-down' })))
-          : (h(Fragment, null,
-            h("dso-icon", { icon: this.open ? 'chevron-up' : 'chevron-down' }),
-            this.state && h("span", { class: "sr-only" }, stateMap[this.state]),
-            h("span", null, this.handleTitle),
-            hasAddons && (h("div", { class: "dso-section-handle-addons" },
-              this.status && h("span", { class: "dso-status" }, this.status),
-              h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))),
-      h("div", { class: "dso-section-body", style: this.open ? {} : { display: 'none' } },
-        h("slot", null))));
+        "dso-accordion-section": true,
+        ["dso-accordion-" + variant]: true,
+        "dso-nested-accordion": this.hasNestedSection,
+      } }, h(Handle, { heading: this.heading }, h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, reverseAlign ? (h(Fragment, null, hasAddons && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("span", null, this.handleTitle), h("dso-icon", { icon: this.open ? "chevron-up" : "chevron-down" }))) : (h(Fragment, null, h("dso-icon", { icon: this.open ? "chevron-down" : "chevron-right" }), this.state && h("span", { class: "sr-only" }, stateMap[this.state]), h("span", null, this.handleTitle), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.status && h("span", { class: "dso-status" }, this.status), h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("div", { class: "dso-section-body", style: this.open ? {} : { display: "none" } }, h("slot", null))));
   }
   static get is() { return "dso-accordion-section"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["accordion-section.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["accordion-section.css"]
-  }; }
-  static get properties() { return {
-    "handleTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["accordion-section.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["accordion-section.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "handleTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "handle-title",
+        "reflect": false
       },
-      "attribute": "handle-title",
-      "reflect": false
-    },
-    "heading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "AccordionHeading",
-        "resolved": "\"h2\" | \"h3\" | \"h4\" | \"h5\"",
-        "references": {
-          "AccordionHeading": {
-            "location": "import",
-            "path": "../accordion.interfaces"
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "AccordionHeading",
+          "resolved": "\"h2\" | \"h3\" | \"h4\" | \"h5\"",
+          "references": {
+            "AccordionHeading": {
+              "location": "import",
+              "path": "../accordion.interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "heading",
-      "reflect": false,
-      "defaultValue": "'h2'"
-    },
-    "handleUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading",
+        "reflect": false,
+        "defaultValue": "\"h2\""
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "When set the handle will render as a `<a>`. When undefined it renders as a `<button>`"
+      "handleUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "When set the handle will render as a `<a>`. When undefined it renders as a `<button>`"
+        },
+        "attribute": "handle-url",
+        "reflect": false
       },
-      "attribute": "handle-url",
-      "reflect": false
-    },
-    "state": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "AccordionSectionState",
-        "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\" | undefined",
-        "references": {
-          "AccordionSectionState": {
-            "location": "import",
-            "path": "../accordion.interfaces"
+      "state": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "AccordionSectionState",
+          "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\" | undefined",
+          "references": {
+            "AccordionSectionState": {
+              "location": "import",
+              "path": "../accordion.interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "`state` takes precedence over `attachmentCount` and `icon`"
-      },
-      "attribute": "state",
-      "reflect": false
-    },
-    "attachmentCount": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "`attachmentCount` takes precedence over `icon`"
-      },
-      "attribute": "attachment-count",
-      "reflect": false
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "icon",
-      "reflect": false
-    },
-    "status": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "`state` takes precedence over `attachmentCount` and `icon`"
+        },
+        "attribute": "state",
+        "reflect": false
       },
-      "attribute": "status",
-      "reflect": false
-    },
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "attachmentCount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "`attachmentCount` takes precedence over `icon`"
+        },
+        "attribute": "attachment-count",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false
       },
-      "attribute": "open",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "hasNestedSection": {}
-  }; }
-  static get methods() { return {
-    "toggleSection": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "status": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         },
-        "return": "Promise<void>"
+        "attribute": "status",
+        "reflect": false
       },
-      "docs": {
-        "text": "Toggle this section",
-        "tags": []
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
       }
-    }
-  }; }
+    };
+  }
+  static get states() {
+    return {
+      "hasNestedSection": {}
+    };
+  }
+  static get methods() {
+    return {
+      "toggleSection": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Toggle this section",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "host"; }
 }
 function isAccordion(element) {
-  return element instanceof HTMLElement && 'getState' in element;
+  return element instanceof HTMLElement && "getState" in element;
 }
 const Handle = ({ heading }, children) => {
   switch (heading) {
     default:
-    case 'h2':
+    case "h2":
       return h("h2", { class: "dso-section-handle" }, children);
-    case 'h3':
+    case "h3":
       return h("h3", { class: "dso-section-handle" }, children);
-    case 'h4':
+    case "h4":
       return h("h4", { class: "dso-section-handle" }, children);
-    case 'h5':
+    case "h5":
       return h("h5", { class: "dso-section-handle" }, children);
   }
 };
 const HandleElement = ({ handleUrl, onClick, open }, children) => {
   if (handleUrl) {
-    return (h("a", { href: handleUrl, onClick: onClick, "aria-expanded": open ? 'true' : 'false' }, children));
+    return (h("a", { href: handleUrl, onClick: onClick, "aria-expanded": open ? "true" : "false" }, children));
   }
-  return (h("button", { type: "button", onClick: onClick, "aria-expanded": open ? 'true' : 'false' }, children));
+  return (h("button", { type: "button", onClick: onClick, "aria-expanded": open ? "true" : "false" }, children));
 };
-const HandleIcon = ({ state, icon, attachmentCount }) => {
+const HandleIcon = ({ state, icon, attachmentCount, }) => {
   if (state) {
     return h(HandleStateIcon, { state: state });
   }
@@ -271,22 +271,22 @@ const HandleIcon = ({ state, icon, attachmentCount }) => {
   }
 };
 const stateMap = {
-  success: 'succes:',
-  info: 'info:',
-  warning: 'waarschuwing:',
-  danger: 'fout:'
+  success: "succes:",
+  info: "info:",
+  warning: "waarschuwing:",
+  danger: "fout:",
 };
 const HandleStateIcon = ({ state }) => {
-  if (state === 'danger') {
-    return (h("dso-icon", { icon: "status-danger" }));
+  if (state === "danger") {
+    return h("dso-icon", { icon: "status-danger" });
   }
-  if (state === 'success') {
-    return (h("dso-icon", { icon: "status-success" }));
+  if (state === "success") {
+    return h("dso-icon", { icon: "status-success" });
   }
-  if (state === 'info') {
-    return (h("dso-icon", { icon: "status-info" }));
+  if (state === "info") {
+    return h("dso-icon", { icon: "status-info" });
   }
-  if (state === 'warning') {
-    return (h("dso-icon", { icon: "status-warning" }));
+  if (state === "warning") {
+    return h("dso-icon", { icon: "status-warning" });
   }
 };

package/dist/collection/components/alert/alert.js

@@ -1,66 +1,71 @@
-import { Component, h, Prop } from '@stencil/core';
-import clsx from 'clsx';
+import { h } from "@stencil/core";
+import clsx from "clsx";
 export class Alert {
+  constructor() {
+    this.status = undefined;
+    this.roleAlert = undefined;
+  }
   render() {
     const status = Alert.statusMap.get(this.status);
     if (!status) {
       throw new Error(`Invalid status ${this.status}`);
     }
-    return (h("div", { class: clsx('alert', `alert-${this.status}`), role: this.roleAlert ? 'alert' : undefined },
-      h("dso-icon", { icon: 'status-' + this.status }),
-      h("span", { class: "sr-only" },
-        status,
-        ":"),
-      h("slot", null)));
+    return (h("div", { class: clsx("alert", `alert-${this.status}`), role: this.roleAlert ? "alert" : undefined }, h("dso-icon", { icon: "status-" + this.status }), h("span", { class: "sr-only" }, status, ":"), h("slot", null)));
   }
   static get is() { return "dso-alert"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["alert.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["alert.css"]
-  }; }
-  static get properties() { return {
-    "status": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'success' | 'info' | 'warning' | 'danger'",
-        "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set status of alert"
-      },
-      "attribute": "status",
-      "reflect": false
-    },
-    "roleAlert": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute."
+  static get originalStyleUrls() {
+    return {
+      "$": ["alert.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["alert.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "status": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"success\" | \"info\" | \"warning\" | \"danger\"",
+          "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set status of alert"
+        },
+        "attribute": "status",
+        "reflect": false
       },
-      "attribute": "role-alert",
-      "reflect": false
-    }
-  }; }
+      "roleAlert": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute."
+        },
+        "attribute": "role-alert",
+        "reflect": false
+      }
+    };
+  }
 }
 Alert.statusMap = new Map([
-  ['success', 'Gelukt'],
-  ['info', 'Opmerking'],
-  ['warning', 'Waarschuwing'],
-  ['danger', 'Fout']
+  ["success", "Gelukt"],
+  ["info", "Opmerking"],
+  ["warning", "Waarschuwing"],
+  ["danger", "Fout"],
 ]);