@dso-toolkit/core 45.0.1 → 45.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-accordion-section.cjs.entry.js +110 -0
- package/dist/cjs/dso-accordion.cjs.entry.js +297 -0
- package/dist/cjs/dso-alert.cjs.entry.js +3 -3
- package/dist/cjs/dso-attachments-counter.cjs.entry.js +3 -3
- package/dist/cjs/dso-autosuggest.cjs.entry.js +1 -1
- package/dist/cjs/dso-badge.cjs.entry.js +1 -1
- package/dist/cjs/dso-banner.cjs.entry.js +2 -2
- package/dist/cjs/dso-date-picker.cjs.entry.js +1 -1
- package/dist/cjs/dso-dropdown-menu.cjs.entry.js +3 -3
- package/dist/cjs/dso-header.cjs.entry.js +6 -6
- package/dist/cjs/dso-helpcenter-panel.cjs.entry.js +59 -3
- package/dist/cjs/dso-highlight-box.cjs.entry.js +2 -2
- package/dist/cjs/dso-icon.cjs.entry.js +2 -2
- package/dist/cjs/dso-image-overlay.cjs.entry.js +11 -5
- package/dist/cjs/dso-info-button.cjs.entry.js +4 -3
- package/dist/cjs/dso-info_2.cjs.entry.js +3 -3
- package/dist/cjs/dso-label.cjs.entry.js +1 -1
- package/dist/cjs/dso-map-base-layers.cjs.entry.js +1 -1
- package/dist/cjs/dso-map-controls.cjs.entry.js +2 -2
- package/dist/cjs/dso-map-overlays.cjs.entry.js +1 -1
- package/dist/cjs/dso-ozon-content.cjs.entry.js +44 -9
- package/dist/cjs/dso-pagination.cjs.entry.js +98 -6
- package/dist/cjs/dso-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/dso-progress-indicator.cjs.entry.js +1 -1
- package/dist/cjs/dso-responsive-element.cjs.entry.js +6 -1
- package/dist/cjs/dso-toggletip.cjs.entry.js +2 -2
- package/dist/cjs/dso-toolkit.cjs.js +2 -2
- package/dist/cjs/dso-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/dso-tree-view.cjs.entry.js +1 -1
- package/dist/cjs/dso-viewer-grid.cjs.entry.js +11 -5
- package/dist/cjs/{focus-trap.esm-a85643b0.js → focus-trap.esm-e2addb10.js} +28 -11
- package/dist/cjs/{index-0a7c679a.js → index-4066351a.js} +7 -0
- package/dist/cjs/{index.esm-3520a2a6.js → index.esm-50325ea2.js} +110 -12
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/accordion/accordion.css +9 -0
- package/dist/collection/components/accordion/accordion.interfaces.js +1 -0
- package/dist/collection/components/accordion/accordion.js +260 -0
- package/dist/collection/components/accordion/accordion.template.js +26 -0
- package/dist/collection/components/accordion/components/accordion-section.css +221 -0
- package/dist/collection/components/accordion/components/accordion-section.js +292 -0
- package/dist/collection/components/alert/alert.css +4 -41
- package/dist/collection/components/alert/alert.js +1 -0
- package/dist/collection/components/attachments-counter/attachments-counter.css +0 -12
- package/dist/collection/components/attachments-counter/attachments-counter.js +2 -1
- package/dist/collection/components/banner/banner.css +0 -4
- package/dist/collection/components/dropdown-menu/dropdown-menu.css +0 -7
- package/dist/collection/components/header/header.css +20 -379
- package/dist/collection/components/header/header.js +22 -24
- package/dist/collection/components/helpcenter-panel/helpcenter-panel.css +3 -102
- package/dist/collection/components/helpcenter-panel/helpcenter-panel.js +71 -5
- package/dist/collection/components/highlight-box/highlight-box.css +0 -2
- package/dist/collection/components/image-overlay/image-overlay.css +37 -1134
- package/dist/collection/components/image-overlay/image-overlay.js +13 -3
- package/dist/collection/components/image-overlay/image-overlay.template.js +9 -1
- package/dist/collection/components/info/info.css +19 -1070
- package/dist/collection/components/info/info.js +1 -0
- package/dist/collection/components/info-button/info-button.css +8 -17
- package/dist/collection/components/info-button/info-button.js +9 -3
- package/dist/collection/components/map-controls/map-controls.css +20 -1172
- package/dist/collection/components/ozon-content/nodes/figuur.node.js +41 -6
- package/dist/collection/components/ozon-content/ozon-content.css +22 -41
- package/dist/collection/components/pagination/pagination.css +1 -0
- package/dist/collection/components/pagination/pagination.js +121 -13
- package/dist/collection/components/responsive-element/responsive-element.interfaces.js +1 -0
- package/dist/collection/components/responsive-element/responsive-element.js +48 -1
- package/dist/collection/components/responsive-element/responsive-element.template.js +4 -2
- package/dist/collection/components/toggletip/toggletip.css +4 -0
- package/dist/collection/components/viewer-grid/viewer-grid.css +34 -1220
- package/dist/collection/components/viewer-grid/viewer-grid.js +12 -1
- package/dist/custom-elements/index.d.ts +12 -0
- package/dist/custom-elements/index.js +1933 -1219
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/p-02b2e01c.entry.js +1 -0
- package/dist/dso-toolkit/{p-d780f9ff.entry.js → p-05a9e206.entry.js} +1 -1
- package/dist/dso-toolkit/p-22c35db5.js +5 -0
- package/dist/dso-toolkit/{p-361528b4.entry.js → p-2e74485e.entry.js} +1 -1
- package/dist/dso-toolkit/p-2f6b1092.entry.js +1 -0
- package/dist/dso-toolkit/{p-bf4d6f63.entry.js → p-3381c859.entry.js} +1 -1
- package/dist/dso-toolkit/{p-3799366e.entry.js → p-37a34037.entry.js} +1 -1
- package/dist/dso-toolkit/p-42450cfe.js +1 -0
- package/dist/dso-toolkit/p-4c44d27c.entry.js +1 -0
- package/dist/dso-toolkit/{p-91b6a181.entry.js → p-4fd140e9.entry.js} +1 -1
- package/dist/dso-toolkit/p-53c7bf4f.entry.js +1 -0
- package/dist/dso-toolkit/{p-d60876c2.entry.js → p-67b11174.entry.js} +1 -1
- package/dist/dso-toolkit/{p-e4bcafc4.entry.js → p-6cac0292.entry.js} +1 -1
- package/dist/dso-toolkit/p-7213783b.entry.js +1 -0
- package/dist/dso-toolkit/p-73bbb9a6.entry.js +1 -0
- package/dist/dso-toolkit/{p-16635f4b.entry.js → p-8515d157.entry.js} +1 -1
- package/dist/dso-toolkit/{p-375a2523.entry.js → p-93b53eb7.entry.js} +1 -1
- package/dist/dso-toolkit/p-ac0c0eee.entry.js +1 -0
- package/dist/dso-toolkit/p-b1a75b67.entry.js +1 -0
- package/dist/dso-toolkit/p-b6afe104.entry.js +1 -0
- package/dist/dso-toolkit/{p-590cbab6.entry.js → p-b9531adb.entry.js} +1 -1
- package/dist/dso-toolkit/p-c339891f.entry.js +1 -0
- package/dist/dso-toolkit/{p-6bc71e48.entry.js → p-d2255268.entry.js} +1 -1
- package/dist/dso-toolkit/p-d6192ab8.entry.js +1 -0
- package/dist/dso-toolkit/p-de50f5f1.entry.js +1 -0
- package/dist/dso-toolkit/p-e16b5d71.entry.js +1 -0
- package/dist/dso-toolkit/p-e2e2106e.entry.js +1 -0
- package/dist/dso-toolkit/p-ea1d4c81.entry.js +1 -0
- package/dist/dso-toolkit/{p-25f8dbc6.entry.js → p-ec3b8800.entry.js} +1 -1
- package/dist/dso-toolkit/p-efd815dc.entry.js +1 -0
- package/dist/dso-toolkit/p-f42d8240.entry.js +1 -0
- package/dist/dso-toolkit/p-f8b023c4.js +5 -0
- package/dist/esm/dso-accordion-section.entry.js +106 -0
- package/dist/esm/dso-accordion.entry.js +293 -0
- package/dist/esm/dso-alert.entry.js +3 -3
- package/dist/esm/dso-attachments-counter.entry.js +3 -3
- package/dist/esm/dso-autosuggest.entry.js +1 -1
- package/dist/esm/dso-badge.entry.js +1 -1
- package/dist/esm/dso-banner.entry.js +2 -2
- package/dist/esm/dso-date-picker.entry.js +1 -1
- package/dist/esm/dso-dropdown-menu.entry.js +3 -3
- package/dist/esm/dso-header.entry.js +6 -6
- package/dist/esm/dso-helpcenter-panel.entry.js +59 -3
- package/dist/esm/dso-highlight-box.entry.js +2 -2
- package/dist/esm/dso-icon.entry.js +2 -2
- package/dist/esm/dso-image-overlay.entry.js +11 -5
- package/dist/esm/dso-info-button.entry.js +4 -3
- package/dist/esm/dso-info_2.entry.js +3 -3
- package/dist/esm/dso-label.entry.js +1 -1
- package/dist/esm/dso-map-base-layers.entry.js +1 -1
- package/dist/esm/dso-map-controls.entry.js +2 -2
- package/dist/esm/dso-map-overlays.entry.js +1 -1
- package/dist/esm/dso-ozon-content.entry.js +44 -9
- package/dist/esm/dso-pagination.entry.js +98 -6
- package/dist/esm/dso-progress-bar.entry.js +1 -1
- package/dist/esm/dso-progress-indicator.entry.js +1 -1
- package/dist/esm/dso-responsive-element.entry.js +6 -1
- package/dist/esm/dso-toggletip.entry.js +2 -2
- package/dist/esm/dso-toolkit.js +2 -2
- package/dist/esm/dso-tooltip.entry.js +1 -1
- package/dist/esm/dso-tree-view.entry.js +1 -1
- package/dist/esm/dso-viewer-grid.entry.js +11 -5
- package/dist/esm/{focus-trap.esm-a01ad6c9.js → focus-trap.esm-e3b5bde3.js} +28 -11
- package/dist/esm/{index-1602fde1.js → index-771c1291.js} +7 -1
- package/dist/esm/{index.esm-45465af7.js → index.esm-4510c39e.js} +110 -12
- package/dist/esm/loader.js +2 -2
- package/dist/types/components/accordion/accordion.d.ts +32 -0
- package/dist/types/components/accordion/accordion.interfaces.d.ts +20 -0
- package/dist/types/components/accordion/accordion.template.d.ts +2 -0
- package/dist/types/components/accordion/components/accordion-section.d.ts +25 -0
- package/dist/types/components/helpcenter-panel/helpcenter-panel.d.ts +11 -0
- package/dist/types/components/image-overlay/image-overlay.d.ts +3 -0
- package/dist/types/components/info-button/info-button.d.ts +1 -0
- package/dist/types/components/ozon-content/nodes/figuur.node.d.ts +4 -1
- package/dist/types/components/pagination/pagination.d.ts +15 -0
- package/dist/types/components/responsive-element/responsive-element.d.ts +5 -2
- package/dist/types/components/responsive-element/responsive-element.interfaces.d.ts +5 -0
- package/dist/types/components/responsive-element/responsive-element.template.d.ts +1 -1
- package/dist/types/components.d.ts +99 -0
- package/package.json +4 -3
- package/readme.md +0 -7
- package/dist/collection/icon/dso-icon-sass-function.js +0 -42
- package/dist/dso-toolkit/dso-toolkit.css +0 -1
- package/dist/dso-toolkit/p-02272301.entry.js +0 -1
- package/dist/dso-toolkit/p-10a6db1a.entry.js +0 -1
- package/dist/dso-toolkit/p-131d54e3.js +0 -5
- package/dist/dso-toolkit/p-1450f113.entry.js +0 -1
- package/dist/dso-toolkit/p-15d0f2eb.entry.js +0 -1
- package/dist/dso-toolkit/p-3b5f957e.entry.js +0 -1
- package/dist/dso-toolkit/p-49938275.entry.js +0 -1
- package/dist/dso-toolkit/p-5a56d726.entry.js +0 -1
- package/dist/dso-toolkit/p-5e5fbd41.js +0 -5
- package/dist/dso-toolkit/p-68d49733.entry.js +0 -1
- package/dist/dso-toolkit/p-7b716383.entry.js +0 -1
- package/dist/dso-toolkit/p-b95bc2c7.entry.js +0 -1
- package/dist/dso-toolkit/p-c1070a58.entry.js +0 -1
- package/dist/dso-toolkit/p-c62606a3.js +0 -1
- package/dist/dso-toolkit/p-e7888d49.entry.js +0 -1
- package/dist/dso-toolkit/p-eb17d45e.entry.js +0 -1
- package/dist/dso-toolkit/p-f726111e.entry.js +0 -1
- package/dist/dso-toolkit/p-fd8a8509.entry.js +0 -1
- package/dist/types/icon/dso-icon-sass-function.d.ts +0 -4
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { r as registerInstance, h } from './index-
|
|
1
|
+
import { r as registerInstance, h } from './index-771c1291.js';
|
|
2
2
|
import { c as clsx } from './clsx.m-071989db.js';
|
|
3
3
|
|
|
4
|
-
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
|
|
4
|
+
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}: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.alert-success{color:#191919;background-color:#e4f1d4;border-color:#e4f1d4}.alert.alert-danger{color:#191919;background-color:#f5d8dc;border-color:#f5d8dc}.alert.alert-warning{color:#191919;background-color:#f8f6cc;border-color:#f8f6cc}.alert.alert-info{color:#191919;background-color:#e1ecf7;border-color:#e1ecf7}.alert dso-icon{left:15px;position:absolute;top:15px;height:32px;width:32px}";
|
|
5
5
|
|
|
6
6
|
let Alert = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -12,7 +12,7 @@ let Alert = class {
|
|
|
12
12
|
if (!status) {
|
|
13
13
|
throw new Error(`Invalid status ${this.status}`);
|
|
14
14
|
}
|
|
15
|
-
return (h("div", { class: clsx('alert', `alert-${this.status}`), role: this.roleAlert ? 'alert' : undefined }, h("span", { class: "sr-only" }, status, ":"), h("slot", null)));
|
|
15
|
+
return (h("div", { class: clsx('alert', `alert-${this.status}`), role: this.roleAlert ? 'alert' : undefined }, h("dso-icon", { icon: 'status-' + this.status }), h("span", { class: "sr-only" }, status, ":"), h("slot", null)));
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
Alert.statusMap = new Map([
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { r as registerInstance, h } from './index-
|
|
1
|
+
import { r as registerInstance, h } from './index-771c1291.js';
|
|
2
2
|
|
|
3
|
-
const attachmentsCounterCss = ":host{display:inline-block
|
|
3
|
+
const attachmentsCounterCss = ":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-attachments{color:var(--dso-attachments-counter-color, #666);display:inline-block;font-weight:400;text-decoration:none;white-space:nowrap}";
|
|
4
4
|
|
|
5
5
|
let AttachmentsCounter = class {
|
|
6
6
|
constructor(hostRef) {
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (h("span", { class: "dso-attachments" }, this.count, " ", h("span", { class: "sr-only" }, "bijlage", this.count !== 1 ? 'n' : '')));
|
|
10
|
+
return (h("span", { class: "dso-attachments" }, this.count, " ", h("span", { class: "sr-only" }, "bijlage", this.count !== 1 ? 'n' : ''), h("dso-icon", { icon: "paperclip" })));
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
13
|
AttachmentsCounter.style = attachmentsCounterCss;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, F as Fragment,
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-771c1291.js';
|
|
2
2
|
import { d as debounce_1 } from './index-f2bf58ce.js';
|
|
3
3
|
import { v as v4 } from './v4-fa4bb814.js';
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h } from './index-
|
|
1
|
+
import { r as registerInstance, h } from './index-771c1291.js';
|
|
2
2
|
import { c as clsx } from './clsx.m-071989db.js';
|
|
3
3
|
|
|
4
4
|
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:1px solid #666;border-radius:1em;color:#fff;display:inline-block;font-size:0.875em;line-height:1;min-width:1.5rem;padding:4px 8px;text-align:center}.dso-badge.badge-info{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.dso-badge.badge-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;border-color:#dcd400;color:#191919}.dso-badge.badge-danger{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;border-color:#191919;color:#191919}";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { r as registerInstance, h } from './index-
|
|
1
|
+
import { r as registerInstance, h } from './index-771c1291.js';
|
|
2
2
|
import { c as clsx } from './clsx.m-071989db.js';
|
|
3
3
|
|
|
4
|
-
const bannerCss = ":host{display:block
|
|
4
|
+
const bannerCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.dso-banner{padding:16px 0;position:relative}";
|
|
5
5
|
|
|
6
6
|
let Banner = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { h, r as registerInstance, c as createEvent, H as Host,
|
|
1
|
+
import { h, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-771c1291.js';
|
|
2
2
|
import { c as createIdentifier } from './create-identifier-22acd3a3.js';
|
|
3
3
|
|
|
4
4
|
var DaysOfWeek;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host,
|
|
2
|
-
import { t as tabbable } from './index.esm-
|
|
1
|
+
import { r as registerInstance, h, H as Host, a as getElement } from './index-771c1291.js';
|
|
2
|
+
import { t as tabbable } from './index.esm-4510c39e.js';
|
|
3
3
|
import { v as v4 } from './v4-fa4bb814.js';
|
|
4
4
|
|
|
5
|
-
const dropdownMenuCss = ":host(:focus){outline:none}:host{
|
|
5
|
+
const dropdownMenuCss = ":host(:focus){outline:none}:host{display:inline-block;position:relative}";
|
|
6
6
|
|
|
7
7
|
let DropdownMenu = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, F as Fragment,
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-771c1291.js';
|
|
2
2
|
import { c as clsx } from './clsx.m-071989db.js';
|
|
3
3
|
import { d as debounce_1 } from './index-f2bf58ce.js';
|
|
4
4
|
|
|
5
|
-
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 text-underline-position: under;\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[icon=chevron-left] + span:not(.sr-only),\n.login .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.login .dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.login .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.login .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.login .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.login .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.login .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\n.logout .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.logout .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.logout .dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.logout .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.logout .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.logout .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.logout .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.logout .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-left: 0;\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}\ndso-dropdown-menu > .dso-primary::after,\ndso-dropdown-menu > .dso-secondary::after,\ndso-dropdown-menu > .btn::after {\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 margin-left: 4px;\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}";
|
|
5
|
+
const headerCss = ".sc-dso-header-h{display:block}.dso-header.sc-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.sc-dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down.sc-dso-header{flex-wrap:nowrap}}.logo-container.sc-dso-header{display:flex;flex-wrap:wrap;padding-bottom:16px;padding-top:16px}@media screen and (max-width: 767px){.logo-container.sc-dso-header{max-width:200px}}@media screen and (min-width: 768px){.sub-logo.sc-dso-header{margin-left:24px}}@media screen and (max-width: 767px){.sub-logo.sc-dso-header{flex-basis:100%}}.login.sc-dso-header,.logout.sc-dso-header{margin-right:16px}.login.sc-dso-header .dso-tertiary.sc-dso-header,.logout.sc-dso-header .dso-tertiary.sc-dso-header{cursor:pointer;font-family:Asap, sans-serif;font-weight:600;vertical-align:text-bottom}.profile.sc-dso-header a.sc-dso-header,.logout.sc-dso-header a.sc-dso-header,.login.sc-dso-header a.sc-dso-header{text-decoration:none;color:#39870c;font-weight:600}.profile.sc-dso-header a.sc-dso-header:hover,.profile.sc-dso-header a.sc-dso-header:focus,.logout.sc-dso-header a.sc-dso-header:hover,.logout.sc-dso-header a.sc-dso-header:focus,.login.sc-dso-header a.sc-dso-header:hover,.login.sc-dso-header a.sc-dso-header:focus{text-decoration:none}.profile.sc-dso-header a.sc-dso-header:active,.logout.sc-dso-header a.sc-dso-header:active,.login.sc-dso-header a.sc-dso-header:active{text-decoration:underline}.dso-header-session.sc-dso-header{display:flex;margin-left:auto}.dso-header-session.sc-dso-header .profile.sc-dso-header a.sc-dso-header{margin-left:8px}.dso-header-session.sc-dso-header .profile.sc-dso-header+.logout.sc-dso-header{border-left:3px solid #ccc;margin-left:16px;padding-left:16px}.dso-navbar.sc-dso-header{flex-basis:100%}dso-dropdown-menu.sc-dso-header button.sc-dso-header{align-items:flex-end;background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;padding-right:32px}@media screen and (max-width: 767px){dso-dropdown-menu.sc-dso-header{top:12px}}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{border:0;border-radius:0}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header{width:320px}@media screen and (max-width: 991px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header{width:100%}}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header li.sc-dso-header a.sc-dso-header{color:#275937;font-size:1.25rem;padding:16px}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header li.sc-dso-header a.sc-dso-header:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header li.dso-active.sc-dso-header a.sc-dso-header{font-weight:600}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header li.sc-dso-header+li.sc-dso-header{border-top:1px solid #ccc}.dropdown.sc-dso-header{margin-left:auto}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{position:static}@media screen and (max-width: 767px){.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{margin-top:28px}}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{left:0;right:0;top:100%}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{color:#39870c;font-size:1rem;font-weight:600;line-height:normal;position:relative}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:50%;transform:translateY(-50%)}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.sc-dso-header{align-items:end;column-gap:32px;display:flex;list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.dso-nav.sc-dso-header>li.sc-dso-header{margin-bottom:4px}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header{display:block}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:visited{color:#275937}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header{margin-bottom:0}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header>a.sc-dso-header{border-bottom:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header{text-decoration:none;font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;white-space:nowrap}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:active{text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{top:calc(100% + 3px)}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{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.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:auto;transform:none}.dso-nav.dso-nav-sub.sc-dso-header>li.sc-dso-header{display:inline-block}.dso-nav.dso-nav-sub.sc-dso-header>li.sc-dso-header>a.sc-dso-header{text-decoration:none;font-size:1rem;margin-top:4px;padding:4px 8px 3px}.dso-nav.dso-nav-sub.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.dso-nav-sub.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.dso-nav-sub.sc-dso-header>li.sc-dso-header>a.sc-dso-header:active{text-decoration:underline}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header{margin-left:auto}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header dso-icon.sc-dso-header{height:1em;margin-right:8px;position:relative;top:-2px;width:1.2em}";
|
|
6
6
|
|
|
7
7
|
const minDesktopViewportWidth = 992;
|
|
8
8
|
let Header = class {
|
|
@@ -95,13 +95,13 @@ let Header = class {
|
|
|
95
95
|
return (h(Fragment, null, h("div", { class: clsx("dso-header", {
|
|
96
96
|
["use-drop-down"]: this.showDropDown,
|
|
97
97
|
["has-sub-logo"]: this.hasSubLogo,
|
|
98
|
-
}), 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",
|
|
98
|
+
}), 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", slot: "toggle" }, h("span", null, "Menu")), h("div", { class: "dso-dropdown-options" }, 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 &&
|
|
99
99
|
this.userProfileName &&
|
|
100
100
|
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
|
|
101
101
|
? h("a", { href: this.loginUrl, onClick: e => this.clickHandler(e, 'login', { url: this.loginUrl }) }, "Inloggen")
|
|
102
102
|
: h("button", { type: "button", onClick: e => this.clickHandler(e, 'login') }, "Inloggen"))), this.authStatus === 'loggedIn' && (h("li", null, this.logoutUrl
|
|
103
103
|
? h("a", { href: this.logoutUrl, onClick: e => this.clickHandler(e, 'logout', { url: this.logoutUrl }) }, "Uitloggen")
|
|
104
|
-
: h("button", { type: "button", onClick: e => this.clickHandler(e, 'logout') }, "Uitloggen"))))))))
|
|
104
|
+
: h("button", { type: "button", onClick: e => this.clickHandler(e, 'logout') }, "Uitloggen")))))))), !this.showDropDown && (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl &&
|
|
105
105
|
this.userProfileName &&
|
|
106
106
|
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
|
|
107
107
|
? h("a", { href: this.loginUrl, onClick: e => this.clickHandler(e, 'login', { url: this.loginUrl }) }, "Inloggen")
|
|
@@ -109,9 +109,9 @@ let Header = class {
|
|
|
109
109
|
? h("a", { href: this.logoutUrl, onClick: e => this.clickHandler(e, 'logout', { url: this.logoutUrl }) }, "Uitloggen")
|
|
110
110
|
: 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
|
|
111
111
|
.filter((_, index) => index < this.mainMenu.length - this.overflowMenuItems)
|
|
112
|
-
.map(this.MenuItem), this.overflowMenuItems > 0 && (h("li", null, h("dso-dropdown-menu", { "dropdown-align": "left" }, h("button", { type: "button",
|
|
112
|
+
.map(this.MenuItem), this.overflowMenuItems > 0 && (h("li", null, h("dso-dropdown-menu", { "dropdown-align": "left" }, h("button", { type: "button", slot: "toggle" }, h("span", null, "Meer")), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu && this.mainMenu
|
|
113
113
|
.filter((_, index) => index >= this.mainMenu.length - this.overflowMenuItems)
|
|
114
|
-
.map(this.MenuItem))))))
|
|
114
|
+
.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")))))))))));
|
|
115
115
|
}
|
|
116
116
|
get host() { return getElement(this); }
|
|
117
117
|
static get watchers() { return {
|
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
import { r as registerInstance, h, F as Fragment } from './index-
|
|
1
|
+
import { r as registerInstance, h, F as Fragment } from './index-771c1291.js';
|
|
2
|
+
import { c as createFocusTrap } from './focus-trap.esm-e3b5bde3.js';
|
|
3
|
+
import './index.esm-4510c39e.js';
|
|
2
4
|
|
|
3
|
-
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}";
|
|
5
|
+
const helpcenterPanelCss = ":host {\n display: block;\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 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: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 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: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 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 dso-icon {\n margin-left: 0;\n margin-right: 0;\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.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}";
|
|
4
6
|
|
|
5
7
|
const maxCssTransitionMilliseconds = 500;
|
|
6
8
|
let HelpcenterPanel = class {
|
|
7
9
|
constructor(hostRef) {
|
|
8
10
|
registerInstance(this, hostRef);
|
|
11
|
+
this.iframeLoaded = false;
|
|
9
12
|
this.label = "Hulp nodig";
|
|
10
13
|
this.visibility = "hidden";
|
|
11
14
|
this.isOpen = "close";
|
|
@@ -31,9 +34,62 @@ let HelpcenterPanel = class {
|
|
|
31
34
|
}, maxCssTransitionMilliseconds);
|
|
32
35
|
};
|
|
33
36
|
}
|
|
37
|
+
watchUrl(url) {
|
|
38
|
+
if (this.isOpen === 'open' && this.iframeUrl !== url) {
|
|
39
|
+
this.iframeUrl = url;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
watchIsOpen(isOpen) {
|
|
43
|
+
const body = document.querySelector('body');
|
|
44
|
+
if (isOpen === 'open') {
|
|
45
|
+
body === null || body === void 0 ? void 0 : body.style.setProperty('overflow', 'hidden');
|
|
46
|
+
if (this.iframeUrl !== this.url) {
|
|
47
|
+
this.iframeUrl = this.url;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
else {
|
|
51
|
+
body === null || body === void 0 ? void 0 : body.style.removeProperty('overflow');
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
keyDownListener(event) {
|
|
55
|
+
if (event.key === 'Escape' && this.isOpen === 'open') {
|
|
56
|
+
this.closeClick();
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
createTrap() {
|
|
60
|
+
var _a, _b;
|
|
61
|
+
if (!this.panelWrapperElement) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
this.trap = createFocusTrap(this.panelWrapperElement, {
|
|
65
|
+
allowOutsideClick: true,
|
|
66
|
+
tabbableOptions: {
|
|
67
|
+
getShadowRoot: true,
|
|
68
|
+
},
|
|
69
|
+
setReturnFocus: (_a = this.openButtonElement) !== null && _a !== void 0 ? _a : false,
|
|
70
|
+
initialFocus: (_b = this.closeButtonElement) !== null && _b !== void 0 ? _b : false,
|
|
71
|
+
}).activate();
|
|
72
|
+
}
|
|
73
|
+
componentDidRender() {
|
|
74
|
+
var _a;
|
|
75
|
+
if (this.isOpen === 'open' && this.iframeLoaded && !this.trap) {
|
|
76
|
+
this.createTrap();
|
|
77
|
+
}
|
|
78
|
+
else if (this.isOpen === 'close' && this.trap) {
|
|
79
|
+
(_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
|
|
80
|
+
delete this.trap;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
34
83
|
render() {
|
|
35
|
-
return (h(Fragment, null, h("button", { type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded":
|
|
84
|
+
return (h(Fragment, null, h("button", { type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded": this.isOpen === 'open' ? 'true' : 'false', "aria-haspopup": "dialog", "aria-controls": "dso-panel-wrapper", ref: element => this.openButtonElement = element }, h("dso-icon", { icon: "help" }), h("span", null, this.label)), h("div", { id: "dso-panel-wrapper", class: `wrapper ${this.visibility}`, ref: element => this.panelWrapperElement = element }, h("div", { class: "dimscreen", onClick: this.closeClick }), h("div", { class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe
|
|
85
|
+
?
|
|
86
|
+
h("iframe", { src: this.iframeUrl, tabindex: "0", onLoad: () => { this.createTrap(); this.iframeLoaded = true; } })
|
|
87
|
+
: h("div", null)), h("button", { type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick, "aria-expanded": this.isOpen === 'open' ? 'true' : 'false', "aria-controls": "dso-panel-wrapper", ref: element => this.closeButtonElement = element }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")))));
|
|
36
88
|
}
|
|
89
|
+
static get watchers() { return {
|
|
90
|
+
"url": ["watchUrl"],
|
|
91
|
+
"isOpen": ["watchIsOpen"]
|
|
92
|
+
}; }
|
|
37
93
|
};
|
|
38
94
|
HelpcenterPanel.style = helpcenterPanelCss;
|
|
39
95
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { r as registerInstance, h,
|
|
1
|
+
import { r as registerInstance, h, a as getElement } from './index-771c1291.js';
|
|
2
2
|
import { c as clsx } from './clsx.m-071989db.js';
|
|
3
3
|
|
|
4
|
-
const highlightBoxCss = ":host{
|
|
4
|
+
const highlightBoxCss = ":host{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}";
|
|
5
5
|
|
|
6
6
|
let HighlightBox = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h } from './index-
|
|
1
|
+
import { r as registerInstance, h } from './index-771c1291.js';
|
|
2
2
|
|
|
3
3
|
const air = `<svg id="air" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
4
4
|
<path fill="currentColor" d="M24,8h0a.6.6,0,0,1-.38.56l-.1,0h0A8.18,8.18,0,0,0,21,10c-.21.55.33,2.11.77,3a.61.61,0,0,1-.12.71.63.63,0,0,1-.39.17,4.8,4.8,0,0,0-4-2.15H17a4.58,4.58,0,0,0-.37-.69A3.07,3.07,0,0,0,19,8.62h0a2.24,2.24,0,0,0,.06-.52s0-.07,0-.1,0-.07,0-.1A2.24,2.24,0,0,0,19,7.38h0a3.07,3.07,0,0,0-6,0h0a2.24,2.24,0,0,0-.06.52s0,.07,0,.1,0,.06,0,.1a.77.77,0,0,0,0,.15,6.49,6.49,0,0,0-4.51.35l-.06,0A.61.61,0,0,1,8,8.09V8H8V7.91a.61.61,0,0,1,.37-.48l.11,0h0A13.68,13.68,0,0,0,11.08,6a9.37,9.37,0,0,0-.86-3,.62.62,0,0,1,.83-.81,9.12,9.12,0,0,0,2.8.89H14A6.79,6.79,0,0,0,15.42.42a.61.61,0,0,1,1.15,0,8.43,8.43,0,0,0,1.65,2.76h.13a7.76,7.76,0,0,0,2.58-.91.61.61,0,0,1,.84.81c-.44.89-1,2.45-.77,3a8.18,8.18,0,0,0,2.48,1.33h0l.1,0A.6.6,0,0,1,24,8ZM10.68,22.34a5.15,5.15,0,0,1-3.12,1,4.72,4.72,0,0,1-4.81-3.76l-.14-.45h-.5A2,2,0,0,1,0,17.24a2,2,0,0,1,2.11-1.92,2.17,2.17,0,0,1,1.32.43l.4.29.37-.32a5,5,0,0,1,2.18-1.09l.44-.24V14a4.17,4.17,0,0,1,4.35-4,4.24,4.24,0,0,1,4.3,3.43l.1.67.69-.25a3,3,0,0,1,1-.17A2.64,2.64,0,0,1,20,16.19a2.32,2.32,0,0,1,0,.46l-.08.38.38.18A2.93,2.93,0,0,1,22,19.83a3.12,3.12,0,0,1-3.24,3,3.52,3.52,0,0,1-1.71-.45L16.47,22l-.26.58a2.58,2.58,0,0,1-4.62,0l-.3-.68Z"/>
|
|
@@ -394,7 +394,7 @@ const sound = `<svg id="sound" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2
|
|
|
394
394
|
</svg>
|
|
395
395
|
`;
|
|
396
396
|
|
|
397
|
-
const statusDanger = `<svg id="status-danger
|
|
397
|
+
const statusDanger = `<svg id="status-danger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
398
398
|
<g>
|
|
399
399
|
<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"/>
|
|
400
400
|
<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"/>
|