@dso-toolkit/core 45.0.1 → 45.2.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.
- package/dist/cjs/dso-accordion-section.cjs.entry.js +110 -0
- package/dist/cjs/dso-accordion.cjs.entry.js +297 -0
- package/dist/cjs/dso-alert.cjs.entry.js +3 -3
- package/dist/cjs/dso-attachments-counter.cjs.entry.js +3 -3
- package/dist/cjs/dso-autosuggest.cjs.entry.js +1 -1
- package/dist/cjs/dso-badge.cjs.entry.js +1 -1
- package/dist/cjs/dso-banner.cjs.entry.js +2 -2
- package/dist/cjs/dso-date-picker.cjs.entry.js +2 -2
- package/dist/cjs/dso-dropdown-menu.cjs.entry.js +3 -3
- package/dist/cjs/dso-header.cjs.entry.js +6 -6
- package/dist/cjs/dso-helpcenter-panel.cjs.entry.js +59 -3
- package/dist/cjs/dso-highlight-box.cjs.entry.js +2 -2
- package/dist/cjs/dso-icon.cjs.entry.js +2 -2
- package/dist/cjs/dso-image-overlay.cjs.entry.js +11 -5
- package/dist/cjs/dso-info-button.cjs.entry.js +4 -3
- package/dist/cjs/dso-info_2.cjs.entry.js +3 -3
- package/dist/cjs/dso-label.cjs.entry.js +1 -1
- package/dist/cjs/dso-map-base-layers.cjs.entry.js +1 -1
- package/dist/cjs/dso-map-controls.cjs.entry.js +2 -2
- package/dist/cjs/dso-map-overlays.cjs.entry.js +1 -1
- package/dist/cjs/dso-ozon-content.cjs.entry.js +77 -16
- package/dist/cjs/dso-pagination.cjs.entry.js +99 -7
- package/dist/cjs/dso-progress-bar.cjs.entry.js +2 -2
- package/dist/cjs/dso-progress-indicator.cjs.entry.js +1 -1
- package/dist/cjs/dso-responsive-element.cjs.entry.js +6 -1
- package/dist/cjs/dso-table.cjs.entry.js +89 -0
- package/dist/cjs/dso-toggletip.cjs.entry.js +2 -2
- package/dist/cjs/dso-toolkit.cjs.js +2 -2
- package/dist/cjs/dso-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/dso-tree-view.cjs.entry.js +1 -1
- package/dist/cjs/dso-viewer-grid.cjs.entry.js +11 -5
- package/dist/cjs/{focus-trap.esm-a85643b0.js → focus-trap.esm-e2addb10.js} +28 -11
- package/dist/cjs/{index-0a7c679a.js → index-4066351a.js} +7 -0
- package/dist/cjs/{index.esm-3520a2a6.js → index.esm-50325ea2.js} +110 -12
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +3 -0
- package/dist/collection/components/accordion/accordion.css +9 -0
- package/dist/collection/components/accordion/accordion.interfaces.js +1 -0
- package/dist/collection/components/accordion/accordion.js +260 -0
- package/dist/collection/components/accordion/accordion.template.js +26 -0
- package/dist/collection/components/accordion/components/accordion-section.css +221 -0
- package/dist/collection/components/accordion/components/accordion-section.js +292 -0
- package/dist/collection/components/alert/alert.css +14 -51
- package/dist/collection/components/alert/alert.js +1 -0
- package/dist/collection/components/attachments-counter/attachments-counter.css +0 -12
- package/dist/collection/components/attachments-counter/attachments-counter.js +2 -1
- package/dist/collection/components/banner/banner.css +0 -4
- package/dist/collection/components/date-picker/date-picker.css +2 -2
- package/dist/collection/components/dropdown-menu/dropdown-menu.css +0 -7
- package/dist/collection/components/header/header.css +38 -390
- package/dist/collection/components/header/header.js +22 -24
- package/dist/collection/components/header/header.template.js +1 -1
- package/dist/collection/components/helpcenter-panel/helpcenter-panel.css +21 -104
- package/dist/collection/components/helpcenter-panel/helpcenter-panel.js +71 -5
- package/dist/collection/components/highlight-box/highlight-box.css +1 -3
- package/dist/collection/components/image-overlay/image-overlay.css +37 -1134
- package/dist/collection/components/image-overlay/image-overlay.js +13 -3
- package/dist/collection/components/image-overlay/image-overlay.template.js +9 -1
- package/dist/collection/components/info/info.css +19 -1070
- package/dist/collection/components/info/info.js +1 -0
- package/dist/collection/components/info-button/info-button.css +8 -17
- package/dist/collection/components/info-button/info-button.js +9 -3
- package/dist/collection/components/map-controls/map-controls.css +20 -1172
- package/dist/collection/components/ozon-content/nodes/figuur.node.js +41 -6
- package/dist/collection/components/ozon-content/nodes/lijst.node.js +25 -0
- package/dist/collection/components/ozon-content/nodes/table.node/table.node.js +8 -7
- package/dist/collection/components/ozon-content/ozon-content-mapper.js +2 -0
- package/dist/collection/components/ozon-content/ozon-content.css +39 -49
- package/dist/collection/components/pagination/pagination.css +1 -0
- package/dist/collection/components/pagination/pagination.js +122 -14
- package/dist/collection/components/progress-bar/progress-bar.css +1 -1
- package/dist/collection/components/responsive-element/responsive-element.interfaces.js +1 -0
- package/dist/collection/components/responsive-element/responsive-element.js +48 -1
- package/dist/collection/components/responsive-element/responsive-element.template.js +4 -2
- package/dist/collection/components/table/table.css +296 -0
- package/dist/collection/components/table/table.interfaces.js +1 -0
- package/dist/collection/components/table/table.js +146 -0
- package/dist/collection/components/table/table.template.js +26 -0
- package/dist/collection/components/toggletip/toggletip.css +4 -0
- package/dist/collection/components/viewer-grid/viewer-grid.css +34 -1300
- package/dist/collection/components/viewer-grid/viewer-grid.js +12 -1
- package/dist/custom-elements/index.d.ts +18 -0
- package/dist/custom-elements/index.js +2052 -1230
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/p-02b2e01c.entry.js +1 -0
- package/dist/dso-toolkit/{p-d780f9ff.entry.js → p-05a9e206.entry.js} +1 -1
- package/dist/dso-toolkit/p-1a19ce42.entry.js +1 -0
- package/dist/dso-toolkit/p-22c35db5.js +5 -0
- package/dist/dso-toolkit/{p-361528b4.entry.js → p-2e74485e.entry.js} +1 -1
- package/dist/dso-toolkit/p-2f6b1092.entry.js +1 -0
- package/dist/dso-toolkit/{p-bf4d6f63.entry.js → p-3381c859.entry.js} +1 -1
- package/dist/dso-toolkit/{p-3799366e.entry.js → p-37a34037.entry.js} +1 -1
- package/dist/dso-toolkit/p-383227b9.entry.js +1 -0
- package/dist/dso-toolkit/p-42450cfe.js +1 -0
- package/dist/dso-toolkit/p-4c44d27c.entry.js +1 -0
- package/dist/dso-toolkit/{p-91b6a181.entry.js → p-4fd140e9.entry.js} +1 -1
- package/dist/dso-toolkit/p-53c7bf4f.entry.js +1 -0
- package/dist/dso-toolkit/p-662b7663.entry.js +1 -0
- package/dist/dso-toolkit/{p-d60876c2.entry.js → p-67b11174.entry.js} +1 -1
- package/dist/dso-toolkit/{p-375a2523.entry.js → p-6a414479.entry.js} +1 -1
- package/dist/dso-toolkit/{p-e4bcafc4.entry.js → p-6cac0292.entry.js} +1 -1
- package/dist/dso-toolkit/p-7213783b.entry.js +1 -0
- package/dist/dso-toolkit/p-83de460b.entry.js +1 -0
- package/dist/dso-toolkit/p-9aaadf4f.entry.js +1 -0
- package/dist/dso-toolkit/p-a5a5b24b.entry.js +1 -0
- package/dist/dso-toolkit/p-a9b0a83e.entry.js +1 -0
- package/dist/dso-toolkit/p-ac0c0eee.entry.js +1 -0
- package/dist/dso-toolkit/p-b6afe104.entry.js +1 -0
- package/dist/dso-toolkit/{p-590cbab6.entry.js → p-b9531adb.entry.js} +1 -1
- package/dist/dso-toolkit/{p-6bc71e48.entry.js → p-d2255268.entry.js} +1 -1
- package/dist/dso-toolkit/p-de50f5f1.entry.js +1 -0
- package/dist/dso-toolkit/p-e16b5d71.entry.js +1 -0
- package/dist/dso-toolkit/p-ea1d4c81.entry.js +1 -0
- package/dist/dso-toolkit/p-eb326df8.entry.js +1 -0
- package/dist/dso-toolkit/{p-25f8dbc6.entry.js → p-ec3b8800.entry.js} +1 -1
- package/dist/dso-toolkit/{p-16635f4b.entry.js → p-f1b5baf9.entry.js} +1 -1
- package/dist/dso-toolkit/p-f8b023c4.js +5 -0
- package/dist/esm/dso-accordion-section.entry.js +106 -0
- package/dist/esm/dso-accordion.entry.js +293 -0
- package/dist/esm/dso-alert.entry.js +3 -3
- package/dist/esm/dso-attachments-counter.entry.js +3 -3
- package/dist/esm/dso-autosuggest.entry.js +1 -1
- package/dist/esm/dso-badge.entry.js +1 -1
- package/dist/esm/dso-banner.entry.js +2 -2
- package/dist/esm/dso-date-picker.entry.js +2 -2
- package/dist/esm/dso-dropdown-menu.entry.js +3 -3
- package/dist/esm/dso-header.entry.js +6 -6
- package/dist/esm/dso-helpcenter-panel.entry.js +59 -3
- package/dist/esm/dso-highlight-box.entry.js +2 -2
- package/dist/esm/dso-icon.entry.js +2 -2
- package/dist/esm/dso-image-overlay.entry.js +11 -5
- package/dist/esm/dso-info-button.entry.js +4 -3
- package/dist/esm/dso-info_2.entry.js +3 -3
- package/dist/esm/dso-label.entry.js +1 -1
- package/dist/esm/dso-map-base-layers.entry.js +1 -1
- package/dist/esm/dso-map-controls.entry.js +2 -2
- package/dist/esm/dso-map-overlays.entry.js +1 -1
- package/dist/esm/dso-ozon-content.entry.js +77 -16
- package/dist/esm/dso-pagination.entry.js +99 -7
- package/dist/esm/dso-progress-bar.entry.js +2 -2
- package/dist/esm/dso-progress-indicator.entry.js +1 -1
- package/dist/esm/dso-responsive-element.entry.js +6 -1
- package/dist/esm/dso-table.entry.js +85 -0
- package/dist/esm/dso-toggletip.entry.js +2 -2
- package/dist/esm/dso-toolkit.js +2 -2
- package/dist/esm/dso-tooltip.entry.js +1 -1
- package/dist/esm/dso-tree-view.entry.js +1 -1
- package/dist/esm/dso-viewer-grid.entry.js +11 -5
- package/dist/esm/{focus-trap.esm-a01ad6c9.js → focus-trap.esm-e3b5bde3.js} +28 -11
- package/dist/esm/{index-1602fde1.js → index-771c1291.js} +7 -1
- package/dist/esm/{index.esm-45465af7.js → index.esm-4510c39e.js} +110 -12
- package/dist/esm/loader.js +2 -2
- package/dist/types/components/accordion/accordion.d.ts +32 -0
- package/dist/types/components/accordion/accordion.interfaces.d.ts +20 -0
- package/dist/types/components/accordion/accordion.template.d.ts +2 -0
- package/dist/types/components/accordion/components/accordion-section.d.ts +25 -0
- package/dist/types/components/helpcenter-panel/helpcenter-panel.d.ts +11 -0
- package/dist/types/components/image-overlay/image-overlay.d.ts +3 -0
- package/dist/types/components/info-button/info-button.d.ts +1 -0
- package/dist/types/components/ozon-content/nodes/figuur.node.d.ts +4 -1
- package/dist/types/components/ozon-content/nodes/lijst.node.d.ts +6 -0
- package/dist/types/components/pagination/pagination.d.ts +15 -0
- package/dist/types/components/responsive-element/responsive-element.d.ts +5 -2
- package/dist/types/components/responsive-element/responsive-element.interfaces.d.ts +5 -0
- package/dist/types/components/responsive-element/responsive-element.template.d.ts +1 -1
- package/dist/types/components/table/table.d.ts +26 -0
- package/dist/types/components/table/table.interfaces.d.ts +3 -0
- package/dist/types/components/table/table.template.d.ts +2 -0
- package/dist/types/components.d.ts +128 -0
- package/package.json +4 -3
- package/readme.md +0 -7
- package/dist/collection/icon/dso-icon-sass-function.js +0 -42
- package/dist/dso-toolkit/dso-toolkit.css +0 -1
- package/dist/dso-toolkit/p-02272301.entry.js +0 -1
- package/dist/dso-toolkit/p-10a6db1a.entry.js +0 -1
- package/dist/dso-toolkit/p-131d54e3.js +0 -5
- package/dist/dso-toolkit/p-1450f113.entry.js +0 -1
- package/dist/dso-toolkit/p-15d0f2eb.entry.js +0 -1
- package/dist/dso-toolkit/p-3b5f957e.entry.js +0 -1
- package/dist/dso-toolkit/p-49938275.entry.js +0 -1
- package/dist/dso-toolkit/p-5a56d726.entry.js +0 -1
- package/dist/dso-toolkit/p-5e5fbd41.js +0 -5
- package/dist/dso-toolkit/p-68d49733.entry.js +0 -1
- package/dist/dso-toolkit/p-7b716383.entry.js +0 -1
- package/dist/dso-toolkit/p-b95bc2c7.entry.js +0 -1
- package/dist/dso-toolkit/p-c1070a58.entry.js +0 -1
- package/dist/dso-toolkit/p-c62606a3.js +0 -1
- package/dist/dso-toolkit/p-e7888d49.entry.js +0 -1
- package/dist/dso-toolkit/p-eb17d45e.entry.js +0 -1
- package/dist/dso-toolkit/p-f726111e.entry.js +0 -1
- package/dist/dso-toolkit/p-fd8a8509.entry.js +0 -1
- package/dist/types/icon/dso-icon-sass-function.d.ts +0 -4
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
* It contains typing information for all components that exist in this project.
|
|
6
6
|
*/
|
|
7
7
|
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
|
|
8
|
+
import { AccordionHeading, AccordionInternalState, AccordionSectionState, AccordionSectionToggleEvent, AccordionVariant } from "./components/accordion/accordion.interfaces";
|
|
8
9
|
import { Suggestion } from "./components/autosuggest/autosuggest";
|
|
9
10
|
import { DsoDatePickerChangeEvent, DsoDatePickerDirection, DsoDatePickerFocusEvent, DsoDatePickerKeyboardEvent } from "./components/date-picker/date-picker";
|
|
10
11
|
import { HeaderClickEvent, HeaderClickMenuItemEvent, HeaderMenuItem } from "./components/header/header.interfaces";
|
|
@@ -13,10 +14,54 @@ import { BaseLayer, BaseLayerChangeEvent } from "./components/map-base-layers/ma
|
|
|
13
14
|
import { Overlay, OverlayChangeEvent } from "./components/map-overlays/map-overlays.interfaces";
|
|
14
15
|
import { OzonContentAnchorClick, OzonContentClick } from "./components/ozon-content/ozon-content.interfaces";
|
|
15
16
|
import { PaginationSelectPageEvent } from "./components/pagination/pagination.interfaces";
|
|
17
|
+
import { ResponsiveElementSize } from "./components/responsive-element/responsive-element.interfaces";
|
|
16
18
|
import { SelectableChangeEvent } from "./components/selectable/selectable";
|
|
17
19
|
import { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
|
|
18
20
|
import { FilterpanelEvent, MainSize, ViewerGridChangeSizeEvent } from "./components/viewer-grid/viewer-grid";
|
|
19
21
|
export namespace Components {
|
|
22
|
+
interface DsoAccordion {
|
|
23
|
+
/**
|
|
24
|
+
* Allows multiple sections to be open at the same time.
|
|
25
|
+
*/
|
|
26
|
+
"allowMultipleOpen": boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Closes all sections belonging to this accordion.
|
|
29
|
+
*/
|
|
30
|
+
"closeOpenSections": () => Promise<void>;
|
|
31
|
+
"getState": () => Promise<AccordionInternalState>;
|
|
32
|
+
/**
|
|
33
|
+
* Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements
|
|
34
|
+
*/
|
|
35
|
+
"reverseAlign": boolean;
|
|
36
|
+
/**
|
|
37
|
+
* Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.
|
|
38
|
+
*/
|
|
39
|
+
"toggleSection": (sectionElement: HTMLElement | number, event?: MouseEvent | undefined) => Promise<void>;
|
|
40
|
+
"variant"?: AccordionVariant;
|
|
41
|
+
}
|
|
42
|
+
interface DsoAccordionSection {
|
|
43
|
+
/**
|
|
44
|
+
* `attachmentCount` takes precedence over `icon`
|
|
45
|
+
*/
|
|
46
|
+
"attachmentCount"?: number;
|
|
47
|
+
"handleTitle"?: string;
|
|
48
|
+
/**
|
|
49
|
+
* When set the handle will render as a `<a>`. When undefined it renders as a `<button>`
|
|
50
|
+
*/
|
|
51
|
+
"handleUrl"?: string;
|
|
52
|
+
"heading": AccordionHeading;
|
|
53
|
+
"icon"?: string;
|
|
54
|
+
"open": boolean;
|
|
55
|
+
/**
|
|
56
|
+
* `state` takes precedence over `attachmentCount` and `icon`
|
|
57
|
+
*/
|
|
58
|
+
"state"?: AccordionSectionState;
|
|
59
|
+
"status"?: string;
|
|
60
|
+
/**
|
|
61
|
+
* Toggle this section
|
|
62
|
+
*/
|
|
63
|
+
"toggleSection": () => Promise<void>;
|
|
64
|
+
}
|
|
20
65
|
interface DsoAlert {
|
|
21
66
|
/**
|
|
22
67
|
* Whether or not to show the role attribute with value "alert". To control the tooltip add the `role-alert` attribute.
|
|
@@ -233,6 +278,7 @@ export namespace Components {
|
|
|
233
278
|
"size"?: 'small' | 'medium' | 'large';
|
|
234
279
|
}
|
|
235
280
|
interface DsoResponsiveElement {
|
|
281
|
+
"getSize": () => Promise<ResponsiveElementSize>;
|
|
236
282
|
}
|
|
237
283
|
interface DsoSelectable {
|
|
238
284
|
"checked"?: boolean;
|
|
@@ -248,6 +294,16 @@ export namespace Components {
|
|
|
248
294
|
"type": 'checkbox' | 'radio';
|
|
249
295
|
"value": string;
|
|
250
296
|
}
|
|
297
|
+
interface DsoTable {
|
|
298
|
+
/**
|
|
299
|
+
* Indicates whether the table is currently horizontally scrollable
|
|
300
|
+
*/
|
|
301
|
+
"isResponsive": boolean;
|
|
302
|
+
/**
|
|
303
|
+
* Prevents the table being opened in a modal.
|
|
304
|
+
*/
|
|
305
|
+
"noModal": boolean;
|
|
306
|
+
}
|
|
251
307
|
interface DsoToggletip {
|
|
252
308
|
"label": string;
|
|
253
309
|
"position": "top" | "right" | "bottom" | "left";
|
|
@@ -318,6 +374,18 @@ export namespace Components {
|
|
|
318
374
|
}
|
|
319
375
|
}
|
|
320
376
|
declare global {
|
|
377
|
+
interface HTMLDsoAccordionElement extends Components.DsoAccordion, HTMLStencilElement {
|
|
378
|
+
}
|
|
379
|
+
var HTMLDsoAccordionElement: {
|
|
380
|
+
prototype: HTMLDsoAccordionElement;
|
|
381
|
+
new (): HTMLDsoAccordionElement;
|
|
382
|
+
};
|
|
383
|
+
interface HTMLDsoAccordionSectionElement extends Components.DsoAccordionSection, HTMLStencilElement {
|
|
384
|
+
}
|
|
385
|
+
var HTMLDsoAccordionSectionElement: {
|
|
386
|
+
prototype: HTMLDsoAccordionSectionElement;
|
|
387
|
+
new (): HTMLDsoAccordionSectionElement;
|
|
388
|
+
};
|
|
321
389
|
interface HTMLDsoAlertElement extends Components.DsoAlert, HTMLStencilElement {
|
|
322
390
|
}
|
|
323
391
|
var HTMLDsoAlertElement: {
|
|
@@ -462,6 +530,12 @@ declare global {
|
|
|
462
530
|
prototype: HTMLDsoSelectableElement;
|
|
463
531
|
new (): HTMLDsoSelectableElement;
|
|
464
532
|
};
|
|
533
|
+
interface HTMLDsoTableElement extends Components.DsoTable, HTMLStencilElement {
|
|
534
|
+
}
|
|
535
|
+
var HTMLDsoTableElement: {
|
|
536
|
+
prototype: HTMLDsoTableElement;
|
|
537
|
+
new (): HTMLDsoTableElement;
|
|
538
|
+
};
|
|
465
539
|
interface HTMLDsoToggletipElement extends Components.DsoToggletip, HTMLStencilElement {
|
|
466
540
|
}
|
|
467
541
|
var HTMLDsoToggletipElement: {
|
|
@@ -487,6 +561,8 @@ declare global {
|
|
|
487
561
|
new (): HTMLDsoViewerGridElement;
|
|
488
562
|
};
|
|
489
563
|
interface HTMLElementTagNameMap {
|
|
564
|
+
"dso-accordion": HTMLDsoAccordionElement;
|
|
565
|
+
"dso-accordion-section": HTMLDsoAccordionSectionElement;
|
|
490
566
|
"dso-alert": HTMLDsoAlertElement;
|
|
491
567
|
"dso-attachments-counter": HTMLDsoAttachmentsCounterElement;
|
|
492
568
|
"dso-autosuggest": HTMLDsoAutosuggestElement;
|
|
@@ -511,6 +587,7 @@ declare global {
|
|
|
511
587
|
"dso-progress-indicator": HTMLDsoProgressIndicatorElement;
|
|
512
588
|
"dso-responsive-element": HTMLDsoResponsiveElementElement;
|
|
513
589
|
"dso-selectable": HTMLDsoSelectableElement;
|
|
590
|
+
"dso-table": HTMLDsoTableElement;
|
|
514
591
|
"dso-toggletip": HTMLDsoToggletipElement;
|
|
515
592
|
"dso-tooltip": HTMLDsoTooltipElement;
|
|
516
593
|
"dso-tree-view": HTMLDsoTreeViewElement;
|
|
@@ -518,6 +595,40 @@ declare global {
|
|
|
518
595
|
}
|
|
519
596
|
}
|
|
520
597
|
declare namespace LocalJSX {
|
|
598
|
+
interface DsoAccordion {
|
|
599
|
+
/**
|
|
600
|
+
* Allows multiple sections to be open at the same time.
|
|
601
|
+
*/
|
|
602
|
+
"allowMultipleOpen"?: boolean;
|
|
603
|
+
/**
|
|
604
|
+
* Emitted when a section is toggled. `event.detail.originalEvent` contains the original `MouseEvent` when the section is toggled by clicking on the header `event.detail.section` contains the toggled section and its new opened value.\ `event.detail.sections` contains all `<dso-accordion-section>` elements belonging to this accordion.
|
|
605
|
+
*/
|
|
606
|
+
"onDsoToggleSection"?: (event: CustomEvent<AccordionSectionToggleEvent>) => void;
|
|
607
|
+
/**
|
|
608
|
+
* Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements
|
|
609
|
+
*/
|
|
610
|
+
"reverseAlign"?: boolean;
|
|
611
|
+
"variant"?: AccordionVariant;
|
|
612
|
+
}
|
|
613
|
+
interface DsoAccordionSection {
|
|
614
|
+
/**
|
|
615
|
+
* `attachmentCount` takes precedence over `icon`
|
|
616
|
+
*/
|
|
617
|
+
"attachmentCount"?: number;
|
|
618
|
+
"handleTitle"?: string;
|
|
619
|
+
/**
|
|
620
|
+
* When set the handle will render as a `<a>`. When undefined it renders as a `<button>`
|
|
621
|
+
*/
|
|
622
|
+
"handleUrl"?: string;
|
|
623
|
+
"heading"?: AccordionHeading;
|
|
624
|
+
"icon"?: string;
|
|
625
|
+
"open"?: boolean;
|
|
626
|
+
/**
|
|
627
|
+
* `state` takes precedence over `attachmentCount` and `icon`
|
|
628
|
+
*/
|
|
629
|
+
"state"?: AccordionSectionState;
|
|
630
|
+
"status"?: string;
|
|
631
|
+
}
|
|
521
632
|
interface DsoAlert {
|
|
522
633
|
/**
|
|
523
634
|
* Whether or not to show the role attribute with value "alert". To control the tooltip add the `role-alert` attribute.
|
|
@@ -773,6 +884,7 @@ declare namespace LocalJSX {
|
|
|
773
884
|
"size"?: 'small' | 'medium' | 'large';
|
|
774
885
|
}
|
|
775
886
|
interface DsoResponsiveElement {
|
|
887
|
+
"onDsoSizeChange"?: (event: CustomEvent<ResponsiveElementSize>) => void;
|
|
776
888
|
}
|
|
777
889
|
interface DsoSelectable {
|
|
778
890
|
"checked"?: boolean;
|
|
@@ -788,6 +900,16 @@ declare namespace LocalJSX {
|
|
|
788
900
|
"type": 'checkbox' | 'radio';
|
|
789
901
|
"value": string;
|
|
790
902
|
}
|
|
903
|
+
interface DsoTable {
|
|
904
|
+
/**
|
|
905
|
+
* Indicates whether the table is currently horizontally scrollable
|
|
906
|
+
*/
|
|
907
|
+
"isResponsive"?: boolean;
|
|
908
|
+
/**
|
|
909
|
+
* Prevents the table being opened in a modal.
|
|
910
|
+
*/
|
|
911
|
+
"noModal"?: boolean;
|
|
912
|
+
}
|
|
791
913
|
interface DsoToggletip {
|
|
792
914
|
"label"?: string;
|
|
793
915
|
"position"?: "top" | "right" | "bottom" | "left";
|
|
@@ -859,6 +981,8 @@ declare namespace LocalJSX {
|
|
|
859
981
|
"overlayOpen"?: boolean;
|
|
860
982
|
}
|
|
861
983
|
interface IntrinsicElements {
|
|
984
|
+
"dso-accordion": DsoAccordion;
|
|
985
|
+
"dso-accordion-section": DsoAccordionSection;
|
|
862
986
|
"dso-alert": DsoAlert;
|
|
863
987
|
"dso-attachments-counter": DsoAttachmentsCounter;
|
|
864
988
|
"dso-autosuggest": DsoAutosuggest;
|
|
@@ -883,6 +1007,7 @@ declare namespace LocalJSX {
|
|
|
883
1007
|
"dso-progress-indicator": DsoProgressIndicator;
|
|
884
1008
|
"dso-responsive-element": DsoResponsiveElement;
|
|
885
1009
|
"dso-selectable": DsoSelectable;
|
|
1010
|
+
"dso-table": DsoTable;
|
|
886
1011
|
"dso-toggletip": DsoToggletip;
|
|
887
1012
|
"dso-tooltip": DsoTooltip;
|
|
888
1013
|
"dso-tree-view": DsoTreeView;
|
|
@@ -893,6 +1018,8 @@ export { LocalJSX as JSX };
|
|
|
893
1018
|
declare module "@stencil/core" {
|
|
894
1019
|
export namespace JSX {
|
|
895
1020
|
interface IntrinsicElements {
|
|
1021
|
+
"dso-accordion": LocalJSX.DsoAccordion & JSXBase.HTMLAttributes<HTMLDsoAccordionElement>;
|
|
1022
|
+
"dso-accordion-section": LocalJSX.DsoAccordionSection & JSXBase.HTMLAttributes<HTMLDsoAccordionSectionElement>;
|
|
896
1023
|
"dso-alert": LocalJSX.DsoAlert & JSXBase.HTMLAttributes<HTMLDsoAlertElement>;
|
|
897
1024
|
"dso-attachments-counter": LocalJSX.DsoAttachmentsCounter & JSXBase.HTMLAttributes<HTMLDsoAttachmentsCounterElement>;
|
|
898
1025
|
"dso-autosuggest": LocalJSX.DsoAutosuggest & JSXBase.HTMLAttributes<HTMLDsoAutosuggestElement>;
|
|
@@ -917,6 +1044,7 @@ declare module "@stencil/core" {
|
|
|
917
1044
|
"dso-progress-indicator": LocalJSX.DsoProgressIndicator & JSXBase.HTMLAttributes<HTMLDsoProgressIndicatorElement>;
|
|
918
1045
|
"dso-responsive-element": LocalJSX.DsoResponsiveElement & JSXBase.HTMLAttributes<HTMLDsoResponsiveElementElement>;
|
|
919
1046
|
"dso-selectable": LocalJSX.DsoSelectable & JSXBase.HTMLAttributes<HTMLDsoSelectableElement>;
|
|
1047
|
+
"dso-table": LocalJSX.DsoTable & JSXBase.HTMLAttributes<HTMLDsoTableElement>;
|
|
920
1048
|
"dso-toggletip": LocalJSX.DsoToggletip & JSXBase.HTMLAttributes<HTMLDsoToggletipElement>;
|
|
921
1049
|
"dso-tooltip": LocalJSX.DsoTooltip & JSXBase.HTMLAttributes<HTMLDsoTooltipElement>;
|
|
922
1050
|
"dso-tree-view": LocalJSX.DsoTreeView & JSXBase.HTMLAttributes<HTMLDsoTreeViewElement>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dso-toolkit/core",
|
|
3
|
-
"version": "45.0
|
|
3
|
+
"version": "45.2.0",
|
|
4
4
|
"description": "DSO Toolkit Web Components",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/custom-elements/index.js",
|
|
@@ -22,11 +22,12 @@
|
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@popperjs/core": "^2.11.5",
|
|
24
24
|
"@stencil/core": "2.10.0",
|
|
25
|
+
"@stencil/store": "^2.0.0",
|
|
25
26
|
"clsx": "1.1.1",
|
|
26
27
|
"escape-string-regexp": "^5.0.0",
|
|
27
|
-
"focus-trap": "^
|
|
28
|
+
"focus-trap": "^7.0.0",
|
|
28
29
|
"popper-max-size-modifier": "^0.2.0",
|
|
29
|
-
"tabbable": "^
|
|
30
|
+
"tabbable": "^6.0.0",
|
|
30
31
|
"uuid": "^8.3.2"
|
|
31
32
|
},
|
|
32
33
|
"devDependencies": {
|
package/readme.md
CHANGED
|
@@ -1,10 +1,3 @@
|
|
|
1
1
|
# `@dso-toolkit/core`
|
|
2
2
|
|
|
3
3
|
See https://www.github.com/dso-toolkit/dso-toolkit
|
|
4
|
-
|
|
5
|
-
## `di()` en `di-variant()` SCSS mixins
|
|
6
|
-
|
|
7
|
-
Dit project bevat een dataUri implementatie. Zie `di.scss` en `dso-icon-sass-function.ts` in `/packages/core/src/icon`.
|
|
8
|
-
|
|
9
|
-
* `dso-icon-sass-function.ts`: Bevat een Sass function die aan de Sass compiler van de Stencil Components wordt meegegeven. Deze functie moet in elke Stencil Component stylesheet gebruikt worden om iconen te "preloaden" door ze in te lezen op een custom property.
|
|
10
|
-
* `di.scss`: Bevat de `di()` en `di-variant()` mixins. Deze mixin maakt een `background-image` met een verwijzing naar een custom property `--dso-icon`. Beide mixins hebben een argument met het alias naar het icoon. De waarde van `--dso-icon` is een verwijzing naar het eerder ingeladen icoon.
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { instance as sass } from '@stencil/sass';
|
|
2
|
-
import cheerio from 'cheerio';
|
|
3
|
-
import { readFileSync, existsSync } from 'fs';
|
|
4
|
-
import { resolve, dirname } from 'path';
|
|
5
|
-
import svgToDataUri from 'mini-svg-data-uri';
|
|
6
|
-
const iconsPath = resolve(dirname(require.resolve('@dso-toolkit/sources')), '../src', 'icons');
|
|
7
|
-
// Replace this regex with the same logic as in @dso-toolkit/css gulpfile.js
|
|
8
|
-
const styleRegex = (selector) => new RegExp(`${selector} {([\\s\\S]+?)}`);
|
|
9
|
-
export const dsoIcon = {
|
|
10
|
-
'dso-icon($icon, $variant: null)': function (sassIconAlias, sassVariant) {
|
|
11
|
-
if (!(sassIconAlias instanceof sass.types.String)) {
|
|
12
|
-
throw new TypeError('Expected $icon to be of type String');
|
|
13
|
-
}
|
|
14
|
-
const iconAlias = sassIconAlias.getValue();
|
|
15
|
-
const iconPath = resolve(iconsPath, `${iconAlias}.svg`);
|
|
16
|
-
const icon = readFileSync(iconPath).toString('utf-8');
|
|
17
|
-
const style = getStyle(iconAlias, sassVariant instanceof sass.types.String ? sassVariant.getValue() : null);
|
|
18
|
-
const svg = style ? bundleSvgStyle(icon, style) : icon;
|
|
19
|
-
const dataUri = svgToDataUri(svg);
|
|
20
|
-
return new sass.types.String(`url("${dataUri}")`);
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
function getStyle(icon, variant) {
|
|
24
|
-
var _a, _b;
|
|
25
|
-
const stylesheetPath = resolve(iconsPath, `${icon}.scss`);
|
|
26
|
-
if (!existsSync(stylesheetPath)) {
|
|
27
|
-
return null;
|
|
28
|
-
}
|
|
29
|
-
const css = sass
|
|
30
|
-
.renderSync({ file: stylesheetPath })
|
|
31
|
-
.css
|
|
32
|
-
.toString('utf-8');
|
|
33
|
-
const selector = `${icon}${variant ? `:${variant}` : ''}`;
|
|
34
|
-
const regex = styleRegex(selector);
|
|
35
|
-
return (_b = (_a = css.match(regex)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : null;
|
|
36
|
-
}
|
|
37
|
-
function bundleSvgStyle(svg, style) {
|
|
38
|
-
const $ = cheerio.load(svg, { xmlMode: true });
|
|
39
|
-
const inlineStyle = style.trim().split('\n').map(l => l.trim()).join('');
|
|
40
|
-
const $svg = $('svg').attr('style', inlineStyle);
|
|
41
|
-
return $.html($svg);
|
|
42
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}dso-alert>.dso-rich-content *:first-child{margin-top:0 !important}dso-alert>.dso-rich-content *:last-child{margin-bottom:0 !important}dso-alert>.dso-rich-content h1,dso-alert>.dso-rich-content h2,dso-alert>.dso-rich-content h3,dso-alert>.dso-rich-content h4,dso-alert>.dso-rich-content h5,dso-alert>.dso-rich-content h6,dso-alert>.dso-rich-content .h1,dso-alert>.dso-rich-content .h2,dso-alert>.dso-rich-content .h3,dso-alert>.dso-rich-content .h4,dso-alert>.dso-rich-content .h5,dso-alert>.dso-rich-content .h6{color:#000;font-size:1em;line-height:1.5;margin-bottom:8px;margin-top:8px}dso-alert>.dso-rich-content .btn,dso-alert>.dso-rich-content .dso-primary,dso-alert>.dso-rich-content .dso-secondary,dso-alert>.dso-rich-content .dso-tertiary{background-color:rgba(25, 25, 25, 0.05);border-radius:4px;border:1px solid transparent;padding:6px 12px}dso-alert>.dso-rich-content .btn:hover,dso-alert>.dso-rich-content .btn:active,dso-alert>.dso-rich-content .dso-primary:hover,dso-alert>.dso-rich-content .dso-primary:active,dso-alert>.dso-rich-content .dso-secondary:hover,dso-alert>.dso-rich-content .dso-secondary:active,dso-alert>.dso-rich-content .dso-tertiary:hover,dso-alert>.dso-rich-content .dso-tertiary:active{background-color:rgba(25, 25, 25, 0.2);color:#000}dso-alert a,dso-alert a:not(.btn):visited{color:#191919}dso-alert a:hover,dso-alert a:focus,dso-alert a:active,dso-alert a:visited{color:#191919}dso-alert a:active{text-decoration:none}dso-alert a.download::after{background:var(--dso-icon, var(--di-download-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-alert a.extern::after{background:var(--dso-icon, var(--di-external-link-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-banner a{text-decoration:underline}dso-banner a,dso-banner a:hover,dso-banner a:focus,dso-banner a:active,dso-banner a:visited{color:#191919}dso-banner a:active{text-decoration:none}dso-banner a.download::after{background:var(--dso-icon, var(--di-download-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-banner a.extern::after{background:var(--dso-icon, var(--di-external-link-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-banner .row>div{line-height:1.5;position:relative}dso-banner .row>div button{position:absolute;right:16px;top:0}dso-banner .row>div button dso-icon,dso-banner .row>div button svg.di{color:#000}@media screen and (min-width: 481px){dso-banner .row>div{padding-left:48px}}@media screen and (max-width: 480px){dso-banner .row>div{padding-top:39px}}dso-banner .row>div::before{content:"";display:inline-block;left:16px;position:absolute;top:0}dso-banner .row>div>.dso-rich-content{padding-right:24px}dso-banner .row>div>.dso-rich-content h1,dso-banner .row>div>.dso-rich-content h2,dso-banner .row>div>.dso-rich-content h3,dso-banner .row>div>.dso-rich-content h4,dso-banner .row>div>.dso-rich-content h5,dso-banner .row>div>.dso-rich-content h6{color:#000;font-size:1rem;line-height:1.5;margin-bottom:0}dso-banner .row>div>.dso-rich-content h1+p,dso-banner .row>div>.dso-rich-content h2+p,dso-banner .row>div>.dso-rich-content h3+p,dso-banner .row>div>.dso-rich-content h4+p,dso-banner .row>div>.dso-rich-content h5+p,dso-banner .row>div>.dso-rich-content h6+p{display:inline}dso-banner .row>div>.dso-rich-content h1+p+*,dso-banner .row>div>.dso-rich-content h2+p+*,dso-banner .row>div>.dso-rich-content h3+p+*,dso-banner .row>div>.dso-rich-content h4+p+*,dso-banner .row>div>.dso-rich-content h5+p+*,dso-banner .row>div>.dso-rich-content h6+p+*{margin-top:16px}dso-banner .row>div>.dso-rich-content>h2:first-child{float:left;margin-right:8px}dso-banner .row>div>.dso-rich-content *:first-child{margin-top:0}dso-banner .row>div>.dso-rich-content *:last-child{margin-bottom:0}@media screen and (max-width: 480px){dso-banner .row>div>.dso-rich-content{padding-right:0}}dso-banner[status=danger]{color:#191919;background-color:#f5d8dc;border-color:#f5d8dc}dso-banner[status=danger] .row>div::before{background:var(--dso-icon, var(--di-status-danger)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-banner[status=warning]{color:#191919;background-color:#f8f6cc;border-color:#f8f6cc}dso-banner[status=warning] .row>div::before{background:var(--dso-icon, var(--di-status-warning)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}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}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.btn::after{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;margin-left:4px;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:1rem;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[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-highlight-box>.dso-rich-content *:first-child{margin-top:0}dso-highlight-box>*:last-child{margin-bottom:0}dso-highlight-box .dso-tertiary:not([disabled]):hover,dso-highlight-box .dso-tertiary:not([disabled]):hover dso-icon,dso-highlight-box .dso-tertiary:not([disabled]):hover svg.di,dso-highlight-box .btn-link:not([disabled]):hover,dso-highlight-box .btn-link:not([disabled]):hover dso-icon,dso-highlight-box .btn-link:not([disabled]):hover svg.di{text-decoration:underline}dso-highlight-box.dso-has-counter{padding-top:2.5rem;position:relative}dso-highlight-box .dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;height:2rem;left:16px;line-height:2rem;position:absolute;text-align:center;top:-1.5rem;width:2rem}dso-highlight-box .dso-step-counter svg.di{height:1.5rem;margin-top:0.25rem;width:1.5rem}dso-highlight-box dso-icon{vertical-align:text-top}dso-highlight-box[yellow],dso-highlight-box:not([border]):not([white]){--di-chevron-right-grijs90:url("data:image/svg+xml,%3csvg id='chevron-right' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M9%2c19a.93.93%2c0%2c0%2c1-.67-.29%2c1%2c1%2c0%2c0%2c1%2c0-1.42l5-5.29-5-5.29a1%2c1%2c0%2c0%2c1%2c0-1.42.93.93%2c0%2c0%2c1%2c1.35%2c0L16%2c12%2c9.62%2c18.71A.93.93%2c0%2c0%2c1%2c9%2c19Z'/%3e %3c/svg%3e")}dso-highlight-box[yellow] .dso-tertiary:not([disabled]),dso-highlight-box[yellow] .btn-link:not([disabled]),dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]),dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]){color:#191919}dso-highlight-box[yellow] .dso-tertiary:not([disabled]):hover,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):hover dso-icon,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):hover svg.di,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):focus,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):focus dso-icon,dso-highlight-box[yellow] .dso-tertiary:not([disabled]):focus svg.di,dso-highlight-box[yellow] .btn-link:not([disabled]):hover,dso-highlight-box[yellow] .btn-link:not([disabled]):hover dso-icon,dso-highlight-box[yellow] .btn-link:not([disabled]):hover svg.di,dso-highlight-box[yellow] .btn-link:not([disabled]):focus,dso-highlight-box[yellow] .btn-link:not([disabled]):focus dso-icon,dso-highlight-box[yellow] .btn-link:not([disabled]):focus svg.di,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):hover,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):hover dso-icon,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):hover svg.di,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):focus,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):focus dso-icon,dso-highlight-box:not([border]):not([white]) .dso-tertiary:not([disabled]):focus svg.di,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):hover,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):hover dso-icon,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):hover svg.di,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):focus,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):focus dso-icon,dso-highlight-box:not([border]):not([white]) .btn-link:not([disabled]):focus svg.di{color:#666}dso-highlight-box[yellow] a:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-highlight-box[yellow] a:visited:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-highlight-box:not([border]):not([white]) a:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-highlight-box:not([border]):not([white]) a:visited:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary){color:#191919}dso-highlight-box:not([border]):not([white]) .dso-link-list li{margin-bottom:16px}dso-highlight-box:not([border]):not([white]) .dso-link-list li:last-child{margin-bottom:0}dso-highlight-box:not([border]):not([white]) .dso-link-list a{text-decoration:none;color:#191919}dso-highlight-box:not([border]):not([white]) .dso-link-list a:hover,dso-highlight-box:not([border]):not([white]) .dso-link-list a:focus,dso-highlight-box:not([border]):not([white]) .dso-link-list a:active{text-decoration:underline}dso-highlight-box:not([border]):not([white]) .dso-link-list a::before,dso-highlight-box:not([border]):not([white]) .dso-link-list a:active::before,dso-highlight-box:not([border]):not([white]) .dso-link-list a:focus::before,dso-highlight-box:not([border]):not([white]) .dso-link-list a:hover::before{background:var(--dso-icon, var(--di-chevron-right-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-highlight-box:not([border]):not([white]) .dso-link-list a:active{color:#191919;text-decoration:none}dso-highlight-box:not([border]):not([white]) .dso-link-list a.download::after{background:var(--dso-icon, var(--di-download-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-highlight-box:not([border]):not([white]) .dso-link-list a.extern::after{background:var(--dso-icon, var(--di-external-link-grijs90)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-info .dso-rich-content *:first-child{margin-top:0}dso-info .dso-rich-content img{display:block;margin:8px auto;max-width:100%}dso-info .dso-rich-content a:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-info .dso-rich-content a:hover,dso-info .dso-rich-content a:focus,dso-info .dso-rich-content a:active,dso-info .dso-rich-content a:visited{color:#191919}dso-info .dso-rich-content a:active{text-decoration:none}dso-info .dso-rich-content .dso-tertiary:not([disabled]),dso-info .dso-rich-content .btn-link:not([disabled]){color:#000}dso-info .dso-rich-content .dso-tertiary:not([disabled]):hover,dso-info .dso-rich-content .dso-tertiary:not([disabled]):hover dso-icon,dso-info .dso-rich-content .dso-tertiary:not([disabled]):hover svg.di,dso-info .dso-rich-content .dso-tertiary:not([disabled]):focus,dso-info .dso-rich-content .dso-tertiary:not([disabled]):focus dso-icon,dso-info .dso-rich-content .dso-tertiary:not([disabled]):focus svg.di,dso-info .dso-rich-content .btn-link:not([disabled]):hover,dso-info .dso-rich-content .btn-link:not([disabled]):hover dso-icon,dso-info .dso-rich-content .btn-link:not([disabled]):hover svg.di,dso-info .dso-rich-content .btn-link:not([disabled]):focus,dso-info .dso-rich-content .btn-link:not([disabled]):focus dso-icon,dso-info .dso-rich-content .btn-link:not([disabled]):focus svg.di{color:#666;text-decoration:underline}dso-label span[slot=symbol]{background-color:#fff;display:block;float:left;height:20px;margin-top:2px;margin-right:8px;width:24px;overflow:hidden;position:relative}dso-label span[slot=symbol]>span{display:block;position:absolute;top:0;bottom:0;left:0;right:0}dso-map-controls>*+*{margin-top:32px}dso-selectable .dso-rich-content[slot=info] *:first-child{margin-top:0}dso-selectable .dso-rich-content[slot=info] img{display:block;margin:8px auto;max-width:100%}dso-selectable .dso-rich-content[slot=info] a:not(.btn):not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-selectable .dso-rich-content[slot=info] a:hover,dso-selectable .dso-rich-content[slot=info] a:focus,dso-selectable .dso-rich-content[slot=info] a:active,dso-selectable .dso-rich-content[slot=info] a:visited{color:#191919}dso-selectable .dso-rich-content[slot=info] a:active{text-decoration:none}dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]),dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]){color:#000}dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):hover,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):hover dso-icon,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):hover svg.di,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):focus,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):focus dso-icon,dso-selectable .dso-rich-content[slot=info] .dso-tertiary:not([disabled]):focus svg.di,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):hover,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):hover dso-icon,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):hover svg.di,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):focus,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):focus dso-icon,dso-selectable .dso-rich-content[slot=info] .btn-link:not([disabled]):focus svg.di{color:#666;text-decoration:underline}dso-viewer-grid .dso-filterblok{margin-left:-16px;margin-right:-16px}dso-viewer-grid .dso-filterblok .dso-filterblok-address{font-weight:bold;margin:8px 0}@media screen and (max-width: 480px){dso-viewer-grid .dso-filterblok .dso-context-wrapper .dso-context-container{flex-basis:auto}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as s,h as t,H as i,g as l}from"./p-c62606a3.js";const e=[{width:624,alias:"large"},{width:375,alias:"medium"},{width:0,alias:"small"}];let a=class{constructor(t){s(this,t),this.sizeAlias=e[0].alias,this.sizeWidth=0,this.observer=new ResizeObserver((([s])=>{var t,i;const l=null!==(i=null===(t=e.find((t=>s.contentRect.width>=t.width)))||void 0===t?void 0:t.alias)&&void 0!==i?i:e[0].alias;this.sizeAlias=l}))}componentWillLoad(){this.observer.observe(this.host)}disconnectedCallback(){this.observer.unobserve(this.host)}render(){return t(i,{small:"small"===this.sizeAlias,medium:"medium"===this.sizeAlias,large:"large"===this.sizeAlias},t("slot",null))}get host(){return l(this)}};a.style=":host{display:block}";export{a as dso_responsive_element}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as n,c as t,h as o,H as e}from"./p-c62606a3.js";var r,a,s=function(n,t,o,e){if("a"===o&&!e)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?n!==t||!e:!t.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===o?e:"a"===o?e.call(n):e?e.value:t.get(n)},i=function(n,t,o,e,r){if("m"===e)throw new TypeError("Private method is not writable");if("a"===e&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?n!==t||!r:!t.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===e?r.call(n,o):r?r.value=o:t.set(n,o),o};let d=class{constructor(o){n(this,o),this.dsoZoomIn=t(this,"dsoZoomIn",7),this.dsoZoomOut=t(this,"dsoZoomOut",7),this.panelTitle="Kaartlagen",this.open=!1,this.hideContent=!this.open,r.set(this,void 0),a.set(this,void 0)}watchOpen(n){n?(this.hideContent=!1,setTimeout((()=>s(this,r,"f").focus()),300)):setTimeout((()=>{this.hideContent=!0,s(this,a,"f").focus()}),300)}render(){return o(e,null,o("button",{type:"button",id:"toggle-visibility-button",onClick:()=>this.open=!this.open,ref:n=>i(this,a,n,"f")},o("dso-icon",{icon:"layers"}),o("span",null,"Kaartlagen")),o("div",{id:"zoom-buttons"},o("button",{type:"button",onClick:n=>this.dsoZoomIn.emit(n),disabled:"in"===this.disableZoom||"both"===this.disableZoom},o("span",null,"Zoom in"),o("dso-icon",{icon:"plus"})),o("button",{type:"button",onClick:n=>this.dsoZoomOut.emit(n),disabled:"out"===this.disableZoom||"both"===this.disableZoom},o("span",null,"Zoom uit"),o("dso-icon",{icon:"minus"}))),o("section",{hidden:this.hideContent},o("header",null,o("h2",null,this.panelTitle),o("button",{type:"button",id:"close-button",onClick:()=>this.open=!1,ref:n=>i(this,r,n,"f")},o("span",null,"Verberg paneel ",this.panelTitle),o("dso-icon",{icon:"times"}))),o("div",{class:"content"},o("slot",null))))}static get watchers(){return{open:["watchOpen"]}}};r=new WeakMap,a=new WeakMap,d.style="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.btn {\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}\n.btn:focus, .btn:focus-visible {\n outline-offset: 2px;\n}\n.btn:active {\n outline: 0;\n}\n.btn.extern::after, .btn.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\n.btn-primary {\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 background-color: #b62f41;\n}\n.btn-primary:hover {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.btn-primary:active {\n background-color: #15301e;\n border-color: #15301e;\n color: #fff;\n}\n.btn-primary[disabled], .btn-primary[disabled]:hover {\n background-color: #afcf9d;\n border-color: #afcf9d;\n color: #fff;\n}\n.btn-primary.btn-sm {\n line-height: 1rem;\n}\n.btn-primary.btn-sm dso-icon,\n.btn-primary.btn-sm svg.di, .btn-primary.btn-sm.extern::after, .btn-primary.btn-sm.download::after, .btn-primary.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.btn-primary.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.btn-primary.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.btn-primary.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.btn-primary.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.btn-primary dso-icon,\n.btn-primary svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.btn-primary span + dso-icon,\n.btn-primary span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.btn-primary.dso-spinner-left[disabled], .btn-primary.dso-spinner-right[disabled] {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.btn-primary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.btn-primary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n\na.btn-primary {\n text-decoration: none;\n background-color: #b62f41;\n}\na.btn-primary, a.btn-primary:visited {\n color: #fff;\n}\n\n.btn-default {\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 background-color: #b62f41;\n}\n.btn-default:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.btn-default:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.btn-default[disabled], .btn-default[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.btn-default.btn-sm {\n line-height: 1rem;\n}\n.btn-default.btn-sm dso-icon,\n.btn-default.btn-sm svg.di, .btn-default.btn-sm.extern::after, .btn-default.btn-sm.download::after, .btn-default.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.btn-default.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.btn-default.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.btn-default.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.btn-default.download:hover::after {\n --dso-icon: var(--di-download-wit);\n}\n.btn-default.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\n.btn-default.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.btn-default.extern:hover::after {\n --dso-icon: var(--di-external-link-wit);\n}\n.btn-default.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.btn-default dso-icon,\n.btn-default svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.btn-default span + dso-icon,\n.btn-default span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.btn-default.dso-spinner-left[disabled], .btn-default.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.btn-default.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.btn-default.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.btn-default.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n.btn-default.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.btn-default.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.btn-default.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n\na.btn-default {\n text-decoration: none;\n background-color: #b62f41;\n}\na.btn-default, a.btn-default:visited {\n color: #39870c;\n}\na.btn-default:hover, a.btn-default:visited:hover {\n color: #fff;\n}\n\n.btn-link {\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n background-color: #b62f41;\n}\n.btn-link[disabled] {\n color: #afcf9d;\n}\n.btn-link[disabled].dso-spinner-left, .btn-link[disabled].dso-spinner-right {\n color: #39870c;\n}\n.btn-link:not([disabled]):hover {\n color: #676cb0;\n text-decoration: underline;\n text-underline-position: under;\n}\n.btn-link:not([disabled]):active {\n color: #676cb0;\n}\n.btn-link.btn-align {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\n}\n.btn-link.extern::after, .btn-link.download::after {\n position: relative;\n top: -2px;\n}\n.btn-link.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.btn-link.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\n.btn-link.download:not([disabled]):hover::after, .btn-link.download:not([disabled]):active::after {\n --dso-icon: var(--di-download-scampi);\n}\n.btn-link.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.btn-link.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.btn-link.extern:not([disabled]):hover::after, .btn-link.extern:not([disabled]):active::after {\n --dso-icon: var(--di-external-link-scampi);\n}\n.btn-link.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.btn-link.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.btn-link dso-icon + span:not(.sr-only),\n.btn-link svg.di + span:not(.sr-only),\n.btn-link span:not(.sr-only) + dso-icon,\n.btn-link span:not(.sr-only) + svg.di {\n margin-left: 8px;\n}\n.btn-link dso-icon[icon=chevron-left] + span:not(.sr-only),\n.btn-link dso-icon[icon=chevron-right] + span:not(.sr-only),\n.btn-link svg.di.di-angle-down + span:not(.sr-only),\n.btn-link svg.di.di-angle-up + span:not(.sr-only),\n.btn-link span:not(.sr-only) + svg.di.di-angle-down,\n.btn-link span:not(.sr-only) + svg.di.di-angle-up,\n.btn-link span:not(.sr-only) + dso-icon[icon=chevron-left],\n.btn-link span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-left: 0;\n}\n.btn-link dso-icon,\n.btn-link svg.di,\n.btn-link span {\n vertical-align: middle;\n}\n\na.btn-link {\n text-decoration: none;\n background-color: #b62f41;\n}\na.btn-link, a.btn-link:visited {\n color: #39870c;\n}\n\n.btn-block {\n display: block;\n width: 100%;\n}\n.btn-block + .btn-block {\n margin-top: 5px;\n}\n\ninput[type=submit].btn-block,\ninput[type=reset].btn-block,\ninput[type=button].btn-block {\n width: 100%;\n}\n\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-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}\na.dso-primary:focus, a.dso-primary:focus-visible,\nbutton.dso-primary:focus,\nbutton.dso-primary:focus-visible,\nlabel.dso-primary:focus,\nlabel.dso-primary:focus-visible {\n outline-offset: 2px;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n outline: 0;\n}\na.dso-primary.extern::after, a.dso-primary.download::after,\nbutton.dso-primary.extern::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.extern::after,\nlabel.dso-primary.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\na.dso-primary:hover,\nbutton.dso-primary:hover,\nlabel.dso-primary:hover {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n background-color: #15301e;\n border-color: #15301e;\n color: #fff;\n}\na.dso-primary[disabled], a.dso-primary[disabled]:hover,\nbutton.dso-primary[disabled],\nbutton.dso-primary[disabled]:hover,\nlabel.dso-primary[disabled],\nlabel.dso-primary[disabled]:hover {\n background-color: #afcf9d;\n border-color: #afcf9d;\n color: #fff;\n}\na.dso-primary.btn-sm,\nbutton.dso-primary.btn-sm,\nlabel.dso-primary.btn-sm {\n line-height: 1rem;\n}\na.dso-primary.btn-sm dso-icon,\na.dso-primary.btn-sm svg.di, a.dso-primary.btn-sm.extern::after, a.dso-primary.btn-sm.download::after, a.dso-primary.btn-sm.dso-spinner::before,\nbutton.dso-primary.btn-sm dso-icon,\nbutton.dso-primary.btn-sm svg.di,\nbutton.dso-primary.btn-sm.extern::after,\nbutton.dso-primary.btn-sm.download::after,\nbutton.dso-primary.btn-sm.dso-spinner::before,\nlabel.dso-primary.btn-sm dso-icon,\nlabel.dso-primary.btn-sm svg.di,\nlabel.dso-primary.btn-sm.extern::after,\nlabel.dso-primary.btn-sm.download::after,\nlabel.dso-primary.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\na.dso-primary.btn-sm.dso-spinner-left::before,\nbutton.dso-primary.btn-sm.dso-spinner-left::before,\nlabel.dso-primary.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\na.dso-primary.btn-sm.dso-spinner-right::after,\nbutton.dso-primary.btn-sm.dso-spinner-right::after,\nlabel.dso-primary.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\na.dso-primary.download::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.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}\na.dso-primary.extern::after,\nbutton.dso-primary.extern::after,\nlabel.dso-primary.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}\na.dso-primary dso-icon,\na.dso-primary svg.di,\nbutton.dso-primary dso-icon,\nbutton.dso-primary svg.di,\nlabel.dso-primary dso-icon,\nlabel.dso-primary svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\na.dso-primary span + dso-icon,\na.dso-primary span + svg.di,\nbutton.dso-primary span + dso-icon,\nbutton.dso-primary span + svg.di,\nlabel.dso-primary span + dso-icon,\nlabel.dso-primary span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\na.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],\nbutton.dso-primary.dso-spinner-left[disabled],\nbutton.dso-primary.dso-spinner-right[disabled],\nlabel.dso-primary.dso-spinner-left[disabled],\nlabel.dso-primary.dso-spinner-right[disabled] {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\na.dso-primary.dso-spinner-left::before,\nbutton.dso-primary.dso-spinner-left::before,\nlabel.dso-primary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\na.dso-primary.dso-spinner-right::after,\nbutton.dso-primary.dso-spinner-right::after,\nlabel.dso-primary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\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}\na.dso-secondary:focus, a.dso-secondary:focus-visible,\nbutton.dso-secondary:focus,\nbutton.dso-secondary:focus-visible,\nlabel.dso-secondary:focus,\nlabel.dso-secondary:focus-visible {\n outline-offset: 2px;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n outline: 0;\n}\na.dso-secondary.extern::after, a.dso-secondary.download::after,\nbutton.dso-secondary.extern::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.extern::after,\nlabel.dso-secondary.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\na.dso-secondary:hover,\nbutton.dso-secondary:hover,\nlabel.dso-secondary:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\na.dso-secondary[disabled], a.dso-secondary[disabled]:hover,\nbutton.dso-secondary[disabled],\nbutton.dso-secondary[disabled]:hover,\nlabel.dso-secondary[disabled],\nlabel.dso-secondary[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\na.dso-secondary.btn-sm,\nbutton.dso-secondary.btn-sm,\nlabel.dso-secondary.btn-sm {\n line-height: 1rem;\n}\na.dso-secondary.btn-sm dso-icon,\na.dso-secondary.btn-sm svg.di, a.dso-secondary.btn-sm.extern::after, a.dso-secondary.btn-sm.download::after, a.dso-secondary.btn-sm.dso-spinner::before,\nbutton.dso-secondary.btn-sm dso-icon,\nbutton.dso-secondary.btn-sm svg.di,\nbutton.dso-secondary.btn-sm.extern::after,\nbutton.dso-secondary.btn-sm.download::after,\nbutton.dso-secondary.btn-sm.dso-spinner::before,\nlabel.dso-secondary.btn-sm dso-icon,\nlabel.dso-secondary.btn-sm svg.di,\nlabel.dso-secondary.btn-sm.extern::after,\nlabel.dso-secondary.btn-sm.download::after,\nlabel.dso-secondary.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\na.dso-secondary.btn-sm.dso-spinner-left::before,\nbutton.dso-secondary.btn-sm.dso-spinner-left::before,\nlabel.dso-secondary.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\na.dso-secondary.btn-sm.dso-spinner-right::after,\nbutton.dso-secondary.btn-sm.dso-spinner-right::after,\nlabel.dso-secondary.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\na.dso-secondary.download::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.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}\na.dso-secondary.download:hover::after,\nbutton.dso-secondary.download:hover::after,\nlabel.dso-secondary.download:hover::after {\n --dso-icon: var(--di-download-wit);\n}\na.dso-secondary.download[disabled]::after,\nbutton.dso-secondary.download[disabled]::after,\nlabel.dso-secondary.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\na.dso-secondary.extern::after,\nbutton.dso-secondary.extern::after,\nlabel.dso-secondary.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}\na.dso-secondary.extern:hover::after,\nbutton.dso-secondary.extern:hover::after,\nlabel.dso-secondary.extern:hover::after {\n --dso-icon: var(--di-external-link-wit);\n}\na.dso-secondary.extern[disabled]::after,\nbutton.dso-secondary.extern[disabled]::after,\nlabel.dso-secondary.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\na.dso-secondary dso-icon,\na.dso-secondary svg.di,\nbutton.dso-secondary dso-icon,\nbutton.dso-secondary svg.di,\nlabel.dso-secondary dso-icon,\nlabel.dso-secondary svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\na.dso-secondary span + dso-icon,\na.dso-secondary span + svg.di,\nbutton.dso-secondary span + dso-icon,\nbutton.dso-secondary span + svg.di,\nlabel.dso-secondary span + dso-icon,\nlabel.dso-secondary span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\na.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],\nbutton.dso-secondary.dso-spinner-left[disabled],\nbutton.dso-secondary.dso-spinner-right[disabled],\nlabel.dso-secondary.dso-spinner-left[disabled],\nlabel.dso-secondary.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\na.dso-secondary.dso-spinner-left::before,\nbutton.dso-secondary.dso-spinner-left::before,\nlabel.dso-secondary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]).btn-sm:hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]).btn-sm:hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\na.dso-secondary.dso-spinner-right::after,\nbutton.dso-secondary.dso-spinner-right::after,\nlabel.dso-secondary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]).btn-sm:hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]).btn-sm:hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.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}\na.dso-tertiary:focus, a.dso-tertiary:focus-visible,\nbutton.dso-tertiary:focus,\nbutton.dso-tertiary:focus-visible,\nlabel.dso-tertiary:focus,\nlabel.dso-tertiary:focus-visible {\n outline-offset: 2px;\n}\na.dso-tertiary:active,\nbutton.dso-tertiary:active,\nlabel.dso-tertiary:active {\n outline: 0;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\na.dso-tertiary[disabled],\nbutton.dso-tertiary[disabled],\nlabel.dso-tertiary[disabled] {\n color: #afcf9d;\n}\na.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,\nbutton.dso-tertiary[disabled].dso-spinner-left,\nbutton.dso-tertiary[disabled].dso-spinner-right,\nlabel.dso-tertiary[disabled].dso-spinner-left,\nlabel.dso-tertiary[disabled].dso-spinner-right {\n color: #39870c;\n}\na.dso-tertiary:not([disabled]):hover,\nbutton.dso-tertiary:not([disabled]):hover,\nlabel.dso-tertiary:not([disabled]):hover {\n color: #676cb0;\n text-decoration: underline;\n text-underline-position: under;\n}\na.dso-tertiary:not([disabled]):active,\nbutton.dso-tertiary:not([disabled]):active,\nlabel.dso-tertiary:not([disabled]):active {\n color: #676cb0;\n}\na.dso-tertiary.btn-align,\nbutton.dso-tertiary.btn-align,\nlabel.dso-tertiary.btn-align {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n position: relative;\n top: -2px;\n}\na.dso-tertiary.download::after,\nbutton.dso-tertiary.download::after,\nlabel.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}\na.dso-tertiary.download[disabled]::after,\nbutton.dso-tertiary.download[disabled]::after,\nlabel.dso-tertiary.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\na.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,\nbutton.dso-tertiary.download:not([disabled]):hover::after,\nbutton.dso-tertiary.download:not([disabled]):active::after,\nlabel.dso-tertiary.download:not([disabled]):hover::after,\nlabel.dso-tertiary.download:not([disabled]):active::after {\n --dso-icon: var(--di-download-scampi);\n}\na.dso-tertiary.extern::after,\nbutton.dso-tertiary.extern::after,\nlabel.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}\na.dso-tertiary.extern[disabled]::after,\nbutton.dso-tertiary.extern[disabled]::after,\nlabel.dso-tertiary.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\na.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,\nbutton.dso-tertiary.extern:not([disabled]):hover::after,\nbutton.dso-tertiary.extern:not([disabled]):active::after,\nlabel.dso-tertiary.extern:not([disabled]):hover::after,\nlabel.dso-tertiary.extern:not([disabled]):active::after {\n --dso-icon: var(--di-external-link-scampi);\n}\na.dso-tertiary.dso-spinner-left::before,\nbutton.dso-tertiary.dso-spinner-left::before,\nlabel.dso-tertiary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 8px;\n}\na.dso-tertiary.dso-spinner-right::after,\nbutton.dso-tertiary.dso-spinner-right::after,\nlabel.dso-tertiary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 8px;\n}\na.dso-tertiary dso-icon + span:not(.sr-only),\na.dso-tertiary svg.di + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + dso-icon,\na.dso-tertiary span:not(.sr-only) + svg.di,\nbutton.dso-tertiary dso-icon + span:not(.sr-only),\nbutton.dso-tertiary svg.di + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + dso-icon,\nbutton.dso-tertiary span:not(.sr-only) + svg.di,\nlabel.dso-tertiary dso-icon + span:not(.sr-only),\nlabel.dso-tertiary svg.di + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + dso-icon,\nlabel.dso-tertiary span:not(.sr-only) + svg.di {\n margin-left: 8px;\n}\na.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\na.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nbutton.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nbutton.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nlabel.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nlabel.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-left: 0;\n}\na.dso-tertiary dso-icon,\na.dso-tertiary svg.di,\na.dso-tertiary span,\nbutton.dso-tertiary dso-icon,\nbutton.dso-tertiary svg.di,\nbutton.dso-tertiary span,\nlabel.dso-tertiary dso-icon,\nlabel.dso-tertiary svg.di,\nlabel.dso-tertiary span {\n vertical-align: middle;\n}\n\na.dso-primary {\n text-decoration: none;\n}\na.dso-primary, a.dso-primary:visited {\n color: #fff;\n}\na.dso-secondary {\n text-decoration: none;\n}\na.dso-secondary, a.dso-secondary:visited {\n color: #39870c;\n}\na.dso-secondary:hover, a.dso-secondary:visited:hover {\n color: #fff;\n}\na.dso-tertiary {\n text-decoration: none;\n}\na.dso-tertiary, a.dso-tertiary:visited {\n color: #39870c;\n}\n\n.btn:not(.dso-list-button) + .btn:not(.dso-list-button),\n.btn:not(.dso-list-button) + .dso-primary,\n.btn:not(.dso-list-button) + .dso-secondary,\n.btn:not(.dso-list-button) + .dso-tertiary,\n.dso-primary + .btn:not(.dso-list-button),\n.dso-primary + .dso-primary,\n.dso-primary + .dso-secondary,\n.dso-primary + .dso-tertiary,\n.dso-secondary + .btn:not(.dso-list-button),\n.dso-secondary + .dso-primary,\n.dso-secondary + .dso-secondary,\n.dso-secondary + .dso-tertiary,\n.dso-tertiary + .btn:not(.dso-list-button),\n.dso-tertiary + .dso-primary,\n.dso-tertiary + .dso-secondary,\n.dso-tertiary + .dso-tertiary {\n margin-left: 16px;\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: 1rem;\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: 1rem;\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 text-underline-position: under;\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}";export{d as dso_map_controls}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import{t as n,f as t,i as e,a as r}from"./p-5e5fbd41.js";
|
|
2
|
-
/*!
|
|
3
|
-
* focus-trap 6.8.1
|
|
4
|
-
* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
|
|
5
|
-
*/function o(n,t){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),e.push.apply(e,r)}return e}function u(n,t,e){return t in n?Object.defineProperty(n,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[t]=e,n}var i,a=(i=[],{activateTrap:function(n){if(i.length>0){var t=i[i.length-1];t!==n&&t.pause()}var e=i.indexOf(n);-1===e||i.splice(e,1),i.push(n)},deactivateTrap:function(n){var t=i.indexOf(n);-1!==t&&i.splice(t,1),i.length>0&&i[i.length-1].unpause()}}),c=function(n){return setTimeout(n,0)},f=function(n,t){var e=-1;return n.every((function(n,r){return!t(n)||(e=r,!1)})),e},s=function(n){for(var t=arguments.length,e=new Array(t>1?t-1:0),r=1;r<t;r++)e[r-1]=arguments[r];return"function"==typeof n?n.apply(void 0,e):n},v=function(n){return n.target.shadowRoot&&"function"==typeof n.composedPath?n.composedPath()[0]:n.target},l=function(i,l){var b,d=(null==l?void 0:l.document)||document,p=function(n){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{};t%2?o(Object(e),!0).forEach((function(t){u(n,t,e[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):o(Object(e)).forEach((function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(e,t))}))}return n}({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},l),h={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0},w=function(n,t,e){return n&&void 0!==n[t]?n[t]:p[e||t]},m=function(n){return h.containerGroups.findIndex((function(t){var e=t.tabbableNodes;return t.container.contains(n)||e.find((function(t){return t===n}))}))},F=function(n){var t=p[n];if("function"==typeof t){for(var e=arguments.length,r=new Array(e>1?e-1:0),o=1;o<e;o++)r[o-1]=arguments[o];t=t.apply(void 0,r)}if(!t){if(void 0===t||!1===t)return t;throw new Error("`".concat(n,"` was specified but was not a node, or did not return a node"))}var u=t;if("string"==typeof t&&!(u=d.querySelector(t)))throw new Error("`".concat(n,"` as selector refers to no known node"));return u},O=function(){var n=F("initialFocus");if(!1===n)return!1;if(void 0===n)if(m(d.activeElement)>=0)n=d.activeElement;else{var t=h.tabbableGroups[0];n=t&&t.firstTabbableNode||F("fallbackFocus")}if(!n)throw new Error("Your focus-trap needs to have at least one focusable element");return n},j=function(){if(h.containerGroups=h.containers.map((function(r){var o=n(r,p.tabbableOptions),u=t(r,p.tabbableOptions);return{container:r,tabbableNodes:o,focusableNodes:u,firstTabbableNode:o.length>0?o[0]:null,lastTabbableNode:o.length>0?o[o.length-1]:null,nextTabbableNode:function(n){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],r=u.findIndex((function(t){return t===n}));if(!(r<0))return t?u.slice(r+1).find((function(n){return e(n,p.tabbableOptions)})):u.slice(0,r).reverse().find((function(n){return e(n,p.tabbableOptions)}))}}})),h.tabbableGroups=h.containerGroups.filter((function(n){return n.tabbableNodes.length>0})),h.tabbableGroups.length<=0&&!F("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},y=function n(t){!1!==t&&t!==d.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!p.preventScroll}),h.mostRecentlyFocusedNode=t,function(n){return n.tagName&&"input"===n.tagName.toLowerCase()&&"function"==typeof n.select}(t)&&t.select()):n(O()))},k=function(n){var t=F("setReturnFocus",n);return t||!1!==t&&n},T=function(n){var t=v(n);m(t)>=0||(s(p.clickOutsideDeactivates,n)?b.deactivate({returnFocus:p.returnFocusOnDeactivate&&!r(t,p.tabbableOptions)}):s(p.allowOutsideClick,n)||n.preventDefault())},E=function(n){var t=v(n),e=m(t)>=0;e||t instanceof Document?e&&(h.mostRecentlyFocusedNode=t):(n.stopImmediatePropagation(),y(h.mostRecentlyFocusedNode||O()))},D=function(n){if(function(n){return"Escape"===n.key||"Esc"===n.key||27===n.keyCode}(n)&&!1!==s(p.escapeDeactivates,n))return n.preventDefault(),void b.deactivate();(function(n){return"Tab"===n.key||9===n.keyCode})(n)&&function(n){var t=v(n);j();var o=null;if(h.tabbableGroups.length>0){var u=m(t),i=u>=0?h.containerGroups[u]:void 0;if(u<0)o=n.shiftKey?h.tabbableGroups[h.tabbableGroups.length-1].lastTabbableNode:h.tabbableGroups[0].firstTabbableNode;else if(n.shiftKey){var a=f(h.tabbableGroups,(function(n){return t===n.firstTabbableNode}));a<0&&(i.container===t||r(t,p.tabbableOptions)&&!e(t,p.tabbableOptions)&&!i.nextTabbableNode(t,!1))&&(a=u),a>=0&&(o=h.tabbableGroups[0===a?h.tabbableGroups.length-1:a-1].lastTabbableNode)}else{var c=f(h.tabbableGroups,(function(n){return t===n.lastTabbableNode}));c<0&&(i.container===t||r(t,p.tabbableOptions)&&!e(t,p.tabbableOptions)&&!i.nextTabbableNode(t))&&(c=u),c>=0&&(o=h.tabbableGroups[c===h.tabbableGroups.length-1?0:c+1].firstTabbableNode)}}else o=F("fallbackFocus");o&&(n.preventDefault(),y(o))}(n)},N=function(n){if(!s(p.clickOutsideDeactivates,n)){var t=v(n);m(t)>=0||s(p.allowOutsideClick,n)||(n.preventDefault(),n.stopImmediatePropagation())}},A=function(){if(h.active)return a.activateTrap(b),h.delayInitialFocusTimer=p.delayInitialFocus?c((function(){y(O())})):y(O()),d.addEventListener("focusin",E,!0),d.addEventListener("mousedown",T,{capture:!0,passive:!1}),d.addEventListener("touchstart",T,{capture:!0,passive:!1}),d.addEventListener("click",N,{capture:!0,passive:!1}),d.addEventListener("keydown",D,{capture:!0,passive:!1}),b},g=function(){if(h.active)return d.removeEventListener("focusin",E,!0),d.removeEventListener("mousedown",T,!0),d.removeEventListener("touchstart",T,!0),d.removeEventListener("click",N,!0),d.removeEventListener("keydown",D,!0),b};return(b={activate:function(n){if(h.active)return this;var t=w(n,"onActivate"),e=w(n,"onPostActivate"),r=w(n,"checkCanFocusTrap");r||j(),h.active=!0,h.paused=!1,h.nodeFocusedBeforeActivation=d.activeElement,t&&t();var o=function(){r&&j(),A(),e&&e()};return r?(r(h.containers.concat()).then(o,o),this):(o(),this)},deactivate:function(n){if(!h.active)return this;clearTimeout(h.delayInitialFocusTimer),h.delayInitialFocusTimer=void 0,g(),h.active=!1,h.paused=!1,a.deactivateTrap(b);var t=w(n,"onDeactivate"),e=w(n,"onPostDeactivate"),r=w(n,"checkCanReturnFocus");t&&t();var o=w(n,"returnFocus","returnFocusOnDeactivate"),u=function(){c((function(){o&&y(k(h.nodeFocusedBeforeActivation)),e&&e()}))};return o&&r?(r(k(h.nodeFocusedBeforeActivation)).then(u,u),this):(u(),this)},pause:function(){return h.paused||!h.active||(h.paused=!0,g()),this},unpause:function(){return h.paused&&h.active?(h.paused=!1,j(),A(),this):this},updateContainerElements:function(n){var t=[].concat(n).filter(Boolean);return h.containers=t.map((function(n){return"string"==typeof n?d.querySelector(n):n})),h.active&&j(),this}}).updateContainerElements(i),b};export{l as c}
|