@dso-toolkit/core 62.18.0 → 62.19.0

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

@@ -1,401 +1,401 @@
 import { h } from "@stencil/core";
 import { parseToValueFormat, parseToDutchFormat } from "./date-utils";
 export class DsoDatePicker {
-  constructor() {
-    this.handleBlur = (e) => {
-      e.stopPropagation();
-      const { target } = e;
-      if (!(target instanceof HTMLInputElement)) {
-        return;
-      }
-      const { validity } = target;
-      const { value, valueAsDate } = this.dateValues(target);
-      const error = this.validityToError(validity);
-      const event = {
-        component: "dso-date-picker",
-        originalEvent: e,
-        validity,
-        value,
-        valueAsDate,
-        error,
-      };
-      this.dsoBlur.emit(event);
-    };
-    this.handleFocus = (event) => {
-      event.stopPropagation();
-      this.dsoFocus.emit({
-        originalEvent: event,
-        component: "dso-date-picker",
-      });
-    };
-    this.handleKeyUp = (event) => {
-      event.stopPropagation();
-      this.dsoKeyUp.emit({
-        component: "dso-date-picker",
-        originalEvent: event,
-      });
-    };
-    this.handleKeyDown = (event) => {
-      event.stopPropagation();
-      this.dsoKeyDown.emit({
-        component: "dso-date-picker",
-        originalEvent: event,
-      });
-    };
-    this.handleInputChange = (e) => {
-      const target = e.target;
-      if (!(target instanceof HTMLInputElement)) {
-        return;
-      }
-      const { validity } = target;
-      const { value, valueAsDate } = this.dateValues(target);
-      const error = this.validityToError(validity);
-      const event = {
-        component: "dso-date-picker",
-        originalEvent: e,
-        validity,
-        value,
-        valueAsDate,
-        error,
-      };
-      this.dsoDateChange.emit(event);
-    };
-    this.name = "dso-date";
-    this.identifier = undefined;
-    this.disabled = false;
-    this.required = false;
-    this.invalid = undefined;
-    this.describedBy = undefined;
-    this.dsoAutofocus = false;
-    this.value = "";
-    this.min = undefined;
-    this.max = undefined;
-  }
-  dateValues(target) {
-    const { valueAsDate, validity } = target;
-    return {
-      value: parseToDutchFormat(valueAsDate),
-      valueAsDate: (!validity.rangeOverflow && !validity.rangeUnderflow && valueAsDate) || undefined,
-    };
-  }
-  validityToError(validity) {
-    if (validity.valueMissing) {
-      return "required";
-    }
-    if (validity.rangeUnderflow) {
-      return "min-range";
-    }
-    if (validity.rangeOverflow) {
-      return "max-range";
+    constructor() {
+        this.handleBlur = (e) => {
+            e.stopPropagation();
+            const { target } = e;
+            if (!(target instanceof HTMLInputElement)) {
+                return;
+            }
+            const { validity } = target;
+            const { value, valueAsDate } = this.dateValues(target);
+            const error = this.validityToError(validity);
+            const event = {
+                component: "dso-date-picker",
+                originalEvent: e,
+                validity,
+                value,
+                valueAsDate,
+                error,
+            };
+            this.dsoBlur.emit(event);
+        };
+        this.handleFocus = (event) => {
+            event.stopPropagation();
+            this.dsoFocus.emit({
+                originalEvent: event,
+                component: "dso-date-picker",
+            });
+        };
+        this.handleKeyUp = (event) => {
+            event.stopPropagation();
+            this.dsoKeyUp.emit({
+                component: "dso-date-picker",
+                originalEvent: event,
+            });
+        };
+        this.handleKeyDown = (event) => {
+            event.stopPropagation();
+            this.dsoKeyDown.emit({
+                component: "dso-date-picker",
+                originalEvent: event,
+            });
+        };
+        this.handleInputChange = (e) => {
+            const target = e.target;
+            if (!(target instanceof HTMLInputElement)) {
+                return;
+            }
+            const { validity } = target;
+            const { value, valueAsDate } = this.dateValues(target);
+            const error = this.validityToError(validity);
+            const event = {
+                component: "dso-date-picker",
+                originalEvent: e,
+                validity,
+                value,
+                valueAsDate,
+                error,
+            };
+            this.dsoDateChange.emit(event);
+        };
+        this.name = "dso-date";
+        this.identifier = undefined;
+        this.disabled = false;
+        this.required = false;
+        this.invalid = undefined;
+        this.describedBy = undefined;
+        this.dsoAutofocus = false;
+        this.value = "";
+        this.min = undefined;
+        this.max = undefined;
     }
-    if (!validity.valid) {
-      return "invalid";
+    dateValues(target) {
+        const { valueAsDate, validity } = target;
+        return {
+            value: parseToDutchFormat(valueAsDate),
+            valueAsDate: (!validity.rangeOverflow && !validity.rangeUnderflow && valueAsDate) || undefined,
+        };
     }
-    return undefined;
-  }
-  render() {
-    var _a;
-    return (h("input", { type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
-  }
-  static get is() { return "dso-date-picker"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["date-picker.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["date-picker.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Name of the date picker input."
-        },
-        "attribute": "name",
-        "reflect": false,
-        "defaultValue": "\"dso-date\""
-      },
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Adds a unique identifier for the date picker input. Use this instead of html `id` attribute."
-        },
-        "attribute": "identifier",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Makes the date picker input component disabled. This prevents users from being able to\r\ninteract with the input, and conveys its inactive state to assistive technologies."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Should the input be marked as required?"
-        },
-        "attribute": "required",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Is input invalid?"
-        },
-        "attribute": "invalid",
-        "reflect": true
-      },
-      "describedBy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "ID of element that describes the input element"
-        },
-        "attribute": "described-by",
-        "reflect": false
-      },
-      "dsoAutofocus": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Should the input be focused on load?"
-        },
-        "attribute": "dso-autofocus",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Date value. Must be in Dutch date format: DD-MM-YYYY."
-        },
-        "attribute": "value",
-        "reflect": true,
-        "defaultValue": "\"\""
-      },
-      "min": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\nThis setting can be used alone or together with the max property."
-        },
-        "attribute": "min",
-        "reflect": false
-      },
-      "max": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\nThis setting can be used alone or together with the min property."
-        },
-        "attribute": "max",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "dsoDateChange",
-        "name": "dsoDateChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted when a date is selected."
-        },
-        "complexType": {
-          "original": "DatePickerChangeEvent",
-          "resolved": "DatePickerChangeEvent",
-          "references": {
-            "DatePickerChangeEvent": {
-              "location": "import",
-              "path": "./date-picker.interfaces",
-              "id": "src/components/date-picker/date-picker.interfaces.ts::DatePickerChangeEvent"
-            }
-          }
+    validityToError(validity) {
+        if (validity.valueMissing) {
+            return "required";
         }
-      }, {
-        "method": "dsoBlur",
-        "name": "dsoBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted the date picker input is blurred."
-        },
-        "complexType": {
-          "original": "DatePickerBlurEvent",
-          "resolved": "DatePickerBlurEvent",
-          "references": {
-            "DatePickerBlurEvent": {
-              "location": "import",
-              "path": "./date-picker.interfaces",
-              "id": "src/components/date-picker/date-picker.interfaces.ts::DatePickerBlurEvent"
-            }
-          }
+        if (validity.rangeUnderflow) {
+            return "min-range";
         }
-      }, {
-        "method": "dsoKeyUp",
-        "name": "dsoKeyUp",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted on key up in the date picker input."
-        },
-        "complexType": {
-          "original": "DatePickerKeyboardEvent",
-          "resolved": "DatePickerKeyboardEvent",
-          "references": {
-            "DatePickerKeyboardEvent": {
-              "location": "import",
-              "path": "./date-picker.interfaces",
-              "id": "src/components/date-picker/date-picker.interfaces.ts::DatePickerKeyboardEvent"
-            }
-          }
+        if (validity.rangeOverflow) {
+            return "max-range";
         }
-      }, {
-        "method": "dsoKeyDown",
-        "name": "dsoKeyDown",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted on key down in the date picker input."
-        },
-        "complexType": {
-          "original": "DatePickerKeyboardEvent",
-          "resolved": "DatePickerKeyboardEvent",
-          "references": {
-            "DatePickerKeyboardEvent": {
-              "location": "import",
-              "path": "./date-picker.interfaces",
-              "id": "src/components/date-picker/date-picker.interfaces.ts::DatePickerKeyboardEvent"
-            }
-          }
+        if (!validity.valid) {
+            return "invalid";
         }
-      }, {
-        "method": "dsoFocus",
-        "name": "dsoFocus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted the date picker input is focused."
-        },
-        "complexType": {
-          "original": "DatePickerFocusEvent",
-          "resolved": "DatePickerFocusEvent",
-          "references": {
-            "DatePickerFocusEvent": {
-              "location": "import",
-              "path": "./date-picker.interfaces",
-              "id": "src/components/date-picker/date-picker.interfaces.ts::DatePickerFocusEvent"
+        return undefined;
+    }
+    render() {
+        var _a;
+        return (h("input", { key: 'ecb068ea47b65537bcc588275a661a8b76ca12c8', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
+    }
+    static get is() { return "dso-date-picker"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["date-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["date-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the date picker input."
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "\"dso-date\""
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds a unique identifier for the date picker input. Use this instead of html `id` attribute."
+                },
+                "attribute": "identifier",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the date picker input component disabled. This prevents users from being able to\r\ninteract with the input, and conveys its inactive state to assistive technologies."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Should the input be marked as required?"
+                },
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Is input invalid?"
+                },
+                "attribute": "invalid",
+                "reflect": true
+            },
+            "describedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of element that describes the input element"
+                },
+                "attribute": "described-by",
+                "reflect": false
+            },
+            "dsoAutofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Should the input be focused on load?"
+                },
+                "attribute": "dso-autofocus",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Date value. Must be in Dutch date format: DD-MM-YYYY."
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "\"\""
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\nThis setting can be used alone or together with the max property."
+                },
+                "attribute": "min",
+                "reflect": false
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\nThis setting can be used alone or together with the min property."
+                },
+                "attribute": "max",
+                "reflect": false
             }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "element"; }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoDateChange",
+                "name": "dsoDateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a date is selected."
+                },
+                "complexType": {
+                    "original": "DatePickerChangeEvent",
+                    "resolved": "DatePickerChangeEvent",
+                    "references": {
+                        "DatePickerChangeEvent": {
+                            "location": "import",
+                            "path": "./date-picker.interfaces",
+                            "id": "src/components/date-picker/date-picker.interfaces.ts::DatePickerChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoBlur",
+                "name": "dsoBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted the date picker input is blurred."
+                },
+                "complexType": {
+                    "original": "DatePickerBlurEvent",
+                    "resolved": "DatePickerBlurEvent",
+                    "references": {
+                        "DatePickerBlurEvent": {
+                            "location": "import",
+                            "path": "./date-picker.interfaces",
+                            "id": "src/components/date-picker/date-picker.interfaces.ts::DatePickerBlurEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoKeyUp",
+                "name": "dsoKeyUp",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted on key up in the date picker input."
+                },
+                "complexType": {
+                    "original": "DatePickerKeyboardEvent",
+                    "resolved": "DatePickerKeyboardEvent",
+                    "references": {
+                        "DatePickerKeyboardEvent": {
+                            "location": "import",
+                            "path": "./date-picker.interfaces",
+                            "id": "src/components/date-picker/date-picker.interfaces.ts::DatePickerKeyboardEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoKeyDown",
+                "name": "dsoKeyDown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted on key down in the date picker input."
+                },
+                "complexType": {
+                    "original": "DatePickerKeyboardEvent",
+                    "resolved": "DatePickerKeyboardEvent",
+                    "references": {
+                        "DatePickerKeyboardEvent": {
+                            "location": "import",
+                            "path": "./date-picker.interfaces",
+                            "id": "src/components/date-picker/date-picker.interfaces.ts::DatePickerKeyboardEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoFocus",
+                "name": "dsoFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted the date picker input is focused."
+                },
+                "complexType": {
+                    "original": "DatePickerFocusEvent",
+                    "resolved": "DatePickerFocusEvent",
+                    "references": {
+                        "DatePickerFocusEvent": {
+                            "location": "import",
+                            "path": "./date-picker.interfaces",
+                            "id": "src/components/date-picker/date-picker.interfaces.ts::DatePickerFocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "element"; }
 }
 //# sourceMappingURL=date-picker.js.map