@dso-toolkit/core 33.2.0 → 33.3.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-autosuggest.cjs.entry.js +2 -70
- package/dist/cjs/dso-date-picker.cjs.entry.js +2 -3
- package/dist/cjs/dso-dropdown-menu.cjs.entry.js +15 -4
- package/dist/cjs/dso-header.cjs.entry.js +101 -0
- package/dist/cjs/dso-info-button.cjs.entry.js +1 -1
- package/dist/cjs/dso-map-base-layers.cjs.entry.js +3 -4
- package/dist/cjs/dso-map-controls.cjs.entry.js +2 -2
- package/dist/cjs/dso-map-overlays.cjs.entry.js +5 -8
- package/dist/cjs/dso-toolkit.cjs.js +1 -1
- package/dist/cjs/dso-tooltip.cjs.entry.js +168 -75
- package/dist/cjs/index-794ad37a.js +72 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/date-picker/date-picker.js +2 -3
- package/dist/collection/components/dropdown-menu/dropdown-menu.js +15 -4
- package/dist/collection/components/header/header.css +439 -0
- package/dist/collection/components/header/header.js +294 -0
- package/dist/collection/components/header/header.template.js +32 -0
- package/dist/collection/components/info-button/info-button.css +1 -0
- package/dist/collection/components/map-base-layers/map-base-layers.js +6 -27
- package/dist/collection/components/map-controls/map-controls.css +18 -8
- package/dist/collection/components/map-controls/map-controls.js +10 -11
- package/dist/collection/components/map-controls/map-controls.template.js +5 -8
- package/dist/collection/components/map-overlays/map-overlays.js +9 -35
- package/dist/collection/components/tooltip/tooltip.css +34 -12
- package/dist/collection/components/tooltip/tooltip.js +19 -4
- package/dist/collection/components/tooltip/tooltip.template.js +3 -5
- package/dist/custom-elements/index.d.ts +6 -0
- package/dist/custom-elements/index.js +296 -102
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/p-1805f5b0.js +1 -0
- package/dist/dso-toolkit/p-22bc904d.entry.js +1 -0
- package/dist/dso-toolkit/{p-5665f1ee.entry.js → p-4a78a31b.entry.js} +1 -1
- package/dist/dso-toolkit/p-72e4484a.entry.js +1 -0
- package/dist/dso-toolkit/p-7a043467.entry.js +1 -0
- package/dist/dso-toolkit/p-99b93d2e.entry.js +5 -0
- package/dist/dso-toolkit/p-b3e6d377.entry.js +1 -0
- package/dist/dso-toolkit/p-da3be034.entry.js +1 -0
- package/dist/dso-toolkit/p-ec8b74f7.entry.js +1 -0
- package/dist/dso-toolkit/p-ff767c21.entry.js +1 -0
- package/dist/esm/dso-autosuggest.entry.js +1 -69
- package/dist/esm/dso-date-picker.entry.js +2 -3
- package/dist/esm/dso-dropdown-menu.entry.js +15 -4
- package/dist/esm/dso-header.entry.js +97 -0
- package/dist/esm/dso-info-button.entry.js +1 -1
- package/dist/esm/dso-map-base-layers.entry.js +3 -4
- package/dist/esm/dso-map-controls.entry.js +2 -2
- package/dist/esm/dso-map-overlays.entry.js +5 -8
- package/dist/esm/dso-toolkit.js +1 -1
- package/dist/esm/dso-tooltip.entry.js +168 -75
- package/dist/esm/index-f2bf58ce.js +70 -0
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/dropdown-menu/dropdown-menu.d.ts +1 -1
- package/dist/types/components/header/header.d.ts +36 -0
- package/dist/types/components/header/header.template.d.ts +2 -0
- package/dist/types/components/map-base-layers/map-base-layers.d.ts +3 -4
- package/dist/types/components/map-base-layers/map-base-layers.interfaces.d.ts +5 -1
- package/dist/types/components/map-controls/map-controls.template.d.ts +1 -1
- package/dist/types/components/map-overlays/map-overlays.d.ts +4 -4
- package/dist/types/components/map-overlays/map-overlays.interfaces.d.ts +6 -1
- package/dist/types/components/tooltip/tooltip.d.ts +1 -0
- package/dist/types/components.d.ts +34 -8
- package/package.json +3 -2
- package/dist/dso-toolkit/p-08427682.entry.js +0 -1
- package/dist/dso-toolkit/p-731a9631.entry.js +0 -1
- package/dist/dso-toolkit/p-741e96de.entry.js +0 -5
- package/dist/dso-toolkit/p-759920d0.entry.js +0 -1
- package/dist/dso-toolkit/p-e4269e02.entry.js +0 -1
- package/dist/dso-toolkit/p-e7700d9e.entry.js +0 -1
- package/dist/dso-toolkit/p-fd5e24c9.entry.js +0 -1
|
@@ -3,77 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-fcdfdd38.js');
|
|
6
|
+
const index$1 = require('./index-794ad37a.js');
|
|
6
7
|
const v4 = require('./v4-8e8d6fbc.js');
|
|
7
8
|
|
|
8
|
-
/**
|
|
9
|
-
* Returns a function, that, as long as it continues to be invoked, will not
|
|
10
|
-
* be triggered. The function will be called after it stops being called for
|
|
11
|
-
* N milliseconds. If `immediate` is passed, trigger the function on the
|
|
12
|
-
* leading edge, instead of the trailing. The function also has a property 'clear'
|
|
13
|
-
* that is a function which will clear the timer to prevent previously scheduled executions.
|
|
14
|
-
*
|
|
15
|
-
* @source underscore.js
|
|
16
|
-
* @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/
|
|
17
|
-
* @param {Function} function to wrap
|
|
18
|
-
* @param {Number} timeout in ms (`100`)
|
|
19
|
-
* @param {Boolean} whether to execute at the beginning (`false`)
|
|
20
|
-
* @api public
|
|
21
|
-
*/
|
|
22
|
-
function debounce(func, wait, immediate){
|
|
23
|
-
var timeout, args, context, timestamp, result;
|
|
24
|
-
if (null == wait) wait = 100;
|
|
25
|
-
|
|
26
|
-
function later() {
|
|
27
|
-
var last = Date.now() - timestamp;
|
|
28
|
-
|
|
29
|
-
if (last < wait && last >= 0) {
|
|
30
|
-
timeout = setTimeout(later, wait - last);
|
|
31
|
-
} else {
|
|
32
|
-
timeout = null;
|
|
33
|
-
if (!immediate) {
|
|
34
|
-
result = func.apply(context, args);
|
|
35
|
-
context = args = null;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
var debounced = function(){
|
|
40
|
-
context = this;
|
|
41
|
-
args = arguments;
|
|
42
|
-
timestamp = Date.now();
|
|
43
|
-
var callNow = immediate && !timeout;
|
|
44
|
-
if (!timeout) timeout = setTimeout(later, wait);
|
|
45
|
-
if (callNow) {
|
|
46
|
-
result = func.apply(context, args);
|
|
47
|
-
context = args = null;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
return result;
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
debounced.clear = function() {
|
|
54
|
-
if (timeout) {
|
|
55
|
-
clearTimeout(timeout);
|
|
56
|
-
timeout = null;
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
debounced.flush = function() {
|
|
61
|
-
if (timeout) {
|
|
62
|
-
result = func.apply(context, args);
|
|
63
|
-
context = args = null;
|
|
64
|
-
|
|
65
|
-
clearTimeout(timeout);
|
|
66
|
-
timeout = null;
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
return debounced;
|
|
71
|
-
}
|
|
72
|
-
// Adds compatibility for ES modules
|
|
73
|
-
debounce.debounce = debounce;
|
|
74
|
-
|
|
75
|
-
var debounce_1 = debounce;
|
|
76
|
-
|
|
77
9
|
function escapeStringRegexp(string) {
|
|
78
10
|
if (typeof string !== 'string') {
|
|
79
11
|
throw new TypeError('Expected a string');
|
|
@@ -106,7 +38,7 @@ let Autosuggest = class {
|
|
|
106
38
|
this.listboxId = v4.v4();
|
|
107
39
|
this.inputId = v4.v4();
|
|
108
40
|
this.labelId = v4.v4();
|
|
109
|
-
this.debouncedEmitValue = debounce_1((value) => this.changeEmitter.emit(value), 200);
|
|
41
|
+
this.debouncedEmitValue = index$1.debounce_1((value) => this.changeEmitter.emit(value), 200);
|
|
110
42
|
this.onInput = (event) => {
|
|
111
43
|
if (!(event.target instanceof HTMLInputElement)) {
|
|
112
44
|
throw new Error("event.target is not instanceof HTMLInputElement");
|
|
@@ -244,7 +244,7 @@ const localization = {
|
|
|
244
244
|
]
|
|
245
245
|
};
|
|
246
246
|
|
|
247
|
-
const datePickerCss = "
|
|
247
|
+
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__input.sc-dso-date-picker{display:block;width:100%;height:40px;padding:6px 14px;font-size:16px;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:40px}.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:2}.dso-date__toggle.sc-dso-date-picker:disabled{color:#afcf9d;cursor:pointer}.dso-date__dialog.sc-dso-date-picker{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:600}@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:auto;right:0;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:600}@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:1}.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:2}.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:1}.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}";
|
|
248
248
|
|
|
249
249
|
function range(from, to) {
|
|
250
250
|
var result = [];
|
|
@@ -491,13 +491,12 @@ let DsoDatePicker = class {
|
|
|
491
491
|
* Component event handling.
|
|
492
492
|
*/
|
|
493
493
|
handleDocumentClick(e) {
|
|
494
|
-
var _a;
|
|
495
494
|
if (!this.open) {
|
|
496
495
|
return;
|
|
497
496
|
}
|
|
498
497
|
const path = e.composedPath();
|
|
499
498
|
for (const target of path) {
|
|
500
|
-
if (target instanceof Node &&
|
|
499
|
+
if (target instanceof Node && this.element.contains(target)) {
|
|
501
500
|
return;
|
|
502
501
|
}
|
|
503
502
|
}
|
|
@@ -325,9 +325,6 @@ let DropdownMenu = class {
|
|
|
325
325
|
this.openPopup();
|
|
326
326
|
}
|
|
327
327
|
}
|
|
328
|
-
componentDidRender() {
|
|
329
|
-
this.host.setAttribute("tabindex", "-1");
|
|
330
|
-
}
|
|
331
328
|
componentWillRender() {
|
|
332
329
|
for (const li of Array.from(this.host.getElementsByTagName("li"))) {
|
|
333
330
|
for (const tab of tabbable(li)) {
|
|
@@ -342,6 +339,7 @@ let DropdownMenu = class {
|
|
|
342
339
|
}
|
|
343
340
|
}
|
|
344
341
|
openPopup() {
|
|
342
|
+
this.host.setAttribute("tabindex", "-1");
|
|
345
343
|
this.host.addEventListener("keydown", this.keyDownListener);
|
|
346
344
|
this.host.addEventListener("focusout", this.focusOutListener);
|
|
347
345
|
this.button.setAttribute("aria-expanded", "true");
|
|
@@ -351,11 +349,24 @@ let DropdownMenu = class {
|
|
|
351
349
|
this.host.removeEventListener("keydown", this.keyDownListener);
|
|
352
350
|
this.host.removeEventListener("focusout", this.focusOutListener);
|
|
353
351
|
this.button.setAttribute("aria-expanded", "false");
|
|
352
|
+
this.host.removeAttribute("tabindex");
|
|
354
353
|
this.tabbables.forEach((tabbable) => tabbable.removeEventListener("click", this.escape));
|
|
355
354
|
}
|
|
355
|
+
getActiveElement(root = document) {
|
|
356
|
+
const activeEl = root.activeElement;
|
|
357
|
+
if (!activeEl) {
|
|
358
|
+
return null;
|
|
359
|
+
}
|
|
360
|
+
if (activeEl.shadowRoot) {
|
|
361
|
+
return this.getActiveElement(activeEl.shadowRoot);
|
|
362
|
+
}
|
|
363
|
+
else {
|
|
364
|
+
return activeEl;
|
|
365
|
+
}
|
|
366
|
+
}
|
|
356
367
|
tabInPopup(direction) {
|
|
357
368
|
const tabs = this.tabbables;
|
|
358
|
-
const currentIndex = tabs.findIndex((e) => e ===
|
|
369
|
+
const currentIndex = tabs.findIndex((e) => e === this.getActiveElement());
|
|
359
370
|
let nextIndex = currentIndex + direction;
|
|
360
371
|
if (nextIndex >= tabs.length) {
|
|
361
372
|
nextIndex = 0;
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-fcdfdd38.js');
|
|
6
|
+
const clsx_m = require('./clsx.m-b00fa5e1.js');
|
|
7
|
+
const index$1 = require('./index-794ad37a.js');
|
|
8
|
+
|
|
9
|
+
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}@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 (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:1.5em;vertical-align:top;width:1.5em}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:1.5em;vertical-align:top;width:1.5em}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:1.5em;vertical-align:top;width:1.5em;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:1000}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: 991px){dso-dropdown-menu[dropdown-align=right] .dso-dropdown-options{right:-16px}}@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:100vw}}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.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{top:28px}}.dropdown dso-dropdown-menu .dso-dropdown-options{top:calc(100% + 29px)}@media screen and (max-width: 767px){.dropdown dso-dropdown-menu .dso-dropdown-options{top:72px}}.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}.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}";
|
|
10
|
+
|
|
11
|
+
const minDesktopViewportWidth = 992;
|
|
12
|
+
let Header = class {
|
|
13
|
+
constructor(hostRef) {
|
|
14
|
+
index.registerInstance(this, hostRef);
|
|
15
|
+
this.useDropDownMenu = "auto";
|
|
16
|
+
this.showDropDown = false;
|
|
17
|
+
this.isLoggedIn = false;
|
|
18
|
+
this.hasSubLogo = false;
|
|
19
|
+
this.overflowMenuItems = 0;
|
|
20
|
+
this.onWindowResize = index$1.debounce_1(() => {
|
|
21
|
+
this.setDropDownMenu();
|
|
22
|
+
this.setOverflowMenu();
|
|
23
|
+
}, 100);
|
|
24
|
+
}
|
|
25
|
+
watchUseDropDownMenu(value) {
|
|
26
|
+
if (value === "auto") {
|
|
27
|
+
this.setDropDownMenu();
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
this.showDropDown = value === "always";
|
|
31
|
+
}
|
|
32
|
+
componentWillLoad() {
|
|
33
|
+
this.hasSubLogo = this.host.querySelector("*[slot = 'sub-logo']") !== null;
|
|
34
|
+
}
|
|
35
|
+
shrinkMenuToFit() {
|
|
36
|
+
if (!this.wrapper || !this.nav) {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
if (this.wrapper.clientWidth >= this.nav.clientWidth) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
if (this.overflowMenuItems >= this.mainMenu.length) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
this.overflowMenuItems++;
|
|
46
|
+
}
|
|
47
|
+
componentDidRender() {
|
|
48
|
+
if (this.showDropDown) {
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
window.setTimeout(() => this.shrinkMenuToFit(), 0);
|
|
52
|
+
}
|
|
53
|
+
setOverflowMenu() {
|
|
54
|
+
if (this.showDropDown) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
if (this.overflowMenuItems != 0) {
|
|
58
|
+
this.overflowMenuItems = 0;
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
this.shrinkMenuToFit();
|
|
62
|
+
}
|
|
63
|
+
setDropDownMenu() {
|
|
64
|
+
if (this.useDropDownMenu !== "auto") {
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
this.showDropDown = window.innerWidth < minDesktopViewportWidth;
|
|
68
|
+
}
|
|
69
|
+
connectedCallback() {
|
|
70
|
+
window.addEventListener("resize", this.onWindowResize);
|
|
71
|
+
}
|
|
72
|
+
disconnectedCallback() {
|
|
73
|
+
window.removeEventListener("resize", this.onWindowResize);
|
|
74
|
+
}
|
|
75
|
+
MenuItem(item) {
|
|
76
|
+
return (index.h("li", { class: item.active ? "dso-active" : undefined }, index.h("a", { href: item.url, "aria-current": item.active ? "page" : undefined }, item.label)));
|
|
77
|
+
}
|
|
78
|
+
render() {
|
|
79
|
+
return (index.h(index.Fragment, null, index.h("div", { class: clsx_m.clsx("dso-header", {
|
|
80
|
+
["use-drop-down"]: this.showDropDown,
|
|
81
|
+
["has-sub-logo"]: this.hasSubLogo,
|
|
82
|
+
}), ref: (element) => (this.wrapper = element) }, index.h("div", { class: "logo-container" }, index.h("div", { class: "logo" }, index.h("slot", { name: "logo" })), index.h("div", { class: "sub-logo" }, index.h("slot", { name: "sub-logo" }))), this.showDropDown && (index.h("div", { class: "dropdown" }, index.h("dso-dropdown-menu", { "dropdown-align": "right" }, index.h("button", { type: "button", class: "tertiary", slot: "toggle" }, index.h("span", null, "Menu")), index.h("div", { class: "dso-dropdown-options" }, index.h("dso-dropdown-options", null, index.h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (index.h("li", null, index.h("a", { href: this.userHomeUrl }, "Mijn Omgevingsloket"))), this.loginUrl && !this.isLoggedIn && (index.h("li", null, index.h("a", { href: this.loginUrl }, "Inloggen"))), this.userProfileUrl &&
|
|
83
|
+
this.userProfileName &&
|
|
84
|
+
this.isLoggedIn && (index.h("li", null, index.h("a", { href: this.userProfileUrl }, this.userProfileName, index.h("span", { class: "profile-label" }, "- Mijn profiel")))), this.logoutUrl && this.isLoggedIn && (index.h("li", null, index.h("a", { href: this.logoutUrl }, "Uitloggen"))))))))), !this.showDropDown && (index.h(index.Fragment, null, index.h("div", { class: "dso-header-session" }, this.userProfileUrl &&
|
|
85
|
+
this.userProfileName &&
|
|
86
|
+
this.isLoggedIn && (index.h("div", { class: "profile" }, index.h("span", { class: "profile-label" }, "Welkom:"), index.h("a", { href: this.userProfileUrl }, this.userProfileName))), this.loginUrl && !this.isLoggedIn && (index.h("div", { class: "login" }, index.h("a", { href: this.loginUrl }, "Inloggen"))), this.logoutUrl && this.isLoggedIn && (index.h("div", { class: "logout" }, index.h("a", { href: this.logoutUrl }, "Uitloggen")))), index.h("nav", { class: "dso-navbar" }, index.h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu
|
|
87
|
+
.filter((_, index) => index < this.mainMenu.length - this.overflowMenuItems)
|
|
88
|
+
.map(this.MenuItem), this.overflowMenuItems > 0 && (index.h("li", null, index.h("dso-dropdown-menu", { "dropdown-align": "left" }, index.h("button", { type: "button", class: "tertiary", slot: "toggle" }, index.h("span", null, "Meer")), index.h("div", { class: "dso-dropdown-options" }, index.h("dso-dropdown-options", null, index.h("ul", null, this.mainMenu
|
|
89
|
+
.filter((_, index) => index >=
|
|
90
|
+
this.mainMenu.length -
|
|
91
|
+
this.overflowMenuItems)
|
|
92
|
+
.map(this.MenuItem))))))), this.userHomeUrl && (index.h("li", { class: "menu-user-home" }, index.h("a", { href: this.userHomeUrl }, index.h("dso-icon", { icon: "user-line" }), "Mijn Omgevingsloket"))))))))));
|
|
93
|
+
}
|
|
94
|
+
get host() { return index.getElement(this); }
|
|
95
|
+
static get watchers() { return {
|
|
96
|
+
"useDropDownMenu": ["watchUseDropDownMenu"]
|
|
97
|
+
}; }
|
|
98
|
+
};
|
|
99
|
+
Header.style = headerCss;
|
|
100
|
+
|
|
101
|
+
exports.dso_header = Header;
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-fcdfdd38.js');
|
|
6
6
|
const clsx_m = require('./clsx.m-b00fa5e1.js');
|
|
7
7
|
|
|
8
|
-
const infoButtonCss = ":host{display:inline-block;--di-info:url(\"data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.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'/%3e %3c/svg%3e\");--di-info-active:url(\"data:image/svg+xml,%3csvg id='info-active' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M23%2c12A11%2c11%2c0%2c1%2c1%2c12%2c1%2c11%2c11%2c0%2c0%2c1%2c23%2c12ZM12%2c9a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.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'/%3e %3c/svg%3e\");--di-info-secondary:url(\"data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.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'/%3e %3c/svg%3e\");--di-info-active-secondary:url(\"data:image/svg+xml,%3csvg id='info-active' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M23%2c12A11%2c11%2c0%2c1%2c1%2c12%2c1%2c11%2c11%2c0%2c0%2c1%2c23%2c12ZM12%2c9a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.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'/%3e %3c/svg%3e\")}*,*::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}button{background:var(--dso-icon, var(--di-info)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;border:1px solid transparent;margin-left:8px;padding:0}button.dso-open,button:hover,button:active{--dso-icon:var(--di-info-active)}button.dso-info-secondary{--dso-icon:var(--di-info-secondary)}button.dso-info-secondary.dso-open,button.dso-info-secondary:hover,button.dso-info-secondary:active{--dso-icon:var(--di-info-active-secondary)}";
|
|
8
|
+
const infoButtonCss = ":host{display:inline-block;--di-info:url(\"data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.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'/%3e %3c/svg%3e\");--di-info-active:url(\"data:image/svg+xml,%3csvg id='info-active' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M23%2c12A11%2c11%2c0%2c1%2c1%2c12%2c1%2c11%2c11%2c0%2c0%2c1%2c23%2c12ZM12%2c9a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.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'/%3e %3c/svg%3e\");--di-info-secondary:url(\"data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.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'/%3e %3c/svg%3e\");--di-info-active-secondary:url(\"data:image/svg+xml,%3csvg id='info-active' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M23%2c12A11%2c11%2c0%2c1%2c1%2c12%2c1%2c11%2c11%2c0%2c0%2c1%2c23%2c12ZM12%2c9a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.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'/%3e %3c/svg%3e\")}*,*::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}button{background:var(--dso-icon, var(--di-info)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;border:1px solid transparent;margin-left:8px;padding:0;cursor:pointer}button.dso-open,button:hover,button:active{--dso-icon:var(--di-info-active)}button.dso-info-secondary{--dso-icon:var(--di-info-secondary)}button.dso-info-secondary.dso-open,button.dso-info-secondary:hover,button.dso-info-secondary:active{--dso-icon:var(--di-info-active-secondary)}";
|
|
9
9
|
|
|
10
10
|
let InfoButton = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -11,12 +11,11 @@ let MapBaseLayers = class {
|
|
|
11
11
|
index.registerInstance(this, hostRef);
|
|
12
12
|
this.baseLayerChange = index.createEvent(this, "baseLayerChange", 7);
|
|
13
13
|
}
|
|
14
|
-
|
|
15
|
-
this.
|
|
16
|
-
this.baseLayerChange.emit(baseLayer);
|
|
14
|
+
baseLayerChangeHandler(baseLayer) {
|
|
15
|
+
this.baseLayerChange.emit({ activeBaseLayer: baseLayer });
|
|
17
16
|
}
|
|
18
17
|
render() {
|
|
19
|
-
return (index.h("fieldset", { class: "form-group dso-radios" }, index.h("legend", { class: "sr-only" }, "Achtergrond"), index.h("div", { class: "dso-label-container" }, index.h("span", { class: "control-label", "aria-hidden": "true" }, "Achtergrond")), index.h("div", { class: "dso-field-container" }, this.baseLayers.map(
|
|
18
|
+
return (index.h("fieldset", { class: "form-group dso-radios" }, index.h("legend", { class: "sr-only" }, "Achtergrond"), index.h("div", { class: "dso-label-container" }, index.h("span", { class: "control-label", "aria-hidden": "true" }, "Achtergrond")), index.h("div", { class: "dso-field-container" }, this.baseLayers.map(baseLayer => (index.h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name))))));
|
|
20
19
|
}
|
|
21
20
|
};
|
|
22
21
|
MapBaseLayers.style = mapBaseLayersCss;
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-fcdfdd38.js');
|
|
6
6
|
|
|
7
|
-
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}#
|
|
7
|
+
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:1.5em;vertical-align:top;width:1.5em}#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:1.5em;vertical-align:top;width:1.5em}#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:1.5em;vertical-align:top;width:1.5em}#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:1.5em;vertical-align:top;width:1.5em}#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:1.5em;vertical-align:top;width:1.5em}#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:1.5em;vertical-align:top;width:1.5em}#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}header,.content{padding:16px}header{border-bottom:1px solid #ccc;position:relative}header h2{color:#275937;font-family:\"Asap\", sans-serif;line-height:1;margin:0}";
|
|
8
8
|
|
|
9
9
|
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, privateMap) {
|
|
10
10
|
if (!privateMap.has(receiver)) {
|
|
@@ -44,7 +44,7 @@ let MapControls = class {
|
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
render() {
|
|
47
|
-
return (index.h(index.Host, null, index.h("
|
|
47
|
+
return (index.h(index.Host, null, index.h("button", { type: "button", id: "toggle-visibility-button", onClick: () => this.open = !this.open, ref: element => __classPrivateFieldSet(this, _toggleButtonElement, element) }, index.h("dso-icon", { icon: "layers" }), index.h("span", null, "Kaartlagen")), index.h("div", { id: "zoom-buttons" }, index.h("button", { type: "button", onClick: e => this.zoomIn.emit(e), disabled: this.disableZoom === 'in' || this.disableZoom === 'both' }, index.h("span", null, "Zoom in"), index.h("dso-icon", { icon: "plus" })), index.h("button", { type: "button", onClick: e => this.zoomOut.emit(e), disabled: this.disableZoom === 'out' || this.disableZoom === 'both' }, index.h("span", null, "Zoom uit"), index.h("dso-icon", { icon: "minus" }))), index.h("section", { hidden: this.hideContent }, index.h("header", null, index.h("h2", null, "Kaartlagen"), index.h("button", { type: "button", id: "close-button", onClick: () => this.open = false, ref: element => __classPrivateFieldSet(this, _closeButtonElement, element) }, index.h("span", null, "Sluit dialoog"), index.h("dso-icon", { icon: "times" }))), index.h("div", { class: "content" }, index.h("slot", null)))));
|
|
48
48
|
}
|
|
49
49
|
static get watchers() { return {
|
|
50
50
|
"open": ["watchOpen"]
|
|
@@ -9,17 +9,14 @@ const mapOverlaysCss = ":host{display:block}*,*::after,*::before{box-sizing:bord
|
|
|
9
9
|
let MapOverlays = class {
|
|
10
10
|
constructor(hostRef) {
|
|
11
11
|
index.registerInstance(this, hostRef);
|
|
12
|
-
this.
|
|
13
|
-
this.checkedOverlays = [];
|
|
12
|
+
this.toggleOverlay = index.createEvent(this, "toggleOverlay", 7);
|
|
14
13
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
: this.checkedOverlays.filter(o => o !== overlay);
|
|
19
|
-
this.checkedOverlaysChange.emit(this.checkedOverlays);
|
|
14
|
+
overlayChangeHandler(overlay, e) {
|
|
15
|
+
const checked = e.detail.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;
|
|
16
|
+
this.toggleOverlay.emit({ overlay, checked });
|
|
20
17
|
}
|
|
21
18
|
render() {
|
|
22
|
-
return (index.h("fieldset", { class: "form-group dso-checkboxes" }, index.h("legend", { class: "sr-only" }, "Kaartlagen"), index.h("div", { class: "dso-label-container" }, index.h("span", { class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), index.h("div", { class: "dso-field-container" }, this.overlays.map(overlay => (index.h("dso-selectable", { type: "checkbox", value: overlay.name, checked:
|
|
19
|
+
return (index.h("fieldset", { class: "form-group dso-checkboxes" }, index.h("legend", { class: "sr-only" }, "Kaartlagen"), index.h("div", { class: "dso-label-container" }, index.h("span", { class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), index.h("div", { class: "dso-field-container" }, this.overlays.map(overlay => (index.h("dso-selectable", { type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, onDsoChange: e => this.overlayChangeHandler(overlay, e) }, overlay.name))))));
|
|
23
20
|
}
|
|
24
21
|
};
|
|
25
22
|
MapOverlays.style = mapOverlaysCss;
|
|
@@ -15,5 +15,5 @@ const patchBrowser = () => {
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(options => {
|
|
18
|
-
return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16]
|
|
18
|
+
return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16]}]]],["dso-header.cjs",[[1,"dso-header",{"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"isLoggedIn":[4,"is-logged-in"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker.cjs",[[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],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2.cjs",[[1,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]]], options);
|
|
19
19
|
});
|