@dso-toolkit/core 62.28.0 → 62.30.0

package/dist/collection/components/list-button/list-button.js

@@ -113,7 +113,7 @@ export class ListButton {
     render() {
         const showButtonInputs = this.manualCount === undefined;
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: '7cd66b1005ca012be7debec40c85dfa245103482', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'd71e1cb57d2eba09adf61bd4944cb9c7aa1318f0', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { key: '3e60dc348e53946cd2d0e6ef519d7a5a84b20177', class: "dso-selectable" }, h("input", { key: 'c3d9e437d66676515d7488d474e4bbdac90a58c4', id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), h("label", { key: '7db34b3d190d5ca267d78e3e27b76ecdcf2b0429', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (h("div", { key: 'bc4d3255062c5a45de627f911f1dd9f3cc666c39', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", h("div", { key: 'cf7396b00a3f0720d69a32254b5bab79291382f3', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (h("span", { key: '475ddfe5f776f8feecae6041e3b008cf8abc7ce2', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), h("slot", { key: '8e70a5e273eda24cff6676ff4018277db135b61f', name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { key: '8fbc9df64f5fcad29bf26391c3258bd93c9786f8', class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (h("button", { key: 'bc2ce4408fbf3727511b52ade6bab7c3c434e045', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: '7f22151f8f8979be45f86f76bcfd12676a37d8fb', icon: "minus-circle" }), h("span", { key: 'a33ceeb8f6b953693bf575bfab4111905ee96854', class: "sr-only" }, "Aantal verlagen"))), h("div", { key: '6658e579ded3557e634bf3ddb7b8577e9d14df17', class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (h("input", { key: 'd82691484c68cf49920611239fcd25e87a267113', class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), h("form", { key: 'aa20545748dce7bf3aa56669680ebfbdc790aa81', onSubmit: (e) => this.setCount(e) }, h("div", { key: '69d4a9866822ebf1ccb525681d9b53406bd3fe88', ref: (element) => (this.manualInputWrapperElement = element) }, h("input", { key: 'adec7b270253cfa23128577bf82422ad2fe1e190', class: clsx("form-control", { hidden: showButtonInputs }), type: "number", "aria-label": "Aantal", value: this.manualCount, min: this.min, max: this.max, onInput: (e) => this.handleOnChange(e) })), this.manual && (h("button", { key: '21ca1f41974c793693b6dfd5d52da5cee46bfef3', class: clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (h("span", { class: "sr-only" }, "Zet waarde")))))), showButtonInputs && (h("button", { key: 'dac00a3af549df46e9ba050354983637f39055f0', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: '73314b7a40caae99052e6f1e63e28370ea5d36ea', icon: "plus-circle" }), h("span", { key: '0ff4e475035dd40abbc9e02ec562156517b7f725', class: "sr-only" }, "Aantal verhogen")))))));
+        return (h("div", { key: 'c1d00fc6c4a3e9b8d6bdd6b006a3df78124e55ec', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'f2cc4ee6b103d609e37b46eb318a9ad31b3a7ef2', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { key: 'a343bccf1d43f3511156cd6ca334c1e12935e284', class: "dso-selectable" }, h("input", { key: '55599717c0e717ffcc56a9b534bcb39e8cc4c733', id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), h("label", { key: '561eef7be3e076df1dbb79887014a26303b1b7dc', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (h("div", { key: '2181c5ac8768ee8ef8ab9e9dd92e3b37faa4d86e', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", h("div", { key: 'c58abf776dd848f58ecd00d29db9d8e8e35430f1', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (h("span", { key: '05b5734e4e8bd8ffdb069e10537e7847f03f1830', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), h("slot", { key: 'f6b8b2a8fd71c0d064307ce242c904fa6d44c4fe', name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { key: 'eec5313d02fafaa95993300558b2368346c0bac4', class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (h("button", { key: '4cec5160dc944b2fd8184c4c41a84ffec59cde28', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: 'a9d9aac3b105557782bf647971de556b63c58831', icon: "minus-circle" }), h("span", { key: 'ea1a0b92f7d13a567ffab5436562ca0f651289e0', class: "sr-only" }, "Aantal verlagen"))), h("div", { key: 'a19961dcb657162c23c18150b927169e537f8b70', class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (h("input", { key: '67325e7673b1dfbbc5080165efcfffb511d74535', class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), h("form", { key: '5c05349904095de9b299a4b0140c58f12da15475', onSubmit: (e) => this.setCount(e) }, h("div", { key: '55ca1bae03bc45d1ac132ae4ef33fc76cbb04c7d', ref: (element) => (this.manualInputWrapperElement = element) }, h("input", { key: '49c8f27dab116a8099caf54173137b168a8900f8', class: clsx("form-control", { hidden: showButtonInputs }), type: "number", "aria-label": "Aantal", value: this.manualCount, min: this.min, max: this.max, onInput: (e) => this.handleOnChange(e) })), this.manual && (h("button", { key: 'baa1ad99b0437bf1408db15e11b54af331f4b414', class: clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (h("span", { class: "sr-only" }, "Zet waarde")))))), showButtonInputs && (h("button", { key: 'c8d76acc7bdfc55b9244700fe9fcdd8c8b6d61ed', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: 'da0e9254b5547346de0399b56072800bbbaf3611', icon: "plus-circle" }), h("span", { key: '1f645f1708e375cd60c15c1a3a6fb3636c5c55cd', class: "sr-only" }, "Aantal verhogen")))))));
     }
     static get is() { return "dso-list-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/logo/logo.js

@@ -1,4 +1,4 @@
-import { Fragment, Host, h, } from "@stencil/core";
+import { Fragment, h, } from "@stencil/core";
 import { isModifiedEvent } from "../../utils/is-modified-event";
 const DsoLogo = () => (h(Fragment, null, h("svg", { fill: "none", viewBox: "0 0 48 48", height: "100%", class: "logo-target" }, h("path", { class: "outer", d: "M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z" }), h("path", { class: "middle", d: "M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z" }), h("path", { class: "inner", d: "M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z" })), h("div", { class: "logo-wordmark" }, h("span", { class: "logo-wordmark-omgevings" }, "Omgevings"), h("span", { class: "logo-wordmark-loket" }, "loket"))));
 export class Logo {
@@ -15,8 +15,8 @@ export class Logo {
         this.ribbon = undefined;
     }
     render() {
-        return (h(Host, { key: '776673cf588bb35a7d7d7e3b33556f2c20e8d74a', "aria-label": ["Omgevingsloket", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(" ") }, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, null))) : (h(DsoLogo, null)), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '897586033a01fe6d6d882e3f2f6aa7fc4c72675f', class: "logo-ribbon" }, this.ribbon)));
+        return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, null))) : (h(DsoLogo, null)), this.label &&
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '7c666a7a3881ff302c28a43afe3ecacb3d3a238a', class: "logo-ribbon" }, this.ribbon)));
     }
     static get is() { return "dso-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"logo.js","sourceRoot":"","sources":["../../../../src/components/logo/logo.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,KAAK,GAGN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAGhE,MAAM,OAAO,GAAwB,GAAG,EAAE,CAAC,CACzC;IACE,WAAK,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,aAAa;QACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,4CAA4C,GAAG;QACrE,YAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,0CAA0C,GAAG;QACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,uCAAuC,GAAG,CAC5D;IACN,WAAK,KAAK,EAAC,eAAe;QACxB,YAAM,KAAK,EAAC,yBAAyB,gBAAiB;QACtD,YAAM,KAAK,EAAC,qBAAqB,YAAa,CAC1C,CACL,CACJ,CAAC;AAOF,MAAM,OAAO,IAAI;;QAuCP,oBAAe,GAAG,CAAC,CAAa,EAAE,EAAE;YAC1C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,OAAQ,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACxG,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,CAAa,EAAE,EAAE;YAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,QAAS,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC1G,CAAC,CAAC;;;;;;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,mEAAa,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YAC7G,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,SAAG,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe;gBACnE,EAAC,OAAO,OAAG,CACT,CACL,CAAC,CAAC,CAAC,CACF,EAAC,OAAO,OAAG,CACZ;YAEA,IAAI,CAAC,KAAK;gBACT,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChB,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC7C,CAAC,CAAC,CAAC,CACF,SAAG,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB;oBAC3E,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1C,CACL,CAAC;YACH,IAAI,CAAC,MAAM,IAAI,4DAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,MAAM,CAAO,CACvD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Fragment,\r\n  Host,\r\n  Prop,\r\n  h,\r\n  Event,\r\n  EventEmitter,\r\n  FunctionalComponent,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { LogoClickEvent, LogoLabelClickEvent } from \"./logo.interfaces\";\r\n\r\nconst DsoLogo: FunctionalComponent = () => (\r\n  <>\r\n    <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n      <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n      <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n      <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n    </svg>\r\n    <div class=\"logo-wordmark\">\r\n      <span class=\"logo-wordmark-omgevings\">Omgevings</span>\r\n      <span class=\"logo-wordmark-loket\">loket</span>\r\n    </div>\r\n  </>\r\n);\r\n\r\n@Component({\r\n  tag: \"dso-logo\",\r\n  styleUrl: \"logo.scss\",\r\n  shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n  /**\r\n   *  The url the logo is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  logoUrl?: string;\r\n\r\n  /**\r\n   * The label clarifies the service within the Omgevingsloket, shown\r\n   * as a subtitle (and on smaller screens as the main wordmark itself).\r\n   */\r\n  @Prop({ reflect: true })\r\n  label?: string;\r\n\r\n  /**\r\n   *  The url the label is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  labelUrl?: string;\r\n\r\n  /**\r\n   * The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n   * Used to clarify the (non-production) server environment (\"int\", \"kta\", \"pfm\", \"pre\", or \"dmo\")\r\n   */\r\n  @Prop({ reflect: true })\r\n  ribbon?: string;\r\n\r\n  /**\r\n   * Emitted when the logo is clicked (only when logoUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLogoClick!: EventEmitter<LogoClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the label in the logo is clicked (only when labelUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLabelClick!: EventEmitter<LogoLabelClickEvent>;\r\n\r\n  private handleLogoClick = (e: MouseEvent) => {\r\n    this.dsoLogoClick.emit({ originalEvent: e, url: this.logoUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  private handleLabelClick = (e: MouseEvent) => {\r\n    this.dsoLabelClick.emit({ originalEvent: e, url: this.labelUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host aria-label={[\"Omgevingsloket\", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(\" \")}>\r\n        {this.logoUrl ? (\r\n          <a class=\"logo-url\" href={this.logoUrl} onClick={this.handleLogoClick}>\r\n            <DsoLogo />\r\n          </a>\r\n        ) : (\r\n          <DsoLogo />\r\n        )}\r\n\r\n        {this.label &&\r\n          (!this.labelUrl ? (\r\n            <span class=\"logo-label\">{this.label}</span>\r\n          ) : (\r\n            <a class=\"logo-label-url\" href={this.labelUrl} onClick={this.handleLabelClick}>\r\n              <span class=\"logo-label\">{this.label}</span>\r\n            </a>\r\n          ))}\r\n        {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"logo.js","sourceRoot":"","sources":["../../../../src/components/logo/logo.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,QAAQ,EACR,IAAI,EACJ,CAAC,EACD,KAAK,GAGN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAGhE,MAAM,OAAO,GAAwB,GAAG,EAAE,CAAC,CACzC;IACE,WAAK,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,aAAa;QACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,4CAA4C,GAAG;QACrE,YAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,0CAA0C,GAAG;QACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,uCAAuC,GAAG,CAC5D;IACN,WAAK,KAAK,EAAC,eAAe;QACxB,YAAM,KAAK,EAAC,yBAAyB,gBAAiB;QACtD,YAAM,KAAK,EAAC,qBAAqB,YAAa,CAC1C,CACL,CACJ,CAAC;AAOF,MAAM,OAAO,IAAI;;QAuCP,oBAAe,GAAG,CAAC,CAAa,EAAE,EAAE;YAC1C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,OAAQ,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACxG,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,CAAa,EAAE,EAAE;YAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,QAAS,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC1G,CAAC,CAAC;;;;;;IAEF,MAAM;QACJ,OAAO,CACL;YACG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,SAAG,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe;gBACnE,EAAC,OAAO,OAAG,CACT,CACL,CAAC,CAAC,CAAC,CACF,EAAC,OAAO,OAAG,CACZ;YAEA,IAAI,CAAC,KAAK;gBACT,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChB,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC7C,CAAC,CAAC,CAAC,CACF,SAAG,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB;oBAC3E,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1C,CACL,CAAC;YACH,IAAI,CAAC,MAAM,IAAI,4DAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,MAAM,CAAO,CAC3D,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Fragment,\r\n  Prop,\r\n  h,\r\n  Event,\r\n  EventEmitter,\r\n  FunctionalComponent,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { LogoClickEvent, LogoLabelClickEvent } from \"./logo.interfaces\";\r\n\r\nconst DsoLogo: FunctionalComponent = () => (\r\n  <>\r\n    <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n      <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n      <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n      <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n    </svg>\r\n    <div class=\"logo-wordmark\">\r\n      <span class=\"logo-wordmark-omgevings\">Omgevings</span>\r\n      <span class=\"logo-wordmark-loket\">loket</span>\r\n    </div>\r\n  </>\r\n);\r\n\r\n@Component({\r\n  tag: \"dso-logo\",\r\n  styleUrl: \"logo.scss\",\r\n  shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n  /**\r\n   *  The url the logo is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  logoUrl?: string;\r\n\r\n  /**\r\n   * The label clarifies the service within the Omgevingsloket, shown\r\n   * as a subtitle (and on smaller screens as the main wordmark itself).\r\n   */\r\n  @Prop({ reflect: true })\r\n  label?: string;\r\n\r\n  /**\r\n   *  The url the label is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  labelUrl?: string;\r\n\r\n  /**\r\n   * The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n   * Used to clarify the (non-production) server environment (\"int\", \"kta\", \"pfm\", \"pre\", or \"dmo\")\r\n   */\r\n  @Prop({ reflect: true })\r\n  ribbon?: string;\r\n\r\n  /**\r\n   * Emitted when the logo is clicked (only when logoUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLogoClick!: EventEmitter<LogoClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the label in the logo is clicked (only when labelUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLabelClick!: EventEmitter<LogoLabelClickEvent>;\r\n\r\n  private handleLogoClick = (e: MouseEvent) => {\r\n    this.dsoLogoClick.emit({ originalEvent: e, url: this.logoUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  private handleLabelClick = (e: MouseEvent) => {\r\n    this.dsoLabelClick.emit({ originalEvent: e, url: this.labelUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.logoUrl ? (\r\n          <a class=\"logo-url\" href={this.logoUrl} onClick={this.handleLogoClick}>\r\n            <DsoLogo />\r\n          </a>\r\n        ) : (\r\n          <DsoLogo />\r\n        )}\r\n\r\n        {this.label &&\r\n          (!this.labelUrl ? (\r\n            <span class=\"logo-label\">{this.label}</span>\r\n          ) : (\r\n            <a class=\"logo-label-url\" href={this.labelUrl} onClick={this.handleLabelClick}>\r\n              <span class=\"logo-label\">{this.label}</span>\r\n            </a>\r\n          ))}\r\n        {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/map-base-layers/map-base-layers.js

@@ -22,7 +22,7 @@ export class MapBaseLayers {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'de9a9fa37ee87e11a793cff4d896ae7a594f04dc', class: "form-group dso-radios" }, h("legend", { key: '190e5b19d0c79b873caa638c8fa0f1a4b1adfaa8', class: "sr-only" }, "Achtergrond"), h("div", { key: 'eea2e7ba47b204027918a7143b214059ec1b0252', class: "dso-label-container" }, h("span", { key: '5ff9927b14af2a33b2629dec63b8ce3b681a31be', class: "control-label", "aria-hidden": "true" }, "Achtergrond")), h("div", { key: 'bc9efcd19fd359ff0461dcaae6bff1479a0750e2', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: '64448d3c75c763688e10384c82d5272289194941', class: "form-group dso-radios" }, h("legend", { key: 'f899ab7c2036d378888ddfdb3fbd5761aa63ad4e', class: "sr-only" }, "Achtergrond"), h("div", { key: '3a04d0de9b63da70d71f0f7d096ed9a47bcea094', class: "dso-label-container" }, h("span", { key: 'dac903897a61898c164630b61001e60bad60f336', class: "control-label", "aria-hidden": "true" }, "Achtergrond")), h("div", { key: 'fcf59ea41e391ebdc1b0ed54757d5ad27eb56512', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     static get is() { return "dso-map-base-layers"; }
     static get encapsulation() { return "shadow"; }

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

@@ -88,13 +88,13 @@ button::-moz-focus-inner {
   outline: 0;
 }
 .toggle-visibility-button:hover {
-  background-color: #39870c;
+  background-color: #d7e7ce;
   border-color: #39870c;
-  color: #fff;
+  color: #39870c;
 }
 .toggle-visibility-button:active {
-  background-color: #275937;
-  border-color: #275937;
+  background-color: #39870c;
+  border-color: #39870c;
   color: #fff;
 }
 .toggle-visibility-button[disabled], .toggle-visibility-button[disabled]:hover {
@@ -182,8 +182,8 @@ button::-moz-focus-inner {
   inline-size: 16px;
 }
 .toggle-visibility-button:focus-visible {
-  background-color: #39870c;
-  border-color: #39870c;
+  background-color: #d7e7ce;
+  border-color: #d7e7ce;
   color: #fff;
   outline: none;
 }
@@ -235,13 +235,13 @@ button::-moz-focus-inner {
   outline: 0;
 }
 .zoom-buttons button:hover {
-  background-color: #39870c;
+  background-color: #d7e7ce;
   border-color: #39870c;
-  color: #fff;
+  color: #39870c;
 }
 .zoom-buttons button:active {
-  background-color: #275937;
-  border-color: #275937;
+  background-color: #39870c;
+  border-color: #39870c;
   color: #fff;
 }
 .zoom-buttons button[disabled], .zoom-buttons button[disabled]:hover {
@@ -329,8 +329,8 @@ button::-moz-focus-inner {
   inline-size: 16px;
 }
 .zoom-buttons button:focus-visible {
-  background-color: #39870c;
-  border-color: #39870c;
+  background-color: #d7e7ce;
+  border-color: #d7e7ce;
   color: #fff;
   outline: none;
 }

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

@@ -54,7 +54,7 @@ export class MapControls {
         });
     }
     render() {
-        return (h(Host, { key: '34145b3d1e724119b6cd522534e2e700345a5990' }, h("button", { key: 'ff031cb9e97e5266d2b420fa112c74f1b8e958c8', 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: 'b083a9c40f23c03fa7ccdae6d5866988a03fa8c6', icon: "layers" }), h("span", { key: '26e21895c90f6fe7475502d99a08c352a3731500' }, "Kaartlagen")), h("div", { key: '5a4f95aea4173650f54ad0e8559b1cbd756b66c0', class: "zoom-buttons" }, h("button", { key: '85956a69ce3b96beb62de7fb790b55f393def55e', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '792a1b749a0f696a9363e9f36001ae440c87cdf6' }, "Zoom in"), h("dso-icon", { key: '6a16ea350fabb6c9efc85d8dc7ef81d8337e6530', icon: "plus" })), h("button", { key: '4e7082ff308233cfc8134b8c41eea8fce6426bc8', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: 'ce5f29ea7bd57bf337f08897b6fe379adc62ccfa' }, "Zoom uit"), h("dso-icon", { key: '86984bb1aa776bd43d253ff9df06de1f39649088', icon: "minus" }))), h("section", { key: '14facd077fcd83c6e62554b449d5d266cc17e988', hidden: this.hideContent }, h("header", { key: 'cb9167742d6ea080d449db8953867bf2d574ac4a' }, h("h2", { key: '8510908dcb3f41f08eea56b03b550fd5f474aedf' }, this.panelTitle), h("button", { key: '51ddf3ac8391e57fd444f848b78e0af62d741a2b', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '5da4553f483a7f30005aba593a020254f2e19f04' }, "Verberg paneel ", this.panelTitle), h("dso-icon", { key: 'd8aea35484873141c1456a63692e3ea66b35baf9', icon: "times" }))), h("dso-scrollable", { key: '8ba6c47069438469a7c7ed835418d36156f37250' }, h("div", { key: 'c709faeb80ea617835b961f944b4b04f670ea854', class: "content" }, h("slot", { key: 'c07de3abf2daaa2362069ac1c5980103da368721' }))))));
+        return (h(Host, { key: '9b1fd58e6ec50f4e31430ea5f78d1f89c1fd6544' }, h("button", { key: 'fb0ebffd7d770f6245b3145cb59463481e48523b', 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: 'a9b72eba9544bd515597793a0eabb439eb893c6f', icon: "layers" }), h("span", { key: 'b08ebd940684073ed0e36570a1d210f96ea9f34c' }, "Kaartlagen")), h("div", { key: 'c87368541304a130fae4724e2a6fd0444d2fda7d', class: "zoom-buttons" }, h("button", { key: '3daabd704da61ce279c5cb045e53d2695bbd16b8', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'd4f0bcea93c350dde4738d989d4915b09a6dc67d' }, "Zoom in"), h("dso-icon", { key: '2dbe91b8bea77e37dc68dc6c92d34530163a65df', icon: "plus" })), h("button", { key: '63e154efe6fcf5a674d16bc0dcef5a78507aed9a', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '43355e6cbcd8737edf26cada360b6cee7f3c63b8' }, "Zoom uit"), h("dso-icon", { key: '7d740262c989d1d2abb23055a97de467162fe06d', icon: "minus" }))), h("section", { key: 'c8792464eb8da4865b8232e284c512fe0e7562d6', hidden: this.hideContent }, h("header", { key: '76843f873e6c70a47e637779915797b11ee568a4' }, h("h2", { key: '1400d65a12ea5fb3c9a39c3e177e9f0d728e6977' }, this.panelTitle), h("button", { key: 'd60dbe4998dbfed1ef256d087669f768ec09f1dc', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'bc71e0ee2a2fa0cbe73729949e24a30b1b781c93' }, "Verberg paneel ", this.panelTitle), h("dso-icon", { key: 'c2a9d4c08f0171d5ddba810e192d80ca86f226e2', icon: "times" }))), h("dso-scrollable", { key: 'b73dea1633c104e47398b4a51792962c93073b8c' }, h("div", { key: 'fafedd2b81834cf6b8e0c053942d226110c1c093', class: "content" }, h("slot", { key: 'e3677e8624184e0f6957433f5a266a13be4decb6' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,7 +23,7 @@ export class MapOverlays {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '073773564a6419ec8c1b3b21556a60e5d5e84672', class: "form-group dso-checkboxes" }, h("legend", { key: 'aa16832400f3ebecccb21b307e81c46b7aefd3d3', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'e68c259168ecbac1369da1522398606bc559d4b3', class: "dso-label-container" }, h("span", { key: '471a5cf1253fbbb21950edd1d9659736647b7229', class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), h("div", { key: 'd1d798e12fdf4f7ad4119c632a142a24afc197be', 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: 'e5de5ba0398fb986203033e79fb89d56f9a14e44', class: "form-group dso-checkboxes" }, h("legend", { key: '1fa2242a3a4494a4f40c16f76ec861d9c5abe9ed', class: "sr-only" }, "Kaartlagen"), h("div", { key: '8cfa0e4c828ee0f980df84a94242440112d33a1e', class: "dso-label-container" }, h("span", { key: '8b0fc86a327f41e095443792ddd05b3dbafe5152', class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), h("div", { key: 'b2c0465e7f662413d199b1c4c6d530f122d1d7bc', 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"; }

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

@@ -42,7 +42,7 @@ export class MarkBar {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '3f25a3f9706b6ea7f9795d09717dfe7a0fa3aa17', class: "dso-mark-bar" }, h("div", { key: 'd5459197a0fd2a92fae1af76a9d9140a8a637e93', class: "dso-mark-bar-input" }, h("input", { key: '05e8e0f11dae7bde5e2b6551f1fdcab3a2637e74', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'f4d48eeada8926cdd4ee08ec2ba53d1eb5b36c39', htmlFor: "search-input" }, h("dso-icon", { key: 'a0a7e4fd15b6bab81a899edfea312748ac873093', class: "dso-search-icon", icon: "search" }), h("span", { key: '964c53a4ea795547bacdc24b9914113eeb743421', class: "label-text" }, this.label)), h("button", { key: 'db57a96c2776cb1527edcd1f2b71491bda90dcec', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '574f0778dba232f42d79e5c75a6807833c366be2', icon: "times" }), h("span", { key: '8095133482793e9eee3d7c6c7b59b003826ecb1f', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '57f03e3dfa3179d9d482b64aedc444ccc3983bc3', class: "dso-button-container" }, h("span", { key: '6b178e34dde7418604e5162948620d9c50a9afd3', class: "divider" }), h("button", { key: '03eb988b68da0b9c61f4c9b8ae1cf51509db4907', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '927a42bf0c1a86c572c43c731bdde9486863c85a', icon: "chevron-up", class: "hydrated" }), h("span", { key: '331fca19a6784193e1941aeb48c501aa24f3b14b', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: '4558630d29ad6c9816e05a71665b62fbfc903830' }, current, "/", totalCount), h("button", { key: '359c0c6c0c4a95f880385682ae9a14542883f1e8', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: 'd7577c5ccb76745482543969c60a4f78fd352834', icon: "chevron-down", class: "hydrated" }), h("span", { key: 'fe823e10efa4906e7e9fe04f6de5b2fa78473e6a', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (h("div", { key: 'd66b3ca5cc3c0ec5fb32cb673ac93672e885bd8e', class: "dso-mark-bar" }, h("div", { key: 'bc42aea89efe2c211acf7a0d38e6a7dd6be6a6e5', class: "dso-mark-bar-input" }, h("input", { key: '7413ba190a51be189a03eb7fb2ea5187807b40f1', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'd1284be2c862e4720c1eeb0bdfdc887e507718f2', htmlFor: "search-input" }, h("dso-icon", { key: '032f8b0cb7fcd85a42c71864e30eb020150963f7', class: "dso-search-icon", icon: "search" }), h("span", { key: '5711b61364f1059ea2ec2e85fe5e3c7da18c4035', class: "label-text" }, this.label)), h("button", { key: 'c9db372c8da8ff018ead0711adc944b61503e8c4', type: "button", onClick: this.handleClear }, h("dso-icon", { key: 'bdfda039b8c488dcd3a96d25a7d9757becdd9c79', icon: "times" }), h("span", { key: '9a8935a37924417c72fecc32026aed6b1bd67c10', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: 'c4d662a6ae7504f695f831bc27b4634407fb4c59', class: "dso-button-container" }, h("span", { key: '39222d45e6d8d614301b8c007d9a5d437f178ad3', class: "divider" }), h("button", { key: '7c4f0c35bd52de9923b2c3676a70cf673c7270e2', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '05b230ddbab54f81eecd659e43ccc050819601c6', icon: "chevron-up", class: "hydrated" }), h("span", { key: 'f6061e9cb74d3b7e7efa8829388e8b52285f835d', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: '46fe7ddf2359795bf0323f34952c2985fe5c6c32' }, current, "/", totalCount), h("button", { key: 'abc7272e3fc76b2eb556d318852672395070ef11', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '30d7922d66334ed7c97cd848ff10e2691249755b', icon: "chevron-down", class: "hydrated" }), h("span", { key: '16b5e0a05ca46307c73bada038922ac98bc6a5ec', class: "sr-only" }, "Volgend zoekresultaat")))));
     }
     static get is() { return "dso-mark-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,10 +33,10 @@ export class Modal {
     }
     render() {
         var _a;
-        return (h("dialog", { key: 'ef8b4c0f14e31fbfb1b8c0befc9083231e00e197', class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
+        return (h("dialog", { key: '0c88aa98a005a1477f2a989386981ca658bf631f', class: "dso-modal", role: (_a = this.role) !== 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: '432dda3a08b11ce0461115a498677cbd82d8c17e', 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" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("dso-scrollable", { key: '386f642a2f1a94e70eb12d7b368b8fc4a93a164c' }, h("div", { key: 'cbf702ecb3282985e67b40a90de623918f14a6d5', class: "dso-body", tabIndex: 0 }, h("slot", { key: '510e7c9774eec383fe2a5f8f9af2283926ff7ae1', name: "body" }))), this.hasFooter && (h("div", { key: '2ec34e4aebbfd32b8843f91f75edd12cb6ec39b9', class: "dso-footer" }, h("slot", { key: 'b8e274a38461534c51dc79497ae4d6b04f1029c7', name: "footer" }))))));
+            } }, h("div", { key: 'b809d3244393b51e7c11ffd48ab6491fb5d2fa0d', 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" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("dso-scrollable", { key: 'ff3a4a8f8f6962462cb71a4d4a7410de34c01130' }, h("div", { key: '8fbc99c87a885485d7388469f757fcb54c89cc76', class: "dso-body", tabIndex: 0 }, h("slot", { key: '9c9f7a379a1c5641ac270035fa3c7abf3f628c67', name: "body" }))), this.hasFooter && (h("div", { key: '8bb55b4d952e775a35d69a5f4ec7827cc2227a90', class: "dso-footer" }, h("slot", { key: '97e8aea9e2565e7696cc34edd05052a7f566a701', name: "footer" }))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -235,15 +235,15 @@ label.dso-secondary.download::after {
 a.dso-secondary:hover,
 button.dso-secondary:hover,
 label.dso-secondary:hover {
-  background-color: #39870c;
+  background-color: #d7e7ce;
   border-color: #39870c;
-  color: #fff;
+  color: #39870c;
 }
 a.dso-secondary:active,
 button.dso-secondary:active,
 label.dso-secondary:active {
-  background-color: #275937;
-  border-color: #275937;
+  background-color: #39870c;
+  border-color: #39870c;
   color: #fff;
 }
 a.dso-secondary[disabled], a.dso-secondary[disabled]:hover,
@@ -648,7 +648,7 @@ a.dso-secondary, a.dso-secondary:visited {
   color: #39870c;
 }
 a.dso-secondary:hover, a.dso-secondary:visited:hover {
-  color: #fff;
+  color: #39870c;
 }
 a.dso-tertiary {
   text-decoration: none;

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

@@ -24,7 +24,7 @@ export class OzonContent {
             emitAnchorClick: this.dsoAnchorClick.emit,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: 'cc00ca0c2a2ecb40fbe0fb9e09d6e5049b880d3e' }, transformed);
+        return h(Fragment, { key: '56c934de3771646d5583784675fbfcce735c8700' }, transformed);
     }
     static get is() { return "dso-ozon-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/panel/panel.css

@@ -0,0 +1,58 @@
+:host {
+  display: block;
+  border: 1px solid #a8bcaf;
+  border-radius: 4px;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.panel-heading {
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding-block: 8px;
+  padding-inline: 16px 8px;
+  border-block-end: 1px solid #a8bcaf;
+  border-start-start-radius: 4px;
+  border-start-end-radius: 4px;
+  background-color: #e9eeeb;
+  color: #275937;
+}
+.panel-heading .sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+::slotted([slot=heading]) {
+  margin: 0 !important;
+  font-size: 1rem !important;
+  font-weight: 600 !important;
+  line-height: 1.5 !important;
+}
+
+.panel-close {
+  display: inline-block;
+  inline-size: 24px;
+  aspect-ratio: 1/1;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: #275937;
+  cursor: pointer;
+}
+
+.panel-body {
+  padding-block: 16px;
+  padding-inline: 16px;
+}

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

@@ -0,0 +1,47 @@
+import { h } from "@stencil/core";
+/**
+ * @slot - The contents to be highlighted within the panel
+ * @slot heading - The heading (h2 - h6) with the title of the panel
+ */
+export class Panel {
+    render() {
+        return (h("div", { key: '022f08b90fec917193c835d5464bba3c82dcb591', class: "dso-panel" }, h("div", { key: '729d9d77542cef2f42d8327d801db73ebc00093c', class: "panel-heading" }, h("slot", { key: '9afc64d9c40b150f2c06d108fc3e6c0c5b9ee9d9', name: "heading" }), h("button", { key: '23a5e3c7ca055069f735a112c305199d203a0554', type: "button", class: "panel-close", onClick: (e) => this.dsoCloseClick.emit({ originalEvent: e }) }, h("dso-icon", { key: '193d6bbf93e4b0d994c6eac62c50728ec905c472', icon: "times" }), h("span", { key: '319a762facf6abe17541cef1c3a63a4d5bba78cb', class: "sr-only" }, "Sluiten"))), h("div", { key: '4739d349f4df3b7ff8500c3da34adafa7246b2da', class: "panel-body" }, h("slot", { key: '49784b09addb82d7be1f102f2d2ee8ea499beed3' }))));
+    }
+    static get is() { return "dso-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["panel.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["panel.css"]
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoCloseClick",
+                "name": "dsoCloseClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user click the close button."
+                },
+                "complexType": {
+                    "original": "PanelCloseEvent",
+                    "resolved": "PanelCloseEvent",
+                    "references": {
+                        "PanelCloseEvent": {
+                            "location": "local",
+                            "path": "/usr/src/app/packages/core/src/components/panel/panel.tsx",
+                            "id": "src/components/panel/panel.tsx::PanelCloseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","sourceRoot":"","sources":["../../../../src/components/panel/panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AAMtF;;;GAGG;AAMH,MAAM,OAAO,KAAK;IAOhB,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,WAAW;YACpB,4DAAK,KAAK,EAAC,eAAe;gBACxB,6DAAM,IAAI,EAAC,SAAS,GAAG;gBACvB,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC;oBACrG,iEAAU,IAAI,EAAC,OAAO,GAAY;oBAClC,6DAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACL;YACN,4DAAK,KAAK,EAAC,YAAY;gBACrB,8DAAa,CACT,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, h } from \"@stencil/core\";\r\n\r\nexport interface PanelCloseEvent {\r\n  originalEvent: Event;\r\n}\r\n\r\n/**\r\n * @slot - The contents to be highlighted within the panel\r\n * @slot heading - The heading (h2 - h6) with the title of the panel\r\n */\r\n@Component({\r\n  tag: \"dso-panel\",\r\n  styleUrl: \"panel.scss\",\r\n  shadow: true,\r\n})\r\nexport class Panel implements ComponentInterface {\r\n  /**\r\n   * Emitted when the user click the close button.\r\n   */\r\n  @Event()\r\n  dsoCloseClick!: EventEmitter<PanelCloseEvent>;\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"dso-panel\">\r\n        <div class=\"panel-heading\">\r\n          <slot name=\"heading\" />\r\n          <button type=\"button\" class=\"panel-close\" onClick={(e) => this.dsoCloseClick.emit({ originalEvent: e })}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Sluiten</span>\r\n          </button>\r\n        </div>\r\n        <div class=\"panel-body\">\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -8,7 +8,7 @@ export class ProgressBar {
     render() {
         const progressNumber = Math.round(this.progress);
         const progressPercentage = `${progressNumber}%`;
-        return (h("div", { key: '96fe14c14b6f85aefdd73216cff05ba4343cbea0', class: "progress" }, h("span", { key: 'd624321fa47a93511ada3578bd90749a6d1cf81e', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '5d99166ae52f35caf5db01c580a2271032b05ba4', style: { width: `${progressPercentage}` } })), h("span", { key: 'cc4590131135f00a1cc9ad79b31eb21ed28e8915', id: "progress-bar-label" }, h("slot", { key: '3a945783e26101135dae464984ff9bc60d2f87c6' }))));
+        return (h("div", { key: 'bdc673d9d6081248f02eb13bf4cc45e97ce9d754', class: "progress" }, h("span", { key: 'fc6057145d710db59a2cd6e4ac62fc98e3663211', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: 'c559fdf1e1777c56acf960c8cbf6154f53da393c', style: { width: `${progressPercentage}` } })), h("span", { key: '42182aff70df5a667494d0c0e294a72349c194db', id: "progress-bar-label" }, h("slot", { key: 'fdd9990227e7ef80254da1722573fc4447f9ae90' }))));
     }
     static get is() { return "dso-progress-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ export class Progressindicator {
         this.block = undefined;
     }
     render() {
-        return (h(Host, { key: '0a1a894afcdac9908d711a0b19d6075de5b3e9f6' }, h("span", { key: '906b0021e3fe10bfd005531a2537042db4eaae21', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '79ae272ef0159381ef5ef0ee561fb9801db232ca', icon: "spinner" })), h("span", { key: '977da0997e2a977642c05910934dfee5a2bb080f', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label)));
+        return (h(Host, { key: '04ef421f4e4c9cf89ed34be36db74f15a6748420' }, h("span", { key: 'b87ebbc00e72620efb489705810a410ab48960ca', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'be0db28fba99c69709391f20dc12b9d09b09543f', icon: "spinner" })), h("span", { key: '4aacf84583df42fa43882edd37ff5ae16c94c075', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label)));
     }
     static get is() { return "dso-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/responsive-element/responsive-element.js

@@ -40,7 +40,7 @@ export class ResponsiveElement {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: '8266446b235d475eac97f4dd617786e77bd97426', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '8caa6765bacb897352c4a74fa01c32ec5103ea08' })));
+        return (h(Host, { key: '9f8ba3138337e6500b7dc1469f59b7f5c37286ab', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '343a43ce9e959c71ab0ec49060d8896ab68e345d' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scrollable/scrollable.js

@@ -81,9 +81,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: '8d1d55884570901b68e13bc4a903c2a67b662cc6', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'aaf9213d32633be9e2b058186ef95568a655d612', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: '7ee4b091abcc01621390845a8293f16ff4044746', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '9cee13a5d094ba844f2069a253d37cfc2342fed7', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: '3284485edce1479ca43a6c090fb0ad1fdc50080c' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: '2473a4ed767a8d6e8c76c63f2054d852f051ac45' }))));
     }
     static get is() { return "dso-scrollable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/selectable/selectable.js

@@ -63,7 +63,7 @@ export class Selectable {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: 'dd7208bc6160768997ff4b00a1611316d0d3b170' }, h("div", { key: '3a56145fbd723e97dfd1047144699295e64cd83c', class: "dso-selectable-container" }, h("div", { key: '960d6051962d016eb4d10cd42e0378e348176e00', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: '62515e7eb4d4752e9cd884ebb55e25600c796569', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '88c7368c7cf2679a5b553423d6241e6edf1e171c', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '574762e0f3643edb8b2fe2e728c7bdaff02fbb2e', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '4d7366f99efa8e9dd04787630a86f2d8f4720f8b' }, h("slot", { key: '7294a8c9318544819d392552c529ac04a6af2322', name: "info" })))), h("slot", { key: 'fe3293f3aef16561ab13519887293181af6b2347', name: "options" })));
+        return (h(Fragment, { key: '0cbf9eb4ab6e2d8510f3ca3e3a1fe9f6be1c9f17' }, h("div", { key: 'bd82b5657d192f3d855183100794b257c0b8bff1', class: "dso-selectable-container" }, h("div", { key: 'c76c3c223acdf8e7954e7d04ed3fa79044e9d19b', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: '7e881b0259bc9a34cf5dcff88af8be2b66ce9f80', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '9c79309fc1e0c73a9ae55722ea0e58bfbca0a63c', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'c329819cc92b649483fc4de5f49d683c941ff81f', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '0e0e3c4c78ab6ad828fe2201ec818cc1181bfbea' }, h("slot", { key: '83121c8ec4075d1e688b06c306b7ce142399f799', name: "info" })))), h("slot", { key: '53429644d8c03912156f6c3915f5f9b445bd92ce', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/collection/components/slide-toggle/slide-toggle.js

@@ -19,7 +19,7 @@ export class SlideToggle {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, null, h("button", Object.assign({ key: '3001433a806662229d34140abcbd38c73b99986d', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: '65022555e0e78ebe9dff5dede742b981e8ffb836', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '739ab61860eaacd80c6784aa963800b6142470c3', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'c62aac464d6de773aaa619f9adb32b1d47fdb41c', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '76b654950ec496a146b376807350a17d87ab8c8c', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'f9d9ddb1f67228a90e8de5b25d5571691ab2b2da', htmlFor: this.identifier }, h("slot", { key: '57dfa71d6b01ed9bd29690952487477d7563d04f' })))));
+        return (h(Fragment, null, h("button", Object.assign({ key: 'db116bc4038f16564db934d76c61a7736b55e99a', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: '17aea2f95f7dd1f7f8bfcfb12d2c27347c2bf2a0', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'bd837d6f3e5171c7f465cdbc28b0196b25d196ef', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'b74ad3db6f44fc87860074efaa52acf34e76ff93', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: 'e0f0b2e587dbd4ef71c072b6bb1b491cda527c79', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '343cbc919806fd61c79b5da19fb139b070ae71f2', htmlFor: this.identifier }, h("slot", { key: 'd1b665086fb74c9173b4f2ffaf01030dd1c44861' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get originalStyleUrls() {

package/dist/collection/components/table/table.css

@@ -235,15 +235,15 @@ label.dso-secondary.download::after {
 a.dso-secondary:hover,
 button.dso-secondary:hover,
 label.dso-secondary:hover {
-  background-color: #39870c;
+  background-color: #d7e7ce;
   border-color: #39870c;
-  color: #fff;
+  color: #39870c;
 }
 a.dso-secondary:active,
 button.dso-secondary:active,
 label.dso-secondary:active {
-  background-color: #275937;
-  border-color: #275937;
+  background-color: #39870c;
+  border-color: #39870c;
   color: #fff;
 }
 a.dso-secondary[disabled], a.dso-secondary[disabled]:hover,
@@ -648,7 +648,7 @@ a.dso-secondary, a.dso-secondary:visited {
   color: #39870c;
 }
 a.dso-secondary:hover, a.dso-secondary:visited:hover {
-  color: #fff;
+  color: #39870c;
 }
 a.dso-tertiary {
   text-decoration: none;

package/dist/collection/components/table/table.js

@@ -30,7 +30,7 @@ export class Table {
     render() {
         var _a, _b;
         const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
-        return (h(Host, { key: '4057ccfde401b1e848b74b0a0ee2c6d6d4565b52' }, this.modalActive && this.placeholderHeight && (h("div", { key: '26ab1cbdce34326b96d68a9fd0f00f4da1e05bfc', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '54f22fdfc951d729ddf9dbfcb4d0888edc6af119', class: "dso-modal-overlay" }), h("div", { key: '57d76fbc464e1b018bcbe14bd33fadc56764f336', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '9a844d1245264529083ba743e909e9fc190104af', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: 'd55b3419578bfee62bff8fa8c73ae7b258b772df', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: 'a366be082c62b388d5132a1a7869224f56e9d152', class: "dso-responsive-message" }, h("span", { key: 'cbf4ea36702f5409a29a41baf7f1048f73b4148b' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: 'a3cfdff47cd835d99780d055ba1360d0ab90905f', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: '806663ca1732232c687e12d8a8137a4eab21510c', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: 'e8e7445859a023a0ff0e605af3b0238448fb0e6f' }, "vergroten"), h("dso-icon", { key: '37ee911721ae3ae7d81c18b5593d23abdee3b85d', icon: "external-link" }))))), this.modalActive && (h("div", { key: 'ce6093f7803f5e150d856b3777075d4fcfaaedda', class: "dso-header" }, h("h2", { key: 'f279c806e70ae2656c6b832b882493b0779b098a', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: 'e6333850a6d4a4705766c0ac2de78a18b0a13764', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: '83bdf29d4b9a3c03d4a660b194b6054d1afa8fcd', icon: "times" }), h("span", { key: 'cb67ab8d9ba5000cd7826c7a7a86fe73fea8bc0f', class: "sr-only" }, "Sluiten")))), h("div", { key: '86b19f9e0ae08778cdc8646ebb0789c2d3098a0e', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '42722e025f59fe38b332da34b4b4e53e6b4e3aaf' }))))));
+        return (h(Host, { key: '6934c29baf1a2a52622121a47cbaa457a110bcaa' }, this.modalActive && this.placeholderHeight && (h("div", { key: '95bc90f0f6c26bcbed4877b3ffb008ed38a39033', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: 'f6b9c387003cfd31cbfd409a2c5e852f70f83c05', class: "dso-modal-overlay" }), h("div", { key: 'f5b6d711e7969d2f595afaa6b60c384fd9156e68', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '7ed9575bf767603ec9542997fb79314e2ad3f62a', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: '99ca7885db803ecacdd2c293e6027556af138ee9', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: 'bad69741f0bafffa859ff245f7c3cca8012363ac', class: "dso-responsive-message" }, h("span", { key: 'fe3869eb853a024b2fc7d1fef1412ab7c6ed7783' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '5f6e9850584490a0b33188869133d1d0043ecd0b', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: 'f322b245c215ca3212b19fc1a7adcf18f176c16d', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: '9fb2df6a3abe878b4cd84e4dcebd08c4ea2a83da' }, "vergroten"), h("dso-icon", { key: 'fa709f8ad9cefbb0a7384b2bb5feece07a9ae851', icon: "external-link" }))))), this.modalActive && (h("div", { key: '6c86b4a24fec9edbd8cab2eb226c9d1c77e117fd', class: "dso-header" }, h("h2", { key: '311cd0f1a29d23f1918f7554df67b5348af863a6', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '21e51c50991d349e53e2fe57eaf584c519243478', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: 'ae2154d5bd3360b39835aaedc4a18e6da9e54ee0', icon: "times" }), h("span", { key: '5c78d4923438cb45f7172b00a19fe5474313ac88', class: "sr-only" }, "Sluiten")))), h("div", { key: 'f43b2140da2c87e015702bbdd219e08ed8962225', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: 'fce1f821c3cbe2460e5375895d03ce3a7033ad56' }))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;

package/dist/collection/components/toggletip/toggletip.js

@@ -35,7 +35,7 @@ export class Toggletip {
         this.secondary = undefined;
     }
     render() {
-        return (h(Fragment, null, h("dso-info-button", { key: 'cfc7736dca4cee998cef8e73dee26f820735ee74', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: 'abbbc5fffad620f0853c5bac493dc52363b36cc8', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '3ace50d07f07fca51066186a2d081e72190f7f6c' }))));
+        return (h(Fragment, null, h("dso-info-button", { key: '1f3e942335361f2f99d9f63e8787835e6832cb7f', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '5c0b05d39e73012f270627ef11547761684074ea', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '6946258b6128af9d14f5bd76635f8f7b8ff288de' }))));
     }
     static get is() { return "dso-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -168,7 +168,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h(Host, { key: '46cf85f470ba4a74966d0c792ae81c11efa39808', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: 'ec613cea1d402473b442a79abada1b2c7ef7b245', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '2be32f7acb19152aaf933c275fedc1ba6d9563d1', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '6d791bcb763d0eccc54875f8a51fad4f90c8387d', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '89f68418f41bd6163492165ecd88087ad78d26b6' })))));
+        return (h(Host, { key: 'cfad66ccb630fe271a2b2bd5485f158f7c509d90', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: 'da25404fb6a06f3a4ceb841b3c51e221d9a6fb7b', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '00ebab6f82ddfa1349a9df16bb7d36d37c87b942', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '2e69287dd8975def050c78d208fd823d42eaad0a', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: 'b59a912c960e685a005218d534affb1957f797c5' })))));
     }
     activatePopper() {
         var _a;

package/dist/collection/components/tree-view/tree-view.js

@@ -175,7 +175,7 @@ export class TreeView {
     }
     render() {
         var _a;
-        return (h("div", { key: '79a322f7f6bfcee011209548b2c7e2168afbe09d', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: 'e15e1e27c8b1cd14d33e20ea197cc4c02ea7f2da', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
+        return (h("div", { key: 'fb5ce3d687bcd95be1603142bae51b6114db4810', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '97b8778fd22d06e4db48976c320bd17b77d38455', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
     }
     static get is() { return "dso-tree-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/viewer-grid/viewer-grid.css

@@ -332,14 +332,14 @@ button::-moz-focus-inner {
 }
 .sizing-buttons button:hover,
 .toggle-button button:hover {
-  background-color: #39870c;
+  background-color: #d7e7ce;
   border-color: #39870c;
-  color: #fff;
+  color: #39870c;
 }
 .sizing-buttons button:active,
 .toggle-button button:active {
-  background-color: #275937;
-  border-color: #275937;
+  background-color: #39870c;
+  border-color: #39870c;
   color: #fff;
 }
 .sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover,
@@ -447,8 +447,8 @@ button::-moz-focus-inner {
 }
 .sizing-buttons button:focus-visible,
 .toggle-button button:focus-visible {
-  background-color: #39870c;
-  border-color: #39870c;
+  background-color: #d7e7ce;
+  border-color: #d7e7ce;
   color: #fff;
   outline: none;
 }
@@ -548,13 +548,13 @@ button::-moz-focus-inner {
   outline: 0;
 }
 .filterpanel-buttons .cancel-button:hover {
-  background-color: #39870c;
+  background-color: #d7e7ce;
   border-color: #39870c;
-  color: #fff;
+  color: #39870c;
 }
 .filterpanel-buttons .cancel-button:active {
-  background-color: #275937;
-  border-color: #275937;
+  background-color: #39870c;
+  border-color: #39870c;
   color: #fff;
 }
 .filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {