@dso-toolkit/core 62.30.1 → 63.0.0

package/dist/cjs/dso-renvooi_2.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dso-renvooi.dso-slide-toggle.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,u/CAAu/C,CAAC;AAC3gD,yBAAe,UAAU;;MCWZ,OAAO;;;;;IAOlB,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEvB,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,EAAE;YACvC,OAAO,KAAK,CAAC;SACd;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACxB,QACEA,8BACG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAC1BA,8BACEA,yBAAa,KAAK,EAAE,CAAC,GAAI,EACxB,CAAC,GAAG,MAAM,GAAG,CAAC,GAAG,IAAI,GAAG,EAAE,CAC1B,CACJ,CAAC,CACD,EACH;SACH;QAED,IAAI,YAAY,IAAI,KAAK,EAAE;YACzB,OAAOA,qBAAM,KAAK,CAAC,UAAU,CAAO,CAAC;SACtC;QAED,IAAI,YAAY,IAAI,KAAK,EAAE;YACzB,OAAOA,qBAAM,KAAK,CAAC,UAAU,CAAO,CAAC;SACtC;QAED,QACEA,8BACEA,qBAAM,KAAK,CAAC,GAAG,CAAO,OAACA,qBAAM,KAAK,CAAC,KAAK,CAAO,CAC9C,EACH;KACH;;;;ACpDH,MAAM,cAAc,GAAG,4vBAA4vB,CAAC;AACpxB,6BAAe,cAAc;;MCQhB,WAAW;;;;uBAQZ,KAAK;wBAMJ,KAAK;;;;0BAqBHC,KAAE,EAAE;;IAQT,YAAY,CAAC,CAAQ;QAC3B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,aAAa,EAAE,CAAC;YAChB,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;SACvB,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;KAC9D;IAED,MAAM;QACJ,QACED,8BACEA,mFACE,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,YAAY,kBACJ,EAAE,GAAG,IAAI,CAAC,OAAO,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,KAC/B,IAAI,CAAC,eAAe,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,IAClE,IAAI,CAAC,YAAY,GAAG,EAAE,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAEtEA,kEAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,IAChFA,gEAAG,IAAI,EAAC,MAAM,eAAW,SAAS,IAChCA,mEAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,EAAE,EAAC,IAAI,GAAG,EAC3DA,qEAAQ,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CAC1C,CACA,CACC,EACR,IAAI,CAAC,eAAe,KACnBA,oEAAO,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7BA,oEAAQ,CACF,CACT,CACA,EACH;KACH;;;;;;;;","names":["h","v4"],"sources":["src/components/renvooi/renvooi.scss?tag=dso-renvooi&encapsulation=shadow","src/components/renvooi/renvooi.tsx","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n\r\n:host {\r\n  display: inline;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n","import { Component, ComponentInterface, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\n/**\r\n * Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n */\r\n@Component({\r\n  tag: \"dso-renvooi\",\r\n  styleUrl: \"renvooi.scss\",\r\n  shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n  /**\r\n   * The renvooi value to render.\r\n   */\r\n  @Prop()\r\n  value?: RenvooiValue | RenvooiValue[];\r\n\r\n  render() {\r\n    const { value } = this;\r\n\r\n    if (typeof value === \"string\" || !value) {\r\n      return value;\r\n    }\r\n\r\n    if (Array.isArray(value)) {\r\n      return (\r\n        <>\r\n          {value.map((v, i, { length }) => (\r\n            <>\r\n              <dso-renvooi value={v} />\r\n              {i < length - 1 ? \", \" : \"\"}\r\n            </>\r\n          ))}\r\n        </>\r\n      );\r\n    }\r\n\r\n    if (\"toegevoegd\" in value) {\r\n      return <ins>{value.toegevoegd}</ins>;\r\n    }\r\n\r\n    if (\"verwijderd\" in value) {\r\n      return <del>{value.verwijderd}</del>;\r\n    }\r\n\r\n    return (\r\n      <>\r\n        <del>{value.was}</del> <ins>{value.wordt}</ins>\r\n      </>\r\n    );\r\n  }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\nbutton.dso-slider {\r\n  border: 0;\r\n  padding: 0;\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid colors.$grijs-80;\r\n    outline-offset: 1px;\r\n  }\r\n\r\n  svg {\r\n    rect {\r\n      fill: colors.$grijs-40;\r\n      transition: fill 0.25s;\r\n    }\r\n\r\n    circle {\r\n      @include utilities.transition(transform);\r\n\r\n      transform: translateX(10px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen;\r\n    }\r\n\r\n    circle {\r\n      transform: translateX(30px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[disabled] svg {\r\n    rect {\r\n      fill: colors.$grijs-20;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n\r\n  &[disabled][aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen-40;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-slider {\r\n  border-radius: units.$u3;\r\n  display: inline-flex;\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Event, Fragment, Prop, EventEmitter, Element, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-slide-toggle\",\r\n  styleUrl: \"slide-toggle.scss\",\r\n  shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoSlideToggleElement;\r\n\r\n  /**\r\n   * Set to true if Slide Toggle is checked.\r\n   */\r\n  @Prop()\r\n  checked = false;\r\n\r\n  /**\r\n   * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n   */\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  /**\r\n   * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n   */\r\n  @Prop()\r\n  accessibleLabel?: string;\r\n\r\n  /**\r\n   * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n   */\r\n  @Prop()\r\n  labelledbyId?: string;\r\n\r\n  @State()\r\n  hasVisibleLabel?: boolean;\r\n\r\n  /**\r\n   * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n   */\r\n  @Prop()\r\n  identifier = v4();\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event({ composed: false })\r\n  dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n  private handleSwitch(e: Event): void {\r\n    this.dsoActiveChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.hasVisibleLabel = this.host.querySelector(\"*\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          id={this.identifier}\r\n          role=\"switch\"\r\n          class=\"dso-slider\"\r\n          aria-checked={\"\" + this.checked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => this.handleSwitch(e)}\r\n          {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n          {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n              <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n              <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n            </g>\r\n          </svg>\r\n        </button>\r\n        {this.hasVisibleLabel && (\r\n          <label htmlFor={this.identifier}>\r\n            <slot />\r\n          </label>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1,674 +0,0 @@
-button {
-  -webkit-appearance: button;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-}
-button[disabled] {
-  cursor: default;
-}
-button::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-a.dso-primary,
-button.dso-primary,
-label.dso-primary {
-  display: inline-block;
-  font-size: 1em;
-  font-weight: 500;
-  margin-block-end: 0;
-  text-decoration: none;
-  touch-action: manipulation;
-  text-align: start;
-  user-select: none;
-  vertical-align: middle;
-  background-color: #39870c;
-  border-color: #39870c;
-  color: #fff;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-inline-size: 56px;
-  padding-block: 11px;
-  padding-inline: 15px;
-}
-a.dso-primary:focus, a.dso-primary:focus-visible,
-button.dso-primary:focus,
-button.dso-primary:focus-visible,
-label.dso-primary:focus,
-label.dso-primary:focus-visible {
-  outline-offset: 2px;
-}
-a.dso-primary:active,
-button.dso-primary:active,
-label.dso-primary:active {
-  outline: 0;
-}
-a.dso-primary.extern::after, a.dso-primary.download::after,
-button.dso-primary.extern::after,
-button.dso-primary.download::after,
-label.dso-primary.extern::after,
-label.dso-primary.download::after {
-  content: "";
-  display: inline-block;
-  margin-inline-start: 8px;
-}
-a.dso-primary:hover,
-button.dso-primary:hover,
-label.dso-primary:hover {
-  background-color: #275937;
-  border-color: #275937;
-  color: #fff;
-}
-a.dso-primary:active,
-button.dso-primary:active,
-label.dso-primary:active {
-  background-color: #173521;
-  border-color: #173521;
-  color: #fff;
-}
-a.dso-primary[disabled], a.dso-primary[disabled]:hover,
-button.dso-primary[disabled],
-button.dso-primary[disabled]:hover,
-label.dso-primary[disabled],
-label.dso-primary[disabled]:hover {
-  background-color: #afcf9d;
-  border-color: #afcf9d;
-  color: #fff;
-}
-a.dso-primary.dso-small,
-button.dso-primary.dso-small,
-label.dso-primary.dso-small {
-  line-height: 1rem;
-}
-a.dso-primary.dso-small dso-icon,
-a.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,
-button.dso-primary.dso-small dso-icon,
-button.dso-primary.dso-small svg.di,
-button.dso-primary.dso-small.extern::after,
-button.dso-primary.dso-small.download::after,
-button.dso-primary.dso-small.dso-spinner::before,
-label.dso-primary.dso-small dso-icon,
-label.dso-primary.dso-small svg.di,
-label.dso-primary.dso-small.extern::after,
-label.dso-primary.dso-small.download::after,
-label.dso-primary.dso-small.dso-spinner::before {
-  margin-block-end: -4px;
-  margin-block-start: -4px;
-}
-a.dso-primary.dso-small.dso-spinner-left::before,
-button.dso-primary.dso-small.dso-spinner-left::before,
-label.dso-primary.dso-small.dso-spinner-left::before {
-  block-size: 16px;
-  inline-size: 16px;
-}
-a.dso-primary.dso-small.dso-spinner-right::after,
-button.dso-primary.dso-small.dso-spinner-right::after,
-label.dso-primary.dso-small.dso-spinner-right::after {
-  block-size: 16px;
-  inline-size: 16px;
-}
-a.dso-primary dso-icon,
-a.dso-primary svg.di,
-button.dso-primary dso-icon,
-button.dso-primary svg.di,
-label.dso-primary dso-icon,
-label.dso-primary svg.di {
-  margin-inline-start: -8px;
-  margin-inline-end: 8px;
-}
-a.dso-primary span + dso-icon,
-a.dso-primary span + svg.di,
-button.dso-primary span + dso-icon,
-button.dso-primary span + svg.di,
-label.dso-primary span + dso-icon,
-label.dso-primary span + svg.di {
-  margin-inline-start: 8px;
-  margin-inline-end: -8px;
-}
-a.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],
-button.dso-primary.dso-spinner-left[disabled],
-button.dso-primary.dso-spinner-right[disabled],
-label.dso-primary.dso-spinner-left[disabled],
-label.dso-primary.dso-spinner-right[disabled] {
-  background-color: #39870c;
-  border-color: #39870c;
-  color: #fff;
-}
-a.dso-primary.dso-spinner-left::before,
-button.dso-primary.dso-spinner-left::before,
-label.dso-primary.dso-spinner-left::before {
-  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");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-end: 8px;
-}
-a.dso-primary.dso-spinner-right::after,
-button.dso-primary.dso-spinner-right::after,
-label.dso-primary.dso-spinner-right::after {
-  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");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-start: 8px;
-}
-a.dso-primary.download::after,
-button.dso-primary.download::after,
-label.dso-primary.download::after {
-  background: url("./dso-icons.svg#img-download-wit") no-repeat;
-  background-position: center;
-  background-size: cover;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-}
-a.dso-primary.extern::after,
-button.dso-primary.extern::after,
-label.dso-primary.extern::after {
-  background: url("./dso-icons.svg#img-external-link-wit") no-repeat;
-  background-position: center;
-  background-size: cover;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-}
-a.dso-secondary,
-button.dso-secondary,
-label.dso-secondary {
-  display: inline-block;
-  font-size: 1em;
-  font-weight: 500;
-  margin-block-end: 0;
-  text-decoration: none;
-  touch-action: manipulation;
-  text-align: start;
-  user-select: none;
-  vertical-align: middle;
-  background-color: #fff;
-  border-color: #39870c;
-  color: #39870c;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-inline-size: 56px;
-  padding-block: 11px;
-  padding-inline: 15px;
-}
-a.dso-secondary:focus, a.dso-secondary:focus-visible,
-button.dso-secondary:focus,
-button.dso-secondary:focus-visible,
-label.dso-secondary:focus,
-label.dso-secondary:focus-visible {
-  outline-offset: 2px;
-}
-a.dso-secondary:active,
-button.dso-secondary:active,
-label.dso-secondary:active {
-  outline: 0;
-}
-a.dso-secondary.extern::after, a.dso-secondary.download::after,
-button.dso-secondary.extern::after,
-button.dso-secondary.download::after,
-label.dso-secondary.extern::after,
-label.dso-secondary.download::after {
-  content: "";
-  display: inline-block;
-  margin-inline-start: 8px;
-}
-a.dso-secondary:hover,
-button.dso-secondary:hover,
-label.dso-secondary:hover {
-  background-color: #d7e7ce;
-  border-color: #39870c;
-  color: #39870c;
-}
-a.dso-secondary:active,
-button.dso-secondary:active,
-label.dso-secondary:active {
-  background-color: #39870c;
-  border-color: #39870c;
-  color: #fff;
-}
-a.dso-secondary[disabled], a.dso-secondary[disabled]:hover,
-button.dso-secondary[disabled],
-button.dso-secondary[disabled]:hover,
-label.dso-secondary[disabled],
-label.dso-secondary[disabled]:hover {
-  background-color: #fff;
-  border-color: #afcf9d;
-  color: #afcf9d;
-}
-a.dso-secondary.dso-small,
-button.dso-secondary.dso-small,
-label.dso-secondary.dso-small {
-  line-height: 1rem;
-}
-a.dso-secondary.dso-small dso-icon,
-a.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,
-button.dso-secondary.dso-small dso-icon,
-button.dso-secondary.dso-small svg.di,
-button.dso-secondary.dso-small.extern::after,
-button.dso-secondary.dso-small.download::after,
-button.dso-secondary.dso-small.dso-spinner::before,
-label.dso-secondary.dso-small dso-icon,
-label.dso-secondary.dso-small svg.di,
-label.dso-secondary.dso-small.extern::after,
-label.dso-secondary.dso-small.download::after,
-label.dso-secondary.dso-small.dso-spinner::before {
-  margin-block-end: -4px;
-  margin-block-start: -4px;
-}
-a.dso-secondary.dso-small.dso-spinner-left::before,
-button.dso-secondary.dso-small.dso-spinner-left::before,
-label.dso-secondary.dso-small.dso-spinner-left::before {
-  block-size: 16px;
-  inline-size: 16px;
-}
-a.dso-secondary.dso-small.dso-spinner-right::after,
-button.dso-secondary.dso-small.dso-spinner-right::after,
-label.dso-secondary.dso-small.dso-spinner-right::after {
-  block-size: 16px;
-  inline-size: 16px;
-}
-a.dso-secondary dso-icon,
-a.dso-secondary svg.di,
-button.dso-secondary dso-icon,
-button.dso-secondary svg.di,
-label.dso-secondary dso-icon,
-label.dso-secondary svg.di {
-  margin-inline-start: -8px;
-  margin-inline-end: 8px;
-}
-a.dso-secondary span + dso-icon,
-a.dso-secondary span + svg.di,
-button.dso-secondary span + dso-icon,
-button.dso-secondary span + svg.di,
-label.dso-secondary span + dso-icon,
-label.dso-secondary span + svg.di {
-  margin-inline-start: 8px;
-  margin-inline-end: -8px;
-}
-a.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],
-button.dso-secondary.dso-spinner-left[disabled],
-button.dso-secondary.dso-spinner-right[disabled],
-label.dso-secondary.dso-spinner-left[disabled],
-label.dso-secondary.dso-spinner-right[disabled] {
-  background-color: #fff;
-  border-color: #39870c;
-  color: #39870c;
-}
-a.dso-secondary.dso-spinner-left::before,
-button.dso-secondary.dso-spinner-left::before,
-label.dso-secondary.dso-spinner-left::before {
-  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");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-end: 8px;
-}
-a.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
-button.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
-label.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
-  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");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-end: 8px;
-}
-a.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,
-button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,
-label.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {
-  block-size: 16px;
-  inline-size: 16px;
-}
-a.dso-secondary.dso-spinner-right::after,
-button.dso-secondary.dso-spinner-right::after,
-label.dso-secondary.dso-spinner-right::after {
-  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");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-start: 8px;
-}
-a.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
-button.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
-label.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
-  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");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-start: 8px;
-}
-a.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,
-button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,
-label.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {
-  block-size: 16px;
-  inline-size: 16px;
-}
-a.dso-secondary.download::after,
-button.dso-secondary.download::after,
-label.dso-secondary.download::after {
-  background: url("./dso-icons.svg#img-download") no-repeat;
-  background-position: center;
-  background-size: cover;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-}
-a.dso-secondary.download:hover::after,
-button.dso-secondary.download:hover::after,
-label.dso-secondary.download:hover::after {
-  background-image: url("./dso-icons.svg#img-download-wit");
-}
-a.dso-secondary.download[disabled]::after,
-button.dso-secondary.download[disabled]::after,
-label.dso-secondary.download[disabled]::after {
-  background-image: url("./dso-icons.svg#img-download-grasgroen-40");
-}
-a.dso-secondary.extern::after,
-button.dso-secondary.extern::after,
-label.dso-secondary.extern::after {
-  background: url("./dso-icons.svg#img-external-link") no-repeat;
-  background-position: center;
-  background-size: cover;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-}
-a.dso-secondary.extern:hover::after,
-button.dso-secondary.extern:hover::after,
-label.dso-secondary.extern:hover::after {
-  background-image: url("./dso-icons.svg#img-external-link-wit");
-}
-a.dso-secondary.extern[disabled]::after,
-button.dso-secondary.extern[disabled]::after,
-label.dso-secondary.extern[disabled]::after {
-  background-image: url("./dso-icons.svg#img-external-link-grasgroen-40");
-}
-a.dso-tertiary,
-button.dso-tertiary,
-label.dso-tertiary {
-  display: inline-block;
-  font-size: 1em;
-  font-weight: 500;
-  margin-block-end: 0;
-  text-decoration: none;
-  touch-action: manipulation;
-  text-align: start;
-  user-select: none;
-  vertical-align: middle;
-  border: 0;
-  color: #39870c;
-  line-height: 1;
-  padding: 0;
-  background-color: transparent;
-}
-a.dso-tertiary:focus, a.dso-tertiary:focus-visible,
-button.dso-tertiary:focus,
-button.dso-tertiary:focus-visible,
-label.dso-tertiary:focus,
-label.dso-tertiary:focus-visible {
-  outline-offset: 2px;
-}
-a.dso-tertiary:active,
-button.dso-tertiary:active,
-label.dso-tertiary:active {
-  outline: 0;
-}
-a.dso-tertiary.extern::after, a.dso-tertiary.download::after,
-button.dso-tertiary.extern::after,
-button.dso-tertiary.download::after,
-label.dso-tertiary.extern::after,
-label.dso-tertiary.download::after {
-  content: "";
-  display: inline-block;
-  margin-inline-start: 8px;
-}
-a.dso-tertiary[disabled],
-button.dso-tertiary[disabled],
-label.dso-tertiary[disabled] {
-  color: #afcf9d;
-}
-a.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,
-button.dso-tertiary[disabled].dso-spinner-left,
-button.dso-tertiary[disabled].dso-spinner-right,
-label.dso-tertiary[disabled].dso-spinner-left,
-label.dso-tertiary[disabled].dso-spinner-right {
-  color: #39870c;
-}
-a.dso-tertiary:not([disabled]):hover,
-button.dso-tertiary:not([disabled]):hover,
-label.dso-tertiary:not([disabled]):hover {
-  color: #275937;
-  text-decoration: underline;
-  text-underline-position: under;
-}
-a.dso-tertiary:not([disabled]):active,
-button.dso-tertiary:not([disabled]):active,
-label.dso-tertiary:not([disabled]):active {
-  color: #173521;
-}
-a.dso-tertiary.dso-align,
-button.dso-tertiary.dso-align,
-label.dso-tertiary.dso-align {
-  line-height: calc(1.5em - 1px);
-  padding-block: 11px;
-  padding-inline: 0;
-  position: relative;
-}
-a.dso-tertiary.dso-truncate,
-button.dso-tertiary.dso-truncate,
-label.dso-tertiary.dso-truncate {
-  max-inline-size: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-a.dso-tertiary.dso-spinner-left::before,
-button.dso-tertiary.dso-spinner-left::before,
-label.dso-tertiary.dso-spinner-left::before {
-  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");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: middle;
-  inline-size: 24px;
-  margin-inline-end: 8px;
-}
-a.dso-tertiary.dso-spinner-right::after,
-button.dso-tertiary.dso-spinner-right::after,
-label.dso-tertiary.dso-spinner-right::after {
-  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");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: middle;
-  inline-size: 24px;
-  margin-inline-start: 8px;
-}
-a.dso-tertiary dso-icon + span:not(.sr-only),
-a.dso-tertiary svg.di + span:not(.sr-only),
-a.dso-tertiary span:not(.sr-only) + dso-icon,
-a.dso-tertiary span:not(.sr-only) + svg.di,
-button.dso-tertiary dso-icon + span:not(.sr-only),
-button.dso-tertiary svg.di + span:not(.sr-only),
-button.dso-tertiary span:not(.sr-only) + dso-icon,
-button.dso-tertiary span:not(.sr-only) + svg.di,
-label.dso-tertiary dso-icon + span:not(.sr-only),
-label.dso-tertiary svg.di + span:not(.sr-only),
-label.dso-tertiary span:not(.sr-only) + dso-icon,
-label.dso-tertiary span:not(.sr-only) + svg.di {
-  margin-inline-start: 8px;
-}
-a.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
-a.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
-a.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
-a.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,
-button.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
-button.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
-button.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
-button.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,
-label.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
-label.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
-label.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
-label.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {
-  margin-inline-start: 4px;
-}
-a.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
-a.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-a.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
-a.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
-a.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
-a.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
-a.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
-a.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],
-button.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
-button.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-button.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
-button.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
-button.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
-button.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
-button.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
-button.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],
-label.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
-label.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-label.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
-label.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
-label.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
-label.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
-label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
-label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
-  margin-inline-start: 0;
-}
-a.dso-tertiary dso-icon,
-a.dso-tertiary svg.di,
-a.dso-tertiary span,
-button.dso-tertiary dso-icon,
-button.dso-tertiary svg.di,
-button.dso-tertiary span,
-label.dso-tertiary dso-icon,
-label.dso-tertiary svg.di,
-label.dso-tertiary span {
-  vertical-align: middle;
-}
-a.dso-tertiary.extern::after, a.dso-tertiary.download::after,
-button.dso-tertiary.extern::after,
-button.dso-tertiary.download::after,
-label.dso-tertiary.extern::after,
-label.dso-tertiary.download::after {
-  position: relative;
-  inset-block-start: -2px;
-}
-a.dso-tertiary.download::after,
-button.dso-tertiary.download::after,
-label.dso-tertiary.download::after {
-  background: url("./dso-icons.svg#img-download") no-repeat;
-  background-position: center;
-  background-size: cover;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-}
-a.dso-tertiary.download[disabled]::after,
-button.dso-tertiary.download[disabled]::after,
-label.dso-tertiary.download[disabled]::after {
-  background-image: url("./dso-icons.svg#img-download-grasgroen-40");
-}
-a.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,
-button.dso-tertiary.download:not([disabled]):hover::after,
-button.dso-tertiary.download:not([disabled]):active::after,
-label.dso-tertiary.download:not([disabled]):hover::after,
-label.dso-tertiary.download:not([disabled]):active::after {
-  background-image: url("./dso-icons.svg#img-download-scampi");
-}
-a.dso-tertiary.extern::after,
-button.dso-tertiary.extern::after,
-label.dso-tertiary.extern::after {
-  background: url("./dso-icons.svg#img-external-link") no-repeat;
-  background-position: center;
-  background-size: cover;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-}
-a.dso-tertiary.extern[disabled]::after,
-button.dso-tertiary.extern[disabled]::after,
-label.dso-tertiary.extern[disabled]::after {
-  background-image: url("./dso-icons.svg#img-external-link-grasgroen-40");
-}
-a.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,
-button.dso-tertiary.extern:not([disabled]):hover::after,
-button.dso-tertiary.extern:not([disabled]):active::after,
-label.dso-tertiary.extern:not([disabled]):hover::after,
-label.dso-tertiary.extern:not([disabled]):active::after {
-  background-image: url("./dso-icons.svg#img-external-link-scampi");
-}
-
-a.dso-primary {
-  text-decoration: none;
-}
-a.dso-primary, a.dso-primary:visited {
-  color: #fff;
-}
-a.dso-secondary {
-  text-decoration: none;
-}
-a.dso-secondary, a.dso-secondary:visited {
-  color: #39870c;
-}
-a.dso-secondary:hover, a.dso-secondary:visited:hover {
-  color: #39870c;
-}
-a.dso-tertiary {
-  text-decoration: none;
-}
-a.dso-tertiary, a.dso-tertiary:visited {
-  color: #39870c;
-}
-
-.dso-primary + .dso-primary,
-.dso-primary + .dso-secondary,
-.dso-primary + .dso-tertiary,
-.dso-secondary + .dso-primary,
-.dso-secondary + .dso-secondary,
-.dso-secondary + .dso-tertiary,
-.dso-tertiary + .dso-primary,
-.dso-tertiary + .dso-secondary,
-.dso-tertiary + .dso-tertiary {
-  margin-inline-start: 16px;
-}
-
-dso-annotation-button {
-  display: block;
-}