npm - @dso-toolkit/core - Versions diffs - 61.0.0 → 62.0.0 - Mend

@dso-toolkit/core 61.0.0 → 62.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d46ec033.js');
 /**
- * @param value date string in Dutch format DD-MM-YYYY
+ * dd-mm-yyyy to yyyy-mm-dd
  */
 function parseToValueFormat(value) {
   if (!value) {
@@ -24,63 +24,17 @@ function parseToValueFormat(value) {
   }
   return value;
 }
-function createDate(year, month, day) {
-  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) &&
-    monthInt > 0 && // month must be 1-12
-    monthInt <= 12 &&
-    dayInt > 0 && // day must be 1-31
-    dayInt <= 31 &&
-    yearInt > 0;
-  if (isValid) {
-    return new Date(yearInt, monthInt - 1, dayInt);
-  }
-}
-/**
- * @param value date string in format D-M-YYYY
- */
-function parseDate(value) {
-  if (!value) {
-    return;
-  }
-  const matches = value.split("-");
-  if (matches.length === 3 &&
-    typeof matches[0] === "string" &&
-    typeof matches[1] === "string" &&
-    typeof matches[2] === "string" &&
-    matches[0].length === 4) {
-    return createDate(matches[0], matches[1], matches[2]);
-  }
-}
 /**
- * print date in format DD-MM-YYYY
- * @param date
+ * yyyy-mm-dd to dd-mm-yyyy
  */
-function printDutchDate(date) {
+function parseToDutchFormat(date) {
   if (!date) {
     return "";
   }
-  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}`;
-}
-/**
- * Ensures date is within range, returns min or max if out of bounds
- */
-function clamp(date, min, max) {
-  const time = date.getTime();
-  if (min && min instanceof Date && time < min.getTime()) {
-    return min;
-  }
-  if (max && max instanceof Date && time > max.getTime()) {
-    return max;
-  }
-  return date;
+  const dd = date.getDate().toString(10).padStart(2, "0");
+  const mm = (date.getMonth() + 1).toString(10).padStart(2, "0");
+  const yyyy = date.getFullYear().toString(10);
+  return `${dd}-${mm}-${yyyy}`;
 }
 const datePickerCss = ".sc-dso-date-picker-h{display:block}[invalid].sc-dso-date-picker-h:not([invalid=false]) .dso-date__input.sc-dso-date-picker{border-color:#ce3f51}.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__input.sc-dso-date-picker::-webkit-calendar-picker-indicator{position:relative;inset-inline-end:-8px;font-size:1.75rem;filter:invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%)}";
@@ -126,40 +80,29 @@ const DsoDatePicker = class {
       if (!(target instanceof HTMLInputElement)) {
         return;
       }
-      const { value } = target;
+      const { valueAsDate, validity } = target;
       const event = {
-        originalEvent: e,
         component: "dso-date-picker",
-        value,
-        valueAsDate: parseDate(value),
+        originalEvent: e,
+        validity,
+        value: parseToDutchFormat(valueAsDate),
+        valueAsDate: valueAsDate !== null && valueAsDate !== void 0 ? valueAsDate : undefined,
       };
-      if (event.valueAsDate) {
-        event.value = printDutchDate(event.valueAsDate);
-      }
-      if (!event.valueAsDate && this.required) {
+      if (validity.valueMissing) {
         event.error = "required";
       }
-      if (event.value && !event.valueAsDate) {
-        event.error = "invalid";
+      else if (validity.rangeUnderflow) {
+        event.error = "min-range";
+        event.valueAsDate = undefined;
       }
-      if (event.valueAsDate && (this.min || this.max)) {
-        const min = parseDate(this.min);
-        const max = parseDate(this.max);
-        const clampValue = clamp(event.valueAsDate, min, max);
-        if (clampValue !== event.valueAsDate && clampValue === min) {
-          event.valueAsDate = undefined;
-          event.error = "min-range";
-        }
-        else if (clampValue !== event.valueAsDate && clampValue === max) {
-          event.valueAsDate = undefined;
-          event.error = "max-range";
-        }
+      else if (validity.rangeOverflow) {
+        event.error = "max-range";
+        event.valueAsDate = undefined;
       }
-      this.value = typeof value === "string" ? value : event.value;
-      if (this.value !== this.previousValue) {
-        this.dsoDateChange.emit(event);
-        this.previousValue = this.value;
+      else if (!validity.valid) {
+        event.error = "invalid";
       }
+      this.dsoDateChange.emit(event);
     };
     this.name = "dso-date";
     this.identifier = undefined;

package/dist/cjs/dso-date-picker.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-date-picker.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/date-picker/date-utils.ts","src/components/date-picker/date-picker.scss?tag=dso-date-picker&encapsulation=scoped","src/components/date-picker/date-picker.tsx"],"sourcesContent":["/*\r\n @param value date string in Dutch format DD-MM-YYYY\r\n /\r\nexport function parseToValueFormat(value: string \| undefined): string \| undefined {\r\n if (!value) {\r\n return;\r\n }\r\n\r\n const matches = value.split(\"-\");\r\n\r\n if (\r\n matches.length === 3 &&\r\n typeof matches[0] === \"string\" &&\r\n typeof matches[1] === \"string\" &&\r\n typeof matches[2] === \"string\" &&\r\n matches[2].length === 4\r\n ) {\r\n return matches\r\n .map((match) => (match.length === 1 ? `0${match}` : match))\r\n .reverse()\r\n .join(\"-\");\r\n }\r\n\r\n return value;\r\n}\r\n\r\nexport function createDate(year: string, month: string, day: string): Date \| undefined {\r\n const dayInt = parseInt(day, 10);\r\n const monthInt = parseInt(month, 10);\r\n const yearInt = parseInt(year, 10);\r\n\r\n const isValid =\r\n Number.isInteger(yearInt) && // all parts should be integers\r\n Number.isInteger(monthInt) &&\r\n Number.isInteger(dayInt) &&\r\n monthInt > 0 && // month must be 1-12\r\n monthInt <= 12 &&\r\n dayInt > 0 && // day must be 1-31\r\n dayInt <= 31 &&\r\n yearInt > 0;\r\n\r\n if (isValid) {\r\n return new Date(yearInt, monthInt - 1, dayInt);\r\n }\r\n}\r\n\r\n/\r\n @param value date string in format D-M-YYYY\r\n /\r\nexport function parseDate(value: string \| undefined): Date \| undefined {\r\n if (!value) {\r\n return;\r\n }\r\n\r\n const matches = value.split(\"-\");\r\n\r\n if (\r\n matches.length === 3 &&\r\n typeof matches[0] === \"string\" &&\r\n typeof matches[1] === \"string\" &&\r\n typeof matches[2] === \"string\" &&\r\n matches[0].length === 4\r\n ) {\r\n return createDate(matches[0], matches[1], matches[2]);\r\n }\r\n}\r\n\r\n/\r\n print date in format DD-MM-YYYY\r\n * @param date\r\n /\r\nexport function printDutchDate(date: Date \| undefined): string {\r\n if (!date) {\r\n return \"\";\r\n }\r\n\r\n const d = date.getDate().toString(10).padStart(2, \"0\");\r\n const m = (date.getMonth() + 1).toString(10).padStart(2, \"0\");\r\n const y = date.getFullYear().toString(10).padStart(2, \"0\");\r\n\r\n return `${d}-${m}-${y}`;\r\n}\r\n\r\n/\r\n Ensures date is within range, returns min or max if out of bounds\r\n /\r\nexport function clamp(date: Date, min?: Date, max?: Date): Date {\r\n const time = date.getTime();\r\n\r\n if (min && min instanceof Date && time < min.getTime()) {\r\n return min;\r\n }\r\n\r\n if (max && max instanceof Date && time > max.getTime()) {\r\n return max;\r\n }\r\n\r\n return date;\r\n}\r\n","@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@use \"date-picker.variables\" as core-date-picker-variables;\r\n\r\n:host {\r\n display: block;\r\n\r\n &[invalid]:not([invalid=\"false\"]) {\r\n .dso-date__input {\r\n border-color: colors.$danger-color;\r\n }\r\n }\r\n}\r\n\r\n.dso-date__input {\r\n @include form-control.root();\r\n\r\n &::-webkit-calendar-picker-indicator {\r\n position: relative;\r\n inset-inline-end: -8px;\r\n\r\n font-size: 1.75rem;\r\n\r\n filter: invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%);\r\n }\r\n}\r\n","import { Component, ComponentInterface, Prop, Element, h, Event, EventEmitter } from \"@stencil/core\";\r\n\r\nimport { DatePickerChangeEvent, DatePickerFocusEvent, DatePickerKeyboardEvent } from \"./date-picker.interfaces\";\r\nimport { clamp, parseDate, parseToValueFormat, printDutchDate } from \"./date-utils\";\r\n\r\n@Component({\r\n tag: \"dso-date-picker\",\r\n styleUrl: \"date-picker.scss\",\r\n shadow: false,\r\n scoped: true,\r\n})\r\nexport class DsoDatePicker implements ComponentInterface {\r\n private previousValue?: string;\r\n\r\n /\r\n Reference to host HTML element.\r\n /\r\n @Element()\r\n element!: HTMLDsoDatePickerElement;\r\n\r\n /\r\n Name of the date picker input.\r\n /\r\n @Prop()\r\n name = \"dso-date\";\r\n\r\n /\r\n Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.\r\n /\r\n @Prop()\r\n identifier: string \| undefined;\r\n\r\n /\r\n Makes the date picker input component disabled. This prevents users from being able to\r\n * interact with the input, and conveys its inactive state to assistive technologies.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Should the input be marked as required?\r\n /\r\n @Prop({ reflect: true })\r\n required = false;\r\n\r\n /\r\n Is input invalid?\r\n /\r\n @Prop({ reflect: true })\r\n invalid?: boolean;\r\n\r\n /\r\n ID of element that describes the input element\r\n /\r\n @Prop()\r\n describedBy?: string;\r\n\r\n /\r\n Should the input be focused on load?\r\n /\r\n @Prop()\r\n dsoAutofocus = false;\r\n\r\n /\r\n Date value. Must be in Dutch date format: DD-MM-YYYY.\r\n /\r\n @Prop()\r\n value = \"\";\r\n\r\n /\r\n Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n * This setting can be used alone or together with the max property.\r\n /\r\n @Prop()\r\n min: string \| undefined;\r\n\r\n /\r\n Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n * This setting can be used alone or together with the min property.\r\n /\r\n @Prop()\r\n max: string \| undefined;\r\n\r\n /\r\n Events section.\r\n /\r\n\r\n /\r\n Event emitted when a date is selected.\r\n /\r\n @Event()\r\n dsoDateChange!: EventEmitter<DatePickerChangeEvent>;\r\n\r\n /\r\n Event emitted the date picker input is blurred.\r\n /\r\n @Event()\r\n dsoBlur!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n /\r\n Event emitted on key up in the date picker input.\r\n /\r\n @Event()\r\n dsoKeyUp!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n /\r\n Event emitted on key down in the date picker input.\r\n /\r\n @Event()\r\n dsoKeyDown!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n /\r\n Event emitted the date picker input is focused.\r\n */\r\n @Event()\r\n dsoFocus!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n private handleBlur = (event: FocusEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoBlur.emit({\r\n originalEvent: event,\r\n component: \"dso-date-picker\",\r\n });\r\n };\r\n\r\n private handleFocus = (event: FocusEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoFocus.emit({\r\n originalEvent: event,\r\n component: \"dso-date-picker\",\r\n });\r\n };\r\n\r\n private handleKeyUp = (event: KeyboardEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoKeyUp.emit({\r\n component: \"dso-date-picker\",\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoKeyDown.emit({\r\n component: \"dso-date-picker\",\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n private handleInputChange = (e: Event) => {\r\n const target = e.target;\r\n\r\n if (!(target instanceof HTMLInputElement)) {\r\n return;\r\n }\r\n\r\n const { value } = target;\r\n\r\n const event: DatePickerChangeEvent = {\r\n originalEvent: e,\r\n component: \"dso-date-picker\",\r\n value,\r\n valueAsDate: parseDate(value),\r\n };\r\n\r\n if (event.valueAsDate) {\r\n event.value = printDutchDate(event.valueAsDate);\r\n }\r\n\r\n if (!event.valueAsDate && this.required) {\r\n event.error = \"required\";\r\n }\r\n\r\n if (event.value && !event.valueAsDate) {\r\n event.error = \"invalid\";\r\n }\r\n\r\n if (event.valueAsDate && (this.min \|\| this.max)) {\r\n const min = parseDate(this.min);\r\n const max = parseDate(this.max);\r\n const clampValue = clamp(event.valueAsDate, min, max);\r\n\r\n if (clampValue !== event.valueAsDate && clampValue === min) {\r\n event.valueAsDate = undefined;\r\n event.error = \"min-range\";\r\n } else if (clampValue !== event.valueAsDate && clampValue === max) {\r\n event.valueAsDate = undefined;\r\n event.error = \"max-range\";\r\n }\r\n }\r\n\r\n this.value = typeof value === \"string\" ? value : event.value;\r\n\r\n if (this.value !== this.previousValue) {\r\n this.dsoDateChange.emit(event);\r\n this.previousValue = this.value;\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <input\r\n type=\"date\"\r\n id={this.identifier}\r\n class=\"dso-date__input\"\r\n value={parseToValueFormat(this.value)}\r\n name={this.name}\r\n min={parseToValueFormat(this.min)}\r\n max={parseToValueFormat(this.max)}\r\n disabled={this.disabled \|\| undefined}\r\n required={this.required \|\| undefined}\r\n aria-autocomplete=\"none\"\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={this.describedBy}\r\n autoComplete=\"off\"\r\n autofocus={this.dsoAutofocus \|\| undefined}\r\n onBlur={this.handleBlur}\r\n onFocus={this.handleFocus}\r\n onKeyUp={this.handleKeyUp}\r\n onKeyDown={this.handleKeyDown}\r\n onChange={this.handleInputChange}\r\n />\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-date-picker.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/date-picker/date-utils.ts","src/components/date-picker/date-picker.scss?tag=dso-date-picker&encapsulation=scoped","src/components/date-picker/date-picker.tsx"],"sourcesContent":["/*\r\n dd-mm-yyyy to yyyy-mm-dd\r\n /\r\nexport function parseToValueFormat(value: string \| undefined): string \| undefined {\r\n if (!value) {\r\n return;\r\n }\r\n\r\n const matches = value.split(\"-\");\r\n\r\n if (\r\n matches.length === 3 &&\r\n typeof matches[0] === \"string\" &&\r\n typeof matches[1] === \"string\" &&\r\n typeof matches[2] === \"string\" &&\r\n matches[2].length === 4\r\n ) {\r\n return matches\r\n .map((match) => (match.length === 1 ? `0${match}` : match))\r\n .reverse()\r\n .join(\"-\");\r\n }\r\n\r\n return value;\r\n}\r\n\r\n/\r\n yyyy-mm-dd to dd-mm-yyyy\r\n /\r\nexport function parseToDutchFormat(date: Date \| null): string {\r\n if (!date) {\r\n return \"\";\r\n }\r\n\r\n const dd = date.getDate().toString(10).padStart(2, \"0\");\r\n const mm = (date.getMonth() + 1).toString(10).padStart(2, \"0\");\r\n const yyyy = date.getFullYear().toString(10);\r\n\r\n return `${dd}-${mm}-${yyyy}`;\r\n}\r\n","@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@use \"date-picker.variables\" as core-date-picker-variables;\r\n\r\n:host {\r\n display: block;\r\n\r\n &[invalid]:not([invalid=\"false\"]) {\r\n .dso-date__input {\r\n border-color: colors.$danger-color;\r\n }\r\n }\r\n}\r\n\r\n.dso-date__input {\r\n @include form-control.root();\r\n\r\n &::-webkit-calendar-picker-indicator {\r\n position: relative;\r\n inset-inline-end: -8px;\r\n\r\n font-size: 1.75rem;\r\n\r\n filter: invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%);\r\n }\r\n}\r\n","import { Component, ComponentInterface, Prop, Element, h, Event, EventEmitter } from \"@stencil/core\";\r\n\r\nimport { DatePickerChangeEvent, DatePickerFocusEvent, DatePickerKeyboardEvent } from \"./date-picker.interfaces\";\r\nimport { parseToValueFormat, parseToDutchFormat } from \"./date-utils\";\r\n\r\n@Component({\r\n tag: \"dso-date-picker\",\r\n styleUrl: \"date-picker.scss\",\r\n shadow: false,\r\n scoped: true,\r\n})\r\nexport class DsoDatePicker implements ComponentInterface {\r\n /\r\n Reference to host HTML element.\r\n /\r\n @Element()\r\n element!: HTMLDsoDatePickerElement;\r\n\r\n /\r\n Name of the date picker input.\r\n /\r\n @Prop()\r\n name = \"dso-date\";\r\n\r\n /\r\n Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.\r\n /\r\n @Prop()\r\n identifier: string \| undefined;\r\n\r\n /\r\n Makes the date picker input component disabled. This prevents users from being able to\r\n * interact with the input, and conveys its inactive state to assistive technologies.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Should the input be marked as required?\r\n /\r\n @Prop({ reflect: true })\r\n required = false;\r\n\r\n /\r\n Is input invalid?\r\n /\r\n @Prop({ reflect: true })\r\n invalid?: boolean;\r\n\r\n /\r\n ID of element that describes the input element\r\n /\r\n @Prop()\r\n describedBy?: string;\r\n\r\n /\r\n Should the input be focused on load?\r\n /\r\n @Prop()\r\n dsoAutofocus = false;\r\n\r\n /\r\n Date value. Must be in Dutch date format: DD-MM-YYYY.\r\n /\r\n @Prop({ reflect: true })\r\n value = \"\";\r\n\r\n /\r\n Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n * This setting can be used alone or together with the max property.\r\n /\r\n @Prop()\r\n min: string \| undefined;\r\n\r\n /\r\n Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n * This setting can be used alone or together with the min property.\r\n /\r\n @Prop()\r\n max: string \| undefined;\r\n\r\n /\r\n Events section.\r\n /\r\n\r\n /\r\n Event emitted when a date is selected.\r\n /\r\n @Event()\r\n dsoDateChange!: EventEmitter<DatePickerChangeEvent>;\r\n\r\n /\r\n Event emitted the date picker input is blurred.\r\n /\r\n @Event()\r\n dsoBlur!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n /\r\n Event emitted on key up in the date picker input.\r\n /\r\n @Event()\r\n dsoKeyUp!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n /\r\n Event emitted on key down in the date picker input.\r\n /\r\n @Event()\r\n dsoKeyDown!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n /\r\n Event emitted the date picker input is focused.\r\n */\r\n @Event()\r\n dsoFocus!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n private handleBlur = (event: FocusEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoBlur.emit({\r\n originalEvent: event,\r\n component: \"dso-date-picker\",\r\n });\r\n };\r\n\r\n private handleFocus = (event: FocusEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoFocus.emit({\r\n originalEvent: event,\r\n component: \"dso-date-picker\",\r\n });\r\n };\r\n\r\n private handleKeyUp = (event: KeyboardEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoKeyUp.emit({\r\n component: \"dso-date-picker\",\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoKeyDown.emit({\r\n component: \"dso-date-picker\",\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n private handleInputChange = (e: Event) => {\r\n const target = e.target;\r\n\r\n if (!(target instanceof HTMLInputElement)) {\r\n return;\r\n }\r\n\r\n const { valueAsDate, validity } = target;\r\n\r\n const event: DatePickerChangeEvent = {\r\n component: \"dso-date-picker\",\r\n originalEvent: e,\r\n validity,\r\n value: parseToDutchFormat(valueAsDate),\r\n valueAsDate: valueAsDate ?? undefined,\r\n };\r\n\r\n if (validity.valueMissing) {\r\n event.error = \"required\";\r\n } else if (validity.rangeUnderflow) {\r\n event.error = \"min-range\";\r\n event.valueAsDate = undefined;\r\n } else if (validity.rangeOverflow) {\r\n event.error = \"max-range\";\r\n event.valueAsDate = undefined;\r\n } else if (!validity.valid) {\r\n event.error = \"invalid\";\r\n }\r\n\r\n this.dsoDateChange.emit(event);\r\n };\r\n\r\n render() {\r\n return (\r\n <input\r\n type=\"date\"\r\n id={this.identifier}\r\n class=\"dso-date__input\"\r\n value={parseToValueFormat(this.value)}\r\n name={this.name}\r\n min={parseToValueFormat(this.min)}\r\n max={parseToValueFormat(this.max)}\r\n disabled={this.disabled \|\| undefined}\r\n required={this.required \|\| undefined}\r\n aria-autocomplete=\"none\"\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={this.describedBy}\r\n autoComplete=\"off\"\r\n autofocus={this.dsoAutofocus \|\| undefined}\r\n onBlur={this.handleBlur}\r\n onFocus={this.handleFocus}\r\n onKeyUp={this.handleKeyUp}\r\n onKeyDown={this.handleKeyDown}\r\n onChange={this.handleInputChange}\r\n />\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-info_2.cjs.entry.js CHANGED Viewed

@@ -41,6 +41,13 @@ const Selectable = class {
     index.registerInstance(this, hostRef);
     this.dsoChange = index.createEvent(this, "dsoChange", 7);
     this.fallbackIdentifier = createIdentifier("DsoSelectable");
+    this.handleOnChange = (e) => {
+      const { target } = e;
+      this.dsoChange.emit({
+        originalEvent: e,
+        checked: target instanceof HTMLInputElement && target.checked,
+      });
+    };
     this.type = undefined;
     this.identifier = undefined;
     this.name = undefined;
@@ -87,7 +94,7 @@ const Selectable = class {
   render() {
     var _a;
     const hasInfo = !!this.host.querySelector('[slot="info"]');
-    return (index.h(index.Fragment, null, index.h("div", { class: clsx.clsx("dso-selectable-container", { "has-info-button": hasInfo }) }, index.h("div", { class: clsx.clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, index.h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: (e) => this.dsoChange.emit(e), onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null))), hasInfo && (index.h(index.Fragment, null, !this.infoFixed && (index.h("dso-info-button", { active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))))), hasInfo && (index.h("dso-info", { id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", null, index.h("slot", { name: "info" }))))));
+    return (index.h(index.Fragment, null, index.h("div", { class: clsx.clsx("dso-selectable-container", { "has-info-button": hasInfo }) }, index.h("div", { class: clsx.clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, index.h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null))), hasInfo && (index.h(index.Fragment, null, !this.infoFixed && (index.h("dso-info-button", { active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))))), hasInfo && (index.h("dso-info", { id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", null, index.h("slot", { name: "info" }))))));
   }
   getIdentifier() {
     var _a;

package/dist/cjs/dso-info_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-info.dso-selectable.entry.cjs.js","mappings":"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","names":["h","Fragment","forceUpdate","clsx"],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx","src/utils/create-identifier.ts","src/components/selectable/selectable.scss?tag=dso-selectable&encapsulation=scoped","src/components/selectable/selectable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n display: block;\r\n\r\n @include info.root();\r\n}\r\n\r\n:host(:not([active]):not([fixed])) {\r\n display: none;\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { h, Component, Event, Prop, EventEmitter, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-info\",\r\n styleUrl: \"./info.scss\",\r\n shadow: true,\r\n})\r\nexport class Info {\r\n /*\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop({ reflect: true })\r\n fixed?: boolean;\r\n\r\n /\r\n Whether the Info is active.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when the user activates the close button.\r\n /\r\n @Event()\r\n dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <slot></slot>\r\n {!this.fixed && (\r\n <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n","/\r\n Form random hash\r\n /\r\nexport function chr4() {\r\n return Math.random().toString(16).slice(-4);\r\n}\r\n\r\n/\r\n Create random identifier with a prefix\r\n * @param prefix\r\n /\r\nexport function createIdentifier(prefix: string): string {\r\n return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n @include selectable.root(\"dso-info\", false);\r\n\r\n &[invalid]:not([invalid=\"false\"]) {\r\n @include selectable.invalid();\r\n }\r\n}\r\n\r\n:host(:not(:last-child)) {\r\n @include selectable.notLastChild();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-selectable-container {\r\n display: inline-block;\r\n position: relative;\r\n padding-inline-start: units.$u4;\r\n\r\n &.has-info-button {\r\n padding-inline-end: units.$u4;\r\n }\r\n\r\n .dso-selectable-input-wrapper {\r\n display: inline-block;\r\n min-height: units.$u3;\r\n\r\n &:focus-within.dso-keyboard-focus {\r\n @include utilities.focus-outline();\r\n }\r\n\r\n input[type=\"radio\"],\r\n input[type=\"checkbox\"] {\r\n &:focus + label::before {\r\n @include selectable.selectableBoxShadow(\r\n selectable.$border-width,\r\n var(--dso-selectable-color, selectable.$valid-color)\r\n );\r\n }\r\n }\r\n }\r\n}\r\n\r\ndso-info-button {\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n}\r\n","import {\r\n h,\r\n Component,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Element,\r\n State,\r\n forceUpdate,\r\n Watch,\r\n Method,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-selectable\",\r\n styleUrl: \"selectable.scss\",\r\n scoped: true,\r\n})\r\nexport class Selectable {\r\n /\r\n Type of Selectable.\r\n \r\n `checkbox`: Multiple options\r\n * `radio`: Single option.\r\n /\r\n @Prop()\r\n type!: \"checkbox\" \| \"radio\";\r\n\r\n /\r\n To set `<input id>` attribute for external references.\r\n /\r\n @Prop()\r\n identifier?: string;\r\n\r\n /\r\n Name of the Selectable. Can be used to group Selectables.\r\n /\r\n @Prop()\r\n name?: string;\r\n\r\n /\r\n The value of the Selectable.\r\n /\r\n @Prop()\r\n value!: string;\r\n\r\n /\r\n Set to true of the current value is not valid.\r\n /\r\n @Prop()\r\n invalid?: boolean;\r\n\r\n /\r\n To link this control to an element that describes it.\r\n /\r\n @Prop()\r\n describedById?: string;\r\n\r\n /\r\n To link this control to an element that labels it.\r\n /\r\n @Prop()\r\n labelledById?: string;\r\n\r\n /\r\n To disable the Selectable.\r\n /\r\n @Prop()\r\n disabled?: boolean;\r\n\r\n /\r\n To mark the Selectable as required.\r\n /\r\n @Prop()\r\n required?: boolean;\r\n\r\n /\r\n Mark the Selectable as checked\r\n /\r\n @Prop()\r\n checked?: boolean;\r\n\r\n /\r\n An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n \r\n Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n /\r\n @Prop()\r\n indeterminate?: boolean;\r\n\r\n /\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop()\r\n infoFixed?: boolean;\r\n\r\n /\r\n Emitted when the user checks or unchecks the Selectable.\r\n /\r\n @Event()\r\n dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoSelectableElement;\r\n\r\n @State()\r\n infoActive = false;\r\n\r\n @State()\r\n keyboardFocus = false;\r\n\r\n /\r\n Method to toggle the Info. Is set to `active` when passed.\r\n \r\n If `active` is not passed, Info is toggled to opposite value.\r\n * @param active\r\n */\r\n @Method()\r\n async toggleInfo(active?: boolean) {\r\n this.infoActive = active ?? !this.infoActive;\r\n }\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n private input: HTMLInputElement \| undefined;\r\n\r\n componentDidLoad() {\r\n this.mutationObserver?.disconnect();\r\n\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n this.mutationObserver.observe(this.host, {\r\n childList: true,\r\n });\r\n\r\n this.setIndeterminate();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n @Watch(\"indeterminate\")\r\n setIndeterminate() {\r\n if (!(this.input instanceof HTMLInputElement) \|\| this.type !== \"checkbox\") {\r\n return;\r\n }\r\n\r\n this.input.indeterminate = !!this.indeterminate;\r\n }\r\n\r\n render() {\r\n const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n return (\r\n <Fragment>\r\n <div class={clsx(\"dso-selectable-container\", { \"has-info-button\": hasInfo })}>\r\n <div class={clsx(\"dso-selectable-input-wrapper\", { \"dso-keyboard-focus\": this.keyboardFocus })}>\r\n <input\r\n type={this.type}\r\n id={this.getIdentifier()}\r\n value={this.value}\r\n name={this.name}\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n aria-labelledBy={this.labelledById}\r\n disabled={this.disabled}\r\n required={this.required}\r\n checked={this.checked}\r\n onChange={(e) => this.dsoChange.emit(e)}\r\n onBlur={() => (this.keyboardFocus = false)}\r\n onKeyUp={() => (this.keyboardFocus = true)}\r\n ref={(el) => (this.input = el)}\r\n />\r\n {!this.labelledById ? (\r\n <label htmlFor={this.getIdentifier()}>\r\n <slot></slot>\r\n </label>\r\n ) : (\r\n <label></label>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <Fragment>\r\n {!this.infoFixed && (\r\n <dso-info-button\r\n active={this.infoActive}\r\n onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n ></dso-info-button>\r\n )}\r\n </Fragment>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <dso-info\r\n id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n fixed={this.infoFixed}\r\n active={this.infoActive}\r\n onDsoClose={() => (this.infoActive = false)}\r\n >\r\n <div>\r\n <slot name=\"info\"></slot>\r\n </div>\r\n </dso-info>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n\r\n private getIdentifier(): string {\r\n return this.identifier ?? this.fallbackIdentifier;\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-info.dso-selectable.entry.cjs.js","mappings":"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","names":["h","Fragment","forceUpdate","clsx"],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx","src/utils/create-identifier.ts","src/components/selectable/selectable.scss?tag=dso-selectable&encapsulation=scoped","src/components/selectable/selectable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n display: block;\r\n\r\n @include info.root();\r\n}\r\n\r\n:host(:not([active]):not([fixed])) {\r\n display: none;\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { h, Component, Event, Prop, EventEmitter, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-info\",\r\n styleUrl: \"./info.scss\",\r\n shadow: true,\r\n})\r\nexport class Info {\r\n /*\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop({ reflect: true })\r\n fixed?: boolean;\r\n\r\n /\r\n Whether the Info is active.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when the user activates the close button.\r\n /\r\n @Event()\r\n dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <slot></slot>\r\n {!this.fixed && (\r\n <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n","/\r\n Form random hash\r\n /\r\nexport function chr4() {\r\n return Math.random().toString(16).slice(-4);\r\n}\r\n\r\n/\r\n Create random identifier with a prefix\r\n * @param prefix\r\n /\r\nexport function createIdentifier(prefix: string): string {\r\n return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n @include selectable.root(\"dso-info\", false);\r\n\r\n &[invalid]:not([invalid=\"false\"]) {\r\n @include selectable.invalid();\r\n }\r\n}\r\n\r\n:host(:not(:last-child)) {\r\n @include selectable.notLastChild();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-selectable-container {\r\n display: inline-block;\r\n position: relative;\r\n padding-inline-start: units.$u4;\r\n\r\n &.has-info-button {\r\n padding-inline-end: units.$u4;\r\n }\r\n\r\n .dso-selectable-input-wrapper {\r\n display: inline-block;\r\n min-height: units.$u3;\r\n\r\n &:focus-within.dso-keyboard-focus {\r\n @include utilities.focus-outline();\r\n }\r\n\r\n input[type=\"radio\"],\r\n input[type=\"checkbox\"] {\r\n &:focus + label::before {\r\n @include selectable.selectableBoxShadow(\r\n selectable.$border-width,\r\n var(--dso-selectable-color, selectable.$valid-color)\r\n );\r\n }\r\n }\r\n }\r\n}\r\n\r\ndso-info-button {\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n}\r\n","import {\r\n h,\r\n Component,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Element,\r\n State,\r\n forceUpdate,\r\n Watch,\r\n Method,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-selectable\",\r\n styleUrl: \"selectable.scss\",\r\n scoped: true,\r\n})\r\nexport class Selectable {\r\n /\r\n Type of Selectable.\r\n \r\n `checkbox`: Multiple options\r\n * `radio`: Single option.\r\n /\r\n @Prop()\r\n type!: \"checkbox\" \| \"radio\";\r\n\r\n /\r\n To set `<input id>` attribute for external references.\r\n /\r\n @Prop()\r\n identifier?: string;\r\n\r\n /\r\n Name of the Selectable. Can be used to group Selectables.\r\n /\r\n @Prop()\r\n name?: string;\r\n\r\n /\r\n The value of the Selectable.\r\n /\r\n @Prop()\r\n value!: string;\r\n\r\n /\r\n Set to true of the current value is not valid.\r\n /\r\n @Prop()\r\n invalid?: boolean;\r\n\r\n /\r\n To link this control to an element that describes it.\r\n /\r\n @Prop()\r\n describedById?: string;\r\n\r\n /\r\n To link this control to an element that labels it.\r\n /\r\n @Prop()\r\n labelledById?: string;\r\n\r\n /\r\n To disable the Selectable.\r\n /\r\n @Prop()\r\n disabled?: boolean;\r\n\r\n /\r\n To mark the Selectable as required.\r\n /\r\n @Prop()\r\n required?: boolean;\r\n\r\n /\r\n Mark the Selectable as checked\r\n /\r\n @Prop()\r\n checked?: boolean;\r\n\r\n /\r\n An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n \r\n Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n /\r\n @Prop()\r\n indeterminate?: boolean;\r\n\r\n /\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop()\r\n infoFixed?: boolean;\r\n\r\n /\r\n Emitted when the user checks or unchecks the Selectable.\r\n /\r\n @Event()\r\n dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoSelectableElement;\r\n\r\n @State()\r\n infoActive = false;\r\n\r\n @State()\r\n keyboardFocus = false;\r\n\r\n /\r\n Method to toggle the Info. Is set to `active` when passed.\r\n \r\n If `active` is not passed, Info is toggled to opposite value.\r\n * @param active\r\n */\r\n @Method()\r\n async toggleInfo(active?: boolean) {\r\n this.infoActive = active ?? !this.infoActive;\r\n }\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n private input: HTMLInputElement \| undefined;\r\n\r\n private handleOnChange = (e: Event) => {\r\n const { target } = e;\r\n\r\n this.dsoChange.emit({\r\n originalEvent: e,\r\n checked: target instanceof HTMLInputElement && target.checked,\r\n });\r\n };\r\n\r\n componentDidLoad() {\r\n this.mutationObserver?.disconnect();\r\n\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n this.mutationObserver.observe(this.host, {\r\n childList: true,\r\n });\r\n\r\n this.setIndeterminate();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n @Watch(\"indeterminate\")\r\n setIndeterminate() {\r\n if (!(this.input instanceof HTMLInputElement) \|\| this.type !== \"checkbox\") {\r\n return;\r\n }\r\n\r\n this.input.indeterminate = !!this.indeterminate;\r\n }\r\n\r\n render() {\r\n const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n return (\r\n <Fragment>\r\n <div class={clsx(\"dso-selectable-container\", { \"has-info-button\": hasInfo })}>\r\n <div class={clsx(\"dso-selectable-input-wrapper\", { \"dso-keyboard-focus\": this.keyboardFocus })}>\r\n <input\r\n type={this.type}\r\n id={this.getIdentifier()}\r\n value={this.value}\r\n name={this.name}\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n aria-labelledBy={this.labelledById}\r\n disabled={this.disabled}\r\n required={this.required}\r\n checked={this.checked}\r\n onChange={this.handleOnChange}\r\n onBlur={() => (this.keyboardFocus = false)}\r\n onKeyUp={() => (this.keyboardFocus = true)}\r\n ref={(el) => (this.input = el)}\r\n />\r\n {!this.labelledById ? (\r\n <label htmlFor={this.getIdentifier()}>\r\n <slot></slot>\r\n </label>\r\n ) : (\r\n <label></label>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <Fragment>\r\n {!this.infoFixed && (\r\n <dso-info-button\r\n active={this.infoActive}\r\n onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n ></dso-info-button>\r\n )}\r\n </Fragment>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <dso-info\r\n id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n fixed={this.infoFixed}\r\n active={this.infoActive}\r\n onDsoClose={() => (this.infoActive = false)}\r\n >\r\n <div>\r\n <slot name=\"info\"></slot>\r\n </div>\r\n </dso-info>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n\r\n private getIdentifier(): string {\r\n return this.identifier ?? this.fallbackIdentifier;\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-map-overlays.cjs.entry.js CHANGED Viewed

@@ -16,7 +16,7 @@ const MapOverlays = class {
     this.overlays = undefined;
   }
   overlayChangeHandler(overlay, e) {
-    const checked = e.detail.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;
+    const { checked } = e.detail;
     this.dsoToggleOverlay.emit({ overlay, checked });
   }
   componentDidRender() {

package/dist/cjs/dso-map-overlays.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-map-overlays.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,4WAA4W;;MCYtX,WAAW;;;;IAEd,mBAAc,GAA+C,EAAE,CAAC;iBAMhEA,KAAM,EAAE;;;EAcR,oBAAoB,CAAC,OAAgB,EAAE,CAAqC;IAClF,MAAM,OAAO,~~GAAG~~,~~CAAC,CAAC,MAAM,CAAC,MAAM,YAAY,gBAAgB,~~GAAG,CAAC,CAAC,~~CAAC,CAAC,~~MAAM,CAAC~~,MAAM,CAAC,OAAO,GAAG,KAAK,CAAC~~;~~IAEhG~~,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;GAClD;EAED,kBAAkB;IAChB,IAAI,CAAC,QAAQ;OACV,MAAM,CAAC,CAAC,CAAC,mBAAK,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;OAClG,OAAO,CAAC,CAAC,CAAC;;MACT,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;KAC9C,CAAC,CAAC;IAEL,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;GACvC;EAED,MAAM;IACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE;MACrC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;KACjC;IAED,QACEC,sBAAU,KAAK,EAAC,2BAA2B,IACzCA,oBAAQ,KAAK,EAAC,SAAS,iBAAoB,EAC3CA,iBAAK,KAAK,EAAC,qBAAqB,IAC9BA,kBAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,iBAEvC,CACH,EACNA,iBAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACzBA,4BACE,GAAG,EAAE,OAAO,CAAC,EAAE,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,OAAO,CAAC,IAAI,EACnB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC5D,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC,CAAC,IAExD,OAAO,CAAC,IAAI,EACZ,OAAO,CAAC,IAAI,GAAGA,eAAG,IAAI,EAAC,MAAM,IAAE,OAAO,CAAC,IAAI,CAAK,GAAG,IAAI,CACzC,CAClB,CAAC,CACE,CACG,EACX;GACH;;;;;;","names":["uuidv4","h"],"sources":["src/components/map-overlays/map-overlays.scss?tag=dso-map-overlays&encapsulation=shadow","src/components/map-overlays/map-overlays.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n border: 0;\r\n margin: 0;\r\n min-width: 0;\r\n padding: 0;\r\n\r\n .control-label {\r\n display: inline-block;\r\n font-weight: bold;\r\n margin-bottom: units.$u1;\r\n max-width: 100%;\r\n text-align: left;\r\n }\r\n}\r\n\r\np[slot=\"info\"] {\r\n margin: 0;\r\n}\r\n","import { Component, Event, EventEmitter, Prop, h, ComponentInterface } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\n\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-map-overlays\",\r\n styleUrl: \"./map-overlays.scss\",\r\n shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n private previousOverlays: Overlay[] \| undefined;\r\n private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n /*\r\n To group the overlays together. Generally the default value suffices.\r\n /\r\n @Prop()\r\n group = uuidv4();\r\n\r\n /\r\n The overlays.\r\n /\r\n @Prop()\r\n overlays!: Overlay[];\r\n\r\n /\r\n Emitted when the user selects a different overlay.\r\n */\r\n @Event()\r\n dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n const checked = e.detail~~.target instanceof HTMLInputElement ? !!e.detail.target.checked : false~~;\r\n\r\n this.dsoToggleOverlay.emit({ overlay, checked });\r\n }\r\n\r\n componentDidRender() {\r\n this.overlays\r\n .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n .forEach((o) => {\r\n this.selectableRefs[o.id]?.toggleInfo(false);\r\n });\r\n\r\n this.previousOverlays = this.overlays;\r\n }\r\n\r\n render() {\r\n for (const ref in this.selectableRefs) {\r\n delete this.selectableRefs[ref];\r\n }\r\n\r\n return (\r\n <fieldset class=\"form-group dso-checkboxes\">\r\n <legend class=\"sr-only\">Kaartlagen</legend>\r\n <div class=\"dso-label-container\">\r\n <span class=\"control-label\" aria-hidden=\"true\">\r\n Kaartlagen\r\n </span>\r\n </div>\r\n <div class=\"dso-field-container\">\r\n {this.overlays.map((overlay) => (\r\n <dso-selectable\r\n key={overlay.id}\r\n type=\"checkbox\"\r\n value={overlay.name}\r\n checked={overlay.checked}\r\n disabled={overlay.disabled}\r\n name={this.group}\r\n ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n >\r\n {overlay.name}\r\n {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n </dso-selectable>\r\n ))}\r\n </div>\r\n </fieldset>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-map-overlays.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,4WAA4W;;MCYtX,WAAW;;;;IAEd,mBAAc,GAA+C,EAAE,CAAC;iBAMhEA,KAAM,EAAE;;;EAcR,oBAAoB,CAAC,OAAgB,EAAE,CAAqC;IAClF,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;IAE7B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;GAClD;EAED,kBAAkB;IAChB,IAAI,CAAC,QAAQ;OACV,MAAM,CAAC,CAAC,CAAC,mBAAK,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;OAClG,OAAO,CAAC,CAAC,CAAC;;MACT,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;KAC9C,CAAC,CAAC;IAEL,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;GACvC;EAED,MAAM;IACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE;MACrC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;KACjC;IAED,QACEC,sBAAU,KAAK,EAAC,2BAA2B,IACzCA,oBAAQ,KAAK,EAAC,SAAS,iBAAoB,EAC3CA,iBAAK,KAAK,EAAC,qBAAqB,IAC9BA,kBAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,iBAEvC,CACH,EACNA,iBAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACzBA,4BACE,GAAG,EAAE,OAAO,CAAC,EAAE,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,OAAO,CAAC,IAAI,EACnB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC5D,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC,CAAC,IAExD,OAAO,CAAC,IAAI,EACZ,OAAO,CAAC,IAAI,GAAGA,eAAG,IAAI,EAAC,MAAM,IAAE,OAAO,CAAC,IAAI,CAAK,GAAG,IAAI,CACzC,CAClB,CAAC,CACE,CACG,EACX;GACH;;;;;;","names":["uuidv4","h"],"sources":["src/components/map-overlays/map-overlays.scss?tag=dso-map-overlays&encapsulation=shadow","src/components/map-overlays/map-overlays.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n border: 0;\r\n margin: 0;\r\n min-width: 0;\r\n padding: 0;\r\n\r\n .control-label {\r\n display: inline-block;\r\n font-weight: bold;\r\n margin-bottom: units.$u1;\r\n max-width: 100%;\r\n text-align: left;\r\n }\r\n}\r\n\r\np[slot=\"info\"] {\r\n margin: 0;\r\n}\r\n","import { Component, Event, EventEmitter, Prop, h, ComponentInterface } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\n\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-map-overlays\",\r\n styleUrl: \"./map-overlays.scss\",\r\n shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n private previousOverlays: Overlay[] \| undefined;\r\n private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n /*\r\n To group the overlays together. Generally the default value suffices.\r\n /\r\n @Prop()\r\n group = uuidv4();\r\n\r\n /\r\n The overlays.\r\n /\r\n @Prop()\r\n overlays!: Overlay[];\r\n\r\n /\r\n Emitted when the user selects a different overlay.\r\n */\r\n @Event()\r\n dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n const { checked } = e.detail;\r\n\r\n this.dsoToggleOverlay.emit({ overlay, checked });\r\n }\r\n\r\n componentDidRender() {\r\n this.overlays\r\n .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n .forEach((o) => {\r\n this.selectableRefs[o.id]?.toggleInfo(false);\r\n });\r\n\r\n this.previousOverlays = this.overlays;\r\n }\r\n\r\n render() {\r\n for (const ref in this.selectableRefs) {\r\n delete this.selectableRefs[ref];\r\n }\r\n\r\n return (\r\n <fieldset class=\"form-group dso-checkboxes\">\r\n <legend class=\"sr-only\">Kaartlagen</legend>\r\n <div class=\"dso-label-container\">\r\n <span class=\"control-label\" aria-hidden=\"true\">\r\n Kaartlagen\r\n </span>\r\n </div>\r\n <div class=\"dso-field-container\">\r\n {this.overlays.map((overlay) => (\r\n <dso-selectable\r\n key={overlay.id}\r\n type=\"checkbox\"\r\n value={overlay.name}\r\n checked={overlay.checked}\r\n disabled={overlay.disabled}\r\n name={this.group}\r\n ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n >\r\n {overlay.name}\r\n {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n </dso-selectable>\r\n ))}\r\n </div>\r\n </fieldset>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-toolkit.cjs.js CHANGED Viewed

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["dsot-document-component-demo.cjs",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section.cjs",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[32],"hover":[32]}]]],["dso-header.cjs",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal.cjs",[[1,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[32]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item.cjs",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-table.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]}]]],["dso-action-list.cjs",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513],"compact":[4],"noIcon":[4,"no-icon"]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"required":[516],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[1],"min":[1],"max":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-logo.cjs",[[1,"dso-logo",{"label":[1],"ribbon":[1]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"mode":[513],"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"documentPanelOpen":[516,"document-panel-open"],"mainSize":[513,"main-size"],"activeTab":[1,"active-tab"],"documentPanelSize":[513,"document-panel-size"],"mainPanelExpanded":[4,"main-panel-expanded"],"mainPanelHidden":[4,"main-panel-hidden"],"tabView":[32],"_checkMainPanelVisibility":[64]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[1],"strategy":[1]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-scrollable.cjs",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-alert_5.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]},[[4,"keydown","keyDownListener"]]],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-badge",{"status":[1]}],[1,"dso-ozon-content",{"content":[1],"inline":[516],"state":[32]}]]],["dso-annotation-output_3.cjs",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]], options);
+  return index.bootstrapLazy([["dsot-document-component-demo.cjs",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section.cjs",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[32],"hover":[32]}]]],["dso-header.cjs",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal.cjs",[[1,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[32]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item.cjs",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-table.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]}]]],["dso-action-list.cjs",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513],"compact":[4],"noIcon":[4,"no-icon"]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"required":[516],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[513],"min":[1],"max":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-logo.cjs",[[1,"dso-logo",{"label":[1],"ribbon":[1]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"mode":[513],"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"documentPanelOpen":[516,"document-panel-open"],"mainSize":[513,"main-size"],"activeTab":[1,"active-tab"],"documentPanelSize":[513,"document-panel-size"],"mainPanelExpanded":[4,"main-panel-expanded"],"mainPanelHidden":[4,"main-panel-hidden"],"tabView":[32],"_checkMainPanelVisibility":[64]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[1],"strategy":[1]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-scrollable.cjs",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-alert_5.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]},[[4,"keydown","keyDownListener"]]],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-badge",{"status":[1]}],[1,"dso-ozon-content",{"content":[1],"inline":[516],"state":[32]}]]],["dso-annotation-output_3.cjs",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]], options);
 });
 exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js CHANGED Viewed

@@ -6,7 +6,7 @@ const index = require('./index-d46ec033.js');
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  return index.bootstrapLazy([["dsot-document-component-demo.cjs",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section.cjs",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[32],"hover":[32]}]]],["dso-header.cjs",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal.cjs",[[1,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[32]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item.cjs",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-table.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]}]]],["dso-action-list.cjs",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513],"compact":[4],"noIcon":[4,"no-icon"]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"required":[516],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[1],"min":[1],"max":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-logo.cjs",[[1,"dso-logo",{"label":[1],"ribbon":[1]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"mode":[513],"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"documentPanelOpen":[516,"document-panel-open"],"mainSize":[513,"main-size"],"activeTab":[1,"active-tab"],"documentPanelSize":[513,"document-panel-size"],"mainPanelExpanded":[4,"main-panel-expanded"],"mainPanelHidden":[4,"main-panel-hidden"],"tabView":[32],"_checkMainPanelVisibility":[64]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[1],"strategy":[1]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-scrollable.cjs",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-alert_5.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]},[[4,"keydown","keyDownListener"]]],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-badge",{"status":[1]}],[1,"dso-ozon-content",{"content":[1],"inline":[516],"state":[32]}]]],["dso-annotation-output_3.cjs",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]], options);
+  return index.bootstrapLazy([["dsot-document-component-demo.cjs",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section.cjs",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[32],"hover":[32]}]]],["dso-header.cjs",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal.cjs",[[1,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[32]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item.cjs",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-table.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]}]]],["dso-action-list.cjs",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513],"compact":[4],"noIcon":[4,"no-icon"]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"required":[516],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[513],"min":[1],"max":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-logo.cjs",[[1,"dso-logo",{"label":[1],"ribbon":[1]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"mode":[513],"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"documentPanelOpen":[516,"document-panel-open"],"mainSize":[513,"main-size"],"activeTab":[1,"active-tab"],"documentPanelSize":[513,"document-panel-size"],"mainPanelExpanded":[4,"main-panel-expanded"],"mainPanelHidden":[4,"main-panel-hidden"],"tabView":[32],"_checkMainPanelVisibility":[64]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[1],"strategy":[1]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-scrollable.cjs",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-alert_5.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]},[[4,"keydown","keyDownListener"]]],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-badge",{"status":[1]}],[1,"dso-ozon-content",{"content":[1],"inline":[516],"state":[32]}]]],["dso-annotation-output_3.cjs",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]], options);
 };
 exports.setNonce = index.setNonce;

package/dist/collection/components/date-picker/date-picker.interfaces.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-picker.interfaces.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface DatePickerChangeEvent {\r\n originalEvent: Event;\r\n ~~component:~~ \"~~dso-~~date~~-picker~~\";\r\n valueAsDate: Date \| undefined;\r\n ~~value~~: ~~string~~;\r\n error?: \"invalid\" \| \"required\" \| \"min-range\" \| \"max-range\";\r\n}\r\n\r\nexport interface DatePickerFocusEvent {\r\n originalEvent: FocusEvent;\r\n component: \"dso-date-picker\";\r\n}\r\n\r\nexport interface DatePickerKeyboardEvent {\r\n originalEvent: KeyboardEvent;\r\n component: \"dso-date-picker\";\r\n}\r\n"]}
1	+ {"version":3,"file":"date-picker.interfaces.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface DatePickerChangeEvent {\r\n component: \"dso-date-picker\";\r\n\r\n /*\r\n The original event that the change event of the `<input type=\"date\">` emitted.\r\n /\r\n originalEvent: Event;\r\n\r\n /\r\n The entered date in DD-MM-YYYY.\r\n \r\n Also set if the entered date is out of bounds, but empty `\"\"` if the date is invalid.\r\n /\r\n value: string;\r\n\r\n /\r\n The entered date as Date object.\r\n \r\n `undefined` if the date is out of bounds or invalid.\r\n /\r\n valueAsDate: Date \| undefined;\r\n\r\n /\r\n The original validity object. Only for convienience, this object equals `detail.originalEvent.target.validity`.\r\n /\r\n validity: ValidityState;\r\n\r\n /\r\n If the input causes an error this property is set:\r\n \r\n * `required`: If the date is required but no date is given. Equals `validity.valueMissing`.\r\n * * `min-range`: The entered date is sooner than the minimum date set in `min`. Equals `validity.rangeUnderflow`.\r\n * * `max-range`: The entered date is later than the maximum date set in `max`. Equals `validity.rangeOverflow`.\r\n * * `invalid`: If the entered date is invalid. Equals `validity.invalid === false`.\r\n \r\n For more data on the validity of the input, refer to the property `validity`.\r\n */\r\n error?: \"required\" \| \"min-range\" \| \"max-range\" \| \"invalid\";\r\n}\r\n\r\nexport interface DatePickerFocusEvent {\r\n originalEvent: FocusEvent;\r\n component: \"dso-date-picker\";\r\n}\r\n\r\nexport interface DatePickerKeyboardEvent {\r\n originalEvent: KeyboardEvent;\r\n component: \"dso-date-picker\";\r\n}\r\n"]}

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { clamp, parseDate, parseToValueFormat, printDutchDate } from "./date-utils";
+import { parseToValueFormat, parseToDutchFormat } from "./date-utils";
 export class DsoDatePicker {
   constructor() {
     this.handleBlur = (event) => {
@@ -35,40 +35,29 @@ export class DsoDatePicker {
       if (!(target instanceof HTMLInputElement)) {
         return;
       }
-      const { value } = target;
+      const { valueAsDate, validity } = target;
       const event = {
-        originalEvent: e,
         component: "dso-date-picker",
-        value,
-        valueAsDate: parseDate(value),
+        originalEvent: e,
+        validity,
+        value: parseToDutchFormat(valueAsDate),
+        valueAsDate: valueAsDate !== null && valueAsDate !== void 0 ? valueAsDate : undefined,
       };
-      if (event.valueAsDate) {
-        event.value = printDutchDate(event.valueAsDate);
-      }
-      if (!event.valueAsDate && this.required) {
+      if (validity.valueMissing) {
         event.error = "required";
       }
-      if (event.value && !event.valueAsDate) {
-        event.error = "invalid";
+      else if (validity.rangeUnderflow) {
+        event.error = "min-range";
+        event.valueAsDate = undefined;
       }
-      if (event.valueAsDate && (this.min || this.max)) {
-        const min = parseDate(this.min);
-        const max = parseDate(this.max);
-        const clampValue = clamp(event.valueAsDate, min, max);
-        if (clampValue !== event.valueAsDate && clampValue === min) {
-          event.valueAsDate = undefined;
-          event.error = "min-range";
-        }
-        else if (clampValue !== event.valueAsDate && clampValue === max) {
-          event.valueAsDate = undefined;
-          event.error = "max-range";
-        }
+      else if (validity.rangeOverflow) {
+        event.error = "max-range";
+        event.valueAsDate = undefined;
       }
-      this.value = typeof value === "string" ? value : event.value;
-      if (this.value !== this.previousValue) {
-        this.dsoDateChange.emit(event);
-        this.previousValue = this.value;
+      else if (!validity.valid) {
+        event.error = "invalid";
       }
+      this.dsoDateChange.emit(event);
     };
     this.name = "dso-date";
     this.identifier = undefined;
@@ -237,7 +226,7 @@ export class DsoDatePicker {
           "text": "Date value. Must be in Dutch date format: DD-MM-YYYY."
         },
         "attribute": "value",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "\"\""
       },
       "min": {

package/dist/collection/components/date-picker/date-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAGrG,OAAO,EAAE,~~KAAK~~,EAAE,~~SAAS,EAAE,~~kBAAkB,EAAE,~~cAAc,EAAE,~~MAAM,cAAc,CAAC;~~AAQpF~~,MAAM,OAAO,aAAa;;~~IA0GhB~~,eAAU,GAAG,CAAC,KAAiB,EAAE,EAAE;MACzC,KAAK,CAAC,eAAe,EAAE,CAAC;MAExB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;QAChB,aAAa,EAAE,KAAK;QACpB,SAAS,EAAE,iBAAiB;OAC7B,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MAC1C,KAAK,CAAC,eAAe,EAAE,CAAC;MAExB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,aAAa,EAAE,KAAK;QACpB,SAAS,EAAE,iBAAiB;OAC7B,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAoB,EAAE,EAAE;MAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;MAExB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,SAAS,EAAE,iBAAiB;QAC5B,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;MAC/C,KAAK,CAAC,eAAe,EAAE,CAAC;MAExB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,iBAAiB;QAC5B,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,sBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;MACvC,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;MAExB,IAAI,CAAC,CAAC,MAAM,YAAY,gBAAgB,CAAC,EAAE;QACzC,OAAO;OACR;MAED,MAAM,EAAE,~~KAAK~~,EAAE,GAAG,MAAM,CAAC;~~MAEzB~~,MAAM,KAAK,GAA0B;QACnC,~~aAAa~~,EAAE,~~CAAC~~;~~QAChB~~,~~SAAS~~,EAAE,~~iBAAiB~~;~~QAC5B~~,~~KAAK~~;~~QACL~~,~~WAAW~~,EAAE,~~SAAS~~,CAAC,~~KAAK~~,CAAC;~~OAC9B~~,~~CAAC;MAEF,IAAI,KAAK,CAAC,~~WAAW,EAAE~~;QACrB~~,~~KAAK~~,~~CAAC~~,~~KAAK~~,~~GAAG~~,~~cAAc,CAAC,KAAK,CAAC,~~WAAW,~~CAAC~~,~~CAAC~~;~~OACjD;MAED~~,~~IAAI,~~CAAC,~~KAAK,CAAC,WAAW,~~IAAI,~~IAAI~~,CAAC,~~QAAQ~~,EAAE;~~QACvC~~,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC;OAC1B;~~MAED~~,IAAI,~~KAAK~~,CAAC,~~KAAK~~,~~IAAI,CAAC,KAAK,CAAC,WAAW,~~EAAE;~~QACrC~~,KAAK,CAAC,KAAK,GAAG,~~SAAS~~,CAAC;~~OACzB;MAED~~,~~IAAI,~~KAAK,CAAC,WAAW,~~IAAI,CAAC,IAAI,CAAC,~~GAAG,~~IAAI~~,~~IAAI,~~CAAC~~,GAAG,CAAC,EAAE~~;~~QAC~~/~~C,MAAM,GAAG,GAAG,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC~~;~~QAChC~~,~~MAAM,GAAG,GAAG,SAAS,CAAC,~~IAAI,~~CAAC~~,~~GAAG,~~CAAC,~~CAAC;QAChC~~,~~MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,~~EAAE~~,GAAG,EAAE,GAAG,CAAC,CAAC~~;~~QAEtD~~,~~IAAI,UAAU,~~KAAK,~~KAAK,~~CAAC,~~WAAW,IAAI,UAAU,~~KAAK,GAAG,~~EAAE;UAC1D,KAAK,CAAC,~~WAAW,~~GAAG,SAAS,~~CAAC;~~UAC9B~~,KAAK,CAAC,~~KAAK~~,GAAG,~~WAAW~~,CAAC;~~SAC3B~~;~~aAAM~~,IAAI,~~UAAU~~,~~KAAK~~,~~KAAK,~~CAAC,~~WAAW,IAAI,UAAU,~~KAAK,~~GAAG,~~EAAE;~~UACjE~~,KAAK,CAAC,~~WAAW~~,GAAG,SAAS,CAAC;~~UAC9B,KAAK,CAAC,KAAK,GAAG,WAAW,CAAC~~;~~SAC3B;OACF;~~MAED,IAAI,CAAC,~~KAAK,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;MAE7D,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,~~aAAa,~~EAAE;QACrC,IAAI,~~CAAC,~~aAAa,CAAC,~~IAAI,CAAC,KAAK,CAAC,CAAC;~~QAC/B~~,~~IAAI,~~CAAC,~~aAAa,GAAG,IAAI,~~CAAC~~,KAAK,CAAC~~;~~OACjC;IACH~~,~~CAAC,CAAC;gBAjLK,~~UAAU;;oBAaN,KAAK;oBAML,KAAK;;;wBAkBD,KAAK;iBAMZ,EAAE;;;;~~EAwIV~~,MAAM;;IACJ,OAAO,CACL,aACE,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,EACrC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,EACjC,GAAG,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,uBAClB,MAAM,kBACV,MAAA,IAAI,CAAC,OAAO,0CAAE,QAAQ,EAAE,sBACpB,IAAI,CAAC,WAAW,EAClC,YAAY,EAAC,KAAK,EAClB,SAAS,EAAE,IAAI,CAAC,YAAY,IAAI,SAAS,EACzC,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,IAAI,CAAC,iBAAiB,GAChC,CACH,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Prop, Element, h, Event, EventEmitter } from \"@stencil/core\";\r\n\r\nimport { DatePickerChangeEvent, DatePickerFocusEvent, DatePickerKeyboardEvent } from \"./date-picker.interfaces\";\r\nimport { ~~clamp, parseDate,~~ parseToValueFormat, ~~printDutchDate~~ } from \"./date-utils\";\r\n\r\n@Component({\r\n tag: \"dso-date-picker\",\r\n styleUrl: \"date-picker.scss\",\r\n shadow: false,\r\n scoped: true,\r\n})\r\nexport class DsoDatePicker implements ComponentInterface {\r\n ~~private previousValue?: string;\r\n\r\n~~ /*\r\n Reference to host HTML element.\r\n /\r\n @Element()\r\n element!: HTMLDsoDatePickerElement;\r\n\r\n /\r\n Name of the date picker input.\r\n /\r\n @Prop()\r\n name = \"dso-date\";\r\n\r\n /\r\n Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.\r\n /\r\n @Prop()\r\n identifier: string \| undefined;\r\n\r\n /\r\n Makes the date picker input component disabled. This prevents users from being able to\r\n * interact with the input, and conveys its inactive state to assistive technologies.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Should the input be marked as required?\r\n /\r\n @Prop({ reflect: true })\r\n required = false;\r\n\r\n /\r\n Is input invalid?\r\n /\r\n @Prop({ reflect: true })\r\n invalid?: boolean;\r\n\r\n /\r\n ID of element that describes the input element\r\n /\r\n @Prop()\r\n describedBy?: string;\r\n\r\n /\r\n Should the input be focused on load?\r\n /\r\n @Prop()\r\n dsoAutofocus = false;\r\n\r\n /\r\n Date value. Must be in Dutch date format: DD-MM-YYYY.\r\n /\r\n @Prop()\r\n value = \"\";\r\n\r\n /\r\n Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n * This setting can be used alone or together with the max property.\r\n /\r\n @Prop()\r\n min: string \| undefined;\r\n\r\n /\r\n Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n * This setting can be used alone or together with the min property.\r\n /\r\n @Prop()\r\n max: string \| undefined;\r\n\r\n /\r\n Events section.\r\n /\r\n\r\n /\r\n Event emitted when a date is selected.\r\n /\r\n @Event()\r\n dsoDateChange!: EventEmitter<DatePickerChangeEvent>;\r\n\r\n /\r\n Event emitted the date picker input is blurred.\r\n /\r\n @Event()\r\n dsoBlur!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n /\r\n Event emitted on key up in the date picker input.\r\n /\r\n @Event()\r\n dsoKeyUp!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n /\r\n Event emitted on key down in the date picker input.\r\n /\r\n @Event()\r\n dsoKeyDown!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n /\r\n Event emitted the date picker input is focused.\r\n */\r\n @Event()\r\n dsoFocus!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n private handleBlur = (event: FocusEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoBlur.emit({\r\n originalEvent: event,\r\n component: \"dso-date-picker\",\r\n });\r\n };\r\n\r\n private handleFocus = (event: FocusEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoFocus.emit({\r\n originalEvent: event,\r\n component: \"dso-date-picker\",\r\n });\r\n };\r\n\r\n private handleKeyUp = (event: KeyboardEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoKeyUp.emit({\r\n component: \"dso-date-picker\",\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoKeyDown.emit({\r\n component: \"dso-date-picker\",\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n private handleInputChange = (e: Event) => {\r\n const target = e.target;\r\n\r\n if (!(target instanceof HTMLInputElement)) {\r\n return;\r\n }\r\n\r\n const { ~~value~~ } = target;\r\n\r\n const event: DatePickerChangeEvent = {\r\n ~~originalEvent: e,\r\n~~ component: \"dso-date-picker\",\r\n ~~value~~,\r\n ~~valueAsDate: parseDate(value)~~,\r\n ~~};\r\n\r\n if~~ (~~event.~~valueAsDate) {\r\n ~~event.value~~ = ~~printDutchDate(event.valueAsDate);\~~r\n }\r\n\r\n if (~~!event~~.~~valueAsDate && this.required~~) {\r\n event.error = \"required\";\r\n }~~\r\n\r\n~~ if (~~event~~.~~value && !event.valueAsDate~~) {\r\n event.error = \"~~invalid~~\";\r\n ~~}\r\n\r\n if (~~event.valueAsDate ~~&& (this.min \|\| this.max)) {\r\n const min~~ = ~~parseDate(this.min)~~;\r\n ~~const~~ ~~max~~ = ~~parseDate~~(~~this~~.~~max~~);\r\n ~~const clampValue = clamp(~~event.~~valueAsDate,~~ ~~min,~~ max);\r\n~~\r\n~~ ~~if (clampValue !==~~ event.valueAsDate ~~&& clampValue === min) {\r\n event.valueAsDate~~ = undefined;\r\n ~~event.error = \"min-range\";\r\n~~ } else if (~~clampValue !== event~~.~~valueAsDate && clampValue === max~~) {\r\n event.~~valueAsDate = undefined;\r\n event.~~error = \"~~max-range~~\";\r\n ~~}\r\n~~ }\r\n\r\n this.~~value = typeof value === \"string\" ? value : event.value;\r\n\r\n if (this.value !== this.previousValue) {\r\n this.~~dsoDateChange.emit(event);\r\n ~~this.previousValue = this.value;\r\n }\r\n~~ };\r\n\r\n render() {\r\n return (\r\n <input\r\n type=\"date\"\r\n id={this.identifier}\r\n class=\"dso-date__input\"\r\n value={parseToValueFormat(this.value)}\r\n name={this.name}\r\n min={parseToValueFormat(this.min)}\r\n max={parseToValueFormat(this.max)}\r\n disabled={this.disabled \|\| undefined}\r\n required={this.required \|\| undefined}\r\n aria-autocomplete=\"none\"\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={this.describedBy}\r\n autoComplete=\"off\"\r\n autofocus={this.dsoAutofocus \|\| undefined}\r\n onBlur={this.handleBlur}\r\n onFocus={this.handleFocus}\r\n onKeyUp={this.handleKeyUp}\r\n onKeyDown={this.handleKeyDown}\r\n onChange={this.handleInputChange}\r\n />\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Element, h, Event, EventEmitter } from \"@stencil/core\";\r\n\r\nimport { DatePickerChangeEvent, DatePickerFocusEvent, DatePickerKeyboardEvent } from \"./date-picker.interfaces\";\r\nimport { parseToValueFormat, parseToDutchFormat } from \"./date-utils\";\r\n\r\n@Component({\r\n tag: \"dso-date-picker\",\r\n styleUrl: \"date-picker.scss\",\r\n shadow: false,\r\n scoped: true,\r\n})\r\nexport class DsoDatePicker implements ComponentInterface {\r\n /*\r\n Reference to host HTML element.\r\n /\r\n @Element()\r\n element!: HTMLDsoDatePickerElement;\r\n\r\n /\r\n Name of the date picker input.\r\n /\r\n @Prop()\r\n name = \"dso-date\";\r\n\r\n /\r\n Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.\r\n /\r\n @Prop()\r\n identifier: string \| undefined;\r\n\r\n /\r\n Makes the date picker input component disabled. This prevents users from being able to\r\n * interact with the input, and conveys its inactive state to assistive technologies.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Should the input be marked as required?\r\n /\r\n @Prop({ reflect: true })\r\n required = false;\r\n\r\n /\r\n Is input invalid?\r\n /\r\n @Prop({ reflect: true })\r\n invalid?: boolean;\r\n\r\n /\r\n ID of element that describes the input element\r\n /\r\n @Prop()\r\n describedBy?: string;\r\n\r\n /\r\n Should the input be focused on load?\r\n /\r\n @Prop()\r\n dsoAutofocus = false;\r\n\r\n /\r\n Date value. Must be in Dutch date format: DD-MM-YYYY.\r\n /\r\n @Prop({ reflect: true })\r\n value = \"\";\r\n\r\n /\r\n Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n * This setting can be used alone or together with the max property.\r\n /\r\n @Prop()\r\n min: string \| undefined;\r\n\r\n /\r\n Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\n * This setting can be used alone or together with the min property.\r\n /\r\n @Prop()\r\n max: string \| undefined;\r\n\r\n /\r\n Events section.\r\n /\r\n\r\n /\r\n Event emitted when a date is selected.\r\n /\r\n @Event()\r\n dsoDateChange!: EventEmitter<DatePickerChangeEvent>;\r\n\r\n /\r\n Event emitted the date picker input is blurred.\r\n /\r\n @Event()\r\n dsoBlur!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n /\r\n Event emitted on key up in the date picker input.\r\n /\r\n @Event()\r\n dsoKeyUp!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n /\r\n Event emitted on key down in the date picker input.\r\n /\r\n @Event()\r\n dsoKeyDown!: EventEmitter<DatePickerKeyboardEvent>;\r\n\r\n /\r\n Event emitted the date picker input is focused.\r\n */\r\n @Event()\r\n dsoFocus!: EventEmitter<DatePickerFocusEvent>;\r\n\r\n private handleBlur = (event: FocusEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoBlur.emit({\r\n originalEvent: event,\r\n component: \"dso-date-picker\",\r\n });\r\n };\r\n\r\n private handleFocus = (event: FocusEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoFocus.emit({\r\n originalEvent: event,\r\n component: \"dso-date-picker\",\r\n });\r\n };\r\n\r\n private handleKeyUp = (event: KeyboardEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoKeyUp.emit({\r\n component: \"dso-date-picker\",\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n event.stopPropagation();\r\n\r\n this.dsoKeyDown.emit({\r\n component: \"dso-date-picker\",\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n private handleInputChange = (e: Event) => {\r\n const target = e.target;\r\n\r\n if (!(target instanceof HTMLInputElement)) {\r\n return;\r\n }\r\n\r\n const { valueAsDate, validity } = target;\r\n\r\n const event: DatePickerChangeEvent = {\r\n component: \"dso-date-picker\",\r\n originalEvent: e,\r\n validity,\r\n value: parseToDutchFormat(valueAsDate),\r\n valueAsDate: valueAsDate ?? undefined,\r\n };\r\n\r\n if (validity.valueMissing) {\r\n event.error = \"required\";\r\n } else if (validity.rangeUnderflow) {\r\n event.error = \"min-range\";\r\n event.valueAsDate = undefined;\r\n } else if (validity.rangeOverflow) {\r\n event.error = \"max-range\";\r\n event.valueAsDate = undefined;\r\n } else if (!validity.valid) {\r\n event.error = \"invalid\";\r\n }\r\n\r\n this.dsoDateChange.emit(event);\r\n };\r\n\r\n render() {\r\n return (\r\n <input\r\n type=\"date\"\r\n id={this.identifier}\r\n class=\"dso-date__input\"\r\n value={parseToValueFormat(this.value)}\r\n name={this.name}\r\n min={parseToValueFormat(this.min)}\r\n max={parseToValueFormat(this.max)}\r\n disabled={this.disabled \|\| undefined}\r\n required={this.required \|\| undefined}\r\n aria-autocomplete=\"none\"\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={this.describedBy}\r\n autoComplete=\"off\"\r\n autofocus={this.dsoAutofocus \|\| undefined}\r\n onBlur={this.handleBlur}\r\n onFocus={this.handleFocus}\r\n onKeyUp={this.handleKeyUp}\r\n onKeyDown={this.handleKeyDown}\r\n onChange={this.handleInputChange}\r\n />\r\n );\r\n }\r\n}\r\n"]}