@dso-toolkit/core 45.2.0 → 46.0.0

package/dist/cjs/dso-date-picker.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4066351a.js');
-const createIdentifier = require('./create-identifier-fa070b11.js');
+const index = require('./index-ecec64a0.js');
+const createIdentifier = require('./create-identifier-6ee2a08b.js');
 
 var DaysOfWeek;
 (function (DaysOfWeek) {
@@ -16,9 +16,9 @@ var DaysOfWeek;
   DaysOfWeek[DaysOfWeek["Saturday"] = 6] = "Saturday";
 })(DaysOfWeek || (DaysOfWeek = {}));
 function createDate(year, month, day) {
-  var dayInt = parseInt(day, 10);
-  var monthInt = parseInt(month, 10);
-  var yearInt = parseInt(year, 10);
+  const dayInt = parseInt(day, 10);
+  const monthInt = parseInt(month, 10);
+  const yearInt = parseInt(year, 10);
   const isValid = Number.isInteger(yearInt) && // all parts should be integers
     Number.isInteger(monthInt) &&
     Number.isInteger(dayInt) &&
@@ -38,7 +38,7 @@ function parseDutchDate(value) {
   if (!value) {
     return;
   }
-  const matches = value.split('-');
+  const matches = value.split("-");
   if (matches.length === 3 && matches[2].length === 4) {
     return createDate(matches[2], matches[1], matches[0]);
   }
@@ -49,11 +49,11 @@ function parseDutchDate(value) {
  */
 function printDutchDate(date) {
   if (!date) {
-    return '';
+    return "";
   }
-  var d = date.getDate().toString(10).padStart(2, '0');
-  var m = (date.getMonth() + 1).toString(10).padStart(2, '0');
-  var y = date.getFullYear().toString(10).padStart(2, '0');
+  const d = date.getDate().toString(10).padStart(2, "0");
+  const m = (date.getMonth() + 1).toString(10).padStart(2, "0");
+  const y = date.getFullYear().toString(10).padStart(2, "0");
   return `${d}-${m}-${y}`;
 }
 /**
@@ -66,21 +66,21 @@ function isEqual(a, b) {
   return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
 function addDays(date, days) {
-  var d = new Date(date);
+  const d = new Date(date);
   d.setDate(d.getDate() + days);
   return d;
 }
 function startOfWeek(date, firstDayOfWeek = DaysOfWeek.Monday) {
-  var d = new Date(date);
-  var day = d.getDay();
-  var diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;
+  const d = new Date(date);
+  const day = d.getDay();
+  const diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;
   d.setDate(d.getDate() - diff);
   return d;
 }
 function endOfWeek(date, firstDayOfWeek = DaysOfWeek.Monday) {
-  var d = new Date(date);
-  var day = d.getDay();
-  var diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek);
+  const d = new Date(date);
+  const day = d.getDay();
+  const diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek);
   d.setDate(d.getDate() + diff);
   return d;
 }
@@ -145,7 +145,7 @@ function getViewOfMonth(date, firstDayOfWeek = DaysOfWeek.Monday) {
   return getDaysInRange(start, end);
 }
 
-const DatePickerDay = ({ focusedDay, today, day, onDaySelect, onKeyboardNavigation, focusedDayRef, inRange }) => {
+const DatePickerDay = ({ focusedDay, today, day, onDaySelect, onKeyboardNavigation, focusedDayRef, inRange, }) => {
   const isToday = isEqual(day, today);
   const isFocused = isEqual(day, focusedDay);
   const isDisabled = day.getMonth() !== focusedDay.getMonth();
@@ -158,7 +158,7 @@ const DatePickerDay = ({ focusedDay, today, day, onDaySelect, onKeyboardNavigati
       "is-outside": isOutsideRange,
       "is-disabled": isDisabled,
       "is-today": isToday,
-    }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, disabled: isOutsideRange || isDisabled, type: "button", ref: el => {
+    }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, disabled: isOutsideRange || isDisabled, type: "button", ref: (el) => {
       if (isFocused && el && focusedDayRef) {
         focusedDayRef(el);
       }
@@ -180,75 +180,52 @@ function mapWithOffset(array, startingOffset, mapFn) {
     return mapFn(array[adjustedIndex]);
   });
 }
-const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, localization, firstDayOfWeek, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onMouseDown, onFocusIn }) => {
+const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, localization, firstDayOfWeek, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onMouseDown, onFocusIn, }) => {
   const today = new Date();
   const days = getViewOfMonth(focusedDate, firstDayOfWeek);
-  return (index.h("table", { class: "dso-date__table", role: "grid", "aria-labelledby": labelledById, 
-    // @ts-ignore
-    onFocusin: onFocusIn, onMouseDown: onMouseDown },
+  return (index.h("table", { class: "dso-date__table", role: "grid", "aria-labelledby": labelledById, onFocusin: onFocusIn, onMouseDown: onMouseDown },
     index.h("thead", null,
-      index.h("tr", null, mapWithOffset(localization.dayNames, firstDayOfWeek, dayName => (index.h("th", { class: "dso-date__table-header", scope: "col" },
+      index.h("tr", null, mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (index.h("th", { class: "dso-date__table-header", scope: "col" },
         index.h("span", { "aria-hidden": "true" }, dayName.substr(0, 2)),
         index.h("span", { class: "dso-date__vhidden" }, dayName)))))),
-    index.h("tbody", null, chunk(days, 7).map(week => (index.h("tr", { class: "dso-date__row" }, week.map(day => (index.h("td", { class: "dso-date__cell", role: "gridcell", "aria-selected": isEqual(day, selectedDate) ? "true" : undefined, "aria-current": isEqual(day, today) ? "date" : undefined },
+    index.h("tbody", null, chunk(days, 7).map((week) => (index.h("tr", { class: "dso-date__row" }, week.map((day) => (index.h("td", { class: "dso-date__cell", role: "gridcell", "aria-selected": isEqual(day, selectedDate) ? "true" : undefined, "aria-current": isEqual(day, today) ? "date" : undefined },
       index.h(DatePickerDay, { day: day, today: today, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef }))))))))));
 };
 
 const localization = {
-  buttonLabel: 'Kies datum',
-  placeholder: 'dd-mm-jjjj',
-  selectedDateMessage: 'Geselecteerde datum is',
-  prevMonthLabel: 'Vorige maand',
-  nextMonthLabel: 'Volgende maand',
-  monthSelectLabel: 'Maand',
-  yearSelectLabel: 'Jaar',
-  closeLabel: 'Sluiten',
-  keyboardInstruction: 'Gebruik de pijltjestoetsen om een dag te kiezen',
-  calendarHeading: 'Kies een datum',
-  dayNames: [
-    'Zondag',
-    'Maandag',
-    'Dinsdag',
-    'Woensdag',
-    'Donderdag',
-    'Vrijdag',
-    'Zaterdag'
-  ],
+  buttonLabel: "Kies datum",
+  placeholder: "dd-mm-jjjj",
+  selectedDateMessage: "Geselecteerde datum is",
+  prevMonthLabel: "Vorige maand",
+  nextMonthLabel: "Volgende maand",
+  monthSelectLabel: "Maand",
+  yearSelectLabel: "Jaar",
+  closeLabel: "Sluiten",
+  keyboardInstruction: "Gebruik de pijltjestoetsen om een dag te kiezen",
+  calendarHeading: "Kies een datum",
+  dayNames: ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"],
   monthNames: [
-    'Januari',
-    'Februari',
-    'Maart',
-    'April',
-    'Mei',
-    'Juni',
-    'Juli',
-    'Augustus',
-    'September',
-    'Oktober',
-    'November',
-    'December'
+    "Januari",
+    "Februari",
+    "Maart",
+    "April",
+    "Mei",
+    "Juni",
+    "Juli",
+    "Augustus",
+    "September",
+    "Oktober",
+    "November",
+    "December",
   ],
-  monthNamesShort: [
-    'Jan',
-    'Feb',
-    'Mrt',
-    'Apr',
-    'Mei',
-    'Jun',
-    'Jul',
-    'Aug',
-    'Sep',
-    'Okt',
-    'Nov',
-    'Dec'
-  ]
+  monthNamesShort: ["Jan", "Feb", "Mrt", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
 };
 
 const datePickerCss = ".sc-dso-date-picker-h{display:block}.dso-date.sc-dso-date-picker *.sc-dso-date-picker,.dso-date.sc-dso-date-picker *.sc-dso-date-picker::before,.dso-date.sc-dso-date-picker *.sc-dso-date-picker::after{box-sizing:border-box}.dso-date.sc-dso-date-picker{box-sizing:border-box;color:#191919;display:block;font-family:\"Asap\", sans-serif;margin:0;position:relative;text-align:left;width:100%}.dso-date.sc-dso-date-picker:not(.dso-visible) .dso-date__dialog.sc-dso-date-picker{display:none}.dso-date__input.sc-dso-date-picker{display:block;width:100%;height:40px;padding:6px 14px;font-size:1rem;line-height:1.5;color:#191919;background-color:#fff;background-image:none;border:1px solid #275937;border-radius:4px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s}.dso-date__input.sc-dso-date-picker::-moz-placeholder{color:#666;opacity:1}.dso-date__input.sc-dso-date-picker:-ms-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-webkit-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-ms-expand{background-color:transparent;border:0}.dso-date__input.sc-dso-date-picker:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled].sc-dso-date-picker,.dso-date__input[readonly].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{background-color:#fff;opacity:1}.dso-date__input[disabled].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{cursor:default}.dso-date__input[disabled].sc-dso-date-picker{border-color:#e5e5e5;color:#999}.dso-date__input[readonly].sc-dso-date-picker{border-width:1px}.dso-date__input[type=text].sc-dso-date-picker{line-height: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:101}.dso-date__toggle.sc-dso-date-picker:disabled{color:#afcf9d;cursor:pointer}.dso-date__dialog.sc-dso-date-picker{border-width:1px;display:flex;right:0;min-width:320px;opacity:0;position:absolute;top:100%;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;visibility:hidden;will-change:transform, opacity, visibility;z-index:210}@media (max-width: 35.9375em){.dso-date__dialog.sc-dso-date-picker{background:rgba(25, 25, 25, 0.5);bottom:0;position:fixed;left:0;right:0;top:0;transform:translateZ(0);transform-origin:bottom center}}.dso-date__dialog.is-left.sc-dso-date-picker{left:-11px;right:auto;width:auto}.dso-date__dialog.is-active.sc-dso-date-picker{opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.dso-date__dialog-content.sc-dso-date-picker{background:#fff;border:1px solid rgba(0, 0, 0, 0.1);border-radius:4px;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);margin-left:auto;margin-right:-1px;margin-top:8px;max-width:310px;min-width:290px;padding:16px;position:relative;transform:none;width:100%;z-index:210}@media (max-width: 35.9375em){.dso-date__dialog-content.sc-dso-date-picker{border:0;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;bottom:0;left:0;margin:0;max-width:none;min-height:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;visibility:hidden;will-change:transform, opacity, visibility}.is-active.sc-dso-date-picker .dso-date__dialog-content.sc-dso-date-picker{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}}.dso-date__table.sc-dso-date-picker{border-collapse:collapse;border-spacing:0;color:#191919;font-size:1rem;font-weight:400;line-height:1.25;min-width:280px;table-layout:fixed;text-align:center;width:100%}.dso-date__table-header.sc-dso-date-picker{font-size:0.875em;font-weight:600;height:36px;line-height:36px;text-decoration:none;text-transform:uppercase}.dso-date__cell.sc-dso-date-picker{height:40px;padding:1px;text-align:center;width:40px}.dso-date__day.sc-dso-date-picker{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;box-shadow:0 0 0 1px transparent;color:#191919;cursor:pointer;display:inline-block;font-family:\"Asap\", sans-serif;font-variant-numeric:tabular-nums;font-weight:400;height:38px;line-height:0;padding:0;position:relative;text-align:center;vertical-align:middle;width:38px;z-index:100}.dso-date__day.is-today.sc-dso-date-picker{background:transparent;height:36px;box-shadow:0 0 0 1px #39870c;width:36px}.dso-date__day.sc-dso-date-picker:hover,.dso-date__day.sc-dso-date-picker:active{background:#39870c;color:#fff}.dso-date__day.sc-dso-date-picker:focus{background:transparent;box-shadow:0 0 0 2px #275937;color:#191919;height:34px;outline:0;width:34px}[aria-selected=true].sc-dso-date-picker .dso-date__day.sc-dso-date-picker{background:#39870c;color:#fff}[aria-selected=true].sc-dso-date-picker .dso-date__day.sc-dso-date-picker:focus{background:transparent}[aria-selected=true].sc-dso-date-picker .dso-date__day.sc-dso-date-picker:focus span[aria-hidden=true].sc-dso-date-picker{background:#39870c;border:1px solid #fff;line-height:32px}.dso-date__day.is-outside.sc-dso-date-picker{background:#f2f2f2;box-shadow:none;color:#666;cursor:default;pointer-events:none}.dso-date__day.is-disabled.sc-dso-date-picker{background:#fff;cursor:default}.dso-date__day.is-disabled.sc-dso-date-picker:hover{color:#666}.dso-date__day.sc-dso-date-picker span[aria-hidden=true].sc-dso-date-picker{border-radius:50%;display:inline-block;height:34px;line-height:34px;width:34px}.dso-date__header.sc-dso-date-picker{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px;width:100%}.dso-date__header.sc-dso-date-picker span.sc-dso-date-picker{font-size:0.875rem}.dso-date__nav.sc-dso-date-picker{white-space:nowrap}.dso-date__prev.sc-dso-date-picker,.dso-date__next.sc-dso-date-picker{-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:transparent;border:1px solid #39870c;border-radius:4px;box-sizing:border-box;color:#39870c;cursor:pointer;display:inline-flex;font-size:1em;height:32px;justify-content:center;margin-left:8px;padding:0;width:32px}@media (max-width: 35.9375em){.dso-date__prev.sc-dso-date-picker,.dso-date__next.sc-dso-date-picker{height:40px;width:40px}}.dso-date__prev.sc-dso-date-picker:hover,.dso-date__prev.sc-dso-date-picker:active,.dso-date__next.sc-dso-date-picker:hover,.dso-date__next.sc-dso-date-picker:active{background-color:#39870c;color:#fff}.dso-date__prev.sc-dso-date-picker:focus,.dso-date__next.sc-dso-date-picker:focus{background:transparent;color:#39870c}.dso-date__prev.sc-dso-date-picker:disabled,.dso-date__prev.sc-dso-date-picker:disabled:hover,.dso-date__next.sc-dso-date-picker:disabled,.dso-date__next.sc-dso-date-picker:disabled:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d;opacity:1}.dso-date__prev.sc-dso-date-picker svg.sc-dso-date-picker,.dso-date__next.sc-dso-date-picker svg.sc-dso-date-picker{margin:0 auto}.dso-date__select.sc-dso-date-picker{display:inline-flex;height:28px;line-height:28px;position:relative}.dso-date__select.sc-dso-date-picker span.sc-dso-date-picker{margin-right:4px}.dso-date__select.sc-dso-date-picker select.sc-dso-date-picker{color:#275937;cursor:pointer;font-size:1rem;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:101}.dso-date__select.sc-dso-date-picker select.sc-dso-date-picker:focus+.dso-date__select-label.sc-dso-date-picker{box-shadow:0 0 0 2px #275937}.dso-date__select.sc-dso-date-picker select.sc-dso-date-picker:disabled{color:#afcf9d}.dso-date__select-label.sc-dso-date-picker{align-items:center;border-radius:4px;color:#39870c;display:flex;padding:0 4px 0 8px;pointer-events:none;position:relative;width:100%;z-index:100}.dso-date__select-label.sc-dso-date-picker span.sc-dso-date-picker{font-size:1.25rem;font-weight:600;line-height:1.25}.dso-date__select-label.sc-dso-date-picker svg.sc-dso-date-picker{width:16px;height:16px}.dso-date__mobile.sc-dso-date-picker{align-items:center;border-bottom:1px solid rgba(0, 0, 0, 0.12);display:flex;font-size:1em;justify-content:space-between;margin-bottom:20px;margin-left:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;width:120%}@media (min-width: 36em){.dso-date__mobile.sc-dso-date-picker{border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-16px;top:-16px;width:auto}}.dso-date__mobile-heading.sc-dso-date-picker{display:inline-block;font-weight:600;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.dso-date__mobile-heading.sc-dso-date-picker{display:none}}.dso-date__close.sc-dso-date-picker{-webkit-appearance:none;align-items:center;appearance:none;background-color:#fff;border:0;border-radius:50%;color:#39870c;cursor:pointer;display:flex;font-size:1em;height:32px;justify-content:center;margin-right:-4px;padding:0;width:32px}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker{margin-right:0;opacity:0}}.dso-date__close.sc-dso-date-picker:focus{box-shadow:0 0 0 2px #275937;outline:none}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker:focus{opacity:1}}.dso-date__vhidden.sc-dso-date-picker{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}";
 
 function range(from, to) {
-  var result = [];
-  for (var i = from; i <= to; i++) {
+  const result = [];
+  for (let i = from; i <= to; i++) {
     result.push(i);
   }
   return result;
@@ -266,7 +243,7 @@ const keyCode = {
   RIGHT: 39,
   DOWN: 40,
 };
-const DISALLOWED_CHARACTERS = /[^0-9\-]+/g;
+const DISALLOWED_CHARACTERS = /[^0-9-]+/g;
 const TRANSITION_MS = 300;
 function cleanValue(input, regex) {
   const value = input.value;
@@ -284,7 +261,7 @@ function cleanValue(input, regex) {
   input.selectionStart = input.selectionEnd = newCursor;
   return newValue;
 }
-let DsoDatePicker = class {
+const DsoDatePicker = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.dsoDateChange = index.createEvent(this, "dsoDateChange", 7);
@@ -300,43 +277,6 @@ let DsoDatePicker = class {
     this.dialogLabelId = createIdentifier.createIdentifier("DsoDateLabel");
     this.localization = localization;
     this.firstDayOfWeek = DaysOfWeek.Monday;
-    /**
-     * State() variables
-     */
-    this.activeFocus = false;
-    this.focusedDay = new Date();
-    this.open = false;
-    this.visible = false;
-    /**
-     * Public Property API
-     */
-    /**
-     * Name of the date picker input.
-     */
-    this.name = "date";
-    /**
-     * Makes the date picker input component disabled. This prevents users from being able to
-     * interact with the input, and conveys its inactive state to assistive technologies.
-     */
-    this.disabled = false;
-    /**
-     * Forces the opening direction of the calendar modal to be always left or right.
-     * This setting can be useful when the input is smaller than the opening date picker
-     * would be as by default the picker always opens towards right.
-     */
-    this.direction = "right";
-    /**
-     * Should the input be marked as required?
-     */
-    this.required = false;
-    /**
-     * Should the input be focused on load?
-     */
-    this.dsoAutofocus = false;
-    /**
-     * Date value. Must be in Dutch date format: DD-MM-YYYY.
-     */
-    this.value = "";
     /**
      * Local methods.
      */
@@ -365,14 +305,14 @@ let DsoDatePicker = class {
       event.stopPropagation();
       this.dsoKeyUp.emit({
         component: "dso-date-picker",
-        originalEvent: event
+        originalEvent: event,
       });
     };
     this.handleKeyDown = (event) => {
       event.stopPropagation();
       this.dsoKeyDown.emit({
         component: "dso-date-picker",
-        originalEvent: event
+        originalEvent: event,
       });
     };
     this.handleFocus = (event) => {
@@ -390,9 +330,10 @@ let DsoDatePicker = class {
       event.preventDefault();
     };
     this.handleTouchEnd = (event) => {
+      var _a, _b;
       const touch = event.changedTouches[0];
-      const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled
-      const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled
+      const distX = touch.pageX - ((_a = this.initialTouchX) !== null && _a !== void 0 ? _a : 0); // get horizontal dist traveled
+      const distY = touch.pageY - ((_b = this.initialTouchY) !== null && _b !== void 0 ? _b : 0); // get vertical dist traveled
       const threshold = 70;
       const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;
       const isDownwardsSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold && distY > 0;
@@ -431,7 +372,7 @@ let DsoDatePicker = class {
         (_a = this.firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
         return;
       }
-      var handled = true;
+      let handled = true;
       switch (event.keyCode) {
         case keyCode.RIGHT:
           this.addDays(1);
@@ -488,10 +429,15 @@ let DsoDatePicker = class {
       }
     };
     this.handleMonthSelect = (e) => {
-      this.setMonth(parseInt(e.target.value, 10));
+      // Todo
+      if (e.target instanceof HTMLSelectElement) {
+        this.setMonth(parseInt(e.target.value, 10));
+      }
     };
     this.handleYearSelect = (e) => {
-      this.setYear(parseInt(e.target.value, 10));
+      if (e.target instanceof HTMLSelectElement) {
+        this.setYear(parseInt(e.target.value, 10));
+      }
     };
     this.handleInputChange = (e) => {
       const target = e.target;
@@ -499,10 +445,10 @@ let DsoDatePicker = class {
       this.setValue(cleanedValue);
     };
     this.prepareEvent = (value) => {
-      var event = {
+      const event = {
         component: "dso-date-picker",
         value: "",
-        valueAsDate: undefined
+        valueAsDate: undefined,
       };
       if (value instanceof Date) {
         event.valueAsDate = value;
@@ -541,6 +487,20 @@ let DsoDatePicker = class {
         setTimeout(() => element.focus(), 0);
       }
     };
+    this.activeFocus = false;
+    this.focusedDay = new Date();
+    this.open = false;
+    this.visible = false;
+    this.name = "date";
+    this.identifier = undefined;
+    this.disabled = false;
+    this.role = undefined;
+    this.direction = "right";
+    this.required = false;
+    this.dsoAutofocus = false;
+    this.value = "";
+    this.min = undefined;
+    this.max = undefined;
   }
   /**
    * Component event handling.
@@ -571,14 +531,14 @@ let DsoDatePicker = class {
    * Show the calendar modal, moving focus to the calendar inside.
    */
   async show() {
-    if (typeof this.hideTimeoutId !== 'undefined') {
+    if (typeof this.hideTimeoutId !== "undefined") {
       clearTimeout(this.hideTimeoutId);
     }
     this.visible = true;
     setTimeout(() => {
       this.open = true;
       this.setFocusedDay(parseDutchDate(this.value) || new Date());
-      if (typeof this.focusTimeoutId !== 'undefined') {
+      if (typeof this.focusTimeoutId !== "undefined") {
         clearTimeout(this.focusTimeoutId);
       }
       this.focusTimeoutId = setTimeout(() => { var _a; return (_a = this.monthSelectNode) === null || _a === void 0 ? void 0 : _a.focus(); }, TRANSITION_MS);
@@ -592,7 +552,7 @@ let DsoDatePicker = class {
     this.open = false;
     // in cases where calendar is quickly shown and hidden
     // we should avoid moving focus to the button
-    if (typeof this.focusTimeoutId !== 'undefined') {
+    if (typeof this.focusTimeoutId !== "undefined") {
       clearTimeout(this.focusTimeoutId);
     }
     this.hideTimeoutId = setTimeout(() => {
@@ -634,7 +594,7 @@ let DsoDatePicker = class {
   }
   setValue(value) {
     const event = this.prepareEvent(value);
-    this.value = typeof value === 'string' ? value : event.value;
+    this.value = typeof value === "string" ? value : event.value;
     if (this.value !== this.previousValue) {
       this.dsoDateChange.emit(event);
       this.previousValue = this.value;
@@ -661,8 +621,8 @@ let DsoDatePicker = class {
     const focusedYear = this.focusedDay.getFullYear();
     const minDate = parseDutchDate(this.min);
     const maxDate = parseDutchDate(this.max);
-    const prevMonthDisabled = minDate != null && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;
-    const nextMonthDisabled = maxDate != null && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear;
+    const prevMonthDisabled = minDate && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;
+    const nextMonthDisabled = maxDate && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear;
     let minYear = selectedYear - 10;
     let maxYear = selectedYear + 10;
     if (minDate) {
@@ -671,11 +631,11 @@ let DsoDatePicker = class {
     if (maxDate) {
       maxYear = Math.min(maxYear, maxDate.getFullYear());
     }
-    return (index.h(index.Host, null, index.h("div", { class: ({ 'dso-date': true, 'dso-visible': this.visible }) }, 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: {
+    return (index.h(index.Host, null, index.h("div", { class: { "dso-date": true, "dso-visible": this.visible } }, 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: {
         "dso-date__dialog": true,
         "is-left": this.direction === "left",
         "is-active": this.open,
-      }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, index.h("div", { class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, index.h("div", { class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), index.h("div", { class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, index.h("label", { class: "dso-date__mobile-heading" }, this.localization.calendarHeading), index.h("button", { class: "dso-date__close", ref: element => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "dso-date__vhidden" }, this.localization.closeLabel))), index.h("div", { class: "dso-date__header", onFocusin: this.disableActiveFocus }, index.h("div", null, index.h("h2", { id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), index.h("label", { htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), index.h("div", { class: "dso-date__select" }, index.h("select", { id: this.monthSelectId, class: "dso-date__select--month", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (index.h("option", { key: month, value: i, selected: i === focusedMonth }, month)))), index.h("div", { class: "dso-date__select-label", "aria-hidden": "true" }, index.h("span", null, this.localization.monthNamesShort[focusedMonth]), index.h("dso-icon", { icon: "chevron-down" }))), index.h("label", { htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), index.h("div", { class: "dso-date__select" }, index.h("select", { id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (index.h("option", { key: year, selected: year === focusedYear }, year)))), index.h("div", { class: "dso-date__select-label", "aria-hidden": "true" }, index.h("span", null, this.focusedDay.getFullYear()), index.h("dso-icon", { icon: "chevron-down" })))), index.h("div", { class: "dso-date__nav" }, index.h("button", { class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, index.h("dso-icon", { icon: "chevron-left" }), index.h("span", { class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), index.h("button", { class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, index.h("dso-icon", { icon: "chevron-right" }), index.h("span", { class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), index.h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
+      }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, index.h("div", { class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, index.h("div", { class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), index.h("div", { class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, index.h("label", { class: "dso-date__mobile-heading" }, this.localization.calendarHeading), index.h("button", { class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "dso-date__vhidden" }, this.localization.closeLabel))), index.h("div", { class: "dso-date__header", onFocusin: this.disableActiveFocus }, index.h("div", null, index.h("h2", { id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), index.h("label", { htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), index.h("div", { class: "dso-date__select" }, index.h("select", { id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (index.h("option", { key: month, value: i, selected: i === focusedMonth }, month)))), index.h("div", { class: "dso-date__select-label", "aria-hidden": "true" }, index.h("span", null, this.localization.monthNamesShort[focusedMonth]), index.h("dso-icon", { icon: "chevron-down" }))), index.h("label", { htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), index.h("div", { class: "dso-date__select" }, index.h("select", { id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (index.h("option", { key: year, selected: year === focusedYear }, year)))), index.h("div", { class: "dso-date__select-label", "aria-hidden": "true" }, index.h("span", null, this.focusedDay.getFullYear()), index.h("dso-icon", { icon: "chevron-down" })))), index.h("div", { class: "dso-date__nav" }, index.h("button", { class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, index.h("dso-icon", { icon: "chevron-left" }), index.h("span", { class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), index.h("button", { class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, index.h("dso-icon", { icon: "chevron-right" }), index.h("span", { class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), index.h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
   }
   get element() { return index.getElement(this); }
 };

package/dist/cjs/dso-dropdown-menu.cjs.entry.js

@@ -2,28 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4066351a.js');
-const index_esm = require('./index.esm-50325ea2.js');
-const v4 = require('./v4-8e8d6fbc.js');
+const index = require('./index-ecec64a0.js');
+const index_esm = require('./index.esm-03a9e0b4.js');
+const v4 = require('./v4-abb5dc0c.js');
 
 const dropdownMenuCss = ":host(:focus){outline:none}:host{display:inline-block;position:relative}";
 
-let DropdownMenu = class {
+const DropdownMenu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * Whether the menu is open or closed.
-     * This attribute is reflected and mutable.
-     */
-    this.open = false;
-    /**
-     * Alignment of the dropdown
-     */
-    this.dropdownAlign = "left";
-    /**
-     * Whether the menu is checkable.
-     */
-    this.checkable = false;
     this.focusOutListener = (event) => {
       if (!this.tabbables.includes(event.relatedTarget)) {
         this.open = false;
@@ -57,6 +44,9 @@ let DropdownMenu = class {
       this.button.focus();
       this.open = false;
     };
+    this.open = false;
+    this.dropdownAlign = "left";
+    this.checkable = false;
   }
   get button() {
     const button = this.host.querySelectorAll('button[slot="toggle"]')[0];
@@ -78,7 +68,7 @@ let DropdownMenu = class {
       this.open = !this.open;
     });
     const options = this.host.querySelector(".dso-dropdown-options");
-    if (options == null) {
+    if (!options) {
       throw new ReferenceError("Dropdown options not found");
     }
     options.setAttribute("role", "menu");
@@ -122,9 +112,7 @@ let DropdownMenu = class {
     if (activeEl.shadowRoot) {
       return this.getActiveElement(activeEl.shadowRoot);
     }
-    else {
-      return activeEl;
-    }
+    return activeEl;
   }
   tabInPopup(direction) {
     const tabs = this.tabbables;

package/dist/cjs/dso-header.cjs.entry.js

@@ -2,30 +2,35 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4066351a.js');
-const clsx_m = require('./clsx.m-b00fa5e1.js');
+const index = require('./index-ecec64a0.js');
+const clsx_m = require('./clsx.m-b81c6b86.js');
 const index$1 = require('./index-794ad37a.js');
 
 const headerCss = ".sc-dso-header-h{display:block}.dso-header.sc-dso-header{border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}@media screen and (min-width: 768px){.dso-header.sc-dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down.sc-dso-header{flex-wrap:nowrap}}.dso-header.sc-dso-header .dso-nav.sc-dso-header{border:0}.logo-container.sc-dso-header{display:flex;flex-wrap:wrap;padding-bottom:16px;padding-top:16px}@media screen and (max-width: 767px){.logo-container.sc-dso-header{max-height:40px}}@media screen and (min-width: 768px){.sub-logo.sc-dso-header{margin-left:24px}}@media screen and (max-width: 767px){.sub-logo.sc-dso-header{flex-basis:100%}}.login.sc-dso-header .dso-tertiary.sc-dso-header,.logout.sc-dso-header .dso-tertiary.sc-dso-header{cursor:pointer;font-family:Asap, sans-serif;font-weight:600;vertical-align:text-bottom}.profile.sc-dso-header a.sc-dso-header,.logout.sc-dso-header a.sc-dso-header,.login.sc-dso-header a.sc-dso-header{text-decoration:none;color:#39870c;font-weight:600}.profile.sc-dso-header a.sc-dso-header:hover,.profile.sc-dso-header a.sc-dso-header:focus,.logout.sc-dso-header a.sc-dso-header:hover,.logout.sc-dso-header a.sc-dso-header:focus,.login.sc-dso-header a.sc-dso-header:hover,.login.sc-dso-header a.sc-dso-header:focus{text-decoration:none}.profile.sc-dso-header a.sc-dso-header:active,.logout.sc-dso-header a.sc-dso-header:active,.login.sc-dso-header a.sc-dso-header:active{text-decoration:underline}.dso-header-session.sc-dso-header{display:flex;margin-left:auto}.dso-header-session.sc-dso-header .profile.sc-dso-header a.sc-dso-header{margin-left:8px}.dso-header-session.sc-dso-header .profile.sc-dso-header+.logout.sc-dso-header{border-left:3px solid #ccc;margin-left:16px;padding-left:16px}.dso-navbar.sc-dso-header{flex-basis:100%}.dso-navbar.sc-dso-header .dso-dropdown-options.sc-dso-header{border-top:1px solid #ccc}dso-dropdown-menu.sc-dso-header button.sc-dso-header{align-items:flex-end;background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;padding-right:32px}@media screen and (max-width: 767px){dso-dropdown-menu.sc-dso-header{top:12px}}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{border:0;border-radius:0}@media screen and (min-width: 768px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:375px}}@media screen and (max-width: 767px){dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{width:100%}}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header{color:#275937;font-size:1.25rem;padding:16px;white-space:pre-wrap}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:focus{color:#fff}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header a.sc-dso-header:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.dso-active.sc-dso-header a.sc-dso-header{font-weight:600}dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header ul.sc-dso-header li.sc-dso-header+li.sc-dso-header{border-top:1px solid #ccc}.dropdown.sc-dso-header{margin-left:auto}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{position:static}@media screen and (max-width: 767px){.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header{margin-top:28px}}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{right:0;top:100%}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{color:#39870c;font-size:16px;font-weight:600;line-height:normal;position:relative}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:50%;transform:translateY(-50%)}.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dropdown.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.sc-dso-header{align-items:end;column-gap:32px;display:flex;list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.dso-nav.sc-dso-header>li.sc-dso-header{margin-bottom:4px}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header{display:block}.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.sc-dso-header>li.sc-dso-header>a.sc-dso-header:visited{color:#275937}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header{margin-bottom:0}.dso-nav.sc-dso-header>li.dso-active.sc-dso-header>a.sc-dso-header,.dso-nav.sc-dso-header>li.is-active.sc-dso-header>a.sc-dso-header{border-bottom:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header{text-decoration:none;font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;white-space:nowrap}.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.dso-nav-main.sc-dso-header>li.sc-dso-header>a.sc-dso-header:active{text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header .dso-dropdown-options.sc-dso-header{left:-1rem;top:calc(100% + 3px)}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header{font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;align-items:center;color:#275937;padding-right:32px}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:hover,.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main.sc-dso-header dso-dropdown-menu.sc-dso-header button.sc-dso-header::after{margin-left:8px;position:absolute;right:0px;top:auto;transform:none}.dso-nav.dso-nav-sub.sc-dso-header>li.sc-dso-header{display:inline-block}.dso-nav.dso-nav-sub.sc-dso-header>li.sc-dso-header>a.sc-dso-header{text-decoration:none;font-size:16px;margin-top:4px;padding:4px 8px 3px}.dso-nav.dso-nav-sub.sc-dso-header>li.sc-dso-header>a.sc-dso-header:hover,.dso-nav.dso-nav-sub.sc-dso-header>li.sc-dso-header>a.sc-dso-header:focus,.dso-nav.dso-nav-sub.sc-dso-header>li.sc-dso-header>a.sc-dso-header:active{text-decoration:underline}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header{margin-left:auto}.dso-nav.sc-dso-header .menu-user-home.sc-dso-header dso-icon.sc-dso-header{height:1em;margin-right:8px;position:relative;top:-2px;width:1.2em}";
 
 const minDesktopViewportWidth = 992;
-let Header = class {
+const Header = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.dsoHeaderClick = index.createEvent(this, "dsoHeaderClick", 7);
-    this.mainMenu = [];
-    this.useDropDownMenu = "auto";
-    /** Used to show the login/logout option. 'none' renders nothing. */
-    this.authStatus = 'none';
-    this.hasSubLogo = false;
-    this.overflowMenuItems = 0;
     this.onWindowResize = index$1.debounce_1(() => {
       this.setDropDownMenu();
       this.setOverflowMenu();
     }, 100);
     this.MenuItem = (item) => {
-      return (index.h("li", { class: item.active ? "dso-active" : undefined }, index.h("a", { href: item.url, "aria-current": item.active ? "page" : undefined, onClick: e => this.clickHandler(e, 'menuItem', { menuItem: item }) }, item.label)));
+      return (index.h("li", { class: item.active ? "dso-active" : undefined }, index.h("a", { href: item.url, "aria-current": item.active ? "page" : undefined, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem: item }) }, item.label)));
     };
+    this.mainMenu = [];
+    this.useDropDownMenu = "auto";
+    this.authStatus = "none";
+    this.loginUrl = undefined;
+    this.logoutUrl = undefined;
+    this.userProfileName = undefined;
+    this.userProfileUrl = undefined;
+    this.userHomeUrl = undefined;
+    this.showDropDown = undefined;
+    this.hasSubLogo = false;
+    this.overflowMenuItems = 0;
   }
   clickHandler(e, type, options) {
     var _a, _b;
@@ -37,7 +42,6 @@ let Header = class {
       url: (_a = options === null || options === void 0 ? void 0 : options.url) !== null && _a !== void 0 ? _a : (_b = options === null || options === void 0 ? void 0 : options.menuItem) === null || _b === void 0 ? void 0 : _b.url,
     });
   }
-  ;
   setShowDropDown(value) {
     if (value === "auto") {
       this.setDropDownMenu();
@@ -73,7 +77,7 @@ let Header = class {
     if (this.showDropDown) {
       return;
     }
-    if (this.overflowMenuItems != 0) {
+    if (this.overflowMenuItems !== 0) {
       this.overflowMenuItems = 0;
       return;
     }
@@ -99,23 +103,13 @@ let Header = class {
     return (index.h(index.Fragment, null, index.h("div", { class: clsx_m.clsx("dso-header", {
         ["use-drop-down"]: this.showDropDown,
         ["has-sub-logo"]: this.hasSubLogo,
-      }), 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 && this.mainMenu && this.mainMenu.length > 0 && (index.h("div", { class: "dropdown" }, index.h("dso-dropdown-menu", { "dropdown-align": "right" }, index.h("button", { type: "button", slot: "toggle" }, index.h("span", null, "Menu")), index.h("div", { class: "dso-dropdown-options" }, index.h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (index.h("li", null, index.h("a", { href: this.userHomeUrl, onClick: e => this.clickHandler(e, 'userHome', { url: this.userHomeUrl }) }, "Mijn Omgevingsloket"))), this.userProfileUrl &&
-      this.userProfileName &&
-      this.authStatus === 'loggedIn' && (index.h("li", null, index.h("a", { href: this.userProfileUrl, onClick: e => this.clickHandler(e, 'profile', { url: this.userProfileUrl }) }, this.userProfileName, index.h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === 'loggedOut' && (index.h("li", null, this.loginUrl
-      ? index.h("a", { href: this.loginUrl, onClick: e => this.clickHandler(e, 'login', { url: this.loginUrl }) }, "Inloggen")
-      : index.h("button", { type: "button", onClick: e => this.clickHandler(e, 'login') }, "Inloggen"))), this.authStatus === 'loggedIn' && (index.h("li", null, this.logoutUrl
-      ? index.h("a", { href: this.logoutUrl, onClick: e => this.clickHandler(e, 'logout', { url: this.logoutUrl }) }, "Uitloggen")
-      : index.h("button", { type: "button", onClick: e => this.clickHandler(e, 'logout') }, "Uitloggen")))))))), !this.showDropDown && (index.h(index.Fragment, null, index.h("div", { class: "dso-header-session" }, this.userProfileUrl &&
-      this.userProfileName &&
-      this.authStatus === 'loggedIn' && (index.h("div", { class: "profile" }, index.h("span", { class: "profile-label" }, "Welkom:"), index.h("a", { href: this.userProfileUrl, onClick: e => this.clickHandler(e, 'profile', { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === 'loggedOut' && (index.h("div", { class: "login" }, this.loginUrl
-      ? index.h("a", { href: this.loginUrl, onClick: e => this.clickHandler(e, 'login', { url: this.loginUrl }) }, "Inloggen")
-      : index.h("button", { class: "dso-tertiary", type: "button", onClick: e => this.clickHandler(e, 'login') }, "Inloggen"))), this.authStatus === 'loggedIn' && (index.h("div", { class: "logout" }, this.logoutUrl
-      ? index.h("a", { href: this.logoutUrl, onClick: e => this.clickHandler(e, 'logout', { url: this.logoutUrl }) }, "Uitloggen")
-      : index.h("button", { class: "dso-tertiary", type: "button", onClick: e => this.clickHandler(e, 'logout') }, "Uitloggen")))), ((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (index.h("nav", { class: "dso-navbar" }, index.h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu && this.mainMenu
-      .filter((_, index) => index < this.mainMenu.length - this.overflowMenuItems)
-      .map(this.MenuItem), this.overflowMenuItems > 0 && (index.h("li", null, index.h("dso-dropdown-menu", { "dropdown-align": "left" }, index.h("button", { type: "button", slot: "toggle" }, index.h("span", null, "Meer")), index.h("div", { class: "dso-dropdown-options" }, index.h("ul", null, this.mainMenu && this.mainMenu
-      .filter((_, index) => index >= this.mainMenu.length - this.overflowMenuItems)
-      .map(this.MenuItem)))))), this.userHomeUrl && (index.h("li", { class: "menu-user-home" }, index.h("a", { href: this.userHomeUrl, onClick: e => this.clickHandler(e, 'userHome', { url: this.userHomeUrl }) }, index.h("dso-icon", { icon: "user-line" }), "Mijn Omgevingsloket")))))))))));
+      }), 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 && this.mainMenu && this.mainMenu.length > 0 && (index.h("div", { class: "dropdown" }, index.h("dso-dropdown-menu", { "dropdown-align": "right" }, index.h("button", { type: "button", slot: "toggle" }, index.h("span", null, "Menu")), index.h("div", { class: "dso-dropdown-options" }, index.h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (index.h("li", null, index.h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, "Mijn Omgevingsloket"))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (index.h("li", null, index.h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, index.h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (index.h("li", null, this.loginUrl ? (index.h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, "Inloggen")) : (index.h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, "Inloggen")))), this.authStatus === "loggedIn" && (index.h("li", null, this.logoutUrl ? (index.h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, "Uitloggen")) : (index.h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, "Uitloggen"))))))))), !this.showDropDown && (index.h(index.Fragment, null, index.h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (index.h("div", { class: "profile" }, index.h("span", { class: "profile-label" }, "Welkom:"), index.h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (index.h("div", { class: "login" }, this.loginUrl ? (index.h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, "Inloggen")) : (index.h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, "Inloggen")))), this.authStatus === "loggedIn" && (index.h("div", { class: "logout" }, this.logoutUrl ? (index.h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, "Uitloggen")) : (index.h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, "Uitloggen"))))), ((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (index.h("nav", { class: "dso-navbar" }, index.h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu &&
+      this.mainMenu
+        .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)
+        .map(this.MenuItem), this.overflowMenuItems > 0 && (index.h("li", null, index.h("dso-dropdown-menu", { "dropdown-align": "left" }, index.h("button", { type: "button", slot: "toggle" }, index.h("span", null, "Meer")), index.h("div", { class: "dso-dropdown-options" }, index.h("ul", null, this.mainMenu &&
+      this.mainMenu
+        .filter((_, index) => this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems)
+        .map(this.MenuItem)))))), this.userHomeUrl && (index.h("li", { class: "menu-user-home" }, index.h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, index.h("dso-icon", { icon: "user-line" }), "Mijn Omgevingsloket")))))))))));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {