@dso-toolkit/core 62.18.0 → 62.20.0

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

@@ -1,249 +1,250 @@
 import { h } from "@stencil/core";
 export class MarkBar {
-  constructor() {
-    this.handleInput = (e) => {
-      if (!(e.target instanceof HTMLInputElement)) {
-        return;
-      }
-      this.dsoInput.emit({
-        originalEvent: e,
-        value: e.target.value,
-      });
-    };
-    this.handleNext = (e) => {
-      this.dsoNext.emit({ originalEvent: e });
-    };
-    this.handlePrevious = (e) => {
-      this.dsoPrevious.emit({ originalEvent: e });
-    };
-    this.handleClear = (e) => {
-      this.dsoClear.emit({ originalEvent: e });
-    };
-    this.handleKeyDown = (e) => {
-      if (e.key === "Enter") {
-        this.handleNext(e);
-      }
-    };
-    this.value = undefined;
-    this.label = "Zoeken in document";
-    this.current = undefined;
-    this.totalCount = undefined;
-  }
-  /**
-   * Focuses the input field.
-   */
-  async dsoFocus(options = {}) {
-    var _a, _b;
-    (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
-    if (options.select) {
-      (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.select();
-    }
-  }
-  render() {
-    const current = this.current || 0;
-    const totalCount = this.totalCount || 0;
-    return (h("div", { class: "dso-mark-bar" }, h("div", { class: "dso-mark-bar-input" }, h("input", { type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { htmlFor: "search-input" }, h("dso-icon", { class: "dso-search-icon", icon: "search" }), h("span", { class: "label-text" }, this.label)), h("button", { type: "button", onClick: this.handleClear }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Zoekopdracht legen"))), h("div", { class: "dso-button-container" }, h("span", { class: "divider" }), h("button", { type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { icon: "chevron-up", class: "hydrated" }), h("span", { class: "sr-only" }, "Vorig zoekresultaat")), h("span", null, current, "/", totalCount), h("button", { type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { icon: "chevron-down", class: "hydrated" }), h("span", { class: "sr-only" }, "Volgend zoekresultaat")))));
-  }
-  static get is() { return "dso-mark-bar"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["./mark-bar.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["mark-bar.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The current search value."
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label for the input field."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "\"Zoeken in document\""
-      },
-      "current": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The current (one-based) highlighted search item."
-        },
-        "attribute": "current",
-        "reflect": false
-      },
-      "totalCount": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Total number of search results."
-        },
-        "attribute": "total-count",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "dsoInput",
-        "name": "dsoInput",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted each time the user types in the search field."
-        },
-        "complexType": {
-          "original": "MarkBarInputEvent",
-          "resolved": "MarkBarInputEvent",
-          "references": {
-            "MarkBarInputEvent": {
-              "location": "import",
-              "path": "./mark-bar.interfaces",
-              "id": "src/components/mark-bar/mark-bar.interfaces.ts::MarkBarInputEvent"
+    constructor() {
+        this.handleInput = (e) => {
+            if (!(e.target instanceof HTMLInputElement)) {
+                return;
             }
-          }
-        }
-      }, {
-        "method": "dsoNext",
-        "name": "dsoNext",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when user activates \"next search result\" button."
-        },
-        "complexType": {
-          "original": "MarkBarPaginationEvent",
-          "resolved": "MarkBarPaginationEvent",
-          "references": {
-            "MarkBarPaginationEvent": {
-              "location": "import",
-              "path": "./mark-bar.interfaces",
-              "id": "src/components/mark-bar/mark-bar.interfaces.ts::MarkBarPaginationEvent"
+            this.dsoInput.emit({
+                originalEvent: e,
+                value: e.target.value,
+            });
+        };
+        this.handleNext = (e) => {
+            this.dsoNext.emit({ originalEvent: e });
+        };
+        this.handlePrevious = (e) => {
+            this.dsoPrevious.emit({ originalEvent: e });
+        };
+        this.handleClear = (e) => {
+            this.dsoClear.emit({ originalEvent: e });
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === "Enter") {
+                this.handleNext(e);
             }
-          }
-        }
-      }, {
-        "method": "dsoPrevious",
-        "name": "dsoPrevious",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when user activates \"previous search result\" button."
-        },
-        "complexType": {
-          "original": "MarkBarPaginationEvent",
-          "resolved": "MarkBarPaginationEvent",
-          "references": {
-            "MarkBarPaginationEvent": {
-              "location": "import",
-              "path": "./mark-bar.interfaces",
-              "id": "src/components/mark-bar/mark-bar.interfaces.ts::MarkBarPaginationEvent"
-            }
-          }
-        }
-      }, {
-        "method": "dsoClear",
-        "name": "dsoClear",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when user activates \"clear search result\" button."
-        },
-        "complexType": {
-          "original": "MarkBarClearEvent",
-          "resolved": "MarkBarClearEvent",
-          "references": {
-            "MarkBarClearEvent": {
-              "location": "import",
-              "path": "./mark-bar.interfaces",
-              "id": "src/components/mark-bar/mark-bar.interfaces.ts::MarkBarClearEvent"
-            }
-          }
+        };
+        this.value = undefined;
+        this.label = "Zoeken in document";
+        this.current = undefined;
+        this.totalCount = undefined;
+    }
+    /**
+     * Focuses the input field.
+     */
+    async dsoFocus(options = {}) {
+        var _a, _b;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
+        if (options.select) {
+            (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.select();
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "dsoFocus": {
-        "complexType": {
-          "signature": "(options?: MarkBarFocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    }
+    render() {
+        const current = this.current || 0;
+        const totalCount = this.totalCount || 0;
+        return (h("div", { key: '24dc8038f3ee6abcc9f741d5eb47f9c2e0135efb', class: "dso-mark-bar" }, h("div", { key: 'abc17c6f14fea338d11ad733a755e5e6eeb1eb55', class: "dso-mark-bar-input" }, h("input", { key: '59c4971ea6b4b07344caa6c76971b3360196d792', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '2fc4531e3bf8541f1366d201b7ec7bf8b917687d', htmlFor: "search-input" }, h("dso-icon", { key: 'a9d9683f5f8522a5f9c0ce9e59ca23b811add5c4', class: "dso-search-icon", icon: "search" }), h("span", { key: '8b31e9004a25da808e3f93ef2344602533780014', class: "label-text" }, this.label)), h("button", { key: '43a739a7c5a1ee6f8f3334b61f5ef8c8638cfd49', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '99185e5c9156d6523cdbca83ffe8b2ba19c29e8b', icon: "times" }), h("span", { key: '3e4302d15330cf0c5b3fdd9bd6e4b1e7c31ca7de', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '9b18e0ec50751d65912a37482a82fb1cfad4b78d', class: "dso-button-container" }, h("span", { key: 'ea1a85c0d4a720ffe735533bcdc5e56008b6c02a', class: "divider" }), h("button", { key: '1cd2151bd34b81941719217223cef8585f8b19f2', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '2b13fb24497a4bc17919daa8212b1fefbc21d8ab', icon: "chevron-up", class: "hydrated" }), h("span", { key: '91a30e14a97470eaac9a926b8ab3a184e2fda3ad', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: '20f4c22c90979c2355a84149d22bc4dc87952036' }, current, "/", totalCount), h("button", { key: '7133c71bf1d4711765ff2d98dd1622908416835e', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: 'ce73fa26896a6a713c3b33e7e92f7677b57bd21e', icon: "chevron-down", class: "hydrated" }), h("span", { key: 'a5ecabff6c0256ef69afe697e4982f37e88d5e78', class: "sr-only" }, "Volgend zoekresultaat")))));
+    }
+    static get is() { return "dso-mark-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./mark-bar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mark-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The current search value."
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the input field."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "\"Zoeken in document\""
             },
-            "MarkBarFocusOptions": {
-              "location": "import",
-              "path": "./mark-bar.interfaces",
-              "id": "src/components/mark-bar/mark-bar.interfaces.ts::MarkBarFocusOptions"
+            "current": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The current (one-based) highlighted search item."
+                },
+                "attribute": "current",
+                "reflect": false
+            },
+            "totalCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of search results."
+                },
+                "attribute": "total-count",
+                "reflect": false
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Focuses the input field.",
-          "tags": []
-        }
-      }
-    };
-  }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoInput",
+                "name": "dsoInput",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted each time the user types in the search field."
+                },
+                "complexType": {
+                    "original": "MarkBarInputEvent",
+                    "resolved": "MarkBarInputEvent",
+                    "references": {
+                        "MarkBarInputEvent": {
+                            "location": "import",
+                            "path": "./mark-bar.interfaces",
+                            "id": "src/components/mark-bar/mark-bar.interfaces.ts::MarkBarInputEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoNext",
+                "name": "dsoNext",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when user activates \"next search result\" button."
+                },
+                "complexType": {
+                    "original": "MarkBarPaginationEvent",
+                    "resolved": "MarkBarPaginationEvent",
+                    "references": {
+                        "MarkBarPaginationEvent": {
+                            "location": "import",
+                            "path": "./mark-bar.interfaces",
+                            "id": "src/components/mark-bar/mark-bar.interfaces.ts::MarkBarPaginationEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoPrevious",
+                "name": "dsoPrevious",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when user activates \"previous search result\" button."
+                },
+                "complexType": {
+                    "original": "MarkBarPaginationEvent",
+                    "resolved": "MarkBarPaginationEvent",
+                    "references": {
+                        "MarkBarPaginationEvent": {
+                            "location": "import",
+                            "path": "./mark-bar.interfaces",
+                            "id": "src/components/mark-bar/mark-bar.interfaces.ts::MarkBarPaginationEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoClear",
+                "name": "dsoClear",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when user activates \"clear search result\" button."
+                },
+                "complexType": {
+                    "original": "MarkBarClearEvent",
+                    "resolved": "MarkBarClearEvent",
+                    "references": {
+                        "MarkBarClearEvent": {
+                            "location": "import",
+                            "path": "./mark-bar.interfaces",
+                            "id": "src/components/mark-bar/mark-bar.interfaces.ts::MarkBarClearEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "dsoFocus": {
+                "complexType": {
+                    "signature": "(options?: MarkBarFocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "MarkBarFocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "MarkBarFocusOptions": {
+                            "location": "import",
+                            "path": "./mark-bar.interfaces",
+                            "id": "src/components/mark-bar/mark-bar.interfaces.ts::MarkBarFocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focuses the input field.",
+                    "tags": []
+                }
+            }
+        };
+    }
 }
 //# sourceMappingURL=mark-bar.js.map

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"]}