@dso-toolkit/core 67.3.1 → 68.0.0

package/dist/collection/components/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAExH,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAIhE;;;;;GAKG;AAMH,MAAM,OAAO,IAAI;;;;;;IAgCf,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAE3E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAClF,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QAEpC,OAAO,IAAI,CAAC,gBAAgB,CAAC;IAC/B,CAAC;IAEO,iBAAiB,CAAC,CAAa;QACrC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACrD,OAAO;QACT,CAAC;QAED,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC3F,CAAC;IAED,IAAI,wBAAwB;QAC1B,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACxD,CAAC;IAED,IAAI,0BAA0B;QAC5B,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAC1D,CAAC;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,wBAAwB,KAAK,IAAI,CAAC;QAE5D,OAAO,CACL,EAAC,IAAI,sEAAgB,YAAY;YAC/B,4DAAK,KAAK,EAAC,oBAAoB;gBAC7B,4DAAK,KAAK,EAAC,qBAAqB,EAAC,MAAM,EAAE,CAAC,YAAY;oBACpD,6DAAM,IAAI,EAAC,YAAY,GAAG,CACtB;gBACN,4DAAK,KAAK,EAAC,kBAAkB;oBAC1B,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAC1B,0DACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,gBAAgB,EACtB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;wBAEzC,6DAAM,IAAI,EAAC,SAAS,GAAG;wBACvB,iEAAU,IAAI,EAAC,eAAe,GAAY;wBAC1C,6DAAM,KAAK,EAAC,SAAS,8CAA+C,CAClE,CACL,CAAC;wBACA,CAAC,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CAC3B,0DAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;4BAClF,6DAAM,IAAI,EAAC,SAAS,GAAG;4BACvB,iEAAU,IAAI,EAAC,UAAU,GAAY,CACnC,CACL,CAAC,IAAI,CACJ,0DAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;wBAClF,6DAAM,IAAI,EAAC,SAAS,GAAG;wBACvB,iEAAU,IAAI,EAAC,eAAe,GAAY,CACxC,CACL;oBACF,IAAI,CAAC,0BAA0B,KAAK,IAAI,IAAI,6DAAM,IAAI,EAAC,cAAc,GAAG,CACrE;gBACN,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, forceUpdate } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { CardClickEvent } from \"./card.interfaces\";\r\n\r\n/**\r\n * @slot selectable - An optional slot to place a `Selectable` in.\r\n * @slot heading - A  slot to place the title of the card in.\r\n * @slot interactions - An optional slot for one or more `Button`s, `Label`s, `Toggletip`s or `SlideToggle`s.\r\n * @slot content - An optional slot to place `Rich Content` in.\r\n */\r\n@Component({\r\n  tag: \"dso-card\",\r\n  styleUrl: \"card.scss\",\r\n  shadow: true,\r\n})\r\nexport class Card implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoCardElement;\r\n\r\n  /**\r\n   * The URL to which the Card heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href!: string | undefined;\r\n\r\n  /**\r\n   * Display the link as an external link or a download link\r\n   *  - \"download\"\r\n   *  - \"extern\"\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode?: string;\r\n\r\n  /**\r\n   * Makes the Card active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the Card heading is clicked.\r\n   */\r\n  @Event()\r\n  dsoCardClick!: EventEmitter<CardClickEvent>;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.href) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get selectableSlottedElement() {\r\n    return this.host.querySelector(\"[slot='selectable']\");\r\n  }\r\n\r\n  get interactionsSlottedElement() {\r\n    return this.host.querySelector(\"[slot='interactions']\");\r\n  }\r\n\r\n  render() {\r\n    const isSelectable = this.selectableSlottedElement !== null;\r\n\r\n    return (\r\n      <Host is-selectable={isSelectable}>\r\n        <div class=\"dso-card-container\">\r\n          <div class=\"dso-card-selectable\" hidden={!isSelectable}>\r\n            <slot name=\"selectable\" />\r\n          </div>\r\n          <div class=\"dso-card-heading\">\r\n            {(this.mode === \"extern\" && (\r\n              <a\r\n                href={this.href}\r\n                class=\"heading-anchor\"\r\n                target=\"_blank\"\r\n                rel=\"noopener noreferrer\"\r\n                onClick={(e) => this.clickEventHandler(e)}\r\n              >\r\n                <slot name=\"heading\" />\r\n                <dso-icon icon=\"external-link\"></dso-icon>\r\n                <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n              </a>\r\n            )) ||\r\n              (this.mode === \"download\" && (\r\n                <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n                  <slot name=\"heading\" />\r\n                  <dso-icon icon=\"download\"></dso-icon>\r\n                </a>\r\n              )) || (\r\n                <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n                  <slot name=\"heading\" />\r\n                  <dso-icon icon=\"chevron-right\"></dso-icon>\r\n                </a>\r\n              )}\r\n            {this.interactionsSlottedElement !== null && <slot name=\"interactions\" />}\r\n          </div>\r\n          <div class=\"dso-card-content\">\r\n            <slot name=\"content\" />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, forceUpdate } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { CardClickEvent } from \"./card.interfaces\";\r\n\r\n/**\r\n * @slot selectable - An optional slot to place a `Selectable` in.\r\n * @slot heading - A  slot to place the title of the card in.\r\n * @slot interactions - An optional slot for one or more `Button`s, `Label`s, `Toggletip`s or `SlideToggle`s.\r\n * @slot content - An optional slot to place `Rich Content` in.\r\n */\r\n@Component({\r\n  tag: \"dso-card\",\r\n  styleUrl: \"card.scss\",\r\n  shadow: true,\r\n})\r\nexport class Card implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoCardElement;\r\n\r\n  /**\r\n   * The URL to which the Card heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href!: string | undefined;\r\n\r\n  /**\r\n   * Display the link as an external link or a download link\r\n   *  - \"download\"\r\n   *  - \"extern\"\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode?: string;\r\n\r\n  /**\r\n   * Makes the Card active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the Card heading is clicked.\r\n   */\r\n  @Event()\r\n  dsoCardClick!: EventEmitter<CardClickEvent>;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.href) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get selectableSlottedElement() {\r\n    return this.host.querySelector(\"[slot='selectable']\");\r\n  }\r\n\r\n  get interactionsSlottedElement() {\r\n    return this.host.querySelector(\"[slot='interactions']\");\r\n  }\r\n\r\n  render() {\r\n    const isSelectable = this.selectableSlottedElement !== null;\r\n\r\n    return (\r\n      <Host is-selectable={isSelectable}>\r\n        <div class=\"dso-card-container\">\r\n          <div class=\"dso-card-selectable\" hidden={!isSelectable}>\r\n            <slot name=\"selectable\" />\r\n          </div>\r\n          <div class=\"dso-card-heading\">\r\n            {(this.mode === \"extern\" && (\r\n              <a\r\n                href={this.href}\r\n                class=\"heading-anchor\"\r\n                target=\"_blank\"\r\n                rel=\"noopener noreferrer\"\r\n                onClick={(e) => this.clickEventHandler(e)}\r\n              >\r\n                <slot name=\"heading\" />\r\n                <dso-icon icon=\"external-link\"></dso-icon>\r\n                <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n              </a>\r\n            )) ||\r\n              (this.mode === \"download\" && (\r\n                <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n                  <slot name=\"heading\" />\r\n                  <dso-icon icon=\"download\"></dso-icon>\r\n                </a>\r\n              )) || (\r\n                <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n                  <slot name=\"heading\" />\r\n                  <dso-icon icon=\"chevron-right\"></dso-icon>\r\n                </a>\r\n              )}\r\n            {this.interactionsSlottedElement !== null && <slot name=\"interactions\" />}\r\n          </div>\r\n          <div class=\"dso-card-content\">\r\n            <slot name=\"content\" />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/card-container/card-container.js

@@ -1,10 +1,13 @@
 import { h, Fragment } from "@stencil/core";
 export class CardContainer {
     constructor() {
+        /**
+         * The mode of the Card Container.
+         */
         this.mode = "list";
     }
     render() {
-        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '32d6c14a02ed4aa3a12a4a987b099ba7f786ab26', class: "dso-card-list" }, h("slot", { key: 'f9e8072d7f3dffbcf4e47b19bccc50377dfc8b90' }))), this.mode === "grid" && (h("div", { key: 'b0f534dc19d2c781eab8b13a01d222ee263a53e8', class: "dso-card-grid" }, h("slot", { key: '347c56580c98cd25a2241f7fc7ed36f868005378' })))));
+        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: 'bf7634d7b41380064060cde31c7971dcdde44382', class: "dso-card-list" }, h("slot", { key: 'c575533d409ea152c434b449e98e5f27fd6790b4' }))), this.mode === "grid" && (h("div", { key: 'ada71af5db7d9dc2ba564b521b60fa36e6e37303', class: "dso-card-grid" }, h("slot", { key: '8c1083ff2f2699bbf2652199e3a40b3690c7ab45' })))));
     }
     static get is() { return "dso-card-container"; }
     static get encapsulation() { return "shadow"; }
@@ -40,6 +43,8 @@ export class CardContainer {
                     "tags": [],
                     "text": "The mode of the Card Container."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "mode",
                 "reflect": true,
                 "defaultValue": "\"list\""

package/dist/collection/components/card-container/card-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-container.js","sourceRoot":"","sources":["../../../../src/components/card-container/card-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,QAAQ,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQjF,MAAM,OAAO,aAAa;;oBAKE,MAAM;;IAEhC,MAAM;QACJ,OAAO,CACL;YACG,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACvB,2DAAI,KAAK,EAAC,eAAe;gBACvB,8DAAQ,CACL,CACN;YACA,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACvB,4DAAK,KAAK,EAAC,eAAe;gBACxB,8DAAQ,CACJ,CACP,CACA,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, ComponentInterface, Fragment, Prop } from \"@stencil/core\";\r\nimport { CardContainerMode } from \"./card-container.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-card-container\",\r\n  styleUrl: \"card-container.scss\",\r\n  shadow: true,\r\n})\r\nexport class CardContainer implements ComponentInterface {\r\n  /**\r\n   * The mode of the Card Container.\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode: CardContainerMode = \"list\";\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.mode === \"list\" && (\r\n          <ul class=\"dso-card-list\">\r\n            <slot />\r\n          </ul>\r\n        )}\r\n        {this.mode === \"grid\" && (\r\n          <div class=\"dso-card-grid\">\r\n            <slot />\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"card-container.js","sourceRoot":"","sources":["../../../../src/components/card-container/card-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,QAAQ,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQjF,MAAM,OAAO,aAAa;IAL1B;QAME;;WAEG;QAEH,SAAI,GAAsB,MAAM,CAAC;KAkBlC;IAhBC,MAAM;QACJ,OAAO,CACL;YACG,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACvB,2DAAI,KAAK,EAAC,eAAe;gBACvB,8DAAQ,CACL,CACN;YACA,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACvB,4DAAK,KAAK,EAAC,eAAe;gBACxB,8DAAQ,CACJ,CACP,CACA,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, ComponentInterface, Fragment, Prop } from \"@stencil/core\";\r\nimport { CardContainerMode } from \"./card-container.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-card-container\",\r\n  styleUrl: \"card-container.scss\",\r\n  shadow: true,\r\n})\r\nexport class CardContainer implements ComponentInterface {\r\n  /**\r\n   * The mode of the Card Container.\r\n   */\r\n  @Prop({ reflect: true })\r\n  mode: CardContainerMode = \"list\";\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.mode === \"list\" && (\r\n          <ul class=\"dso-card-list\">\r\n            <slot />\r\n          </ul>\r\n        )}\r\n        {this.mode === \"grid\" && (\r\n          <div class=\"dso-card-grid\">\r\n            <slot />\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -2,6 +2,27 @@ import { h } from "@stencil/core";
 import { parseToValueFormat, parseToDutchFormat } from "./date-utils";
 export class DsoDatePicker {
     constructor() {
+        /**
+         * Name of the date picker input.
+         */
+        this.name = "dso-date";
+        /**
+         * Makes the date picker input component disabled. This prevents users from being able to
+         * interact with the input, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Should the input be marked as required?
+         */
+        this.required = false;
+        /**
+         * Should the input be focused on load?
+         */
+        this.dsoAutofocus = false;
+        /**
+         * Date value. Must be in Dutch date format: DD-MM-YYYY.
+         */
+        this.value = "";
         this.handleBlur = (e) => {
             e.stopPropagation();
             const { target } = e;
@@ -60,16 +81,6 @@ export class DsoDatePicker {
             };
             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;
@@ -95,7 +106,7 @@ export class DsoDatePicker {
     }
     render() {
         var _a;
-        return (h("input", { key: '396b62306362c143d28c80cae648f11b59886c22', 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 }));
+        return (h("input", { key: '383a80a337db8578d6b858ee01031b34a1a407ce', 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"; }
@@ -125,6 +136,8 @@ export class DsoDatePicker {
                     "tags": [],
                     "text": "Name of the date picker input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "\"dso-date\""
@@ -143,6 +156,8 @@ export class DsoDatePicker {
                     "tags": [],
                     "text": "Adds a unique identifier for the date picker input. Use this instead of html `id` attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "identifier",
                 "reflect": false
             },
@@ -160,6 +175,8 @@ export class DsoDatePicker {
                     "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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
@@ -178,6 +195,8 @@ export class DsoDatePicker {
                     "tags": [],
                     "text": "Should the input be marked as required?"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": true,
                 "defaultValue": "false"
@@ -196,6 +215,8 @@ export class DsoDatePicker {
                     "tags": [],
                     "text": "Is input invalid?"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "invalid",
                 "reflect": true
             },
@@ -213,6 +234,8 @@ export class DsoDatePicker {
                     "tags": [],
                     "text": "ID of element that describes the input element"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "described-by",
                 "reflect": false
             },
@@ -230,6 +253,8 @@ export class DsoDatePicker {
                     "tags": [],
                     "text": "Should the input be focused on load?"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "dso-autofocus",
                 "reflect": false,
                 "defaultValue": "false"
@@ -248,6 +273,8 @@ export class DsoDatePicker {
                     "tags": [],
                     "text": "Date value. Must be in Dutch date format: DD-MM-YYYY."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true,
                 "defaultValue": "\"\""
@@ -266,6 +293,8 @@ export class DsoDatePicker {
                     "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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "min",
                 "reflect": false
             },
@@ -283,6 +312,8 @@ export class DsoDatePicker {
                     "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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "max",
                 "reflect": false
             }

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

@@ -1 +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 {\r\n  DatePickerBlurEvent,\r\n  DatePickerChangeEvent,\r\n  DatePickerError,\r\n  DatePickerFocusEvent,\r\n  DatePickerKeyboardEvent,\r\n} 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<DatePickerBlurEvent>;\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 = (e: FocusEvent) => {\r\n    e.stopPropagation();\r\n\r\n    const { target } = e;\r\n\r\n    if (!(target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    const { validity } = target;\r\n    const { value, valueAsDate } = this.dateValues(target);\r\n    const error = this.validityToError(validity);\r\n\r\n    const event: DatePickerBlurEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value,\r\n      valueAsDate,\r\n      error,\r\n    };\r\n\r\n    this.dsoBlur.emit(event);\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 { validity } = target;\r\n    const { value, valueAsDate } = this.dateValues(target);\r\n    const error = this.validityToError(validity);\r\n\r\n    const event: DatePickerChangeEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value,\r\n      valueAsDate,\r\n      error,\r\n    };\r\n\r\n    this.dsoDateChange.emit(event);\r\n  };\r\n\r\n  private dateValues(target: HTMLInputElement): { value: string; valueAsDate: Date | undefined } {\r\n    const { valueAsDate, validity } = target;\r\n\r\n    return {\r\n      value: parseToDutchFormat(valueAsDate),\r\n      valueAsDate: (!validity.rangeOverflow && !validity.rangeUnderflow && valueAsDate) || undefined,\r\n    };\r\n  }\r\n\r\n  private validityToError(validity: ValidityState): DatePickerError | undefined {\r\n    if (validity.valueMissing) {\r\n      return \"required\";\r\n    }\r\n\r\n    if (validity.rangeUnderflow) {\r\n      return \"min-range\";\r\n    }\r\n\r\n    if (validity.rangeOverflow) {\r\n      return \"max-range\";\r\n    }\r\n\r\n    if (!validity.valid) {\r\n      return \"invalid\";\r\n    }\r\n\r\n    return undefined;\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,"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 {\r\n  DatePickerBlurEvent,\r\n  DatePickerChangeEvent,\r\n  DatePickerError,\r\n  DatePickerFocusEvent,\r\n  DatePickerKeyboardEvent,\r\n} 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<DatePickerBlurEvent>;\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 = (e: FocusEvent) => {\r\n    e.stopPropagation();\r\n\r\n    const { target } = e;\r\n\r\n    if (!(target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    const { validity } = target;\r\n    const { value, valueAsDate } = this.dateValues(target);\r\n    const error = this.validityToError(validity);\r\n\r\n    const event: DatePickerBlurEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value,\r\n      valueAsDate,\r\n      error,\r\n    };\r\n\r\n    this.dsoBlur.emit(event);\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 { validity } = target;\r\n    const { value, valueAsDate } = this.dateValues(target);\r\n    const error = this.validityToError(validity);\r\n\r\n    const event: DatePickerChangeEvent = {\r\n      component: \"dso-date-picker\",\r\n      originalEvent: e,\r\n      validity,\r\n      value,\r\n      valueAsDate,\r\n      error,\r\n    };\r\n\r\n    this.dsoDateChange.emit(event);\r\n  };\r\n\r\n  private dateValues(target: HTMLInputElement): { value: string; valueAsDate: Date | undefined } {\r\n    const { valueAsDate, validity } = target;\r\n\r\n    return {\r\n      value: parseToDutchFormat(valueAsDate),\r\n      valueAsDate: (!validity.rangeOverflow && !validity.rangeUnderflow && valueAsDate) || undefined,\r\n    };\r\n  }\r\n\r\n  private validityToError(validity: ValidityState): DatePickerError | undefined {\r\n    if (validity.valueMissing) {\r\n      return \"required\";\r\n    }\r\n\r\n    if (validity.rangeUnderflow) {\r\n      return \"min-range\";\r\n    }\r\n\r\n    if (validity.rangeOverflow) {\r\n      return \"max-range\";\r\n    }\r\n\r\n    if (!validity.valid) {\r\n      return \"invalid\";\r\n    }\r\n\r\n    return undefined;\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"]}

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

@@ -46,6 +46,47 @@ export class DsoDatePickerLegacy {
         this.dialogLabelId = createIdentifier("DsoDateLabel");
         this.localization = defaultLocalization;
         this.firstDayOfWeek = DaysOfWeek.Monday;
+        /**
+         * State() variables
+         */
+        this.activeFocus = false;
+        this.focusedDay = new Date();
+        this.open = false;
+        this.visible = false;
+        /**
+         * Public Property API
+         */
+        /**
+         * Name of the date picker input.
+         */
+        this.name = "date";
+        /**
+         * Makes the date picker input component disabled. This prevents users from being able to
+         * interact with the input, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Defines a specific role attribute for the date picker input.
+         */
+        this.role = null;
+        /**
+         * Forces the opening direction of the calendar modal to be always left or right.
+         * This setting can be useful when the input is smaller than the opening date picker
+         * would be as by default the picker always opens towards right.
+         */
+        this.direction = "right";
+        /**
+         * Should the input be marked as required?
+         */
+        this.required = false;
+        /**
+         * Should the input be focused on load?
+         */
+        this.dsoAutofocus = false;
+        /**
+         * Date value. Must be in Dutch date format: DD-MM-YYYY.
+         */
+        this.value = "";
         /**
          * Local methods.
          */
@@ -267,22 +308,6 @@ export class DsoDatePickerLegacy {
                 setTimeout(() => element.focus(), 0);
             }
         };
-        this.activeFocus = false;
-        this.focusedDay = new Date();
-        this.open = false;
-        this.visible = false;
-        this.name = "date";
-        this.identifier = undefined;
-        this.disabled = false;
-        this.role = null;
-        this.direction = "right";
-        this.required = false;
-        this.invalid = undefined;
-        this.describedBy = undefined;
-        this.dsoAutofocus = false;
-        this.value = "";
-        this.min = undefined;
-        this.max = undefined;
     }
     /**
      * Component event handling.
@@ -424,14 +449,14 @@ export class DsoDatePickerLegacy {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: '21048228f8ece85acafa575b65effd49c8eb06fd' }, h("div", { key: '2e8c37e0bd890e5426e18b34c293d59e0dc28fd9', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: '4b5498556f0ecb2959301c6274fa1ba8beeb56ba', class: "dso-date__input-wrapper" }, h("input", { key: 'e4a9c11617188151109278dca34392a7a6fd7acf', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: '59d003f5d3e0692fa692f10d2a6ea74c9d03bc73', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: '35499b0c092f6b64507ef47a8d453e3a9dcab0df', class: "dso-date__toggle-icon" }, h("dso-icon", { key: 'd479c33bec38d9c79aad1dbf135a8656da2bf54d', icon: "calendar" })), h("span", { key: '5868bdd17a5c2f5bfc05c7a662dd19be605f90a2', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: '987d9d6cbad6763ecf3e8c3b1dc6cd7d60a372c0' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: 'bc69058909195de2555bda78e5849d4377e552b8', class: {
+        return (h(Host, { key: 'dbff80962fbcf53e172ecb16a5c1fc590ee10f9e' }, h("div", { key: 'fc473ab4394f82381f59dc20618e13666c7ebff3', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: '9177311d07f6edd7ae15671ddb2948c5b006fcda', class: "dso-date__input-wrapper" }, h("input", { key: '0ece934024a2d46ef451300ae68f4a00747cd7ab', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: '1438410646c1b4629249715b2914cb1b3a684ecc', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: 'ca51e1bb2afd30cdd51dca12f4fe2b0805669195', class: "dso-date__toggle-icon" }, h("dso-icon", { key: '77052c690e40173df63af10b4c053a7c63728a76', icon: "calendar" })), h("span", { key: 'c2c9d9471c025c78c68eacad4f36cb51ab3af8cf', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: 'fbed504c7781943494dd29c1273506b85eaac748' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: '92eab019bb2f737a01ca2da34828d7ae159aa896', class: {
                 "dso-date__dialog": true,
                 "is-left": this.direction === "left",
                 "is-active": this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: '710d763d3b6fe8df45baddcfe3fa64b7f618f20b', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: 'f5825ef31295efa446836948e0af0fcc4ee36ab8', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '83fb9c2a5a7121ddafec462c54d06b0ca4e7721b', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: 'bfbbd91d21a62d54d04b231f49d2ec125b011bb8', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: 'a7a8dd097438f089517dedd43b7aea18dced74cd', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: 'a68b9956250b7884f4138d7b8e9ff9fac1ad8824', icon: "times" }), h("span", { key: '76f352ec95530ae49a75e81093d57f5ec6c0fa3b', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: '3406397370206832afd1dc7036ea25b930f72efa', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '2bd8c6328596ce2587452fc2dc3715b05c754d28' }, h("h2", { key: '8b9c739b4535ad8e0ce8403e615fa587e6d8aadb', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: 'ce7cefb6892d05290f5524d02901cc1e8812b40b', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '28c13137c007701fbe0a3231eab38c9fb7d33e44', class: "dso-date__select" }, h("select", { key: 'b6d9ec18b2951b69b07315222bd943fa81ca7790', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
+            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: 'ace692348e0a214707f3c29e3249f9021c68cc93', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: '263fbad51c855936b9d8a952257f7ab3a8f21077', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '62718328450bcbe0b174d6770b251dfd4750c661', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: 'fa35628b5c5be08b38fc7773c463993bd1b8ca41', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: '01eaa0ae57b2bd59a0cbf3b92f0db867ee6bf71c', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: 'ea41b086cfd2d68c562233630dc85e893db3e923', icon: "times" }), h("span", { key: '35e78553c5075a878761685fa18d307f24d1a6c9', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: 'affb385e33dd6befb239780b629d0652e6150c34', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '3c2df62772391537ad93297e0da77aefcfab0c03' }, h("h2", { key: '3e08c1803d05c3d5fd85802426347705f1e36380', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: '2f0fe33fd34113b0575c934f9db19b270aa4ffab', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'f82717940e66399d7387aef565d254e007d99089', class: "dso-date__select" }, h("select", { key: '3e48aea34fa212bd4f09523a59c2cf7a4e6081c0', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
             const index = this.localization.monthNames.indexOf(month);
             return (h("option", { key: month, value: index, selected: index === focusedMonth }, month));
-        })), h("div", { key: 'b90d2b48cfe943b91bfae7f6e0002c59e28c471b', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'e5b72a3f93ed11b68ea21a84d302072956c78d67' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '80be2680bd6f72d1c501ddbbacf6b9f4b15d9488', icon: "chevron-down" }))), h("label", { key: 'cd80f19fa89fb2f8715e28d6480d2fc9047d1296', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: 'a50afb24985b062fb92a649d7bc42b3d87598dd2', class: "dso-date__select" }, h("select", { key: '90902c118e070b881d157e9f6c62352086da0c7a', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '4f2eb767b984cfe734d8cadd9398af6cc36487d8', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'c6942320ed7fb30b89b397de2db6d45edb49812f' }, this.focusedDay.getFullYear()), h("dso-icon", { key: '47f33877c1bf98dffac4786a93fa04904354e52c', icon: "chevron-down" })))), h("div", { key: 'c4755a4ad89a3be55666ed5d107c93f314774241', class: "dso-date__nav" }, h("button", { key: '64ae003276cf0086c824f0b108ad076eeb6a090e', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: '24bb4171871179fb898b40f5b30d7188d4365cce', icon: "chevron-left" }), h("span", { key: '1f25eee813d9732235b382e513d851e1e47a5b1b', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: 'a1f01fd959e030d8c6bff6f0c7d47aa5ccae9fe3', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '03b4b21054ed24422283cde0ea3de83a547c3537', icon: "chevron-right" }), h("span", { key: 'd9706fd79cb7fd362a9853d6f9ba0556095fa3de', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: '710479d8e9823855ad515bf3b0d2cb6f8a0cc914', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
+        })), h("div", { key: '6610d72573b2034919ac06b150b28fe71675523f', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'd9c715eb6d487fb74b6fa2cf10eaeccb1934f874' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '38999f203ada3723a6489698afc1d64918558b47', icon: "chevron-down" }))), h("label", { key: '8f2b45ddf6a74e4e5e25c655a6ff874ef5bccb15', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '960cc822d81754db8d771100e081aefd3cb26f42', class: "dso-date__select" }, h("select", { key: '71e3c4db15a6c144a9c5f9362c66044c95d79080', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'b32fc0fccaccdc69a7598fe12557192571bab6df', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'd611b1a260e7a05c63e8738801b1d0c30bef9c54' }, this.focusedDay.getFullYear()), h("dso-icon", { key: '0e0efb2816f3bbf02bc797b9251a3055c59bfc98', icon: "chevron-down" })))), h("div", { key: '830953e91f5a02c32859a5563898fd4ff15d1ee1', class: "dso-date__nav" }, h("button", { key: '485e09c768b3f32c97308bf7e2a49e21ad4be43f', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: '7a1b9ecc90f5045d4e115e48357d9c4db88d3b31', icon: "chevron-left" }), h("span", { key: '994605650a68db3e13e336228c1483f822cc36d1', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '5b20176af21e7d2aef98ff8c6ee3271eab227c74', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: 'f8e371518b59d7c0a607c41f784f7d38732025e9', icon: "chevron-right" }), h("span", { key: '02edf66bbca97cac53c55bdbd72730c129b512e2', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: '8e8e7845317318eb372bb5fc08536b452ddc2422', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
     }
     static get is() { return "dso-date-picker-legacy"; }
     static get encapsulation() { return "scoped"; }
@@ -461,6 +486,8 @@ export class DsoDatePickerLegacy {
                     "tags": [],
                     "text": "Name of the date picker input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "\"date\""
@@ -479,6 +506,8 @@ export class DsoDatePickerLegacy {
                     "tags": [],
                     "text": "Adds a unique identifier for the date picker input. Use this instead of html `id` attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "identifier",
                 "reflect": false
             },
@@ -496,6 +525,8 @@ export class DsoDatePickerLegacy {
                     "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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
@@ -514,6 +545,8 @@ export class DsoDatePickerLegacy {
                     "tags": [],
                     "text": "Defines a specific role attribute for the date picker input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "role",
                 "reflect": false,
                 "defaultValue": "null"
@@ -538,6 +571,8 @@ export class DsoDatePickerLegacy {
                     "tags": [],
                     "text": "Forces the opening direction of the calendar modal to be always left or right.\r\nThis setting can be useful when the input is smaller than the opening date picker\r\nwould be as by default the picker always opens towards right."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "\"right\""
@@ -556,6 +591,8 @@ export class DsoDatePickerLegacy {
                     "tags": [],
                     "text": "Should the input be marked as required?"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
@@ -574,6 +611,8 @@ export class DsoDatePickerLegacy {
                     "tags": [],
                     "text": "Is input invalid?"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "invalid",
                 "reflect": true
             },
@@ -591,6 +630,8 @@ export class DsoDatePickerLegacy {
                     "tags": [],
                     "text": "ID of element that describes the input element"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "described-by",
                 "reflect": false
             },
@@ -608,6 +649,8 @@ export class DsoDatePickerLegacy {
                     "tags": [],
                     "text": "Should the input be focused on load?"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "dso-autofocus",
                 "reflect": false,
                 "defaultValue": "false"
@@ -626,6 +669,8 @@ export class DsoDatePickerLegacy {
                     "tags": [],
                     "text": "Date value. Must be in Dutch date format: DD-MM-YYYY."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true,
                 "defaultValue": "\"\""
@@ -644,6 +689,8 @@ export class DsoDatePickerLegacy {
                     "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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "min",
                 "reflect": false
             },
@@ -661,6 +708,8 @@ export class DsoDatePickerLegacy {
                     "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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "max",
                 "reflect": false
             }