@dso-toolkit/core 67.3.1 → 68.0.0

package/dist/collection/components/map-controls/map-controls.js

@@ -22,12 +22,14 @@ import { translations } from "./map-controls.i18n";
 const transitionDuration = 300;
 export class MapControls {
     constructor() {
+        /**
+         * To show and hide the Map Controls.
+         */
+        this.open = false;
+        this.hideContent = !this.open;
         this.text = i18n(() => this.host, translations);
         _MapControls_closeButtonElement.set(this, void 0);
         _MapControls_toggleButtonElement.set(this, void 0);
-        this.open = false;
-        this.disableZoom = undefined;
-        this.hideContent = !this.open;
     }
     watchOpen(open) {
         if (open) {
@@ -56,7 +58,7 @@ export class MapControls {
         });
     }
     render() {
-        return (h(Fragment, null, h("button", { key: '29335393712a1781f9dff4ba7b3e02a69919b91f', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'a1a70b77c019e0874cf2e973e3f0ea66cc9a2c14', icon: "layers" }), h("span", { key: '5194ddccaf7dfe2ab781fe7231eac9c0a9041e6b' }, this.text("layersButton"))), h("div", { key: '1cfb45e5f21c97cb02095a40c049c4e326fff674', class: "zoom-buttons" }, h("button", { key: 'c0cc9b3b3daa68d740ffed946f5afbb22b1d74e0', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'd6303dd24115cea4d24fc045d369ff97e0873413' }, this.text("zoomIn")), h("dso-icon", { key: '653e2a1d4a806c91e740c59cd73fd230facb582e', icon: "plus" })), h("button", { key: '0c4ca76537cf0a456fbc376d2b989f9bae62bb19', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: 'a79e3f32a8f72d14cafb062e713bd65d95998c28' }, this.text("zoomOut")), h("dso-icon", { key: '782888d0e2c39ffeccf953cd50e945b35e221e3f', icon: "minus" }))), h("section", { key: 'd981313fdc4ab36ab28a874fbb19a95549b64cb8', hidden: this.hideContent }, h("header", { key: '79533f6432d77975c9b303dc3e6fcf787963c985' }, h("h2", { key: '40514da2dbdd1c80ff91608747390c635f82d9b0' }, this.text("title")), h("button", { key: 'dc94d69f20a5ec73f7b952361ab6849bb57d53f6', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '6e280bc6fa50c89ecf48c24fb43f2f4834558140' }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: 'f5dfc01ef1468620ef9b3c2b464f9b1a5093eef6', icon: "times" }))), h("dso-scrollable", { key: '589b88feaadd4a620f8c97443d20dc6a2698627f' }, h("div", { key: '8017cc835034f60d81e9384cf5ee004843e933e4', class: "content" }, h("slot", { key: '25338f564df6e616ad5f66deea19bfe472ac1cb1' }))))));
+        return (h(Fragment, null, h("button", { key: 'e437cc9487051507ca3eb919aa97f0a4ab39475b', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'd5821df785e62d1409e4fc88eba137250b7a2386', icon: "layers" }), h("span", { key: '96bcffa0c6c978155f2679c908409540180ca83e' }, this.text("layersButton"))), h("div", { key: '0b72c5e148abb8a33f7ad2a04d411a35d7a80501', class: "zoom-buttons" }, h("button", { key: 'a5d342fd781905fcaa82f8b0c1aff8d226335e00', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '7a185d40e20a36490aa9fe7576875d07a05935c6' }, this.text("zoomIn")), h("dso-icon", { key: 'a19dd361cc779e2ba986303dd6a00f0307a65364', icon: "plus" })), h("button", { key: '045e648c8cd05195ca9fffd916fe8d4b6371e70c', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '9ed34442104b5f9bcd66027ce5997df96bb48ec1' }, this.text("zoomOut")), h("dso-icon", { key: '71501aaaf3e47ab79bf8e9e85178a17dd1ac744d', icon: "minus" }))), h("section", { key: 'c832b1de0ee23f32ab668c5ac068b0c1d115d74c', hidden: this.hideContent }, h("header", { key: '258cd2a6b969191e6a8e81d3490457cac852a59d' }, h("h2", { key: '25e7359b457f5496650a7d0ac0a99eb6dab24331' }, this.text("title")), h("button", { key: 'f7834b66d780ee2521693c5e47eae06d83ee1803', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'b1724abe463205df408cfd899d6325e3e64ccab5' }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '66065df2ca031efb57fca03952e9c04e062cc4be', icon: "times" }))), h("dso-scrollable", { key: '19f6a224463b30376bff99b083ce25b44b59df28' }, h("div", { key: '84f926f37038e17164a84f939e9f142184738443', class: "content" }, h("slot", { key: 'efd1449530ad4f2707129a7f1b01875856bcf427' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }
@@ -86,6 +88,8 @@ export class MapControls {
                     "tags": [],
                     "text": "To show and hide the Map Controls."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
@@ -104,6 +108,8 @@ export class MapControls {
                     "tags": [],
                     "text": "To disable the zoom controls:\r\n\r\n* `in`: Disable zoom in button.\r\n* `out`: Disable zoom out button.\r\n* `both`: Disable zoom in and zoom out."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disable-zoom",
                 "reflect": false
             }

package/dist/collection/components/map-controls/map-controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"map-controls.js","sourceRoot":"","sources":["../../../../src/components/map-controls/map-controls.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Fragment, h, Method, Prop, State, Watch } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\nimport { translations } from \"./map-controls.i18n\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n  tag: \"dso-map-controls\",\r\n  styleUrl: \"./map-controls.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapControls {\r\n  @Element()\r\n  host!: HTMLDsoMapControlsElement;\r\n\r\n  /**\r\n   * To show and hide the Map Controls.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * To disable the zoom controls:\r\n   *\r\n   * * `in`: Disable zoom in button.\r\n   * * `out`: Disable zoom out button.\r\n   * * `both`: Disable zoom in and zoom out.\r\n   */\r\n  @Prop()\r\n  disableZoom?: \"in\" | \"out\" | \"both\";\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom in button.\r\n   */\r\n  @Event()\r\n  dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom out button.\r\n   */\r\n  @Event()\r\n  dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * emits when the panel opens or closes.\r\n   *\r\n   * - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n   * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n  @State()\r\n  hideContent = !this.open;\r\n\r\n  @Watch(\"open\")\r\n  watchOpen(open: boolean) {\r\n    if (open) {\r\n      this.hideContent = false;\r\n\r\n      setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n    } else {\r\n      setTimeout(() => {\r\n        this.hideContent = true;\r\n\r\n        this.#toggleButtonElement?.focus();\r\n      }, transitionDuration);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted when the visibility is toggled.\r\n   *\r\n   * Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n   * @param e\r\n   */\r\n  @Method()\r\n  async toggleVisibility(e: MouseEvent | KeyboardEvent) {\r\n    this.open = !this.open;\r\n\r\n    this.dsoToggle.emit({\r\n      originalEvent: e,\r\n      open: this.open,\r\n    });\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  #closeButtonElement: HTMLButtonElement | undefined;\r\n  #toggleButtonElement: HTMLButtonElement | undefined;\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          type=\"button\"\r\n          id=\"toggle-visibility-button\"\r\n          class=\"toggle-visibility-button\"\r\n          onClick={(e) => this.toggleVisibility(e)}\r\n          ref={(element) => (this.#toggleButtonElement = element)}\r\n        >\r\n          <dso-icon icon=\"layers\"></dso-icon>\r\n          <span>{this.text(\"layersButton\")}</span>\r\n        </button>\r\n        <div class=\"zoom-buttons\">\r\n          <button\r\n            type=\"button\"\r\n            onClick={(e) => this.dsoZoomIn.emit(e)}\r\n            disabled={this.disableZoom === \"in\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span>{this.text(\"zoomIn\")}</span>\r\n            <dso-icon icon=\"plus\"></dso-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            onClick={(e) => this.dsoZoomOut.emit(e)}\r\n            disabled={this.disableZoom === \"out\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span>{this.text(\"zoomOut\")}</span>\r\n            <dso-icon icon=\"minus\"></dso-icon>\r\n          </button>\r\n        </div>\r\n        <section hidden={this.hideContent}>\r\n          <header>\r\n            <h2>{this.text(\"title\")}</h2>\r\n            <button\r\n              type=\"button\"\r\n              class=\"close-button\"\r\n              onClick={(e) => this.toggleVisibility(e)}\r\n              ref={(element) => (this.#closeButtonElement = element)}\r\n            >\r\n              <span>{this.text(\"hidePanel\", { title: this.text(\"title\") })}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          </header>\r\n          <dso-scrollable>\r\n            <div class=\"content\">\r\n              <slot></slot>\r\n            </div>\r\n          </dso-scrollable>\r\n        </section>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"map-controls.js","sourceRoot":"","sources":["../../../../src/components/map-controls/map-controls.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Fragment, h, Method, Prop, State, Watch } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\nimport { translations } from \"./map-controls.i18n\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n  tag: \"dso-map-controls\",\r\n  styleUrl: \"./map-controls.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapControls {\r\n  @Element()\r\n  host!: HTMLDsoMapControlsElement;\r\n\r\n  /**\r\n   * To show and hide the Map Controls.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * To disable the zoom controls:\r\n   *\r\n   * * `in`: Disable zoom in button.\r\n   * * `out`: Disable zoom out button.\r\n   * * `both`: Disable zoom in and zoom out.\r\n   */\r\n  @Prop()\r\n  disableZoom?: \"in\" | \"out\" | \"both\";\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom in button.\r\n   */\r\n  @Event()\r\n  dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom out button.\r\n   */\r\n  @Event()\r\n  dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * emits when the panel opens or closes.\r\n   *\r\n   * - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n   * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n  @State()\r\n  hideContent = !this.open;\r\n\r\n  @Watch(\"open\")\r\n  watchOpen(open: boolean) {\r\n    if (open) {\r\n      this.hideContent = false;\r\n\r\n      setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n    } else {\r\n      setTimeout(() => {\r\n        this.hideContent = true;\r\n\r\n        this.#toggleButtonElement?.focus();\r\n      }, transitionDuration);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted when the visibility is toggled.\r\n   *\r\n   * Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n   * @param e\r\n   */\r\n  @Method()\r\n  async toggleVisibility(e: MouseEvent | KeyboardEvent) {\r\n    this.open = !this.open;\r\n\r\n    this.dsoToggle.emit({\r\n      originalEvent: e,\r\n      open: this.open,\r\n    });\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  #closeButtonElement: HTMLButtonElement | undefined;\r\n  #toggleButtonElement: HTMLButtonElement | undefined;\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          type=\"button\"\r\n          id=\"toggle-visibility-button\"\r\n          class=\"toggle-visibility-button\"\r\n          onClick={(e) => this.toggleVisibility(e)}\r\n          ref={(element) => (this.#toggleButtonElement = element)}\r\n        >\r\n          <dso-icon icon=\"layers\"></dso-icon>\r\n          <span>{this.text(\"layersButton\")}</span>\r\n        </button>\r\n        <div class=\"zoom-buttons\">\r\n          <button\r\n            type=\"button\"\r\n            onClick={(e) => this.dsoZoomIn.emit(e)}\r\n            disabled={this.disableZoom === \"in\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span>{this.text(\"zoomIn\")}</span>\r\n            <dso-icon icon=\"plus\"></dso-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            onClick={(e) => this.dsoZoomOut.emit(e)}\r\n            disabled={this.disableZoom === \"out\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span>{this.text(\"zoomOut\")}</span>\r\n            <dso-icon icon=\"minus\"></dso-icon>\r\n          </button>\r\n        </div>\r\n        <section hidden={this.hideContent}>\r\n          <header>\r\n            <h2>{this.text(\"title\")}</h2>\r\n            <button\r\n              type=\"button\"\r\n              class=\"close-button\"\r\n              onClick={(e) => this.toggleVisibility(e)}\r\n              ref={(element) => (this.#closeButtonElement = element)}\r\n            >\r\n              <span>{this.text(\"hidePanel\", { title: this.text(\"title\") })}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          </header>\r\n          <dso-scrollable>\r\n            <div class=\"content\">\r\n              <slot></slot>\r\n            </div>\r\n          </dso-scrollable>\r\n        </section>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/map-overlays/map-overlays.js

@@ -5,9 +5,11 @@ import { translations } from "./map-overlays.i18n";
 export class MapOverlays {
     constructor() {
         this.selectableRefs = {};
-        this.text = i18n(() => this.host, translations);
+        /**
+         * To group the overlays together. Generally the default value suffices.
+         */
         this.group = uuidv4();
-        this.overlays = undefined;
+        this.text = i18n(() => this.host, translations);
     }
     overlayChangeHandler(overlay, e) {
         const { checked } = e.detail;
@@ -26,7 +28,7 @@ export class MapOverlays {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '9892fc514d3605c8532105d7ab3dc7a20841838b', class: "form-group dso-checkboxes" }, h("legend", { key: '8fd65bf3a7592e1f89b3133ddcdaa0650e8df2bd', class: "sr-only" }, "Kaartlagen"), h("div", { key: '4d42c4b39c33e5c5b2e510a0cccec6703e36ee28', class: "dso-label-container" }, h("span", { key: 'eccf54c31ae3def04c5af3d43b2d094581b7b311', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'f1a0fa892a2e0b7301c57098930fe87218c209bc', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: 'c3b999bcfd600744f885128418dcb69aa9a18133', class: "form-group dso-checkboxes" }, h("legend", { key: 'bf13c49ba66ed5a8f0c8ca8ce3b2f4e41de64032', class: "sr-only" }, "Kaartlagen"), h("div", { key: '639e81cdc4f91ee53da11c8aede39fd5c85fc6e7', class: "dso-label-container" }, h("span", { key: '94172cf1232312e5d39e09f99390119f189109ce', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'bb520e45e6a9c58c5bf7013fdbcf5ed39a635d45', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     static get is() { return "dso-map-overlays"; }
     static get encapsulation() { return "shadow"; }
@@ -56,6 +58,8 @@ export class MapOverlays {
                     "tags": [],
                     "text": "To group the overlays together. Generally the default value suffices."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "group",
                 "reflect": false,
                 "defaultValue": "uuidv4()"
@@ -79,7 +83,9 @@ export class MapOverlays {
                 "docs": {
                     "tags": [],
                     "text": "The overlays."
-                }
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }

package/dist/collection/components/map-overlays/map-overlays.js.map

@@ -1 +1 @@
-{"version":3,"file":"map-overlays.js","sourceRoot":"","sources":["../../../../src/components/map-overlays/map-overlays.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIxC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAOnD,MAAM,OAAO,WAAW;;QAEd,mBAAc,GAA+C,EAAE,CAAC;QA6BhE,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;qBApB3C,MAAM,EAAE;;;IAcR,oBAAoB,CAAC,OAAgB,EAAE,CAAqC;QAClF,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAE7B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;IACnD,CAAC;IAID,kBAAkB;QAChB,IAAI,CAAC,QAAQ;aACV,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,eAAC,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;aAClG,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;;YACb,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;QAEL,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,CACL,iEAAU,KAAK,EAAC,2BAA2B;YACzC,+DAAQ,KAAK,EAAC,SAAS,iBAAoB;YAC3C,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,6DAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,IAC3C,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CACd,CACH;YACN,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAC9B,sBACE,GAAG,EAAE,OAAO,CAAC,EAAE,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,OAAO,CAAC,IAAI,EACnB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC5D,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC,CAAC;gBAExD,OAAO,CAAC,IAAI;gBACZ,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,SAAG,IAAI,EAAC,MAAM,IAAE,OAAO,CAAC,IAAI,CAAK,CAAC,CAAC,CAAC,IAAI,CACzC,CAClB,CAAC,CACE,CACG,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, h, Prop } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\nimport { translations } from \"./map-overlays.i18n\";\r\n\r\n@Component({\r\n  tag: \"dso-map-overlays\",\r\n  styleUrl: \"./map-overlays.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n  private previousOverlays: Overlay[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  @Element()\r\n  host!: HTMLDsoMapOverlaysElement;\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The overlays.\r\n   */\r\n  @Prop()\r\n  overlays!: Overlay[];\r\n\r\n  /**\r\n   * Emitted when the user selects a different overlay.\r\n   */\r\n  @Event()\r\n  dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n  private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n    const { checked } = e.detail;\r\n\r\n    this.dsoToggleOverlay.emit({ overlay, checked });\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidRender() {\r\n    this.overlays\r\n      .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousOverlays = this.overlays;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-checkboxes\">\r\n        <legend class=\"sr-only\">Kaartlagen</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            {this.text(\"title\")}\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.overlays.map((overlay) => (\r\n            <dso-selectable\r\n              key={overlay.id}\r\n              type=\"checkbox\"\r\n              value={overlay.name}\r\n              checked={overlay.checked}\r\n              disabled={overlay.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n              onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n            >\r\n              {overlay.name}\r\n              {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"map-overlays.js","sourceRoot":"","sources":["../../../../src/components/map-overlays/map-overlays.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, h, Prop } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\nimport { translations } from \"./map-overlays.i18n\";\r\n\r\n@Component({\r\n  tag: \"dso-map-overlays\",\r\n  styleUrl: \"./map-overlays.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n  private previousOverlays: Overlay[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  @Element()\r\n  host!: HTMLDsoMapOverlaysElement;\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The overlays.\r\n   */\r\n  @Prop()\r\n  overlays!: Overlay[];\r\n\r\n  /**\r\n   * Emitted when the user selects a different overlay.\r\n   */\r\n  @Event()\r\n  dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n  private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n    const { checked } = e.detail;\r\n\r\n    this.dsoToggleOverlay.emit({ overlay, checked });\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidRender() {\r\n    this.overlays\r\n      .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousOverlays = this.overlays;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-checkboxes\">\r\n        <legend class=\"sr-only\">Kaartlagen</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            {this.text(\"title\")}\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.overlays.map((overlay) => (\r\n            <dso-selectable\r\n              key={overlay.id}\r\n              type=\"checkbox\"\r\n              value={overlay.name}\r\n              checked={overlay.checked}\r\n              disabled={overlay.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n              onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n            >\r\n              {overlay.name}\r\n              {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -1,6 +1,10 @@
 import { h } from "@stencil/core";
 export class MarkBar {
     constructor() {
+        /**
+         * The label for the input field.
+         */
+        this.label = "Zoeken in document";
         this.handleInput = (e) => {
             if (!(e.target instanceof HTMLInputElement)) {
                 return;
@@ -24,10 +28,6 @@ export class MarkBar {
                 this.handleNext(e);
             }
         };
-        this.value = undefined;
-        this.label = "Zoeken in document";
-        this.current = undefined;
-        this.totalCount = undefined;
     }
     /**
      * Focuses the input field.
@@ -42,7 +42,7 @@ export class MarkBar {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '713f33bf86bbfa9366b0ace08d92aaaa239cbe3e', class: "dso-mark-bar" }, h("div", { key: '40c44a84e9845c59aa42e503b6c738a78773ea1e', class: "dso-mark-bar-input" }, h("input", { key: 'c893af76fd1f36f890092d7fceec08ac280ca962', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'c4517f993ea111bcca6fe5d4fe63f7d2a6e74c10', htmlFor: "search-input" }, h("dso-icon", { key: '74718e9f76210e1ab8a7dc8f419d0290117dc4ca', class: "dso-search-icon", icon: "search" }), h("span", { key: '53198aa36fb29f5783804a07f57850ffb03857f7', class: "label-text" }, this.label)), h("button", { key: 'be8ba44782a2eeee3da99c172855798c16ea4c11', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '38c296e3ecde58915ff7f972c38a97b41fb5b0c2', icon: "times" }), h("span", { key: '71d5cf07fa7a65c4a62c9f1548c512ed69a469ff', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: 'ff49db6cb388f862954e65923c985497dcaf4e66', class: "dso-button-container" }, h("span", { key: '1e837b330edf5140544e1b1632e746b19b18d465', class: "divider" }), h("button", { key: '3c3f6648f6ba2968286b4f905cbbebe3829c7ce3', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '61741ca86c6ce3979ca5364426dd27a56631a7ea', icon: "chevron-up", class: "hydrated" }), h("span", { key: '01b609f22699251cbf36e39d34c643b3b9285131', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: '8e6366c709fe6b6dc091190d379270d11739e204' }, current, "/", totalCount), h("button", { key: '6ab4b758bd001ee342618c83e4e733cbea243063', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: 'bdfa2853ecbc90021a4f1b3e857d700c80cce4b8', icon: "chevron-down", class: "hydrated" }), h("span", { key: 'ab319210d11d0f0b2a858205e9343d4cc3847e77', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (h("div", { key: 'de64c956f5f0f039e949fb66525bfe13292fc344', class: "dso-mark-bar" }, h("div", { key: 'f9a28ebe0673d21b51382db70b399198980f2981', class: "dso-mark-bar-input" }, h("input", { key: '3f8ba3bcc85a1e3d457f00b4997ff14257275cff', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'de0a188de0580a986d97c6b183506ff503a9f840', htmlFor: "search-input" }, h("dso-icon", { key: 'c996d6ae25fd237cbe6e3432dd9820911699800b', class: "dso-search-icon", icon: "search" }), h("span", { key: '4eb8bf932a5493d4672efb1d30f5f936faa04dc0', class: "label-text" }, this.label)), h("button", { key: '4eb0be7a9c8794fe086f9cccbd5f2c3ee2422f4c', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '7995d127da202d54b403c1614616e754d3996069', icon: "times" }), h("span", { key: '8584ac86467c4ed39f07cb62498a4818302de7e8', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: 'd0a10d3218bf2c84592b793f63cbbf37c0204325', class: "dso-button-container" }, h("span", { key: 'd75c77cb216e84dd20df7b8745263aea7b33a6aa', class: "divider" }), h("button", { key: '503a2cad201543a574f5c298b981bb7610955134', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: 'c2ce69b1abc65f71355fdd5681f7165d0c2680cf', icon: "chevron-up", class: "hydrated" }), h("span", { key: '573b5f49881d3d87d14650fca99efcc034714989', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: 'caa4799ae003ce7a34430f5112ffce9b6ef22903' }, current, "/", totalCount), h("button", { key: '83cd9bc034d51cdf677a6a97a4bd170530cbf5b8', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '9b7442aa4e879ae3dfa22265fbba5c115eed6aa0', icon: "chevron-down", class: "hydrated" }), h("span", { key: '1f41bec8eb4619ee7a6a2fabd205ab0cadfb446c', class: "sr-only" }, "Volgend zoekresultaat")))));
     }
     static get is() { return "dso-mark-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -72,6 +72,8 @@ export class MarkBar {
                     "tags": [],
                     "text": "The current search value."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             },
@@ -89,6 +91,8 @@ export class MarkBar {
                     "tags": [],
                     "text": "The label for the input field."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"Zoeken in document\""
@@ -107,6 +111,8 @@ export class MarkBar {
                     "tags": [],
                     "text": "The current (one-based) highlighted search item."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "current",
                 "reflect": false
             },
@@ -124,6 +130,8 @@ export class MarkBar {
                     "tags": [],
                     "text": "Total number of search results."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "total-count",
                 "reflect": false
             }

package/dist/collection/components/mark-bar/mark-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"mark-bar.js","sourceRoot":"","sources":["../../../../src/components/mark-bar/mark-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, Prop, Event, EventEmitter, Method } from \"@stencil/core\";\r\nimport {\r\n  MarkBarInputEvent,\r\n  MarkBarClearEvent,\r\n  MarkBarPaginationEvent,\r\n  MarkBarFocusOptions,\r\n} from \"./mark-bar.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-mark-bar\",\r\n  styleUrl: \"./mark-bar.scss\",\r\n  shadow: true,\r\n})\r\nexport class MarkBar implements ComponentInterface {\r\n  /**\r\n   * The current search value.\r\n   */\r\n  @Prop()\r\n  value?: string;\r\n\r\n  /**\r\n   * The label for the input field.\r\n   */\r\n  @Prop()\r\n  label = \"Zoeken in document\";\r\n\r\n  /**\r\n   * The current (one-based) highlighted search item.\r\n   */\r\n  @Prop()\r\n  current?: number;\r\n\r\n  /**\r\n   * Total number of search results.\r\n   */\r\n  @Prop()\r\n  totalCount?: number;\r\n\r\n  /**\r\n   * Focuses the input field.\r\n   */\r\n  @Method()\r\n  async dsoFocus(options: MarkBarFocusOptions = {}) {\r\n    this.inputElement?.focus();\r\n\r\n    if (options.select) {\r\n      this.inputElement?.select();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted each time the user types in the search field.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoInput!: EventEmitter<MarkBarInputEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"next search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoNext!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"previous search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoPrevious!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"clear search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClear!: EventEmitter<MarkBarClearEvent>;\r\n\r\n  private inputElement?: HTMLInputElement;\r\n\r\n  private handleInput = (e: Event) => {\r\n    if (!(e.target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    this.dsoInput.emit({\r\n      originalEvent: e,\r\n      value: e.target.value,\r\n    });\r\n  };\r\n\r\n  private handleNext = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoNext.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handlePrevious = (e: MouseEvent) => {\r\n    this.dsoPrevious.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handleClear = (e: MouseEvent) => {\r\n    this.dsoClear.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent) => {\r\n    if (e.key === \"Enter\") {\r\n      this.handleNext(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    const current = this.current || 0;\r\n    const totalCount = this.totalCount || 0;\r\n\r\n    return (\r\n      <div class=\"dso-mark-bar\">\r\n        <div class=\"dso-mark-bar-input\">\r\n          <input\r\n            type=\"text\"\r\n            id=\"search-input\"\r\n            value={this.value}\r\n            onInput={this.handleInput}\r\n            onKeyDown={this.handleKeyDown}\r\n            placeholder=\" \"\r\n            ref={(element) => (this.inputElement = element)}\r\n          />\r\n          <label htmlFor=\"search-input\">\r\n            <dso-icon class=\"dso-search-icon\" icon=\"search\"></dso-icon>\r\n            <span class=\"label-text\">{this.label}</span>\r\n          </label>\r\n          <button type=\"button\" onClick={this.handleClear}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Zoekopdracht legen</span>\r\n          </button>\r\n        </div>\r\n        <div class=\"dso-button-container\">\r\n          <span class=\"divider\" />\r\n          <button type=\"button\" onClick={this.handlePrevious} disabled={current <= 1}>\r\n            <dso-icon icon=\"chevron-up\" class=\"hydrated\"></dso-icon>\r\n            <span class=\"sr-only\">Vorig zoekresultaat</span>\r\n          </button>\r\n          <span>\r\n            {current}/{totalCount}\r\n          </span>\r\n          <button type=\"button\" onClick={this.handleNext} disabled={current >= totalCount}>\r\n            <dso-icon icon=\"chevron-down\" class=\"hydrated\"></dso-icon>\r\n            <span class=\"sr-only\">Volgend zoekresultaat</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"mark-bar.js","sourceRoot":"","sources":["../../../../src/components/mark-bar/mark-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, Prop, Event, EventEmitter, Method } from \"@stencil/core\";\r\nimport {\r\n  MarkBarInputEvent,\r\n  MarkBarClearEvent,\r\n  MarkBarPaginationEvent,\r\n  MarkBarFocusOptions,\r\n} from \"./mark-bar.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-mark-bar\",\r\n  styleUrl: \"./mark-bar.scss\",\r\n  shadow: true,\r\n})\r\nexport class MarkBar implements ComponentInterface {\r\n  /**\r\n   * The current search value.\r\n   */\r\n  @Prop()\r\n  value?: string;\r\n\r\n  /**\r\n   * The label for the input field.\r\n   */\r\n  @Prop()\r\n  label = \"Zoeken in document\";\r\n\r\n  /**\r\n   * The current (one-based) highlighted search item.\r\n   */\r\n  @Prop()\r\n  current?: number;\r\n\r\n  /**\r\n   * Total number of search results.\r\n   */\r\n  @Prop()\r\n  totalCount?: number;\r\n\r\n  /**\r\n   * Focuses the input field.\r\n   */\r\n  @Method()\r\n  async dsoFocus(options: MarkBarFocusOptions = {}) {\r\n    this.inputElement?.focus();\r\n\r\n    if (options.select) {\r\n      this.inputElement?.select();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted each time the user types in the search field.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoInput!: EventEmitter<MarkBarInputEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"next search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoNext!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"previous search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoPrevious!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"clear search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClear!: EventEmitter<MarkBarClearEvent>;\r\n\r\n  private inputElement?: HTMLInputElement;\r\n\r\n  private handleInput = (e: Event) => {\r\n    if (!(e.target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    this.dsoInput.emit({\r\n      originalEvent: e,\r\n      value: e.target.value,\r\n    });\r\n  };\r\n\r\n  private handleNext = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoNext.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handlePrevious = (e: MouseEvent) => {\r\n    this.dsoPrevious.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handleClear = (e: MouseEvent) => {\r\n    this.dsoClear.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent) => {\r\n    if (e.key === \"Enter\") {\r\n      this.handleNext(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    const current = this.current || 0;\r\n    const totalCount = this.totalCount || 0;\r\n\r\n    return (\r\n      <div class=\"dso-mark-bar\">\r\n        <div class=\"dso-mark-bar-input\">\r\n          <input\r\n            type=\"text\"\r\n            id=\"search-input\"\r\n            value={this.value}\r\n            onInput={this.handleInput}\r\n            onKeyDown={this.handleKeyDown}\r\n            placeholder=\" \"\r\n            ref={(element) => (this.inputElement = element)}\r\n          />\r\n          <label htmlFor=\"search-input\">\r\n            <dso-icon class=\"dso-search-icon\" icon=\"search\"></dso-icon>\r\n            <span class=\"label-text\">{this.label}</span>\r\n          </label>\r\n          <button type=\"button\" onClick={this.handleClear}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Zoekopdracht legen</span>\r\n          </button>\r\n        </div>\r\n        <div class=\"dso-button-container\">\r\n          <span class=\"divider\" />\r\n          <button type=\"button\" onClick={this.handlePrevious} disabled={current <= 1}>\r\n            <dso-icon icon=\"chevron-up\" class=\"hydrated\"></dso-icon>\r\n            <span class=\"sr-only\">Vorig zoekresultaat</span>\r\n          </button>\r\n          <span>\r\n            {current}/{totalCount}\r\n          </span>\r\n          <button type=\"button\" onClick={this.handleNext} disabled={current >= totalCount}>\r\n            <dso-icon icon=\"chevron-down\" class=\"hydrated\"></dso-icon>\r\n            <span class=\"sr-only\">Volgend zoekresultaat</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/modal/modal.js

@@ -5,13 +5,26 @@ import { i18n } from "../../utils/i18n";
 import { translations } from "./modal.i18n";
 export class Modal {
     constructor() {
-        this.text = i18n(() => this.host, translations);
         this.ariaId = v4();
-        this.fullscreen = undefined;
-        this.modalTitle = undefined;
+        /**
+         * the role for the modal `dialog` | `alert` | `alertdialog`.
+         */
         this.dialogRole = "dialog";
+        /**
+         * The element to return focus to after the modal is closed.
+         *
+         * * `undefined` will return focus to the previously focused element (default).
+         * * `false` will not return focus to any element.
+         * * or, provide your own `HTMLElement` that will receive focus upon closing.
+         */
         this.returnFocus = undefined;
+        /**
+         * when `false` the close button in the header will not be rendered. Defaults to `true`.
+         *
+         * Needs `modalTitle` to be set.
+         */
         this.showCloseButton = true;
+        this.text = i18n(() => this.host, translations);
     }
     get hasFooter() {
         return this.host.querySelector("[slot='footer']") !== null;
@@ -36,10 +49,10 @@ export class Modal {
     }
     render() {
         var _a;
-        return (h("dialog", { key: '0255e7eddb5998c8cab38704900f2476569da1de', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
+        return (h("dialog", { key: 'e9f3f64908aa9846a53ae75805fa210c4870b9d8', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
                 e.preventDefault();
                 this.dsoClose.emit({ originalEvent: e });
-            } }, h("div", { key: '4c64ce20e353566db32301b776188a1c264124ba', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: 'a4bd988f90c7b5770e4a4cf5fde4ae67a2a66cac' }, h("div", { key: '4ec222b1b944910e406ee18e19ca83be55d29e10', class: "dso-body", tabIndex: 0 }, h("slot", { key: '72288b5c808498115f94afaf1531de16786fc1d9', name: "body" }))), this.hasFooter && (h("div", { key: 'c21a38f8cfd9db4f107d06324a2ed2c065eedcc7', class: "dso-footer" }, h("slot", { key: 'ef9d617e2ecade2278beefdd4f72a29cab456a98', name: "footer" }))))));
+            } }, h("div", { key: '6537a33e78b15dfc32bac8a2699d2bf54e2abe1d', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '9a62c534ae961cd684568170c1309beaff90c20f' }, h("div", { key: 'd9f5eef59453d70504cecbdde59e3556a864c677', class: "dso-body", tabIndex: 0 }, h("slot", { key: '42efeae8512eb09d66fb1e4457b515730aece8a0', name: "body" }))), this.hasFooter && (h("div", { key: '967c39dbe11cceec7b8922ad2759f353a3219d84', class: "dso-footer" }, h("slot", { key: '1dd8152a3b944a18965d85e0216d8f0924d887db', name: "footer" }))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -69,6 +82,8 @@ export class Modal {
                     "tags": [],
                     "text": "when set the modal will be shown in fullscreen."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "fullscreen",
                 "reflect": true
             },
@@ -86,6 +101,8 @@ export class Modal {
                     "tags": [],
                     "text": "The title of the Modal."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "modal-title",
                 "reflect": false
             },
@@ -103,6 +120,8 @@ export class Modal {
                     "tags": [],
                     "text": "the role for the modal `dialog` | `alert` | `alertdialog`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "dialog-role",
                 "reflect": false,
                 "defaultValue": "\"dialog\""
@@ -126,6 +145,8 @@ export class Modal {
                     "tags": [],
                     "text": "The element to return focus to after the modal is closed.\r\n\r\n* `undefined` will return focus to the previously focused element (default).\r\n* `false` will not return focus to any element.\r\n* or, provide your own `HTMLElement` that will receive focus upon closing."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "return-focus",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -144,6 +165,8 @@ export class Modal {
                     "tags": [],
                     "text": "when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n\r\nNeeds `modalTitle` to be set."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "show-close-button",
                 "reflect": false,
                 "defaultValue": "true"

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

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, h, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\nimport { translations } from \"./modal.i18n\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private htmlDialogElement?: HTMLDialogElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  /**\r\n   * when set the modal will be shown in fullscreen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fullscreen?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  dialogRole: string | null = \"dialog\";\r\n\r\n  /**\r\n   * The element to return focus to after the modal is closed.\r\n   *\r\n   * * `undefined` will return focus to the previously focused element (default).\r\n   * * `false` will not return focus to any element.\r\n   * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n   */\r\n  @Prop()\r\n  returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n   *\r\n   * Needs `modalTitle` to be set.\r\n   */\r\n  @Prop()\r\n  showCloseButton = true;\r\n\r\n  private returnFocusElement: HTMLElement | undefined;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the Modal.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n  get hasFooter() {\r\n    return this.host.querySelector(\"[slot='footer']\") !== null;\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidLoad(): void {\r\n    if (this.htmlDialogElement?.isConnected) {\r\n      const activeElement = getActiveElement();\r\n      if (activeElement instanceof HTMLElement) {\r\n        this.returnFocusElement = activeElement;\r\n      }\r\n\r\n      this.htmlDialogElement.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.htmlDialogElement?.close();\r\n\r\n    if (this.returnFocus === false) {\r\n      return;\r\n    }\r\n\r\n    (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <dialog\r\n        class=\"dso-modal\"\r\n        role={this.dialogRole ?? undefined}\r\n        aria-modal=\"true\"\r\n        aria-labelledby={this.ariaId}\r\n        ref={(element) => (this.htmlDialogElement = element)}\r\n        onCancel={(e) => {\r\n          e.preventDefault();\r\n\r\n          this.dsoClose.emit({ originalEvent: e });\r\n        }}\r\n      >\r\n        <div class=\"dso-dialog\" role=\"document\">\r\n          {this.modalTitle ? (\r\n            <div class=\"dso-header\">\r\n              <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n              {this.showCloseButton && (\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\">{this.text(\"close\")}</span>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : (\r\n            <span class=\"sr-only\" id={this.ariaId}>\r\n              {this.text(\"dialog\")}\r\n            </span>\r\n          )}\r\n\r\n          <dso-scrollable>\r\n            <div class=\"dso-body\" tabIndex={0}>\r\n              <slot name=\"body\" />\r\n            </div>\r\n          </dso-scrollable>\r\n\r\n          {this.hasFooter && (\r\n            <div class=\"dso-footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </dialog>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, h, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\nimport { translations } from \"./modal.i18n\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private htmlDialogElement?: HTMLDialogElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  /**\r\n   * when set the modal will be shown in fullscreen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fullscreen?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  dialogRole: string | null = \"dialog\";\r\n\r\n  /**\r\n   * The element to return focus to after the modal is closed.\r\n   *\r\n   * * `undefined` will return focus to the previously focused element (default).\r\n   * * `false` will not return focus to any element.\r\n   * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n   */\r\n  @Prop()\r\n  returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n   *\r\n   * Needs `modalTitle` to be set.\r\n   */\r\n  @Prop()\r\n  showCloseButton = true;\r\n\r\n  private returnFocusElement: HTMLElement | undefined;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the Modal.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n  get hasFooter() {\r\n    return this.host.querySelector(\"[slot='footer']\") !== null;\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidLoad(): void {\r\n    if (this.htmlDialogElement?.isConnected) {\r\n      const activeElement = getActiveElement();\r\n      if (activeElement instanceof HTMLElement) {\r\n        this.returnFocusElement = activeElement;\r\n      }\r\n\r\n      this.htmlDialogElement.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.htmlDialogElement?.close();\r\n\r\n    if (this.returnFocus === false) {\r\n      return;\r\n    }\r\n\r\n    (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <dialog\r\n        class=\"dso-modal\"\r\n        role={this.dialogRole ?? undefined}\r\n        aria-modal=\"true\"\r\n        aria-labelledby={this.ariaId}\r\n        ref={(element) => (this.htmlDialogElement = element)}\r\n        onCancel={(e) => {\r\n          e.preventDefault();\r\n\r\n          this.dsoClose.emit({ originalEvent: e });\r\n        }}\r\n      >\r\n        <div class=\"dso-dialog\" role=\"document\">\r\n          {this.modalTitle ? (\r\n            <div class=\"dso-header\">\r\n              <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n              {this.showCloseButton && (\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\">{this.text(\"close\")}</span>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : (\r\n            <span class=\"sr-only\" id={this.ariaId}>\r\n              {this.text(\"dialog\")}\r\n            </span>\r\n          )}\r\n\r\n          <dso-scrollable>\r\n            <div class=\"dso-body\" tabIndex={0}>\r\n              <slot name=\"body\" />\r\n            </div>\r\n          </dso-scrollable>\r\n\r\n          {this.hasFooter && (\r\n            <div class=\"dso-footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </dialog>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/ozon-content/ozon-content.js

@@ -3,13 +3,14 @@ import { Mapper } from "./ozon-content-mapper";
 const mapper = new Mapper();
 export class OzonContent {
     constructor() {
+        /**
+         * Setting this property creates dso-ozon-content as inline element instead of a block element.
+         */
+        this.inline = false;
+        this.state = {};
         this.handleMarkItemHighlight = (text, elementRef) => {
             this.dsoOzonContentMarkItemHighlight.emit({ text, elementRef });
         };
-        this.content = undefined;
-        this.inline = false;
-        this.mark = undefined;
-        this.state = {};
     }
     contentWatcher() {
         this.state = {};
@@ -24,7 +25,7 @@ export class OzonContent {
             emitAnchorClick: this.dsoAnchorClick.emit,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: '04d4b101ea397405cce6dc6626fcf76a2e9eb5c0' }, transformed);
+        return h(Fragment, { key: 'b92775a87afc27cff81462dc3778a5cbf41f4ee5' }, transformed);
     }
     static get is() { return "dso-ozon-content"; }
     static get encapsulation() { return "shadow"; }
@@ -60,6 +61,8 @@ export class OzonContent {
                     "tags": [],
                     "text": "The XML to be rendered."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "content",
                 "reflect": false
             },
@@ -77,6 +80,8 @@ export class OzonContent {
                     "tags": [],
                     "text": "Setting this property creates dso-ozon-content as inline element instead of a block element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "inline",
                 "reflect": true,
                 "defaultValue": "false"
@@ -100,7 +105,9 @@ export class OzonContent {
                 "docs": {
                     "tags": [],
                     "text": "To mark text."
-                }
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }

package/dist/collection/components/ozon-content/ozon-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"ozon-content.js","sourceRoot":"","sources":["../../../../src/components/ozon-content/ozon-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,CAAC,EACD,SAAS,EAET,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,QAAQ,EAER,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAU/C,MAAM,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;AAO5B,MAAM,OAAO,WAAW;;QAuCd,4BAAuB,GAAG,CAAC,IAAY,EAAE,UAAuB,EAAE,EAAE;YAC1E,IAAI,CAAC,+BAA+B,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAClE,CAAC,CAAC;;sBA9BO,KAAK;;qBA0BgB,EAAE;;IALhC,cAAc;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAClB,CAAC;IASD,MAAM;QACJ,MAAM,OAAO,GAAuB;YAClC,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACzC,qBAAqB,EAAE,IAAI,CAAC,uBAAuB;YACnD,eAAe,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI;SAC1C,CAAC;QAEF,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAE5D,OAAO,EAAC,QAAQ,uDAAE,WAAW,CAAY,CAAC;IAC5C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,YAAY,EAAE,CAAC;IAEf,OAAO,CACL;QACE,mBAAY;QACZ,4BAAqB;QACrB,sBAAe;QACf,oBAAa,CACZ,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Event,\r\n  EventEmitter,\r\n  Prop,\r\n  State,\r\n  Fragment,\r\n  JSX,\r\n  Watch,\r\n} from \"@stencil/core\";\r\n\r\nimport { Mapper } from \"./ozon-content-mapper\";\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport {\r\n  OzonContentAnchorClickEvent,\r\n  OzonContentInputType,\r\n  OzonContentMarkFunction,\r\n  OzonContentMarkItemHighlightEvent,\r\n} from \"./ozon-content.interfaces\";\r\nimport { OzonContentNodeState } from \"./ozon-content-node-state.interface\";\r\n\r\nconst mapper = new Mapper();\r\n\r\n@Component({\r\n  tag: \"dso-ozon-content\",\r\n  styleUrl: \"ozon-content.scss\",\r\n  shadow: true,\r\n})\r\nexport class OzonContent implements ComponentInterface {\r\n  /**\r\n   * The XML to be rendered.\r\n   */\r\n  @Prop()\r\n  content?: OzonContentInputType;\r\n\r\n  /**\r\n   * Setting this property creates dso-ozon-content as inline element instead of a block element.\r\n   */\r\n  @Prop({ reflect: true })\r\n  inline = false;\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: OzonContentMarkFunction;\r\n\r\n  /**\r\n   * Emitted when `<a>` is clicked.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnchorClick!: EventEmitter<OzonContentAnchorClickEvent>;\r\n\r\n  /**\r\n   * Emitted when a marked item is highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOzonContentMarkItemHighlight!: EventEmitter<OzonContentMarkItemHighlightEvent>;\r\n\r\n  @Watch(\"content\")\r\n  contentWatcher() {\r\n    this.state = {};\r\n  }\r\n\r\n  @State()\r\n  state: OzonContentNodeState = {};\r\n\r\n  private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n    this.dsoOzonContentMarkItemHighlight.emit({ text, elementRef });\r\n  };\r\n\r\n  render(): JSX.Element {\r\n    const context: OzonContentContext = {\r\n      state: this.state,\r\n      inline: this.inline,\r\n      mark: this.mark,\r\n      setState: (state) => (this.state = state),\r\n      emitMarkItemHighlight: this.handleMarkItemHighlight,\r\n      emitAnchorClick: this.dsoAnchorClick.emit,\r\n    };\r\n\r\n    const transformed = mapper.transform(this.content, context);\r\n\r\n    return <Fragment>{transformed}</Fragment>;\r\n  }\r\n}\r\n\r\nconst dependencies = () => {\r\n  dependencies();\r\n\r\n  return (\r\n    <>\r\n      <dso-icon />\r\n      <dso-image-overlay />\r\n      <dso-tooltip />\r\n      <dso-table />\r\n    </>\r\n  );\r\n};\r\n"]}
+{"version":3,"file":"ozon-content.js","sourceRoot":"","sources":["../../../../src/components/ozon-content/ozon-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,CAAC,EACD,SAAS,EAET,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,QAAQ,EAER,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAU/C,MAAM,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;AAO5B,MAAM,OAAO,WAAW;IALxB;QAYE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;QA0Bf,UAAK,GAAyB,EAAE,CAAC;QAEzB,4BAAuB,GAAG,CAAC,IAAY,EAAE,UAAuB,EAAE,EAAE;YAC1E,IAAI,CAAC,+BAA+B,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAClE,CAAC,CAAC;KAgBH;IAzBC,cAAc;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAClB,CAAC;IASD,MAAM;QACJ,MAAM,OAAO,GAAuB;YAClC,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACzC,qBAAqB,EAAE,IAAI,CAAC,uBAAuB;YACnD,eAAe,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI;SAC1C,CAAC;QAEF,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAE5D,OAAO,EAAC,QAAQ,uDAAE,WAAW,CAAY,CAAC;IAC5C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,YAAY,EAAE,CAAC;IAEf,OAAO,CACL;QACE,mBAAY;QACZ,4BAAqB;QACrB,sBAAe;QACf,oBAAa,CACZ,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Event,\r\n  EventEmitter,\r\n  Prop,\r\n  State,\r\n  Fragment,\r\n  JSX,\r\n  Watch,\r\n} from \"@stencil/core\";\r\n\r\nimport { Mapper } from \"./ozon-content-mapper\";\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport {\r\n  OzonContentAnchorClickEvent,\r\n  OzonContentInputType,\r\n  OzonContentMarkFunction,\r\n  OzonContentMarkItemHighlightEvent,\r\n} from \"./ozon-content.interfaces\";\r\nimport { OzonContentNodeState } from \"./ozon-content-node-state.interface\";\r\n\r\nconst mapper = new Mapper();\r\n\r\n@Component({\r\n  tag: \"dso-ozon-content\",\r\n  styleUrl: \"ozon-content.scss\",\r\n  shadow: true,\r\n})\r\nexport class OzonContent implements ComponentInterface {\r\n  /**\r\n   * The XML to be rendered.\r\n   */\r\n  @Prop()\r\n  content?: OzonContentInputType;\r\n\r\n  /**\r\n   * Setting this property creates dso-ozon-content as inline element instead of a block element.\r\n   */\r\n  @Prop({ reflect: true })\r\n  inline = false;\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: OzonContentMarkFunction;\r\n\r\n  /**\r\n   * Emitted when `<a>` is clicked.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnchorClick!: EventEmitter<OzonContentAnchorClickEvent>;\r\n\r\n  /**\r\n   * Emitted when a marked item is highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOzonContentMarkItemHighlight!: EventEmitter<OzonContentMarkItemHighlightEvent>;\r\n\r\n  @Watch(\"content\")\r\n  contentWatcher() {\r\n    this.state = {};\r\n  }\r\n\r\n  @State()\r\n  state: OzonContentNodeState = {};\r\n\r\n  private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n    this.dsoOzonContentMarkItemHighlight.emit({ text, elementRef });\r\n  };\r\n\r\n  render(): JSX.Element {\r\n    const context: OzonContentContext = {\r\n      state: this.state,\r\n      inline: this.inline,\r\n      mark: this.mark,\r\n      setState: (state) => (this.state = state),\r\n      emitMarkItemHighlight: this.handleMarkItemHighlight,\r\n      emitAnchorClick: this.dsoAnchorClick.emit,\r\n    };\r\n\r\n    const transformed = mapper.transform(this.content, context);\r\n\r\n    return <Fragment>{transformed}</Fragment>;\r\n  }\r\n}\r\n\r\nconst dependencies = () => {\r\n  dependencies();\r\n\r\n  return (\r\n    <>\r\n      <dso-icon />\r\n      <dso-image-overlay />\r\n      <dso-tooltip />\r\n      <dso-table />\r\n    </>\r\n  );\r\n};\r\n"]}

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

@@ -7,9 +7,9 @@ export class Pagination {
             medium: 9,
             large: 11,
         };
-        this.availablePositions = undefined;
-        this.totalPages = undefined;
-        this.currentPage = undefined;
+        /**
+         * This function is called to format the href
+         */
         this.formatHref = (page) => "#" + page;
     }
     /**
@@ -153,6 +153,8 @@ export class Pagination {
                     "tags": [],
                     "text": "Total pages"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "total-pages",
                 "reflect": false
             },
@@ -170,6 +172,8 @@ export class Pagination {
                     "tags": [],
                     "text": "Current page"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "current-page",
                 "reflect": false
             },
@@ -187,6 +191,8 @@ export class Pagination {
                     "tags": [],
                     "text": "This function is called to format the href"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "(page) => \"#\" + page"
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\r\nimport { PaginationSelectPageEvent } from \"./pagination.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-pagination\",\r\n  styleUrl: \"pagination.scss\",\r\n  shadow: true,\r\n})\r\nexport class Pagination implements ComponentInterface {\r\n  private sizePositionsMap: Record<ResponsiveElementSize, number> = {\r\n    small: 7,\r\n    medium: 9,\r\n    large: 11,\r\n  };\r\n\r\n  private responsiveElement?: HTMLDsoResponsiveElementElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoPaginationElement;\r\n\r\n  @State()\r\n  availablePositions?: number;\r\n  /**\r\n   * Total pages\r\n   */\r\n  @Prop()\r\n  totalPages?: number;\r\n\r\n  /**\r\n   * Current page\r\n   */\r\n  @Prop()\r\n  currentPage?: number;\r\n\r\n  /**\r\n   * This function is called to format the href\r\n   */\r\n  @Prop()\r\n  formatHref: (page: number) => string = (page) => \"#\" + page;\r\n\r\n  /**\r\n   * Emitted on page select\r\n   */\r\n  @Event()\r\n  dsoSelectPage!: EventEmitter<PaginationSelectPageEvent>;\r\n\r\n  /**\r\n   * Listens to the dsoSizeChange event on Responsive Element\r\n   */\r\n  @Listen(\"dsoSizeChange\")\r\n  sizeChangeHandler(event: CustomEvent<ResponsiveElementSize>) {\r\n    this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);\r\n  }\r\n\r\n  private clickHandler(e: MouseEvent, page: number) {\r\n    this.dsoSelectPage.emit({\r\n      originalEvent: e,\r\n      page,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.responsiveElement\r\n      ?.getSize()\r\n      .then(\r\n        (size: ResponsiveElementSize) =>\r\n          (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])),\r\n      );\r\n  }\r\n\r\n  render() {\r\n    if (!this.totalPages) {\r\n      return null;\r\n    }\r\n\r\n    if (this.availablePositions === undefined) {\r\n      return <dso-responsive-element ref={(element) => (this.responsiveElement = element)}></dso-responsive-element>;\r\n    }\r\n\r\n    const availablePositions = this.availablePositions;\r\n\r\n    const currentPage = this.currentPage ?? 0;\r\n\r\n    const pages: number[] = this.getPages(currentPage, this.availablePositions, this.totalPages);\r\n\r\n    return (\r\n      <dso-responsive-element ref={(element) => (this.responsiveElement = element)}>\r\n        <nav class=\"pagination\" aria-label=\"Paginering\">\r\n          <ul>\r\n            <li class={currentPage <= 1 || currentPage > this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n              <a\r\n                href={this.formatHref(pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n                aria-label=\"Vorige\"\r\n                onClick={(e) => currentPage && this.clickHandler(e, pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n              >\r\n                <dso-icon icon=\"chevron-left\"></dso-icon>\r\n              </a>\r\n            </li>\r\n            {pages.map((page) => (\r\n              <>\r\n                {this.showEllipsisBeforeLast(pages, page, availablePositions) && (\r\n                  <li>\r\n                    <span>...</span>\r\n                  </li>\r\n                )}\r\n\r\n                <li key={page} class={currentPage === page ? \"active\" : undefined}>\r\n                  {currentPage === page ? (\r\n                    <span aria-current=\"page\">{page}</span>\r\n                  ) : (\r\n                    <a href={this.formatHref(page)} onClick={(e) => this.clickHandler(e, page)}>\r\n                      {page}\r\n                    </a>\r\n                  )}\r\n                  {page === this.totalPages ? <span class=\"sr-only\"> (laatste pagina)</span> : null}\r\n                </li>\r\n\r\n                {this.showEllipsisAfterFirst(pages, page, availablePositions) && (\r\n                  <li>\r\n                    <span>...</span>\r\n                  </li>\r\n                )}\r\n              </>\r\n            ))}\r\n            <li class={currentPage < 1 || currentPage >= this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n              <a\r\n                href={this.formatHref(pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)}\r\n                aria-label=\"Volgende\"\r\n                onClick={(e) =>\r\n                  currentPage &&\r\n                  this.totalPages &&\r\n                  this.clickHandler(e, pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)\r\n                }\r\n              >\r\n                <dso-icon icon=\"chevron-right\"></dso-icon>\r\n              </a>\r\n            </li>\r\n          </ul>\r\n        </nav>\r\n      </dso-responsive-element>\r\n    );\r\n  }\r\n\r\n  private getAvailablePositions(sizePositions: number) {\r\n    if (sizePositions % 2 === 0) {\r\n      // Even aantal posities zorgt voor een scheve pagination\r\n      return sizePositions - 1;\r\n    }\r\n    if (sizePositions <= 3) {\r\n      // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.\r\n      return 3;\r\n    }\r\n\r\n    return sizePositions;\r\n  }\r\n\r\n  private getPages(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n    if (totalPages + 2 <= availablePositions) {\r\n      // + 2 voor de vorige en volgende knop\r\n      return Array.from({ length: totalPages }, (_value, i) => i + 1);\r\n    }\r\n\r\n    if (availablePositions === 3) {\r\n      return [currentPage];\r\n    }\r\n\r\n    if (availablePositions === 5) {\r\n      return [1, currentPage, totalPages];\r\n    }\r\n\r\n    return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];\r\n  }\r\n\r\n  private getPageRange(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n    const range: number[] = [];\r\n\r\n    const positionRange = Math.floor(availablePositions / 2);\r\n\r\n    if (currentPage <= positionRange) {\r\n      for (let i = 2; i <= availablePositions - 4; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {\r\n      if (positionRange === 1) {\r\n        if (currentPage > totalPages - 2) {\r\n          range.push(totalPages - 2);\r\n        }\r\n\r\n        range.push(currentPage);\r\n\r\n        if (currentPage < 3) {\r\n          range.push(3);\r\n        }\r\n      }\r\n\r\n      if (positionRange > 1) {\r\n        const pagesBeforeOrAfter = positionRange - 3;\r\n\r\n        for (\r\n          let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange);\r\n          i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange);\r\n          i++\r\n        ) {\r\n          if (i > 2 && i < totalPages - 1) {\r\n            range.push(i);\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    if (currentPage > totalPages - positionRange) {\r\n      for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    return range.filter((v, i, a) => a.indexOf(v) === i);\r\n  }\r\n\r\n  private showEllipsisAfterFirst(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === 0 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === 2) &&\r\n      availablePositions >= 7\r\n    );\r\n  }\r\n\r\n  private showEllipsisBeforeLast(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === pages.length - 1 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === totalPages - 1) &&\r\n      availablePositions >= 7\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\r\nimport { PaginationSelectPageEvent } from \"./pagination.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-pagination\",\r\n  styleUrl: \"pagination.scss\",\r\n  shadow: true,\r\n})\r\nexport class Pagination implements ComponentInterface {\r\n  private sizePositionsMap: Record<ResponsiveElementSize, number> = {\r\n    small: 7,\r\n    medium: 9,\r\n    large: 11,\r\n  };\r\n\r\n  private responsiveElement?: HTMLDsoResponsiveElementElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoPaginationElement;\r\n\r\n  @State()\r\n  availablePositions?: number;\r\n  /**\r\n   * Total pages\r\n   */\r\n  @Prop()\r\n  totalPages?: number;\r\n\r\n  /**\r\n   * Current page\r\n   */\r\n  @Prop()\r\n  currentPage?: number;\r\n\r\n  /**\r\n   * This function is called to format the href\r\n   */\r\n  @Prop()\r\n  formatHref: (page: number) => string = (page) => \"#\" + page;\r\n\r\n  /**\r\n   * Emitted on page select\r\n   */\r\n  @Event()\r\n  dsoSelectPage!: EventEmitter<PaginationSelectPageEvent>;\r\n\r\n  /**\r\n   * Listens to the dsoSizeChange event on Responsive Element\r\n   */\r\n  @Listen(\"dsoSizeChange\")\r\n  sizeChangeHandler(event: CustomEvent<ResponsiveElementSize>) {\r\n    this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);\r\n  }\r\n\r\n  private clickHandler(e: MouseEvent, page: number) {\r\n    this.dsoSelectPage.emit({\r\n      originalEvent: e,\r\n      page,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.responsiveElement\r\n      ?.getSize()\r\n      .then(\r\n        (size: ResponsiveElementSize) =>\r\n          (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])),\r\n      );\r\n  }\r\n\r\n  render() {\r\n    if (!this.totalPages) {\r\n      return null;\r\n    }\r\n\r\n    if (this.availablePositions === undefined) {\r\n      return <dso-responsive-element ref={(element) => (this.responsiveElement = element)}></dso-responsive-element>;\r\n    }\r\n\r\n    const availablePositions = this.availablePositions;\r\n\r\n    const currentPage = this.currentPage ?? 0;\r\n\r\n    const pages: number[] = this.getPages(currentPage, this.availablePositions, this.totalPages);\r\n\r\n    return (\r\n      <dso-responsive-element ref={(element) => (this.responsiveElement = element)}>\r\n        <nav class=\"pagination\" aria-label=\"Paginering\">\r\n          <ul>\r\n            <li class={currentPage <= 1 || currentPage > this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n              <a\r\n                href={this.formatHref(pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n                aria-label=\"Vorige\"\r\n                onClick={(e) => currentPage && this.clickHandler(e, pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n              >\r\n                <dso-icon icon=\"chevron-left\"></dso-icon>\r\n              </a>\r\n            </li>\r\n            {pages.map((page) => (\r\n              <>\r\n                {this.showEllipsisBeforeLast(pages, page, availablePositions) && (\r\n                  <li>\r\n                    <span>...</span>\r\n                  </li>\r\n                )}\r\n\r\n                <li key={page} class={currentPage === page ? \"active\" : undefined}>\r\n                  {currentPage === page ? (\r\n                    <span aria-current=\"page\">{page}</span>\r\n                  ) : (\r\n                    <a href={this.formatHref(page)} onClick={(e) => this.clickHandler(e, page)}>\r\n                      {page}\r\n                    </a>\r\n                  )}\r\n                  {page === this.totalPages ? <span class=\"sr-only\"> (laatste pagina)</span> : null}\r\n                </li>\r\n\r\n                {this.showEllipsisAfterFirst(pages, page, availablePositions) && (\r\n                  <li>\r\n                    <span>...</span>\r\n                  </li>\r\n                )}\r\n              </>\r\n            ))}\r\n            <li class={currentPage < 1 || currentPage >= this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n              <a\r\n                href={this.formatHref(pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)}\r\n                aria-label=\"Volgende\"\r\n                onClick={(e) =>\r\n                  currentPage &&\r\n                  this.totalPages &&\r\n                  this.clickHandler(e, pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)\r\n                }\r\n              >\r\n                <dso-icon icon=\"chevron-right\"></dso-icon>\r\n              </a>\r\n            </li>\r\n          </ul>\r\n        </nav>\r\n      </dso-responsive-element>\r\n    );\r\n  }\r\n\r\n  private getAvailablePositions(sizePositions: number) {\r\n    if (sizePositions % 2 === 0) {\r\n      // Even aantal posities zorgt voor een scheve pagination\r\n      return sizePositions - 1;\r\n    }\r\n    if (sizePositions <= 3) {\r\n      // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.\r\n      return 3;\r\n    }\r\n\r\n    return sizePositions;\r\n  }\r\n\r\n  private getPages(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n    if (totalPages + 2 <= availablePositions) {\r\n      // + 2 voor de vorige en volgende knop\r\n      return Array.from({ length: totalPages }, (_value, i) => i + 1);\r\n    }\r\n\r\n    if (availablePositions === 3) {\r\n      return [currentPage];\r\n    }\r\n\r\n    if (availablePositions === 5) {\r\n      return [1, currentPage, totalPages];\r\n    }\r\n\r\n    return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];\r\n  }\r\n\r\n  private getPageRange(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n    const range: number[] = [];\r\n\r\n    const positionRange = Math.floor(availablePositions / 2);\r\n\r\n    if (currentPage <= positionRange) {\r\n      for (let i = 2; i <= availablePositions - 4; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {\r\n      if (positionRange === 1) {\r\n        if (currentPage > totalPages - 2) {\r\n          range.push(totalPages - 2);\r\n        }\r\n\r\n        range.push(currentPage);\r\n\r\n        if (currentPage < 3) {\r\n          range.push(3);\r\n        }\r\n      }\r\n\r\n      if (positionRange > 1) {\r\n        const pagesBeforeOrAfter = positionRange - 3;\r\n\r\n        for (\r\n          let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange);\r\n          i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange);\r\n          i++\r\n        ) {\r\n          if (i > 2 && i < totalPages - 1) {\r\n            range.push(i);\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    if (currentPage > totalPages - positionRange) {\r\n      for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    return range.filter((v, i, a) => a.indexOf(v) === i);\r\n  }\r\n\r\n  private showEllipsisAfterFirst(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === 0 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === 2) &&\r\n      availablePositions >= 7\r\n    );\r\n  }\r\n\r\n  private showEllipsisBeforeLast(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === pages.length - 1 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === totalPages - 1) &&\r\n      availablePositions >= 7\r\n    );\r\n  }\r\n}\r\n"]}