@dso-toolkit/core 62.30.1 → 64.0.0

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

@@ -1,88 +0,0 @@
-import { h } from "@stencil/core";
-export class AnnotationButton {
-    constructor() {
-        this.handleClick = (e) => {
-            this.dsoClick.emit({ originalEvent: e, open: !this.open });
-        };
-        this.identifier = undefined;
-        this.open = false;
-    }
-    render() {
-        return (h("button", { key: 'd1e416ca60447411acdb4617bb35e85506153dec', type: "button", class: "dso-tertiary", "aria-controls": this.identifier, "aria-expanded": this.open.toString(), onClick: this.handleClick }, h("dso-icon", { key: '21d0606b44ea74b854b9afe115fe8ec84e03c721', icon: "label" }), h("span", { key: '3eda0aef17520689883d78d9fd9aa7ccec435eb9', class: "sr-only" }, "Toelichting bekijken")));
-    }
-    static get is() { return "dso-annotation-button"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["annotation-button.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["annotation-button.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "identifier": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | undefined",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "To link the Annotation Button with `aria-controls` to a different element, most likely an Annotation Output."
-                },
-                "attribute": "identifier",
-                "reflect": false
-            },
-            "open": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Set to true when the annotation is open."
-                },
-                "attribute": "open",
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "dsoClick",
-                "name": "dsoClick",
-                "bubbles": false,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when user activates the button."
-                },
-                "complexType": {
-                    "original": "AnnotationButtonClickEvent",
-                    "resolved": "AnnotationButtonClickEvent",
-                    "references": {
-                        "AnnotationButtonClickEvent": {
-                            "location": "local",
-                            "path": "/usr/src/app/packages/core/src/components/annotation-button/annotation-button.tsx",
-                            "id": "src/components/annotation-button/annotation-button.tsx::AnnotationButtonClickEvent"
-                        }
-                    }
-                }
-            }];
-    }
-}
-//# sourceMappingURL=annotation-button.js.map

package/dist/collection/components/annotation-button/annotation-button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"annotation-button.js","sourceRoot":"","sources":["../../../../src/components/annotation-button/annotation-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,KAAK,EAAE,IAAI,EAAgB,MAAM,eAAe,CAAC;AAY5F,MAAM,OAAO,gBAAgB;;QAmBnB,gBAAW,GAAG,CAAC,CAAa,EAAE,EAAE;YACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC7D,CAAC,CAAC;;oBAVK,KAAK;;IAYZ,MAAM;QACJ,OAAO,CACL,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,mBACL,IAAI,CAAC,UAAU,mBACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EACnC,OAAO,EAAE,IAAI,CAAC,WAAW;YAEzB,iEAAU,IAAI,EAAC,OAAO,GAAY;YAClC,6DAAM,KAAK,EAAC,SAAS,2BAA4B,CAC1C,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, ComponentInterface, Event, Prop, EventEmitter } from \"@stencil/core\";\r\n\r\nexport interface AnnotationButtonClickEvent {\r\n  originalEvent: Event;\r\n  open: boolean;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-annotation-button\",\r\n  styleUrl: \"annotation-button.scss\",\r\n  // No shadowdom for a11y reasons (aria-controls pointing to element inside another component)\r\n})\r\nexport class AnnotationButton implements ComponentInterface {\r\n  /**\r\n   * To link the Annotation Button with `aria-controls` to a different element, most likely an Annotation Output.\r\n   */\r\n  @Prop()\r\n  identifier!: string | undefined;\r\n\r\n  /**\r\n   * Set to true when the annotation is open.\r\n   */\r\n  @Prop()\r\n  open = false;\r\n\r\n  /**\r\n   * Emitted when user activates the button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClick!: EventEmitter<AnnotationButtonClickEvent>;\r\n\r\n  private handleClick = (e: MouseEvent) => {\r\n    this.dsoClick.emit({ originalEvent: e, open: !this.open });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <button\r\n        type=\"button\"\r\n        class=\"dso-tertiary\"\r\n        aria-controls={this.identifier}\r\n        aria-expanded={this.open.toString()}\r\n        onClick={this.handleClick}\r\n      >\r\n        <dso-icon icon=\"label\"></dso-icon>\r\n        <span class=\"sr-only\">Toelichting bekijken</span>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/annotation-output/annotation-output.css

@@ -1,82 +0,0 @@
-dso-annotation-output {
-  display: block;
-}
-
-.dso-annotation-header {
-  align-items: center;
-  background-color: #f2f2f2;
-  clear: both;
-  display: flex;
-  margin-block-end: 2px;
-  margin-block-start: 8px;
-  padding-inline-start: 16px;
-  padding-inline-end: 8px;
-  padding-block-start: 8px;
-  padding-block-end: 8px;
-}
-.dso-annotation-header > [slot=title] {
-  color: #000;
-  font-size: 1.25rem;
-  margin-block-end: 0;
-  margin-block-start: 0;
-}
-.dso-annotation-header > :nth-child(2) {
-  margin-inline-start: auto;
-}
-
-dso-responsive-element[small] .dso-annotation-header,
-dso-responsive-element[medium] .dso-annotation-header {
-  display: grid;
-  row-gap: 8px;
-}
-dso-responsive-element[small] .dso-annotation-header *[slot=title],
-dso-responsive-element[medium] .dso-annotation-header *[slot=title] {
-  grid-row: 1;
-  grid-column: 1;
-}
-dso-responsive-element[small] .dso-annotation-header *[slot=addons],
-dso-responsive-element[medium] .dso-annotation-header *[slot=addons] {
-  grid-row: 2;
-  grid-column: 1;
-  margin-inline-start: initial;
-}
-dso-responsive-element[small] .dso-annotation-header .dso-annotation-close-button,
-dso-responsive-element[medium] .dso-annotation-header .dso-annotation-close-button {
-  grid-row: 1;
-  grid-column: 2;
-  margin-inline-start: 8px;
-  text-align: end;
-}
-
-.dso-annotation-content {
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-  background-color: #f2f2f2;
-  border-color: #f2f2f2;
-  color: #191919;
-  padding-inline-start: 16px;
-  padding-inline-end: 8px;
-  padding-block-start: 8px;
-  padding-block-end: 8px;
-}
-.dso-annotation-content a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./dso-icons.svg#img-download-zwart");
-}
-.dso-annotation-content a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./dso-icons.svg#img-external-link-zwart");
-}
-.dso-annotation-content a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-call-zwart");
-}
-.dso-annotation-content a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-email-zwart");
-}
-
-.dso-annotation-close-button {
-  margin-inline-start: 32px;
-}
-
-.dso-annotation-prefix {
-  font-style: italic;
-}

package/dist/collection/components/annotation-output/annotation-output.js

@@ -1,106 +0,0 @@
-import { h } from "@stencil/core";
-export class AnnotationOutput {
-    constructor() {
-        this.toggleHandler = (e) => {
-            this.dsoClose.emit({ originalEvent: e });
-        };
-        this.identifier = undefined;
-        this.annotationPrefix = undefined;
-        this.open = false;
-    }
-    render() {
-        return (h("dso-responsive-element", { key: '6e857e08ff134e9172a2e573327fe189020b81be' }, h("dso-expandable", { key: '5f1d08be4e599219765f80bcf9739c31e0154929', id: this.identifier, open: this.open }, this.annotationPrefix && h("span", { key: '93d791e0007ef2813c614bc90bbebba2ca9a4523', class: "dso-annotation-prefix" }, this.annotationPrefix), h("div", { key: '3a7e23272366402f16028177f9804d0fc9d0710e', class: "dso-annotation-header" }, h("slot", { key: '45155503f028eada001a759922ba2a8e06659194', name: "title" }), h("slot", { key: 'be52476bd86e3246021d367e197ff58d83b8a6fa', name: "addons" }), h("button", { key: '1e845841db5106dc264366523f5209ab09de2690', type: "button", class: "dso-tertiary dso-annotation-close-button", onClick: this.toggleHandler }, h("dso-icon", { key: '23aaab761c5870eddfb86a9b07bdb3028918e20e', icon: "times" }), h("span", { key: '03c2ad5956b3fc27cc6c686f0c43521f41276d0e', class: "sr-only" }, "Toelichting sluiten"))), h("div", { key: 'c6e3c0568ff57cf2c2aeb051536c9b4023566a13', class: "dso-annotation-content" }, h("slot", { key: '8adfec5b126fbec015677f872003e17102c839fe' })))));
-    }
-    static get is() { return "dso-annotation-output"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["annotation-output.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["annotation-output.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "identifier": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The annotation-button that toggles this component should have the same identifier."
-                },
-                "attribute": "identifier",
-                "reflect": true
-            },
-            "annotationPrefix": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "This text will be displayed above the annotation-output when opened"
-                },
-                "attribute": "annotation-prefix",
-                "reflect": true
-            },
-            "open": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Set to `true` to show content."
-                },
-                "attribute": "open",
-                "reflect": true,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "dsoClose",
-                "name": "dsoClose",
-                "bubbles": false,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "This event is emitted when the user activates the Annotation Button."
-                },
-                "complexType": {
-                    "original": "AnnotationOutputCloseEvent",
-                    "resolved": "AnnotationOutputCloseEvent",
-                    "references": {
-                        "AnnotationOutputCloseEvent": {
-                            "location": "local",
-                            "path": "/usr/src/app/packages/core/src/components/annotation-output/annotation-output.tsx",
-                            "id": "src/components/annotation-output/annotation-output.tsx::AnnotationOutputCloseEvent"
-                        }
-                    }
-                }
-            }];
-    }
-}
-//# sourceMappingURL=annotation-output.js.map

package/dist/collection/components/annotation-output/annotation-output.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"annotation-output.js","sourceRoot":"","sources":["../../../../src/components/annotation-output/annotation-output.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,KAAK,EAAgB,IAAI,EAAE,MAAM,eAAe,CAAC;AAW5F,MAAM,OAAO,gBAAgB;;QAyBnB,kBAAa,GAAG,CAAC,CAAa,EAAE,EAAE;YACxC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;QAC3C,CAAC,CAAC;;;oBAVK,KAAK;;IAYZ,MAAM;QACJ,OAAO,CACL;YACE,uEAAgB,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACjD,IAAI,CAAC,gBAAgB,IAAI,6DAAM,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,gBAAgB,CAAQ;gBAC5F,4DAAK,KAAK,EAAC,uBAAuB;oBAChC,6DAAM,IAAI,EAAC,OAAO,GAAG;oBACrB,6DAAM,IAAI,EAAC,QAAQ,GAAG;oBACtB,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,0CAA0C,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa;wBAChG,iEAAU,IAAI,EAAC,OAAO,GAAY;wBAClC,6DAAM,KAAK,EAAC,SAAS,0BAA2B,CACzC,CACL;gBACN,4DAAK,KAAK,EAAC,wBAAwB;oBACjC,8DAAQ,CACJ,CACS,CACM,CAC1B,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, ComponentInterface, Event, EventEmitter, Prop } from \"@stencil/core\";\r\n\r\nexport interface AnnotationOutputCloseEvent {\r\n  originalEvent: Event;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-annotation-output\",\r\n  styleUrl: \"annotation-output.scss\",\r\n  // No shadowdom for a11y reasons (aria-controls being set inside another component)\r\n})\r\nexport class AnnotationOutput implements ComponentInterface {\r\n  /**\r\n   * The annotation-button that toggles this component should have the same identifier.\r\n   */\r\n  @Prop({ reflect: true })\r\n  identifier!: string;\r\n\r\n  /**\r\n   * This text will be displayed above the annotation-output when opened\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotationPrefix?: string;\r\n\r\n  /**\r\n   * Set to `true` to show content.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * This event is emitted when the user activates the Annotation Button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClose!: EventEmitter<AnnotationOutputCloseEvent>;\r\n\r\n  private toggleHandler = (e: MouseEvent) => {\r\n    this.dsoClose.emit({ originalEvent: e });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <dso-responsive-element>\r\n        <dso-expandable id={this.identifier} open={this.open}>\r\n          {this.annotationPrefix && <span class=\"dso-annotation-prefix\">{this.annotationPrefix}</span>}\r\n          <div class=\"dso-annotation-header\">\r\n            <slot name=\"title\" />\r\n            <slot name=\"addons\" />\r\n            <button type=\"button\" class=\"dso-tertiary dso-annotation-close-button\" onClick={this.toggleHandler}>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n              <span class=\"sr-only\">Toelichting sluiten</span>\r\n            </button>\r\n          </div>\r\n          <div class=\"dso-annotation-content\">\r\n            <slot />\r\n          </div>\r\n        </dso-expandable>\r\n      </dso-responsive-element>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/components/annotation-button.js

@@ -1,47 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1 } from './icon.js';
-
-const annotationButtonCss = "button {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\na.dso-primary:focus, a.dso-primary:focus-visible,\nbutton.dso-primary:focus,\nbutton.dso-primary:focus-visible,\nlabel.dso-primary:focus,\nlabel.dso-primary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n  outline: 0;\n}\na.dso-primary.extern::after, a.dso-primary.download::after,\nbutton.dso-primary.extern::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.extern::after,\nlabel.dso-primary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-primary:hover,\nbutton.dso-primary:hover,\nlabel.dso-primary:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\na.dso-primary[disabled], a.dso-primary[disabled]:hover,\nbutton.dso-primary[disabled],\nbutton.dso-primary[disabled]:hover,\nlabel.dso-primary[disabled],\nlabel.dso-primary[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\na.dso-primary.dso-small,\nbutton.dso-primary.dso-small,\nlabel.dso-primary.dso-small {\n  line-height: 1rem;\n}\na.dso-primary.dso-small dso-icon,\na.dso-primary.dso-small svg.di, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,\nbutton.dso-primary.dso-small dso-icon,\nbutton.dso-primary.dso-small svg.di,\nbutton.dso-primary.dso-small.extern::after,\nbutton.dso-primary.dso-small.download::after,\nbutton.dso-primary.dso-small.dso-spinner::before,\nlabel.dso-primary.dso-small dso-icon,\nlabel.dso-primary.dso-small svg.di,\nlabel.dso-primary.dso-small.extern::after,\nlabel.dso-primary.dso-small.download::after,\nlabel.dso-primary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-primary.dso-small.dso-spinner-left::before,\nbutton.dso-primary.dso-small.dso-spinner-left::before,\nlabel.dso-primary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary.dso-small.dso-spinner-right::after,\nbutton.dso-primary.dso-small.dso-spinner-right::after,\nlabel.dso-primary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary dso-icon,\na.dso-primary svg.di,\nbutton.dso-primary dso-icon,\nbutton.dso-primary svg.di,\nlabel.dso-primary dso-icon,\nlabel.dso-primary svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\na.dso-primary span + dso-icon,\na.dso-primary span + svg.di,\nbutton.dso-primary span + dso-icon,\nbutton.dso-primary span + svg.di,\nlabel.dso-primary span + dso-icon,\nlabel.dso-primary span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],\nbutton.dso-primary.dso-spinner-left[disabled],\nbutton.dso-primary.dso-spinner-right[disabled],\nlabel.dso-primary.dso-spinner-left[disabled],\nlabel.dso-primary.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\na.dso-primary.dso-spinner-left::before,\nbutton.dso-primary.dso-spinner-left::before,\nlabel.dso-primary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-primary.dso-spinner-right::after,\nbutton.dso-primary.dso-spinner-right::after,\nlabel.dso-primary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-primary.download::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.download::after {\n  background: url(\"./dso-icons.svg#img-download-wit\") no-repeat;\n  background-position: center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-primary.extern::after,\nbutton.dso-primary.extern::after,\nlabel.dso-primary.extern::after {\n  background: url(\"./dso-icons.svg#img-external-link-wit\") no-repeat;\n  background-position: center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\na.dso-secondary:focus, a.dso-secondary:focus-visible,\nbutton.dso-secondary:focus,\nbutton.dso-secondary:focus-visible,\nlabel.dso-secondary:focus,\nlabel.dso-secondary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n  outline: 0;\n}\na.dso-secondary.extern::after, a.dso-secondary.download::after,\nbutton.dso-secondary.extern::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.extern::after,\nlabel.dso-secondary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-secondary:hover,\nbutton.dso-secondary:hover,\nlabel.dso-secondary:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\na.dso-secondary[disabled], a.dso-secondary[disabled]:hover,\nbutton.dso-secondary[disabled],\nbutton.dso-secondary[disabled]:hover,\nlabel.dso-secondary[disabled],\nlabel.dso-secondary[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\na.dso-secondary.dso-small,\nbutton.dso-secondary.dso-small,\nlabel.dso-secondary.dso-small {\n  line-height: 1rem;\n}\na.dso-secondary.dso-small dso-icon,\na.dso-secondary.dso-small svg.di, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di,\nbutton.dso-secondary.dso-small.extern::after,\nbutton.dso-secondary.dso-small.download::after,\nbutton.dso-secondary.dso-small.dso-spinner::before,\nlabel.dso-secondary.dso-small dso-icon,\nlabel.dso-secondary.dso-small svg.di,\nlabel.dso-secondary.dso-small.extern::after,\nlabel.dso-secondary.dso-small.download::after,\nlabel.dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-secondary.dso-small.dso-spinner-left::before,\nbutton.dso-secondary.dso-small.dso-spinner-left::before,\nlabel.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-small.dso-spinner-right::after,\nbutton.dso-secondary.dso-small.dso-spinner-right::after,\nlabel.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary dso-icon,\na.dso-secondary svg.di,\nbutton.dso-secondary dso-icon,\nbutton.dso-secondary svg.di,\nlabel.dso-secondary dso-icon,\nlabel.dso-secondary svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\na.dso-secondary span + dso-icon,\na.dso-secondary span + svg.di,\nbutton.dso-secondary span + dso-icon,\nbutton.dso-secondary span + svg.di,\nlabel.dso-secondary span + dso-icon,\nlabel.dso-secondary span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],\nbutton.dso-secondary.dso-spinner-left[disabled],\nbutton.dso-secondary.dso-spinner-right[disabled],\nlabel.dso-secondary.dso-spinner-left[disabled],\nlabel.dso-secondary.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\na.dso-secondary.dso-spinner-left::before,\nbutton.dso-secondary.dso-spinner-left::before,\nlabel.dso-secondary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-spinner-right::after,\nbutton.dso-secondary.dso-spinner-right::after,\nlabel.dso-secondary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.download::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.download::after {\n  background: url(\"./dso-icons.svg#img-download\") no-repeat;\n  background-position: center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary.download:hover::after,\nbutton.dso-secondary.download:hover::after,\nlabel.dso-secondary.download:hover::after {\n  background-image: url(\"./dso-icons.svg#img-download-wit\");\n}\na.dso-secondary.download[disabled]::after,\nbutton.dso-secondary.download[disabled]::after,\nlabel.dso-secondary.download[disabled]::after {\n  background-image: url(\"./dso-icons.svg#img-download-grasgroen-40\");\n}\na.dso-secondary.extern::after,\nbutton.dso-secondary.extern::after,\nlabel.dso-secondary.extern::after {\n  background: url(\"./dso-icons.svg#img-external-link\") no-repeat;\n  background-position: center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary.extern:hover::after,\nbutton.dso-secondary.extern:hover::after,\nlabel.dso-secondary.extern:hover::after {\n  background-image: url(\"./dso-icons.svg#img-external-link-wit\");\n}\na.dso-secondary.extern[disabled]::after,\nbutton.dso-secondary.extern[disabled]::after,\nlabel.dso-secondary.extern[disabled]::after {\n  background-image: url(\"./dso-icons.svg#img-external-link-grasgroen-40\");\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\na.dso-tertiary:focus, a.dso-tertiary:focus-visible,\nbutton.dso-tertiary:focus,\nbutton.dso-tertiary:focus-visible,\nlabel.dso-tertiary:focus,\nlabel.dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-tertiary:active,\nbutton.dso-tertiary:active,\nlabel.dso-tertiary:active {\n  outline: 0;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-tertiary[disabled],\nbutton.dso-tertiary[disabled],\nlabel.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\na.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,\nbutton.dso-tertiary[disabled].dso-spinner-left,\nbutton.dso-tertiary[disabled].dso-spinner-right,\nlabel.dso-tertiary[disabled].dso-spinner-left,\nlabel.dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\na.dso-tertiary:not([disabled]):hover,\nbutton.dso-tertiary:not([disabled]):hover,\nlabel.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\na.dso-tertiary:not([disabled]):active,\nbutton.dso-tertiary:not([disabled]):active,\nlabel.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\na.dso-tertiary.dso-align,\nbutton.dso-tertiary.dso-align,\nlabel.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\na.dso-tertiary.dso-truncate,\nbutton.dso-tertiary.dso-truncate,\nlabel.dso-tertiary.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\na.dso-tertiary.dso-spinner-left::before,\nbutton.dso-tertiary.dso-spinner-left::before,\nlabel.dso-tertiary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-tertiary.dso-spinner-right::after,\nbutton.dso-tertiary.dso-spinner-right::after,\nlabel.dso-tertiary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-tertiary dso-icon + span:not(.sr-only),\na.dso-tertiary svg.di + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + dso-icon,\na.dso-tertiary span:not(.sr-only) + svg.di,\nbutton.dso-tertiary dso-icon + span:not(.sr-only),\nbutton.dso-tertiary svg.di + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + dso-icon,\nbutton.dso-tertiary span:not(.sr-only) + svg.di,\nlabel.dso-tertiary dso-icon + span:not(.sr-only),\nlabel.dso-tertiary svg.di + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + dso-icon,\nlabel.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n}\na.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nbutton.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nlabel.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-inline-start: 4px;\n}\na.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\na.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nbutton.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nbutton.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nlabel.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nlabel.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\na.dso-tertiary dso-icon,\na.dso-tertiary svg.di,\na.dso-tertiary span,\nbutton.dso-tertiary dso-icon,\nbutton.dso-tertiary svg.di,\nbutton.dso-tertiary span,\nlabel.dso-tertiary dso-icon,\nlabel.dso-tertiary svg.di,\nlabel.dso-tertiary span {\n  vertical-align: middle;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n  position: relative;\n  inset-block-start: -2px;\n}\na.dso-tertiary.download::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.download::after {\n  background: url(\"./dso-icons.svg#img-download\") no-repeat;\n  background-position: center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-tertiary.download[disabled]::after,\nbutton.dso-tertiary.download[disabled]::after,\nlabel.dso-tertiary.download[disabled]::after {\n  background-image: url(\"./dso-icons.svg#img-download-grasgroen-40\");\n}\na.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,\nbutton.dso-tertiary.download:not([disabled]):hover::after,\nbutton.dso-tertiary.download:not([disabled]):active::after,\nlabel.dso-tertiary.download:not([disabled]):hover::after,\nlabel.dso-tertiary.download:not([disabled]):active::after {\n  background-image: url(\"./dso-icons.svg#img-download-scampi\");\n}\na.dso-tertiary.extern::after,\nbutton.dso-tertiary.extern::after,\nlabel.dso-tertiary.extern::after {\n  background: url(\"./dso-icons.svg#img-external-link\") no-repeat;\n  background-position: center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-tertiary.extern[disabled]::after,\nbutton.dso-tertiary.extern[disabled]::after,\nlabel.dso-tertiary.extern[disabled]::after {\n  background-image: url(\"./dso-icons.svg#img-external-link-grasgroen-40\");\n}\na.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,\nbutton.dso-tertiary.extern:not([disabled]):hover::after,\nbutton.dso-tertiary.extern:not([disabled]):active::after,\nlabel.dso-tertiary.extern:not([disabled]):hover::after,\nlabel.dso-tertiary.extern:not([disabled]):active::after {\n  background-image: url(\"./dso-icons.svg#img-external-link-scampi\");\n}\n\na.dso-primary {\n  text-decoration: none;\n}\na.dso-primary, a.dso-primary:visited {\n  color: #fff;\n}\na.dso-secondary {\n  text-decoration: none;\n}\na.dso-secondary, a.dso-secondary:visited {\n  color: #39870c;\n}\na.dso-secondary:hover, a.dso-secondary:visited:hover {\n  color: #39870c;\n}\na.dso-tertiary {\n  text-decoration: none;\n}\na.dso-tertiary, a.dso-tertiary:visited {\n  color: #39870c;\n}\n\n.dso-primary + .dso-primary,\n.dso-primary + .dso-secondary,\n.dso-primary + .dso-tertiary,\n.dso-secondary + .dso-primary,\n.dso-secondary + .dso-secondary,\n.dso-secondary + .dso-tertiary,\n.dso-tertiary + .dso-primary,\n.dso-tertiary + .dso-secondary,\n.dso-tertiary + .dso-tertiary {\n  margin-inline-start: 16px;\n}\n\ndso-annotation-button {\n  display: block;\n}";
-const DsoAnnotationButtonStyle0 = annotationButtonCss;
-
-const AnnotationButton = /*@__PURE__*/ proxyCustomElement(class AnnotationButton extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.dsoClick = createEvent(this, "dsoClick", 3);
-        this.handleClick = (e) => {
-            this.dsoClick.emit({ originalEvent: e, open: !this.open });
-        };
-        this.identifier = undefined;
-        this.open = false;
-    }
-    render() {
-        return (h("button", { key: 'd1e416ca60447411acdb4617bb35e85506153dec', type: "button", class: "dso-tertiary", "aria-controls": this.identifier, "aria-expanded": this.open.toString(), onClick: this.handleClick }, h("dso-icon", { key: '21d0606b44ea74b854b9afe115fe8ec84e03c721', icon: "label" }), h("span", { key: '3eda0aef17520689883d78d9fd9aa7ccec435eb9', class: "sr-only" }, "Toelichting bekijken")));
-    }
-    static get style() { return DsoAnnotationButtonStyle0; }
-}, [0, "dso-annotation-button", {
-        "identifier": [1],
-        "open": [4]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dso-annotation-button", "dso-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dso-annotation-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AnnotationButton);
-            }
-            break;
-        case "dso-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { AnnotationButton as A, defineCustomElement as d };
-
-//# sourceMappingURL=annotation-button.js.map

package/dist/components/annotation-button.js.map

@@ -1 +0,0 @@
-{"file":"annotation-button.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,+w2BAA+w2B,CAAC;AAC5y2B,kCAAe,mBAAmB;;MCWrB,gBAAgB;;;;;QAmBnB,gBAAW,GAAG,CAAC,CAAa;YAClC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;SAC5D,CAAC;;oBAVK,KAAK;;IAYZ,MAAM;QACJ,QACE,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,mBACL,IAAI,CAAC,UAAU,mBACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EACnC,OAAO,EAAE,IAAI,CAAC,WAAW,IAEzB,iEAAU,IAAI,EAAC,OAAO,GAAY,EAClC,6DAAM,KAAK,EAAC,SAAS,2BAA4B,CAC1C,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/annotation-button/annotation-button.scss?tag=dso-annotation-button","src/components/annotation-button/annotation-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/button/button\";\r\n\r\ndso-annotation-button {\r\n  display: block;\r\n}\r\n","import { h, Component, ComponentInterface, Event, Prop, EventEmitter } from \"@stencil/core\";\r\n\r\nexport interface AnnotationButtonClickEvent {\r\n  originalEvent: Event;\r\n  open: boolean;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-annotation-button\",\r\n  styleUrl: \"annotation-button.scss\",\r\n  // No shadowdom for a11y reasons (aria-controls pointing to element inside another component)\r\n})\r\nexport class AnnotationButton implements ComponentInterface {\r\n  /**\r\n   * To link the Annotation Button with `aria-controls` to a different element, most likely an Annotation Output.\r\n   */\r\n  @Prop()\r\n  identifier!: string | undefined;\r\n\r\n  /**\r\n   * Set to true when the annotation is open.\r\n   */\r\n  @Prop()\r\n  open = false;\r\n\r\n  /**\r\n   * Emitted when user activates the button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClick!: EventEmitter<AnnotationButtonClickEvent>;\r\n\r\n  private handleClick = (e: MouseEvent) => {\r\n    this.dsoClick.emit({ originalEvent: e, open: !this.open });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <button\r\n        type=\"button\"\r\n        class=\"dso-tertiary\"\r\n        aria-controls={this.identifier}\r\n        aria-expanded={this.open.toString()}\r\n        onClick={this.handleClick}\r\n      >\r\n        <dso-icon icon=\"label\"></dso-icon>\r\n        <span class=\"sr-only\">Toelichting bekijken</span>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/annotation-output.js

@@ -1,61 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './expandable.js';
-import { d as defineCustomElement$2 } from './icon.js';
-import { d as defineCustomElement$1 } from './responsive-element.js';
-
-const annotationOutputCss = "dso-annotation-output{display:block}.dso-annotation-header{align-items:center;background-color:#f2f2f2;clear:both;display:flex;margin-block-end:2px;margin-block-start:8px;padding-inline-start:16px;padding-inline-end:8px;padding-block-start:8px;padding-block-end:8px}.dso-annotation-header>[slot=title]{color:#000;font-size:1.25rem;margin-block-end:0;margin-block-start:0}.dso-annotation-header>:nth-child(2){margin-inline-start:auto}dso-responsive-element[small] .dso-annotation-header,dso-responsive-element[medium] .dso-annotation-header{display:grid;row-gap:8px}dso-responsive-element[small] .dso-annotation-header *[slot=title],dso-responsive-element[medium] .dso-annotation-header *[slot=title]{grid-row:1;grid-column:1}dso-responsive-element[small] .dso-annotation-header *[slot=addons],dso-responsive-element[medium] .dso-annotation-header *[slot=addons]{grid-row:2;grid-column:1;margin-inline-start:initial}dso-responsive-element[small] .dso-annotation-header .dso-annotation-close-button,dso-responsive-element[medium] .dso-annotation-header .dso-annotation-close-button{grid-row:1;grid-column:2;margin-inline-start:8px;text-align:end}.dso-annotation-content{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f2f2f2;border-color:#f2f2f2;color:#191919;padding-inline-start:16px;padding-inline-end:8px;padding-block-start:8px;padding-block-end:8px}.dso-annotation-content a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}.dso-annotation-content a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}.dso-annotation-content a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}.dso-annotation-content a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}.dso-annotation-close-button{margin-inline-start:32px}.dso-annotation-prefix{font-style:italic}";
-const DsoAnnotationOutputStyle0 = annotationOutputCss;
-
-const AnnotationOutput = /*@__PURE__*/ proxyCustomElement(class AnnotationOutput extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.dsoClose = createEvent(this, "dsoClose", 3);
-        this.toggleHandler = (e) => {
-            this.dsoClose.emit({ originalEvent: e });
-        };
-        this.identifier = undefined;
-        this.annotationPrefix = undefined;
-        this.open = false;
-    }
-    render() {
-        return (h("dso-responsive-element", { key: '6e857e08ff134e9172a2e573327fe189020b81be' }, h("dso-expandable", { key: '5f1d08be4e599219765f80bcf9739c31e0154929', id: this.identifier, open: this.open }, this.annotationPrefix && h("span", { key: '93d791e0007ef2813c614bc90bbebba2ca9a4523', class: "dso-annotation-prefix" }, this.annotationPrefix), h("div", { key: '3a7e23272366402f16028177f9804d0fc9d0710e', class: "dso-annotation-header" }, h("slot", { key: '45155503f028eada001a759922ba2a8e06659194', name: "title" }), h("slot", { key: 'be52476bd86e3246021d367e197ff58d83b8a6fa', name: "addons" }), h("button", { key: '1e845841db5106dc264366523f5209ab09de2690', type: "button", class: "dso-tertiary dso-annotation-close-button", onClick: this.toggleHandler }, h("dso-icon", { key: '23aaab761c5870eddfb86a9b07bdb3028918e20e', icon: "times" }), h("span", { key: '03c2ad5956b3fc27cc6c686f0c43521f41276d0e', class: "sr-only" }, "Toelichting sluiten"))), h("div", { key: 'c6e3c0568ff57cf2c2aeb051536c9b4023566a13', class: "dso-annotation-content" }, h("slot", { key: '8adfec5b126fbec015677f872003e17102c839fe' })))));
-    }
-    static get style() { return DsoAnnotationOutputStyle0; }
-}, [4, "dso-annotation-output", {
-        "identifier": [513],
-        "annotationPrefix": [513, "annotation-prefix"],
-        "open": [516]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dso-annotation-output", "dso-expandable", "dso-icon", "dso-responsive-element"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dso-annotation-output":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AnnotationOutput);
-            }
-            break;
-        case "dso-expandable":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "dso-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "dso-responsive-element":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { AnnotationOutput as A, defineCustomElement as d };
-
-//# sourceMappingURL=annotation-output.js.map

package/dist/components/annotation-output.js.map

@@ -1 +0,0 @@
-{"file":"annotation-output.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,ukEAAukE,CAAC;AACpmE,kCAAe,mBAAmB;;MCUrB,gBAAgB;;;;;QAyBnB,kBAAa,GAAG,CAAC,CAAa;YACpC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;SAC1C,CAAC;;;oBAVK,KAAK;;IAYZ,MAAM;QACJ,QACE,iFACE,uEAAgB,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IACjD,IAAI,CAAC,gBAAgB,IAAI,6DAAM,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,gBAAgB,CAAQ,EAC5F,4DAAK,KAAK,EAAC,uBAAuB,IAChC,6DAAM,IAAI,EAAC,OAAO,GAAG,EACrB,6DAAM,IAAI,EAAC,QAAQ,GAAG,EACtB,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,0CAA0C,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IAChG,iEAAU,IAAI,EAAC,OAAO,GAAY,EAClC,6DAAM,KAAK,EAAC,SAAS,0BAA2B,CACzC,CACL,EACN,4DAAK,KAAK,EAAC,wBAAwB,IACjC,8DAAQ,CACJ,CACS,CACM,EACzB;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/annotation-output/annotation-output.scss?tag=dso-annotation-output","src/components/annotation-output/annotation-output.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\ndso-annotation-output {\r\n  display: block;\r\n}\r\n\r\n.dso-annotation-header {\r\n  align-items: center;\r\n  background-color: colors.$grijs-5;\r\n  clear: both;\r\n  display: flex;\r\n  margin-block-end: 2px;\r\n  margin-block-start: units.$u1;\r\n  padding-inline-start: units.$u2;\r\n  padding-inline-end: units.$u1;\r\n  padding-block-start: units.$u1;\r\n  padding-block-end: units.$u1;\r\n\r\n  > [slot=\"title\"] {\r\n    color: colors.$zwart;\r\n    font-size: 1.25rem;\r\n    margin-block-end: 0;\r\n    margin-block-start: 0;\r\n  }\r\n\r\n  > :nth-child(2) {\r\n    margin-inline-start: auto;\r\n  }\r\n}\r\n\r\ndso-responsive-element[small],\r\ndso-responsive-element[medium] {\r\n  .dso-annotation-header {\r\n    display: grid;\r\n    row-gap: units.$u1;\r\n\r\n    *[slot=\"title\"] {\r\n      grid-row: 1;\r\n      grid-column: 1;\r\n    }\r\n\r\n    *[slot=\"addons\"] {\r\n      grid-row: 2;\r\n      grid-column: 1;\r\n      margin-inline-start: initial;\r\n    }\r\n\r\n    .dso-annotation-close-button {\r\n      grid-row: 1;\r\n      grid-column: 2;\r\n      margin-inline-start: units.$u1;\r\n      text-align: end;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-annotation-content {\r\n  @include set-colors.apply(colors.$grijs-5);\r\n\r\n  padding-inline-start: units.$u2;\r\n  padding-inline-end: units.$u1;\r\n  padding-block-start: units.$u1;\r\n  padding-block-end: units.$u1;\r\n}\r\n\r\n.dso-annotation-close-button {\r\n  margin-inline-start: units.$u4;\r\n}\r\n\r\n.dso-annotation-prefix {\r\n  font-style: italic;\r\n}\r\n","import { h, Component, ComponentInterface, Event, EventEmitter, Prop } from \"@stencil/core\";\r\n\r\nexport interface AnnotationOutputCloseEvent {\r\n  originalEvent: Event;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-annotation-output\",\r\n  styleUrl: \"annotation-output.scss\",\r\n  // No shadowdom for a11y reasons (aria-controls being set inside another component)\r\n})\r\nexport class AnnotationOutput implements ComponentInterface {\r\n  /**\r\n   * The annotation-button that toggles this component should have the same identifier.\r\n   */\r\n  @Prop({ reflect: true })\r\n  identifier!: string;\r\n\r\n  /**\r\n   * This text will be displayed above the annotation-output when opened\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotationPrefix?: string;\r\n\r\n  /**\r\n   * Set to `true` to show content.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * This event is emitted when the user activates the Annotation Button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClose!: EventEmitter<AnnotationOutputCloseEvent>;\r\n\r\n  private toggleHandler = (e: MouseEvent) => {\r\n    this.dsoClose.emit({ originalEvent: e });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <dso-responsive-element>\r\n        <dso-expandable id={this.identifier} open={this.open}>\r\n          {this.annotationPrefix && <span class=\"dso-annotation-prefix\">{this.annotationPrefix}</span>}\r\n          <div class=\"dso-annotation-header\">\r\n            <slot name=\"title\" />\r\n            <slot name=\"addons\" />\r\n            <button type=\"button\" class=\"dso-tertiary dso-annotation-close-button\" onClick={this.toggleHandler}>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n              <span class=\"sr-only\">Toelichting sluiten</span>\r\n            </button>\r\n          </div>\r\n          <div class=\"dso-annotation-content\">\r\n            <slot />\r\n          </div>\r\n        </dso-expandable>\r\n      </dso-responsive-element>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/dso-annotation-button.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DsoAnnotationButton extends Components.DsoAnnotationButton, HTMLElement {}
-export const DsoAnnotationButton: {
-    prototype: DsoAnnotationButton;
-    new (): DsoAnnotationButton;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/dso-annotation-button.js

@@ -1,8 +0,0 @@
-import { A as AnnotationButton, d as defineCustomElement$1 } from './annotation-button.js';
-
-const DsoAnnotationButton = AnnotationButton;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsoAnnotationButton, defineCustomElement };
-
-//# sourceMappingURL=dso-annotation-button.js.map

package/dist/components/dso-annotation-button.js.map

@@ -1 +0,0 @@
-{"file":"dso-annotation-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/dso-annotation-output.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DsoAnnotationOutput extends Components.DsoAnnotationOutput, HTMLElement {}
-export const DsoAnnotationOutput: {
-    prototype: DsoAnnotationOutput;
-    new (): DsoAnnotationOutput;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/dso-annotation-output.js

@@ -1,8 +0,0 @@
-import { A as AnnotationOutput, d as defineCustomElement$1 } from './annotation-output.js';
-
-const DsoAnnotationOutput = AnnotationOutput;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsoAnnotationOutput, defineCustomElement };
-
-//# sourceMappingURL=dso-annotation-output.js.map

package/dist/components/dso-annotation-output.js.map

@@ -1 +0,0 @@
-{"file":"dso-annotation-output.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}