@dso-toolkit/core 45.1.0 → 46.0.0

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

@@ -1,5 +1,5 @@
-import { h, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-771c1291.js';
-import { c as createIdentifier } from './create-identifier-22acd3a3.js';
+import { h, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-1a4dda48.js';
+import { c as createIdentifier } from './create-identifier-51ee50c4.js';
 
 var DaysOfWeek;
 (function (DaysOfWeek) {
@@ -12,9 +12,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) &&
@@ -34,7 +34,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]);
   }
@@ -45,11 +45,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}`;
 }
 /**
@@ -62,21 +62,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;
 }
@@ -141,7 +141,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();
@@ -154,7 +154,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);
       }
@@ -176,75 +176,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 (h("table", { class: "dso-date__table", role: "grid", "aria-labelledby": labelledById, 
-    // @ts-ignore
-    onFocusin: onFocusIn, onMouseDown: onMouseDown },
+  return (h("table", { class: "dso-date__table", role: "grid", "aria-labelledby": labelledById, onFocusin: onFocusIn, onMouseDown: onMouseDown },
     h("thead", null,
-      h("tr", null, mapWithOffset(localization.dayNames, firstDayOfWeek, dayName => (h("th", { class: "dso-date__table-header", scope: "col" },
+      h("tr", null, mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (h("th", { class: "dso-date__table-header", scope: "col" },
         h("span", { "aria-hidden": "true" }, dayName.substr(0, 2)),
         h("span", { class: "dso-date__vhidden" }, dayName)))))),
-    h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "dso-date__row" }, week.map(day => (h("td", { class: "dso-date__cell", role: "gridcell", "aria-selected": isEqual(day, selectedDate) ? "true" : undefined, "aria-current": isEqual(day, today) ? "date" : undefined },
+    h("tbody", null, chunk(days, 7).map((week) => (h("tr", { class: "dso-date__row" }, week.map((day) => (h("td", { class: "dso-date__cell", role: "gridcell", "aria-selected": isEqual(day, selectedDate) ? "true" : undefined, "aria-current": isEqual(day, today) ? "date" : undefined },
       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:calc(16px + 1.5rem);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:calc(16px + 1.5rem)}.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}";
+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;
@@ -262,7 +239,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;
@@ -280,7 +257,7 @@ function cleanValue(input, regex) {
   input.selectionStart = input.selectionEnd = newCursor;
   return newValue;
 }
-let DsoDatePicker = class {
+const DsoDatePicker = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.dsoDateChange = createEvent(this, "dsoDateChange", 7);
@@ -296,43 +273,6 @@ let DsoDatePicker = class {
     this.dialogLabelId = 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.
      */
@@ -361,14 +301,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) => {
@@ -386,9 +326,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;
@@ -427,7 +368,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);
@@ -484,10 +425,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;
@@ -495,10 +441,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;
@@ -537,6 +483,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.
@@ -567,14 +527,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);
@@ -588,7 +548,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(() => {
@@ -630,7 +590,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;
@@ -657,8 +617,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) {
@@ -667,11 +627,11 @@ let DsoDatePicker = class {
     if (maxDate) {
       maxYear = Math.min(maxYear, maxDate.getFullYear());
     }
-    return (h(Host, null, h("div", { class: ({ 'dso-date': true, 'dso-visible': this.visible }) }, 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("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" })), h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { class: {
+    return (h(Host, null, h("div", { class: { "dso-date": true, "dso-visible": this.visible } }, 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("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" })), h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), 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 }, h("div", { class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { class: "dso-date__close", ref: element => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { icon: "times" }), h("span", { class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", null, h("h2", { id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { class: "dso-date__select" }, h("select", { id: this.monthSelectId, class: "dso-date__select--month", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth }, month)))), h("div", { class: "dso-date__select-label", "aria-hidden": "true" }, h("span", null, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { icon: "chevron-down" }))), h("label", { htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { class: "dso-date__select" }, h("select", { id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { class: "dso-date__select-label", "aria-hidden": "true" }, h("span", null, this.focusedDay.getFullYear()), h("dso-icon", { icon: "chevron-down" })))), h("div", { class: "dso-date__nav" }, h("button", { class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { icon: "chevron-left" }), h("span", { class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { icon: "chevron-right" }), h("span", { class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), 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 }, h("div", { class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { icon: "times" }), h("span", { class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", null, h("h2", { id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { class: "dso-date__select" }, h("select", { id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth }, month)))), h("div", { class: "dso-date__select-label", "aria-hidden": "true" }, h("span", null, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { icon: "chevron-down" }))), h("label", { htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { class: "dso-date__select" }, h("select", { id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { class: "dso-date__select-label", "aria-hidden": "true" }, h("span", null, this.focusedDay.getFullYear()), h("dso-icon", { icon: "chevron-down" })))), h("div", { class: "dso-date__nav" }, h("button", { class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { icon: "chevron-left" }), h("span", { class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { icon: "chevron-right" }), h("span", { class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), 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 getElement(this); }
 };

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

@@ -1,25 +1,12 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-771c1291.js';
-import { t as tabbable } from './index.esm-4510c39e.js';
-import { v as v4 } from './v4-fa4bb814.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-1a4dda48.js';
+import { t as tabbable } from './index.esm-8fc07ad8.js';
+import { v as v4 } from './v4-d398bde5.js';
 
 const dropdownMenuCss = ":host(:focus){outline:none}:host{display:inline-block;position:relative}";
 
-let DropdownMenu = class {
+const DropdownMenu = class {
   constructor(hostRef) {
     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;
@@ -53,6 +40,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];
@@ -74,7 +64,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");
@@ -118,9 +108,7 @@ let DropdownMenu = class {
     if (activeEl.shadowRoot) {
       return this.getActiveElement(activeEl.shadowRoot);
     }
-    else {
-      return activeEl;
-    }
+    return activeEl;
   }
   tabInPopup(direction) {
     const tabs = this.tabbables;