@dso-toolkit/core 41.0.1 → 43.1.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-alert.cjs.entry.js +1 -1
- package/dist/cjs/dso-autosuggest.cjs.entry.js +30 -10
- package/dist/cjs/dso-badge.cjs.entry.js +1 -1
- package/dist/cjs/dso-banner.cjs.entry.js +1 -1
- package/dist/cjs/dso-date-picker.cjs.entry.js +1 -1
- package/dist/cjs/dso-header.cjs.entry.js +31 -21
- package/dist/cjs/dso-helpcenter-panel.cjs.entry.js +1 -1
- package/dist/cjs/dso-highlight-box.cjs.entry.js +1 -1
- package/dist/cjs/dso-icon.cjs.entry.js +15 -24
- package/dist/cjs/dso-image-overlay.cjs.entry.js +46 -8
- package/dist/cjs/dso-info-button.cjs.entry.js +5 -1
- package/dist/cjs/dso-label.cjs.entry.js +78 -3
- package/dist/cjs/dso-map-controls.cjs.entry.js +1 -1
- package/dist/cjs/dso-ozon-content.cjs.entry.js +60 -9
- package/dist/cjs/dso-pagination.cjs.entry.js +6 -3
- package/dist/cjs/dso-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/dso-toggletip.cjs.entry.js +3 -15
- package/dist/cjs/dso-toolkit.cjs.js +1 -1
- package/dist/cjs/dso-tooltip.cjs.entry.js +8 -1
- package/dist/cjs/dso-tree-view.cjs.entry.js +24 -2
- package/dist/cjs/dso-viewer-grid.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/alert/alert.css +5 -5
- package/dist/collection/components/autosuggest/autosuggest.js +68 -11
- package/dist/collection/components/autosuggest/autosuggest.template.js +3 -1
- package/dist/collection/components/badge/badge.css +4 -1
- package/dist/collection/components/banner/banner.css +2 -2
- package/dist/collection/components/date-picker/date-picker.css +3 -3
- package/dist/collection/components/header/header.css +149 -3
- package/dist/collection/components/header/header.interfaces.js +1 -0
- package/dist/collection/components/header/header.js +94 -100
- package/dist/collection/components/header/header.template.js +15 -31
- package/dist/collection/components/helpcenter-panel/helpcenter-panel.css +98 -4
- package/dist/collection/components/highlight-box/highlight-box.css +11 -6
- package/dist/collection/components/icon/icon.js +0 -2
- package/dist/collection/components/image-overlay/image-overlay.css +126 -4
- package/dist/collection/components/image-overlay/image-overlay.js +57 -11
- package/dist/collection/components/info-button/info-button.js +24 -2
- package/dist/collection/components/label/label.css +14 -1
- package/dist/collection/components/label/label.js +118 -12
- package/dist/collection/components/label/label.template.js +2 -1
- package/dist/collection/components/list/list.template.js +11 -4
- package/dist/collection/components/map-controls/map-controls.css +149 -4
- package/dist/collection/components/ozon-content/nodes/figuur.node.js +22 -0
- package/dist/collection/components/ozon-content/nodes/{illustratie.node.js → inline-tekst-afbeelding.node.js} +2 -2
- package/dist/collection/components/ozon-content/nodes/int-io-ref.node.js +27 -0
- package/dist/collection/components/ozon-content/nodes/int-ref.node.js +1 -0
- package/dist/collection/components/ozon-content/ozon-content-mapper.js +7 -3
- package/dist/collection/components/ozon-content/ozon-content.css +25 -8
- package/dist/collection/components/ozon-content/ozon-content.js +3 -1
- package/dist/collection/components/pagination/pagination.css +4 -4
- package/dist/collection/components/pagination/pagination.js +8 -5
- package/dist/collection/components/progress-bar/progress-bar.css +1 -1
- package/dist/collection/components/toggletip/toggletip.js +3 -15
- package/dist/collection/components/tooltip/tooltip.css +1 -1
- package/dist/collection/components/tooltip/tooltip.js +7 -0
- package/dist/collection/components/tree-view/tree-item.js +1 -1
- package/dist/collection/components/tree-view/tree-view.js +58 -2
- package/dist/collection/components/viewer-grid/viewer-grid.css +212 -10
- package/dist/custom-elements/index.js +318 -110
- package/dist/dso-toolkit/dso-toolkit.css +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/p-15d0f2eb.entry.js +1 -0
- package/dist/dso-toolkit/p-1845b0ce.entry.js +1 -0
- package/dist/dso-toolkit/p-19b5fae2.entry.js +1 -0
- package/dist/dso-toolkit/p-237cd551.entry.js +1 -0
- package/dist/dso-toolkit/{p-0777c1c4.entry.js → p-363b56b1.entry.js} +1 -1
- package/dist/dso-toolkit/p-590cbab6.entry.js +1 -0
- package/dist/dso-toolkit/{p-3cb44a36.entry.js → p-6505be7d.entry.js} +1 -1
- package/dist/dso-toolkit/p-68d49733.entry.js +1 -0
- package/dist/dso-toolkit/{p-1e92e29d.entry.js → p-7b716383.entry.js} +1 -1
- package/dist/dso-toolkit/p-80b5c915.entry.js +1 -0
- package/dist/dso-toolkit/p-93683c65.entry.js +1 -0
- package/dist/dso-toolkit/p-acc0620a.entry.js +1 -0
- package/dist/dso-toolkit/p-ba835421.entry.js +1 -0
- package/dist/dso-toolkit/p-bd1ee63c.entry.js +1 -0
- package/dist/dso-toolkit/p-bf4d6f63.entry.js +1 -0
- package/dist/dso-toolkit/p-ca3a1440.entry.js +1 -0
- package/dist/dso-toolkit/{p-37e12c3c.entry.js → p-d60876c2.entry.js} +1 -1
- package/dist/dso-toolkit/p-d84c166c.entry.js +1 -0
- package/dist/dso-toolkit/p-e98f049e.entry.js +1 -0
- package/dist/dso-toolkit/p-f726111e.entry.js +1 -0
- package/dist/esm/dso-alert.entry.js +1 -1
- package/dist/esm/dso-autosuggest.entry.js +30 -10
- package/dist/esm/dso-badge.entry.js +1 -1
- package/dist/esm/dso-banner.entry.js +1 -1
- package/dist/esm/dso-date-picker.entry.js +1 -1
- package/dist/esm/dso-header.entry.js +31 -21
- package/dist/esm/dso-helpcenter-panel.entry.js +1 -1
- package/dist/esm/dso-highlight-box.entry.js +1 -1
- package/dist/esm/dso-icon.entry.js +15 -24
- package/dist/esm/dso-image-overlay.entry.js +46 -8
- package/dist/esm/dso-info-button.entry.js +5 -1
- package/dist/esm/dso-label.entry.js +79 -4
- package/dist/esm/dso-map-controls.entry.js +1 -1
- package/dist/esm/dso-ozon-content.entry.js +60 -9
- package/dist/esm/dso-pagination.entry.js +6 -3
- package/dist/esm/dso-progress-bar.entry.js +1 -1
- package/dist/esm/dso-toggletip.entry.js +3 -15
- package/dist/esm/dso-toolkit.js +1 -1
- package/dist/esm/dso-tooltip.entry.js +8 -1
- package/dist/esm/dso-tree-view.entry.js +24 -2
- package/dist/esm/dso-viewer-grid.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/autosuggest/autosuggest.d.ts +17 -1
- package/dist/types/components/autosuggest/autosuggest.template.d.ts +1 -1
- package/dist/types/components/header/header.d.ts +13 -20
- package/dist/types/components/header/header.interfaces.d.ts +17 -0
- package/dist/types/components/header/header.template.d.ts +1 -1
- package/dist/types/components/image-overlay/image-overlay.d.ts +5 -0
- package/dist/types/components/info-button/info-button.d.ts +2 -0
- package/dist/types/components/label/label.d.ts +21 -3
- package/dist/types/components/label/label.template.d.ts +1 -1
- package/dist/types/components/ozon-content/nodes/{illustratie.node.d.ts → figuur.node.d.ts} +1 -1
- package/dist/types/components/ozon-content/nodes/inline-tekst-afbeelding.node.d.ts +5 -0
- package/dist/types/components/ozon-content/nodes/int-io-ref.node.d.ts +6 -0
- package/dist/types/components/ozon-content/ozon-content-node-context.interface.d.ts +2 -1
- package/dist/types/components/ozon-content/ozon-content.interfaces.d.ts +2 -0
- package/dist/types/components/toggletip/toggletip.d.ts +1 -3
- package/dist/types/components/tooltip/tooltip.d.ts +1 -0
- package/dist/types/components/tree-view/tree-view.d.ts +10 -2
- package/dist/types/components.d.ts +43 -7
- package/package.json +1 -1
- package/dist/dso-toolkit/p-076400f4.entry.js +0 -1
- package/dist/dso-toolkit/p-09b53589.entry.js +0 -1
- package/dist/dso-toolkit/p-14fc5767.entry.js +0 -1
- package/dist/dso-toolkit/p-2f64bded.entry.js +0 -1
- package/dist/dso-toolkit/p-5e614420.entry.js +0 -1
- package/dist/dso-toolkit/p-60679db4.entry.js +0 -1
- package/dist/dso-toolkit/p-7796687c.entry.js +0 -1
- package/dist/dso-toolkit/p-7f41f2a1.entry.js +0 -1
- package/dist/dso-toolkit/p-b1dc8d76.entry.js +0 -1
- package/dist/dso-toolkit/p-c0b7f435.entry.js +0 -1
- package/dist/dso-toolkit/p-d0d279cc.entry.js +0 -1
- package/dist/dso-toolkit/p-daf049bd.entry.js +0 -1
- package/dist/dso-toolkit/p-e01b1657.entry.js +0 -1
- package/dist/dso-toolkit/p-e1496a15.entry.js +0 -1
- package/dist/dso-toolkit/p-ea14647b.entry.js +0 -1
- package/dist/dso-toolkit/p-f1026921.entry.js +0 -1
|
@@ -42,7 +42,7 @@ function clsx () {
|
|
|
42
42
|
return str;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
const alertCss = "@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}:host{display:block;--di-status-success:url(\"data:image/svg+xml,%3csvg id='status-success' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3ccircle cx='12' cy='12' r='11'
|
|
45
|
+
const alertCss = "@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}:host{display:block;--di-status-success:url(\"data:image/svg+xml,%3csvg id='status-success' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3ccircle cx='12' cy='12' r='11' fill='%2339870c'/%3e %3cpath d='M12%2c1A11%2c11%2c0%2c1%2c1%2c1%2c12%2c11%2c11%2c0%2c0%2c1%2c12%2c1m0-1A12%2c12%2c0%2c1%2c0%2c24%2c12%2c12%2c12%2c0%2c0%2c0%2c12%2c0Z' fill='white'/%3e %3c/g%3e %3cpath d='M10.11%2c18%2c5.29%2c13.31A.92.92%2c0%2c0%2c1%2c5.3%2c12a1%2c1%2c0%2c0%2c1%2c1.41%2c0l3.4%2c3.3%2c7.18-7a1%2c1%2c0%2c0%2c1%2c1.41%2c0%2c.92.92%2c0%2c0%2c1%2c0%2c1.35Z' fill='white'/%3e %3c/svg%3e\");--di-status-danger:url(\"data:image/svg+xml,%3csvg id='status-danger-line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' fill='%23ce3f51'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' fill='white'/%3e %3c/g%3e %3cpath d='M12%2c16a1%2c1%2c0%2c0%2c1-1-.91V8.91a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c12%2c16Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c12%2c17Z' fill='white'/%3e %3c/svg%3e\");--di-status-warning:url(\"data:image/svg+xml,%3csvg id='status-warning' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' fill='%23dcd400'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' fill='white'/%3e %3c/g%3e %3cpath d='M11.73%2c15.85a1%2c1%2c0%2c0%2c1-1-.91V8.76a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c11.73%2c15.85Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c11.73%2c16.85Z'/%3e %3c/svg%3e\");--di-status-info:url(\"data:image/svg+xml,%3csvg id='status-info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3ccircle cx='12' cy='12' r='11' fill='%232b5780'/%3e %3cpath d='M12%2c1A11%2c11%2c0%2c1%2c1%2c1%2c12%2c11%2c11%2c0%2c0%2c1%2c12%2c1m0-1A12%2c12%2c0%2c1%2c0%2c24%2c12%2c12%2c12%2c0%2c0%2c0%2c12%2c0Z' fill='white'/%3e %3c/g%3e %3cpath d='M11%2c8a1%2c1%2c0%2c1%2c1%2c1%2c1A1%2c1%2c0%2c0%2c1%2c11%2c8Zm2%2c8.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z' fill='white'/%3e %3c/svg%3e\");--di-download-grijs90:url(\"data:image/svg+xml,%3csvg id='download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M18.72%2c10.44%2c12%2c17l-6.7-6.52C4.8%2c10%2c5%2c9.63%2c5.63%2c9.63H8.5V1.82A.8.8%2c0%2c0%2c1%2c9.28%2c1h5.44a.8.8%2c0%2c0%2c1%2c.78.82V9.61h2.87C19%2c9.6%2c19.2%2c10%2c18.72%2c10.44ZM1%2c17v6H23V17Zm16%2c3a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c17%2c20Zm5%2c0a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c22%2c20Z'/%3e %3c/svg%3e\");--di-external-link-grijs90:url(\"data:image/svg+xml,%3csvg id='external-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M19%2c6V9.69c0%2c.33-.2.41-.43.17L17.06%2c8.35l-3.35%2c3.36a1%2c1%2c0%2c0%2c1-1.42%2c0%2c1%2c1%2c0%2c0%2c1%2c0-1.42l3.36-3.35L14.14%2c5.43C13.9%2c5.19%2c14%2c5%2c14.31%2c5H19V6ZM18%2c17V13a1%2c1%2c0%2c0%2c0-2%2c0v4a1%2c1%2c0%2c0%2c1-1%2c1H7a1%2c1%2c0%2c0%2c1-1-1V9A1%2c1%2c0%2c0%2c1%2c7%2c8h4a1%2c1%2c0%2c0%2c0%2c0-2H7A3%2c3%2c0%2c0%2c0%2c4%2c9v8a3%2c3%2c0%2c0%2c0%2c3%2c3h8A3%2c3%2c0%2c0%2c0%2c18%2c17Z'/%3e %3c/svg%3e\")}:host(:not(:first-child)){margin-top:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.alert{border:1px solid transparent;line-height:1.5;margin-bottom:24px;min-height:64px;position:relative}.alert:not(:first-child){margin-top:24px}.alert::before{content:\"\";left:15px;position:absolute;top:15px}.alert.alert-success{color:#191919;background-color:#e4f1d4;border-color:#e4f1d4}.alert.alert-success::before{background:var(--dso-icon, var(--di-status-success)) no-repeat;background-position:center;background-size:cover;height:32px;vertical-align:top;width:32px}.alert.alert-danger{color:#191919;background-color:#f5d8dc;border-color:#f5d8dc}.alert.alert-danger::before{background:var(--dso-icon, var(--di-status-danger)) no-repeat;background-position:center;background-size:cover;height:32px;vertical-align:top;width:32px}.alert.alert-warning{color:#191919;background-color:#f8f6cc;border-color:#f8f6cc}.alert.alert-warning::before{background:var(--dso-icon, var(--di-status-warning)) no-repeat;background-position:center;background-size:cover;height:32px;vertical-align:top;width:32px}.alert.alert-info{color:#191919;background-color:#e1ecf7;border-color:#e1ecf7}.alert.alert-info::before{background:var(--dso-icon, var(--di-status-info)) no-repeat;background-position:center;background-size:cover;height:32px;vertical-align:top;width:32px}";
|
|
46
46
|
|
|
47
47
|
let Alert = class extends HTMLElement {
|
|
48
48
|
constructor() {
|
|
@@ -265,14 +265,27 @@ let Autosuggest = class extends HTMLElement {
|
|
|
265
265
|
*/
|
|
266
266
|
this.suggestOnFocus = false;
|
|
267
267
|
this.showSuggestions = false;
|
|
268
|
+
this.notFound = false;
|
|
269
|
+
this.showLoading = false;
|
|
268
270
|
this.listboxId = v4();
|
|
269
271
|
this.inputId = v4();
|
|
270
272
|
this.labelId = v4();
|
|
271
|
-
this.debouncedEmitValue = debounce_1((value) =>
|
|
273
|
+
this.debouncedEmitValue = debounce_1((value) => {
|
|
274
|
+
this.changeEmitter.emit(value);
|
|
275
|
+
this.debouncedShowLoading();
|
|
276
|
+
}, 200);
|
|
277
|
+
this.debouncedShowLoading = debounce_1(() => {
|
|
278
|
+
if (this.inputValue) {
|
|
279
|
+
this.showLoading = true;
|
|
280
|
+
}
|
|
281
|
+
}, this.loadingDelayed);
|
|
282
|
+
this.inputValue = '';
|
|
272
283
|
this.onInput = (event) => {
|
|
273
284
|
if (!(event.target instanceof HTMLInputElement)) {
|
|
274
285
|
throw new Error("event.target is not instanceof HTMLInputElement");
|
|
275
286
|
}
|
|
287
|
+
this.showLoading = !this.loadingDelayed;
|
|
288
|
+
this.inputValue = event.target.value;
|
|
276
289
|
this.debouncedEmitValue(event.target.value.match(/(\S+)/g) ? event.target.value : '');
|
|
277
290
|
};
|
|
278
291
|
this.onFocusIn = () => {
|
|
@@ -318,15 +331,15 @@ let Autosuggest = class extends HTMLElement {
|
|
|
318
331
|
}
|
|
319
332
|
suggestionsWatcher() {
|
|
320
333
|
this.resetSelectedSuggestion();
|
|
321
|
-
if (!this.showSuggestions
|
|
334
|
+
if ((!this.showSuggestions || !this.notFound) && this.inputValue) {
|
|
322
335
|
this.openSuggestions();
|
|
323
336
|
}
|
|
324
|
-
else if (this.showSuggestions
|
|
337
|
+
else if ((this.showSuggestions || this.notFound) && !this.inputValue) {
|
|
325
338
|
this.closeSuggestions();
|
|
326
339
|
}
|
|
327
340
|
}
|
|
328
341
|
onDocumentClick(event) {
|
|
329
|
-
if (this.showSuggestions &&
|
|
342
|
+
if ((this.showSuggestions || this.notFound) &&
|
|
330
343
|
this.listbox &&
|
|
331
344
|
event.target instanceof Node &&
|
|
332
345
|
!this.listbox.contains(event.target) &&
|
|
@@ -423,21 +436,24 @@ let Autosuggest = class extends HTMLElement {
|
|
|
423
436
|
}
|
|
424
437
|
}
|
|
425
438
|
resetSelectedSuggestion() {
|
|
439
|
+
this.showLoading = !this.loadingDelayed;
|
|
426
440
|
this.selectedSuggestion = undefined;
|
|
427
441
|
this.input.setAttribute('aria-activedescendant', '');
|
|
428
442
|
}
|
|
429
443
|
openSuggestions(selectSuggestion) {
|
|
430
444
|
this.showSuggestions = this.suggestions.length > 0;
|
|
431
|
-
this.
|
|
432
|
-
|
|
445
|
+
this.notFound = this.suggestions.length === 0;
|
|
446
|
+
this.input.setAttribute("aria-expanded", (this.showSuggestions || this.notFound).toString());
|
|
447
|
+
if (this.showSuggestions && selectSuggestion === 'first') {
|
|
433
448
|
this.selectFirstSuggestion();
|
|
434
449
|
}
|
|
435
|
-
else if (selectSuggestion === 'last') {
|
|
450
|
+
else if (this.showSuggestions && selectSuggestion === 'last') {
|
|
436
451
|
this.selectLastSuggestion();
|
|
437
452
|
}
|
|
438
453
|
}
|
|
439
454
|
closeSuggestions() {
|
|
440
455
|
this.showSuggestions = false;
|
|
456
|
+
this.notFound = false;
|
|
441
457
|
this.input.setAttribute("aria-expanded", "false");
|
|
442
458
|
this.selectFirstSuggestion();
|
|
443
459
|
}
|
|
@@ -455,13 +471,17 @@ let Autosuggest = class extends HTMLElement {
|
|
|
455
471
|
}
|
|
456
472
|
render() {
|
|
457
473
|
const terms = this.input.value.split(' ').filter(t => t);
|
|
458
|
-
return (h(Fragment, null, h("slot", null), this.loading
|
|
474
|
+
return (h(Fragment, null, h("slot", null), this.loading && this.showLoading
|
|
459
475
|
? h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))
|
|
460
|
-
: h("ul", { role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: element => this.listbox = element, hidden: !this.showSuggestions }, this.showSuggestions
|
|
476
|
+
: h("ul", { role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: element => this.listbox = element, hidden: !this.showSuggestions && !this.notFound }, this.showSuggestions
|
|
461
477
|
? this.suggestions.map((suggestion) => (h("li", { role: "option", id: this.listboxItemId(suggestion), key: suggestion.value, onMouseEnter: () => this.selectSuggestion(suggestion), onMouseLeave: () => this.resetSelectedSuggestion(), onClick: () => this.pickSelectedValue(), "aria-selected": (suggestion === this.selectedSuggestion).toString(), "aria-label": suggestion.value }, h("span", { class: "value" }, this.markTerms(suggestion.value, terms)), suggestion.type
|
|
462
478
|
? (h("span", { class: "type" }, suggestion.type))
|
|
463
479
|
: undefined)))
|
|
464
|
-
:
|
|
480
|
+
: this.notFound
|
|
481
|
+
? h("li", null, h("span", { class: "value" }, !this.notFoundLabel
|
|
482
|
+
? this.markTerms(`${this.inputValue} is niet gevonden.`, terms)
|
|
483
|
+
: h("span", null, this.notFoundLabel)))
|
|
484
|
+
: undefined)));
|
|
465
485
|
}
|
|
466
486
|
get host() { return this; }
|
|
467
487
|
static get watchers() { return {
|
|
@@ -470,7 +490,7 @@ let Autosuggest = class extends HTMLElement {
|
|
|
470
490
|
static get style() { return autosuggestCss; }
|
|
471
491
|
};
|
|
472
492
|
|
|
473
|
-
const badgeCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-badge{background-color:#666;border-radius:1em;color:#fff;display:inline-block;font-size:0.875em;line-height:
|
|
493
|
+
const badgeCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-badge{background-color:#666;border-radius:1em;color:#fff;display:inline-block;font-size:0.875em;line-height:1;min-width:calc(1 + 8px);padding:4px 8px;text-align:center}.dso-badge.badge-info{background-color:#6ca4d9;color:#191919}.dso-badge.badge-primary{background-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;color:#191919}.dso-badge.badge-danger{background-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;color:#191919;outline:1px solid #191919;outline-offset:-1px}";
|
|
474
494
|
|
|
475
495
|
let Badge = class extends HTMLElement {
|
|
476
496
|
constructor() {
|
|
@@ -484,7 +504,7 @@ let Badge = class extends HTMLElement {
|
|
|
484
504
|
static get style() { return badgeCss; }
|
|
485
505
|
};
|
|
486
506
|
|
|
487
|
-
const bannerCss = ":host{display:block;--di-status-danger:url(\"data:image/svg+xml,%3csvg id='status-danger-line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z'
|
|
507
|
+
const bannerCss = ":host{display:block;--di-status-danger:url(\"data:image/svg+xml,%3csvg id='status-danger-line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' fill='%23ce3f51'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' fill='white'/%3e %3c/g%3e %3cpath d='M12%2c16a1%2c1%2c0%2c0%2c1-1-.91V8.91a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c12%2c16Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c12%2c17Z' fill='white'/%3e %3c/svg%3e\");--di-status-warning:url(\"data:image/svg+xml,%3csvg id='status-warning' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' fill='%23dcd400'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' fill='white'/%3e %3c/g%3e %3cpath d='M11.73%2c15.85a1%2c1%2c0%2c0%2c1-1-.91V8.76a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c11.73%2c15.85Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c11.73%2c16.85Z'/%3e %3c/svg%3e\");--di-download-grijs90:url(\"data:image/svg+xml,%3csvg id='download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M18.72%2c10.44%2c12%2c17l-6.7-6.52C4.8%2c10%2c5%2c9.63%2c5.63%2c9.63H8.5V1.82A.8.8%2c0%2c0%2c1%2c9.28%2c1h5.44a.8.8%2c0%2c0%2c1%2c.78.82V9.61h2.87C19%2c9.6%2c19.2%2c10%2c18.72%2c10.44ZM1%2c17v6H23V17Zm16%2c3a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c17%2c20Zm5%2c0a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c22%2c20Z'/%3e %3c/svg%3e\");--di-external-link-grijs90:url(\"data:image/svg+xml,%3csvg id='external-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M19%2c6V9.69c0%2c.33-.2.41-.43.17L17.06%2c8.35l-3.35%2c3.36a1%2c1%2c0%2c0%2c1-1.42%2c0%2c1%2c1%2c0%2c0%2c1%2c0-1.42l3.36-3.35L14.14%2c5.43C13.9%2c5.19%2c14%2c5%2c14.31%2c5H19V6ZM18%2c17V13a1%2c1%2c0%2c0%2c0-2%2c0v4a1%2c1%2c0%2c0%2c1-1%2c1H7a1%2c1%2c0%2c0%2c1-1-1V9A1%2c1%2c0%2c0%2c1%2c7%2c8h4a1%2c1%2c0%2c0%2c0%2c0-2H7A3%2c3%2c0%2c0%2c0%2c4%2c9v8a3%2c3%2c0%2c0%2c0%2c3%2c3h8A3%2c3%2c0%2c0%2c0%2c18%2c17Z'/%3e %3c/svg%3e\")}*,*::after,*::before{box-sizing:border-box}.dso-banner{padding:16px 0;position:relative}";
|
|
488
508
|
|
|
489
509
|
let Banner = class extends HTMLElement {
|
|
490
510
|
constructor() {
|
|
@@ -753,7 +773,7 @@ const localization = {
|
|
|
753
773
|
]
|
|
754
774
|
};
|
|
755
775
|
|
|
756
|
-
const datePickerCss = ".sc-dso-date-picker-h{display:block}.dso-date.sc-dso-date-picker *.sc-dso-date-picker,.dso-date.sc-dso-date-picker *.sc-dso-date-picker::before,.dso-date.sc-dso-date-picker *.sc-dso-date-picker::after{box-sizing:border-box}.dso-date.sc-dso-date-picker{box-sizing:border-box;color:#191919;display:block;font-family:\"Asap\", sans-serif;margin:0;position:relative;text-align:left;width:100%}.dso-date.sc-dso-date-picker:not(.dso-visible) .dso-date__dialog.sc-dso-date-picker{display:none}.dso-date__input.sc-dso-date-picker{display:block;width:100%;height:
|
|
776
|
+
const datePickerCss = ".sc-dso-date-picker-h{display:block}.dso-date.sc-dso-date-picker *.sc-dso-date-picker,.dso-date.sc-dso-date-picker *.sc-dso-date-picker::before,.dso-date.sc-dso-date-picker *.sc-dso-date-picker::after{box-sizing:border-box}.dso-date.sc-dso-date-picker{box-sizing:border-box;color:#191919;display:block;font-family:\"Asap\", sans-serif;margin:0;position:relative;text-align:left;width:100%}.dso-date.sc-dso-date-picker:not(.dso-visible) .dso-date__dialog.sc-dso-date-picker{display:none}.dso-date__input.sc-dso-date-picker{display:block;width:100%;height:calc(16px + 1.5rem);padding:6px 14px;font-size:1rem;line-height:1.5;color:#191919;background-color:#fff;background-image:none;border:1px solid #275937;border-radius:4px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s}.dso-date__input.sc-dso-date-picker::-moz-placeholder{color:#666;opacity:1}.dso-date__input.sc-dso-date-picker:-ms-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-webkit-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-ms-expand{background-color:transparent;border:0}.dso-date__input.sc-dso-date-picker:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled].sc-dso-date-picker,.dso-date__input[readonly].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{background-color:#fff;opacity:1}.dso-date__input[disabled].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{cursor:default}.dso-date__input[disabled].sc-dso-date-picker{border-color:#e5e5e5;color:#999}.dso-date__input[readonly].sc-dso-date-picker{border-width:1px}.dso-date__input[type=text].sc-dso-date-picker{line-height:calc(16px + 1.5rem)}.dso-date__input[size].sc-dso-date-picker{width:auto}.dso-date__toggle.sc-dso-date-picker{-moz-appearance:none;-webkit-appearance:none;-webkit-user-select:none;align-items:center;appearance:none;background:transparent;border:0;border-radius:0;border-bottom-right-radius:4px;border-top-right-radius:4px;color:#39870c;cursor:pointer;display:flex;height:38px;justify-content:center;padding:0;position:absolute;right:0;transform:translateY(-50%);top:50%;user-select:none;width:38px;z-index:101}.dso-date__toggle.sc-dso-date-picker:disabled{color:#afcf9d;cursor:pointer}.dso-date__dialog.sc-dso-date-picker{border-width:1px;display:flex;right:0;min-width:320px;opacity:0;position:absolute;top:100%;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;visibility:hidden;will-change:transform, opacity, visibility;z-index:210}@media (max-width: 35.9375em){.dso-date__dialog.sc-dso-date-picker{background:rgba(25, 25, 25, 0.5);bottom:0;position:fixed;left:0;right:0;top:0;transform:translateZ(0);transform-origin:bottom center}}.dso-date__dialog.is-left.sc-dso-date-picker{left:-11px;right:auto;width:auto}.dso-date__dialog.is-active.sc-dso-date-picker{opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.dso-date__dialog-content.sc-dso-date-picker{background:#fff;border:1px solid rgba(0, 0, 0, 0.1);border-radius:4px;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);margin-left:auto;margin-right:-1px;margin-top:8px;max-width:310px;min-width:290px;padding:16px;position:relative;transform:none;width:100%;z-index:210}@media (max-width: 35.9375em){.dso-date__dialog-content.sc-dso-date-picker{border:0;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;bottom:0;left:0;margin:0;max-width:none;min-height:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;visibility:hidden;will-change:transform, opacity, visibility}.is-active.sc-dso-date-picker .dso-date__dialog-content.sc-dso-date-picker{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}}.dso-date__table.sc-dso-date-picker{border-collapse:collapse;border-spacing:0;color:#191919;font-size:1rem;font-weight:400;line-height:1.25;min-width:280px;table-layout:fixed;text-align:center;width:100%}.dso-date__table-header.sc-dso-date-picker{font-size:0.875em;font-weight:600;height:36px;line-height:36px;text-decoration:none;text-transform:uppercase}.dso-date__cell.sc-dso-date-picker{height:40px;padding:1px;text-align:center;width:40px}.dso-date__day.sc-dso-date-picker{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;box-shadow:0 0 0 1px transparent;color:#191919;cursor:pointer;display:inline-block;font-family:\"Asap\", sans-serif;font-variant-numeric:tabular-nums;font-weight:400;height:38px;line-height:0;padding:0;position:relative;text-align:center;vertical-align:middle;width:38px;z-index:100}.dso-date__day.is-today.sc-dso-date-picker{background:transparent;height:36px;box-shadow:0 0 0 1px #39870c;width:36px}.dso-date__day.sc-dso-date-picker:hover,.dso-date__day.sc-dso-date-picker:active{background:#39870c;color:#fff}.dso-date__day.sc-dso-date-picker:focus{background:transparent;box-shadow:0 0 0 2px #275937;color:#191919;height:34px;outline:0;width:34px}[aria-selected=true].sc-dso-date-picker .dso-date__day.sc-dso-date-picker{background:#39870c;color:#fff}[aria-selected=true].sc-dso-date-picker .dso-date__day.sc-dso-date-picker:focus{background:transparent}[aria-selected=true].sc-dso-date-picker .dso-date__day.sc-dso-date-picker:focus span[aria-hidden=true].sc-dso-date-picker{background:#39870c;border:1px solid #fff;line-height:32px}.dso-date__day.is-outside.sc-dso-date-picker{background:#f2f2f2;box-shadow:none;color:#666;cursor:default;pointer-events:none}.dso-date__day.is-disabled.sc-dso-date-picker{background:#fff;cursor:default}.dso-date__day.is-disabled.sc-dso-date-picker:hover{color:#666}.dso-date__day.sc-dso-date-picker span[aria-hidden=true].sc-dso-date-picker{border-radius:50%;display:inline-block;height:34px;line-height:34px;width:34px}.dso-date__header.sc-dso-date-picker{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px;width:100%}.dso-date__header.sc-dso-date-picker span.sc-dso-date-picker{font-size:0.875rem}.dso-date__nav.sc-dso-date-picker{white-space:nowrap}.dso-date__prev.sc-dso-date-picker,.dso-date__next.sc-dso-date-picker{-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:transparent;border:1px solid #39870c;border-radius:4px;box-sizing:border-box;color:#39870c;cursor:pointer;display:inline-flex;font-size:1em;height:32px;justify-content:center;margin-left:8px;padding:0;width:32px}@media (max-width: 35.9375em){.dso-date__prev.sc-dso-date-picker,.dso-date__next.sc-dso-date-picker{height:40px;width:40px}}.dso-date__prev.sc-dso-date-picker:hover,.dso-date__prev.sc-dso-date-picker:active,.dso-date__next.sc-dso-date-picker:hover,.dso-date__next.sc-dso-date-picker:active{background-color:#39870c;color:#fff}.dso-date__prev.sc-dso-date-picker:focus,.dso-date__next.sc-dso-date-picker:focus{background:transparent;color:#39870c}.dso-date__prev.sc-dso-date-picker:disabled,.dso-date__prev.sc-dso-date-picker:disabled:hover,.dso-date__next.sc-dso-date-picker:disabled,.dso-date__next.sc-dso-date-picker:disabled:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d;opacity:1}.dso-date__prev.sc-dso-date-picker svg.sc-dso-date-picker,.dso-date__next.sc-dso-date-picker svg.sc-dso-date-picker{margin:0 auto}.dso-date__select.sc-dso-date-picker{display:inline-flex;height:28px;line-height:28px;position:relative}.dso-date__select.sc-dso-date-picker span.sc-dso-date-picker{margin-right:4px}.dso-date__select.sc-dso-date-picker select.sc-dso-date-picker{color:#275937;cursor:pointer;font-size:1rem;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:101}.dso-date__select.sc-dso-date-picker select.sc-dso-date-picker:focus+.dso-date__select-label.sc-dso-date-picker{box-shadow:0 0 0 2px #275937}.dso-date__select.sc-dso-date-picker select.sc-dso-date-picker:disabled{color:#afcf9d}.dso-date__select-label.sc-dso-date-picker{align-items:center;border-radius:4px;color:#39870c;display:flex;padding:0 4px 0 8px;pointer-events:none;position:relative;width:100%;z-index:100}.dso-date__select-label.sc-dso-date-picker span.sc-dso-date-picker{font-size:1.25rem;font-weight:600;line-height:1.25}.dso-date__select-label.sc-dso-date-picker svg.sc-dso-date-picker{width:16px;height:16px}.dso-date__mobile.sc-dso-date-picker{align-items:center;border-bottom:1px solid rgba(0, 0, 0, 0.12);display:flex;font-size:1em;justify-content:space-between;margin-bottom:20px;margin-left:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;width:120%}@media (min-width: 36em){.dso-date__mobile.sc-dso-date-picker{border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-16px;top:-16px;width:auto}}.dso-date__mobile-heading.sc-dso-date-picker{display:inline-block;font-weight:600;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.dso-date__mobile-heading.sc-dso-date-picker{display:none}}.dso-date__close.sc-dso-date-picker{-webkit-appearance:none;align-items:center;appearance:none;background-color:#fff;border:0;border-radius:50%;color:#39870c;cursor:pointer;display:flex;font-size:1em;height:32px;justify-content:center;margin-right:-4px;padding:0;width:32px}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker{margin-right:0;opacity:0}}.dso-date__close.sc-dso-date-picker:focus{box-shadow:0 0 0 2px #275937;outline:none}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker:focus{opacity:1}}.dso-date__vhidden.sc-dso-date-picker{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}";
|
|
757
777
|
|
|
758
778
|
function range(from, to) {
|
|
759
779
|
var result = [];
|
|
@@ -1753,7 +1773,7 @@ let DropdownMenu = class extends HTMLElement {
|
|
|
1753
1773
|
static get style() { return dropdownMenuCss; }
|
|
1754
1774
|
};
|
|
1755
1775
|
|
|
1756
|
-
const headerCss = ":host{--di-chevron-down-bosgroen:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-up-bosgroen:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");display:block}.dso-header{border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap;padding:0 16px;position:relative}@media screen and (min-width: 768px){.dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down{flex-wrap:nowrap}}.logo-container{display:flex;flex-wrap:wrap;padding-bottom:16px;padding-top:16px}@media screen and (max-width: 767px){.logo-container{max-width:200px}}.logo-container+.dropdown dso-dropdown-menu{position:static}@media screen and (min-width: 768px){.sub-logo{margin-left:24px}}@media screen and (max-width: 767px){.sub-logo{flex-basis:100%}}.login,.logout{margin-right:16px}.profile a,.logout a,.login a{text-decoration:none;color:#39870c;font-weight:600}.profile a:hover,.profile a:focus,.logout a:hover,.logout a:focus,.login a:hover,.login a:focus{text-decoration:none}.profile a:active,.logout a:active,.login a:active{text-decoration:underline}.dso-header-session{display:flex;margin-left:auto}.dso-header-session .profile a{margin-left:8px}.dso-header-session .profile+.logout{border-left:3px solid #ccc;margin-left:16px;padding-left:16px}.dso-navbar{flex-basis:100%}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.dso-tertiary::after,dso-dropdown-menu>.btn::after{content:\"\";display:inline-block;margin-left:8px}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.btn-primary::after{background:var(--dso-icon, var(--di-chevron-down-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.btn-default::after{background:var(--dso-icon, var(--di-chevron-down)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}dso-dropdown-menu>.dso-secondary:hover::after,dso-dropdown-menu>.btn-default:hover::after{--dso-icon:var(--di-chevron-down-wit)}dso-dropdown-menu>.dso-tertiary::after,dso-dropdown-menu>.btn-link::after{background:var(--dso-icon, var(--di-chevron-down)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;position:relative;top:-2px}dso-dropdown-menu>.dso-tertiary:hover::after,dso-dropdown-menu>.btn-link:hover::after{--dso-icon:var(--di-chevron-down-scampi)}dso-dropdown-menu .dso-group-label{color:#999;font-size:0.875em;font-weight:400;margin:0;padding:4px 20px 2px;text-transform:uppercase}dso-dropdown-menu ul{margin:0;padding:0}dso-dropdown-menu ul:not(:last-child){border-bottom:1px solid #e5e5e5;margin-bottom:11px;padding-bottom:11px}dso-dropdown-menu .dso-dropdown-options{background-clip:padding-box;background-color:#fff;border-radius:4px;border:1px solid rgba(0, 0, 0, 0.15);box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);font-size:16px;margin:2px 0 0;min-width:160px;padding:5px 0;position:absolute;text-align:left;top:100%;z-index:220}dso-dropdown-menu .dso-dropdown-options li{list-style:none}dso-dropdown-menu .dso-dropdown-options li a:visited{color:#191919}dso-dropdown-menu .dso-dropdown-options li a,dso-dropdown-menu .dso-dropdown-options li button{text-decoration:none;clear:both;color:#191919;display:block;font-weight:400;line-height:1.5;padding:3px 20px;text-decoration:none;white-space:nowrap}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus,dso-dropdown-menu .dso-dropdown-options li a:active,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus,dso-dropdown-menu .dso-dropdown-options li button:active{text-decoration:underline}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus{background-color:#39870c;border-color:#39870c;color:#fff;text-decoration:none}dso-dropdown-menu .dso-dropdown-options li button{background-color:transparent;border:0;border-radius:0;text-align:inherit;width:100%}dso-dropdown-menu[dropdown-align=right] .dso-dropdown-options{right:0}dso-dropdown-menu[open]>.dso-primary::after,dso-dropdown-menu[open]>.btn-primary::after{--dso-icon:var(--di-chevron-up-wit)}dso-dropdown-menu[open]>.dso-secondary::after,dso-dropdown-menu[open]>.btn-default::after{--dso-icon:var(--di-chevron-up)}dso-dropdown-menu[open]>.dso-secondary:hover::after,dso-dropdown-menu[open]>.btn-default:hover::after{--dso-icon:var(--di-chevron-up-wit)}dso-dropdown-menu[open]>.dso-tertiary::after,dso-dropdown-menu[open]>.btn-link::after{--dso-icon:var(--di-chevron-up)}dso-dropdown-menu[open]>.dso-tertiary:hover::after,dso-dropdown-menu[open]>.btn-link:hover::after{--dso-icon:var(--di-chevron-up-scampi)}dso-dropdown-menu[open] button::after{background:var(--dso-icon, var(--di-chevron-up-bosgroen)) no-repeat;background-position:center;background-size:cover;height:1.2em;vertical-align:top;width:1.2em}dso-dropdown-menu[checkable] .dso-group-label{padding-left:40px}dso-dropdown-menu[checkable] li a,dso-dropdown-menu[checkable] li button{padding-left:40px}dso-dropdown-menu[checkable] li.dso-checked a:not(:focus),dso-dropdown-menu[checkable] li.dso-checked button:not(:focus){background-color:#39870c;border-color:#39870c;color:#fff}dso-dropdown-menu[checkable] li.dso-checked a::before,dso-dropdown-menu[checkable] li.dso-checked button::before{background:var(--dso-icon, var(--di-check-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;content:\"\";display:block;float:left;margin-left:-32px;margin-right:8px}dso-dropdown-menu button{align-items:flex-end;background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;padding-right:32px}dso-dropdown-menu button::after{background:var(--dso-icon, var(--di-chevron-down-bosgroen)) no-repeat;background-position:center;background-size:cover;height:1.2em;vertical-align:top;width:1.2em;content:\"\";display:inline-block;margin-left:8px;position:absolute;right:0;top:50%;transform:translateY(-50%)}@media screen and (max-width: 767px){dso-dropdown-menu{top:12px}}dso-dropdown-menu .dso-dropdown-options{border:0;border-radius:0}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul{width:320px}@media screen and (max-width: 991px){dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul{width:100%}}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a{color:#275937;font-size:1.25rem;padding:16px}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li.dso-active a{font-weight:600}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li+li{border-top:1px solid #ccc}.dropdown{margin-left:auto}@media screen and (max-width: 767px){.dropdown dso-dropdown-menu{margin-top:28px}}.dropdown dso-dropdown-menu .dso-dropdown-options{left:0;right:0;top:100%}.dropdown dso-dropdown-menu[open] button::after{background:var(--dso-icon, var(--di-chevron-up)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.dropdown dso-dropdown-menu button{color:#39870c;font-size:16px;font-weight:600;position:relative}.dropdown dso-dropdown-menu button:hover,.dropdown dso-dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dropdown dso-dropdown-menu button::after{background:var(--dso-icon, var(--di-chevron-down)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.dso-nav{align-items:end;column-gap:32px;display:flex;list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.dso-nav>li{margin-bottom:4px}.dso-nav>li>a{display:block}.dso-nav>li>a,.dso-nav>li>a:hover,.dso-nav>li>a:focus,.dso-nav>li>a:visited{color:#275937}.dso-nav>li.dso-active,.dso-nav>li.is-active{margin-bottom:0}.dso-nav>li.dso-active>a,.dso-nav>li.is-active>a{border-bottom:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main>li>a{text-decoration:none;font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;white-space:nowrap}.dso-nav.dso-nav-main>li>a:hover,.dso-nav.dso-nav-main>li>a:focus,.dso-nav.dso-nav-main>li>a:active{text-decoration:underline}.dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options{top:calc(100% + 3px)}.dso-nav.dso-nav-main dso-dropdown-menu button{font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;align-items:center;color:#275937;padding-right:32px}.dso-nav.dso-nav-main dso-dropdown-menu button:hover,.dso-nav.dso-nav-main dso-dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main dso-dropdown-menu button::after{top:auto;transform:none}.dso-nav.dso-nav-sub>li{display:inline-block}.dso-nav.dso-nav-sub>li>a{text-decoration:none;font-size:16px;margin-top:4px;padding:4px 8px 3px}.dso-nav.dso-nav-sub>li>a:hover,.dso-nav.dso-nav-sub>li>a:focus,.dso-nav.dso-nav-sub>li>a:active{text-decoration:underline}.dso-nav .menu-user-home{margin-left:auto}.dso-nav .menu-user-home dso-icon{height:1em;margin-right:8px;position:relative;top:-2px;width:1.2em}";
|
|
1776
|
+
const headerCss = ":host {\n --di-chevron-down-bosgroen: url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");\n --di-chevron-up-bosgroen: url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");\n display: block;\n}\n\n.dso-header {\n border-bottom: 1px solid #ccc;\n display: flex;\n flex-wrap: wrap;\n padding: 0 16px;\n position: relative;\n}\n@media screen and (min-width: 768px) {\n .dso-header {\n align-items: center;\n }\n}\n@media screen and (max-width: 991px) {\n .dso-header.use-drop-down {\n flex-wrap: nowrap;\n }\n}\n\n.logo-container {\n display: flex;\n flex-wrap: wrap;\n padding-bottom: 16px;\n padding-top: 16px;\n}\n@media screen and (max-width: 767px) {\n .logo-container {\n max-width: 200px;\n }\n}\n.logo-container + .dropdown dso-dropdown-menu {\n position: static;\n}\n\n@media screen and (min-width: 768px) {\n .sub-logo {\n margin-left: 24px;\n }\n}\n@media screen and (max-width: 767px) {\n .sub-logo {\n flex-basis: 100%;\n }\n}\n\n.login,\n.logout {\n margin-right: 16px;\n}\n.login .dso-tertiary,\n.logout .dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n cursor: pointer;\n font-family: Asap, sans-serif;\n font-weight: 600;\n vertical-align: text-bottom;\n}\n.login .dso-tertiary:focus, .login .dso-tertiary:focus-visible,\n.logout .dso-tertiary:focus,\n.logout .dso-tertiary:focus-visible {\n outline-offset: 2px;\n}\n.login .dso-tertiary:active,\n.logout .dso-tertiary:active {\n outline: 0;\n}\n.login .dso-tertiary.extern::after, .login .dso-tertiary.download::after,\n.logout .dso-tertiary.extern::after,\n.logout .dso-tertiary.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.login .dso-tertiary[disabled],\n.logout .dso-tertiary[disabled] {\n color: #afcf9d;\n}\n.login .dso-tertiary[disabled].dso-spinner-left, .login .dso-tertiary[disabled].dso-spinner-right,\n.logout .dso-tertiary[disabled].dso-spinner-left,\n.logout .dso-tertiary[disabled].dso-spinner-right {\n color: #39870c;\n}\n.login .dso-tertiary:not([disabled]):hover,\n.logout .dso-tertiary:not([disabled]):hover {\n color: #676cb0;\n text-decoration: underline;\n}\n.login .dso-tertiary:not([disabled]):active,\n.logout .dso-tertiary:not([disabled]):active {\n color: #676cb0;\n}\n.login .dso-tertiary.btn-align,\n.logout .dso-tertiary.btn-align {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\n}\n.login .dso-tertiary.extern::after, .login .dso-tertiary.download::after,\n.logout .dso-tertiary.extern::after,\n.logout .dso-tertiary.download::after {\n position: relative;\n top: -2px;\n}\n.login .dso-tertiary.download::after,\n.logout .dso-tertiary.download::after {\n background: var(--dso-icon, var(--di-download)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.login .dso-tertiary.download[disabled]::after,\n.logout .dso-tertiary.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\n.login .dso-tertiary.download:not([disabled]):hover::after, .login .dso-tertiary.download:not([disabled]):active::after,\n.logout .dso-tertiary.download:not([disabled]):hover::after,\n.logout .dso-tertiary.download:not([disabled]):active::after {\n --dso-icon: var(--di-download-scampi);\n}\n.login .dso-tertiary.extern::after,\n.logout .dso-tertiary.extern::after {\n background: var(--dso-icon, var(--di-external-link)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.login .dso-tertiary.extern[disabled]::after,\n.logout .dso-tertiary.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.login .dso-tertiary.extern:not([disabled]):hover::after, .login .dso-tertiary.extern:not([disabled]):active::after,\n.logout .dso-tertiary.extern:not([disabled]):hover::after,\n.logout .dso-tertiary.extern:not([disabled]):active::after {\n --dso-icon: var(--di-external-link-scampi);\n}\n.login .dso-tertiary.dso-spinner-left::before,\n.logout .dso-tertiary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 8px;\n}\n.login .dso-tertiary.dso-spinner-right::after,\n.logout .dso-tertiary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 8px;\n}\n.login .dso-tertiary dso-icon + span:not(.sr-only),\n.login .dso-tertiary svg.di + span:not(.sr-only),\n.login .dso-tertiary span:not(.sr-only) + dso-icon,\n.login .dso-tertiary span:not(.sr-only) + svg.di,\n.logout .dso-tertiary dso-icon + span:not(.sr-only),\n.logout .dso-tertiary svg.di + span:not(.sr-only),\n.logout .dso-tertiary span:not(.sr-only) + dso-icon,\n.logout .dso-tertiary span:not(.sr-only) + svg.di {\n margin-left: 8px;\n}\n.login .dso-tertiary dso-icon,\n.login .dso-tertiary svg.di,\n.login .dso-tertiary span,\n.logout .dso-tertiary dso-icon,\n.logout .dso-tertiary svg.di,\n.logout .dso-tertiary span {\n vertical-align: middle;\n}\n\n.profile a,\n.logout a,\n.login a {\n text-decoration: none;\n color: #39870c;\n font-weight: 600;\n}\n.profile a:hover, .profile a:focus,\n.logout a:hover,\n.logout a:focus,\n.login a:hover,\n.login a:focus {\n text-decoration: none;\n}\n.profile a:active,\n.logout a:active,\n.login a:active {\n text-decoration: underline;\n}\n\n.dso-header-session {\n display: flex;\n margin-left: auto;\n}\n.dso-header-session .profile a {\n margin-left: 8px;\n}\n.dso-header-session .profile + .logout {\n border-left: 3px solid #ccc;\n margin-left: 16px;\n padding-left: 16px;\n}\n\n.dso-navbar {\n flex-basis: 100%;\n}\n\ndso-dropdown-menu > .dso-primary::after,\ndso-dropdown-menu > .dso-secondary::after,\ndso-dropdown-menu > .dso-tertiary::after,\ndso-dropdown-menu > .btn::after {\n content: \"\";\n display: inline-block;\n margin-left: 8px;\n}\ndso-dropdown-menu > .dso-primary::after,\ndso-dropdown-menu > .btn-primary::after {\n background: var(--dso-icon, var(--di-chevron-down-wit)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\ndso-dropdown-menu > .dso-secondary::after,\ndso-dropdown-menu > .btn-default::after {\n background: var(--dso-icon, var(--di-chevron-down)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\ndso-dropdown-menu > .dso-secondary:hover::after,\ndso-dropdown-menu > .btn-default:hover::after {\n --dso-icon: var(--di-chevron-down-wit);\n}\ndso-dropdown-menu > .dso-tertiary::after,\ndso-dropdown-menu > .btn-link::after {\n background: var(--dso-icon, var(--di-chevron-down)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n position: relative;\n top: -2px;\n}\ndso-dropdown-menu > .dso-tertiary:hover::after,\ndso-dropdown-menu > .btn-link:hover::after {\n --dso-icon: var(--di-chevron-down-scampi);\n}\ndso-dropdown-menu .dso-group-label {\n color: #999;\n font-size: 0.875em;\n font-weight: 400;\n margin: 0;\n padding: 4px 20px 2px;\n text-transform: uppercase;\n}\ndso-dropdown-menu ul {\n margin: 0;\n padding: 0;\n}\ndso-dropdown-menu ul:not(:last-child) {\n border-bottom: 1px solid #e5e5e5;\n margin-bottom: 11px;\n padding-bottom: 11px;\n}\ndso-dropdown-menu .dso-dropdown-options {\n background-clip: padding-box;\n background-color: #fff;\n border-radius: 4px;\n border: 1px solid rgba(0, 0, 0, 0.15);\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\n font-size: 1rem;\n margin: 2px 0 0;\n min-width: 160px;\n padding: 5px 0;\n position: absolute;\n text-align: left;\n top: 100%;\n z-index: 220;\n}\ndso-dropdown-menu .dso-dropdown-options li {\n list-style: none;\n}\ndso-dropdown-menu .dso-dropdown-options li a:visited {\n color: #191919;\n}\ndso-dropdown-menu .dso-dropdown-options li a,\ndso-dropdown-menu .dso-dropdown-options li button {\n text-decoration: none;\n clear: both;\n color: #191919;\n display: block;\n font-weight: 400;\n line-height: 1.5;\n padding: 3px 20px;\n text-decoration: none;\n white-space: nowrap;\n}\ndso-dropdown-menu .dso-dropdown-options li a:hover, dso-dropdown-menu .dso-dropdown-options li a:focus, dso-dropdown-menu .dso-dropdown-options li a:active,\ndso-dropdown-menu .dso-dropdown-options li button:hover,\ndso-dropdown-menu .dso-dropdown-options li button:focus,\ndso-dropdown-menu .dso-dropdown-options li button:active {\n text-decoration: underline;\n}\ndso-dropdown-menu .dso-dropdown-options li a:hover, dso-dropdown-menu .dso-dropdown-options li a:focus,\ndso-dropdown-menu .dso-dropdown-options li button:hover,\ndso-dropdown-menu .dso-dropdown-options li button:focus {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n text-decoration: none;\n}\ndso-dropdown-menu .dso-dropdown-options li button {\n background-color: transparent;\n border: 0;\n border-radius: 0;\n text-align: inherit;\n width: 100%;\n}\ndso-dropdown-menu[dropdown-align=right] .dso-dropdown-options {\n right: 0;\n}\ndso-dropdown-menu[open] > .dso-primary::after,\ndso-dropdown-menu[open] > .btn-primary::after {\n --dso-icon: var(--di-chevron-up-wit);\n}\ndso-dropdown-menu[open] > .dso-secondary::after,\ndso-dropdown-menu[open] > .btn-default::after {\n --dso-icon: var(--di-chevron-up);\n}\ndso-dropdown-menu[open] > .dso-secondary:hover::after,\ndso-dropdown-menu[open] > .btn-default:hover::after {\n --dso-icon: var(--di-chevron-up-wit);\n}\ndso-dropdown-menu[open] > .dso-tertiary::after,\ndso-dropdown-menu[open] > .btn-link::after {\n --dso-icon: var(--di-chevron-up);\n}\ndso-dropdown-menu[open] > .dso-tertiary:hover::after,\ndso-dropdown-menu[open] > .btn-link:hover::after {\n --dso-icon: var(--di-chevron-up-scampi);\n}\ndso-dropdown-menu[open] button::after {\n background: var(--dso-icon, var(--di-chevron-up-bosgroen)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 1.2em;\n vertical-align: top;\n width: 1.2em;\n}\ndso-dropdown-menu[checkable] .dso-group-label {\n padding-left: 40px;\n}\ndso-dropdown-menu[checkable] li a,\ndso-dropdown-menu[checkable] li button {\n padding-left: 40px;\n}\ndso-dropdown-menu[checkable] li.dso-checked a:not(:focus),\ndso-dropdown-menu[checkable] li.dso-checked button:not(:focus) {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\ndso-dropdown-menu[checkable] li.dso-checked a::before,\ndso-dropdown-menu[checkable] li.dso-checked button::before {\n background: var(--dso-icon, var(--di-check-wit)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n content: \"\";\n display: block;\n float: left;\n margin-left: -32px;\n margin-right: 8px;\n}\ndso-dropdown-menu button {\n align-items: flex-end;\n background-color: transparent;\n border: 0;\n display: flex;\n font-family: Asap, sans-serif;\n padding-right: 32px;\n}\ndso-dropdown-menu button::after {\n background: var(--dso-icon, var(--di-chevron-down-bosgroen)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 1.2em;\n vertical-align: top;\n width: 1.2em;\n content: \"\";\n display: inline-block;\n margin-left: 8px;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n}\n@media screen and (max-width: 767px) {\n dso-dropdown-menu {\n top: 12px;\n }\n}\ndso-dropdown-menu .dso-dropdown-options {\n border: 0;\n border-radius: 0;\n}\ndso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul {\n width: 320px;\n}\n@media screen and (max-width: 991px) {\n dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul {\n width: 100%;\n }\n}\ndso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a {\n color: #275937;\n font-size: 1.25rem;\n padding: 16px;\n}\ndso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a:hover {\n background-color: #fff;\n color: #275937;\n text-decoration: underline;\n}\ndso-dropdown-menu .dso-dropdown-options dso-dropdown-options li.dso-active a {\n font-weight: 600;\n}\ndso-dropdown-menu .dso-dropdown-options dso-dropdown-options li + li {\n border-top: 1px solid #ccc;\n}\n\n.dropdown {\n margin-left: auto;\n}\n@media screen and (max-width: 767px) {\n .dropdown dso-dropdown-menu {\n margin-top: 28px;\n }\n}\n.dropdown dso-dropdown-menu .dso-dropdown-options {\n left: 0;\n right: 0;\n top: 100%;\n}\n.dropdown dso-dropdown-menu[open] button::after {\n background: var(--dso-icon, var(--di-chevron-up)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 1.5em;\n vertical-align: top;\n width: 1.5em;\n}\n.dropdown dso-dropdown-menu button {\n color: #39870c;\n font-size: 1rem;\n font-weight: 600;\n position: relative;\n}\n.dropdown dso-dropdown-menu button:hover, .dropdown dso-dropdown-menu button:active {\n cursor: pointer;\n text-decoration: underline;\n}\n.dropdown dso-dropdown-menu button::after {\n background: var(--dso-icon, var(--di-chevron-down)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 1.5em;\n vertical-align: top;\n width: 1.5em;\n}\n\n.dso-nav {\n align-items: end;\n column-gap: 32px;\n display: flex;\n list-style: none;\n margin-bottom: 0;\n margin-top: 0;\n padding-left: 0;\n}\n.dso-nav > li {\n margin-bottom: 4px;\n}\n.dso-nav > li > a {\n display: block;\n}\n.dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited {\n color: #275937;\n}\n.dso-nav > li.dso-active, .dso-nav > li.is-active {\n margin-bottom: 0;\n}\n.dso-nav > li.dso-active > a, .dso-nav > li.is-active > a {\n border-bottom: 4px solid #8b4a6a;\n font-weight: bold;\n}\n.dso-nav.dso-nav-main > li > a {\n text-decoration: none;\n font-size: 1.25em;\n line-height: 1;\n margin-top: 8px;\n padding: 16px 0;\n white-space: nowrap;\n}\n.dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus, .dso-nav.dso-nav-main > li > a:active {\n text-decoration: underline;\n}\n.dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options {\n top: calc(100% + 3px);\n}\n.dso-nav.dso-nav-main dso-dropdown-menu button {\n font-size: 1.25em;\n line-height: 1;\n margin-top: 8px;\n padding: 16px 0;\n align-items: center;\n color: #275937;\n padding-right: 32px;\n}\n.dso-nav.dso-nav-main dso-dropdown-menu button:hover, .dso-nav.dso-nav-main dso-dropdown-menu button:active {\n cursor: pointer;\n text-decoration: underline;\n}\n.dso-nav.dso-nav-main dso-dropdown-menu button::after {\n top: auto;\n transform: none;\n}\n.dso-nav.dso-nav-sub > li {\n display: inline-block;\n}\n.dso-nav.dso-nav-sub > li > a {\n text-decoration: none;\n font-size: 1rem;\n margin-top: 4px;\n padding: 4px 8px 3px;\n}\n.dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus, .dso-nav.dso-nav-sub > li > a:active {\n text-decoration: underline;\n}\n.dso-nav .menu-user-home {\n margin-left: auto;\n}\n.dso-nav .menu-user-home dso-icon {\n height: 1em;\n margin-right: 8px;\n position: relative;\n top: -2px;\n width: 1.2em;\n}";
|
|
1757
1777
|
|
|
1758
1778
|
const minDesktopViewportWidth = 992;
|
|
1759
1779
|
let Header = class extends HTMLElement {
|
|
@@ -1761,12 +1781,12 @@ let Header = class extends HTMLElement {
|
|
|
1761
1781
|
super();
|
|
1762
1782
|
this.__registerHost();
|
|
1763
1783
|
this.__attachShadow();
|
|
1764
|
-
this.
|
|
1765
|
-
this.logoutClick = createEvent(this, "logoutClick", 7);
|
|
1784
|
+
this.headerClick = createEvent(this, "headerClick", 7);
|
|
1766
1785
|
this.mainMenu = [];
|
|
1767
1786
|
this.useDropDownMenu = "auto";
|
|
1787
|
+
/** Used to show the login/logout option. 'none' renders nothing. */
|
|
1788
|
+
this.authStatus = 'none';
|
|
1768
1789
|
this.showDropDown = false;
|
|
1769
|
-
this.isLoggedIn = false;
|
|
1770
1790
|
this.hasSubLogo = false;
|
|
1771
1791
|
this.overflowMenuItems = 0;
|
|
1772
1792
|
this.onWindowResize = debounce_1(() => {
|
|
@@ -1774,16 +1794,20 @@ let Header = class extends HTMLElement {
|
|
|
1774
1794
|
this.setOverflowMenu();
|
|
1775
1795
|
}, 100);
|
|
1776
1796
|
this.MenuItem = (item) => {
|
|
1777
|
-
|
|
1778
|
-
event.preventDefault();
|
|
1779
|
-
this.menuItemClick.emit({
|
|
1780
|
-
originalEvent: event,
|
|
1781
|
-
menuItem: item,
|
|
1782
|
-
});
|
|
1783
|
-
};
|
|
1784
|
-
return (h("li", { class: item.active ? "dso-active" : undefined }, h("a", { href: item.url, "aria-current": item.active ? "page" : undefined, onClick: click }, item.label)));
|
|
1797
|
+
return (h("li", { class: item.active ? "dso-active" : undefined }, h("a", { href: item.url, "aria-current": item.active ? "page" : undefined, onClick: e => this.clickHandler(e, 'menuItem', { menuItem: item }) }, item.label)));
|
|
1785
1798
|
};
|
|
1786
1799
|
}
|
|
1800
|
+
clickHandler(e, type, options) {
|
|
1801
|
+
var _a, _b;
|
|
1802
|
+
this.headerClick.emit({
|
|
1803
|
+
originalEvent: e,
|
|
1804
|
+
isModifiedEvent: e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey,
|
|
1805
|
+
type,
|
|
1806
|
+
menuItem: options === null || options === void 0 ? void 0 : options.menuItem,
|
|
1807
|
+
url: (_a = options === null || options === void 0 ? void 0 : options.url) !== null && _a !== void 0 ? _a : (_b = options === null || options === void 0 ? void 0 : options.menuItem) === null || _b === void 0 ? void 0 : _b.url,
|
|
1808
|
+
});
|
|
1809
|
+
}
|
|
1810
|
+
;
|
|
1787
1811
|
watchUseDropDownMenu(value) {
|
|
1788
1812
|
if (value === "auto") {
|
|
1789
1813
|
this.setDropDownMenu();
|
|
@@ -1801,7 +1825,7 @@ let Header = class extends HTMLElement {
|
|
|
1801
1825
|
if (this.wrapper.clientWidth >= this.nav.clientWidth) {
|
|
1802
1826
|
return;
|
|
1803
1827
|
}
|
|
1804
|
-
if (this.overflowMenuItems >= this.mainMenu.length) {
|
|
1828
|
+
if (this.mainMenu && this.overflowMenuItems >= this.mainMenu.length) {
|
|
1805
1829
|
return;
|
|
1806
1830
|
}
|
|
1807
1831
|
this.overflowMenuItems++;
|
|
@@ -1838,17 +1862,23 @@ let Header = class extends HTMLElement {
|
|
|
1838
1862
|
return (h(Fragment, null, h("div", { class: clsx("dso-header", {
|
|
1839
1863
|
["use-drop-down"]: this.showDropDown,
|
|
1840
1864
|
["has-sub-logo"]: this.hasSubLogo,
|
|
1841
|
-
}), ref: (element) => (this.wrapper = element) }, h("div", { class: "logo-container" }, h("div", { class: "logo" }, h("slot", { name: "logo" })), h("div", { class: "sub-logo" }, h("slot", { name: "sub-logo" }))), this.showDropDown && this.mainMenu.length > 0 && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right" }, h("button", { type: "button", class: "tertiary", slot: "toggle" }, h("span", null, "Menu")), h("div", { class: "dso-dropdown-options" }, h("dso-dropdown-options", null, h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl
|
|
1865
|
+
}), ref: (element) => (this.wrapper = element) }, h("div", { class: "logo-container" }, h("div", { class: "logo" }, h("slot", { name: "logo" })), h("div", { class: "sub-logo" }, h("slot", { name: "sub-logo" }))), this.showDropDown && this.mainMenu && this.mainMenu.length > 0 && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right" }, h("button", { type: "button", class: "tertiary", slot: "toggle" }, h("span", null, "Menu")), h("div", { class: "dso-dropdown-options" }, h("dso-dropdown-options", null, h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: e => this.clickHandler(e, 'userHome', { url: this.userHomeUrl }) }, "Mijn Omgevingsloket"))), this.userProfileUrl &&
|
|
1842
1866
|
this.userProfileName &&
|
|
1843
|
-
this.
|
|
1867
|
+
this.authStatus === 'loggedIn' && (h("li", null, h("a", { href: this.userProfileUrl, onClick: e => this.clickHandler(e, 'profile', { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === 'loggedOut' && (h("li", null, this.loginUrl
|
|
1868
|
+
? h("a", { href: this.loginUrl, onClick: e => this.clickHandler(e, 'login', { url: this.loginUrl }) }, "Inloggen")
|
|
1869
|
+
: h("button", { type: "button", onClick: e => this.clickHandler(e, 'login') }, "Inloggen"))), this.authStatus === 'loggedIn' && (h("li", null, this.logoutUrl
|
|
1870
|
+
? h("a", { href: this.logoutUrl, onClick: e => this.clickHandler(e, 'logout', { url: this.logoutUrl }) }, "Uitloggen")
|
|
1871
|
+
: h("button", { type: "button", onClick: e => this.clickHandler(e, 'logout') }, "Uitloggen"))))))))), !this.showDropDown && (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl &&
|
|
1844
1872
|
this.userProfileName &&
|
|
1845
|
-
this.
|
|
1873
|
+
this.authStatus === 'loggedIn' && (h("div", { class: "profile" }, h("span", { class: "profile-label" }, "Welkom:"), h("a", { href: this.userProfileUrl, onClick: e => this.clickHandler(e, 'profile', { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === 'loggedOut' && (h("div", { class: "login" }, this.loginUrl
|
|
1874
|
+
? h("a", { href: this.loginUrl, onClick: e => this.clickHandler(e, 'login', { url: this.loginUrl }) }, "Inloggen")
|
|
1875
|
+
: h("button", { class: "dso-tertiary", type: "button", onClick: e => this.clickHandler(e, 'login') }, "Inloggen"))), this.authStatus === 'loggedIn' && (h("div", { class: "logout" }, this.logoutUrl
|
|
1876
|
+
? h("a", { href: this.logoutUrl, onClick: e => this.clickHandler(e, 'logout', { url: this.logoutUrl }) }, "Uitloggen")
|
|
1877
|
+
: h("button", { class: "dso-tertiary", type: "button", onClick: e => this.clickHandler(e, 'logout') }, "Uitloggen")))), ((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu && this.mainMenu
|
|
1846
1878
|
.filter((_, index) => index < this.mainMenu.length - this.overflowMenuItems)
|
|
1847
|
-
.map(this.MenuItem), this.overflowMenuItems > 0 && (h("li", null, h("dso-dropdown-menu", { "dropdown-align": "left" }, h("button", { type: "button", class: "tertiary", slot: "toggle" }, h("span", null, "Meer")), h("div", { class: "dso-dropdown-options" }, h("dso-dropdown-options", null, h("ul", null, this.mainMenu
|
|
1848
|
-
.filter((_, index) => index >=
|
|
1849
|
-
this.
|
|
1850
|
-
this.overflowMenuItems)
|
|
1851
|
-
.map(this.MenuItem))))))), this.userHomeUrl && (h("li", { class: "menu-user-home" }, h("a", { href: this.userHomeUrl }, h("dso-icon", { icon: "user-line" }), "Mijn Omgevingsloket"))))))))));
|
|
1879
|
+
.map(this.MenuItem), this.overflowMenuItems > 0 && (h("li", null, h("dso-dropdown-menu", { "dropdown-align": "left" }, h("button", { type: "button", class: "tertiary", slot: "toggle" }, h("span", null, "Meer")), h("div", { class: "dso-dropdown-options" }, h("dso-dropdown-options", null, h("ul", null, this.mainMenu && this.mainMenu
|
|
1880
|
+
.filter((_, index) => index >= this.mainMenu.length - this.overflowMenuItems)
|
|
1881
|
+
.map(this.MenuItem))))))), this.userHomeUrl && (h("li", { class: "menu-user-home" }, h("a", { href: this.userHomeUrl, onClick: e => this.clickHandler(e, 'userHome', { url: this.userHomeUrl }) }, h("dso-icon", { icon: "user-line" }), "Mijn Omgevingsloket")))))))))));
|
|
1852
1882
|
}
|
|
1853
1883
|
get host() { return this; }
|
|
1854
1884
|
static get watchers() { return {
|
|
@@ -1857,7 +1887,7 @@ let Header = class extends HTMLElement {
|
|
|
1857
1887
|
static get style() { return headerCss; }
|
|
1858
1888
|
};
|
|
1859
1889
|
|
|
1860
|
-
const helpcenterPanelCss = ":host{display:block;--di-times:url(\"data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e\");--di-times-wit:url(\"data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e\")}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.wrapper{height:100%;left:0;position:fixed;top:0;visibility:hidden;width:100%}.wrapper.visible{visibility:visible}.dimscreen{background-color:#000;height:100%;opacity:0.4;width:100%}.open-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#39870c;border-color:#39870c;color:#fff;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border:0;bottom:16px;font-family:Asap, sans-serif;position:fixed;right:16px;box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}.open-button:focus,.open-button:focus-visible{outline-offset:2px}.open-button:active{outline:0}.open-button.extern::after,.open-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.open-button:focus,.open-button:focus-visible{outline-offset:2px}.open-button:active{outline:0}.open-button.extern::after,.open-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.open-button:hover{background-color:#275937;border-color:#275937;color:#fff}.open-button:active{background-color:#15301e;border-color:#15301e;color:#fff}.open-button[disabled],.open-button[disabled]:hover{background-color:#afcf9d;border-color:#afcf9d;color:#fff}.open-button.btn-sm{line-height:16px}.open-button.btn-sm dso-icon,.open-button.btn-sm svg.di,.open-button.btn-sm.extern::after,.open-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.open-button.download::after{background:var(--dso-icon, var(--di-download-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.open-button.extern::after{background:var(--dso-icon, var(--di-external-link-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.open-button dso-icon,.open-button svg.di{margin-left:-8px;margin-right:8px}.open-button span+dso-icon,.open-button span+svg.di{margin-left:8px;margin-right:-8px}.open-button:hover{cursor:pointer}.open-button.open{display:none}.close-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border-right:0;border-top:0;border-radius:0 0 0 8px;height:40px;min-width:40px;padding:0;position:fixed;right:0;width:40px;top:0}.close-button:focus,.close-button:focus-visible{outline-offset:2px}.close-button:active{outline:0}.close-button.extern::after,.close-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.close-button:hover{background-color:#39870c;border-color:#39870c;color:#fff}.close-button:active{background-color:#275937;border-color:#275937;color:#fff}.close-button[disabled],.close-button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.close-button.btn-sm{line-height:16px}.close-button.btn-sm dso-icon,.close-button.btn-sm svg.di,.close-button.btn-sm.extern::after,.close-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.close-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.close-button.download:hover::after{--dso-icon:var(--di-download-wit)}.close-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.close-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.close-button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.close-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.close-button dso-icon,.close-button svg.di{margin-left:-8px;margin-right:8px}.close-button span+dso-icon,.close-button span+svg.di{margin-left:8px;margin-right:-8px}.close-button::before{background:var(--dso-icon, var(--di-times)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;content:\"\";display:inline-block;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.close-button:hover,.close-button:active,.close-button:focus{cursor:pointer}.close-button:hover::before,.close-button:active::before,.close-button:focus::before{background:var(--dso-icon, var(--di-times-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.close-button.close{display:none}.iframe-container{background-color:#fff;border:0;border-left:1px solid #ccc;box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.4);height:100%;position:absolute;right:-640px;top:0;transition:right 0.5s;width:640px}.iframe-container.open{right:0}iframe{border:0;height:100%;width:100%}";
|
|
1890
|
+
const helpcenterPanelCss = ":host {\n display: block;\n --di-times: url(\"data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e\");\n --di-times-wit: url(\"data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e\");\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.wrapper {\n height: 100%;\n left: 0;\n position: fixed;\n top: 0;\n visibility: hidden;\n width: 100%;\n}\n.wrapper.visible {\n visibility: visible;\n}\n\n.dimscreen {\n background-color: #000;\n height: 100%;\n opacity: 0.4;\n width: 100%;\n}\n\n.open-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border: 0;\n bottom: 16px;\n font-family: Asap, sans-serif;\n position: fixed;\n right: 16px;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n.open-button:focus, .open-button:focus-visible {\n outline-offset: 2px;\n}\n.open-button:active {\n outline: 0;\n}\n.open-button.extern::after, .open-button.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.open-button:focus, .open-button:focus-visible {\n outline-offset: 2px;\n}\n.open-button:active {\n outline: 0;\n}\n.open-button.extern::after, .open-button.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.open-button:hover {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.open-button:active {\n background-color: #15301e;\n border-color: #15301e;\n color: #fff;\n}\n.open-button[disabled], .open-button[disabled]:hover {\n background-color: #afcf9d;\n border-color: #afcf9d;\n color: #fff;\n}\n.open-button.btn-sm {\n line-height: 1rem;\n}\n.open-button.btn-sm dso-icon,\n.open-button.btn-sm svg.di, .open-button.btn-sm.extern::after, .open-button.btn-sm.download::after, .open-button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.open-button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.open-button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.open-button.download::after {\n background: var(--dso-icon, var(--di-download-wit)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.open-button.extern::after {\n background: var(--dso-icon, var(--di-external-link-wit)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.open-button dso-icon,\n.open-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.open-button span + dso-icon,\n.open-button span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.open-button.dso-spinner-left[disabled], .open-button.dso-spinner-right[disabled] {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.open-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.open-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.open-button:hover {\n cursor: pointer;\n}\n.open-button.open {\n display: none;\n}\n\n.close-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border-right: 0;\n border-top: 0;\n border-radius: 0 0 0 8px;\n height: 40px;\n min-width: 40px;\n padding: 0;\n position: fixed;\n right: 0;\n width: 40px;\n top: 0;\n}\n.close-button:focus, .close-button:focus-visible {\n outline-offset: 2px;\n}\n.close-button:active {\n outline: 0;\n}\n.close-button.extern::after, .close-button.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.close-button:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.close-button:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.close-button[disabled], .close-button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.close-button.btn-sm {\n line-height: 1rem;\n}\n.close-button.btn-sm dso-icon,\n.close-button.btn-sm svg.di, .close-button.btn-sm.extern::after, .close-button.btn-sm.download::after, .close-button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.close-button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.close-button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.close-button.download::after {\n background: var(--dso-icon, var(--di-download)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.close-button.download:hover::after {\n --dso-icon: var(--di-download-wit);\n}\n.close-button.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\n.close-button.extern::after {\n background: var(--dso-icon, var(--di-external-link)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.close-button.extern:hover::after {\n --dso-icon: var(--di-external-link-wit);\n}\n.close-button.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.close-button dso-icon,\n.close-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.close-button span + dso-icon,\n.close-button span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.close-button.dso-spinner-left[disabled], .close-button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.close-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n.close-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n.close-button::before {\n background: var(--dso-icon, var(--di-times)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n content: \"\";\n display: inline-block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n.close-button:hover, .close-button:active, .close-button:focus {\n cursor: pointer;\n}\n.close-button:hover::before, .close-button:active::before, .close-button:focus::before {\n background: var(--dso-icon, var(--di-times-wit)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.close-button.close {\n display: none;\n}\n\n.iframe-container {\n background-color: #fff;\n border: 0;\n border-left: 1px solid #ccc;\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\n height: 100%;\n position: absolute;\n right: -640px;\n top: 0;\n transition: right 0.5s;\n width: 640px;\n}\n.iframe-container.open {\n right: 0;\n}\n\niframe {\n border: 0;\n height: 100%;\n width: 100%;\n}";
|
|
1861
1891
|
|
|
1862
1892
|
const maxCssTransitionMilliseconds = 500;
|
|
1863
1893
|
let HelpcenterPanel = class extends HTMLElement {
|
|
@@ -1896,7 +1926,7 @@ let HelpcenterPanel = class extends HTMLElement {
|
|
|
1896
1926
|
static get style() { return helpcenterPanelCss; }
|
|
1897
1927
|
};
|
|
1898
1928
|
|
|
1899
|
-
const highlightBoxCss = ":host{--di-external-link-grijs90:url(\"data:image/svg+xml,%3csvg id='external-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M19%2c6V9.69c0%2c.33-.2.41-.43.17L17.06%2c8.35l-3.35%2c3.36a1%2c1%2c0%2c0%2c1-1.42%2c0%2c1%2c1%2c0%2c0%2c1%2c0-1.42l3.36-3.35L14.14%2c5.43C13.9%2c5.19%2c14%2c5%2c14.31%2c5H19V6ZM18%2c17V13a1%2c1%2c0%2c0%2c0-2%2c0v4a1%2c1%2c0%2c0%2c1-1%2c1H7a1%2c1%2c0%2c0%2c1-1-1V9A1%2c1%2c0%2c0%2c1%2c7%2c8h4a1%2c1%2c0%2c0%2c0%2c0-2H7A3%2c3%2c0%2c0%2c0%2c4%2c9v8a3%2c3%2c0%2c0%2c0%2c3%2c3h8A3%2c3%2c0%2c0%2c0%2c18%2c17Z'/%3e %3c/svg%3e\");--di-download-grijs90:url(\"data:image/svg+xml,%3csvg id='download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M18.72%2c10.44%2c12%2c17l-6.7-6.52C4.8%2c10%2c5%2c9.63%2c5.63%2c9.63H8.5V1.82A.8.8%2c0%2c0%2c1%2c9.28%2c1h5.44a.8.8%2c0%2c0%2c1%2c.78.82V9.61h2.87C19%2c9.6%2c19.2%2c10%2c18.72%2c10.44ZM1%2c17v6H23V17Zm16%2c3a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c17%2c20Zm5%2c0a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c22%2c20Z'/%3e %3c/svg%3e\");display:block}:host-context(.row.dso-equal-heights){height:100%;min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box{min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box.dso-has-counter{height:calc(100% - 48px)}:host-context(.row.dso-equal-heights)>.dso-highlight-box:not(.dso-has-counter){height:calc(100% - 16px)}*,*::after,*::before{box-sizing:border-box}.dso-highlight-box{background-color:#f2f2f2;margin-top:16px;padding:16px;margin-bottom:24px}.dso-highlight-box.dso-white{background-color:#fff}.dso-highlight-box.dso-yellow{background-color:#f8f6cc}.dso-highlight-box.dso-drop-shadow{box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}.dso-highlight-box.dso-border{background-color:#fff;border:1px solid #ccc;padding:15px}.dso-highlight-box.dso-has-counter{margin-top:48px}.dso-highlight-box.dso-has-counter{padding-top:
|
|
1929
|
+
const highlightBoxCss = ":host{--di-external-link-grijs90:url(\"data:image/svg+xml,%3csvg id='external-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M19%2c6V9.69c0%2c.33-.2.41-.43.17L17.06%2c8.35l-3.35%2c3.36a1%2c1%2c0%2c0%2c1-1.42%2c0%2c1%2c1%2c0%2c0%2c1%2c0-1.42l3.36-3.35L14.14%2c5.43C13.9%2c5.19%2c14%2c5%2c14.31%2c5H19V6ZM18%2c17V13a1%2c1%2c0%2c0%2c0-2%2c0v4a1%2c1%2c0%2c0%2c1-1%2c1H7a1%2c1%2c0%2c0%2c1-1-1V9A1%2c1%2c0%2c0%2c1%2c7%2c8h4a1%2c1%2c0%2c0%2c0%2c0-2H7A3%2c3%2c0%2c0%2c0%2c4%2c9v8a3%2c3%2c0%2c0%2c0%2c3%2c3h8A3%2c3%2c0%2c0%2c0%2c18%2c17Z'/%3e %3c/svg%3e\");--di-download-grijs90:url(\"data:image/svg+xml,%3csvg id='download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M18.72%2c10.44%2c12%2c17l-6.7-6.52C4.8%2c10%2c5%2c9.63%2c5.63%2c9.63H8.5V1.82A.8.8%2c0%2c0%2c1%2c9.28%2c1h5.44a.8.8%2c0%2c0%2c1%2c.78.82V9.61h2.87C19%2c9.6%2c19.2%2c10%2c18.72%2c10.44ZM1%2c17v6H23V17Zm16%2c3a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c17%2c20Zm5%2c0a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c22%2c20Z'/%3e %3c/svg%3e\");display:block}:host-context(.row.dso-equal-heights){height:100%;min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box{min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box.dso-has-counter{height:calc(100% - 48px)}:host-context(.row.dso-equal-heights)>.dso-highlight-box:not(.dso-has-counter){height:calc(100% - 16px)}*,*::after,*::before{box-sizing:border-box}.dso-highlight-box{background-color:#f2f2f2;margin-top:16px;padding:16px;margin-bottom:24px}.dso-highlight-box.dso-white{background-color:#fff}.dso-highlight-box.dso-yellow{background-color:#f8f6cc}.dso-highlight-box.dso-drop-shadow{box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}.dso-highlight-box.dso-border{background-color:#fff;border:1px solid #ccc;padding:15px}.dso-highlight-box.dso-has-counter{margin-top:48px}.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}";
|
|
1900
1930
|
|
|
1901
1931
|
let HighlightBox = class extends HTMLElement {
|
|
1902
1932
|
constructor() {
|
|
@@ -2149,8 +2179,8 @@ const location = `<svg id="location" xmlns="http://www.w3.org/2000/svg" viewBox=
|
|
|
2149
2179
|
|
|
2150
2180
|
const locationOutline = `<svg id="location-outline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
2151
2181
|
<g>
|
|
2152
|
-
<ellipse cx="12" cy="8.57" rx="4.5" ry="4.29"
|
|
2153
|
-
<path d="M12,1.71A7.28,7.28,0,0,0,4.8,8.57c0,6,6.2,13.72,7.2,13.72s7.2-7.72,7.2-13.72C19.2,5.14,15.6,1.71,12,1.71Zm0,11.15A4.4,4.4,0,0,1,7.5,8.57,4.39,4.39,0,0,1,12,4.29a4.39,4.39,0,0,1,4.5,4.28A4.4,4.4,0,0,1,12,12.86Z"
|
|
2182
|
+
<ellipse cx="12" cy="8.57" rx="4.5" ry="4.29" fill="none"/>
|
|
2183
|
+
<path d="M12,1.71A7.28,7.28,0,0,0,4.8,8.57c0,6,6.2,13.72,7.2,13.72s7.2-7.72,7.2-13.72C19.2,5.14,15.6,1.71,12,1.71Zm0,11.15A4.4,4.4,0,0,1,7.5,8.57,4.39,4.39,0,0,1,12,4.29a4.39,4.39,0,0,1,4.5,4.28A4.4,4.4,0,0,1,12,12.86Z" fill="#e17000"/>
|
|
2154
2184
|
<path d="M12,0C7.21,0,3,4,3,8.57c0,3.85,2.18,7.91,3.48,10C8,21,10.25,24,12,24s4-3,5.53-5.45c1.3-2.07,3.47-6.13,3.47-10C21,4.17,16.63,0,12,0Zm0,22.29c-1,0-7.2-7.72-7.2-13.72A7.28,7.28,0,0,1,12,1.71c3.6,0,7.2,3.43,7.2,6.86C19.2,14.57,13,22.29,12,22.29Z"/>
|
|
2155
2185
|
</g>
|
|
2156
2186
|
</svg>
|
|
@@ -2238,8 +2268,8 @@ const pin = `<svg id="pin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24
|
|
|
2238
2268
|
|
|
2239
2269
|
const pinOutline = `<svg id="pin-outline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
2240
2270
|
<g>
|
|
2241
|
-
<path d="M8.18,7.54a4.94,4.94,0,0,1,1.41-4A5.16,5.16,0,0,0,7,8.64a5.07,5.07,0,0,0,5.55,4.58,5,5,0,0,0,4.08-3,4.77,4.77,0,0,1-3.13,1.68A4.83,4.83,0,0,1,8.18,7.54Z"
|
|
2242
|
-
<path d="M12,1.71A6.45,6.45,0,0,0,9.61,14.09L10.74,21a1.26,1.26,0,1,0,2.52,0l1.13-6.91A6.45,6.45,0,0,0,12,1.71Zm.5,11.51A5.07,5.07,0,0,1,7,8.64,5.16,5.16,0,0,1,9.59,3.58a4.94,4.94,0,0,0-1.41,4,4.83,4.83,0,0,0,5.27,4.35,4.77,4.77,0,0,0,3.13-1.68A5,5,0,0,1,12.5,13.22Z"
|
|
2271
|
+
<path d="M8.18,7.54a4.94,4.94,0,0,1,1.41-4A5.16,5.16,0,0,0,7,8.64a5.07,5.07,0,0,0,5.55,4.58,5,5,0,0,0,4.08-3,4.77,4.77,0,0,1-3.13,1.68A4.83,4.83,0,0,1,8.18,7.54Z" fill="none"/>
|
|
2272
|
+
<path d="M12,1.71A6.45,6.45,0,0,0,9.61,14.09L10.74,21a1.26,1.26,0,1,0,2.52,0l1.13-6.91A6.45,6.45,0,0,0,12,1.71Zm.5,11.51A5.07,5.07,0,0,1,7,8.64,5.16,5.16,0,0,1,9.59,3.58a4.94,4.94,0,0,0-1.41,4,4.83,4.83,0,0,0,5.27,4.35,4.77,4.77,0,0,0,3.13-1.68A5,5,0,0,1,12.5,13.22Z" fill="#79b929"/>
|
|
2243
2273
|
<path d="M12,0A8.08,8.08,0,0,0,4,8.14a8.13,8.13,0,0,0,4.09,7.1l1,5.93a2.94,2.94,0,0,0,5.88,0l1-5.93A8.13,8.13,0,0,0,20,8.14,8.08,8.08,0,0,0,12,0Zm2.39,14.09L13.26,21a1.26,1.26,0,1,1-2.52,0L9.61,14.09A6.45,6.45,0,0,1,12,1.71a6.45,6.45,0,0,1,2.39,12.38Z"/>
|
|
2244
2274
|
</g>
|
|
2245
2275
|
</svg>
|
|
@@ -2314,45 +2344,37 @@ const sound = `<svg id="sound" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2
|
|
|
2314
2344
|
</svg>
|
|
2315
2345
|
`;
|
|
2316
2346
|
|
|
2317
|
-
const statusForbidden = `<svg id="forbidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
2318
|
-
<g>
|
|
2319
|
-
<path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm8.25,11a8.19,8.19,0,0,1-1.53,4.77L7.23,5.28a8.24,8.24,0,0,1,13,6.72ZM3.75,12A8.19,8.19,0,0,1,5.28,7.23L16.77,18.72A8.24,8.24,0,0,1,3.75,12Z" style="fill: #ce3f51"/>
|
|
2320
|
-
<path d="M12,1A11,11,0,1,1,1,12,11,11,0,0,1,12,1m6.72,15.77A8.24,8.24,0,0,0,7.23,5.28L18.72,16.77M12,20.25a8.19,8.19,0,0,0,4.77-1.53L5.28,7.23a8.24,8.24,0,0,0,6.72,13M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0ZM8.84,5.48A7.18,7.18,0,0,1,12,4.75,7.26,7.26,0,0,1,19.25,12a7.18,7.18,0,0,1-.73,3.16L8.84,5.48ZM12,19.25A7.26,7.26,0,0,1,4.75,12a7.18,7.18,0,0,1,.73-3.16l9.68,9.68a7.18,7.18,0,0,1-3.16.73Z" style="fill: #fff"/>
|
|
2321
|
-
</g>
|
|
2322
|
-
</svg>
|
|
2323
|
-
`;
|
|
2324
|
-
|
|
2325
2347
|
const statusDanger = `<svg id="status-danger-line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
2326
2348
|
<g>
|
|
2327
|
-
<path d="M22.6,18.51c.86,1.37.29,2.49-1.25,2.49H2.65C1.11,21,.54,19.88,1.4,18.51L10.44,4a1.7,1.7,0,0,1,3.12,0Z"
|
|
2328
|
-
<path d="M12,3a1.9,1.9,0,0,1,1.56,1l9,14.48c.86,1.37.29,2.49-1.25,2.49H2.65C1.11,21,.54,19.88,1.4,18.51L10.44,4A1.9,1.9,0,0,1,12,3m0-1A2.89,2.89,0,0,0,9.6,3.5L.55,18a2.75,2.75,0,0,0-.28,2.81A2.59,2.59,0,0,0,2.65,22h18.7a2.59,2.59,0,0,0,2.38-1.21A2.75,2.75,0,0,0,23.45,18L14.4,3.5A2.89,2.89,0,0,0,12,2Z"
|
|
2349
|
+
<path d="M22.6,18.51c.86,1.37.29,2.49-1.25,2.49H2.65C1.11,21,.54,19.88,1.4,18.51L10.44,4a1.7,1.7,0,0,1,3.12,0Z" fill="#ce3f51"/>
|
|
2350
|
+
<path d="M12,3a1.9,1.9,0,0,1,1.56,1l9,14.48c.86,1.37.29,2.49-1.25,2.49H2.65C1.11,21,.54,19.88,1.4,18.51L10.44,4A1.9,1.9,0,0,1,12,3m0-1A2.89,2.89,0,0,0,9.6,3.5L.55,18a2.75,2.75,0,0,0-.28,2.81A2.59,2.59,0,0,0,2.65,22h18.7a2.59,2.59,0,0,0,2.38-1.21A2.75,2.75,0,0,0,23.45,18L14.4,3.5A2.89,2.89,0,0,0,12,2Z" fill="#fff"/>
|
|
2329
2351
|
</g>
|
|
2330
|
-
<path d="M12,16a1,1,0,0,1-1-.91V8.91a1,1,0,0,1,2,0v6.18A1,1,0,0,1,12,16Zm0,1a1,1,0,1,0,1,1A1,1,0,0,0,12,17Z"
|
|
2352
|
+
<path d="M12,16a1,1,0,0,1-1-.91V8.91a1,1,0,0,1,2,0v6.18A1,1,0,0,1,12,16Zm0,1a1,1,0,1,0,1,1A1,1,0,0,0,12,17Z" fill="#fff"/>
|
|
2331
2353
|
</svg>
|
|
2332
2354
|
`;
|
|
2333
2355
|
|
|
2334
2356
|
const statusInfo = `<svg id="status-info" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
2335
2357
|
<g>
|
|
2336
|
-
<circle cx="12" cy="12" r="11"
|
|
2337
|
-
<path d="M12,1A11,11,0,1,1,1,12,11,11,0,0,1,12,1m0-1A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z"
|
|
2358
|
+
<circle cx="12" cy="12" r="11" fill="#2b5780"/>
|
|
2359
|
+
<path d="M12,1A11,11,0,1,1,1,12,11,11,0,0,1,12,1m0-1A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z" fill="#fff"/>
|
|
2338
2360
|
</g>
|
|
2339
|
-
<path d="M11,8a1,1,0,1,1,1,1A1,1,0,0,1,11,8Zm2,8.79V11.21A1.12,1.12,0,0,0,12,10a1.12,1.12,0,0,0-1,1.21v5.58A1.12,1.12,0,0,0,12,18,1.12,1.12,0,0,0,13,16.79Z"
|
|
2361
|
+
<path d="M11,8a1,1,0,1,1,1,1A1,1,0,0,1,11,8Zm2,8.79V11.21A1.12,1.12,0,0,0,12,10a1.12,1.12,0,0,0-1,1.21v5.58A1.12,1.12,0,0,0,12,18,1.12,1.12,0,0,0,13,16.79Z" fill="#fff"/>
|
|
2340
2362
|
</svg>
|
|
2341
2363
|
`;
|
|
2342
2364
|
|
|
2343
2365
|
const statusSuccess = `<svg id="status-success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
2344
2366
|
<g>
|
|
2345
|
-
<circle cx="12" cy="12" r="11"
|
|
2346
|
-
<path d="M12,1A11,11,0,1,1,1,12,11,11,0,0,1,12,1m0-1A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z"
|
|
2367
|
+
<circle cx="12" cy="12" r="11" fill="#39870c"/>
|
|
2368
|
+
<path d="M12,1A11,11,0,1,1,1,12,11,11,0,0,1,12,1m0-1A12,12,0,1,0,24,12,12,12,0,0,0,12,0Z" fill="#fff"/>
|
|
2347
2369
|
</g>
|
|
2348
|
-
<path d="M10.11,18,5.29,13.31A.92.92,0,0,1,5.3,12a1,1,0,0,1,1.41,0l3.4,3.3,7.18-7a1,1,0,0,1,1.41,0,.92.92,0,0,1,0,1.35Z"
|
|
2370
|
+
<path d="M10.11,18,5.29,13.31A.92.92,0,0,1,5.3,12a1,1,0,0,1,1.41,0l3.4,3.3,7.18-7a1,1,0,0,1,1.41,0,.92.92,0,0,1,0,1.35Z" fill="#fff"/>
|
|
2349
2371
|
</svg>
|
|
2350
2372
|
`;
|
|
2351
2373
|
|
|
2352
2374
|
const statusWarning = `<svg id="status-warning" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
2353
2375
|
<g>
|
|
2354
|
-
<path d="M22.6,18.51c.86,1.37.29,2.49-1.25,2.49H2.65C1.11,21,.54,19.88,1.4,18.51L10.44,4a1.7,1.7,0,0,1,3.12,0Z"
|
|
2355
|
-
<path d="M12,3a1.9,1.9,0,0,1,1.56,1l9,14.48c.86,1.37.29,2.49-1.25,2.49H2.65C1.11,21,.54,19.88,1.4,18.51L10.44,4A1.9,1.9,0,0,1,12,3m0-1A2.89,2.89,0,0,0,9.6,3.5L.55,18a2.75,2.75,0,0,0-.28,2.81A2.59,2.59,0,0,0,2.65,22h18.7a2.59,2.59,0,0,0,2.38-1.21A2.75,2.75,0,0,0,23.45,18L14.4,3.5A2.89,2.89,0,0,0,12,2Z"
|
|
2376
|
+
<path d="M22.6,18.51c.86,1.37.29,2.49-1.25,2.49H2.65C1.11,21,.54,19.88,1.4,18.51L10.44,4a1.7,1.7,0,0,1,3.12,0Z" fill="#dcd400"/>
|
|
2377
|
+
<path d="M12,3a1.9,1.9,0,0,1,1.56,1l9,14.48c.86,1.37.29,2.49-1.25,2.49H2.65C1.11,21,.54,19.88,1.4,18.51L10.44,4A1.9,1.9,0,0,1,12,3m0-1A2.89,2.89,0,0,0,9.6,3.5L.55,18a2.75,2.75,0,0,0-.28,2.81A2.59,2.59,0,0,0,2.65,22h18.7a2.59,2.59,0,0,0,2.38-1.21A2.75,2.75,0,0,0,23.45,18L14.4,3.5A2.89,2.89,0,0,0,12,2Z" fill="#fff"/>
|
|
2356
2378
|
</g>
|
|
2357
2379
|
<path d="M11.73,15.85a1,1,0,0,1-1-.91V8.76a1,1,0,0,1,2,0v6.18A1,1,0,0,1,11.73,15.85Zm0,1a1,1,0,1,0,1,1A1,1,0,0,0,11.73,16.85Z"/>
|
|
2358
2380
|
</svg>
|
|
@@ -2483,7 +2505,6 @@ const icons = [
|
|
|
2483
2505
|
{ alias: 'sort', svg: sort },
|
|
2484
2506
|
{ alias: 'sound', svg: sound },
|
|
2485
2507
|
{ alias: 'status-danger', svg: statusDanger },
|
|
2486
|
-
{ alias: 'status-forbidden', svg: statusForbidden },
|
|
2487
2508
|
{ alias: 'status-info', svg: statusInfo },
|
|
2488
2509
|
{ alias: 'status-success', svg: statusSuccess },
|
|
2489
2510
|
{ alias: 'status-warning', svg: statusWarning },
|
|
@@ -3256,7 +3277,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
|
|
|
3256
3277
|
return trap;
|
|
3257
3278
|
};
|
|
3258
3279
|
|
|
3259
|
-
const imageOverlayCss = "button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}:host{display:inline-block;position:relative}:host(:hover) .open,.open:focus{opacity:1}.open{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border:0;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);min-width:auto;padding:8px;opacity:0;position:absolute;right:16px;top:16px}.open:focus,.open:focus-visible{outline-offset:2px}.open:active{outline:0}.open.extern::after,.open.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.open:hover{background-color:#39870c;border-color:#39870c;color:#fff}.open:active{background-color:#275937;border-color:#275937;color:#fff}.open[disabled],.open[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.open.btn-sm{line-height:16px}.open.btn-sm dso-icon,.open.btn-sm svg.di,.open.btn-sm.extern::after,.open.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.open.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.open.download:hover::after{--dso-icon:var(--di-download-wit)}.open.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.open.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.open.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.open.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.open>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dimmer{position:fixed;top:0;left:0;right:0;bottom:0;z-index:19;display:flex;padding:32px;background-color:rgba(255, 255, 255, 0.8);justify-content:center}.wrapper{box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);position:relative;z-index:20;align-self:center;line-height:0}.wrapper img{width:auto;height:auto;max-width:100%;max-height:calc(100vh - 64px)}.close{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border:0;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);min-width:auto;padding:8px;position:absolute;top:16px;right:16px}.close:focus,.close:focus-visible{outline-offset:2px}.close:active{outline:0}.close.extern::after,.close.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.close:hover{background-color:#39870c;border-color:#39870c;color:#fff}.close:active{background-color:#275937;border-color:#275937;color:#fff}.close[disabled],.close[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.close.btn-sm{line-height:16px}.close.btn-sm dso-icon,.close.btn-sm svg.di,.close.btn-sm.extern::after,.close.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.close.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.close.download:hover::after{--dso-icon:var(--di-download-wit)}.close.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.close.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.close.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.close.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.close>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
|
|
3280
|
+
const imageOverlayCss = "button {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\n:host {\n display: inline-block;\n position: relative;\n}\n\n:host(:hover) .open,\n.open:focus {\n opacity: 1;\n}\n\n.open {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border: 0;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n min-width: auto;\n padding: 8px;\n opacity: 0;\n position: absolute;\n right: 16px;\n top: 16px;\n}\n.open:focus, .open:focus-visible {\n outline-offset: 2px;\n}\n.open:active {\n outline: 0;\n}\n.open.extern::after, .open.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.open:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.open:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.open[disabled], .open[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.open.btn-sm {\n line-height: 1rem;\n}\n.open.btn-sm dso-icon,\n.open.btn-sm svg.di, .open.btn-sm.extern::after, .open.btn-sm.download::after, .open.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.open.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.open.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.open.download::after {\n background: var(--dso-icon, var(--di-download)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.open.download:hover::after {\n --dso-icon: var(--di-download-wit);\n}\n.open.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\n.open.extern::after {\n background: var(--dso-icon, var(--di-external-link)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.open.extern:hover::after {\n --dso-icon: var(--di-external-link-wit);\n}\n.open.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.open > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.open.dso-spinner-left[disabled], .open.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.open.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.open.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.open.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n.open.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.open.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.open.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n\n.dimmer {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 19;\n display: flex;\n padding: 32px;\n background-color: rgba(255, 255, 255, 0.8);\n justify-content: center;\n}\n\n.wrapper {\n box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);\n position: relative;\n z-index: 20;\n align-self: center;\n line-height: 0;\n}\n.wrapper img {\n width: auto;\n height: auto;\n max-width: 100%;\n max-height: calc(100vh - 64px);\n}\n\n.close {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border: 0;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n min-width: auto;\n padding: 8px;\n position: absolute;\n top: 16px;\n right: 16px;\n}\n.close:focus, .close:focus-visible {\n outline-offset: 2px;\n}\n.close:active {\n outline: 0;\n}\n.close.extern::after, .close.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.close:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.close:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.close[disabled], .close[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.close.btn-sm {\n line-height: 1rem;\n}\n.close.btn-sm dso-icon,\n.close.btn-sm svg.di, .close.btn-sm.extern::after, .close.btn-sm.download::after, .close.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.close.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.close.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.close.download::after {\n background: var(--dso-icon, var(--di-download)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.close.download:hover::after {\n --dso-icon: var(--di-download-wit);\n}\n.close.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\n.close.extern::after {\n background: var(--dso-icon, var(--di-external-link)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.close.extern:hover::after {\n --dso-icon: var(--di-external-link-wit);\n}\n.close.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.close > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.close.dso-spinner-left[disabled], .close.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.close.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.close.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.close.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n.close.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.close.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.close.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}";
|
|
3260
3281
|
|
|
3261
3282
|
let ImageOverlay = class extends HTMLElement {
|
|
3262
3283
|
constructor() {
|
|
@@ -3265,26 +3286,63 @@ let ImageOverlay = class extends HTMLElement {
|
|
|
3265
3286
|
this.__attachShadow();
|
|
3266
3287
|
this.active = false;
|
|
3267
3288
|
this.focused = false;
|
|
3289
|
+
this.zoomable = false;
|
|
3290
|
+
}
|
|
3291
|
+
loadListener(event) {
|
|
3292
|
+
if (event.target instanceof HTMLImageElement) {
|
|
3293
|
+
this.setZoomable(event.target);
|
|
3294
|
+
}
|
|
3268
3295
|
}
|
|
3269
3296
|
componentDidLoad() {
|
|
3270
|
-
this.
|
|
3297
|
+
this.resizeObserver = new ResizeObserver(debounce_1(() => {
|
|
3298
|
+
const imgElement = this.host.querySelector('img');
|
|
3299
|
+
if (imgElement instanceof HTMLImageElement) {
|
|
3300
|
+
this.setZoomable(imgElement);
|
|
3301
|
+
}
|
|
3302
|
+
}, 200));
|
|
3303
|
+
this.mutationObserver = new MutationObserver((e) => {
|
|
3304
|
+
var _a, _b;
|
|
3305
|
+
forceUpdate(this.host);
|
|
3306
|
+
if (((_a = e[0]) === null || _a === void 0 ? void 0 : _a.type) === 'childList') {
|
|
3307
|
+
(_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
|
|
3308
|
+
// <img> is gone or a new element.
|
|
3309
|
+
this.initZoomableImage();
|
|
3310
|
+
}
|
|
3311
|
+
});
|
|
3271
3312
|
this.mutationObserver.observe(this.host, {
|
|
3272
3313
|
attributes: true,
|
|
3273
|
-
subtree: true
|
|
3314
|
+
subtree: true,
|
|
3315
|
+
attributeFilter: ['src', 'alt'],
|
|
3316
|
+
childList: true,
|
|
3274
3317
|
});
|
|
3318
|
+
this.initZoomableImage();
|
|
3275
3319
|
}
|
|
3276
3320
|
disconnectedCallback() {
|
|
3277
|
-
var _a, _b;
|
|
3321
|
+
var _a, _b, _c;
|
|
3278
3322
|
(_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
|
|
3279
3323
|
(_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
|
|
3324
|
+
(_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
|
|
3325
|
+
}
|
|
3326
|
+
initZoomableImage() {
|
|
3327
|
+
var _a;
|
|
3328
|
+
const imgElement = this.host.querySelector('img');
|
|
3329
|
+
if (!(imgElement instanceof HTMLImageElement)) {
|
|
3330
|
+
return;
|
|
3331
|
+
}
|
|
3332
|
+
// Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.
|
|
3333
|
+
if (imgElement.complete) {
|
|
3334
|
+
this.setZoomable(imgElement);
|
|
3335
|
+
}
|
|
3336
|
+
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(imgElement);
|
|
3337
|
+
}
|
|
3338
|
+
setZoomable(imageElement) {
|
|
3339
|
+
const { width, naturalWidth, height, naturalHeight } = imageElement;
|
|
3340
|
+
this.zoomable = width < naturalWidth || height < naturalHeight;
|
|
3280
3341
|
}
|
|
3281
3342
|
render() {
|
|
3282
3343
|
var _a;
|
|
3283
3344
|
const { src, alt } = (_a = this.host.querySelector('img')) !== null && _a !== void 0 ? _a : {};
|
|
3284
|
-
return (h(Host, { tabindex: this.focused ? -1 : 0, onFocus: () => {
|
|
3285
|
-
var _a;
|
|
3286
|
-
(_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus();
|
|
3287
|
-
} }, this.active && src && alt && (h("div", { class: "dimmer", ref: element => this.wrapperElement = element }, h("div", { class: "wrapper" }, h("img", { src: src, alt: alt }), h("button", { type: "button", class: "close", onClick: () => this.active = false }, h("dso-icon", { icon: "times" }), h("span", null, "Sluiten"))))), h("slot", null), h("button", { type: "button", class: "open", ref: element => this.buttonElement = element, onClick: () => this.active = true, onFocus: () => this.focused = true, onBlur: () => this.focused = false }, h("dso-icon", { icon: "external-link" }), h("span", null, "Afbeelding vergroot weergeven"))));
|
|
3345
|
+
return (h(Host, { tabindex: this.focused || !this.zoomable ? -1 : 0, onFocus: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, this.active && src && alt && (h("div", { class: "dimmer", ref: element => this.wrapperElement = element }, h("div", { class: "wrapper" }, h("img", { src: src, alt: alt }), h("button", { type: "button", class: "close", onClick: () => this.active = false }, h("dso-icon", { icon: "times" }), h("span", null, "Sluiten"))))), h("slot", null), this.zoomable && (h("button", { type: "button", class: "open", ref: element => this.buttonElement = element, onClick: () => this.active = true, onFocus: () => this.focused = true, onBlur: () => this.focused = false }, h("dso-icon", { icon: "external-link" }), h("span", null, "Afbeelding vergroot weergeven")))));
|
|
3288
3346
|
}
|
|
3289
3347
|
componentDidRender() {
|
|
3290
3348
|
var _a, _b;
|
|
@@ -3336,36 +3394,115 @@ let InfoButton = class extends HTMLElement {
|
|
|
3336
3394
|
this.toggle = createEvent(this, "toggle", 7);
|
|
3337
3395
|
this.label = 'Toelichting bij optie';
|
|
3338
3396
|
}
|
|
3397
|
+
async setFocus() {
|
|
3398
|
+
var _a;
|
|
3399
|
+
(_a = this.button) === null || _a === void 0 ? void 0 : _a.focus();
|
|
3400
|
+
}
|
|
3339
3401
|
handleToggle(e) {
|
|
3340
3402
|
this.active = !this.active;
|
|
3341
3403
|
this.toggle.emit({ originalEvent: e, active: this.active });
|
|
3342
3404
|
}
|
|
3343
3405
|
render() {
|
|
3344
|
-
return (h("button", { type: "button", class: clsx('btn', { 'dso-open': !!this.active, 'dso-info-secondary': !!this.secondary }), "aria-expanded": typeof this.active === 'boolean' ? this.active.toString() : undefined, onClick: e => this.handleToggle(e) }, h("span", { class: "sr-only" }, this.label)));
|
|
3406
|
+
return (h("button", { type: "button", class: clsx('btn', { 'dso-open': !!this.active, 'dso-info-secondary': !!this.secondary }), "aria-expanded": typeof this.active === 'boolean' ? this.active.toString() : undefined, onClick: e => this.handleToggle(e), ref: element => (this.button = element) }, h("span", { class: "sr-only" }, this.label)));
|
|
3345
3407
|
}
|
|
3346
3408
|
static get style() { return infoButtonCss; }
|
|
3347
3409
|
};
|
|
3348
3410
|
|
|
3349
|
-
const labelCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{background-color:#f2f2f2;border-radius:4px;color:#191919;display:inline-block;line-height:1.5}.dso-label:not(.dso-label-bright){padding:4px 8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:right;font-size:
|
|
3411
|
+
const labelCss = ":host{display:inline-block;max-width:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{background-color:#f2f2f2;border-radius:4px;color:#191919;display:inline-block;line-height:1.5}.dso-label:not(.dso-label-bright){padding:4px 8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:right;font-size:1rem;margin-bottom:-4px;margin-left:8px;margin-right:-4px;margin-top:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label.dso-compact{border:0;padding:0 8px}.dso-label.dso-label-info{background-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{background-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;color:#191919}.dso-label.dso-label-danger{background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;color:#191919;border:1px solid #ccc;padding:3px 7px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-width:184px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}";
|
|
3350
3412
|
|
|
3413
|
+
function hasEllipses(el) {
|
|
3414
|
+
return el.scrollWidth > el.clientWidth;
|
|
3415
|
+
}
|
|
3351
3416
|
let Label = class extends HTMLElement {
|
|
3352
3417
|
constructor() {
|
|
3353
3418
|
super();
|
|
3354
3419
|
this.__registerHost();
|
|
3355
3420
|
this.__attachShadow();
|
|
3356
3421
|
this.removeClick = createEvent(this, "removeClick", 7);
|
|
3422
|
+
this.resizeObserver = new ResizeObserver(() => this.truncateLabel());
|
|
3423
|
+
this.keydownListenerActive = false;
|
|
3424
|
+
this.keyDownListener = (event) => {
|
|
3425
|
+
if (event.key == 'Escape') {
|
|
3426
|
+
this.textHover = false;
|
|
3427
|
+
this.textFocus = false;
|
|
3428
|
+
}
|
|
3429
|
+
};
|
|
3430
|
+
}
|
|
3431
|
+
watchTruncate(truncate) {
|
|
3432
|
+
if (truncate) {
|
|
3433
|
+
this.startTruncate();
|
|
3434
|
+
}
|
|
3435
|
+
else {
|
|
3436
|
+
this.stopTruncate();
|
|
3437
|
+
}
|
|
3438
|
+
}
|
|
3439
|
+
watchTooltipActive() {
|
|
3440
|
+
if (!this.keydownListenerActive && (this.textHover || this.textFocus)) {
|
|
3441
|
+
document.addEventListener('keydown', this.keyDownListener);
|
|
3442
|
+
this.keydownListenerActive = true;
|
|
3443
|
+
}
|
|
3444
|
+
if (!this.textHover && !this.textFocus) {
|
|
3445
|
+
document.removeEventListener('keydown', this.keyDownListener);
|
|
3446
|
+
this.keydownListenerActive = false;
|
|
3447
|
+
}
|
|
3448
|
+
}
|
|
3449
|
+
truncateLabel() {
|
|
3450
|
+
setTimeout(() => {
|
|
3451
|
+
if (this.labelContent) {
|
|
3452
|
+
this.truncatedContent = hasEllipses(this.labelContent) ? this.host.innerText : undefined;
|
|
3453
|
+
}
|
|
3454
|
+
});
|
|
3455
|
+
}
|
|
3456
|
+
componentDidLoad() {
|
|
3457
|
+
if (this.truncate) {
|
|
3458
|
+
this.startTruncate();
|
|
3459
|
+
}
|
|
3460
|
+
}
|
|
3461
|
+
disconnectedCallback() {
|
|
3462
|
+
this.stopTruncate();
|
|
3463
|
+
}
|
|
3464
|
+
startTruncate() {
|
|
3465
|
+
this.mutationObserver = new MutationObserver(() => {
|
|
3466
|
+
this.truncateLabel();
|
|
3467
|
+
});
|
|
3468
|
+
this.mutationObserver.observe(this.host, {
|
|
3469
|
+
attributes: true,
|
|
3470
|
+
subtree: true
|
|
3471
|
+
});
|
|
3472
|
+
this.resizeObserver.observe(this.host);
|
|
3473
|
+
this.truncateLabel();
|
|
3474
|
+
}
|
|
3475
|
+
stopTruncate() {
|
|
3476
|
+
var _a;
|
|
3477
|
+
document.removeEventListener('keydown', this.keyDownListener);
|
|
3478
|
+
(_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
3479
|
+
this.resizeObserver.unobserve(this.host);
|
|
3480
|
+
this.truncatedContent = undefined;
|
|
3481
|
+
this.keydownListenerActive = false;
|
|
3357
3482
|
}
|
|
3358
3483
|
render() {
|
|
3359
3484
|
const status = this.status && Label.statusMap.get(this.status);
|
|
3360
|
-
return (h(
|
|
3485
|
+
return (h(Fragment, null, h("span", { id: "toggle-anchor", class: clsx('dso-label', {
|
|
3486
|
+
[`dso-label-${this.status}`]: this.status,
|
|
3487
|
+
'dso-compact': this.compact && !this.removable,
|
|
3488
|
+
'dso-hover': this.removeHover || this.removeFocus,
|
|
3489
|
+
}) }, h("slot", { name: "symbol" }), status && (h("span", { class: "sr-only" }, status, ": ")), h("span", { class: clsx('dso-label-content', {
|
|
3490
|
+
'dso-truncate': !!this.truncate,
|
|
3491
|
+
}), ref: element => this.labelContent = element, tabindex: (this.truncate && this.truncatedContent) ? 0 : -1, onMouseEnter: () => this.textHover = true, onMouseLeave: () => this.textHover = false, onFocus: () => this.textFocus = true, onBlur: () => this.textFocus = false }, h("slot", null)), this.removable && (h("button", { type: "button", onClick: e => this.removeClick.emit(e), onMouseEnter: () => this.removeHover = true, onMouseLeave: () => this.removeHover = false, onFocus: () => this.removeFocus = true, onBlur: () => this.removeFocus = false }, h("span", { class: "sr-only" }, "Verwijder"), h("dso-icon", { icon: "times" })))), h("dso-tooltip", { stateless: true, for: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top" }, this.truncatedContent)));
|
|
3361
3492
|
}
|
|
3493
|
+
get host() { return this; }
|
|
3494
|
+
static get watchers() { return {
|
|
3495
|
+
"truncate": ["watchTruncate"],
|
|
3496
|
+
"textHover": ["watchTooltipActive"],
|
|
3497
|
+
"textFocus": ["watchTooltipActive"]
|
|
3498
|
+
}; }
|
|
3362
3499
|
static get style() { return labelCss; }
|
|
3363
3500
|
};
|
|
3364
3501
|
Label.statusMap = new Map([
|
|
3365
3502
|
['info', 'Opmerking'],
|
|
3366
3503
|
['success', 'Gelukt'],
|
|
3367
3504
|
['warning', 'Waarschuwing'],
|
|
3368
|
-
['danger', 'Fout']
|
|
3505
|
+
['danger', 'Fout'],
|
|
3369
3506
|
]);
|
|
3370
3507
|
|
|
3371
3508
|
const mapBaseLayersCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-width:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-bottom:8px;max-width:100%;text-align:left}p[slot=info]{margin:0}";
|
|
@@ -3402,7 +3539,7 @@ let MapBaseLayers = class extends HTMLElement {
|
|
|
3402
3539
|
static get style() { return mapBaseLayersCss; }
|
|
3403
3540
|
};
|
|
3404
3541
|
|
|
3405
|
-
const mapControlsCss = "button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}:host{background-color:#fff;border:1px solid #ccc;bottom:0;display:block;font-family:Asap, sans-serif;position:absolute;top:0;left:100%;transition:transform 300ms ease;width:300px}*,*::after,*::before{box-sizing:border-box}:host([open]){box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.3);transform:translateX(-100%)}:host([open]) #toggle-visibility-button{display:none}#toggle-visibility-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border:0;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);font-weight:600;margin-right:16px;padding:8px 16px;white-space:nowrap;position:absolute;right:calc(100% + 56px);top:16px}#toggle-visibility-button:focus,#toggle-visibility-button:focus-visible{outline-offset:2px}#toggle-visibility-button:active{outline:0}#toggle-visibility-button.extern::after,#toggle-visibility-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}#toggle-visibility-button:hover{background-color:#39870c;border-color:#39870c;color:#fff}#toggle-visibility-button:active{background-color:#275937;border-color:#275937;color:#fff}#toggle-visibility-button[disabled],#toggle-visibility-button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}#toggle-visibility-button.btn-sm{line-height:16px}#toggle-visibility-button.btn-sm dso-icon,#toggle-visibility-button.btn-sm svg.di,#toggle-visibility-button.btn-sm.extern::after,#toggle-visibility-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}#toggle-visibility-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#toggle-visibility-button.download:hover::after{--dso-icon:var(--di-download-wit)}#toggle-visibility-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}#toggle-visibility-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#toggle-visibility-button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}#toggle-visibility-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}#toggle-visibility-button dso-icon,#toggle-visibility-button svg.di{margin-left:-8px;margin-right:8px}#toggle-visibility-button span+dso-icon,#toggle-visibility-button span+svg.di{margin-left:8px;margin-right:-8px}#toggle-visibility-button:focus-visible{background-color:#39870c;border-color:#39870c;color:#fff;outline:none}#zoom-buttons{border-radius:4px;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);display:flex;flex-wrap:wrap;flex:0 0;position:absolute;right:calc(100% + 16px);top:16px}#zoom-buttons button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border:0;padding:8px;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;flex:0 0 100%;height:40px;min-width:auto;width:40px}#zoom-buttons button:focus,#zoom-buttons button:focus-visible{outline-offset:2px}#zoom-buttons button:active{outline:0}#zoom-buttons button.extern::after,#zoom-buttons button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}#zoom-buttons button:hover{background-color:#39870c;border-color:#39870c;color:#fff}#zoom-buttons button:active{background-color:#275937;border-color:#275937;color:#fff}#zoom-buttons button[disabled],#zoom-buttons button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}#zoom-buttons button.btn-sm{line-height:16px}#zoom-buttons button.btn-sm dso-icon,#zoom-buttons button.btn-sm svg.di,#zoom-buttons button.btn-sm.extern::after,#zoom-buttons button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}#zoom-buttons button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#zoom-buttons button.download:hover::after{--dso-icon:var(--di-download-wit)}#zoom-buttons button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}#zoom-buttons button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#zoom-buttons button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}#zoom-buttons button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}#zoom-buttons button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}#zoom-buttons button:focus-visible{background-color:#39870c;border-color:#39870c;color:#fff;outline:none}#zoom-buttons button+button{border-radius:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:1px solid #ccc}#close-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;border:0;color:#39870c;line-height:1;padding:0;background-color:transparent;padding:0;position:absolute;right:16px;top:16px}#close-button:focus,#close-button:focus-visible{outline-offset:2px}#close-button:active{outline:0}#close-button.extern::after,#close-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}#close-button[disabled]{color:#afcf9d}#close-button:not([disabled]):hover{color:#676cb0;text-decoration:underline}#close-button:not([disabled]):active{color:#676cb0}#close-button.btn-align{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}#close-button.extern::after,#close-button.download::after{position:relative;top:-2px}#close-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#close-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}#close-button.download:not([disabled]):hover::after,#close-button.download:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}#close-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}#close-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}#close-button.extern:not([disabled]):hover::after,#close-button.extern:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}#close-button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}section:not([hidden]){display:flex;flex-direction:column;height:100%}header,.content{padding:16px}header{border-bottom:1px solid #ccc;flex-grow:0;position:relative}header h2{color:#275937;font-family:\"Asap\", sans-serif;line-height:1;margin:0}.content{flex-grow:1;overflow-y:auto}";
|
|
3542
|
+
const mapControlsCss = "button {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\n:host {\n background-color: #fff;\n border: 1px solid #ccc;\n bottom: 0;\n display: block;\n font-family: Asap, sans-serif;\n position: absolute;\n top: 0;\n left: 100%;\n transition: transform 300ms ease;\n width: 300px;\n}\n\n*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host([open]) {\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n transform: translateX(-100%);\n}\n:host([open]) #toggle-visibility-button {\n display: none;\n}\n\n#toggle-visibility-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border: 0;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n font-weight: 600;\n margin-right: 16px;\n padding: 8px 16px;\n white-space: nowrap;\n position: absolute;\n right: calc(100% + 56px);\n top: 16px;\n}\n#toggle-visibility-button:focus, #toggle-visibility-button:focus-visible {\n outline-offset: 2px;\n}\n#toggle-visibility-button:active {\n outline: 0;\n}\n#toggle-visibility-button.extern::after, #toggle-visibility-button.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n#toggle-visibility-button:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n#toggle-visibility-button:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n#toggle-visibility-button[disabled], #toggle-visibility-button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n#toggle-visibility-button.btn-sm {\n line-height: 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}\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}";
|
|
3406
3543
|
|
|
3407
3544
|
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
3408
3545
|
if (kind === "a" && !f)
|
|
@@ -3541,16 +3678,24 @@ class OzonContentExtRefNode {
|
|
|
3541
3678
|
}
|
|
3542
3679
|
}
|
|
3543
3680
|
|
|
3544
|
-
class
|
|
3681
|
+
class OzonContentFiguurNode {
|
|
3545
3682
|
constructor() {
|
|
3546
3683
|
this.name = [
|
|
3547
|
-
'
|
|
3548
|
-
'InlineTekstAfbeelding'
|
|
3684
|
+
'Figuur',
|
|
3549
3685
|
];
|
|
3550
3686
|
}
|
|
3551
3687
|
render(node) {
|
|
3552
|
-
var _a, _b, _c, _d;
|
|
3553
|
-
|
|
3688
|
+
var _a, _b, _c, _d, _e;
|
|
3689
|
+
const childNodes = Array.from(node.childNodes);
|
|
3690
|
+
const titel = (_a = childNodes.find(n => getNodeName$1(n) === 'Titel')) === null || _a === void 0 ? void 0 : _a.textContent;
|
|
3691
|
+
const bijschrift = (_b = childNodes.find(n => getNodeName$1(n) === 'Bijschrift')) === null || _b === void 0 ? void 0 : _b.textContent;
|
|
3692
|
+
const illustratieNode = childNodes.find(n => getNodeName$1(n) === 'Illustratie');
|
|
3693
|
+
if (illustratieNode instanceof Element) {
|
|
3694
|
+
return (h("div", { class: "dso-ozon-figuur" },
|
|
3695
|
+
h("dso-image-overlay", null,
|
|
3696
|
+
h("img", { src: (_c = illustratieNode.getAttribute('naam')) !== null && _c !== void 0 ? _c : undefined, alt: (_e = (_d = titel !== null && titel !== void 0 ? titel : illustratieNode.getAttribute('alt')) !== null && _d !== void 0 ? _d : illustratieNode.getAttribute('naam')) !== null && _e !== void 0 ? _e : undefined })),
|
|
3697
|
+
bijschrift && (h("span", { class: "figuur-bijschrift" }, bijschrift))));
|
|
3698
|
+
}
|
|
3554
3699
|
}
|
|
3555
3700
|
}
|
|
3556
3701
|
|
|
@@ -3567,6 +3712,19 @@ class OzonContentInhoudNode {
|
|
|
3567
3712
|
}
|
|
3568
3713
|
}
|
|
3569
3714
|
|
|
3715
|
+
class OzonContentInlineTekstAfbeeldingNode {
|
|
3716
|
+
constructor() {
|
|
3717
|
+
this.name = [
|
|
3718
|
+
'InlineTekstAfbeelding',
|
|
3719
|
+
'Illustratie',
|
|
3720
|
+
];
|
|
3721
|
+
}
|
|
3722
|
+
render(node) {
|
|
3723
|
+
var _a, _b, _c, _d;
|
|
3724
|
+
return (h("img", { src: (_a = node.getAttribute('naam')) !== null && _a !== void 0 ? _a : undefined, alt: (_b = node.getAttribute('naam')) !== null && _b !== void 0 ? _b : undefined, height: (_c = node.getAttribute('hoogte')) !== null && _c !== void 0 ? _c : undefined, width: (_d = node.getAttribute('breedte')) !== null && _d !== void 0 ? _d : undefined }));
|
|
3725
|
+
}
|
|
3726
|
+
}
|
|
3727
|
+
|
|
3570
3728
|
class OzonContentOpschriftNode {
|
|
3571
3729
|
constructor() {
|
|
3572
3730
|
this.name = 'Opschrift';
|
|
@@ -3597,6 +3755,33 @@ class OzonContentInlineNodes {
|
|
|
3597
3755
|
}
|
|
3598
3756
|
}
|
|
3599
3757
|
|
|
3758
|
+
class OzonContentIntIoRefNode {
|
|
3759
|
+
constructor() {
|
|
3760
|
+
this.name = 'IntIoRef';
|
|
3761
|
+
}
|
|
3762
|
+
render(node, { mapNodeToJsx, emitAnchorClick }) {
|
|
3763
|
+
const ref = node.getAttribute('ref');
|
|
3764
|
+
if (!ref) {
|
|
3765
|
+
return mapNodeToJsx(node.childNodes);
|
|
3766
|
+
}
|
|
3767
|
+
const intRefOnClick = (event) => {
|
|
3768
|
+
event.preventDefault();
|
|
3769
|
+
const target = event.currentTarget;
|
|
3770
|
+
if (!(target instanceof HTMLAnchorElement)) {
|
|
3771
|
+
return;
|
|
3772
|
+
}
|
|
3773
|
+
const { href } = target;
|
|
3774
|
+
emitAnchorClick({
|
|
3775
|
+
node: this.name,
|
|
3776
|
+
href,
|
|
3777
|
+
documentComponent: ref,
|
|
3778
|
+
originalEvent: event
|
|
3779
|
+
});
|
|
3780
|
+
};
|
|
3781
|
+
return (h("a", { href: `#${ref}`, onClick: intRefOnClick }, mapNodeToJsx(node.childNodes)));
|
|
3782
|
+
}
|
|
3783
|
+
}
|
|
3784
|
+
|
|
3600
3785
|
class OzonContentIntRefNode {
|
|
3601
3786
|
constructor() {
|
|
3602
3787
|
this.name = 'IntRef';
|
|
@@ -3614,6 +3799,7 @@ class OzonContentIntRefNode {
|
|
|
3614
3799
|
}
|
|
3615
3800
|
const { href } = target;
|
|
3616
3801
|
emitAnchorClick({
|
|
3802
|
+
node: this.name,
|
|
3617
3803
|
href,
|
|
3618
3804
|
documentComponent: ref,
|
|
3619
3805
|
originalEvent: event
|
|
@@ -3781,9 +3967,11 @@ class Mapper {
|
|
|
3781
3967
|
new OzonContentExtRefNode(),
|
|
3782
3968
|
new OzonContentAlNode(),
|
|
3783
3969
|
new OzonContentInlineNodes(),
|
|
3784
|
-
new
|
|
3970
|
+
new OzonContentInlineTekstAfbeeldingNode(),
|
|
3785
3971
|
new OzonContentNootNode(),
|
|
3786
|
-
new OzonContentTableNode()
|
|
3972
|
+
new OzonContentTableNode(),
|
|
3973
|
+
new OzonContentIntIoRefNode(),
|
|
3974
|
+
new OzonContentFiguurNode(),
|
|
3787
3975
|
];
|
|
3788
3976
|
this.skip = this.mappers.reduce((t, m) => {
|
|
3789
3977
|
if (m.handles) {
|
|
@@ -3839,7 +4027,7 @@ class Mapper {
|
|
|
3839
4027
|
}
|
|
3840
4028
|
}
|
|
3841
4029
|
|
|
3842
|
-
const ozonContentCss = ".sc-dso-ozon-content-h:not([inline]){display:block}[inline].sc-dso-ozon-content-h{display:inline}[deleted].sc-dso-ozon-content-h *.sc-dso-ozon-content{text-decoration:line-through !important}[interactive].sc-dso-ozon-content-h{background-color:transparent
|
|
4030
|
+
const ozonContentCss = ".sc-dso-ozon-content-h:not([inline]) {\n display: block;\n}\n\n[inline].sc-dso-ozon-content-h {\n display: inline;\n}\n\n[deleted].sc-dso-ozon-content-h *.sc-dso-ozon-content {\n text-decoration: line-through !important;\n}\n\n[interactive].sc-dso-ozon-content-h {\n background-color: transparent;\n color: #39870c;\n text-decoration: underline;\n cursor: pointer;\n}\n[interactive].sc-dso-ozon-content-h:hover, [interactive].sc-dso-ozon-content-h:focus {\n color: #676cb0;\n text-decoration: underline;\n}\n[interactive].sc-dso-ozon-content-h:active {\n text-decoration: none;\n}\n\n.deleted-start.sc-dso-ozon-content, .deleted-end.sc-dso-ozon-content {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\nbutton.toggle-note.sc-dso-ozon-content {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\nbutton.toggle-note.sc-dso-ozon-content:focus, button.toggle-note.sc-dso-ozon-content:focus-visible {\n outline-offset: 2px;\n}\nbutton.toggle-note.sc-dso-ozon-content:active {\n outline: 0;\n}\nbutton.toggle-note.extern.sc-dso-ozon-content::after, button.toggle-note.download.sc-dso-ozon-content::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\nbutton.toggle-note[disabled].sc-dso-ozon-content {\n color: #afcf9d;\n}\nbutton.toggle-note[disabled].dso-spinner-left.sc-dso-ozon-content, button.toggle-note[disabled].dso-spinner-right.sc-dso-ozon-content {\n color: #39870c;\n}\nbutton.toggle-note.sc-dso-ozon-content:not([disabled]):hover {\n color: #676cb0;\n text-decoration: underline;\n}\nbutton.toggle-note.sc-dso-ozon-content:not([disabled]):active {\n color: #676cb0;\n}\nbutton.toggle-note.btn-align.sc-dso-ozon-content {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\n}\nbutton.toggle-note.extern.sc-dso-ozon-content::after, button.toggle-note.download.sc-dso-ozon-content::after {\n position: relative;\n top: -2px;\n}\nbutton.toggle-note.download.sc-dso-ozon-content::after {\n background: var(--dso-icon, var(--di-download)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\nbutton.toggle-note.download[disabled].sc-dso-ozon-content::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\nbutton.toggle-note.download.sc-dso-ozon-content:not([disabled]):hover::after, button.toggle-note.download.sc-dso-ozon-content:not([disabled]):active::after {\n --dso-icon: var(--di-download-scampi);\n}\nbutton.toggle-note.extern.sc-dso-ozon-content::after {\n background: var(--dso-icon, var(--di-external-link)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\nbutton.toggle-note.extern[disabled].sc-dso-ozon-content::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\nbutton.toggle-note.extern.sc-dso-ozon-content:not([disabled]):hover::after, button.toggle-note.extern.sc-dso-ozon-content:not([disabled]):active::after {\n --dso-icon: var(--di-external-link-scampi);\n}\nbutton.toggle-note.dso-spinner-left.sc-dso-ozon-content::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 8px;\n}\nbutton.toggle-note.dso-spinner-right.sc-dso-ozon-content::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 8px;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + dso-icon.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.sc-dso-ozon-content {\n margin-left: 8px;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content svg.di.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content {\n vertical-align: middle;\n}\n\nspan[role=section].sc-dso-ozon-content, span[role=paragraph].sc-dso-ozon-content {\n display: block;\n}\n\n.fallback.sc-dso-ozon-content {\n display: block;\n}\n\n.od-Term.sc-dso-ozon-content {\n font-weight: 700;\n}\n\n.od-Definitie.sc-dso-ozon-content, .od-Tussenkop.sc-dso-ozon-content {\n font-style: italic;\n}\n\n.od-Inhoud.sc-dso-ozon-content, .od-Inhoud.sc-dso-ozon-content > .od-Lijst.sc-dso-ozon-content, .od-IntIoRef.sc-dso-ozon-content, .od-Lidnr.sc-dso-ozon-content, .od-LiNr.sc-dso-ozon-content, .od-Opschrift.sc-dso-ozon-content, .od-Tussenkop.sc-dso-ozon-content {\n display: inline;\n}\n\n.od-Al.sc-dso-ozon-content, .od-Lijstaanhef.sc-dso-ozon-content {\n margin-bottom: 0.75em;\n}\n\n.od-IntIoRef.sc-dso-ozon-content {\n border-bottom: 1px dotted;\n}\n\n.od-LiNummer.sc-dso-ozon-content {\n float: left;\n min-width: 0.7em;\n padding-right: 0.3em;\n text-align: right;\n}\n\n.dso-ozon-figuur.sc-dso-ozon-content .figuur-bijschrift.sc-dso-ozon-content {\n display: block;\n font-size: 0.75rem;\n padding-bottom: 2.5rem;\n}\n\n.od-Tabel.sc-dso-ozon-content thead.sc-dso-ozon-content {\n font-weight: 600;\n}\n\n.od-Kadertekst.sc-dso-ozon-content {\n border: 1px solid #e5e5e5;\n margin-bottom: 1rem;\n padding: 1rem;\n}";
|
|
3843
4031
|
|
|
3844
4032
|
let OzonContent = class extends HTMLElement {
|
|
3845
4033
|
constructor() {
|
|
@@ -3883,7 +4071,7 @@ let OzonContent = class extends HTMLElement {
|
|
|
3883
4071
|
};
|
|
3884
4072
|
const transformed = this.mapper.transform((_a = this.content) !== null && _a !== void 0 ? _a : '', context);
|
|
3885
4073
|
if (this.deleted) {
|
|
3886
|
-
return (h("section", null, h("span", { class: "deleted-start" }, "Begin verwijderd element"), transformed, h("span", { class: "deleted-end" }, "Einde verwijderd element")));
|
|
4074
|
+
return (h("section", null, h("slot", { name: "prefix" }), h("span", { class: "deleted-start" }, "Begin verwijderd element"), transformed, h("span", { class: "deleted-end" }, "Einde verwijderd element"), h("slot", { name: "suffix" })));
|
|
3887
4075
|
}
|
|
3888
4076
|
return (h(Host, { onClick: (e) => this.handleHostOnClick(e) }, h("slot", { name: "prefix" }), transformed, h("slot", { name: "suffix" })));
|
|
3889
4077
|
}
|
|
@@ -3891,7 +4079,7 @@ let OzonContent = class extends HTMLElement {
|
|
|
3891
4079
|
static get style() { return ozonContentCss; }
|
|
3892
4080
|
};
|
|
3893
4081
|
|
|
3894
|
-
const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:
|
|
4082
|
+
const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:2rem;justify-content:center;position:relative;width:2rem}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:50%}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:\"\";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}";
|
|
3895
4083
|
|
|
3896
4084
|
let Pagination = class extends HTMLElement {
|
|
3897
4085
|
constructor() {
|
|
@@ -3913,18 +4101,21 @@ let Pagination = class extends HTMLElement {
|
|
|
3913
4101
|
}
|
|
3914
4102
|
;
|
|
3915
4103
|
render() {
|
|
4104
|
+
var _a;
|
|
3916
4105
|
if (!this.totalPages) {
|
|
3917
4106
|
return null;
|
|
3918
4107
|
}
|
|
4108
|
+
const currentPage = (_a = this.currentPage) !== null && _a !== void 0 ? _a : 0;
|
|
3919
4109
|
const pages = Array.from({ length: this.totalPages }, (_value, i) => i + 1);
|
|
3920
|
-
|
|
4110
|
+
const currentPageOutOfBounds = currentPage < pages[0] || currentPage > pages[pages.length - 1];
|
|
4111
|
+
return (h("ul", { class: "pagination" }, h("li", { class: (currentPage <= pages[0] || currentPageOutOfBounds) ? 'dso-page-hidden' : undefined }, h("a", { href: this.formatHref(pages[0]), "aria-label": "Vorige", onClick: e => currentPage && this.clickHandler(e, pages[currentPage - 2]) }, h("dso-icon", { icon: "chevron-left" }))), pages.map(page => (h("li", { key: page, class: currentPage === page ? 'active' : undefined }, currentPage === page
|
|
3921
4112
|
? (h("span", { "aria-current": "page" }, page))
|
|
3922
|
-
: (h("a", { href: this.formatHref(page), onClick: e => this.clickHandler(e, page) }, page))))), h("li", { class:
|
|
4113
|
+
: (h("a", { href: this.formatHref(page), onClick: e => this.clickHandler(e, page) }, page))))), h("li", { class: (currentPage >= pages[pages.length - 1] || currentPageOutOfBounds) ? 'dso-page-hidden' : undefined }, h("a", { href: this.formatHref(pages[pages.length - 1]), "aria-label": "Volgende", onClick: e => currentPage && this.clickHandler(e, pages[currentPage]) }, h("dso-icon", { icon: "chevron-right" })))));
|
|
3923
4114
|
}
|
|
3924
4115
|
static get style() { return paginationCss; }
|
|
3925
4116
|
};
|
|
3926
4117
|
|
|
3927
|
-
const progressBarCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.progress{background-color:#fff;border:1px solid #39870c;height:16px;margin-bottom:calc(16px + 1em);position:relative}.progress .progress-bar{background-color:#39870c;color:#fff;float:left;font-size:
|
|
4118
|
+
const progressBarCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.progress{background-color:#fff;border:1px solid #39870c;height:16px;margin-bottom:calc(16px + 1em);position:relative}.progress .progress-bar{background-color:#39870c;color:#fff;float:left;font-size:0.875rem;height:100%;line-height:16px;text-align:center;width:0%}.progress .progress-bar>span:not(.sr-only){color:#191919;left:0;position:absolute;top:calc(100% + 8px)}";
|
|
3928
4119
|
|
|
3929
4120
|
let ProgressBar = class extends HTMLElement {
|
|
3930
4121
|
constructor() {
|
|
@@ -4079,29 +4270,17 @@ let Toggletip = class extends HTMLElement {
|
|
|
4079
4270
|
}
|
|
4080
4271
|
};
|
|
4081
4272
|
this.keyDownListener = (event) => {
|
|
4273
|
+
var _a;
|
|
4082
4274
|
if (!event.defaultPrevented && event.key == "Escape") {
|
|
4083
4275
|
this.close();
|
|
4084
|
-
this.
|
|
4276
|
+
(_a = this.infoButton) === null || _a === void 0 ? void 0 : _a.setFocus();
|
|
4085
4277
|
event.preventDefault();
|
|
4086
4278
|
}
|
|
4087
4279
|
return;
|
|
4088
4280
|
};
|
|
4089
4281
|
}
|
|
4090
|
-
componentDidRender() {
|
|
4091
|
-
var _a, _b, _c;
|
|
4092
|
-
const infoButton = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("dso-info-button");
|
|
4093
|
-
if (!infoButton) {
|
|
4094
|
-
throw Error("dso-info-button not found");
|
|
4095
|
-
}
|
|
4096
|
-
this.infoButton = infoButton;
|
|
4097
|
-
const button = (_c = (_b = this.infoButton) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector("button");
|
|
4098
|
-
if (!button) {
|
|
4099
|
-
throw Error("button not found");
|
|
4100
|
-
}
|
|
4101
|
-
this.button = button;
|
|
4102
|
-
}
|
|
4103
4282
|
render() {
|
|
4104
|
-
return (h(Fragment, null, h("dso-info-button", { id: "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary }), h("dso-tooltip", { stateless: true, descriptive: true, for: "toggle", active: this.active, position: this.position, small: this.small }, h("slot", null))));
|
|
4283
|
+
return (h(Fragment, null, h("dso-info-button", { id: "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: element => this.infoButton = element }), h("dso-tooltip", { stateless: true, descriptive: true, for: "toggle", active: this.active, position: this.position, small: this.small }, h("slot", null))));
|
|
4105
4284
|
}
|
|
4106
4285
|
get host() { return this; }
|
|
4107
4286
|
static get style() { return toggletipCss; }
|
|
@@ -5928,7 +6107,7 @@ var maxSize = {
|
|
|
5928
6107
|
}
|
|
5929
6108
|
};
|
|
5930
6109
|
|
|
5931
|
-
const tooltipCss = ":host(.hidden){visibility:hidden}:host-context(dso-toggletip){color:red !important}:host-context(dso-toggletip) *[data-popper-placement=top] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=right] .tooltip-arrow{margin-top:0}:host-context(dso-toggletip) *[data-popper-placement=bottom] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=left]{margin-right:-8px !important}:host-context(dso-toggletip) *[data-popper-placement=left] .tooltip-arrow{margin-top:0}*,*::after,*::before{box-sizing:border-box}.tooltip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:410}.tooltip.in{opacity:1}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:
|
|
6110
|
+
const tooltipCss = ":host(.hidden){visibility:hidden}:host-context(dso-toggletip){color:red !important}:host-context(dso-toggletip) *[data-popper-placement=top] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=right] .tooltip-arrow{margin-top:0}:host-context(dso-toggletip) *[data-popper-placement=bottom] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=left]{margin-right:-8px !important}:host-context(dso-toggletip) *[data-popper-placement=left] .tooltip-arrow{margin-top:0}*,*::after,*::before{box-sizing:border-box}.tooltip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:410}.tooltip.in{opacity:1}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:1rem;max-width:640px;padding:8px 16px;position:relative}.tooltip .tooltip-inner.dso-small{max-width:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;height:0;width:0}.tooltip[data-popper-placement=top]{margin-top:-3px;padding:6px 0}.tooltip[data-popper-placement=top] .tooltip-arrow{border-top-color:#fff;border-width:6px 6px 0;bottom:0}.tooltip[data-popper-placement=top] .tooltip-arrow{margin-left:-3px}.tooltip[data-popper-placement=right]{margin-left:3px;padding:0 6px}.tooltip[data-popper-placement=right] .tooltip-arrow{border-right-color:#fff;border-width:6px 6px 6px 0;left:0}.tooltip[data-popper-placement=right] .tooltip-arrow{margin-top:-3px}.tooltip[data-popper-placement=bottom]{margin-top:3px;padding:6px 0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{border-bottom-color:#fff;border-width:0 6px 6px;top:0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{margin-left:-3px}.tooltip[data-popper-placement=left]{margin-left:-3px;padding:0 6px}.tooltip[data-popper-placement=left] .tooltip-arrow{border-left-color:#fff;border-width:6px 0 6px 6px;right:0}.tooltip[data-popper-placement=left] .tooltip-arrow{margin-top:-3px}";
|
|
5932
6111
|
|
|
5933
6112
|
// Keep const in sync with $tooltip-transition-duration in @dso-toolkit/sources/tooltip.scss tooltip_root() mixin
|
|
5934
6113
|
const transitionDuration = 150;
|
|
@@ -5978,6 +6157,11 @@ let Tooltip = class extends HTMLElement {
|
|
|
5978
6157
|
state.styles.popper = Object.assign(Object.assign({}, state.styles.popper), { maxWidth: `${width}px` });
|
|
5979
6158
|
},
|
|
5980
6159
|
};
|
|
6160
|
+
this.keyDownListener = (event) => {
|
|
6161
|
+
if (event.key === 'Escape') {
|
|
6162
|
+
this.deactivate();
|
|
6163
|
+
}
|
|
6164
|
+
};
|
|
5981
6165
|
}
|
|
5982
6166
|
/**
|
|
5983
6167
|
* Activate the tooltip (Sets the `active` attribute)
|
|
@@ -6036,6 +6220,7 @@ let Tooltip = class extends HTMLElement {
|
|
|
6036
6220
|
(_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
|
|
6037
6221
|
modifiers: [{ name: 'eventListeners', enabled: true }]
|
|
6038
6222
|
});
|
|
6223
|
+
document.addEventListener('keydown', this.keyDownListener);
|
|
6039
6224
|
});
|
|
6040
6225
|
}
|
|
6041
6226
|
}
|
|
@@ -6044,6 +6229,7 @@ let Tooltip = class extends HTMLElement {
|
|
|
6044
6229
|
(_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
|
|
6045
6230
|
modifiers: [{ name: 'eventListeners', enabled: false }]
|
|
6046
6231
|
});
|
|
6232
|
+
document.removeEventListener('keydown', this.keyDownListener);
|
|
6047
6233
|
}
|
|
6048
6234
|
setTimeout(() => (this.hidden = true), transitionDuration);
|
|
6049
6235
|
}
|
|
@@ -6136,7 +6322,7 @@ const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize }) => {
|
|
|
6136
6322
|
h("div", { onClick: (e) => owner.itemClick(e, ancestors, item) },
|
|
6137
6323
|
h("dso-icon", { icon: item.open ? 'minus-square' : 'plus-square' }))
|
|
6138
6324
|
: h("dso-icon", null)),
|
|
6139
|
-
h("p", { class: clsx('tree-content', { 'active': item.active }, { 'selected': item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? '' + (!!item.open && !!((_b = item.items) === null || _b === void 0 ? void 0 : _b.length)) : undefined, "aria-current": item.active ? 'true' : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? 'true' : undefined, onClick: (e) => owner.itemClick(e, ancestors, item) },
|
|
6325
|
+
h("p", { class: clsx('tree-content', { 'active': item.active }, { 'selected': item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? '' + (!!item.open && !!((_b = item.items) === null || _b === void 0 ? void 0 : _b.length)) : undefined, "aria-current": item.active ? 'true' : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? 'true' : undefined, "data-item-id": item.id, onClick: (e) => owner.itemClick(e, ancestors, item) },
|
|
6140
6326
|
item.selected && h("span", { class: "sr-only" }, "Resultaat: "),
|
|
6141
6327
|
item.href
|
|
6142
6328
|
? h("a", { href: item.href, tabindex: "-1" }, item.label)
|
|
@@ -6222,6 +6408,28 @@ let TreeView = class extends HTMLElement {
|
|
|
6222
6408
|
}
|
|
6223
6409
|
};
|
|
6224
6410
|
}
|
|
6411
|
+
/**
|
|
6412
|
+
* Set focus on the last item in the specified path.
|
|
6413
|
+
* The consumer is responsible for providing a TreeView collection where the last item is visible.
|
|
6414
|
+
* @async
|
|
6415
|
+
* @returns Whether the item was found.
|
|
6416
|
+
*/
|
|
6417
|
+
async focusItem(path) {
|
|
6418
|
+
var _a;
|
|
6419
|
+
const tree = this.tree;
|
|
6420
|
+
if (!tree || path.length === 0) {
|
|
6421
|
+
return false;
|
|
6422
|
+
}
|
|
6423
|
+
const itemToFocus = path[path.length - 1];
|
|
6424
|
+
const elementToFocus = Array.from((_a = tree.querySelectorAll('p')) !== null && _a !== void 0 ? _a : [])
|
|
6425
|
+
.filter(item => item.offsetWidth > 0 && item.offsetHeight > 0)
|
|
6426
|
+
.find(item => item.dataset['itemId'] === itemToFocus.id);
|
|
6427
|
+
if (!elementToFocus) {
|
|
6428
|
+
return false;
|
|
6429
|
+
}
|
|
6430
|
+
TreeView.setFocus(tree, elementToFocus);
|
|
6431
|
+
return true;
|
|
6432
|
+
}
|
|
6225
6433
|
static setFocus(tree, target) {
|
|
6226
6434
|
if (target) {
|
|
6227
6435
|
Array.from(tree.querySelectorAll('p'))
|
|
@@ -6298,7 +6506,7 @@ let TreeView = class extends HTMLElement {
|
|
|
6298
6506
|
}
|
|
6299
6507
|
render() {
|
|
6300
6508
|
var _a;
|
|
6301
|
-
return (h("div", { id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e) }, h("ul", { role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length })))));
|
|
6509
|
+
return (h("div", { id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: element => this.tree = element }, h("ul", { role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length })))));
|
|
6302
6510
|
}
|
|
6303
6511
|
static get style() { return treeViewCss; }
|
|
6304
6512
|
};
|
|
@@ -6310,7 +6518,7 @@ const ViewerGridFilterpanelButtons = ({ onApply, onCancel }) => (h("div", { clas
|
|
|
6310
6518
|
h("span", null, "Toepassen"),
|
|
6311
6519
|
h("dso-icon", { icon: "chevron-right" }))));
|
|
6312
6520
|
|
|
6313
|
-
const viewerGridCss = "button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}h1,.h1,h2,.h2,h3,.h3{margin-bottom:16px;margin-top:24px}h1,.h1{line-height:1.25}h1{color:#275937;font-size:2rem;font-weight:700}h2,.h2{line-height:1.33}h2{color:#275937;font-size:1.5rem;font-weight:700}h3,.h3{line-height:1.2}h3{color:#275937;font-size:1.25rem;font-weight:600}h4,.h4,h5,.h5,h6,.h6{margin-bottom:16px;margin-top:12px}h4,.h4{line-height:1.5}h4{color:#275937;font-size:1rem;font-weight:600}h5,.h5{line-height:1.5}h5{color:#191919;font-size:1rem;font-weight:600}h6,.h6{line-height:1.5}*,*::after,*::before{box-sizing:border-box}:host{display:flex;height:100vh;overflow:hidden;position:relative}:host([small]) .dso-map-panel{flex-basis:375px;min-width:0;max-width:375px}@media screen and (max-width: 375px){:host([small]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:0;transition:none}}:host([medium]) .dso-map-panel{flex-basis:624px;min-width:375px;max-width:624px}@media screen and (max-width: 624px){:host([medium]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:375px;transition:none}}:host([large]) .dso-map-panel{flex-basis:60%;min-width:768px;max-width:1024px}@media screen and (max-width: 768px){:host([large]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:768px;transition:none}}.shrink,.expand,.overlay-close-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;border:0;color:#39870c;line-height:1;padding:0;background-color:transparent}.shrink:focus,.shrink:focus-visible,.expand:focus,.expand:focus-visible,.overlay-close-button:focus,.overlay-close-button:focus-visible{outline-offset:2px}.shrink:active,.expand:active,.overlay-close-button:active{outline:0}.shrink.extern::after,.shrink.download::after,.expand.extern::after,.expand.download::after,.overlay-close-button.extern::after,.overlay-close-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.shrink[disabled],.expand[disabled],.overlay-close-button[disabled]{color:#afcf9d}.shrink:not([disabled]):hover,.expand:not([disabled]):hover,.overlay-close-button:not([disabled]):hover{color:#676cb0;text-decoration:underline}.shrink:not([disabled]):active,.expand:not([disabled]):active,.overlay-close-button:not([disabled]):active{color:#676cb0}.shrink.btn-align,.expand.btn-align,.overlay-close-button.btn-align{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}.shrink.extern::after,.shrink.download::after,.expand.extern::after,.expand.download::after,.overlay-close-button.extern::after,.overlay-close-button.download::after{position:relative;top:-2px}.shrink.download::after,.expand.download::after,.overlay-close-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.shrink.download[disabled]::after,.expand.download[disabled]::after,.overlay-close-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.shrink.download:not([disabled]):hover::after,.shrink.download:not([disabled]):active::after,.expand.download:not([disabled]):hover::after,.expand.download:not([disabled]):active::after,.overlay-close-button.download:not([disabled]):hover::after,.overlay-close-button.download:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}.shrink.extern::after,.expand.extern::after,.overlay-close-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.shrink.extern[disabled]::after,.expand.extern[disabled]::after,.overlay-close-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.shrink.extern:not([disabled]):hover::after,.shrink.extern:not([disabled]):active::after,.expand.extern:not([disabled]):hover::after,.expand.extern:not([disabled]):active::after,.overlay-close-button.extern:not([disabled]):hover::after,.overlay-close-button.extern:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}.shrink dso-icon+span:not(.sr-only),.shrink svg.di+span:not(.sr-only),.shrink span:not(.sr-only)+dso-icon,.shrink span:not(.sr-only)+svg.di,.expand dso-icon+span:not(.sr-only),.expand svg.di+span:not(.sr-only),.expand span:not(.sr-only)+dso-icon,.expand span:not(.sr-only)+svg.di,.overlay-close-button dso-icon+span:not(.sr-only),.overlay-close-button svg.di+span:not(.sr-only),.overlay-close-button span:not(.sr-only)+dso-icon,.overlay-close-button span:not(.sr-only)+svg.di{margin-left:8px}.shrink dso-icon,.shrink svg.di,.shrink span,.expand dso-icon,.expand svg.di,.expand span,.overlay-close-button dso-icon,.overlay-close-button svg.di,.overlay-close-button span{vertical-align:middle}.shrink:hover,.expand:hover,.overlay-close-button:hover{cursor:pointer}.shrink[disabled],.expand[disabled],.overlay-close-button[disabled]{display:none}.overlay-close-button{position:absolute;top:8px;right:16px}.overlay-close-button .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-map-panel{background-color:#fff;box-shadow:2px 0 8px 0 rgba(0, 0, 0, 0.4);flex-shrink:0;flex-grow:0;padding-right:8px;position:relative;transition:flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;z-index:100}.dso-map-panel .dso-filterblok-address{font-weight:bold;margin:8px 0}.dso-map-panel .main{height:100%;overflow-y:scroll;padding:8px 16px}.sizing-buttons{left:calc(100% + 1px);overflow-x:hidden;padding:0 4px 4px 0;position:absolute;top:16px;transition:left 200ms ease-in;width:44px;z-index:-1}.sizing-buttons button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border:0;padding:8px;border-radius:0;border-bottom-right-radius:4px;border-top-right-radius:4px;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.4);flex:0 0 100%;height:40px;min-width:auto;width:40px}.sizing-buttons button:focus,.sizing-buttons button:focus-visible{outline-offset:2px}.sizing-buttons button:active{outline:0}.sizing-buttons button.extern::after,.sizing-buttons button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.sizing-buttons button:hover{background-color:#39870c;border-color:#39870c;color:#fff}.sizing-buttons button:active{background-color:#275937;border-color:#275937;color:#fff}.sizing-buttons button[disabled],.sizing-buttons button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.sizing-buttons button.btn-sm{line-height:16px}.sizing-buttons button.btn-sm dso-icon,.sizing-buttons button.btn-sm svg.di,.sizing-buttons button.btn-sm.extern::after,.sizing-buttons button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.sizing-buttons button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.sizing-buttons button.download:hover::after{--dso-icon:var(--di-download-wit)}.sizing-buttons button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.sizing-buttons button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.sizing-buttons button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.sizing-buttons button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.sizing-buttons button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sizing-buttons button:focus-visible{background-color:#39870c;border-color:#39870c;color:#fff;outline:none}.sizing-buttons button:hover dso-icon{color:#fff}.map{height:100%;width:100%;overflow:hidden}#filterpanel,.overlay{background-color:#fff;height:100%;overflow-y:auto;position:absolute;z-index:101}#filterpanel{box-shadow:2px 0 5px #666;padding:40px 16px 8px;left:0;max-width:896px;width:calc(100vw - 40px)}@media screen and (max-width: 768px){#filterpanel{width:100vw}#filterpanel::before{display:none !important}}#filterpanel::before{content:\"\";display:block;position:fixed;top:0;bottom:0;right:0;left:896px;background-color:rgba(0, 0, 0, 0.5)}@media screen and (max-width: 936px){#filterpanel::before{left:auto;width:40px}}.overlay{box-shadow:-2px 0 5px #666;padding:40px 16px 8px;right:0;width:624px}@media screen and (max-width: 624px){.overlay{width:100vw}}.overlay::before{content:\"\";display:block;position:fixed;top:0;bottom:0;left:0;right:624px;background-color:rgba(0, 0, 0, 0.5)}.filterpanel-buttons{text-align:right}.filterpanel-buttons .cancel-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;line-height:16px}.filterpanel-buttons .cancel-button:focus,.filterpanel-buttons .cancel-button:focus-visible{outline-offset:2px}.filterpanel-buttons .cancel-button:active{outline:0}.filterpanel-buttons .cancel-button.extern::after,.filterpanel-buttons .cancel-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.filterpanel-buttons .cancel-button:hover{background-color:#39870c;border-color:#39870c;color:#fff}.filterpanel-buttons .cancel-button:active{background-color:#275937;border-color:#275937;color:#fff}.filterpanel-buttons .cancel-button[disabled],.filterpanel-buttons .cancel-button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.filterpanel-buttons .cancel-button.btn-sm{line-height:16px}.filterpanel-buttons .cancel-button.btn-sm dso-icon,.filterpanel-buttons .cancel-button.btn-sm svg.di,.filterpanel-buttons .cancel-button.btn-sm.extern::after,.filterpanel-buttons .cancel-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .cancel-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.filterpanel-buttons .cancel-button.download:hover::after{--dso-icon:var(--di-download-wit)}.filterpanel-buttons .cancel-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.filterpanel-buttons .cancel-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.filterpanel-buttons .cancel-button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.filterpanel-buttons .cancel-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.filterpanel-buttons .cancel-button dso-icon,.filterpanel-buttons .cancel-button svg.di{margin-left:-8px;margin-right:8px}.filterpanel-buttons .cancel-button span+dso-icon,.filterpanel-buttons .cancel-button span+svg.di{margin-left:8px;margin-right:-8px}.filterpanel-buttons .cancel-button dso-icon,.filterpanel-buttons .cancel-button svg.di,.filterpanel-buttons .cancel-button.extern::after,.filterpanel-buttons .cancel-button.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .apply-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#39870c;border-color:#39870c;color:#fff;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;line-height:16px}.filterpanel-buttons .apply-button:focus,.filterpanel-buttons .apply-button:focus-visible{outline-offset:2px}.filterpanel-buttons .apply-button:active{outline:0}.filterpanel-buttons .apply-button.extern::after,.filterpanel-buttons .apply-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.filterpanel-buttons .apply-button:hover{background-color:#275937;border-color:#275937;color:#fff}.filterpanel-buttons .apply-button:active{background-color:#15301e;border-color:#15301e;color:#fff}.filterpanel-buttons .apply-button[disabled],.filterpanel-buttons .apply-button[disabled]:hover{background-color:#afcf9d;border-color:#afcf9d;color:#fff}.filterpanel-buttons .apply-button.btn-sm{line-height:16px}.filterpanel-buttons .apply-button.btn-sm dso-icon,.filterpanel-buttons .apply-button.btn-sm svg.di,.filterpanel-buttons .apply-button.btn-sm.extern::after,.filterpanel-buttons .apply-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .apply-button.download::after{background:var(--dso-icon, var(--di-download-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.filterpanel-buttons .apply-button.extern::after{background:var(--dso-icon, var(--di-external-link-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.filterpanel-buttons .apply-button dso-icon,.filterpanel-buttons .apply-button svg.di{margin-left:-8px;margin-right:8px}.filterpanel-buttons .apply-button span+dso-icon,.filterpanel-buttons .apply-button span+svg.di{margin-left:8px;margin-right:-8px}.filterpanel-buttons .apply-button dso-icon,.filterpanel-buttons .apply-button svg.di,.filterpanel-buttons .apply-button.extern::after,.filterpanel-buttons .apply-button.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .cancel-button+.apply-button{margin-left:16px}";
|
|
6521
|
+
const viewerGridCss = "button {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\nh1,\n.h1,\nh2,\n.h2,\nh3,\n.h3 {\n margin-bottom: 16px;\n margin-top: 24px;\n}\n\nh1,\n.h1 {\n line-height: 1.25;\n}\n\nh1 {\n color: #275937;\n font-size: 2rem;\n font-weight: 700;\n}\n\nh2,\n.h2 {\n line-height: 1.33;\n}\n\nh2 {\n color: #275937;\n font-size: 1.5rem;\n font-weight: 700;\n}\n\nh3,\n.h3 {\n line-height: 1.2;\n}\n\nh3 {\n color: #275937;\n font-size: 1.25rem;\n font-weight: 600;\n}\n\nh4,\n.h4,\nh5,\n.h5,\nh6,\n.h6 {\n margin-bottom: 16px;\n margin-top: 12px;\n}\n\nh4,\n.h4 {\n line-height: 1.5;\n}\n\nh4 {\n color: #275937;\n font-size: 1rem;\n font-weight: 600;\n}\n\nh5,\n.h5 {\n line-height: 1.5;\n}\n\nh5 {\n color: #191919;\n font-size: 1rem;\n font-weight: 600;\n}\n\nh6,\n.h6 {\n line-height: 1.5;\n}\n\n*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host {\n display: flex;\n height: 100vh;\n overflow: hidden;\n position: relative;\n}\n\n:host([small]) .dso-map-panel {\n flex-basis: 375px;\n min-width: 0;\n max-width: 375px;\n}\n@media screen and (max-width: 375px) {\n :host([small]) .dso-map-panel {\n flex-basis: 100vw;\n max-width: 100vw;\n min-width: 0;\n transition: none;\n }\n}\n\n:host([medium]) .dso-map-panel {\n flex-basis: 624px;\n min-width: 375px;\n max-width: 624px;\n}\n@media screen and (max-width: 624px) {\n :host([medium]) .dso-map-panel {\n flex-basis: 100vw;\n max-width: 100vw;\n min-width: 375px;\n transition: none;\n }\n}\n\n:host([large]) .dso-map-panel {\n flex-basis: 60%;\n min-width: 768px;\n max-width: 1024px;\n}\n@media screen and (max-width: 768px) {\n :host([large]) .dso-map-panel {\n flex-basis: 100vw;\n max-width: 100vw;\n min-width: 768px;\n transition: none;\n }\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n outline: 0;\n}\n.shrink.extern::after, .shrink.download::after,\n.expand.extern::after,\n.expand.download::after,\n.overlay-close-button.extern::after,\n.overlay-close-button.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n color: #676cb0;\n text-decoration: underline;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n color: #676cb0;\n}\n.shrink.btn-align,\n.expand.btn-align,\n.overlay-close-button.btn-align {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\n}\n.shrink.extern::after, .shrink.download::after,\n.expand.extern::after,\n.expand.download::after,\n.overlay-close-button.extern::after,\n.overlay-close-button.download::after {\n position: relative;\n top: -2px;\n}\n.shrink.download::after,\n.expand.download::after,\n.overlay-close-button.download::after {\n background: var(--dso-icon, var(--di-download)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.shrink.download[disabled]::after,\n.expand.download[disabled]::after,\n.overlay-close-button.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\n.shrink.download:not([disabled]):hover::after, .shrink.download:not([disabled]):active::after,\n.expand.download:not([disabled]):hover::after,\n.expand.download:not([disabled]):active::after,\n.overlay-close-button.download:not([disabled]):hover::after,\n.overlay-close-button.download:not([disabled]):active::after {\n --dso-icon: var(--di-download-scampi);\n}\n.shrink.extern::after,\n.expand.extern::after,\n.overlay-close-button.extern::after {\n background: var(--dso-icon, var(--di-external-link)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.shrink.extern[disabled]::after,\n.expand.extern[disabled]::after,\n.overlay-close-button.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.shrink.extern:not([disabled]):hover::after, .shrink.extern:not([disabled]):active::after,\n.expand.extern:not([disabled]):hover::after,\n.expand.extern:not([disabled]):active::after,\n.overlay-close-button.extern:not([disabled]):hover::after,\n.overlay-close-button.extern:not([disabled]):active::after {\n --dso-icon: var(--di-external-link-scampi);\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n margin-left: 8px;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n cursor: pointer;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n display: none;\n}\n\n.overlay-close-button {\n position: absolute;\n top: 8px;\n right: 16px;\n}\n.overlay-close-button .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.dso-map-panel {\n background-color: #fff;\n box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 8px;\n position: relative;\n transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;\n z-index: 100;\n}\n.dso-map-panel .dso-filterblok-address {\n font-weight: bold;\n margin: 8px 0;\n}\n.dso-map-panel .main {\n height: 100%;\n overflow-y: scroll;\n padding: 8px 16px;\n}\n\n.sizing-buttons {\n left: calc(100% + 1px);\n overflow-x: hidden;\n padding: 0 4px 4px 0;\n position: absolute;\n top: 16px;\n transition: left 200ms ease-in;\n width: 44px;\n z-index: -1;\n}\n.sizing-buttons button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border: 0;\n padding: 8px;\n border-radius: 0;\n border-bottom-right-radius: 4px;\n border-top-right-radius: 4px;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n flex: 0 0 100%;\n height: 40px;\n min-width: auto;\n width: 40px;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible {\n outline-offset: 2px;\n}\n.sizing-buttons button:active {\n outline: 0;\n}\n.sizing-buttons button.extern::after, .sizing-buttons button.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.sizing-buttons button:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.sizing-buttons button:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.sizing-buttons button.btn-sm {\n line-height: 1rem;\n}\n.sizing-buttons button.btn-sm dso-icon,\n.sizing-buttons button.btn-sm svg.di, .sizing-buttons button.btn-sm.extern::after, .sizing-buttons button.btn-sm.download::after, .sizing-buttons button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button.download::after {\n background: var(--dso-icon, var(--di-download)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.sizing-buttons button.download:hover::after {\n --dso-icon: var(--di-download-wit);\n}\n.sizing-buttons button.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\n.sizing-buttons button.extern::after {\n background: var(--dso-icon, var(--di-external-link)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.sizing-buttons button.extern:hover::after {\n --dso-icon: var(--di-external-link-wit);\n}\n.sizing-buttons button.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.sizing-buttons button > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button:focus-visible {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n outline: none;\n}\n.sizing-buttons button:hover dso-icon {\n color: #fff;\n}\n\n.map {\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n#filterpanel,\n.overlay {\n background-color: #fff;\n height: 100%;\n overflow-y: auto;\n position: absolute;\n z-index: 101;\n}\n\n#filterpanel {\n box-shadow: 2px 0 5px #666;\n padding: 40px 16px 8px;\n left: 0;\n max-width: 896px;\n width: calc(100vw - 40px);\n}\n@media screen and (max-width: 768px) {\n #filterpanel {\n width: 100vw;\n }\n #filterpanel::before {\n display: none !important;\n }\n}\n#filterpanel::before {\n content: \"\";\n display: block;\n position: fixed;\n top: 0;\n bottom: 0;\n right: 0;\n left: 896px;\n background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 936px) {\n #filterpanel::before {\n left: auto;\n width: 40px;\n }\n}\n\n.overlay {\n box-shadow: -2px 0 5px #666;\n padding: 40px 16px 8px;\n right: 0;\n width: 624px;\n}\n@media screen and (max-width: 624px) {\n .overlay {\n width: 100vw;\n }\n}\n.overlay::before {\n content: \"\";\n display: block;\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 624px;\n background-color: rgba(0, 0, 0, 0.5);\n}\n\n.filterpanel-buttons {\n text-align: right;\n}\n.filterpanel-buttons .cancel-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n outline: 0;\n}\n.filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.filterpanel-buttons .cancel-button:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.filterpanel-buttons .cancel-button:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.btn-sm {\n line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.btn-sm dso-icon,\n.filterpanel-buttons .cancel-button.btn-sm svg.di, .filterpanel-buttons .cancel-button.btn-sm.extern::after, .filterpanel-buttons .cancel-button.btn-sm.download::after, .filterpanel-buttons .cancel-button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.download::after {\n background: var(--dso-icon, var(--di-download)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.filterpanel-buttons .cancel-button.download:hover::after {\n --dso-icon: var(--di-download-wit);\n}\n.filterpanel-buttons .cancel-button.download[disabled]::after {\n --dso-icon: var(--di-download-grasgroen-40);\n}\n.filterpanel-buttons .cancel-button.extern::after {\n background: var(--dso-icon, var(--di-external-link)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.filterpanel-buttons .cancel-button.extern:hover::after {\n --dso-icon: var(--di-external-link-wit);\n}\n.filterpanel-buttons .cancel-button.extern[disabled]::after {\n --dso-icon: var(--di-external-link-grasgroen-40);\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n line-height: 1rem;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n outline: 0;\n}\n.filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after {\n content: \"\";\n display: inline-block;\n height: 1.5em;\n margin-left: 8px;\n vertical-align: top;\n width: 1.5em;\n}\n.filterpanel-buttons .apply-button:hover {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n background-color: #15301e;\n border-color: #15301e;\n color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n background-color: #afcf9d;\n border-color: #afcf9d;\n color: #fff;\n}\n.filterpanel-buttons .apply-button.btn-sm {\n line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.btn-sm dso-icon,\n.filterpanel-buttons .apply-button.btn-sm svg.di, .filterpanel-buttons .apply-button.btn-sm.extern::after, .filterpanel-buttons .apply-button.btn-sm.download::after, .filterpanel-buttons .apply-button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button.download::after {\n background: var(--dso-icon, var(--di-download-wit)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.filterpanel-buttons .apply-button.extern::after {\n background: var(--dso-icon, var(--di-external-link-wit)) no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n margin-left: 16px;\n}";
|
|
6314
6522
|
|
|
6315
6523
|
const TRANSITION_TIME = 200; // Keep in sync with dso-viewer-grid.variables.scss:$dso-viewer-grid-transition-time;
|
|
6316
6524
|
let ViewerGrid = class extends HTMLElement {
|
|
@@ -6430,19 +6638,19 @@ let ViewerGrid = class extends HTMLElement {
|
|
|
6430
6638
|
|
|
6431
6639
|
const DsoAlert = /*@__PURE__*/proxyCustomElement(Alert, [1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]);
|
|
6432
6640
|
const DsoAttachmentsCounter = /*@__PURE__*/proxyCustomElement(AttachmentsCounter, [1,"dso-attachments-counter",{"count":[2]}]);
|
|
6433
|
-
const DsoAutosuggest = /*@__PURE__*/proxyCustomElement(Autosuggest, [6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]);
|
|
6641
|
+
const DsoAutosuggest = /*@__PURE__*/proxyCustomElement(Autosuggest, [6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]);
|
|
6434
6642
|
const DsoBadge = /*@__PURE__*/proxyCustomElement(Badge, [1,"dso-badge",{"status":[1]}]);
|
|
6435
6643
|
const DsoBanner = /*@__PURE__*/proxyCustomElement(Banner, [1,"dso-banner",{"status":[1]}]);
|
|
6436
6644
|
const DsoDatePicker = /*@__PURE__*/proxyCustomElement(DsoDatePicker$1, [2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32]},[[6,"click","handleDocumentClick"]]]);
|
|
6437
6645
|
const DsoDropdownMenu = /*@__PURE__*/proxyCustomElement(DropdownMenu, [1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]);
|
|
6438
|
-
const DsoHeader = /*@__PURE__*/proxyCustomElement(Header, [1,"dso-header",{"
|
|
6646
|
+
const DsoHeader = /*@__PURE__*/proxyCustomElement(Header, [1,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]);
|
|
6439
6647
|
const DsoHelpcenterPanel = /*@__PURE__*/proxyCustomElement(HelpcenterPanel, [1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]);
|
|
6440
6648
|
const DsoHighlightBox = /*@__PURE__*/proxyCustomElement(HighlightBox, [1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]);
|
|
6441
6649
|
const DsoIcon = /*@__PURE__*/proxyCustomElement(Icon, [1,"dso-icon",{"icon":[1]}]);
|
|
6442
|
-
const DsoImageOverlay = /*@__PURE__*/proxyCustomElement(ImageOverlay, [1,"dso-image-overlay",{"active":[32],"focused":[32]}]);
|
|
6650
|
+
const DsoImageOverlay = /*@__PURE__*/proxyCustomElement(ImageOverlay, [1,"dso-image-overlay",{"active":[32],"focused":[32],"zoomable":[32]},[[2,"load","loadListener"]]]);
|
|
6443
6651
|
const DsoInfo = /*@__PURE__*/proxyCustomElement(Info, [1,"dso-info",{"fixed":[516],"active":[516]}]);
|
|
6444
6652
|
const DsoInfoButton = /*@__PURE__*/proxyCustomElement(InfoButton, [1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]);
|
|
6445
|
-
const DsoLabel = /*@__PURE__*/proxyCustomElement(Label, [1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"
|
|
6653
|
+
const DsoLabel = /*@__PURE__*/proxyCustomElement(Label, [1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32]}]);
|
|
6446
6654
|
const DsoMapBaseLayers = /*@__PURE__*/proxyCustomElement(MapBaseLayers, [1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]);
|
|
6447
6655
|
const DsoMapControls = /*@__PURE__*/proxyCustomElement(MapControls, [1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]);
|
|
6448
6656
|
const DsoMapOverlays = /*@__PURE__*/proxyCustomElement(MapOverlays, [1,"dso-map-overlays",{"group":[1],"overlays":[16]}]);
|