@dso-toolkit/core 45.2.0 → 46.0.0

package/dist/collection/components/pagination/pagination.js

@@ -1,4 +1,4 @@
-import { h, Component, Element, Event, Fragment, Listen, Prop, State } from '@stencil/core';
+import { h, Fragment, } from "@stencil/core";
 export class Pagination {
   constructor() {
     this.sizePositionsMap = {
@@ -6,10 +6,10 @@ export class Pagination {
       medium: 9,
       large: 11,
     };
-    /**
-     * This function is called to format the href
-     */
-    this.formatHref = (page) => '#' + page;
+    this.availablePositions = undefined;
+    this.totalPages = undefined;
+    this.currentPage = undefined;
+    this.formatHref = (page) => "#" + page;
   }
   /**
    * Listens to the dsoSizeChange event on Responsive Element
@@ -24,10 +24,9 @@ export class Pagination {
       isModifiedEvent: e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey,
     });
   }
-  ;
   componentDidLoad() {
     var _a;
-    (_a = this.responsiveElement) === null || _a === void 0 ? void 0 : _a.getSize().then((size) => this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size]));
+    (_a = this.responsiveElement) === null || _a === void 0 ? void 0 : _a.getSize().then((size) => (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])));
   }
   render() {
     var _a, _b, _c;
@@ -35,41 +34,27 @@ export class Pagination {
       return null;
     }
     if (this.availablePositions === undefined) {
-      return (h("dso-responsive-element", { ref: element => this.responsiveElement = element }));
+      return h("dso-responsive-element", { ref: (element) => (this.responsiveElement = element) });
     }
     const availablePositions = this.availablePositions;
     const currentPage = (_a = this.currentPage) !== null && _a !== void 0 ? _a : 0;
     const pages = this.getPages(currentPage, this.availablePositions, this.totalPages);
-    return (h("dso-responsive-element", { ref: element => this.responsiveElement = element },
-      h("ul", { class: "pagination" },
-        h("li", { class: (currentPage <= 1 || currentPage > this.totalPages) ? 'dso-page-hidden' : undefined },
-          h("a", { href: this.formatHref((_b = pages[pages.indexOf(currentPage) - 1]) !== null && _b !== void 0 ? _b : 1), "aria-label": "Vorige", onClick: e => { var _a; return currentPage && this.clickHandler(e, (_a = pages[pages.indexOf(currentPage) - 1]) !== null && _a !== void 0 ? _a : 1); } },
-            h("dso-icon", { icon: "chevron-left" }))),
-        (pages).map(page => (h(Fragment, null,
-          this.showEllipsisBeforeLast(pages, page, availablePositions, pages[pages.length - 1]) &&
-            h("li", null,
-              h("span", null, "...")),
-          h("li", { key: page, class: currentPage === page ? 'active' : undefined }, currentPage === page
-            ? (h("span", { "aria-current": "page" }, page))
-            : (h("a", { href: this.formatHref(page), onClick: e => this.clickHandler(e, page) }, page))),
-          this.showEllipsisAfterFirst(pages, page, availablePositions) &&
-            h("li", null,
-              h("span", null, "..."))))),
-        h("li", { class: (currentPage < 1 || currentPage >= this.totalPages) ? 'dso-page-hidden' : undefined },
-          h("a", { href: this.formatHref((_c = pages[pages.indexOf(currentPage) + 1]) !== null && _c !== void 0 ? _c : this.totalPages), "aria-label": "Volgende", onClick: e => { var _a; return currentPage && this.clickHandler(e, (_a = pages[pages.indexOf(currentPage) + 1]) !== null && _a !== void 0 ? _a : this.totalPages); } },
-            h("dso-icon", { icon: "chevron-right" }))))));
+    return (h("dso-responsive-element", { ref: (element) => (this.responsiveElement = element) }, h("ul", { class: "pagination" }, h("li", { class: currentPage <= 1 || currentPage > this.totalPages ? "dso-page-hidden" : undefined }, h("a", { href: this.formatHref((_b = pages[pages.indexOf(currentPage) - 1]) !== null && _b !== void 0 ? _b : 1), "aria-label": "Vorige", onClick: (e) => { var _a; return currentPage && this.clickHandler(e, (_a = pages[pages.indexOf(currentPage) - 1]) !== null && _a !== void 0 ? _a : 1); } }, h("dso-icon", { icon: "chevron-left" }))), pages.map((page) => (h(Fragment, null, this.showEllipsisBeforeLast(pages, page, availablePositions, pages[pages.length - 1]) && (h("li", null, h("span", null, "..."))), h("li", { key: page, class: currentPage === page ? "active" : undefined }, currentPage === page ? (h("span", { "aria-current": "page" }, page)) : (h("a", { href: this.formatHref(page), onClick: (e) => this.clickHandler(e, page) }, page))), this.showEllipsisAfterFirst(pages, page, availablePositions) && (h("li", null, h("span", null, "...")))))), h("li", { class: currentPage < 1 || currentPage >= this.totalPages ? "dso-page-hidden" : undefined }, h("a", { href: this.formatHref((_c = pages[pages.indexOf(currentPage) + 1]) !== null && _c !== void 0 ? _c : this.totalPages), "aria-label": "Volgende", onClick: (e) => { var _a; return currentPage && this.clickHandler(e, (_a = pages[pages.indexOf(currentPage) + 1]) !== null && _a !== void 0 ? _a : this.totalPages); } }, h("dso-icon", { icon: "chevron-right" }))))));
   }
   getAvailablePositions(sizePositions) {
-    if (sizePositions % 2 === 0) { // Even aantal posities zorgt voor een scheve pagination
+    if (sizePositions % 2 === 0) {
+      // Even aantal posities zorgt voor een scheve pagination
       return sizePositions - 1;
     }
-    if (sizePositions <= 3) { // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.
+    if (sizePositions <= 3) {
+      // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.
       return 3;
     }
     return sizePositions;
   }
   getPages(currentPage, availablePositions, totalPages) {
-    if (totalPages + 2 <= availablePositions) { // + 2 voor de vorige en volgende knop
+    if (totalPages + 2 <= availablePositions) {
+      // + 2 voor de vorige en volgende knop
       return Array.from({ length: totalPages }, (_value, i) => i + 1);
     }
     if (availablePositions === 3) {
@@ -78,11 +63,7 @@ export class Pagination {
     if (availablePositions === 5) {
       return [1, currentPage, totalPages];
     }
-    return [
-      1,
-      ...this.getPageRange(currentPage, availablePositions, totalPages),
-      totalPages
-    ];
+    return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];
   }
   getPageRange(currentPage, availablePositions, totalPages) {
     const range = [];
@@ -119,107 +100,119 @@ export class Pagination {
     return range.filter((v, i, a) => a.indexOf(v) === i);
   }
   showEllipsisAfterFirst(pages, page, availablePositions) {
-    return pages.indexOf(page) === 0 &&
+    return (pages.indexOf(page) === 0 &&
       pages[pages.length - 1] > availablePositions - 2 &&
-      !pages.some(p => p === 2) &&
-      availablePositions >= 7;
+      !pages.some((p) => p === 2) &&
+      availablePositions >= 7);
   }
   showEllipsisBeforeLast(pages, page, availablePositions, totalPages) {
-    return pages.indexOf(page) === pages.length - 1 &&
+    return (pages.indexOf(page) === pages.length - 1 &&
       pages[pages.length - 1] > availablePositions - 2 &&
-      !pages.some(p => p === totalPages - 1) &&
-      availablePositions >= 7;
+      !pages.some((p) => p === totalPages - 1) &&
+      availablePositions >= 7);
   }
   static get is() { return "dso-pagination"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["pagination.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["pagination.css"]
-  }; }
-  static get properties() { return {
-    "totalPages": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Total pages"
-      },
-      "attribute": "total-pages",
-      "reflect": false
-    },
-    "currentPage": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Current page"
-      },
-      "attribute": "current-page",
-      "reflect": false
-    },
-    "formatHref": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "(page: number) => string",
-        "resolved": "(page: number) => string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "This function is called to format the href"
+  static get originalStyleUrls() {
+    return {
+      "$": ["pagination.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pagination.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "totalPages": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Total pages"
+        },
+        "attribute": "total-pages",
+        "reflect": false
       },
-      "defaultValue": "(page) => '#' + page"
-    }
-  }; }
-  static get states() { return {
-    "availablePositions": {}
-  }; }
-  static get events() { return [{
-      "method": "dsoSelectPage",
-      "name": "dsoSelectPage",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted on page select"
+      "currentPage": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Current page"
+        },
+        "attribute": "current-page",
+        "reflect": false
       },
-      "complexType": {
-        "original": "PaginationSelectPageEvent",
-        "resolved": "PaginationSelectPageEvent",
-        "references": {
-          "PaginationSelectPageEvent": {
-            "location": "import",
-            "path": "./pagination.interfaces"
+      "formatHref": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(page: number) => string",
+          "resolved": "(page: number) => string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This function is called to format the href"
+        },
+        "defaultValue": "(page) => \"#\" + page"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "availablePositions": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dsoSelectPage",
+        "name": "dsoSelectPage",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted on page select"
+        },
+        "complexType": {
+          "original": "PaginationSelectPageEvent",
+          "resolved": "PaginationSelectPageEvent",
+          "references": {
+            "PaginationSelectPageEvent": {
+              "location": "import",
+              "path": "./pagination.interfaces"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "host"; }
-  static get listeners() { return [{
-      "name": "dsoSizeChange",
-      "method": "sizeChangeHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "dsoSizeChange",
+        "method": "sizeChangeHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -1,79 +1,82 @@
-import { Component, h, Prop } from '@stencil/core';
+import { h } from "@stencil/core";
 export class ProgressBar {
   constructor() {
+    this.progress = undefined;
     this.min = 0;
     this.max = 100;
   }
   render() {
     const progressNumber = Math.round(this.progress);
     const progressPercentage = `${progressNumber}%`;
-    return (h("div", { class: "progress" },
-      h("span", { class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max },
-        h("span", { style: { width: `${progressPercentage}` } })),
-      h("span", { id: "progress-bar-label" },
-        h("slot", null))));
+    return (h("div", { class: "progress" }, h("span", { class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { style: { width: `${progressPercentage}` } })), h("span", { id: "progress-bar-label" }, h("slot", null))));
   }
   static get is() { return "dso-progress-bar"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["progress-bar.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["progress-bar.css"]
-  }; }
-  static get properties() { return {
-    "progress": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "progress",
-      "reflect": false
-    },
-    "min": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "min",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "max": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["progress-bar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["progress-bar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "progress": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "progress",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "attribute": "max",
-      "reflect": false,
-      "defaultValue": "100"
-    }
-  }; }
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max",
+        "reflect": false,
+        "defaultValue": "100"
+      }
+    };
+  }
 }

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

@@ -1,79 +1,85 @@
-import { Component, h, Host, Prop } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 export class Progressindicator {
+  constructor() {
+    this.label = undefined;
+    this.size = undefined;
+    this.block = undefined;
+  }
   render() {
     var _a;
-    const label = (_a = this.label) !== null && _a !== void 0 ? _a : 'Resultaten laden: een moment geduld alstublieft.';
-    return (h(Host, null,
-      h("span", { class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" },
-        h("svg", { class: "spinner", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
-          h("style", null, `
-                .spinner { animation: rotator 8s linear infinite; transform-origin: center; }
-                @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-                .path { stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }
-                @keyframes dash { 0% { stroke-dashoffset: 265; } 50% { stroke-dashoffset: 65; transform:rotate(90deg); } 100% { stroke-dashoffset: 265; transform:rotate(360deg); }
-              `),
-          h("circle", { class: "path", fill: "none", "stroke-width": "10", "stroke-linecap": "butt", cx: "50", cy: "50", r: "45" }))),
-      h("span", { id: "progress-indicator-label", class: "dso-progress-indicator-label" }, label)));
+    const label = (_a = this.label) !== null && _a !== void 0 ? _a : "Resultaten laden: een moment geduld alstublieft.";
+    return (h(Host, null, h("span", { class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("svg", { class: "spinner", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, h("style", null, `
+                .spinner { animation: rotator 8s linear infinite; transform-origin: center; }
+                @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+                .path { stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }
+                @keyframes dash { 0% { stroke-dashoffset: 265; } 50% { stroke-dashoffset: 65; transform:rotate(90deg); } 100% { stroke-dashoffset: 265; transform:rotate(360deg); }
+              `), h("circle", { class: "path", fill: "none", "stroke-width": "10", "stroke-linecap": "butt", cx: "50", cy: "50", r: "45" }))), h("span", { id: "progress-indicator-label", class: "dso-progress-indicator-label" }, label)));
   }
   static get is() { return "dso-progress-indicator"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["progress-indicator.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["progress-indicator.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
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'small' | 'medium' | 'large'",
-        "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "size",
-      "reflect": false
-    },
-    "block": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean | undefined",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["progress-indicator.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["progress-indicator.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
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"small\" | \"medium\" | \"large\"",
+          "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false
       },
-      "attribute": "block",
-      "reflect": false
-    }
-  }; }
+      "block": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "block",
+        "reflect": false
+      }
+    };
+  }
 }