@dso-toolkit/core 42.0.0 → 43.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/dist/cjs/dso-autosuggest.cjs.entry.js +17 -8
  2. package/dist/cjs/dso-badge.cjs.entry.js +1 -1
  3. package/dist/cjs/dso-header.cjs.entry.js +1 -1
  4. package/dist/cjs/dso-helpcenter-panel.cjs.entry.js +1 -1
  5. package/dist/cjs/dso-image-overlay.cjs.entry.js +1 -1
  6. package/dist/cjs/dso-label.cjs.entry.js +78 -3
  7. package/dist/cjs/dso-map-controls.cjs.entry.js +1 -1
  8. package/dist/cjs/dso-ozon-content.cjs.entry.js +32 -3
  9. package/dist/cjs/dso-pagination.cjs.entry.js +5 -2
  10. package/dist/cjs/dso-toolkit.cjs.js +1 -1
  11. package/dist/cjs/dso-tooltip.cjs.entry.js +7 -0
  12. package/dist/cjs/dso-tree-view.cjs.entry.js +24 -2
  13. package/dist/cjs/dso-viewer-grid.cjs.entry.js +1 -1
  14. package/dist/cjs/loader.cjs.js +1 -1
  15. package/dist/collection/components/autosuggest/autosuggest.js +37 -9
  16. package/dist/collection/components/autosuggest/autosuggest.template.js +2 -1
  17. package/dist/collection/components/badge/badge.css +4 -1
  18. package/dist/collection/components/header/header.css +27 -0
  19. package/dist/collection/components/helpcenter-panel/helpcenter-panel.css +96 -2
  20. package/dist/collection/components/image-overlay/image-overlay.css +124 -2
  21. package/dist/collection/components/label/label.css +13 -0
  22. package/dist/collection/components/label/label.js +118 -12
  23. package/dist/collection/components/label/label.template.js +2 -1
  24. package/dist/collection/components/list/list.template.js +11 -4
  25. package/dist/collection/components/map-controls/map-controls.css +147 -2
  26. package/dist/collection/components/ozon-content/nodes/int-io-ref.node.js +27 -0
  27. package/dist/collection/components/ozon-content/nodes/int-ref.node.js +1 -0
  28. package/dist/collection/components/ozon-content/ozon-content-mapper.js +3 -1
  29. package/dist/collection/components/ozon-content/ozon-content.css +23 -0
  30. package/dist/collection/components/ozon-content/ozon-content.js +3 -1
  31. package/dist/collection/components/pagination/pagination.js +8 -5
  32. package/dist/collection/components/tooltip/tooltip.js +7 -0
  33. package/dist/collection/components/tree-view/tree-item.js +1 -1
  34. package/dist/collection/components/tree-view/tree-view.js +58 -2
  35. package/dist/collection/components/viewer-grid/viewer-grid.css +207 -5
  36. package/dist/custom-elements/index.js +171 -26
  37. package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
  38. package/dist/dso-toolkit/p-04b8814d.entry.js +1 -0
  39. package/dist/dso-toolkit/{p-37e12c3c.entry.js → p-17e9802f.entry.js} +1 -1
  40. package/dist/dso-toolkit/p-19b5fae2.entry.js +1 -0
  41. package/dist/dso-toolkit/p-1bd0e0c3.entry.js +1 -0
  42. package/dist/dso-toolkit/p-1d52d4f2.entry.js +1 -0
  43. package/dist/dso-toolkit/p-553bd3aa.entry.js +1 -0
  44. package/dist/dso-toolkit/p-63e0f10d.entry.js +1 -0
  45. package/dist/dso-toolkit/p-a5705dd1.entry.js +1 -0
  46. package/dist/dso-toolkit/p-a7bcd356.entry.js +1 -0
  47. package/dist/dso-toolkit/p-aa098949.entry.js +1 -0
  48. package/dist/dso-toolkit/p-c282135e.entry.js +1 -0
  49. package/dist/dso-toolkit/p-ca3a1440.entry.js +1 -0
  50. package/dist/esm/dso-autosuggest.entry.js +17 -8
  51. package/dist/esm/dso-badge.entry.js +1 -1
  52. package/dist/esm/dso-header.entry.js +1 -1
  53. package/dist/esm/dso-helpcenter-panel.entry.js +1 -1
  54. package/dist/esm/dso-image-overlay.entry.js +1 -1
  55. package/dist/esm/dso-label.entry.js +79 -4
  56. package/dist/esm/dso-map-controls.entry.js +1 -1
  57. package/dist/esm/dso-ozon-content.entry.js +32 -3
  58. package/dist/esm/dso-pagination.entry.js +5 -2
  59. package/dist/esm/dso-toolkit.js +1 -1
  60. package/dist/esm/dso-tooltip.entry.js +7 -0
  61. package/dist/esm/dso-tree-view.entry.js +24 -2
  62. package/dist/esm/dso-viewer-grid.entry.js +1 -1
  63. package/dist/esm/loader.js +1 -1
  64. package/dist/types/components/autosuggest/autosuggest.d.ts +6 -0
  65. package/dist/types/components/autosuggest/autosuggest.template.d.ts +1 -1
  66. package/dist/types/components/label/label.d.ts +21 -3
  67. package/dist/types/components/label/label.template.d.ts +1 -1
  68. package/dist/types/components/ozon-content/nodes/int-io-ref.node.d.ts +6 -0
  69. package/dist/types/components/ozon-content/ozon-content-node-context.interface.d.ts +2 -1
  70. package/dist/types/components/ozon-content/ozon-content.interfaces.d.ts +2 -0
  71. package/dist/types/components/tooltip/tooltip.d.ts +1 -0
  72. package/dist/types/components/tree-view/tree-view.d.ts +10 -2
  73. package/dist/types/components.d.ts +16 -0
  74. package/package.json +1 -1
  75. package/dist/dso-toolkit/p-076400f4.entry.js +0 -1
  76. package/dist/dso-toolkit/p-2f64bded.entry.js +0 -1
  77. package/dist/dso-toolkit/p-5e614420.entry.js +0 -1
  78. package/dist/dso-toolkit/p-60679db4.entry.js +0 -1
  79. package/dist/dso-toolkit/p-7796687c.entry.js +0 -1
  80. package/dist/dso-toolkit/p-7f41f2a1.entry.js +0 -1
  81. package/dist/dso-toolkit/p-9dc7e3c5.entry.js +0 -1
  82. package/dist/dso-toolkit/p-b1dc8d76.entry.js +0 -1
  83. package/dist/dso-toolkit/p-e01b1657.entry.js +0 -1
  84. package/dist/dso-toolkit/p-e1496a15.entry.js +0 -1
  85. package/dist/dso-toolkit/p-f1026921.entry.js +0 -1
package/dist/custom-elements/index.js CHANGED
@@ -265,14 +265,17 @@ let Autosuggest = class extends HTMLElement {
265
265
  */
266
266
  this.suggestOnFocus = false;
267
267
  this.showSuggestions = false;
268
+ this.notFound = false;
268
269
  this.listboxId = v4();
269
270
  this.inputId = v4();
270
271
  this.labelId = v4();
271
272
  this.debouncedEmitValue = debounce_1((value) => this.changeEmitter.emit(value), 200);
273
+ this.inputValue = '';
272
274
  this.onInput = (event) => {
273
275
  if (!(event.target instanceof HTMLInputElement)) {
274
276
  throw new Error("event.target is not instanceof HTMLInputElement");
275
277
  }
278
+ this.inputValue = event.target.value;
276
279
  this.debouncedEmitValue(event.target.value.match(/(\S+)/g) ? event.target.value : '');
277
280
  };
278
281
  this.onFocusIn = () => {
@@ -318,15 +321,15 @@ let Autosuggest = class extends HTMLElement {
318
321
  }
319
322
  suggestionsWatcher() {
320
323
  this.resetSelectedSuggestion();
321
- if (!this.showSuggestions && this.suggestions.length > 0) {
324
+ if ((!this.showSuggestions || !this.notFound) && this.inputValue) {
322
325
  this.openSuggestions();
323
326
  }
324
- else if (this.showSuggestions && this.suggestions.length === 0) {
327
+ else if ((this.showSuggestions || this.notFound) && !this.inputValue) {
325
328
  this.closeSuggestions();
326
329
  }
327
330
  }
328
331
  onDocumentClick(event) {
329
- if (this.showSuggestions &&
332
+ if ((this.showSuggestions || this.notFound) &&
330
333
  this.listbox &&
331
334
  event.target instanceof Node &&
332
335
  !this.listbox.contains(event.target) &&
@@ -428,16 +431,18 @@ let Autosuggest = class extends HTMLElement {
428
431
  }
429
432
  openSuggestions(selectSuggestion) {
430
433
  this.showSuggestions = this.suggestions.length > 0;
431
- this.input.setAttribute("aria-expanded", this.showSuggestions.toString());
432
- if (selectSuggestion === 'first') {
434
+ this.notFound = this.suggestions.length === 0;
435
+ this.input.setAttribute("aria-expanded", (this.showSuggestions || this.notFound).toString());
436
+ if (this.showSuggestions && selectSuggestion === 'first') {
433
437
  this.selectFirstSuggestion();
434
438
  }
435
- else if (selectSuggestion === 'last') {
439
+ else if (this.showSuggestions && selectSuggestion === 'last') {
436
440
  this.selectLastSuggestion();
437
441
  }
438
442
  }
439
443
  closeSuggestions() {
440
444
  this.showSuggestions = false;
445
+ this.notFound = false;
441
446
  this.input.setAttribute("aria-expanded", "false");
442
447
  this.selectFirstSuggestion();
443
448
  }
@@ -457,11 +462,15 @@ let Autosuggest = class extends HTMLElement {
457
462
  const terms = this.input.value.split(' ').filter(t => t);
458
463
  return (h(Fragment, null, h("slot", null), this.loading
459
464
  ? h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))
460
- : h("ul", { role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: element => this.listbox = element, hidden: !this.showSuggestions }, this.showSuggestions
465
+ : h("ul", { role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: element => this.listbox = element, hidden: !this.showSuggestions && !this.notFound }, this.showSuggestions
461
466
  ? this.suggestions.map((suggestion) => (h("li", { role: "option", id: this.listboxItemId(suggestion), key: suggestion.value, onMouseEnter: () => this.selectSuggestion(suggestion), onMouseLeave: () => this.resetSelectedSuggestion(), onClick: () => this.pickSelectedValue(), "aria-selected": (suggestion === this.selectedSuggestion).toString(), "aria-label": suggestion.value }, h("span", { class: "value" }, this.markTerms(suggestion.value, terms)), suggestion.type
462
467
  ? (h("span", { class: "type" }, suggestion.type))
463
468
  : undefined)))
464
- : undefined)));
469
+ : this.notFound
470
+ ? h("li", null, h("span", { class: "value" }, !this.notFoundLabel
471
+ ? this.markTerms(`${this.inputValue} is niet gevonden.`, terms)
472
+ : h("span", null, this.notFoundLabel)))
473
+ : undefined)));
465
474
  }
466
475
  get host() { return this; }
467
476
  static get watchers() { return {
@@ -470,7 +479,7 @@ let Autosuggest = class extends HTMLElement {
470
479
  static get style() { return autosuggestCss; }
471
480
  };
472
481
 
473
- const badgeCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-badge{background-color:#666;border-radius:1em;color:#fff;display:inline-block;font-size:0.875em;line-height:1em;padding:4px 8px}.dso-badge.badge-info{background-color:#6ca4d9;color:#191919}.dso-badge.badge-primary{background-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;color:#191919}.dso-badge.badge-danger{background-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;color:#191919;outline:1px solid #191919}";
482
+ const badgeCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-badge{background-color:#666;border-radius:1em;color:#fff;display:inline-block;font-size:0.875em;line-height:1;min-width:calc(1 + 8px);padding:4px 8px;text-align:center}.dso-badge.badge-info{background-color:#6ca4d9;color:#191919}.dso-badge.badge-primary{background-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;color:#191919}.dso-badge.badge-danger{background-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;color:#191919;outline:1px solid #191919;outline-offset:-1px}";
474
483
 
475
484
  let Badge = class extends HTMLElement {
476
485
  constructor() {
@@ -1753,7 +1762,7 @@ let DropdownMenu = class extends HTMLElement {
1753
1762
  static get style() { return dropdownMenuCss; }
1754
1763
  };
1755
1764
 
1756
- const headerCss = ":host{--di-chevron-down-bosgroen:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-up-bosgroen:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");display:block}.dso-header{border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap;padding:0 16px;position:relative}@media screen and (min-width: 768px){.dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down{flex-wrap:nowrap}}.logo-container{display:flex;flex-wrap:wrap;padding-bottom:16px;padding-top:16px}@media screen and (max-width: 767px){.logo-container{max-width:200px}}.logo-container+.dropdown dso-dropdown-menu{position:static}@media screen and (min-width: 768px){.sub-logo{margin-left:24px}}@media screen and (max-width: 767px){.sub-logo{flex-basis:100%}}.login,.logout{margin-right:16px}.login .dso-tertiary,.logout .dso-tertiary{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;border:0;color:#39870c;line-height:1;padding:0;background-color:transparent;cursor:pointer;font-family:Asap, sans-serif;font-weight:600;vertical-align:text-bottom}.login .dso-tertiary:focus,.login .dso-tertiary:focus-visible,.logout .dso-tertiary:focus,.logout .dso-tertiary:focus-visible{outline-offset:2px}.login .dso-tertiary:active,.logout .dso-tertiary:active{outline:0}.login .dso-tertiary.extern::after,.login .dso-tertiary.download::after,.logout .dso-tertiary.extern::after,.logout .dso-tertiary.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.login .dso-tertiary[disabled],.logout .dso-tertiary[disabled]{color:#afcf9d}.login .dso-tertiary:not([disabled]):hover,.logout .dso-tertiary:not([disabled]):hover{color:#676cb0;text-decoration:underline}.login .dso-tertiary:not([disabled]):active,.logout .dso-tertiary:not([disabled]):active{color:#676cb0}.login .dso-tertiary.btn-align,.logout .dso-tertiary.btn-align{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}.login .dso-tertiary.extern::after,.login .dso-tertiary.download::after,.logout .dso-tertiary.extern::after,.logout .dso-tertiary.download::after{position:relative;top:-2px}.login .dso-tertiary.download::after,.logout .dso-tertiary.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.login .dso-tertiary.download[disabled]::after,.logout .dso-tertiary.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.login .dso-tertiary.download:not([disabled]):hover::after,.login .dso-tertiary.download:not([disabled]):active::after,.logout .dso-tertiary.download:not([disabled]):hover::after,.logout .dso-tertiary.download:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}.login .dso-tertiary.extern::after,.logout .dso-tertiary.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.login .dso-tertiary.extern[disabled]::after,.logout .dso-tertiary.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.login .dso-tertiary.extern:not([disabled]):hover::after,.login .dso-tertiary.extern:not([disabled]):active::after,.logout .dso-tertiary.extern:not([disabled]):hover::after,.logout .dso-tertiary.extern:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}.login .dso-tertiary dso-icon+span:not(.sr-only),.login .dso-tertiary svg.di+span:not(.sr-only),.login .dso-tertiary span:not(.sr-only)+dso-icon,.login .dso-tertiary span:not(.sr-only)+svg.di,.logout .dso-tertiary dso-icon+span:not(.sr-only),.logout .dso-tertiary svg.di+span:not(.sr-only),.logout .dso-tertiary span:not(.sr-only)+dso-icon,.logout .dso-tertiary span:not(.sr-only)+svg.di{margin-left:8px}.login .dso-tertiary dso-icon,.login .dso-tertiary svg.di,.login .dso-tertiary span,.logout .dso-tertiary dso-icon,.logout .dso-tertiary svg.di,.logout .dso-tertiary span{vertical-align:middle}.profile a,.logout a,.login a{text-decoration:none;color:#39870c;font-weight:600}.profile a:hover,.profile a:focus,.logout a:hover,.logout a:focus,.login a:hover,.login a:focus{text-decoration:none}.profile a:active,.logout a:active,.login a:active{text-decoration:underline}.dso-header-session{display:flex;margin-left:auto}.dso-header-session .profile a{margin-left:8px}.dso-header-session .profile+.logout{border-left:3px solid #ccc;margin-left:16px;padding-left:16px}.dso-navbar{flex-basis:100%}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.dso-tertiary::after,dso-dropdown-menu>.btn::after{content:\"\";display:inline-block;margin-left:8px}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.btn-primary::after{background:var(--dso-icon, var(--di-chevron-down-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.btn-default::after{background:var(--dso-icon, var(--di-chevron-down)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-dropdown-menu>.dso-secondary:hover::after,dso-dropdown-menu>.btn-default:hover::after{--dso-icon:var(--di-chevron-down-wit)}dso-dropdown-menu>.dso-tertiary::after,dso-dropdown-menu>.btn-link::after{background:var(--dso-icon, var(--di-chevron-down)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;position:relative;top:-2px}dso-dropdown-menu>.dso-tertiary:hover::after,dso-dropdown-menu>.btn-link:hover::after{--dso-icon:var(--di-chevron-down-scampi)}dso-dropdown-menu .dso-group-label{color:#999;font-size:0.875em;font-weight:400;margin:0;padding:4px 20px 2px;text-transform:uppercase}dso-dropdown-menu ul{margin:0;padding:0}dso-dropdown-menu ul:not(:last-child){border-bottom:1px solid #e5e5e5;margin-bottom:11px;padding-bottom:11px}dso-dropdown-menu .dso-dropdown-options{background-clip:padding-box;background-color:#fff;border-radius:4px;border:1px solid rgba(0, 0, 0, 0.15);box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);font-size:16px;margin:2px 0 0;min-width:160px;padding:5px 0;position:absolute;text-align:left;top:100%;z-index:220}dso-dropdown-menu .dso-dropdown-options li{list-style:none}dso-dropdown-menu .dso-dropdown-options li a:visited{color:#191919}dso-dropdown-menu .dso-dropdown-options li a,dso-dropdown-menu .dso-dropdown-options li button{text-decoration:none;clear:both;color:#191919;display:block;font-weight:400;line-height:1.5;padding:3px 20px;text-decoration:none;white-space:nowrap}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus,dso-dropdown-menu .dso-dropdown-options li a:active,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus,dso-dropdown-menu .dso-dropdown-options li button:active{text-decoration:underline}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus{background-color:#39870c;border-color:#39870c;color:#fff;text-decoration:none}dso-dropdown-menu .dso-dropdown-options li button{background-color:transparent;border:0;border-radius:0;text-align:inherit;width:100%}dso-dropdown-menu[dropdown-align=right] .dso-dropdown-options{right:0}dso-dropdown-menu[open]>.dso-primary::after,dso-dropdown-menu[open]>.btn-primary::after{--dso-icon:var(--di-chevron-up-wit)}dso-dropdown-menu[open]>.dso-secondary::after,dso-dropdown-menu[open]>.btn-default::after{--dso-icon:var(--di-chevron-up)}dso-dropdown-menu[open]>.dso-secondary:hover::after,dso-dropdown-menu[open]>.btn-default:hover::after{--dso-icon:var(--di-chevron-up-wit)}dso-dropdown-menu[open]>.dso-tertiary::after,dso-dropdown-menu[open]>.btn-link::after{--dso-icon:var(--di-chevron-up)}dso-dropdown-menu[open]>.dso-tertiary:hover::after,dso-dropdown-menu[open]>.btn-link:hover::after{--dso-icon:var(--di-chevron-up-scampi)}dso-dropdown-menu[open] button::after{background:var(--dso-icon, var(--di-chevron-up-bosgroen)) no-repeat;background-position:center;background-size:cover;height:1.2em;vertical-align:top;width:1.2em}dso-dropdown-menu[checkable] .dso-group-label{padding-left:40px}dso-dropdown-menu[checkable] li a,dso-dropdown-menu[checkable] li button{padding-left:40px}dso-dropdown-menu[checkable] li.dso-checked a:not(:focus),dso-dropdown-menu[checkable] li.dso-checked button:not(:focus){background-color:#39870c;border-color:#39870c;color:#fff}dso-dropdown-menu[checkable] li.dso-checked a::before,dso-dropdown-menu[checkable] li.dso-checked button::before{background:var(--dso-icon, var(--di-check-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;content:\"\";display:block;float:left;margin-left:-32px;margin-right:8px}dso-dropdown-menu button{align-items:flex-end;background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;padding-right:32px}dso-dropdown-menu button::after{background:var(--dso-icon, var(--di-chevron-down-bosgroen)) no-repeat;background-position:center;background-size:cover;height:1.2em;vertical-align:top;width:1.2em;content:\"\";display:inline-block;margin-left:8px;position:absolute;right:0;top:50%;transform:translateY(-50%)}@media screen and (max-width: 767px){dso-dropdown-menu{top:12px}}dso-dropdown-menu .dso-dropdown-options{border:0;border-radius:0}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul{width:320px}@media screen and (max-width: 991px){dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul{width:100%}}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a{color:#275937;font-size:1.25rem;padding:16px}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li.dso-active a{font-weight:600}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li+li{border-top:1px solid #ccc}.dropdown{margin-left:auto}@media screen and (max-width: 767px){.dropdown dso-dropdown-menu{margin-top:28px}}.dropdown dso-dropdown-menu .dso-dropdown-options{left:0;right:0;top:100%}.dropdown dso-dropdown-menu[open] button::after{background:var(--dso-icon, var(--di-chevron-up)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.dropdown dso-dropdown-menu button{color:#39870c;font-size:16px;font-weight:600;position:relative}.dropdown dso-dropdown-menu button:hover,.dropdown dso-dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dropdown dso-dropdown-menu button::after{background:var(--dso-icon, var(--di-chevron-down)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.dso-nav{align-items:end;column-gap:32px;display:flex;list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.dso-nav>li{margin-bottom:4px}.dso-nav>li>a{display:block}.dso-nav>li>a,.dso-nav>li>a:hover,.dso-nav>li>a:focus,.dso-nav>li>a:visited{color:#275937}.dso-nav>li.dso-active,.dso-nav>li.is-active{margin-bottom:0}.dso-nav>li.dso-active>a,.dso-nav>li.is-active>a{border-bottom:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main>li>a{text-decoration:none;font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;white-space:nowrap}.dso-nav.dso-nav-main>li>a:hover,.dso-nav.dso-nav-main>li>a:focus,.dso-nav.dso-nav-main>li>a:active{text-decoration:underline}.dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options{top:calc(100% + 3px)}.dso-nav.dso-nav-main dso-dropdown-menu button{font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;align-items:center;color:#275937;padding-right:32px}.dso-nav.dso-nav-main dso-dropdown-menu button:hover,.dso-nav.dso-nav-main dso-dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main dso-dropdown-menu button::after{top:auto;transform:none}.dso-nav.dso-nav-sub>li{display:inline-block}.dso-nav.dso-nav-sub>li>a{text-decoration:none;font-size:16px;margin-top:4px;padding:4px 8px 3px}.dso-nav.dso-nav-sub>li>a:hover,.dso-nav.dso-nav-sub>li>a:focus,.dso-nav.dso-nav-sub>li>a:active{text-decoration:underline}.dso-nav .menu-user-home{margin-left:auto}.dso-nav .menu-user-home dso-icon{height:1em;margin-right:8px;position:relative;top:-2px;width:1.2em}";
1765
+ const headerCss = ":host {\n --di-chevron-down-bosgroen: url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");\n --di-chevron-up-bosgroen: url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");\n display: block;\n}\n\n.dso-header {\n border-bottom: 1px solid #ccc;\n display: flex;\n flex-wrap: wrap;\n padding: 0 16px;\n position: relative;\n}\n@media screen and (min-width: 768px) {\n .dso-header {\n align-items: center;\n }\n}\n@media screen and (max-width: 991px) {\n .dso-header.use-drop-down {\n flex-wrap: nowrap;\n }\n}\n\n.logo-container {\n display: flex;\n flex-wrap: wrap;\n padding-bottom: 16px;\n padding-top: 16px;\n}\n@media screen and (max-width: 767px) {\n .logo-container {\n max-width: 200px;\n }\n}\n.logo-container + .dropdown dso-dropdown-menu {\n position: static;\n}\n\n@media screen and (min-width: 768px) {\n .sub-logo {\n margin-left: 24px;\n }\n}\n@media screen and (max-width: 767px) {\n .sub-logo {\n flex-basis: 100%;\n }\n}\n\n.login,\n.logout {\n margin-right: 16px;\n}\n.login .dso-tertiary,\n.logout .dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\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 cursor: pointer;\n font-family: Asap, sans-serif;\n font-weight: 600;\n vertical-align: text-bottom;\n}\n.login .dso-tertiary:focus, .login .dso-tertiary:focus-visible,\n.logout .dso-tertiary:focus,\n.logout .dso-tertiary:focus-visible {\n outline-offset: 2px;\n}\n.login .dso-tertiary:active,\n.logout .dso-tertiary:active {\n outline: 0;\n}\n.login .dso-tertiary.extern::after, .login .dso-tertiary.download::after,\n.logout .dso-tertiary.extern::after,\n.logout .dso-tertiary.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.login .dso-tertiary[disabled],\n.logout .dso-tertiary[disabled] {\n color: #afcf9d;\n}\n.login .dso-tertiary[disabled].dso-spinner-left, .login .dso-tertiary[disabled].dso-spinner-right,\n.logout .dso-tertiary[disabled].dso-spinner-left,\n.logout .dso-tertiary[disabled].dso-spinner-right {\n color: #39870c;\n}\n.login .dso-tertiary:not([disabled]):hover,\n.logout .dso-tertiary:not([disabled]):hover {\n color: #676cb0;\n text-decoration: underline;\n}\n.login .dso-tertiary:not([disabled]):active,\n.logout .dso-tertiary:not([disabled]):active {\n color: #676cb0;\n}\n.login .dso-tertiary.btn-align,\n.logout .dso-tertiary.btn-align {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\n}\n.login .dso-tertiary.extern::after, .login .dso-tertiary.download::after,\n.logout .dso-tertiary.extern::after,\n.logout .dso-tertiary.download::after {\n position: relative;\n top: -2px;\n}\n.login .dso-tertiary.download::after,\n.logout .dso-tertiary.download::after {\n background: var(--dso-icon, var(--di-download)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.login .dso-tertiary.download[disabled]::after,\n.logout .dso-tertiary.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\n.login .dso-tertiary.download:not([disabled]):hover::after, .login .dso-tertiary.download:not([disabled]):active::after,\n.logout .dso-tertiary.download:not([disabled]):hover::after,\n.logout .dso-tertiary.download:not([disabled]):active::after {\n --dso-icon: var(--di-download-scampi);\n}\n.login .dso-tertiary.extern::after,\n.logout .dso-tertiary.extern::after {\n background: var(--dso-icon, var(--di-external-link)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.login .dso-tertiary.extern[disabled]::after,\n.logout .dso-tertiary.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.login .dso-tertiary.extern:not([disabled]):hover::after, .login .dso-tertiary.extern:not([disabled]):active::after,\n.logout .dso-tertiary.extern:not([disabled]):hover::after,\n.logout .dso-tertiary.extern:not([disabled]):active::after {\n --dso-icon: var(--di-external-link-scampi);\n}\n.login .dso-tertiary.dso-spinner-left::before,\n.logout .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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 8px;\n}\n.login .dso-tertiary.dso-spinner-right::after,\n.logout .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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 8px;\n}\n.login .dso-tertiary dso-icon + span:not(.sr-only),\n.login .dso-tertiary svg.di + span:not(.sr-only),\n.login .dso-tertiary span:not(.sr-only) + dso-icon,\n.login .dso-tertiary span:not(.sr-only) + svg.di,\n.logout .dso-tertiary dso-icon + span:not(.sr-only),\n.logout .dso-tertiary svg.di + span:not(.sr-only),\n.logout .dso-tertiary span:not(.sr-only) + dso-icon,\n.logout .dso-tertiary span:not(.sr-only) + svg.di {\n margin-left: 8px;\n}\n.login .dso-tertiary dso-icon,\n.login .dso-tertiary svg.di,\n.login .dso-tertiary span,\n.logout .dso-tertiary dso-icon,\n.logout .dso-tertiary svg.di,\n.logout .dso-tertiary span {\n vertical-align: middle;\n}\n\n.profile a,\n.logout a,\n.login a {\n text-decoration: none;\n color: #39870c;\n font-weight: 600;\n}\n.profile a:hover, .profile a:focus,\n.logout a:hover,\n.logout a:focus,\n.login a:hover,\n.login a:focus {\n text-decoration: none;\n}\n.profile a:active,\n.logout a:active,\n.login a:active {\n text-decoration: underline;\n}\n\n.dso-header-session {\n display: flex;\n margin-left: auto;\n}\n.dso-header-session .profile a {\n margin-left: 8px;\n}\n.dso-header-session .profile + .logout {\n border-left: 3px solid #ccc;\n margin-left: 16px;\n padding-left: 16px;\n}\n\n.dso-navbar {\n flex-basis: 100%;\n}\n\ndso-dropdown-menu > .dso-primary::after,\ndso-dropdown-menu > .dso-secondary::after,\ndso-dropdown-menu > .dso-tertiary::after,\ndso-dropdown-menu > .btn::after {\n content: \"\";\n display: inline-block;\n margin-left: 8px;\n}\ndso-dropdown-menu > .dso-primary::after,\ndso-dropdown-menu > .btn-primary::after {\n background: var(--dso-icon, var(--di-chevron-down-wit)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\ndso-dropdown-menu > .dso-secondary::after,\ndso-dropdown-menu > .btn-default::after {\n background: var(--dso-icon, var(--di-chevron-down)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\ndso-dropdown-menu > .dso-secondary:hover::after,\ndso-dropdown-menu > .btn-default:hover::after {\n --dso-icon: var(--di-chevron-down-wit);\n}\ndso-dropdown-menu > .dso-tertiary::after,\ndso-dropdown-menu > .btn-link::after {\n background: var(--dso-icon, var(--di-chevron-down)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n position: relative;\n top: -2px;\n}\ndso-dropdown-menu > .dso-tertiary:hover::after,\ndso-dropdown-menu > .btn-link:hover::after {\n --dso-icon: var(--di-chevron-down-scampi);\n}\ndso-dropdown-menu .dso-group-label {\n color: #999;\n font-size: 0.875em;\n font-weight: 400;\n margin: 0;\n padding: 4px 20px 2px;\n text-transform: uppercase;\n}\ndso-dropdown-menu ul {\n margin: 0;\n padding: 0;\n}\ndso-dropdown-menu ul:not(:last-child) {\n border-bottom: 1px solid #e5e5e5;\n margin-bottom: 11px;\n padding-bottom: 11px;\n}\ndso-dropdown-menu .dso-dropdown-options {\n background-clip: padding-box;\n background-color: #fff;\n border-radius: 4px;\n border: 1px solid rgba(0, 0, 0, 0.15);\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\n font-size: 16px;\n margin: 2px 0 0;\n min-width: 160px;\n padding: 5px 0;\n position: absolute;\n text-align: left;\n top: 100%;\n z-index: 220;\n}\ndso-dropdown-menu .dso-dropdown-options li {\n list-style: none;\n}\ndso-dropdown-menu .dso-dropdown-options li a:visited {\n color: #191919;\n}\ndso-dropdown-menu .dso-dropdown-options li a,\ndso-dropdown-menu .dso-dropdown-options li button {\n text-decoration: none;\n clear: both;\n color: #191919;\n display: block;\n font-weight: 400;\n line-height: 1.5;\n padding: 3px 20px;\n text-decoration: none;\n white-space: nowrap;\n}\ndso-dropdown-menu .dso-dropdown-options li a:hover, dso-dropdown-menu .dso-dropdown-options li a:focus, dso-dropdown-menu .dso-dropdown-options li a:active,\ndso-dropdown-menu .dso-dropdown-options li button:hover,\ndso-dropdown-menu .dso-dropdown-options li button:focus,\ndso-dropdown-menu .dso-dropdown-options li button:active {\n text-decoration: underline;\n}\ndso-dropdown-menu .dso-dropdown-options li a:hover, dso-dropdown-menu .dso-dropdown-options li a:focus,\ndso-dropdown-menu .dso-dropdown-options li button:hover,\ndso-dropdown-menu .dso-dropdown-options li button:focus {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n text-decoration: none;\n}\ndso-dropdown-menu .dso-dropdown-options li button {\n background-color: transparent;\n border: 0;\n border-radius: 0;\n text-align: inherit;\n width: 100%;\n}\ndso-dropdown-menu[dropdown-align=right] .dso-dropdown-options {\n right: 0;\n}\ndso-dropdown-menu[open] > .dso-primary::after,\ndso-dropdown-menu[open] > .btn-primary::after {\n --dso-icon: var(--di-chevron-up-wit);\n}\ndso-dropdown-menu[open] > .dso-secondary::after,\ndso-dropdown-menu[open] > .btn-default::after {\n --dso-icon: var(--di-chevron-up);\n}\ndso-dropdown-menu[open] > .dso-secondary:hover::after,\ndso-dropdown-menu[open] > .btn-default:hover::after {\n --dso-icon: var(--di-chevron-up-wit);\n}\ndso-dropdown-menu[open] > .dso-tertiary::after,\ndso-dropdown-menu[open] > .btn-link::after {\n --dso-icon: var(--di-chevron-up);\n}\ndso-dropdown-menu[open] > .dso-tertiary:hover::after,\ndso-dropdown-menu[open] > .btn-link:hover::after {\n --dso-icon: var(--di-chevron-up-scampi);\n}\ndso-dropdown-menu[open] button::after {\n background: var(--dso-icon, var(--di-chevron-up-bosgroen)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 1.2em;\n vertical-align: top;\n width: 1.2em;\n}\ndso-dropdown-menu[checkable] .dso-group-label {\n padding-left: 40px;\n}\ndso-dropdown-menu[checkable] li a,\ndso-dropdown-menu[checkable] li button {\n padding-left: 40px;\n}\ndso-dropdown-menu[checkable] li.dso-checked a:not(:focus),\ndso-dropdown-menu[checkable] li.dso-checked button:not(:focus) {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\ndso-dropdown-menu[checkable] li.dso-checked a::before,\ndso-dropdown-menu[checkable] li.dso-checked button::before {\n background: var(--dso-icon, var(--di-check-wit)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n content: \"\";\n display: block;\n float: left;\n margin-left: -32px;\n margin-right: 8px;\n}\ndso-dropdown-menu button {\n align-items: flex-end;\n background-color: transparent;\n border: 0;\n display: flex;\n font-family: Asap, sans-serif;\n padding-right: 32px;\n}\ndso-dropdown-menu button::after {\n background: var(--dso-icon, var(--di-chevron-down-bosgroen)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 1.2em;\n vertical-align: top;\n width: 1.2em;\n content: \"\";\n display: inline-block;\n margin-left: 8px;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n}\n@media screen and (max-width: 767px) {\n dso-dropdown-menu {\n top: 12px;\n }\n}\ndso-dropdown-menu .dso-dropdown-options {\n border: 0;\n border-radius: 0;\n}\ndso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul {\n width: 320px;\n}\n@media screen and (max-width: 991px) {\n dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul {\n width: 100%;\n }\n}\ndso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a {\n color: #275937;\n font-size: 1.25rem;\n padding: 16px;\n}\ndso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a:hover {\n background-color: #fff;\n color: #275937;\n text-decoration: underline;\n}\ndso-dropdown-menu .dso-dropdown-options dso-dropdown-options li.dso-active a {\n font-weight: 600;\n}\ndso-dropdown-menu .dso-dropdown-options dso-dropdown-options li + li {\n border-top: 1px solid #ccc;\n}\n\n.dropdown {\n margin-left: auto;\n}\n@media screen and (max-width: 767px) {\n .dropdown dso-dropdown-menu {\n margin-top: 28px;\n }\n}\n.dropdown dso-dropdown-menu .dso-dropdown-options {\n left: 0;\n right: 0;\n top: 100%;\n}\n.dropdown dso-dropdown-menu[open] button::after {\n background: var(--dso-icon, var(--di-chevron-up)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 1.5em;\n vertical-align: top;\n width: 1.5em;\n}\n.dropdown dso-dropdown-menu button {\n color: #39870c;\n font-size: 16px;\n font-weight: 600;\n position: relative;\n}\n.dropdown dso-dropdown-menu button:hover, .dropdown dso-dropdown-menu button:active {\n cursor: pointer;\n text-decoration: underline;\n}\n.dropdown dso-dropdown-menu button::after {\n background: var(--dso-icon, var(--di-chevron-down)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 1.5em;\n vertical-align: top;\n width: 1.5em;\n}\n\n.dso-nav {\n align-items: end;\n column-gap: 32px;\n display: flex;\n list-style: none;\n margin-bottom: 0;\n margin-top: 0;\n padding-left: 0;\n}\n.dso-nav > li {\n margin-bottom: 4px;\n}\n.dso-nav > li > a {\n display: block;\n}\n.dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited {\n color: #275937;\n}\n.dso-nav > li.dso-active, .dso-nav > li.is-active {\n margin-bottom: 0;\n}\n.dso-nav > li.dso-active > a, .dso-nav > li.is-active > a {\n border-bottom: 4px solid #8b4a6a;\n font-weight: bold;\n}\n.dso-nav.dso-nav-main > li > a {\n text-decoration: none;\n font-size: 1.25em;\n line-height: 1;\n margin-top: 8px;\n padding: 16px 0;\n white-space: nowrap;\n}\n.dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus, .dso-nav.dso-nav-main > li > a:active {\n text-decoration: underline;\n}\n.dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options {\n top: calc(100% + 3px);\n}\n.dso-nav.dso-nav-main dso-dropdown-menu button {\n font-size: 1.25em;\n line-height: 1;\n margin-top: 8px;\n padding: 16px 0;\n align-items: center;\n color: #275937;\n padding-right: 32px;\n}\n.dso-nav.dso-nav-main dso-dropdown-menu button:hover, .dso-nav.dso-nav-main dso-dropdown-menu button:active {\n cursor: pointer;\n text-decoration: underline;\n}\n.dso-nav.dso-nav-main dso-dropdown-menu button::after {\n top: auto;\n transform: none;\n}\n.dso-nav.dso-nav-sub > li {\n display: inline-block;\n}\n.dso-nav.dso-nav-sub > li > a {\n text-decoration: none;\n font-size: 16px;\n margin-top: 4px;\n padding: 4px 8px 3px;\n}\n.dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus, .dso-nav.dso-nav-sub > li > a:active {\n text-decoration: underline;\n}\n.dso-nav .menu-user-home {\n margin-left: auto;\n}\n.dso-nav .menu-user-home dso-icon {\n height: 1em;\n margin-right: 8px;\n position: relative;\n top: -2px;\n width: 1.2em;\n}";
1757
1766
 
1758
1767
  const minDesktopViewportWidth = 992;
1759
1768
  let Header = class extends HTMLElement {
@@ -1867,7 +1876,7 @@ let Header = class extends HTMLElement {
1867
1876
  static get style() { return headerCss; }
1868
1877
  };
1869
1878
 
1870
- const helpcenterPanelCss = ":host{display:block;--di-times:url(\"data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e\");--di-times-wit:url(\"data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e\")}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.wrapper{height:100%;left:0;position:fixed;top:0;visibility:hidden;width:100%}.wrapper.visible{visibility:visible}.dimscreen{background-color:#000;height:100%;opacity:0.4;width:100%}.open-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;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-width:56px;padding:11px 15px;border:0;bottom:16px;font-family:Asap, sans-serif;position:fixed;right:16px;box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}.open-button:focus,.open-button:focus-visible{outline-offset:2px}.open-button:active{outline:0}.open-button.extern::after,.open-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.open-button:focus,.open-button:focus-visible{outline-offset:2px}.open-button:active{outline:0}.open-button.extern::after,.open-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.open-button:hover{background-color:#275937;border-color:#275937;color:#fff}.open-button:active{background-color:#15301e;border-color:#15301e;color:#fff}.open-button[disabled],.open-button[disabled]:hover{background-color:#afcf9d;border-color:#afcf9d;color:#fff}.open-button.btn-sm{line-height:16px}.open-button.btn-sm dso-icon,.open-button.btn-sm svg.di,.open-button.btn-sm.extern::after,.open-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.open-button.download::after{background:var(--dso-icon, var(--di-download-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.open-button.extern::after{background:var(--dso-icon, var(--di-external-link-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.open-button dso-icon,.open-button svg.di{margin-left:-8px;margin-right:8px}.open-button span+dso-icon,.open-button span+svg.di{margin-left:8px;margin-right:-8px}.open-button:hover{cursor:pointer}.open-button.open{display:none}.close-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;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-width:56px;padding:11px 15px;border-right:0;border-top:0;border-radius:0 0 0 8px;height:40px;min-width:40px;padding:0;position:fixed;right:0;width:40px;top:0}.close-button:focus,.close-button:focus-visible{outline-offset:2px}.close-button:active{outline:0}.close-button.extern::after,.close-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.close-button:hover{background-color:#39870c;border-color:#39870c;color:#fff}.close-button:active{background-color:#275937;border-color:#275937;color:#fff}.close-button[disabled],.close-button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.close-button.btn-sm{line-height:16px}.close-button.btn-sm dso-icon,.close-button.btn-sm svg.di,.close-button.btn-sm.extern::after,.close-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.close-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.close-button.download:hover::after{--dso-icon:var(--di-download-wit)}.close-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.close-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.close-button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.close-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.close-button dso-icon,.close-button svg.di{margin-left:-8px;margin-right:8px}.close-button span+dso-icon,.close-button span+svg.di{margin-left:8px;margin-right:-8px}.close-button::before{background:var(--dso-icon, var(--di-times)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;content:\"\";display:inline-block;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.close-button:hover,.close-button:active,.close-button:focus{cursor:pointer}.close-button:hover::before,.close-button:active::before,.close-button:focus::before{background:var(--dso-icon, var(--di-times-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.close-button.close{display:none}.iframe-container{background-color:#fff;border:0;border-left:1px solid #ccc;box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.4);height:100%;position:absolute;right:-640px;top:0;transition:right 0.5s;width:640px}.iframe-container.open{right:0}iframe{border:0;height:100%;width:100%}";
1879
+ const helpcenterPanelCss = ":host {\n display: block;\n --di-times: url(\"data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e\");\n --di-times-wit: url(\"data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e\");\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.wrapper {\n height: 100%;\n left: 0;\n position: fixed;\n top: 0;\n visibility: hidden;\n width: 100%;\n}\n.wrapper.visible {\n visibility: visible;\n}\n\n.dimscreen {\n background-color: #000;\n height: 100%;\n opacity: 0.4;\n width: 100%;\n}\n\n.open-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\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-width: 56px;\n padding: 11px 15px;\n border: 0;\n bottom: 16px;\n font-family: Asap, sans-serif;\n position: fixed;\n right: 16px;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n.open-button:focus, .open-button:focus-visible {\n outline-offset: 2px;\n}\n.open-button:active {\n outline: 0;\n}\n.open-button.extern::after, .open-button.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.open-button:focus, .open-button:focus-visible {\n outline-offset: 2px;\n}\n.open-button:active {\n outline: 0;\n}\n.open-button.extern::after, .open-button.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.open-button:hover {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.open-button:active {\n background-color: #15301e;\n border-color: #15301e;\n color: #fff;\n}\n.open-button[disabled], .open-button[disabled]:hover {\n background-color: #afcf9d;\n border-color: #afcf9d;\n color: #fff;\n}\n.open-button.btn-sm {\n line-height: 16px;\n}\n.open-button.btn-sm dso-icon,\n.open-button.btn-sm svg.di, .open-button.btn-sm.extern::after, .open-button.btn-sm.download::after, .open-button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.open-button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.open-button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.open-button.download::after {\n background: var(--dso-icon, var(--di-download-wit)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.open-button.extern::after {\n background: var(--dso-icon, var(--di-external-link-wit)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.open-button dso-icon,\n.open-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.open-button span + dso-icon,\n.open-button span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.open-button.dso-spinner-left[disabled], .open-button.dso-spinner-right[disabled] {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.open-button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.open-button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.open-button:hover {\n cursor: pointer;\n}\n.open-button.open {\n display: none;\n}\n\n.close-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\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-width: 56px;\n padding: 11px 15px;\n border-right: 0;\n border-top: 0;\n border-radius: 0 0 0 8px;\n height: 40px;\n min-width: 40px;\n padding: 0;\n position: fixed;\n right: 0;\n width: 40px;\n top: 0;\n}\n.close-button:focus, .close-button:focus-visible {\n outline-offset: 2px;\n}\n.close-button:active {\n outline: 0;\n}\n.close-button.extern::after, .close-button.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.close-button:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.close-button:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.close-button[disabled], .close-button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.close-button.btn-sm {\n line-height: 16px;\n}\n.close-button.btn-sm dso-icon,\n.close-button.btn-sm svg.di, .close-button.btn-sm.extern::after, .close-button.btn-sm.download::after, .close-button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.close-button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.close-button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.close-button.download::after {\n background: var(--dso-icon, var(--di-download)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.close-button.download:hover::after {\n --dso-icon: var(--di-download-wit);\n}\n.close-button.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\n.close-button.extern::after {\n background: var(--dso-icon, var(--di-external-link)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.close-button.extern:hover::after {\n --dso-icon: var(--di-external-link-wit);\n}\n.close-button.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.close-button dso-icon,\n.close-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.close-button span + dso-icon,\n.close-button span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.close-button.dso-spinner-left[disabled], .close-button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.close-button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.close-button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n.close-button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.close-button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n.close-button::before {\n background: var(--dso-icon, var(--di-times)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n content: \"\";\n display: inline-block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n.close-button:hover, .close-button:active, .close-button:focus {\n cursor: pointer;\n}\n.close-button:hover::before, .close-button:active::before, .close-button:focus::before {\n background: var(--dso-icon, var(--di-times-wit)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.close-button.close {\n display: none;\n}\n\n.iframe-container {\n background-color: #fff;\n border: 0;\n border-left: 1px solid #ccc;\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\n height: 100%;\n position: absolute;\n right: -640px;\n top: 0;\n transition: right 0.5s;\n width: 640px;\n}\n.iframe-container.open {\n right: 0;\n}\n\niframe {\n border: 0;\n height: 100%;\n width: 100%;\n}";
1871
1880
 
1872
1881
  const maxCssTransitionMilliseconds = 500;
1873
1882
  let HelpcenterPanel = class extends HTMLElement {
@@ -3257,7 +3266,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
3257
3266
  return trap;
3258
3267
  };
3259
3268
 
3260
- const imageOverlayCss = "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}:host{display:inline-block;position:relative}:host(:hover) .open,.open:focus{opacity:1}.open{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;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-width:56px;padding:11px 15px;border:0;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);min-width:auto;padding:8px;opacity:0;position:absolute;right:16px;top:16px}.open:focus,.open:focus-visible{outline-offset:2px}.open:active{outline:0}.open.extern::after,.open.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.open:hover{background-color:#39870c;border-color:#39870c;color:#fff}.open:active{background-color:#275937;border-color:#275937;color:#fff}.open[disabled],.open[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.open.btn-sm{line-height:16px}.open.btn-sm dso-icon,.open.btn-sm svg.di,.open.btn-sm.extern::after,.open.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.open.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.open.download:hover::after{--dso-icon:var(--di-download-wit)}.open.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.open.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.open.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.open.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.open>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dimmer{position:fixed;top:0;left:0;right:0;bottom:0;z-index:19;display:flex;padding:32px;background-color:rgba(255, 255, 255, 0.8);justify-content:center}.wrapper{box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);position:relative;z-index:20;align-self:center;line-height:0}.wrapper img{width:auto;height:auto;max-width:100%;max-height:calc(100vh - 64px)}.close{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;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-width:56px;padding:11px 15px;border:0;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);min-width:auto;padding:8px;position:absolute;top:16px;right:16px}.close:focus,.close:focus-visible{outline-offset:2px}.close:active{outline:0}.close.extern::after,.close.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.close:hover{background-color:#39870c;border-color:#39870c;color:#fff}.close:active{background-color:#275937;border-color:#275937;color:#fff}.close[disabled],.close[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.close.btn-sm{line-height:16px}.close.btn-sm dso-icon,.close.btn-sm svg.di,.close.btn-sm.extern::after,.close.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.close.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.close.download:hover::after{--dso-icon:var(--di-download-wit)}.close.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.close.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.close.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.close.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.close>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
3269
+ const imageOverlayCss = "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\n:host {\n display: inline-block;\n position: relative;\n}\n\n:host(:hover) .open,\n.open:focus {\n opacity: 1;\n}\n\n.open {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\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-width: 56px;\n padding: 11px 15px;\n border: 0;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n min-width: auto;\n padding: 8px;\n opacity: 0;\n position: absolute;\n right: 16px;\n top: 16px;\n}\n.open:focus, .open:focus-visible {\n outline-offset: 2px;\n}\n.open:active {\n outline: 0;\n}\n.open.extern::after, .open.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.open:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.open:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.open[disabled], .open[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.open.btn-sm {\n line-height: 16px;\n}\n.open.btn-sm dso-icon,\n.open.btn-sm svg.di, .open.btn-sm.extern::after, .open.btn-sm.download::after, .open.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.open.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.open.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.open.download::after {\n background: var(--dso-icon, var(--di-download)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.open.download:hover::after {\n --dso-icon: var(--di-download-wit);\n}\n.open.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\n.open.extern::after {\n background: var(--dso-icon, var(--di-external-link)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.open.extern:hover::after {\n --dso-icon: var(--di-external-link-wit);\n}\n.open.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.open > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.open.dso-spinner-left[disabled], .open.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.open.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.open.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.open.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n.open.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.open.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.open.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n\n.dimmer {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 19;\n display: flex;\n padding: 32px;\n background-color: rgba(255, 255, 255, 0.8);\n justify-content: center;\n}\n\n.wrapper {\n box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);\n position: relative;\n z-index: 20;\n align-self: center;\n line-height: 0;\n}\n.wrapper img {\n width: auto;\n height: auto;\n max-width: 100%;\n max-height: calc(100vh - 64px);\n}\n\n.close {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\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-width: 56px;\n padding: 11px 15px;\n border: 0;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n min-width: auto;\n padding: 8px;\n position: absolute;\n top: 16px;\n right: 16px;\n}\n.close:focus, .close:focus-visible {\n outline-offset: 2px;\n}\n.close:active {\n outline: 0;\n}\n.close.extern::after, .close.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.close:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.close:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.close[disabled], .close[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.close.btn-sm {\n line-height: 16px;\n}\n.close.btn-sm dso-icon,\n.close.btn-sm svg.di, .close.btn-sm.extern::after, .close.btn-sm.download::after, .close.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.close.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.close.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.close.download::after {\n background: var(--dso-icon, var(--di-download)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.close.download:hover::after {\n --dso-icon: var(--di-download-wit);\n}\n.close.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\n.close.extern::after {\n background: var(--dso-icon, var(--di-external-link)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.close.extern:hover::after {\n --dso-icon: var(--di-external-link-wit);\n}\n.close.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.close > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.close.dso-spinner-left[disabled], .close.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.close.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.close.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.close.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n.close.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.close.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.close.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}";
3261
3270
 
3262
3271
  let ImageOverlay = class extends HTMLElement {
3263
3272
  constructor() {
@@ -3347,26 +3356,101 @@ let InfoButton = class extends HTMLElement {
3347
3356
  static get style() { return infoButtonCss; }
3348
3357
  };
3349
3358
 
3350
- const labelCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{background-color:#f2f2f2;border-radius:4px;color:#191919;display:inline-block;line-height:1.5}.dso-label:not(.dso-label-bright){padding:4px 8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:right;font-size:16px;margin-bottom:-4px;margin-left:8px;margin-right:-4px;margin-top:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label.dso-compact{border:0;padding:0 8px}.dso-label.dso-label-info{background-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{background-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;color:#191919}.dso-label.dso-label-danger{background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;color:#191919;border:1px solid #ccc;padding:3px 7px}";
3359
+ const labelCss = ":host{display:inline-block;max-width:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{background-color:#f2f2f2;border-radius:4px;color:#191919;display:inline-block;line-height:1.5}.dso-label:not(.dso-label-bright){padding:4px 8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:right;font-size:16px;margin-bottom:-4px;margin-left:8px;margin-right:-4px;margin-top:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label.dso-compact{border:0;padding:0 8px}.dso-label.dso-label-info{background-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{background-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;color:#191919}.dso-label.dso-label-danger{background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;color:#191919;border:1px solid #ccc;padding:3px 7px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-width:184px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}";
3351
3360
 
3361
+ function hasEllipses(el) {
3362
+ return el.scrollWidth > el.clientWidth;
3363
+ }
3352
3364
  let Label = class extends HTMLElement {
3353
3365
  constructor() {
3354
3366
  super();
3355
3367
  this.__registerHost();
3356
3368
  this.__attachShadow();
3357
3369
  this.removeClick = createEvent(this, "removeClick", 7);
3370
+ this.resizeObserver = new ResizeObserver(() => this.truncateLabel());
3371
+ this.keydownListenerActive = false;
3372
+ this.keyDownListener = (event) => {
3373
+ if (event.key == 'Escape') {
3374
+ this.textHover = false;
3375
+ this.textFocus = false;
3376
+ }
3377
+ };
3378
+ }
3379
+ watchTruncate(truncate) {
3380
+ if (truncate) {
3381
+ this.startTruncate();
3382
+ }
3383
+ else {
3384
+ this.stopTruncate();
3385
+ }
3386
+ }
3387
+ watchTooltipActive() {
3388
+ if (!this.keydownListenerActive && (this.textHover || this.textFocus)) {
3389
+ document.addEventListener('keydown', this.keyDownListener);
3390
+ this.keydownListenerActive = true;
3391
+ }
3392
+ if (!this.textHover && !this.textFocus) {
3393
+ document.removeEventListener('keydown', this.keyDownListener);
3394
+ this.keydownListenerActive = false;
3395
+ }
3396
+ }
3397
+ truncateLabel() {
3398
+ setTimeout(() => {
3399
+ if (this.labelContent) {
3400
+ this.truncatedContent = hasEllipses(this.labelContent) ? this.host.innerText : undefined;
3401
+ }
3402
+ });
3403
+ }
3404
+ componentDidLoad() {
3405
+ if (this.truncate) {
3406
+ this.startTruncate();
3407
+ }
3408
+ }
3409
+ disconnectedCallback() {
3410
+ this.stopTruncate();
3411
+ }
3412
+ startTruncate() {
3413
+ this.mutationObserver = new MutationObserver(() => {
3414
+ this.truncateLabel();
3415
+ });
3416
+ this.mutationObserver.observe(this.host, {
3417
+ attributes: true,
3418
+ subtree: true
3419
+ });
3420
+ this.resizeObserver.observe(this.host);
3421
+ this.truncateLabel();
3422
+ }
3423
+ stopTruncate() {
3424
+ var _a;
3425
+ document.removeEventListener('keydown', this.keyDownListener);
3426
+ (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
3427
+ this.resizeObserver.unobserve(this.host);
3428
+ this.truncatedContent = undefined;
3429
+ this.keydownListenerActive = false;
3358
3430
  }
3359
3431
  render() {
3360
3432
  const status = this.status && Label.statusMap.get(this.status);
3361
- return (h("span", { class: clsx('dso-label', { [`dso-label-${this.status}`]: this.status, 'dso-compact': this.compact && !this.removable, 'dso-hover': this.hover }) }, h("slot", { name: "symbol" }), status && (h("span", { class: "sr-only" }, status, ": ")), h("slot", null), this.removable && (h("button", { type: "button", onClick: e => this.removeClick.emit(e), onMouseEnter: () => this.hover = true, onMouseLeave: () => this.hover = false }, h("span", { class: "sr-only" }, "Verwijder"), h("dso-icon", { icon: "times" })))));
3433
+ return (h(Fragment, null, h("span", { id: "toggle-anchor", class: clsx('dso-label', {
3434
+ [`dso-label-${this.status}`]: this.status,
3435
+ 'dso-compact': this.compact && !this.removable,
3436
+ 'dso-hover': this.removeHover || this.removeFocus,
3437
+ }) }, h("slot", { name: "symbol" }), status && (h("span", { class: "sr-only" }, status, ": ")), h("span", { class: clsx('dso-label-content', {
3438
+ 'dso-truncate': !!this.truncate,
3439
+ }), ref: element => this.labelContent = element, tabindex: (this.truncate && this.truncatedContent) ? 0 : -1, onMouseEnter: () => this.textHover = true, onMouseLeave: () => this.textHover = false, onFocus: () => this.textFocus = true, onBlur: () => this.textFocus = false }, h("slot", null)), this.removable && (h("button", { type: "button", onClick: e => this.removeClick.emit(e), onMouseEnter: () => this.removeHover = true, onMouseLeave: () => this.removeHover = false, onFocus: () => this.removeFocus = true, onBlur: () => this.removeFocus = false }, h("span", { class: "sr-only" }, "Verwijder"), h("dso-icon", { icon: "times" })))), h("dso-tooltip", { stateless: true, for: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top" }, this.truncatedContent)));
3362
3440
  }
3441
+ get host() { return this; }
3442
+ static get watchers() { return {
3443
+ "truncate": ["watchTruncate"],
3444
+ "textHover": ["watchTooltipActive"],
3445
+ "textFocus": ["watchTooltipActive"]
3446
+ }; }
3363
3447
  static get style() { return labelCss; }
3364
3448
  };
3365
3449
  Label.statusMap = new Map([
3366
3450
  ['info', 'Opmerking'],
3367
3451
  ['success', 'Gelukt'],
3368
3452
  ['warning', 'Waarschuwing'],
3369
- ['danger', 'Fout']
3453
+ ['danger', 'Fout'],
3370
3454
  ]);
3371
3455
 
3372
3456
  const mapBaseLayersCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-width:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-bottom:8px;max-width:100%;text-align:left}p[slot=info]{margin:0}";
@@ -3403,7 +3487,7 @@ let MapBaseLayers = class extends HTMLElement {
3403
3487
  static get style() { return mapBaseLayersCss; }
3404
3488
  };
3405
3489
 
3406
- const mapControlsCss = "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}:host{background-color:#fff;border:1px solid #ccc;bottom:0;display:block;font-family:Asap, sans-serif;position:absolute;top:0;left:100%;transition:transform 300ms ease;width:300px}*,*::after,*::before{box-sizing:border-box}:host([open]){box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.3);transform:translateX(-100%)}:host([open]) #toggle-visibility-button{display:none}#toggle-visibility-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;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-width:56px;padding:11px 15px;border:0;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);font-weight:600;margin-right:16px;padding:8px 16px;white-space:nowrap;position:absolute;right:calc(100% + 56px);top:16px}#toggle-visibility-button:focus,#toggle-visibility-button:focus-visible{outline-offset:2px}#toggle-visibility-button:active{outline:0}#toggle-visibility-button.extern::after,#toggle-visibility-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}#toggle-visibility-button:hover{background-color:#39870c;border-color:#39870c;color:#fff}#toggle-visibility-button:active{background-color:#275937;border-color:#275937;color:#fff}#toggle-visibility-button[disabled],#toggle-visibility-button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}#toggle-visibility-button.btn-sm{line-height:16px}#toggle-visibility-button.btn-sm dso-icon,#toggle-visibility-button.btn-sm svg.di,#toggle-visibility-button.btn-sm.extern::after,#toggle-visibility-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}#toggle-visibility-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#toggle-visibility-button.download:hover::after{--dso-icon:var(--di-download-wit)}#toggle-visibility-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}#toggle-visibility-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#toggle-visibility-button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}#toggle-visibility-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}#toggle-visibility-button dso-icon,#toggle-visibility-button svg.di{margin-left:-8px;margin-right:8px}#toggle-visibility-button span+dso-icon,#toggle-visibility-button span+svg.di{margin-left:8px;margin-right:-8px}#toggle-visibility-button:focus-visible{background-color:#39870c;border-color:#39870c;color:#fff;outline:none}#zoom-buttons{border-radius:4px;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);display:flex;flex-wrap:wrap;flex:0 0;position:absolute;right:calc(100% + 16px);top:16px}#zoom-buttons button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;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-width:56px;padding:11px 15px;border:0;padding:8px;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;flex:0 0 100%;height:40px;min-width:auto;width:40px}#zoom-buttons button:focus,#zoom-buttons button:focus-visible{outline-offset:2px}#zoom-buttons button:active{outline:0}#zoom-buttons button.extern::after,#zoom-buttons button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}#zoom-buttons button:hover{background-color:#39870c;border-color:#39870c;color:#fff}#zoom-buttons button:active{background-color:#275937;border-color:#275937;color:#fff}#zoom-buttons button[disabled],#zoom-buttons button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}#zoom-buttons button.btn-sm{line-height:16px}#zoom-buttons button.btn-sm dso-icon,#zoom-buttons button.btn-sm svg.di,#zoom-buttons button.btn-sm.extern::after,#zoom-buttons button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}#zoom-buttons button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#zoom-buttons button.download:hover::after{--dso-icon:var(--di-download-wit)}#zoom-buttons button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}#zoom-buttons button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#zoom-buttons button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}#zoom-buttons button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}#zoom-buttons button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}#zoom-buttons button:focus-visible{background-color:#39870c;border-color:#39870c;color:#fff;outline:none}#zoom-buttons button+button{border-radius:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:1px solid #ccc}#close-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;border:0;color:#39870c;line-height:1;padding:0;background-color:transparent;padding:0;position:absolute;right:16px;top:16px}#close-button:focus,#close-button:focus-visible{outline-offset:2px}#close-button:active{outline:0}#close-button.extern::after,#close-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}#close-button[disabled]{color:#afcf9d}#close-button:not([disabled]):hover{color:#676cb0;text-decoration:underline}#close-button:not([disabled]):active{color:#676cb0}#close-button.btn-align{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}#close-button.extern::after,#close-button.download::after{position:relative;top:-2px}#close-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#close-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}#close-button.download:not([disabled]):hover::after,#close-button.download:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}#close-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#close-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}#close-button.extern:not([disabled]):hover::after,#close-button.extern:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}#close-button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}section:not([hidden]){display:flex;flex-direction:column;height:100%}header,.content{padding:16px}header{border-bottom:1px solid #ccc;flex-grow:0;position:relative}header h2{color:#275937;font-family:\"Asap\", sans-serif;line-height:1;margin:0}.content{flex-grow:1;overflow-y:auto}";
3490
+ const mapControlsCss = "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\n:host {\n background-color: #fff;\n border: 1px solid #ccc;\n bottom: 0;\n display: block;\n font-family: Asap, sans-serif;\n position: absolute;\n top: 0;\n left: 100%;\n transition: transform 300ms ease;\n width: 300px;\n}\n\n*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host([open]) {\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n transform: translateX(-100%);\n}\n:host([open]) #toggle-visibility-button {\n display: none;\n}\n\n#toggle-visibility-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\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-width: 56px;\n padding: 11px 15px;\n border: 0;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n font-weight: 600;\n margin-right: 16px;\n padding: 8px 16px;\n white-space: nowrap;\n position: absolute;\n right: calc(100% + 56px);\n top: 16px;\n}\n#toggle-visibility-button:focus, #toggle-visibility-button:focus-visible {\n outline-offset: 2px;\n}\n#toggle-visibility-button:active {\n outline: 0;\n}\n#toggle-visibility-button.extern::after, #toggle-visibility-button.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n#toggle-visibility-button:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n#toggle-visibility-button:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n#toggle-visibility-button[disabled], #toggle-visibility-button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n#toggle-visibility-button.btn-sm {\n line-height: 16px;\n}\n#toggle-visibility-button.btn-sm dso-icon,\n#toggle-visibility-button.btn-sm svg.di, #toggle-visibility-button.btn-sm.extern::after, #toggle-visibility-button.btn-sm.download::after, #toggle-visibility-button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n#toggle-visibility-button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n#toggle-visibility-button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n#toggle-visibility-button.download::after {\n background: var(--dso-icon, var(--di-download)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n#toggle-visibility-button.download:hover::after {\n --dso-icon: var(--di-download-wit);\n}\n#toggle-visibility-button.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\n#toggle-visibility-button.extern::after {\n background: var(--dso-icon, var(--di-external-link)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n#toggle-visibility-button.extern:hover::after {\n --dso-icon: var(--di-external-link-wit);\n}\n#toggle-visibility-button.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\n#toggle-visibility-button dso-icon,\n#toggle-visibility-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n#toggle-visibility-button span + dso-icon,\n#toggle-visibility-button span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n#toggle-visibility-button.dso-spinner-left[disabled], #toggle-visibility-button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n#toggle-visibility-button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n#toggle-visibility-button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n#toggle-visibility-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n#toggle-visibility-button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n#toggle-visibility-button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n#toggle-visibility-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n#toggle-visibility-button:focus-visible {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n outline: none;\n}\n\n#zoom-buttons {\n border-radius: 4px;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n display: flex;\n flex-wrap: wrap;\n flex: 0 0;\n position: absolute;\n right: calc(100% + 16px);\n top: 16px;\n}\n#zoom-buttons button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\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-width: 56px;\n padding: 11px 15px;\n border: 0;\n padding: 8px;\n border-radius: 0;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n flex: 0 0 100%;\n height: 40px;\n min-width: auto;\n width: 40px;\n}\n#zoom-buttons button:focus, #zoom-buttons button:focus-visible {\n outline-offset: 2px;\n}\n#zoom-buttons button:active {\n outline: 0;\n}\n#zoom-buttons button.extern::after, #zoom-buttons button.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n#zoom-buttons button:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n#zoom-buttons button:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n#zoom-buttons button[disabled], #zoom-buttons button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n#zoom-buttons button.btn-sm {\n line-height: 16px;\n}\n#zoom-buttons button.btn-sm dso-icon,\n#zoom-buttons button.btn-sm svg.di, #zoom-buttons button.btn-sm.extern::after, #zoom-buttons button.btn-sm.download::after, #zoom-buttons button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n#zoom-buttons button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n#zoom-buttons button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n#zoom-buttons button.download::after {\n background: var(--dso-icon, var(--di-download)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n#zoom-buttons button.download:hover::after {\n --dso-icon: var(--di-download-wit);\n}\n#zoom-buttons button.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\n#zoom-buttons button.extern::after {\n background: var(--dso-icon, var(--di-external-link)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n#zoom-buttons button.extern:hover::after {\n --dso-icon: var(--di-external-link-wit);\n}\n#zoom-buttons button.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\n#zoom-buttons button > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n#zoom-buttons button.dso-spinner-left[disabled], #zoom-buttons button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n#zoom-buttons button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n#zoom-buttons button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n#zoom-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n#zoom-buttons button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n#zoom-buttons button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n#zoom-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n#zoom-buttons button:focus-visible {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n outline: none;\n}\n#zoom-buttons button + button {\n border-radius: 0;\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n border-top: 1px solid #ccc;\n}\n\n#close-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\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 padding: 0;\n position: absolute;\n right: 16px;\n top: 16px;\n}\n#close-button:focus, #close-button:focus-visible {\n outline-offset: 2px;\n}\n#close-button:active {\n outline: 0;\n}\n#close-button.extern::after, #close-button.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n#close-button[disabled] {\n color: #afcf9d;\n}\n#close-button[disabled].dso-spinner-left, #close-button[disabled].dso-spinner-right {\n color: #39870c;\n}\n#close-button:not([disabled]):hover {\n color: #676cb0;\n text-decoration: underline;\n}\n#close-button:not([disabled]):active {\n color: #676cb0;\n}\n#close-button.btn-align {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\n}\n#close-button.extern::after, #close-button.download::after {\n position: relative;\n top: -2px;\n}\n#close-button.download::after {\n background: var(--dso-icon, var(--di-download)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n#close-button.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\n#close-button.download:not([disabled]):hover::after, #close-button.download:not([disabled]):active::after {\n --dso-icon: var(--di-download-scampi);\n}\n#close-button.extern::after {\n background: var(--dso-icon, var(--di-external-link)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n#close-button.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\n#close-button.extern:not([disabled]):hover::after, #close-button.extern:not([disabled]):active::after {\n --dso-icon: var(--di-external-link-scampi);\n}\n#close-button.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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 8px;\n}\n#close-button.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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 8px;\n}\n#close-button > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\nsection:not([hidden]) {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\nheader,\n.content {\n padding: 16px;\n}\n\nheader {\n border-bottom: 1px solid #ccc;\n flex-grow: 0;\n position: relative;\n}\nheader h2 {\n color: #275937;\n font-family: \"Asap\", sans-serif;\n line-height: 1;\n margin: 0;\n}\n\n.content {\n flex-grow: 1;\n overflow-y: auto;\n}";
3407
3491
 
3408
3492
  var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
3409
3493
  if (kind === "a" && !f)
@@ -3615,6 +3699,7 @@ class OzonContentIntRefNode {
3615
3699
  }
3616
3700
  const { href } = target;
3617
3701
  emitAnchorClick({
3702
+ node: this.name,
3618
3703
  href,
3619
3704
  documentComponent: ref,
3620
3705
  originalEvent: event
@@ -3771,6 +3856,33 @@ class OzonContentFallbackNode {
3771
3856
  }
3772
3857
  }
3773
3858
 
3859
+ class OzonContentIntIoRefNode {
3860
+ constructor() {
3861
+ this.name = 'IntIoRef';
3862
+ }
3863
+ render(node, { mapNodeToJsx, emitAnchorClick }) {
3864
+ const ref = node.getAttribute('ref');
3865
+ if (!ref) {
3866
+ return mapNodeToJsx(node.childNodes);
3867
+ }
3868
+ const intRefOnClick = (event) => {
3869
+ event.preventDefault();
3870
+ const target = event.currentTarget;
3871
+ if (!(target instanceof HTMLAnchorElement)) {
3872
+ return;
3873
+ }
3874
+ const { href } = target;
3875
+ emitAnchorClick({
3876
+ node: this.name,
3877
+ href,
3878
+ documentComponent: ref,
3879
+ originalEvent: event
3880
+ });
3881
+ };
3882
+ return (h("a", { href: `#${ref}`, onClick: intRefOnClick }, mapNodeToJsx(node.childNodes)));
3883
+ }
3884
+ }
3885
+
3774
3886
  class Mapper {
3775
3887
  constructor() {
3776
3888
  this.mappers = [
@@ -3784,7 +3896,8 @@ class Mapper {
3784
3896
  new OzonContentInlineNodes(),
3785
3897
  new OzonContentIllustratieNode(),
3786
3898
  new OzonContentNootNode(),
3787
- new OzonContentTableNode()
3899
+ new OzonContentTableNode(),
3900
+ new OzonContentIntIoRefNode(),
3788
3901
  ];
3789
3902
  this.skip = this.mappers.reduce((t, m) => {
3790
3903
  if (m.handles) {
@@ -3840,7 +3953,7 @@ class Mapper {
3840
3953
  }
3841
3954
  }
3842
3955
 
3843
- const ozonContentCss = ".sc-dso-ozon-content-h:not([inline]){display:block}[inline].sc-dso-ozon-content-h{display:inline}[deleted].sc-dso-ozon-content-h *.sc-dso-ozon-content{text-decoration:line-through !important}[interactive].sc-dso-ozon-content-h{background-color:transparent;color:#39870c;text-decoration:underline;cursor:pointer}[interactive].sc-dso-ozon-content-h:hover,[interactive].sc-dso-ozon-content-h:focus{color:#676cb0;text-decoration:underline}[interactive].sc-dso-ozon-content-h:active{text-decoration:none}.deleted-start.sc-dso-ozon-content,.deleted-end.sc-dso-ozon-content{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button.toggle-note.sc-dso-ozon-content{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;border:0;color:#39870c;line-height:1;padding:0;background-color:transparent}button.toggle-note.sc-dso-ozon-content:focus,button.toggle-note.sc-dso-ozon-content:focus-visible{outline-offset:2px}button.toggle-note.sc-dso-ozon-content:active{outline:0}button.toggle-note.extern.sc-dso-ozon-content::after,button.toggle-note.download.sc-dso-ozon-content::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}button.toggle-note[disabled].sc-dso-ozon-content{color:#afcf9d}button.toggle-note.sc-dso-ozon-content:not([disabled]):hover{color:#676cb0;text-decoration:underline}button.toggle-note.sc-dso-ozon-content:not([disabled]):active{color:#676cb0}button.toggle-note.btn-align.sc-dso-ozon-content{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}button.toggle-note.extern.sc-dso-ozon-content::after,button.toggle-note.download.sc-dso-ozon-content::after{position:relative;top:-2px}button.toggle-note.download.sc-dso-ozon-content::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}button.toggle-note.download[disabled].sc-dso-ozon-content::after{--dso-icon:var(--di-download-grasgroen-40)}button.toggle-note.download.sc-dso-ozon-content:not([disabled]):hover::after,button.toggle-note.download.sc-dso-ozon-content:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}button.toggle-note.extern.sc-dso-ozon-content::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}button.toggle-note.extern[disabled].sc-dso-ozon-content::after{--dso-icon:var(--di-external-link-grasgroen-40)}button.toggle-note.extern.sc-dso-ozon-content:not([disabled]):hover::after,button.toggle-note.extern.sc-dso-ozon-content:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}button.toggle-note.sc-dso-ozon-content dso-icon.sc-dso-ozon-content+span.sc-dso-ozon-content:not(.sr-only),button.toggle-note.sc-dso-ozon-content svg.di.sc-dso-ozon-content+span.sc-dso-ozon-content:not(.sr-only),button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only)+dso-icon.sc-dso-ozon-content,button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only)+svg.di.sc-dso-ozon-content{margin-left:8px}button.toggle-note.sc-dso-ozon-content dso-icon.sc-dso-ozon-content,button.toggle-note.sc-dso-ozon-content svg.di.sc-dso-ozon-content,button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content{vertical-align:middle}span[role=section].sc-dso-ozon-content,span[role=paragraph].sc-dso-ozon-content{display:block}.fallback.sc-dso-ozon-content{display:block}.od-Term.sc-dso-ozon-content{font-weight:700}.od-Definitie.sc-dso-ozon-content,.od-Tussenkop.sc-dso-ozon-content{font-style:italic}.od-Inhoud.sc-dso-ozon-content,.od-Inhoud.sc-dso-ozon-content>.od-Lijst.sc-dso-ozon-content,.od-IntIoRef.sc-dso-ozon-content,.od-Lidnr.sc-dso-ozon-content,.od-LiNr.sc-dso-ozon-content,.od-Opschrift.sc-dso-ozon-content,.od-Tussenkop.sc-dso-ozon-content{display:inline}.od-Al.sc-dso-ozon-content,.od-Lijstaanhef.sc-dso-ozon-content{margin-bottom:0.75em}.od-IntIoRef.sc-dso-ozon-content{border-bottom:1px dotted}.od-LiNummer.sc-dso-ozon-content{float:left;min-width:0.7em;padding-right:0.3em;text-align:right}.od-Figuur.sc-dso-ozon-content img.sc-dso-ozon-content{margin-left:25px;max-width:100%;height:auto}.od-Figuur.sc-dso-ozon-content .od-Bijschrift.sc-dso-ozon-content{font-size:0.75rem;margin-left:25px;padding-bottom:2.5rem}.od-Tabel.sc-dso-ozon-content thead.sc-dso-ozon-content{font-weight:600}.od-Kadertekst.sc-dso-ozon-content{border:1px solid #e5e5e5;margin-bottom:1rem;padding:1rem}";
3956
+ const ozonContentCss = ".sc-dso-ozon-content-h:not([inline]) {\n display: block;\n}\n\n[inline].sc-dso-ozon-content-h {\n display: inline;\n}\n\n[deleted].sc-dso-ozon-content-h *.sc-dso-ozon-content {\n text-decoration: line-through !important;\n}\n\n[interactive].sc-dso-ozon-content-h {\n background-color: transparent;\n color: #39870c;\n text-decoration: underline;\n cursor: pointer;\n}\n[interactive].sc-dso-ozon-content-h:hover, [interactive].sc-dso-ozon-content-h:focus {\n color: #676cb0;\n text-decoration: underline;\n}\n[interactive].sc-dso-ozon-content-h:active {\n text-decoration: none;\n}\n\n.deleted-start.sc-dso-ozon-content, .deleted-end.sc-dso-ozon-content {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\nbutton.toggle-note.sc-dso-ozon-content {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\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}\nbutton.toggle-note.sc-dso-ozon-content:focus, button.toggle-note.sc-dso-ozon-content:focus-visible {\n outline-offset: 2px;\n}\nbutton.toggle-note.sc-dso-ozon-content:active {\n outline: 0;\n}\nbutton.toggle-note.extern.sc-dso-ozon-content::after, button.toggle-note.download.sc-dso-ozon-content::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\nbutton.toggle-note[disabled].sc-dso-ozon-content {\n color: #afcf9d;\n}\nbutton.toggle-note[disabled].dso-spinner-left.sc-dso-ozon-content, button.toggle-note[disabled].dso-spinner-right.sc-dso-ozon-content {\n color: #39870c;\n}\nbutton.toggle-note.sc-dso-ozon-content:not([disabled]):hover {\n color: #676cb0;\n text-decoration: underline;\n}\nbutton.toggle-note.sc-dso-ozon-content:not([disabled]):active {\n color: #676cb0;\n}\nbutton.toggle-note.btn-align.sc-dso-ozon-content {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\n}\nbutton.toggle-note.extern.sc-dso-ozon-content::after, button.toggle-note.download.sc-dso-ozon-content::after {\n position: relative;\n top: -2px;\n}\nbutton.toggle-note.download.sc-dso-ozon-content::after {\n background: var(--dso-icon, var(--di-download)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\nbutton.toggle-note.download[disabled].sc-dso-ozon-content::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\nbutton.toggle-note.download.sc-dso-ozon-content:not([disabled]):hover::after, button.toggle-note.download.sc-dso-ozon-content:not([disabled]):active::after {\n --dso-icon: var(--di-download-scampi);\n}\nbutton.toggle-note.extern.sc-dso-ozon-content::after {\n background: var(--dso-icon, var(--di-external-link)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\nbutton.toggle-note.extern[disabled].sc-dso-ozon-content::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\nbutton.toggle-note.extern.sc-dso-ozon-content:not([disabled]):hover::after, button.toggle-note.extern.sc-dso-ozon-content:not([disabled]):active::after {\n --dso-icon: var(--di-external-link-scampi);\n}\nbutton.toggle-note.dso-spinner-left.sc-dso-ozon-content::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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 8px;\n}\nbutton.toggle-note.dso-spinner-right.sc-dso-ozon-content::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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 8px;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + dso-icon.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.sc-dso-ozon-content {\n margin-left: 8px;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content svg.di.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content {\n vertical-align: middle;\n}\n\nspan[role=section].sc-dso-ozon-content, span[role=paragraph].sc-dso-ozon-content {\n display: block;\n}\n\n.fallback.sc-dso-ozon-content {\n display: block;\n}\n\n.od-Term.sc-dso-ozon-content {\n font-weight: 700;\n}\n\n.od-Definitie.sc-dso-ozon-content, .od-Tussenkop.sc-dso-ozon-content {\n font-style: italic;\n}\n\n.od-Inhoud.sc-dso-ozon-content, .od-Inhoud.sc-dso-ozon-content > .od-Lijst.sc-dso-ozon-content, .od-IntIoRef.sc-dso-ozon-content, .od-Lidnr.sc-dso-ozon-content, .od-LiNr.sc-dso-ozon-content, .od-Opschrift.sc-dso-ozon-content, .od-Tussenkop.sc-dso-ozon-content {\n display: inline;\n}\n\n.od-Al.sc-dso-ozon-content, .od-Lijstaanhef.sc-dso-ozon-content {\n margin-bottom: 0.75em;\n}\n\n.od-IntIoRef.sc-dso-ozon-content {\n border-bottom: 1px dotted;\n}\n\n.od-LiNummer.sc-dso-ozon-content {\n float: left;\n min-width: 0.7em;\n padding-right: 0.3em;\n text-align: right;\n}\n\n.od-Figuur.sc-dso-ozon-content img.sc-dso-ozon-content {\n margin-left: 25px;\n max-width: 100%;\n height: auto;\n}\n\n.od-Figuur.sc-dso-ozon-content .od-Bijschrift.sc-dso-ozon-content {\n font-size: 0.75rem;\n margin-left: 25px;\n padding-bottom: 2.5rem;\n}\n\n.od-Tabel.sc-dso-ozon-content thead.sc-dso-ozon-content {\n font-weight: 600;\n}\n\n.od-Kadertekst.sc-dso-ozon-content {\n border: 1px solid #e5e5e5;\n margin-bottom: 1rem;\n padding: 1rem;\n}";
3844
3957
 
3845
3958
  let OzonContent = class extends HTMLElement {
3846
3959
  constructor() {
@@ -3884,7 +3997,7 @@ let OzonContent = class extends HTMLElement {
3884
3997
  };
3885
3998
  const transformed = this.mapper.transform((_a = this.content) !== null && _a !== void 0 ? _a : '', context);
3886
3999
  if (this.deleted) {
3887
- return (h("section", null, h("span", { class: "deleted-start" }, "Begin verwijderd element"), transformed, h("span", { class: "deleted-end" }, "Einde verwijderd element")));
4000
+ return (h("section", null, h("slot", { name: "prefix" }), h("span", { class: "deleted-start" }, "Begin verwijderd element"), transformed, h("span", { class: "deleted-end" }, "Einde verwijderd element"), h("slot", { name: "suffix" })));
3888
4001
  }
3889
4002
  return (h(Host, { onClick: (e) => this.handleHostOnClick(e) }, h("slot", { name: "prefix" }), transformed, h("slot", { name: "suffix" })));
3890
4003
  }
@@ -3914,13 +4027,16 @@ let Pagination = class extends HTMLElement {
3914
4027
  }
3915
4028
  ;
3916
4029
  render() {
4030
+ var _a;
3917
4031
  if (!this.totalPages) {
3918
4032
  return null;
3919
4033
  }
4034
+ const currentPage = (_a = this.currentPage) !== null && _a !== void 0 ? _a : 0;
3920
4035
  const pages = Array.from({ length: this.totalPages }, (_value, i) => i + 1);
3921
- return (h("ul", { class: "pagination" }, h("li", { class: this.currentPage === pages[0] ? 'dso-page-hidden' : undefined }, h("a", { href: this.formatHref(pages[0]), "aria-label": "Vorige", onClick: e => this.currentPage && this.clickHandler(e, pages[this.currentPage - 2]) }, h("dso-icon", { icon: "chevron-left" }))), pages.map(page => (h("li", { key: page, class: this.currentPage === page ? 'active' : undefined }, this.currentPage === page
4036
+ const currentPageOutOfBounds = currentPage < pages[0] || currentPage > pages[pages.length - 1];
4037
+ return (h("ul", { class: "pagination" }, h("li", { class: (currentPage <= pages[0] || currentPageOutOfBounds) ? 'dso-page-hidden' : undefined }, h("a", { href: this.formatHref(pages[0]), "aria-label": "Vorige", onClick: e => currentPage && this.clickHandler(e, pages[currentPage - 2]) }, h("dso-icon", { icon: "chevron-left" }))), pages.map(page => (h("li", { key: page, class: currentPage === page ? 'active' : undefined }, currentPage === page
3922
4038
  ? (h("span", { "aria-current": "page" }, page))
3923
- : (h("a", { href: this.formatHref(page), onClick: e => this.clickHandler(e, page) }, page))))), h("li", { class: this.currentPage === pages[pages.length - 1] ? 'dso-page-hidden' : undefined }, h("a", { href: this.formatHref(pages[pages.length - 1]), "aria-label": "Volgende", onClick: e => this.currentPage && this.clickHandler(e, pages[this.currentPage]) }, h("dso-icon", { icon: "chevron-right" })))));
4039
+ : (h("a", { href: this.formatHref(page), onClick: e => this.clickHandler(e, page) }, page))))), h("li", { class: (currentPage >= pages[pages.length - 1] || currentPageOutOfBounds) ? 'dso-page-hidden' : undefined }, h("a", { href: this.formatHref(pages[pages.length - 1]), "aria-label": "Volgende", onClick: e => currentPage && this.clickHandler(e, pages[currentPage]) }, h("dso-icon", { icon: "chevron-right" })))));
3924
4040
  }
3925
4041
  static get style() { return paginationCss; }
3926
4042
  };
@@ -5979,6 +6095,11 @@ let Tooltip = class extends HTMLElement {
5979
6095
  state.styles.popper = Object.assign(Object.assign({}, state.styles.popper), { maxWidth: `${width}px` });
5980
6096
  },
5981
6097
  };
6098
+ this.keyDownListener = (event) => {
6099
+ if (event.key === 'Escape') {
6100
+ this.deactivate();
6101
+ }
6102
+ };
5982
6103
  }
5983
6104
  /**
5984
6105
  * Activate the tooltip (Sets the `active` attribute)
@@ -6037,6 +6158,7 @@ let Tooltip = class extends HTMLElement {
6037
6158
  (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
6038
6159
  modifiers: [{ name: 'eventListeners', enabled: true }]
6039
6160
  });
6161
+ document.addEventListener('keydown', this.keyDownListener);
6040
6162
  });
6041
6163
  }
6042
6164
  }
@@ -6045,6 +6167,7 @@ let Tooltip = class extends HTMLElement {
6045
6167
  (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
6046
6168
  modifiers: [{ name: 'eventListeners', enabled: false }]
6047
6169
  });
6170
+ document.removeEventListener('keydown', this.keyDownListener);
6048
6171
  }
6049
6172
  setTimeout(() => (this.hidden = true), transitionDuration);
6050
6173
  }
@@ -6137,7 +6260,7 @@ const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize }) => {
6137
6260
  h("div", { onClick: (e) => owner.itemClick(e, ancestors, item) },
6138
6261
  h("dso-icon", { icon: item.open ? 'minus-square' : 'plus-square' }))
6139
6262
  : h("dso-icon", null)),
6140
- h("p", { class: clsx('tree-content', { 'active': item.active }, { 'selected': item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? '' + (!!item.open && !!((_b = item.items) === null || _b === void 0 ? void 0 : _b.length)) : undefined, "aria-current": item.active ? 'true' : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? 'true' : undefined, onClick: (e) => owner.itemClick(e, ancestors, item) },
6263
+ h("p", { class: clsx('tree-content', { 'active': item.active }, { 'selected': item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? '' + (!!item.open && !!((_b = item.items) === null || _b === void 0 ? void 0 : _b.length)) : undefined, "aria-current": item.active ? 'true' : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? 'true' : undefined, "data-item-id": item.id, onClick: (e) => owner.itemClick(e, ancestors, item) },
6141
6264
  item.selected && h("span", { class: "sr-only" }, "Resultaat: "),
6142
6265
  item.href
6143
6266
  ? h("a", { href: item.href, tabindex: "-1" }, item.label)
@@ -6223,6 +6346,28 @@ let TreeView = class extends HTMLElement {
6223
6346
  }
6224
6347
  };
6225
6348
  }
6349
+ /**
6350
+ * Set focus on the last item in the specified path.
6351
+ * The consumer is responsible for providing a TreeView collection where the last item is visible.
6352
+ * @async
6353
+ * @returns Whether the item was found.
6354
+ */
6355
+ async focusItem(path) {
6356
+ var _a;
6357
+ const tree = this.tree;
6358
+ if (!tree || path.length === 0) {
6359
+ return false;
6360
+ }
6361
+ const itemToFocus = path[path.length - 1];
6362
+ const elementToFocus = Array.from((_a = tree.querySelectorAll('p')) !== null && _a !== void 0 ? _a : [])
6363
+ .filter(item => item.offsetWidth > 0 && item.offsetHeight > 0)
6364
+ .find(item => item.dataset['itemId'] === itemToFocus.id);
6365
+ if (!elementToFocus) {
6366
+ return false;
6367
+ }
6368
+ TreeView.setFocus(tree, elementToFocus);
6369
+ return true;
6370
+ }
6226
6371
  static setFocus(tree, target) {
6227
6372
  if (target) {
6228
6373
  Array.from(tree.querySelectorAll('p'))
@@ -6299,7 +6444,7 @@ let TreeView = class extends HTMLElement {
6299
6444
  }
6300
6445
  render() {
6301
6446
  var _a;
6302
- return (h("div", { id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e) }, h("ul", { role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length })))));
6447
+ return (h("div", { id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: element => this.tree = element }, h("ul", { role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length })))));
6303
6448
  }
6304
6449
  static get style() { return treeViewCss; }
6305
6450
  };
@@ -6311,7 +6456,7 @@ const ViewerGridFilterpanelButtons = ({ onApply, onCancel }) => (h("div", { clas
6311
6456
  h("span", null, "Toepassen"),
6312
6457
  h("dso-icon", { icon: "chevron-right" }))));
6313
6458
 
6314
- const viewerGridCss = "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}h1,.h1,h2,.h2,h3,.h3{margin-bottom:16px;margin-top:24px}h1,.h1{line-height:1.25}h1{color:#275937;font-size:2rem;font-weight:700}h2,.h2{line-height:1.33}h2{color:#275937;font-size:1.5rem;font-weight:700}h3,.h3{line-height:1.2}h3{color:#275937;font-size:1.25rem;font-weight:600}h4,.h4,h5,.h5,h6,.h6{margin-bottom:16px;margin-top:12px}h4,.h4{line-height:1.5}h4{color:#275937;font-size:1rem;font-weight:600}h5,.h5{line-height:1.5}h5{color:#191919;font-size:1rem;font-weight:600}h6,.h6{line-height:1.5}*,*::after,*::before{box-sizing:border-box}:host{display:flex;height:100vh;overflow:hidden;position:relative}:host([small]) .dso-map-panel{flex-basis:375px;min-width:0;max-width:375px}@media screen and (max-width: 375px){:host([small]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:0;transition:none}}:host([medium]) .dso-map-panel{flex-basis:624px;min-width:375px;max-width:624px}@media screen and (max-width: 624px){:host([medium]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:375px;transition:none}}:host([large]) .dso-map-panel{flex-basis:60%;min-width:768px;max-width:1024px}@media screen and (max-width: 768px){:host([large]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:768px;transition:none}}.shrink,.expand,.overlay-close-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;border:0;color:#39870c;line-height:1;padding:0;background-color:transparent}.shrink:focus,.shrink:focus-visible,.expand:focus,.expand:focus-visible,.overlay-close-button:focus,.overlay-close-button:focus-visible{outline-offset:2px}.shrink:active,.expand:active,.overlay-close-button:active{outline:0}.shrink.extern::after,.shrink.download::after,.expand.extern::after,.expand.download::after,.overlay-close-button.extern::after,.overlay-close-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.shrink[disabled],.expand[disabled],.overlay-close-button[disabled]{color:#afcf9d}.shrink:not([disabled]):hover,.expand:not([disabled]):hover,.overlay-close-button:not([disabled]):hover{color:#676cb0;text-decoration:underline}.shrink:not([disabled]):active,.expand:not([disabled]):active,.overlay-close-button:not([disabled]):active{color:#676cb0}.shrink.btn-align,.expand.btn-align,.overlay-close-button.btn-align{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}.shrink.extern::after,.shrink.download::after,.expand.extern::after,.expand.download::after,.overlay-close-button.extern::after,.overlay-close-button.download::after{position:relative;top:-2px}.shrink.download::after,.expand.download::after,.overlay-close-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.shrink.download[disabled]::after,.expand.download[disabled]::after,.overlay-close-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.shrink.download:not([disabled]):hover::after,.shrink.download:not([disabled]):active::after,.expand.download:not([disabled]):hover::after,.expand.download:not([disabled]):active::after,.overlay-close-button.download:not([disabled]):hover::after,.overlay-close-button.download:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}.shrink.extern::after,.expand.extern::after,.overlay-close-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.shrink.extern[disabled]::after,.expand.extern[disabled]::after,.overlay-close-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.shrink.extern:not([disabled]):hover::after,.shrink.extern:not([disabled]):active::after,.expand.extern:not([disabled]):hover::after,.expand.extern:not([disabled]):active::after,.overlay-close-button.extern:not([disabled]):hover::after,.overlay-close-button.extern:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}.shrink dso-icon+span:not(.sr-only),.shrink svg.di+span:not(.sr-only),.shrink span:not(.sr-only)+dso-icon,.shrink span:not(.sr-only)+svg.di,.expand dso-icon+span:not(.sr-only),.expand svg.di+span:not(.sr-only),.expand span:not(.sr-only)+dso-icon,.expand span:not(.sr-only)+svg.di,.overlay-close-button dso-icon+span:not(.sr-only),.overlay-close-button svg.di+span:not(.sr-only),.overlay-close-button span:not(.sr-only)+dso-icon,.overlay-close-button span:not(.sr-only)+svg.di{margin-left:8px}.shrink dso-icon,.shrink svg.di,.shrink span,.expand dso-icon,.expand svg.di,.expand span,.overlay-close-button dso-icon,.overlay-close-button svg.di,.overlay-close-button span{vertical-align:middle}.shrink:hover,.expand:hover,.overlay-close-button:hover{cursor:pointer}.shrink[disabled],.expand[disabled],.overlay-close-button[disabled]{display:none}.overlay-close-button{position:absolute;top:8px;right:16px}.overlay-close-button .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-map-panel{background-color:#fff;box-shadow:2px 0 8px 0 rgba(0, 0, 0, 0.4);flex-shrink:0;flex-grow:0;padding-right:8px;position:relative;transition:flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;z-index:100}.dso-map-panel .dso-filterblok-address{font-weight:bold;margin:8px 0}.dso-map-panel .main{height:100%;overflow-y:scroll;padding:8px 16px}.sizing-buttons{left:calc(100% + 1px);overflow-x:hidden;padding:0 4px 4px 0;position:absolute;top:16px;transition:left 200ms ease-in;width:44px;z-index:-1}.sizing-buttons button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;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-width:56px;padding:11px 15px;border:0;padding:8px;border-radius:0;border-bottom-right-radius:4px;border-top-right-radius:4px;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.4);flex:0 0 100%;height:40px;min-width:auto;width:40px}.sizing-buttons button:focus,.sizing-buttons button:focus-visible{outline-offset:2px}.sizing-buttons button:active{outline:0}.sizing-buttons button.extern::after,.sizing-buttons button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.sizing-buttons button:hover{background-color:#39870c;border-color:#39870c;color:#fff}.sizing-buttons button:active{background-color:#275937;border-color:#275937;color:#fff}.sizing-buttons button[disabled],.sizing-buttons button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.sizing-buttons button.btn-sm{line-height:16px}.sizing-buttons button.btn-sm dso-icon,.sizing-buttons button.btn-sm svg.di,.sizing-buttons button.btn-sm.extern::after,.sizing-buttons button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.sizing-buttons button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.sizing-buttons button.download:hover::after{--dso-icon:var(--di-download-wit)}.sizing-buttons button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.sizing-buttons button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.sizing-buttons button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.sizing-buttons button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.sizing-buttons button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sizing-buttons button:focus-visible{background-color:#39870c;border-color:#39870c;color:#fff;outline:none}.sizing-buttons button:hover dso-icon{color:#fff}.map{height:100%;width:100%;overflow:hidden}#filterpanel,.overlay{background-color:#fff;height:100%;overflow-y:auto;position:absolute;z-index:101}#filterpanel{box-shadow:2px 0 5px #666;padding:40px 16px 8px;left:0;max-width:896px;width:calc(100vw - 40px)}@media screen and (max-width: 768px){#filterpanel{width:100vw}#filterpanel::before{display:none !important}}#filterpanel::before{content:\"\";display:block;position:fixed;top:0;bottom:0;right:0;left:896px;background-color:rgba(0, 0, 0, 0.5)}@media screen and (max-width: 936px){#filterpanel::before{left:auto;width:40px}}.overlay{box-shadow:-2px 0 5px #666;padding:40px 16px 8px;right:0;width:624px}@media screen and (max-width: 624px){.overlay{width:100vw}}.overlay::before{content:\"\";display:block;position:fixed;top:0;bottom:0;left:0;right:624px;background-color:rgba(0, 0, 0, 0.5)}.filterpanel-buttons{text-align:right}.filterpanel-buttons .cancel-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;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-width:56px;padding:11px 15px;line-height:16px}.filterpanel-buttons .cancel-button:focus,.filterpanel-buttons .cancel-button:focus-visible{outline-offset:2px}.filterpanel-buttons .cancel-button:active{outline:0}.filterpanel-buttons .cancel-button.extern::after,.filterpanel-buttons .cancel-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.filterpanel-buttons .cancel-button:hover{background-color:#39870c;border-color:#39870c;color:#fff}.filterpanel-buttons .cancel-button:active{background-color:#275937;border-color:#275937;color:#fff}.filterpanel-buttons .cancel-button[disabled],.filterpanel-buttons .cancel-button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.filterpanel-buttons .cancel-button.btn-sm{line-height:16px}.filterpanel-buttons .cancel-button.btn-sm dso-icon,.filterpanel-buttons .cancel-button.btn-sm svg.di,.filterpanel-buttons .cancel-button.btn-sm.extern::after,.filterpanel-buttons .cancel-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .cancel-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.filterpanel-buttons .cancel-button.download:hover::after{--dso-icon:var(--di-download-wit)}.filterpanel-buttons .cancel-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.filterpanel-buttons .cancel-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.filterpanel-buttons .cancel-button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.filterpanel-buttons .cancel-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.filterpanel-buttons .cancel-button dso-icon,.filterpanel-buttons .cancel-button svg.di{margin-left:-8px;margin-right:8px}.filterpanel-buttons .cancel-button span+dso-icon,.filterpanel-buttons .cancel-button span+svg.di{margin-left:8px;margin-right:-8px}.filterpanel-buttons .cancel-button dso-icon,.filterpanel-buttons .cancel-button svg.di,.filterpanel-buttons .cancel-button.extern::after,.filterpanel-buttons .cancel-button.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .apply-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;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-width:56px;padding:11px 15px;line-height:16px}.filterpanel-buttons .apply-button:focus,.filterpanel-buttons .apply-button:focus-visible{outline-offset:2px}.filterpanel-buttons .apply-button:active{outline:0}.filterpanel-buttons .apply-button.extern::after,.filterpanel-buttons .apply-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.filterpanel-buttons .apply-button:hover{background-color:#275937;border-color:#275937;color:#fff}.filterpanel-buttons .apply-button:active{background-color:#15301e;border-color:#15301e;color:#fff}.filterpanel-buttons .apply-button[disabled],.filterpanel-buttons .apply-button[disabled]:hover{background-color:#afcf9d;border-color:#afcf9d;color:#fff}.filterpanel-buttons .apply-button.btn-sm{line-height:16px}.filterpanel-buttons .apply-button.btn-sm dso-icon,.filterpanel-buttons .apply-button.btn-sm svg.di,.filterpanel-buttons .apply-button.btn-sm.extern::after,.filterpanel-buttons .apply-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .apply-button.download::after{background:var(--dso-icon, var(--di-download-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.filterpanel-buttons .apply-button.extern::after{background:var(--dso-icon, var(--di-external-link-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.filterpanel-buttons .apply-button dso-icon,.filterpanel-buttons .apply-button svg.di{margin-left:-8px;margin-right:8px}.filterpanel-buttons .apply-button span+dso-icon,.filterpanel-buttons .apply-button span+svg.di{margin-left:8px;margin-right:-8px}.filterpanel-buttons .apply-button dso-icon,.filterpanel-buttons .apply-button svg.di,.filterpanel-buttons .apply-button.extern::after,.filterpanel-buttons .apply-button.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .cancel-button+.apply-button{margin-left:16px}";
6459
+ const viewerGridCss = "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\nh1,\n.h1,\nh2,\n.h2,\nh3,\n.h3 {\n margin-bottom: 16px;\n margin-top: 24px;\n}\n\nh1,\n.h1 {\n line-height: 1.25;\n}\n\nh1 {\n color: #275937;\n font-size: 2rem;\n font-weight: 700;\n}\n\nh2,\n.h2 {\n line-height: 1.33;\n}\n\nh2 {\n color: #275937;\n font-size: 1.5rem;\n font-weight: 700;\n}\n\nh3,\n.h3 {\n line-height: 1.2;\n}\n\nh3 {\n color: #275937;\n font-size: 1.25rem;\n font-weight: 600;\n}\n\nh4,\n.h4,\nh5,\n.h5,\nh6,\n.h6 {\n margin-bottom: 16px;\n margin-top: 12px;\n}\n\nh4,\n.h4 {\n line-height: 1.5;\n}\n\nh4 {\n color: #275937;\n font-size: 1rem;\n font-weight: 600;\n}\n\nh5,\n.h5 {\n line-height: 1.5;\n}\n\nh5 {\n color: #191919;\n font-size: 1rem;\n font-weight: 600;\n}\n\nh6,\n.h6 {\n line-height: 1.5;\n}\n\n*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host {\n display: flex;\n height: 100vh;\n overflow: hidden;\n position: relative;\n}\n\n:host([small]) .dso-map-panel {\n flex-basis: 375px;\n min-width: 0;\n max-width: 375px;\n}\n@media screen and (max-width: 375px) {\n :host([small]) .dso-map-panel {\n flex-basis: 100vw;\n max-width: 100vw;\n min-width: 0;\n transition: none;\n }\n}\n\n:host([medium]) .dso-map-panel {\n flex-basis: 624px;\n min-width: 375px;\n max-width: 624px;\n}\n@media screen and (max-width: 624px) {\n :host([medium]) .dso-map-panel {\n flex-basis: 100vw;\n max-width: 100vw;\n min-width: 375px;\n transition: none;\n }\n}\n\n:host([large]) .dso-map-panel {\n flex-basis: 60%;\n min-width: 768px;\n max-width: 1024px;\n}\n@media screen and (max-width: 768px) {\n :host([large]) .dso-map-panel {\n flex-basis: 100vw;\n max-width: 100vw;\n min-width: 768px;\n transition: none;\n }\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\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}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n outline: 0;\n}\n.shrink.extern::after, .shrink.download::after,\n.expand.extern::after,\n.expand.download::after,\n.overlay-close-button.extern::after,\n.overlay-close-button.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n color: #676cb0;\n text-decoration: underline;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n color: #676cb0;\n}\n.shrink.btn-align,\n.expand.btn-align,\n.overlay-close-button.btn-align {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\n}\n.shrink.extern::after, .shrink.download::after,\n.expand.extern::after,\n.expand.download::after,\n.overlay-close-button.extern::after,\n.overlay-close-button.download::after {\n position: relative;\n top: -2px;\n}\n.shrink.download::after,\n.expand.download::after,\n.overlay-close-button.download::after {\n background: var(--dso-icon, var(--di-download)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.shrink.download[disabled]::after,\n.expand.download[disabled]::after,\n.overlay-close-button.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\n.shrink.download:not([disabled]):hover::after, .shrink.download:not([disabled]):active::after,\n.expand.download:not([disabled]):hover::after,\n.expand.download:not([disabled]):active::after,\n.overlay-close-button.download:not([disabled]):hover::after,\n.overlay-close-button.download:not([disabled]):active::after {\n --dso-icon: var(--di-download-scampi);\n}\n.shrink.extern::after,\n.expand.extern::after,\n.overlay-close-button.extern::after {\n background: var(--dso-icon, var(--di-external-link)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.shrink.extern[disabled]::after,\n.expand.extern[disabled]::after,\n.overlay-close-button.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.shrink.extern:not([disabled]):hover::after, .shrink.extern:not([disabled]):active::after,\n.expand.extern:not([disabled]):hover::after,\n.expand.extern:not([disabled]):active::after,\n.overlay-close-button.extern:not([disabled]):hover::after,\n.overlay-close-button.extern:not([disabled]):active::after {\n --dso-icon: var(--di-external-link-scampi);\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n margin-left: 8px;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n cursor: pointer;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n display: none;\n}\n\n.overlay-close-button {\n position: absolute;\n top: 8px;\n right: 16px;\n}\n.overlay-close-button .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.dso-map-panel {\n background-color: #fff;\n box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 8px;\n position: relative;\n transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;\n z-index: 100;\n}\n.dso-map-panel .dso-filterblok-address {\n font-weight: bold;\n margin: 8px 0;\n}\n.dso-map-panel .main {\n height: 100%;\n overflow-y: scroll;\n padding: 8px 16px;\n}\n\n.sizing-buttons {\n left: calc(100% + 1px);\n overflow-x: hidden;\n padding: 0 4px 4px 0;\n position: absolute;\n top: 16px;\n transition: left 200ms ease-in;\n width: 44px;\n z-index: -1;\n}\n.sizing-buttons button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\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-width: 56px;\n padding: 11px 15px;\n border: 0;\n padding: 8px;\n border-radius: 0;\n border-bottom-right-radius: 4px;\n border-top-right-radius: 4px;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n flex: 0 0 100%;\n height: 40px;\n min-width: auto;\n width: 40px;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible {\n outline-offset: 2px;\n}\n.sizing-buttons button:active {\n outline: 0;\n}\n.sizing-buttons button.extern::after, .sizing-buttons button.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.sizing-buttons button:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.sizing-buttons button:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.sizing-buttons button.btn-sm {\n line-height: 16px;\n}\n.sizing-buttons button.btn-sm dso-icon,\n.sizing-buttons button.btn-sm svg.di, .sizing-buttons button.btn-sm.extern::after, .sizing-buttons button.btn-sm.download::after, .sizing-buttons button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button.download::after {\n background: var(--dso-icon, var(--di-download)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.sizing-buttons button.download:hover::after {\n --dso-icon: var(--di-download-wit);\n}\n.sizing-buttons button.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\n.sizing-buttons button.extern::after {\n background: var(--dso-icon, var(--di-external-link)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.sizing-buttons button.extern:hover::after {\n --dso-icon: var(--di-external-link-wit);\n}\n.sizing-buttons button.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.sizing-buttons button > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.sizing-buttons button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.sizing-buttons button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.sizing-buttons button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button:focus-visible {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n outline: none;\n}\n.sizing-buttons button:hover dso-icon {\n color: #fff;\n}\n\n.map {\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n#filterpanel,\n.overlay {\n background-color: #fff;\n height: 100%;\n overflow-y: auto;\n position: absolute;\n z-index: 101;\n}\n\n#filterpanel {\n box-shadow: 2px 0 5px #666;\n padding: 40px 16px 8px;\n left: 0;\n max-width: 896px;\n width: calc(100vw - 40px);\n}\n@media screen and (max-width: 768px) {\n #filterpanel {\n width: 100vw;\n }\n #filterpanel::before {\n display: none !important;\n }\n}\n#filterpanel::before {\n content: \"\";\n display: block;\n position: fixed;\n top: 0;\n bottom: 0;\n right: 0;\n left: 896px;\n background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 936px) {\n #filterpanel::before {\n left: auto;\n width: 40px;\n }\n}\n\n.overlay {\n box-shadow: -2px 0 5px #666;\n padding: 40px 16px 8px;\n right: 0;\n width: 624px;\n}\n@media screen and (max-width: 624px) {\n .overlay {\n width: 100vw;\n }\n}\n.overlay::before {\n content: \"\";\n display: block;\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 624px;\n background-color: rgba(0, 0, 0, 0.5);\n}\n\n.filterpanel-buttons {\n text-align: right;\n}\n.filterpanel-buttons .cancel-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\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-width: 56px;\n padding: 11px 15px;\n line-height: 16px;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n outline: 0;\n}\n.filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.filterpanel-buttons .cancel-button:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.filterpanel-buttons .cancel-button:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.btn-sm {\n line-height: 16px;\n}\n.filterpanel-buttons .cancel-button.btn-sm dso-icon,\n.filterpanel-buttons .cancel-button.btn-sm svg.di, .filterpanel-buttons .cancel-button.btn-sm.extern::after, .filterpanel-buttons .cancel-button.btn-sm.download::after, .filterpanel-buttons .cancel-button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.download::after {\n background: var(--dso-icon, var(--di-download)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.filterpanel-buttons .cancel-button.download:hover::after {\n --dso-icon: var(--di-download-wit);\n}\n.filterpanel-buttons .cancel-button.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\n.filterpanel-buttons .cancel-button.extern::after {\n background: var(--dso-icon, var(--di-external-link)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.filterpanel-buttons .cancel-button.extern:hover::after {\n --dso-icon: var(--di-external-link-wit);\n}\n.filterpanel-buttons .cancel-button.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.filterpanel-buttons .cancel-button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\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-width: 56px;\n padding: 11px 15px;\n line-height: 16px;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n outline: 0;\n}\n.filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.filterpanel-buttons .apply-button:hover {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n background-color: #15301e;\n border-color: #15301e;\n color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n background-color: #afcf9d;\n border-color: #afcf9d;\n color: #fff;\n}\n.filterpanel-buttons .apply-button.btn-sm {\n line-height: 16px;\n}\n.filterpanel-buttons .apply-button.btn-sm dso-icon,\n.filterpanel-buttons .apply-button.btn-sm svg.di, .filterpanel-buttons .apply-button.btn-sm.extern::after, .filterpanel-buttons .apply-button.btn-sm.download::after, .filterpanel-buttons .apply-button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button.download::after {\n background: var(--dso-icon, var(--di-download-wit)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.filterpanel-buttons .apply-button.extern::after {\n background: var(--dso-icon, var(--di-external-link-wit)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.filterpanel-buttons .apply-button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.filterpanel-buttons .apply-button.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n margin-left: 16px;\n}";
6315
6460
 
6316
6461
  const TRANSITION_TIME = 200; // Keep in sync with dso-viewer-grid.variables.scss:$dso-viewer-grid-transition-time;
6317
6462
  let ViewerGrid = class extends HTMLElement {
@@ -6431,7 +6576,7 @@ let ViewerGrid = class extends HTMLElement {
6431
6576
 
6432
6577
  const DsoAlert = /*@__PURE__*/proxyCustomElement(Alert, [1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]);
6433
6578
  const DsoAttachmentsCounter = /*@__PURE__*/proxyCustomElement(AttachmentsCounter, [1,"dso-attachments-counter",{"count":[2]}]);
6434
- const DsoAutosuggest = /*@__PURE__*/proxyCustomElement(Autosuggest, [6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]);
6579
+ const DsoAutosuggest = /*@__PURE__*/proxyCustomElement(Autosuggest, [6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32]},[[4,"click","onDocumentClick"]]]);
6435
6580
  const DsoBadge = /*@__PURE__*/proxyCustomElement(Badge, [1,"dso-badge",{"status":[1]}]);
6436
6581
  const DsoBanner = /*@__PURE__*/proxyCustomElement(Banner, [1,"dso-banner",{"status":[1]}]);
6437
6582
  const DsoDatePicker = /*@__PURE__*/proxyCustomElement(DsoDatePicker$1, [2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32]},[[6,"click","handleDocumentClick"]]]);
@@ -6443,7 +6588,7 @@ const DsoIcon = /*@__PURE__*/proxyCustomElement(Icon, [1,"dso-icon",{"icon":[1]}
6443
6588
  const DsoImageOverlay = /*@__PURE__*/proxyCustomElement(ImageOverlay, [1,"dso-image-overlay",{"active":[32],"focused":[32]}]);
6444
6589
  const DsoInfo = /*@__PURE__*/proxyCustomElement(Info, [1,"dso-info",{"fixed":[516],"active":[516]}]);
6445
6590
  const DsoInfoButton = /*@__PURE__*/proxyCustomElement(InfoButton, [1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]);
6446
- const DsoLabel = /*@__PURE__*/proxyCustomElement(Label, [1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]);
6591
+ const DsoLabel = /*@__PURE__*/proxyCustomElement(Label, [1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32]}]);
6447
6592
  const DsoMapBaseLayers = /*@__PURE__*/proxyCustomElement(MapBaseLayers, [1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]);
6448
6593
  const DsoMapControls = /*@__PURE__*/proxyCustomElement(MapControls, [1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]);
6449
6594
  const DsoMapOverlays = /*@__PURE__*/proxyCustomElement(MapOverlays, [1,"dso-map-overlays",{"group":[1],"overlays":[16]}]);