@dso-toolkit/core 34.0.0 → 34.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-date-picker.cjs.entry.js +47 -25
- package/dist/cjs/dso-map-controls.cjs.entry.js +1 -1
- package/dist/cjs/dso-viewer-grid.cjs.entry.js +2 -2
- package/dist/collection/components/date-picker/date-picker.css +3 -2
- package/dist/collection/components/date-picker/date-picker.js +47 -25
- package/dist/collection/components/date-picker/date-picker.template.js +2 -1
- package/dist/collection/components/map-controls/map-controls.css +12 -0
- package/dist/collection/components/viewer-grid/viewer-grid.css +157 -22
- package/dist/collection/components/viewer-grid/viewer-grid.js +3 -2
- package/dist/custom-elements/index.js +50 -28
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/{p-10aa1fba.entry.js → p-88bc5873.entry.js} +1 -1
- package/dist/dso-toolkit/p-94b79e43.entry.js +1 -0
- package/dist/dso-toolkit/p-b69134ed.entry.js +5 -0
- package/dist/esm/dso-date-picker.entry.js +47 -25
- package/dist/esm/dso-map-controls.entry.js +1 -1
- package/dist/esm/dso-viewer-grid.entry.js +2 -2
- package/dist/types/components/date-picker/date-picker.d.ts +3 -1
- package/dist/types/components/date-picker/date-picker.template.d.ts +1 -1
- package/package.json +1 -1
- package/dist/dso-toolkit/p-8f21d07d.entry.js +0 -5
- package/dist/dso-toolkit/p-a6c9e063.entry.js +0 -1
|
@@ -244,7 +244,7 @@ const localization = {
|
|
|
244
244
|
]
|
|
245
245
|
};
|
|
246
246
|
|
|
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
|
|
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{border-width:1px;display:flex;right:0;min-width:320px;opacity:0;position:absolute;top:100%;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;visibility:hidden;will-change:transform, opacity, visibility;z-index: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:-11px;right:auto;width:auto}.dso-date__dialog.is-active.sc-dso-date-picker{opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.dso-date__dialog-content.sc-dso-date-picker{background:#fff;border:1px solid rgba(0, 0, 0, 0.1);border-radius:4px;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);margin-left:auto;margin-right:-1px;margin-top:8px;max-width:310px;min-width:290px;padding:16px;position:relative;transform:none;width:100%;z-index: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 = [];
|
|
@@ -266,7 +266,7 @@ const keyCode = {
|
|
|
266
266
|
RIGHT: 39,
|
|
267
267
|
DOWN: 40,
|
|
268
268
|
};
|
|
269
|
-
const DISALLOWED_CHARACTERS = /[^0-9
|
|
269
|
+
const DISALLOWED_CHARACTERS = /[^0-9\-]+/g;
|
|
270
270
|
const TRANSITION_MS = 300;
|
|
271
271
|
let DsoDatePicker = class {
|
|
272
272
|
constructor(hostRef) {
|
|
@@ -478,7 +478,49 @@ let DsoDatePicker = class {
|
|
|
478
478
|
};
|
|
479
479
|
this.handleInputChange = (e) => {
|
|
480
480
|
const target = e.target;
|
|
481
|
-
this.setValue(target.value
|
|
481
|
+
this.setValue(target.value);
|
|
482
|
+
};
|
|
483
|
+
this.handleKeyPress = (e) => {
|
|
484
|
+
if (e.key.search(DISALLOWED_CHARACTERS) > -1) {
|
|
485
|
+
e.preventDefault();
|
|
486
|
+
}
|
|
487
|
+
};
|
|
488
|
+
this.prepareEvent = (value) => {
|
|
489
|
+
var event = {
|
|
490
|
+
component: "dso-date-picker",
|
|
491
|
+
value: "",
|
|
492
|
+
valueAsDate: undefined
|
|
493
|
+
};
|
|
494
|
+
if (value instanceof Date) {
|
|
495
|
+
event.valueAsDate = value;
|
|
496
|
+
}
|
|
497
|
+
else {
|
|
498
|
+
event.value = value;
|
|
499
|
+
event.valueAsDate = parseDutchDate(value);
|
|
500
|
+
}
|
|
501
|
+
if (event.valueAsDate) {
|
|
502
|
+
event.value = printDutchDate(event.valueAsDate);
|
|
503
|
+
}
|
|
504
|
+
if (!event.valueAsDate && this.required) {
|
|
505
|
+
event.error = "required";
|
|
506
|
+
}
|
|
507
|
+
if (event.value && !event.valueAsDate) {
|
|
508
|
+
event.error = "invalid";
|
|
509
|
+
}
|
|
510
|
+
if (event.valueAsDate && (this.min || this.max)) {
|
|
511
|
+
const min = parseDutchDate(this.min);
|
|
512
|
+
const max = parseDutchDate(this.max);
|
|
513
|
+
const clampValue = clamp(event.valueAsDate, min, max);
|
|
514
|
+
if (clampValue !== event.valueAsDate && clampValue === min) {
|
|
515
|
+
event.valueAsDate = undefined;
|
|
516
|
+
event.error = "min-range";
|
|
517
|
+
}
|
|
518
|
+
else if (clampValue !== event.valueAsDate && clampValue === max) {
|
|
519
|
+
event.valueAsDate = undefined;
|
|
520
|
+
event.error = "max-range";
|
|
521
|
+
}
|
|
522
|
+
}
|
|
523
|
+
return event;
|
|
482
524
|
};
|
|
483
525
|
this.processFocusedDayNode = (element) => {
|
|
484
526
|
this.focusedDayNode = element;
|
|
@@ -570,27 +612,7 @@ let DsoDatePicker = class {
|
|
|
570
612
|
this.focusedDay = clamp(day, parseDutchDate(this.min), parseDutchDate(this.max));
|
|
571
613
|
}
|
|
572
614
|
setValue(value) {
|
|
573
|
-
|
|
574
|
-
component: "dso-date-picker",
|
|
575
|
-
value: "",
|
|
576
|
-
valueAsDate: undefined
|
|
577
|
-
};
|
|
578
|
-
if (value instanceof Date) {
|
|
579
|
-
event.valueAsDate = value;
|
|
580
|
-
}
|
|
581
|
-
else {
|
|
582
|
-
event.value = value;
|
|
583
|
-
event.valueAsDate = parseDutchDate(value);
|
|
584
|
-
}
|
|
585
|
-
if (event.valueAsDate) {
|
|
586
|
-
event.value = printDutchDate(event.valueAsDate);
|
|
587
|
-
}
|
|
588
|
-
if (!event.valueAsDate && this.required) {
|
|
589
|
-
event.error = "required";
|
|
590
|
-
}
|
|
591
|
-
if (event.value && !event.valueAsDate) {
|
|
592
|
-
event.error = "invalid";
|
|
593
|
-
}
|
|
615
|
+
const event = this.prepareEvent(value);
|
|
594
616
|
this.value = event.value;
|
|
595
617
|
this.dateChange.emit(event);
|
|
596
618
|
}
|
|
@@ -625,7 +647,7 @@ let DsoDatePicker = class {
|
|
|
625
647
|
if (maxDate) {
|
|
626
648
|
maxYear = Math.min(maxYear, maxDate.getFullYear());
|
|
627
649
|
}
|
|
628
|
-
return (index.h(index.Host, null, index.h("div", { class: "dso-date" }, index.h("div", { class: "dso-date__input-wrapper" }, index.h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }), index.h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) }, index.h("span", { class: "dso-date__toggle-icon" }, index.h("dso-icon", { icon: "calendar" })), index.h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (index.h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), index.h("div", { class: {
|
|
650
|
+
return (index.h(index.Host, null, index.h("div", { class: "dso-date" }, index.h("div", { class: "dso-date__input-wrapper" }, index.h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onKeyPress: this.handleKeyPress, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }), index.h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) }, index.h("span", { class: "dso-date__toggle-icon" }, index.h("dso-icon", { icon: "calendar" })), index.h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (index.h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), index.h("div", { class: {
|
|
629
651
|
"dso-date__dialog": true,
|
|
630
652
|
"is-left": this.direction === "left",
|
|
631
653
|
"is-active": this.open,
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-5ea63531.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}#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}";
|
|
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}section{display:flex;flex-direction:column;height:100%}header,.content{padding:16px}header{border-bottom:1px solid #ccc;flex-grow:0;position:relative}header h2{color:#275937;font-family:\"Asap\", sans-serif;line-height:1;margin:0}.content{flex-grow:1;overflow-y:auto}";
|
|
8
8
|
|
|
9
9
|
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, privateMap) {
|
|
10
10
|
if (!privateMap.has(receiver)) {
|
|
@@ -712,7 +712,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
|
|
|
712
712
|
return trap;
|
|
713
713
|
};
|
|
714
714
|
|
|
715
|
-
const viewerGridCss = "*,*::after,*::before{box-sizing:border-box}:host{display:flex;height:100vh;overflow:hidden;position:relative}:host([small]) .
|
|
715
|
+
const viewerGridCss = "*,*::after,*::before{box-sizing:border-box}:host{display:flex;height:100vh;overflow:hidden;position:relative}:host([small]) .dso-map-panel{flex-basis:375px;min-width:0;max-width:375px}@media screen and (max-width: 375px){:host([small]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:0;transition:none}}:host([medium]) .dso-map-panel{flex-basis:624px;min-width:375px;max-width:624px}@media screen and (max-width: 624px){:host([medium]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:375px;transition:none}}:host([large]) .dso-map-panel{flex-basis:60%;min-width:768px;max-width:1024px}@media screen and (max-width: 768px){:host([large]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:768px;transition:none}}.shrink,.expand,.overlay-close-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;border:0;color:#39870c;line-height:1;padding:0;background-color:transparent}.shrink:focus,.shrink:focus-visible,.expand:focus,.expand:focus-visible,.overlay-close-button:focus,.overlay-close-button:focus-visible{outline-offset:2px}.shrink:active,.expand:active,.overlay-close-button:active{outline:0}.shrink.extern::after,.shrink.download::after,.expand.extern::after,.expand.download::after,.overlay-close-button.extern::after,.overlay-close-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.shrink[disabled],.expand[disabled],.overlay-close-button[disabled]{color:#afcf9d}.shrink:not([disabled]):hover,.expand:not([disabled]):hover,.overlay-close-button:not([disabled]):hover{color:#676cb0;text-decoration:underline}.shrink:not([disabled]):active,.expand:not([disabled]):active,.overlay-close-button:not([disabled]):active{color:#676cb0}.shrink.btn-align,.expand.btn-align,.overlay-close-button.btn-align{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}.shrink.extern::after,.shrink.download::after,.expand.extern::after,.expand.download::after,.overlay-close-button.extern::after,.overlay-close-button.download::after{position:relative;top:-2px}.shrink.download::after,.expand.download::after,.overlay-close-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.shrink.download[disabled]::after,.expand.download[disabled]::after,.overlay-close-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.shrink.download:not([disabled]):hover::after,.shrink.download:not([disabled]):active::after,.expand.download:not([disabled]):hover::after,.expand.download:not([disabled]):active::after,.overlay-close-button.download:not([disabled]):hover::after,.overlay-close-button.download:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}.shrink.extern::after,.expand.extern::after,.overlay-close-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.shrink.extern[disabled]::after,.expand.extern[disabled]::after,.overlay-close-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.shrink.extern:not([disabled]):hover::after,.shrink.extern:not([disabled]):active::after,.expand.extern:not([disabled]):hover::after,.expand.extern:not([disabled]):active::after,.overlay-close-button.extern:not([disabled]):hover::after,.overlay-close-button.extern:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}.shrink dso-icon+span:not(.sr-only),.shrink svg.di+span:not(.sr-only),.shrink span:not(.sr-only)+dso-icon,.shrink span:not(.sr-only)+svg.di,.expand dso-icon+span:not(.sr-only),.expand svg.di+span:not(.sr-only),.expand span:not(.sr-only)+dso-icon,.expand span:not(.sr-only)+svg.di,.overlay-close-button dso-icon+span:not(.sr-only),.overlay-close-button svg.di+span:not(.sr-only),.overlay-close-button span:not(.sr-only)+dso-icon,.overlay-close-button span:not(.sr-only)+svg.di{margin-left:8px}.shrink dso-icon,.shrink svg.di,.shrink span,.expand dso-icon,.expand svg.di,.expand span,.overlay-close-button dso-icon,.overlay-close-button svg.di,.overlay-close-button span{vertical-align:middle}.shrink:hover,.expand:hover,.overlay-close-button:hover{cursor:pointer}.shrink[disabled],.expand[disabled],.overlay-close-button[disabled]{display:none}.overlay-close-button{position:absolute;top:8px;right:16px}.overlay-close-button .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-map-panel{background-color:#fff;box-shadow:2px 0 8px 0 rgba(0, 0, 0, 0.4);flex-shrink:0;flex-grow:0;padding-right:8px;position:relative;transition:flex-basis 0.2s ease-in, max-width 0.2s ease-in, min-width 0.2s ease-in;z-index:1}.dso-map-panel .dso-filterblok-address{font-weight:bold;margin:8px 0}.dso-map-panel .main{height:100%;overflow-y:scroll;padding:8px 16px}.sizing-buttons{left:calc(100% + 1px);overflow-x:hidden;padding:0 4px 4px 0;position:absolute;top:16px;transition:left 0.2s ease-in;width:44px;z-index:-1}.sizing-buttons button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border:0;padding:8px;border-radius:0;border-bottom-right-radius:4px;border-top-right-radius:4px;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.4);flex:0 0 100%;height:40px;min-width:auto;width:40px}.sizing-buttons button:focus,.sizing-buttons button:focus-visible{outline-offset:2px}.sizing-buttons button:active{outline:0}.sizing-buttons button.extern::after,.sizing-buttons button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.sizing-buttons button:hover{background-color:#39870c;border-color:#39870c;color:#fff}.sizing-buttons button:active{background-color:#275937;border-color:#275937;color:#fff}.sizing-buttons button[disabled],.sizing-buttons button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.sizing-buttons button.btn-sm{line-height:16px}.sizing-buttons button.btn-sm dso-icon,.sizing-buttons button.btn-sm svg.di,.sizing-buttons button.btn-sm.extern::after,.sizing-buttons button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.sizing-buttons button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.sizing-buttons button.download:hover::after{--dso-icon:var(--di-download-wit)}.sizing-buttons button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.sizing-buttons button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.sizing-buttons button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.sizing-buttons button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.sizing-buttons button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sizing-buttons button:focus-visible{background-color:#39870c;border-color:#39870c;color:#fff;outline:none}.sizing-buttons button:hover dso-icon{color:#fff}.map{height:100%;width:100%;overflow:hidden}.overlay{background-color:#fff;box-shadow:-2px 0 5px #666;height:100%;overflow-y:auto;padding:40px 16px 8px;position:absolute;right:0;width:624px;z-index:2}";
|
|
716
716
|
|
|
717
717
|
let ViewerGrid = class {
|
|
718
718
|
constructor(hostRef) {
|
|
@@ -769,7 +769,7 @@ let ViewerGrid = class {
|
|
|
769
769
|
this.host.removeEventListener("keydown", this.keyDownListener);
|
|
770
770
|
}
|
|
771
771
|
render() {
|
|
772
|
-
return (index.h(index.Host, Object.assign({}, { [this.mainSize]: true }), index.h("div", { class: "
|
|
772
|
+
return (index.h(index.Host, Object.assign({}, { [this.mainSize]: true }), index.h("div", { class: "dso-map-panel" }, index.h("div", { class: "sizing-buttons" }, index.h("button", { type: "button", class: "shrink", disabled: this.mainSize == "small", onClick: this.shrinkMain }, index.h("dso-icon", { icon: "chevron-left" })), index.h("button", { type: "button", class: "expand", disabled: this.mainSize == "large", onClick: this.expandMain }, index.h("dso-icon", { icon: "chevron-right" }))), index.h("div", { class: "main" }, index.h("slot", { name: "main" }))), index.h("div", { class: "map" }, index.h("slot", { name: "map" })), index.h("div", { class: "overlay", hidden: !this.overlayOpen || !this.overlaySlot, ref: (element) => (this.overlay = element) }, index.h("button", { type: "button", class: "overlay-close-button", onClick: (e) => this.closeOverlay.emit(e) }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "sluiten")), index.h("slot", { name: "overlay" }))));
|
|
773
773
|
}
|
|
774
774
|
get host() { return index.getElement(this); }
|
|
775
775
|
};
|
|
@@ -104,6 +104,7 @@
|
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
.dso-date__dialog {
|
|
107
|
+
border-width: 1px;
|
|
107
108
|
display: flex;
|
|
108
109
|
right: 0;
|
|
109
110
|
min-width: 320px;
|
|
@@ -130,8 +131,8 @@
|
|
|
130
131
|
}
|
|
131
132
|
}
|
|
132
133
|
.dso-date__dialog.is-left {
|
|
133
|
-
left:
|
|
134
|
-
right:
|
|
134
|
+
left: -11px;
|
|
135
|
+
right: auto;
|
|
135
136
|
width: auto;
|
|
136
137
|
}
|
|
137
138
|
.dso-date__dialog.is-active {
|
|
@@ -23,7 +23,7 @@ const keyCode = {
|
|
|
23
23
|
RIGHT: 39,
|
|
24
24
|
DOWN: 40,
|
|
25
25
|
};
|
|
26
|
-
const DISALLOWED_CHARACTERS = /[^0-9
|
|
26
|
+
const DISALLOWED_CHARACTERS = /[^0-9\-]+/g;
|
|
27
27
|
const TRANSITION_MS = 300;
|
|
28
28
|
export class DsoDatePicker {
|
|
29
29
|
constructor() {
|
|
@@ -229,7 +229,49 @@ export class DsoDatePicker {
|
|
|
229
229
|
};
|
|
230
230
|
this.handleInputChange = (e) => {
|
|
231
231
|
const target = e.target;
|
|
232
|
-
this.setValue(target.value
|
|
232
|
+
this.setValue(target.value);
|
|
233
|
+
};
|
|
234
|
+
this.handleKeyPress = (e) => {
|
|
235
|
+
if (e.key.search(DISALLOWED_CHARACTERS) > -1) {
|
|
236
|
+
e.preventDefault();
|
|
237
|
+
}
|
|
238
|
+
};
|
|
239
|
+
this.prepareEvent = (value) => {
|
|
240
|
+
var event = {
|
|
241
|
+
component: "dso-date-picker",
|
|
242
|
+
value: "",
|
|
243
|
+
valueAsDate: undefined
|
|
244
|
+
};
|
|
245
|
+
if (value instanceof Date) {
|
|
246
|
+
event.valueAsDate = value;
|
|
247
|
+
}
|
|
248
|
+
else {
|
|
249
|
+
event.value = value;
|
|
250
|
+
event.valueAsDate = parseDutchDate(value);
|
|
251
|
+
}
|
|
252
|
+
if (event.valueAsDate) {
|
|
253
|
+
event.value = printDutchDate(event.valueAsDate);
|
|
254
|
+
}
|
|
255
|
+
if (!event.valueAsDate && this.required) {
|
|
256
|
+
event.error = "required";
|
|
257
|
+
}
|
|
258
|
+
if (event.value && !event.valueAsDate) {
|
|
259
|
+
event.error = "invalid";
|
|
260
|
+
}
|
|
261
|
+
if (event.valueAsDate && (this.min || this.max)) {
|
|
262
|
+
const min = parseDutchDate(this.min);
|
|
263
|
+
const max = parseDutchDate(this.max);
|
|
264
|
+
const clampValue = clamp(event.valueAsDate, min, max);
|
|
265
|
+
if (clampValue !== event.valueAsDate && clampValue === min) {
|
|
266
|
+
event.valueAsDate = undefined;
|
|
267
|
+
event.error = "min-range";
|
|
268
|
+
}
|
|
269
|
+
else if (clampValue !== event.valueAsDate && clampValue === max) {
|
|
270
|
+
event.valueAsDate = undefined;
|
|
271
|
+
event.error = "max-range";
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
return event;
|
|
233
275
|
};
|
|
234
276
|
this.processFocusedDayNode = (element) => {
|
|
235
277
|
this.focusedDayNode = element;
|
|
@@ -321,27 +363,7 @@ export class DsoDatePicker {
|
|
|
321
363
|
this.focusedDay = clamp(day, parseDutchDate(this.min), parseDutchDate(this.max));
|
|
322
364
|
}
|
|
323
365
|
setValue(value) {
|
|
324
|
-
|
|
325
|
-
component: "dso-date-picker",
|
|
326
|
-
value: "",
|
|
327
|
-
valueAsDate: undefined
|
|
328
|
-
};
|
|
329
|
-
if (value instanceof Date) {
|
|
330
|
-
event.valueAsDate = value;
|
|
331
|
-
}
|
|
332
|
-
else {
|
|
333
|
-
event.value = value;
|
|
334
|
-
event.valueAsDate = parseDutchDate(value);
|
|
335
|
-
}
|
|
336
|
-
if (event.valueAsDate) {
|
|
337
|
-
event.value = printDutchDate(event.valueAsDate);
|
|
338
|
-
}
|
|
339
|
-
if (!event.valueAsDate && this.required) {
|
|
340
|
-
event.error = "required";
|
|
341
|
-
}
|
|
342
|
-
if (event.value && !event.valueAsDate) {
|
|
343
|
-
event.error = "invalid";
|
|
344
|
-
}
|
|
366
|
+
const event = this.prepareEvent(value);
|
|
345
367
|
this.value = event.value;
|
|
346
368
|
this.dateChange.emit(event);
|
|
347
369
|
}
|
|
@@ -379,7 +401,7 @@ export class DsoDatePicker {
|
|
|
379
401
|
return (h(Host, null,
|
|
380
402
|
h("div", { class: "dso-date" },
|
|
381
403
|
h("div", { class: "dso-date__input-wrapper" },
|
|
382
|
-
h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }),
|
|
404
|
+
h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onKeyPress: this.handleKeyPress, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }),
|
|
383
405
|
h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) },
|
|
384
406
|
h("span", { class: "dso-date__toggle-icon" },
|
|
385
407
|
h("dso-icon", { icon: "calendar" })),
|
|
@@ -636,7 +658,7 @@ export class DsoDatePicker {
|
|
|
636
658
|
},
|
|
637
659
|
"complexType": {
|
|
638
660
|
"original": "DsoDatePickerChangeEvent",
|
|
639
|
-
"resolved": "{ component: \"dso-date-picker\"; valueAsDate: Date | undefined; value: string; error?: \"invalid\" | \"required\" | undefined; }",
|
|
661
|
+
"resolved": "{ component: \"dso-date-picker\"; valueAsDate: Date | undefined; value: string; error?: \"invalid\" | \"required\" | \"min-range\" | \"max-range\" | undefined; }",
|
|
640
662
|
"references": {
|
|
641
663
|
"DsoDatePickerChangeEvent": {
|
|
642
664
|
"location": "local"
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { html } from 'lit-html';
|
|
2
2
|
import { ifDefined } from 'lit-html/directives/if-defined';
|
|
3
|
-
export function datePickerTemplate({ id, onDateChange, value, min, max, disabled, autofocus }) {
|
|
3
|
+
export function datePickerTemplate({ id, onDateChange, value, min, max, disabled, autofocus, direction }) {
|
|
4
4
|
return html `
|
|
5
5
|
<dso-date-picker
|
|
6
6
|
@dateChange=${(e) => onDateChange(e)}
|
|
7
|
+
direction=${ifDefined(direction)}
|
|
7
8
|
identifier=${ifDefined(id)}
|
|
8
9
|
value=${ifDefined(value || undefined)}
|
|
9
10
|
min=${ifDefined(min || undefined)}
|
|
@@ -375,6 +375,12 @@ button::-moz-focus-inner {
|
|
|
375
375
|
border: 0;
|
|
376
376
|
}
|
|
377
377
|
|
|
378
|
+
section {
|
|
379
|
+
display: flex;
|
|
380
|
+
flex-direction: column;
|
|
381
|
+
height: 100%;
|
|
382
|
+
}
|
|
383
|
+
|
|
378
384
|
header,
|
|
379
385
|
.content {
|
|
380
386
|
padding: 16px;
|
|
@@ -382,6 +388,7 @@ header,
|
|
|
382
388
|
|
|
383
389
|
header {
|
|
384
390
|
border-bottom: 1px solid #ccc;
|
|
391
|
+
flex-grow: 0;
|
|
385
392
|
position: relative;
|
|
386
393
|
}
|
|
387
394
|
header h2 {
|
|
@@ -389,4 +396,9 @@ header h2 {
|
|
|
389
396
|
font-family: "Asap", sans-serif;
|
|
390
397
|
line-height: 1;
|
|
391
398
|
margin: 0;
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.content {
|
|
402
|
+
flex-grow: 1;
|
|
403
|
+
overflow-y: auto;
|
|
392
404
|
}
|
|
@@ -11,37 +11,45 @@
|
|
|
11
11
|
position: relative;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
:host([small]) .
|
|
14
|
+
:host([small]) .dso-map-panel {
|
|
15
15
|
flex-basis: 375px;
|
|
16
|
+
min-width: 0;
|
|
17
|
+
max-width: 375px;
|
|
16
18
|
}
|
|
17
19
|
@media screen and (max-width: 375px) {
|
|
18
|
-
:host([small]) .
|
|
19
|
-
transition: none;
|
|
20
|
+
:host([small]) .dso-map-panel {
|
|
20
21
|
flex-basis: 100vw;
|
|
22
|
+
max-width: 100vw;
|
|
23
|
+
min-width: 0;
|
|
24
|
+
transition: none;
|
|
21
25
|
}
|
|
22
26
|
}
|
|
23
27
|
|
|
24
|
-
:host([medium]) .
|
|
28
|
+
:host([medium]) .dso-map-panel {
|
|
25
29
|
flex-basis: 624px;
|
|
30
|
+
min-width: 375px;
|
|
31
|
+
max-width: 624px;
|
|
26
32
|
}
|
|
27
33
|
@media screen and (max-width: 624px) {
|
|
28
|
-
:host([medium]) .
|
|
29
|
-
transition: none;
|
|
34
|
+
:host([medium]) .dso-map-panel {
|
|
30
35
|
flex-basis: 100vw;
|
|
36
|
+
max-width: 100vw;
|
|
37
|
+
min-width: 375px;
|
|
38
|
+
transition: none;
|
|
31
39
|
}
|
|
32
40
|
}
|
|
33
41
|
|
|
34
|
-
:host([large]) .
|
|
42
|
+
:host([large]) .dso-map-panel {
|
|
35
43
|
flex-basis: 60%;
|
|
36
44
|
min-width: 768px;
|
|
37
45
|
max-width: 1024px;
|
|
38
46
|
}
|
|
39
47
|
@media screen and (max-width: 768px) {
|
|
40
|
-
:host([large]) .
|
|
41
|
-
transition: none;
|
|
48
|
+
:host([large]) .dso-map-panel {
|
|
42
49
|
flex-basis: 100vw;
|
|
43
|
-
|
|
44
|
-
|
|
50
|
+
max-width: 100vw;
|
|
51
|
+
min-width: 768px;
|
|
52
|
+
transition: none;
|
|
45
53
|
}
|
|
46
54
|
}
|
|
47
55
|
|
|
@@ -214,23 +222,150 @@
|
|
|
214
222
|
border: 0;
|
|
215
223
|
}
|
|
216
224
|
|
|
217
|
-
.
|
|
218
|
-
display: flex;
|
|
219
|
-
justify-content: flex-end;
|
|
220
|
-
margin-bottom: 8px;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
.main {
|
|
225
|
+
.dso-map-panel {
|
|
224
226
|
background-color: #fff;
|
|
225
|
-
box-shadow: 2px 0
|
|
227
|
+
box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);
|
|
226
228
|
flex-shrink: 0;
|
|
227
229
|
flex-grow: 0;
|
|
228
|
-
|
|
230
|
+
padding-right: 8px;
|
|
231
|
+
position: relative;
|
|
229
232
|
transition: flex-basis 0.2s ease-in, max-width 0.2s ease-in, min-width 0.2s ease-in;
|
|
230
|
-
padding: 8px 16px;
|
|
231
|
-
overflow-y: auto;
|
|
232
233
|
z-index: 1;
|
|
233
234
|
}
|
|
235
|
+
.dso-map-panel .dso-filterblok-address {
|
|
236
|
+
font-weight: bold;
|
|
237
|
+
margin: 8px 0;
|
|
238
|
+
}
|
|
239
|
+
.dso-map-panel .main {
|
|
240
|
+
height: 100%;
|
|
241
|
+
overflow-y: scroll;
|
|
242
|
+
padding: 8px 16px;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.sizing-buttons {
|
|
246
|
+
left: calc(100% + 1px);
|
|
247
|
+
overflow-x: hidden;
|
|
248
|
+
padding: 0 4px 4px 0;
|
|
249
|
+
position: absolute;
|
|
250
|
+
top: 16px;
|
|
251
|
+
transition: left 0.2s ease-in;
|
|
252
|
+
width: 44px;
|
|
253
|
+
z-index: -1;
|
|
254
|
+
}
|
|
255
|
+
.sizing-buttons button {
|
|
256
|
+
display: inline-block;
|
|
257
|
+
font-size: 1em;
|
|
258
|
+
font-weight: 500;
|
|
259
|
+
margin-bottom: 0;
|
|
260
|
+
text-decoration: none;
|
|
261
|
+
touch-action: manipulation;
|
|
262
|
+
text-align: left;
|
|
263
|
+
user-select: none;
|
|
264
|
+
vertical-align: middle;
|
|
265
|
+
background-color: #fff;
|
|
266
|
+
border-color: #39870c;
|
|
267
|
+
color: #39870c;
|
|
268
|
+
border-width: 1px;
|
|
269
|
+
border-style: solid;
|
|
270
|
+
border-radius: 4px;
|
|
271
|
+
line-height: 1.5;
|
|
272
|
+
min-width: 56px;
|
|
273
|
+
padding: 11px 15px;
|
|
274
|
+
border: 0;
|
|
275
|
+
padding: 8px;
|
|
276
|
+
border-radius: 0;
|
|
277
|
+
border-bottom-right-radius: 4px;
|
|
278
|
+
border-top-right-radius: 4px;
|
|
279
|
+
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
|
|
280
|
+
flex: 0 0 100%;
|
|
281
|
+
height: 40px;
|
|
282
|
+
min-width: auto;
|
|
283
|
+
width: 40px;
|
|
284
|
+
}
|
|
285
|
+
.sizing-buttons button:focus, .sizing-buttons button:focus-visible {
|
|
286
|
+
outline-offset: 2px;
|
|
287
|
+
}
|
|
288
|
+
.sizing-buttons button:active {
|
|
289
|
+
outline: 0;
|
|
290
|
+
}
|
|
291
|
+
.sizing-buttons button.extern::after, .sizing-buttons button.download::after {
|
|
292
|
+
content: "";
|
|
293
|
+
display: inline-block;
|
|
294
|
+
height: 1.5em;
|
|
295
|
+
margin-left: 8px;
|
|
296
|
+
vertical-align: top;
|
|
297
|
+
width: 1.5em;
|
|
298
|
+
}
|
|
299
|
+
.sizing-buttons button:hover {
|
|
300
|
+
background-color: #39870c;
|
|
301
|
+
border-color: #39870c;
|
|
302
|
+
color: #fff;
|
|
303
|
+
}
|
|
304
|
+
.sizing-buttons button:active {
|
|
305
|
+
background-color: #275937;
|
|
306
|
+
border-color: #275937;
|
|
307
|
+
color: #fff;
|
|
308
|
+
}
|
|
309
|
+
.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover {
|
|
310
|
+
background-color: #fff;
|
|
311
|
+
border-color: #afcf9d;
|
|
312
|
+
color: #afcf9d;
|
|
313
|
+
}
|
|
314
|
+
.sizing-buttons button.btn-sm {
|
|
315
|
+
line-height: 16px;
|
|
316
|
+
}
|
|
317
|
+
.sizing-buttons button.btn-sm dso-icon,
|
|
318
|
+
.sizing-buttons button.btn-sm svg.di, .sizing-buttons button.btn-sm.extern::after, .sizing-buttons button.btn-sm.download::after {
|
|
319
|
+
margin-bottom: -4px;
|
|
320
|
+
margin-top: -4px;
|
|
321
|
+
}
|
|
322
|
+
.sizing-buttons button.download::after {
|
|
323
|
+
background: var(--dso-icon, var(--di-download)) no-repeat;
|
|
324
|
+
background-position: center;
|
|
325
|
+
background-size: cover;
|
|
326
|
+
height: 1.5em;
|
|
327
|
+
vertical-align: top;
|
|
328
|
+
width: 1.5em;
|
|
329
|
+
}
|
|
330
|
+
.sizing-buttons button.download:hover::after {
|
|
331
|
+
--dso-icon: var(--di-download-wit);
|
|
332
|
+
}
|
|
333
|
+
.sizing-buttons button.download[disabled]::after {
|
|
334
|
+
--dso-icon: var(--di-download-grasgroen-40);
|
|
335
|
+
}
|
|
336
|
+
.sizing-buttons button.extern::after {
|
|
337
|
+
background: var(--dso-icon, var(--di-external-link)) no-repeat;
|
|
338
|
+
background-position: center;
|
|
339
|
+
background-size: cover;
|
|
340
|
+
height: 1.5em;
|
|
341
|
+
vertical-align: top;
|
|
342
|
+
width: 1.5em;
|
|
343
|
+
}
|
|
344
|
+
.sizing-buttons button.extern:hover::after {
|
|
345
|
+
--dso-icon: var(--di-external-link-wit);
|
|
346
|
+
}
|
|
347
|
+
.sizing-buttons button.extern[disabled]::after {
|
|
348
|
+
--dso-icon: var(--di-external-link-grasgroen-40);
|
|
349
|
+
}
|
|
350
|
+
.sizing-buttons button > span {
|
|
351
|
+
position: absolute;
|
|
352
|
+
width: 1px;
|
|
353
|
+
height: 1px;
|
|
354
|
+
padding: 0;
|
|
355
|
+
margin: -1px;
|
|
356
|
+
overflow: hidden;
|
|
357
|
+
clip: rect(0, 0, 0, 0);
|
|
358
|
+
border: 0;
|
|
359
|
+
}
|
|
360
|
+
.sizing-buttons button:focus-visible {
|
|
361
|
+
background-color: #39870c;
|
|
362
|
+
border-color: #39870c;
|
|
363
|
+
color: #fff;
|
|
364
|
+
outline: none;
|
|
365
|
+
}
|
|
366
|
+
.sizing-buttons button:hover dso-icon {
|
|
367
|
+
color: #fff;
|
|
368
|
+
}
|
|
234
369
|
|
|
235
370
|
.map {
|
|
236
371
|
height: 100%;
|
|
@@ -54,13 +54,14 @@ export class ViewerGrid {
|
|
|
54
54
|
}
|
|
55
55
|
render() {
|
|
56
56
|
return (h(Host, Object.assign({}, { [this.mainSize]: true }),
|
|
57
|
-
h("div", { class: "
|
|
57
|
+
h("div", { class: "dso-map-panel" },
|
|
58
58
|
h("div", { class: "sizing-buttons" },
|
|
59
59
|
h("button", { type: "button", class: "shrink", disabled: this.mainSize == "small", onClick: this.shrinkMain },
|
|
60
60
|
h("dso-icon", { icon: "chevron-left" })),
|
|
61
61
|
h("button", { type: "button", class: "expand", disabled: this.mainSize == "large", onClick: this.expandMain },
|
|
62
62
|
h("dso-icon", { icon: "chevron-right" }))),
|
|
63
|
-
h("
|
|
63
|
+
h("div", { class: "main" },
|
|
64
|
+
h("slot", { name: "main" }))),
|
|
64
65
|
h("div", { class: "map" },
|
|
65
66
|
h("slot", { name: "map" })),
|
|
66
67
|
h("div", { class: "overlay", hidden: !this.overlayOpen || !this.overlaySlot, ref: (element) => (this.overlay = element) },
|