@dso-toolkit/core 34.0.0 → 34.2.1

package/dist/collection/components/date-picker/date-picker.js

@@ -23,7 +23,7 @@ const keyCode = {
   RIGHT: 39,
   DOWN: 40,
 };
-const DISALLOWED_CHARACTERS = /[^0-9\.\/\-]+/g;
+const DISALLOWED_CHARACTERS = /[^0-9\-]+/g;
 const TRANSITION_MS = 300;
 export class DsoDatePicker {
   constructor() {
@@ -229,7 +229,49 @@ export class DsoDatePicker {
     };
     this.handleInputChange = (e) => {
       const target = e.target;
-      this.setValue(target.value.replace(DISALLOWED_CHARACTERS, ""));
+      this.setValue(target.value);
+    };
+    this.handleKeyPress = (e) => {
+      if (e.key.search(DISALLOWED_CHARACTERS) > -1) {
+        e.preventDefault();
+      }
+    };
+    this.prepareEvent = (value) => {
+      var event = {
+        component: "dso-date-picker",
+        value: "",
+        valueAsDate: undefined
+      };
+      if (value instanceof Date) {
+        event.valueAsDate = value;
+      }
+      else {
+        event.value = value;
+        event.valueAsDate = parseDutchDate(value);
+      }
+      if (event.valueAsDate) {
+        event.value = printDutchDate(event.valueAsDate);
+      }
+      if (!event.valueAsDate && this.required) {
+        event.error = "required";
+      }
+      if (event.value && !event.valueAsDate) {
+        event.error = "invalid";
+      }
+      if (event.valueAsDate && (this.min || this.max)) {
+        const min = parseDutchDate(this.min);
+        const max = parseDutchDate(this.max);
+        const clampValue = clamp(event.valueAsDate, min, max);
+        if (clampValue !== event.valueAsDate && clampValue === min) {
+          event.valueAsDate = undefined;
+          event.error = "min-range";
+        }
+        else if (clampValue !== event.valueAsDate && clampValue === max) {
+          event.valueAsDate = undefined;
+          event.error = "max-range";
+        }
+      }
+      return event;
     };
     this.processFocusedDayNode = (element) => {
       this.focusedDayNode = element;
@@ -321,27 +363,7 @@ export class DsoDatePicker {
     this.focusedDay = clamp(day, parseDutchDate(this.min), parseDutchDate(this.max));
   }
   setValue(value) {
-    var event = {
-      component: "dso-date-picker",
-      value: "",
-      valueAsDate: undefined
-    };
-    if (value instanceof Date) {
-      event.valueAsDate = value;
-    }
-    else {
-      event.value = value;
-      event.valueAsDate = parseDutchDate(value);
-    }
-    if (event.valueAsDate) {
-      event.value = printDutchDate(event.valueAsDate);
-    }
-    if (!event.valueAsDate && this.required) {
-      event.error = "required";
-    }
-    if (event.value && !event.valueAsDate) {
-      event.error = "invalid";
-    }
+    const event = this.prepareEvent(value);
     this.value = event.value;
     this.dateChange.emit(event);
   }
@@ -379,7 +401,7 @@ export class DsoDatePicker {
     return (h(Host, null,
       h("div", { class: "dso-date" },
         h("div", { class: "dso-date__input-wrapper" },
-          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) }),
+          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) }),
           h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) },
             h("span", { class: "dso-date__toggle-icon" },
               h("dso-icon", { icon: "calendar" })),
@@ -636,7 +658,7 @@ export class DsoDatePicker {
       },
       "complexType": {
         "original": "DsoDatePickerChangeEvent",
-        "resolved": "{ component: \"dso-date-picker\"; valueAsDate: Date | undefined; value: string; error?: \"invalid\" | \"required\" | undefined; }",
+        "resolved": "{ component: \"dso-date-picker\"; valueAsDate: Date | undefined; value: string; error?: \"invalid\" | \"required\" | \"min-range\" | \"max-range\" | undefined; }",
         "references": {
           "DsoDatePickerChangeEvent": {
             "location": "local"

package/dist/collection/components/date-picker/date-picker.template.js

@@ -1,9 +1,10 @@
 import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
-export function datePickerTemplate({ id, onDateChange, value, min, max, disabled, autofocus }) {
+export function datePickerTemplate({ id, onDateChange, value, min, max, disabled, autofocus, direction }) {
   return html `
     <dso-date-picker
       @dateChange=${(e) => onDateChange(e)}
+      direction=${ifDefined(direction)}
       identifier=${ifDefined(id)}
       value=${ifDefined(value || undefined)}
       min=${ifDefined(min || undefined)}

package/dist/collection/components/header/header.css

@@ -8,6 +8,8 @@
   border-bottom: 1px solid #ccc;
   display: flex;
   flex-wrap: wrap;
+  padding: 0 16px;
+  position: relative;
 }
 @media screen and (min-width: 768px) {
   .dso-header {
@@ -26,6 +28,14 @@
   padding-bottom: 16px;
   padding-top: 16px;
 }
+@media screen and (max-width: 767px) {
+  .logo-container {
+    max-width: 200px;
+  }
+}
+.logo-container + .dropdown dso-dropdown-menu {
+  position: static;
+}
 
 @media screen and (min-width: 768px) {
   .sub-logo {
@@ -277,11 +287,6 @@ dso-dropdown-menu button::after {
   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;
@@ -296,7 +301,7 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul {
 }
 @media screen and (max-width: 991px) {
   dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul {
-    width: 100vw;
+    width: 100%;
   }
 }
 dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a {
@@ -304,6 +309,11 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a {
   font-size: 1.25rem;
   padding: 16px;
 }
+dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a:hover {
+  background-color: #fff;
+  color: #275937;
+  text-decoration: underline;
+}
 dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li.dso-active a {
   font-weight: 600;
 }
@@ -316,16 +326,13 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li + li {
 }
 @media screen and (max-width: 767px) {
   .dropdown dso-dropdown-menu {
-    top: 28px;
+    margin-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;
-  }
+  left: 0;
+  right: 0;
+  top: 100%;
 }
 .dropdown dso-dropdown-menu[open] button::after {
   background: var(--dso-icon, var(--di-chevron-up)) no-repeat;
@@ -339,6 +346,7 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li + li {
   color: #39870c;
   font-size: 16px;
   font-weight: 600;
+  position: relative;
 }
 .dropdown dso-dropdown-menu button:hover, .dropdown dso-dropdown-menu button:active {
   cursor: pointer;

package/dist/collection/components/info/info.css

@@ -1,3 +1,23 @@
+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 {
   --di-times-grijs90: url("data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e");
   display: block;

package/dist/collection/components/map-base-layers/map-base-layers.js

@@ -1,14 +1,29 @@
 import { Component, h, Prop, Event } from '@stencil/core';
 export class MapBaseLayers {
+  constructor() {
+    this.selectableRefs = {};
+  }
   baseLayerChangeHandler(baseLayer) {
     this.baseLayerChange.emit({ activeBaseLayer: baseLayer });
   }
+  componentDidRender() {
+    this.baseLayers
+      .filter(l => { var _a, _b; return !l.disabled && ((_b = (_a = this.previousBaselayers) === null || _a === void 0 ? void 0 : _a.find(p => p.id === l.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
+      .forEach(o => {
+      var _a;
+      (_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
+    });
+    this.previousBaselayers = this.baseLayers;
+  }
   render() {
+    for (const ref in this.selectableRefs) {
+      delete this.selectableRefs[ref];
+    }
     return (h("fieldset", { class: "form-group dso-radios" },
       h("legend", { class: "sr-only" }, "Achtergrond"),
       h("div", { class: "dso-label-container" },
         h("span", { class: "control-label", "aria-hidden": "true" }, "Achtergrond")),
-      h("div", { class: "dso-field-container" }, this.baseLayers.map(baseLayer => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, onDsoChange: () => this.baseLayerChangeHandler(baseLayer) },
+      h("div", { class: "dso-field-container" }, this.baseLayers.map(baseLayer => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, ref: ref => this.selectableRefs[baseLayer.id] = ref, onDsoChange: () => this.baseLayerChangeHandler(baseLayer) },
         baseLayer.name,
         baseLayer.info
           ? h("p", { slot: "info" }, baseLayer.info)

package/dist/collection/components/map-controls/map-controls.css

@@ -375,6 +375,12 @@ button::-moz-focus-inner {
   border: 0;
 }
 
+section {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 header,
 .content {
   padding: 16px;
@@ -382,6 +388,7 @@ header,
 
 header {
   border-bottom: 1px solid #ccc;
+  flex-grow: 0;
   position: relative;
 }
 header h2 {
@@ -389,4 +396,9 @@ header h2 {
   font-family: "Asap", sans-serif;
   line-height: 1;
   margin: 0;
+}
+
+.content {
+  flex-grow: 1;
+  overflow-y: auto;
 }

package/dist/collection/components/map-overlays/map-overlays.js

@@ -1,15 +1,30 @@
 import { Component, Event, Prop, h } from '@stencil/core';
 export class MapOverlays {
+  constructor() {
+    this.selectableRefs = {};
+  }
   overlayChangeHandler(overlay, e) {
     const checked = e.detail.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;
     this.toggleOverlay.emit({ overlay, checked });
   }
+  componentDidRender() {
+    this.overlays
+      .filter(o => { var _a, _b; return !o.disabled && ((_b = (_a = this.previousOverlays) === null || _a === void 0 ? void 0 : _a.find(p => p.id === o.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
+      .forEach(o => {
+      var _a;
+      (_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
+    });
+    this.previousOverlays = this.overlays;
+  }
   render() {
+    for (const ref in this.selectableRefs) {
+      delete this.selectableRefs[ref];
+    }
     return (h("fieldset", { class: "form-group dso-checkboxes" },
       h("legend", { class: "sr-only" }, "Kaartlagen"),
       h("div", { class: "dso-label-container" },
         h("span", { class: "control-label", "aria-hidden": "true" }, "Kaartlagen")),
-      h("div", { class: "dso-field-container" }, this.overlays.map(overlay => (h("dso-selectable", { type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, onDsoChange: e => this.overlayChangeHandler(overlay, e) },
+      h("div", { class: "dso-field-container" }, this.overlays.map(overlay => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, ref: ref => this.selectableRefs[overlay.id] = ref, onDsoChange: e => this.overlayChangeHandler(overlay, e) },
         overlay.name,
         overlay.info
           ? h("p", { slot: "info" }, overlay.info)

package/dist/collection/components/selectable/selectable.js

@@ -1,10 +1,13 @@
-import { h, Component, Prop, Event, Fragment, Element, State, forceUpdate, Watch } from '@stencil/core';
+import { h, Component, Prop, Event, Fragment, Element, State, forceUpdate, Watch, Method } from '@stencil/core';
 import { createIdentifier } from '../../utils/create-identifier';
 export class Selectable {
   constructor() {
     this.infoActive = false;
     this.fallbackIdentifier = createIdentifier('DsoSelectable');
   }
+  async toggleInfo(active) {
+    this.infoActive = active !== null && active !== void 0 ? active : !this.infoActive;
+  }
   componentDidLoad() {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
@@ -260,6 +263,27 @@ export class Selectable {
         }
       }
     }]; }
+  static get methods() { return {
+    "toggleInfo": {
+      "complexType": {
+        "signature": "(active?: boolean | undefined) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "indeterminate",

package/dist/collection/components/viewer-grid/viewer-grid-filterpanel-buttons.js

@@ -0,0 +1,7 @@
+import { h } from '@stencil/core';
+export const ViewerGridFilterpanelButtons = ({ onApply, onCancel }) => (h("div", { class: "filterpanel-buttons" },
+  h("button", { type: "button", class: "cancel-button", onClick: onCancel },
+    h("span", null, "Annuleren")),
+  h("button", { type: "button", class: "apply-button", onClick: onApply },
+    h("span", null, "Toepassen"),
+    h("dso-icon", { icon: "chevron-right" }))));