@dso-toolkit/core 45.1.0 → 46.0.0

package/dist/collection/components/badge/badge.js

@@ -1,35 +1,43 @@
-import { Component, h, Prop } from '@stencil/core';
-import clsx from 'clsx';
+import { h } from "@stencil/core";
+import clsx from "clsx";
 export class Badge {
+  constructor() {
+    this.status = undefined;
+  }
   render() {
-    return (h("span", { class: clsx('dso-badge', { [`badge-${this.status}`]: this.status }) },
-      h("slot", null)));
+    return (h("span", { class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", null)));
   }
   static get is() { return "dso-badge"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["badge.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["badge.css"]
-  }; }
-  static get properties() { return {
-    "status": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'primary' | 'success' | 'info' | 'warning' | 'danger' | 'outline'",
-        "resolved": "\"danger\" | \"info\" | \"outline\" | \"primary\" | \"success\" | \"warning\" | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "status",
-      "reflect": false
-    }
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["badge.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["badge.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "status": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"outline\"",
+          "resolved": "\"danger\" | \"info\" | \"outline\" | \"primary\" | \"success\" | \"warning\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "status",
+        "reflect": false
+      }
+    };
+  }
 }

package/dist/collection/components/banner/banner.js

@@ -1,35 +1,43 @@
-import { Component, h, Prop } from '@stencil/core';
-import clsx from 'clsx';
+import { h } from "@stencil/core";
+import clsx from "clsx";
 export class Banner {
+  constructor() {
+    this.status = undefined;
+  }
   render() {
-    return (h("section", { class: clsx('dso-banner', `alert-${this.status}`), role: "alert" },
-      h("slot", null)));
+    return (h("section", { class: clsx("dso-banner", `alert-${this.status}`), role: "alert" }, h("slot", null)));
   }
   static get is() { return "dso-banner"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["banner.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["banner.css"]
-  }; }
-  static get properties() { return {
-    "status": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'warning' | 'danger'",
-        "resolved": "\"danger\" | \"warning\"",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "status",
-      "reflect": false
-    }
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["banner.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["banner.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "status": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"warning\" | \"danger\"",
+          "resolved": "\"danger\" | \"warning\"",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "status",
+        "reflect": false
+      }
+    };
+  }
 }

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

@@ -1,50 +1,29 @@
 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"],
 };
 export default localization;

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { isEqual, printDutchDate } from "./date-utils";
-export const DatePickerDay = ({ focusedDay, today, day, onDaySelect, onKeyboardNavigation, focusedDayRef, inRange }) => {
+export 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();
@@ -13,11 +13,9 @@ export const DatePickerDay = ({ focusedDay, today, day, onDaySelect, onKeyboardN
       "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);
       }
-    } },
-    h("span", { "aria-hidden": "true" }, day.getDate()),
-    h("span", { class: "dso-date__vhidden" }, printDutchDate(day))));
+    } }, h("span", { "aria-hidden": "true" }, day.getDate()), h("span", { class: "dso-date__vhidden" }, printDutchDate(day))));
 };

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

@@ -14,16 +14,8 @@ function mapWithOffset(array, startingOffset, mapFn) {
     return mapFn(array[adjustedIndex]);
   });
 }
-export const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, localization, firstDayOfWeek, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onMouseDown, onFocusIn }) => {
+export 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 },
-    h("thead", null,
-      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(DatePickerDay, { day: day, today: today, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef }))))))))));
+  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("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(DatePickerDay, { day: day, today: today, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef }))))))))));
 };

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

@@ -25,7 +25,7 @@
 .dso-date__input {
   display: block;
   width: 100%;
-  height: calc(16px + 1.5rem);
+  height: 40px;
   padding: 6px 14px;
   font-size: 1rem;
   line-height: 1.5;
@@ -70,7 +70,7 @@
   border-width: 1px;
 }
 .dso-date__input[type=text] {
-  line-height: calc(16px + 1.5rem);
+  line-height: 40px;
 }
 .dso-date__input[size] {
   width: auto;