@dso-toolkit/core 62.25.0 → 62.27.0

package/dist/dso-toolkit/p-824b23ee.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["scrollableCss","DsoScrollableStyle0","resizeObserver","ResizeObserver","debounce","entries","forEach","entry","_a","getScrollableComponentFromResizeObserverEntry","_setScrollState","target","parentNode","ShadowRoot","isDsoScrollableComponent","host","parentElement","undefined","element","tagName","Scrollable","this","mutationObserver","MutationObserver","closest","scrollPosition","getScrollPosition","dsoScrollEnd","emit","scrollEnd","slottedElements","Array","from","children","scrollContainerDiv","scrollHeight","clientHeight","scrollTop","componentDidLoad","observe","characterData","attributes","childList","subtree","shadowContainerDiv","HTMLDivElement","disconnectedCallback","unobserve","disconnect","render","h","key","ref","el","class","clsx","onScroll"],"sources":["src/components/scrollable/scrollable.scss?tag=dso-scrollable&encapsulation=shadow","src/components/scrollable/scrollable.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  block-size: 100%;\r\n  overflow-y: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-shadow-container {\r\n  block-size: 100%;\r\n  max-block-size: inherit;\r\n  min-block-size: inherit;\r\n  position: relative;\r\n\r\n  .dso-scroll-container {\r\n    block-size: 100%;\r\n    max-block-size: inherit;\r\n    min-block-size: inherit;\r\n    overflow-y: auto;\r\n\r\n    &::before,\r\n    &::after {\r\n      background-repeat: no-repeat;\r\n      background-size: 100% units.$u3;\r\n      content: \"\";\r\n      display: block;\r\n      block-size: units.$u3;\r\n      inset-inline-start: 0;\r\n      opacity: 0;\r\n      overflow: visible;\r\n      position: absolute;\r\n      transition: opacity 150ms ease-in-out;\r\n      inline-size: 100%;\r\n      pointer-events: none;\r\n      z-index: 1;\r\n    }\r\n\r\n    &::before {\r\n      background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      inset-block-start: 0;\r\n    }\r\n\r\n    &::after {\r\n      background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      inset-block-end: 0;\r\n    }\r\n\r\n    &.dso-scroll-bottom {\r\n      &::before {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-top {\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-middle {\r\n      &::before,\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Method, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(\r\n    (entries: ResizeObserverEntry[]) =>\r\n      entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n    50,\r\n  ),\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n  target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement | undefined {\r\n  if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n    return target.parentNode.host;\r\n  }\r\n\r\n  if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n    return target.parentElement;\r\n  }\r\n\r\n  return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n  return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-scrollable\",\r\n  styleUrl: \"scrollable.scss\",\r\n  shadow: true,\r\n})\r\nexport class Scrollable {\r\n  // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n  private mutationObserver = new MutationObserver((entries) =>\r\n    entries.forEach(({ target }) => {\r\n      const element = target.parentElement?.closest(\"dso-scrollable\");\r\n      if (element !== this.host) {\r\n        return;\r\n      }\r\n\r\n      this._setScrollState();\r\n    }),\r\n  );\r\n\r\n  private scrollContainerDiv?: HTMLDivElement;\r\n\r\n  private shadowContainerDiv?: HTMLDivElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoScrollableElement;\r\n\r\n  /**\r\n   * Event emitted when the scrollbar has reached top or bottom.\r\n   */\r\n  @Event()\r\n  dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n  @State()\r\n  scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _setScrollState() {\r\n    const scrollPosition = this.getScrollPosition();\r\n    if (this.scrollPosition !== scrollPosition) {\r\n      this.scrollPosition = scrollPosition;\r\n\r\n      if (this.scrollPosition === \"top\" || this.scrollPosition === \"bottom\") {\r\n        this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n      }\r\n    }\r\n  }\r\n\r\n  private get slottedElements() {\r\n    return Array.from(this.host.children);\r\n  }\r\n\r\n  private getScrollPosition(): ScrollPosition {\r\n    if (!this.scrollContainerDiv) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n    if (scrollHeight <= clientHeight) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    if (scrollTop === 0) {\r\n      return \"top\";\r\n    }\r\n\r\n    if (scrollHeight - scrollTop - clientHeight < 1) {\r\n      return \"bottom\";\r\n    }\r\n\r\n    if (scrollTop > 0) {\r\n      return \"middle\";\r\n    }\r\n\r\n    return \"noScroll\";\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      attributes: false,\r\n      childList: false,\r\n      subtree: true,\r\n    });\r\n\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.unobserve(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.mutationObserver.disconnect();\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n        <div\r\n          ref={(el) => (this.scrollContainerDiv = el)}\r\n          class={clsx(\"dso-scroll-container\", {\r\n            [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n          })}\r\n          onScroll={() => this._setScrollState()}\r\n        >\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"iIAAA,MAAMA,EAAgB,uxCACtB,MAAAC,EAAeD,ECKf,MAAME,EAAiB,IAAIC,eACzBC,GACGC,GACCA,EAAQC,SAASC,IAAK,IAAAC,EAAK,OAAAA,EAAAC,EAA8CF,MAAM,MAAAC,SAAA,SAAAA,EAAEE,iBAAiB,KACpG,KAIJ,SAASD,GAA8CE,OACrDA,IAEA,GAAIA,EAAOC,sBAAsBC,YAAcC,EAAyBH,EAAOC,WAAWG,MAAO,CAC/F,OAAOJ,EAAOC,WAAWG,I,CAG3B,GAAIJ,EAAOK,eAAiBF,EAAyBH,EAAOK,eAAgB,CAC1E,OAAOL,EAAOK,a,CAGhB,OAAOC,SACT,CAEA,SAASH,EAAyBI,GAChC,OAAOA,EAAQC,UAAY,gBAC7B,C,MAOaC,EAAU,M,oEAEbC,KAAAC,iBAAmB,IAAIC,kBAAkBlB,GAC/CA,EAAQC,SAAQ,EAAGK,a,MACjB,MAAMO,GAAUV,EAAAG,EAAOK,iBAAa,MAAAR,SAAA,SAAAA,EAAEgB,QAAQ,kBAC9C,GAAIN,IAAYG,KAAKN,KAAM,CACzB,M,CAGFM,KAAKX,iBAAiB,M,oBAkBO,U,CAMjC,qBAAMA,GACJ,MAAMe,EAAiBJ,KAAKK,oBAC5B,GAAIL,KAAKI,iBAAmBA,EAAgB,CAC1CJ,KAAKI,eAAiBA,EAEtB,GAAIJ,KAAKI,iBAAmB,OAASJ,KAAKI,iBAAmB,SAAU,CACrEJ,KAAKM,aAAaC,KAAK,CAAEC,UAAWR,KAAKI,gB,GAK/C,mBAAYK,GACV,OAAOC,MAAMC,KAAKX,KAAKN,KAAKkB,S,CAGtB,iBAAAP,GACN,IAAKL,KAAKa,mBAAoB,CAC5B,MAAO,U,CAGT,MAAMC,aAAEA,EAAYC,aAAEA,EAAYC,UAAEA,GAAchB,KAAKa,mBAEvD,GAAIC,GAAgBC,EAAc,CAChC,MAAO,U,CAGT,GAAIC,IAAc,EAAG,CACnB,MAAO,K,CAGT,GAAIF,EAAeE,EAAYD,EAAe,EAAG,CAC/C,MAAO,Q,CAGT,GAAIC,EAAY,EAAG,CACjB,MAAO,Q,CAGT,MAAO,U,CAGT,gBAAAC,GACEjB,KAAKC,iBAAiBiB,QAAQlB,KAAKN,KAAM,CACvCyB,cAAe,KACfC,WAAY,MACZC,UAAW,MACXC,QAAS,OAGX,GAAItB,KAAKuB,8BAA8BC,eAAgB,CACrD3C,EAAeqC,QAAQlB,KAAKuB,mB,CAG9BvB,KAAKS,gBAAgBxB,SAASY,GAAYhB,EAAeqC,QAAQrB,I,CAGnE,oBAAA4B,GACE,GAAIzB,KAAKuB,8BAA8BC,eAAgB,CACrD3C,EAAe6C,UAAU1B,KAAKuB,mB,CAGhCvB,KAAKC,iBAAiB0B,aAEtB3B,KAAKS,gBAAgBxB,SAASY,GAAYhB,EAAe6C,UAAU7B,I,CAGrE,MAAA+B,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,IAAMC,GAAQhC,KAAKuB,mBAAqBS,EAAKC,MAAM,wBACtDJ,EAAA,OAAAC,IAAA,2CACEC,IAAMC,GAAQhC,KAAKa,mBAAqBmB,EACxCC,MAAOC,EAAK,uBAAwB,CAClC,CAAC,cAAclC,KAAKI,kBAAmBJ,KAAKI,iBAAmB,aAEjE+B,SAAU,IAAMnC,KAAKX,mBAErBwC,EAAA,QAAAC,IAAA,8C","ignoreList":[]}

package/dist/dso-toolkit/p-8a1a6e56.js.map

@@ -1 +1 @@
-{"version":3,"names":["r","e","t","f","n","Array","isArray","o","length","clsx","arguments"],"sources":["../../node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"mappings":"AAAA,SAASA,EAAEC,GAAG,IAAIC,EAAEC,EAAEC,EAAE,GAAG,GAAG,iBAAiBH,GAAG,iBAAiBA,EAAEG,GAAGH,OAAO,GAAG,iBAAiBA,EAAE,GAAGI,MAAMC,QAAQL,GAAG,CAAC,IAAIM,EAAEN,EAAEO,OAAO,IAAIN,EAAE,EAAEA,EAAEK,EAAEL,IAAID,EAAEC,KAAKC,EAAEH,EAAEC,EAAEC,OAAOE,IAAIA,GAAG,KAAKA,GAAGD,EAAE,MAAM,IAAIA,KAAKF,EAAEA,EAAEE,KAAKC,IAAIA,GAAG,KAAKA,GAAGD,GAAG,OAAOC,CAAC,CAAQ,SAASK,IAAO,IAAI,IAAIR,EAAEC,EAAEC,EAAE,EAAEC,EAAE,GAAGG,EAAEG,UAAUF,OAAOL,EAAEI,EAAEJ,KAAKF,EAAES,UAAUP,MAAMD,EAAEF,EAAEC,MAAMG,IAAIA,GAAG,KAAKA,GAAGF,GAAG,OAAOE,CAAC,Q"}
+{"version":3,"names":["r","e","t","f","n","Array","isArray","o","length","clsx","arguments"],"sources":["../../node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"mappings":"AAAA,SAASA,EAAEC,GAAG,IAAIC,EAAEC,EAAEC,EAAE,GAAG,GAAG,iBAAiBH,GAAG,iBAAiBA,EAAEG,GAAGH,OAAO,GAAG,iBAAiBA,EAAE,GAAGI,MAAMC,QAAQL,GAAG,CAAC,IAAIM,EAAEN,EAAEO,OAAO,IAAIN,EAAE,EAAEA,EAAEK,EAAEL,IAAID,EAAEC,KAAKC,EAAEH,EAAEC,EAAEC,OAAOE,IAAIA,GAAG,KAAKA,GAAGD,EAAE,MAAM,IAAIA,KAAKF,EAAEA,EAAEE,KAAKC,IAAIA,GAAG,KAAKA,GAAGD,GAAG,OAAOC,CAAC,CAAQ,SAASK,IAAO,IAAI,IAAIR,EAAEC,EAAEC,EAAE,EAAEC,EAAE,GAAGG,EAAEG,UAAUF,OAAOL,EAAEI,EAAEJ,KAAKF,EAAES,UAAUP,MAAMD,EAAEF,EAAEC,MAAMG,IAAIA,GAAG,KAAKA,GAAGF,GAAG,OAAOE,CAAC,Q","ignoreList":[]}

package/dist/dso-toolkit/p-8f126e70.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as i,h as e,F as t,a as n}from"./p-e6cf4fdb.js";import{c as a}from"./p-8a1a6e56.js";import{c as r}from"./p-808a98bc.js";import{t as s}from"./p-1dbcaeef.js";import{i as l}from"./p-2d694112.js";const c=':host{display:block}*,*::after,*::before{box-sizing:border-box}.active-option{display:flex;inline-size:100%;justify-content:flex-start;align-items:center;padding:0;border:1px solid #275937;border-radius:4px;cursor:pointer;background-color:#fff;line-height:inherit;font-family:inherit;font-size:inherit}.active-option.open{border-radius:4px 4px 0 0}.active-option dso-icon{color:#275937}.active-option dso-label{margin-inline-start:8px}.active-option-label{padding-block:4px;padding-inline:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.active-option-aside{display:flex;align-items:center;gap:8px;padding-block:0;padding-inline:8px;margin-inline-start:auto}.badges{display:flex;justify-content:space-between;align-items:center;gap:4px}.groups-container{position:relative}.groups{position:absolute;inset-block-start:-1px;inset-inline-start:0;inline-size:100%;max-block-size:500px;margin:0;padding:0;overflow-y:auto;background-color:#fff;border:1px solid #275937;border-radius:0 0 4px 4px}.groups li::marker{display:none}.group{border-block-end:1px solid #ccc}.group:last-child{border-block-end:none}.group .option{padding-inline-start:37px}.group .option-label::before{content:"";position:absolute;display:block;block-size:10px;inline-size:10px;inset-block:4px auto;inset-inline:-20px auto;border-radius:50%;background-color:#ccc;border-color:#ccc;color:#191919}.group-label{margin:0;padding-block:4px;padding-inline:16px;color:#666;font-size:14px;font-weight:500;border-block-end:1px solid #ccc}.group-link{display:block;padding-block:8px;padding-inline:4px;text-align:end;color:#000;text-decoration:none}.group-link:hover{text-decoration:underline}.group-link dso-icon{color:#39870c}.group-info .option-label::before{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.group-primary .option-label::before{background-color:#275937;border-color:#275937;color:#fff}.group-success .option-label::before{background-color:#39870c;border-color:#39870c;color:#fff}.group-warning .option-label::before{background-color:#dcd400;border-color:#dcd400;color:#191919}.group-danger .option-label::before{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.group-error .option-label::before{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.group-attention .option-label::before{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}.options{margin:0;padding:0}.option{display:block;inline-size:100%;padding-block:8px;padding-inline:16px;cursor:pointer;line-height:inherit;font-family:inherit;font-size:inherit;border:none;text-align:start;background-color:#fff}.option:hover{background-color:#ebf3e6}.option:hover .option-label{color:#39870c;font-weight:bold}.option.option-active .option-label{color:#39870c;font-weight:bold;text-decoration:underline}.option-label{position:relative;color:#000;font-size:Asap, sans-serif;font-weight:400}.option-hint{padding-inline-start:5px;color:#39870c;font-size:Asap, sans-serif;font-weight:bold}.placeholder{margin:0;padding-block:8px;padding-inline:16px;color:#666}';const d=c;const p=class{constructor(e){o(this,e);this.dsoChange=i(this,"dsoChange",3);this.dsoRedirect=i(this,"dsoRedirect",3);this.toggleOpen=()=>{this.open=!this.open};this.handleOptionClick=(o,i)=>{this.dsoChange.emit({originalEvent:o,option:i});this.open=false};this.handleRedirectClick=(o,i)=>{this.dsoRedirect.emit({originalEvent:o,isModifiedEvent:l(o),redirect:i});this.open=false};this.options=[];this.active=undefined;this.activeHint=undefined;this.open=false}keyDownListener(o){if(this.open&&o.key==="ArrowUp"){o.preventDefault();this.handleTab(-1)}else if(this.open&&o.key==="ArrowDown"){o.preventDefault();this.handleTab(1)}}componentDidRender(){if(this.open&&!this.trap){this.createTrap()}else if(!this.open&&this.trap){this.removeTrap()}}createTrap(){this.trap=r(this.host,{clickOutsideDeactivates:true,escapeDeactivates:true,setReturnFocus:this.toggleButtonElementRef,tabbableOptions:{getShadowRoot:true},onDeactivate:()=>{this.open=false}}).activate()}removeTrap(){var o;(o=this.trap)===null||o===void 0?void 0:o.deactivate();delete this.trap}handleTab(o){var i;const e=s(this.host,{getShadowRoot:true});const t=e.findIndex((o=>{var i;return o===((i=this.host.shadowRoot)===null||i===void 0?void 0:i.activeElement)}));let n=t+o;if(n>=e.length){n=0}else if(n<0){n=e.length-1}(i=e[n])===null||i===void 0?void 0:i.focus()}render(){var o,i;return e(t,null,e("button",{key:"2ce96f0601a2389cb6c5b6ef2c498e47df3281bf","aria-expanded":this.open.toString(),class:a(["active-option",{open:this.open}]),type:"button",onClick:this.toggleOpen,ref:o=>this.toggleButtonElementRef=o},e(u,{key:"db69d2251bcc1ba4eb321a0dc438ef6da78e51d1",active:this.active,options:this.options}),e("span",{key:"c409b29582ae28c06435b1b847ded96678dfb83a",class:"active-option-label"},(i=(o=this.active)===null||o===void 0?void 0:o.label)!==null&&i!==void 0?i:"Selecteer een optie"),e("span",{key:"4f6bb9f7a0a4b5b2ef5903ca9b06500c5160e3d2",class:"active-option-aside"},this.options.some((o=>"summaryCounter"in o&&(o===null||o===void 0?void 0:o.summaryCounter)))&&e("span",{key:"6318ffbdab47a2c2af54b63559afab11a455fce1",class:"badges"},this.options.filter((o=>"options"in o&&"summaryCounter"in o&&!!(o===null||o===void 0?void 0:o.summaryCounter))).map((o=>{var i;return e("dso-badge",{status:(i=o.variant)!==null&&i!==void 0?i:"outline"},o.options.length)}))),e("dso-icon",{key:"d318272d7fbd4a517d2833528164cc3e6212cce6",icon:"caret-down"}))),this.open&&e("div",{key:"5fd58e337194ea6a8c2744577d6ee8099289fe40",class:"groups-container"},e("ul",{key:"da2b62d8bca19b31cb60eeaa5c420efaa0e066b3",class:"groups"},this.options.map((o=>"options"in o&&e("li",{class:a(["group",{[`group-${o.variant}`]:!!o.variant}])},e("p",{class:"group-label"},o.label),e("ul",{class:"options"},o.options.map((o=>e("li",null,e(b,{option:o,active:this.active,activeHint:this.activeHint,callback:this.handleOptionClick}))))),o.redirect&&e(f,{redirect:o.redirect,callback:this.handleRedirectClick}))||"placeholder"in o&&e("li",{class:"group"},e("p",{class:"group-label"},o.label),e("p",{class:"placeholder"},o.placeholder),o.redirect&&e(f,{redirect:o.redirect,callback:this.handleRedirectClick}))||e("li",null,e(b,{option:o,active:this.active,activeHint:this.activeHint,callback:this.handleOptionClick})))))))}get host(){return n(this)}};const b=({option:o,active:i,activeHint:t,callback:n})=>e("button",{class:a(["option",{"option-active":i===o}]),type:"button",onClick:i=>n(i,o)},e("span",{class:"option-label"},o.label),!!t&&i===o&&e("span",{class:"option-hint"},"(",t,")"));const f=({redirect:o,callback:i})=>e("a",{class:"group-link",href:o.href,onClick:e=>i(e,o)},o.label,e("dso-icon",{icon:"chevron-right"}));const u=({active:o,options:i})=>{const t=i.find((i=>"options"in i&&!!i.options.find((i=>i===o))&&!!i.activeLabel));return t?e("dso-label",{compact:true,status:t.variant},t.activeLabel):undefined};p.style=d;export{p as dso_advanced_select};
+//# sourceMappingURL=p-8f126e70.entry.js.map

package/dist/dso-toolkit/p-8f126e70.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["advancedSelectCss","DsoAdvancedSelectStyle0","AdvancedSelect","this","toggleOpen","open","handleOptionClick","event","option","dsoChange","emit","originalEvent","handleRedirectClick","redirect","dsoRedirect","isModifiedEvent","keyDownListener","key","preventDefault","handleTab","componentDidRender","trap","createTrap","removeTrap","createFocusTrap","host","clickOutsideDeactivates","escapeDeactivates","setReturnFocus","toggleButtonElementRef","tabbableOptions","getShadowRoot","onDeactivate","activate","_a","deactivate","direction","elements","tabbable","currentIndex","findIndex","e","shadowRoot","activeElement","nextIndex","length","focus","render","h","Fragment","toString","class","clsx","type","onClick","ref","element","ActiveGroupLabel","active","options","_b","label","some","optionOrGroup","summaryCounter","filter","map","group","status","variant","icon","OptionButton","activeHint","callback","RedirectAnchor","placeholder","href","find","activeLabel","compact","undefined"],"sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n  display: flex;\r\n  inline-size: 100%;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  padding: 0;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: advanced-select.$border-radius;\r\n  cursor: pointer;\r\n  background-color: advanced-select.$bg-color;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n\r\n  &.open {\r\n    border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$icon-color;\r\n  }\r\n\r\n  dso-label {\r\n    margin-inline-start: advanced-select.$inline-padding * 0.5;\r\n  }\r\n}\r\n\r\n.active-option-label {\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  overflow: hidden;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  white-space: nowrap;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: advanced-select.$inline-padding * 0.5;\r\n  padding-block: 0;\r\n  padding-inline: advanced-select.$inline-padding * 0.5;\r\n  margin-inline-start: auto;\r\n}\r\n\r\n.badges {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: advanced-select.$block-padding;\r\n}\r\n\r\n.groups-container {\r\n  position: relative;\r\n}\r\n\r\n.groups {\r\n  position: absolute;\r\n  inset-block-start: -1px;\r\n  inset-inline-start: 0;\r\n  inline-size: 100%;\r\n  max-block-size: 500px;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow-y: auto;\r\n  background-color: advanced-select.$bg-color;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n  li {\r\n    &::marker {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.group {\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n\r\n  &:last-child {\r\n    border-block-end: none;\r\n  }\r\n\r\n  .option {\r\n    padding-inline-start: advanced-select.$inline-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n  }\r\n\r\n  .option-label::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    display: block;\r\n    block-size: advanced-select.$option-dot-size;\r\n    inline-size: advanced-select.$option-dot-size;\r\n    inset-block: advanced-select.$block-padding auto;\r\n    inset-inline: -#{advanced-select.$option-dot-size * 2} auto;\r\n    border-radius: 50%;\r\n    @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n  }\r\n}\r\n\r\n.group-label {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$group-label-color;\r\n  font-size: advanced-select.$group-label-font-size;\r\n  font-weight: advanced-select.$group-label-font-weight;\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n  display: block;\r\n  padding-block: advanced-select.$group-link-block-padding;\r\n  padding-inline: advanced-select.$group-link-inline-padding;\r\n  text-align: end;\r\n  color: advanced-select.$group-link-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$redirect-icon-color;\r\n  }\r\n}\r\n\r\n.group-info .option-label::before {\r\n  @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n  @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n  @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n  @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-danger .option-label::before {\r\n  @include set-colors.apply(advanced-select.$danger-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n  @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n  @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.option {\r\n  display: block;\r\n  inline-size: 100%;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  cursor: pointer;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  border: none;\r\n  text-align: start;\r\n  background-color: advanced-select.$bg-color;\r\n\r\n  &:hover {\r\n    background-color: advanced-select.$option-hover-bg-color;\r\n\r\n    .option-label {\r\n      color: advanced-select.$option-hover-color;\r\n      font-weight: advanced-select.$option-hover-font-weight;\r\n    }\r\n  }\r\n}\r\n\r\n.option.option-active .option-label {\r\n  color: advanced-select.$option-active-color;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n  text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n  position: relative;\r\n  color: advanced-select.$option-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n  padding-inline-start: 5px;\r\n  color: advanced-select.$option-active-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n\r\n.placeholder {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$option-placeholder-color;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Prop,\r\n  h,\r\n  FunctionalComponent,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  State,\r\n  Fragment,\r\n  Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport {\r\n  AdvancedSelectGroup,\r\n  AdvancedSelectGroupRedirect,\r\n  AdvancedSelectOption,\r\n  AdvancedSelectChangeEvent,\r\n  AdvancedSelectOptionOrGroup,\r\n  AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.interfaces\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\n@Component({\r\n  tag: \"dso-advanced-select\",\r\n  styleUrl: \"advanced-select.scss\",\r\n  shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n  private trap?: FocusTrap;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAdvancedSelectElement;\r\n\r\n  /**\r\n   * The options to display in the select.\r\n   */\r\n  @Prop()\r\n  options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n  /**\r\n   * The active option. By object reference.\r\n   */\r\n  @Prop()\r\n  active?: AdvancedSelectOption<never>;\r\n\r\n  /**\r\n   * An extra text for the active option. Only visible in the list of options.\r\n   */\r\n  @Prop()\r\n  activeHint?: string;\r\n\r\n  /**\r\n   * The open state of the options list.\r\n   */\r\n  @State()\r\n  open: boolean = false;\r\n\r\n  /**\r\n   * Emitted when user selects an option\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n  /**\r\n   * Emitted when user activates a group redirect link.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n  private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (this.open && event.key === \"ArrowUp\") {\r\n      event.preventDefault();\r\n      this.handleTab(-1);\r\n    } else if (this.open && event.key === \"ArrowDown\") {\r\n      event.preventDefault();\r\n      this.handleTab(1);\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.open && !this.trap) {\r\n      this.createTrap();\r\n    } else if (!this.open && this.trap) {\r\n      this.removeTrap();\r\n    }\r\n  }\r\n\r\n  private toggleOpen = () => {\r\n    this.open = !this.open;\r\n  };\r\n\r\n  private createTrap() {\r\n    this.trap = createFocusTrap(this.host, {\r\n      clickOutsideDeactivates: true,\r\n      escapeDeactivates: true,\r\n      setReturnFocus: this.toggleButtonElementRef,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      onDeactivate: () => {\r\n        this.open = false;\r\n      },\r\n    }).activate();\r\n  }\r\n\r\n  private removeTrap() {\r\n    this.trap?.deactivate();\r\n    delete this.trap;\r\n  }\r\n\r\n  private handleTab(direction: number) {\r\n    const elements = tabbable(this.host, { getShadowRoot: true });\r\n    const currentIndex = elements.findIndex((e) => e === this.host.shadowRoot?.activeElement);\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= elements.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = elements.length - 1;\r\n    }\r\n\r\n    elements[nextIndex]?.focus();\r\n  }\r\n\r\n  private handleOptionClick = (event: MouseEvent, option: AdvancedSelectOption<never>) => {\r\n    this.dsoChange.emit({ originalEvent: event, option });\r\n    this.open = false;\r\n  };\r\n\r\n  private handleRedirectClick = (event: MouseEvent, redirect: AdvancedSelectGroupRedirect) => {\r\n    this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          aria-expanded={this.open.toString()}\r\n          class={clsx([\"active-option\", { open: this.open }])}\r\n          type=\"button\"\r\n          onClick={this.toggleOpen}\r\n          ref={(element) => (this.toggleButtonElementRef = element)}\r\n        >\r\n          <ActiveGroupLabel active={this.active} options={this.options} />\r\n          <span class=\"active-option-label\">{this.active?.label ?? \"Selecteer een optie\"}</span>\r\n          <span class=\"active-option-aside\">\r\n            {this.options.some(\r\n              (optionOrGroup) => \"summaryCounter\" in optionOrGroup && optionOrGroup?.summaryCounter,\r\n            ) && (\r\n              <span class=\"badges\">\r\n                {this.options\r\n                  .filter(\r\n                    (option): option is AdvancedSelectGroup<never> =>\r\n                      \"options\" in option && \"summaryCounter\" in option && !!option?.summaryCounter,\r\n                  )\r\n                  .map((group) => (\r\n                    <dso-badge status={group.variant ?? \"outline\"}>{group.options.length}</dso-badge>\r\n                  ))}\r\n              </span>\r\n            )}\r\n            <dso-icon icon=\"caret-down\"></dso-icon>\r\n          </span>\r\n        </button>\r\n        {this.open && (\r\n          <div class=\"groups-container\">\r\n            <ul class=\"groups\">\r\n              {this.options.map(\r\n                (optionOrGroup) =>\r\n                  (\"options\" in optionOrGroup && (\r\n                    <li class={clsx([\"group\", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }])}>\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <ul class=\"options\">\r\n                        {optionOrGroup.options.map((option) => (\r\n                          <li>\r\n                            <OptionButton\r\n                              option={option}\r\n                              active={this.active}\r\n                              activeHint={this.activeHint}\r\n                              callback={this.handleOptionClick}\r\n                            />\r\n                          </li>\r\n                        ))}\r\n                      </ul>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) ||\r\n                  (\"placeholder\" in optionOrGroup && (\r\n                    <li class=\"group\">\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <p class=\"placeholder\">{optionOrGroup.placeholder}</p>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) || (\r\n                    <li>\r\n                      <OptionButton\r\n                        option={optionOrGroup}\r\n                        active={this.active}\r\n                        activeHint={this.activeHint}\r\n                        callback={this.handleOptionClick}\r\n                      />\r\n                    </li>\r\n                  ),\r\n              )}\r\n            </ul>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\ninterface OptionButtonProps {\r\n  option: AdvancedSelectOption<never>;\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  activeHint: string | undefined;\r\n  callback: (event: MouseEvent, value: AdvancedSelectOption<never>) => void;\r\n}\r\n\r\nconst OptionButton: FunctionalComponent<OptionButtonProps> = ({ option, active, activeHint, callback }) => (\r\n  <button\r\n    class={clsx([\"option\", { \"option-active\": active === option }])}\r\n    type=\"button\"\r\n    onClick={(e) => callback(e, option)}\r\n  >\r\n    <span class=\"option-label\">{option.label}</span>\r\n    {!!activeHint && active === option && <span class=\"option-hint\">({activeHint})</span>}\r\n  </button>\r\n);\r\n\r\ninterface RedirectAnchorProps {\r\n  redirect: AdvancedSelectGroupRedirect;\r\n  callback: (event: MouseEvent, value: AdvancedSelectGroupRedirect) => void;\r\n}\r\n\r\nconst RedirectAnchor: FunctionalComponent<RedirectAnchorProps> = ({ redirect, callback }) => (\r\n  <a class=\"group-link\" href={redirect.href} onClick={(e) => callback(e, redirect)}>\r\n    {redirect.label}\r\n    <dso-icon icon=\"chevron-right\"></dso-icon>\r\n  </a>\r\n);\r\n\r\ninterface ActiveGroupLabelProps {\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  options: AdvancedSelectOptionOrGroup<never>[];\r\n}\r\n\r\nconst ActiveGroupLabel: FunctionalComponent<ActiveGroupLabelProps> = ({ active, options }) => {\r\n  const group = options.find(\r\n    (optionOrGroup): optionOrGroup is AdvancedSelectGroup<never> =>\r\n      \"options\" in optionOrGroup &&\r\n      !!optionOrGroup.options.find((option) => option === active) &&\r\n      !!optionOrGroup.activeLabel,\r\n  );\r\n\r\n  return group ? (\r\n    <dso-label compact status={group.variant}>\r\n      {group.activeLabel}\r\n    </dso-label>\r\n  ) : undefined;\r\n};\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/p-93e278c0.entry.js

@@ -0,0 +1,2 @@
+import{h as e,r as t,c as s,H as i,a}from"./p-e6cf4fdb.js";import{c as d}from"./p-97f788d4.js";var o;(function(e){e[e["Sunday"]=0]="Sunday";e[e["Monday"]=1]="Monday";e[e["Tuesday"]=2]="Tuesday";e[e["Wednesday"]=3]="Wednesday";e[e["Thursday"]=4]="Thursday";e[e["Friday"]=5]="Friday";e[e["Saturday"]=6]="Saturday"})(o||(o={}));function n(e,t,s){const i=parseInt(s,10);const a=parseInt(t,10);const d=parseInt(e,10);const o=Number.isInteger(d)&&Number.isInteger(a)&&Number.isInteger(i)&&a>0&&a<=12&&i>0&&i<=31&&d>0;if(o){return new Date(d,a-1,i)}}function c(e){if(!e){return}const t=e.split("-");if(t.length===3&&typeof t[0]==="string"&&typeof t[1]==="string"&&typeof t[2]==="string"&&t[2].length===4){return n(t[2],t[1],t[0])}}function r(e){if(!e){return""}const t=e.getDate().toString(10).padStart(2,"0");const s=(e.getMonth()+1).toString(10).padStart(2,"0");const i=e.getFullYear().toString(10).padStart(2,"0");return`${t}-${s}-${i}`}function l(e,t){if(!e||!t){return false}return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function p(e,t){const s=new Date(e);s.setDate(s.getDate()+t);return s}function f(e,t=o.Monday){const s=new Date(e);const i=s.getDay();const a=(i<t?7:0)+i-t;s.setDate(s.getDate()-a);return s}function h(e,t=o.Monday){const s=new Date(e);const i=s.getDay();const a=(i<t?-7:0)+6-(i-t);s.setDate(s.getDate()+a);return s}function b(e){return new Date(e.getFullYear(),e.getMonth(),1)}function u(e){return new Date(e.getFullYear(),e.getMonth()+1,0)}function y(e,t){const s=new Date(e);s.setMonth(t);return s}function g(e,t){const s=new Date(e);s.setFullYear(t);return s}function k(e,t,s){return _(e,t,s)===e}function _(e,t,s){const i=e.getTime();if(t&&t instanceof Date&&i<t.getTime()){return t}if(s&&s instanceof Date&&i>s.getTime()){return s}return e}function m(e,t){const s=[];let i=e;while(!l(i,t)){s.push(i);i=p(i,1)}s.push(i);return s}function x(e,t=o.Monday){const s=f(b(e),t);const i=h(u(e),t);return m(s,i)}const v=({focusedDay:t,today:s,day:i,onDaySelect:a,onKeyboardNavigation:d,focusedDayRef:o,inRange:n})=>{const c=l(i,s);const p=l(i,t);const f=i.getMonth()!==t.getMonth();const h=!n;function b(e){a(e,i)}return e("button",{class:{"dso-date__day":true,"is-today":c},tabIndex:p?0:-1,onClick:b,onKeyDown:d,disabled:h||f,type:"button",ref:e=>{if(p&&e&&o){o(e)}}},e("span",{"aria-hidden":"true"},i.getDate()),e("span",{class:"dso-date__vhidden"},r(i)))};function w(e,t){const s=[];for(let i=0;i<e.length;i+=t){s.push(e.slice(i,i+t))}return s}function z(e,t,s){return e.map(((i,a)=>{const d=(a+t)%e.length;const o=e[d];if(!o){throw new Error("No item found")}return s(o)}))}const D=({selectedDate:t,focusedDate:s,labelledById:i,localization:a,firstDayOfWeek:d,min:o,max:n,onDateSelect:c,onKeyboardNavigation:r,focusedDayRef:p,onMouseDown:f,onFocusIn:h})=>{const b=new Date;const u=x(s,d);return e("table",{class:"dso-date__table",role:"grid","aria-labelledby":i,onFocusin:h,onMouseDown:f},e("thead",null,e("tr",null,z(a.dayNames,d,(t=>e("th",{class:"dso-date__table-header",scope:"col"},e("span",{"aria-hidden":"true"},t.substr(0,2)),e("span",{class:"dso-date__vhidden"},t)))))),e("tbody",null,w(u,7).map((i=>e("tr",{class:"dso-date__row"},i.map((i=>e("td",{class:"dso-date__cell",role:"gridcell","aria-selected":l(i,t)?"true":undefined,"aria-current":l(i,b)?"date":undefined},e(v,{day:i,today:b,focusedDay:s,inRange:k(i,o,n),onDaySelect:c,onKeyboardNavigation:r,focusedDayRef:p})))))))))};const M={buttonLabel:"Kies datum",placeholder:"dd-mm-jjjj",selectedDateMessage:"Geselecteerde datum is",prevMonthLabel:"Vorige maand",nextMonthLabel:"Volgende maand",monthSelectLabel:"Maand",yearSelectLabel:"Jaar",closeLabel:"Sluiten",keyboardInstruction:"Gebruik de pijltjestoetsen om een dag te kiezen",calendarHeading:"Kies een datum",dayNames:["Zondag","Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag"],monthNames:["Januari","Februari","Maart","April","Mei","Juni","Juli","Augustus","September","Oktober","November","December"],monthNamesShort:["Jan","Feb","Mrt","Apr","Mei","Jun","Jul","Aug","Sep","Okt","Nov","Dec"]};function N(e,t,s,i){if(s&&i){const{minYear:a,minMonth:d}={minYear:s.getFullYear(),minMonth:s.getMonth()};const{maxYear:o,maxMonth:n}={maxYear:i.getFullYear(),maxMonth:i.getMonth()};return e.monthNames.filter(((e,s)=>{if(a===t&&o===t){return s>=d&&s>=n}if(a===t){return s>=d}if(o===t){return s<=n}return true}))}if(s){const{minYear:i,minMonth:a}={minYear:s.getFullYear(),minMonth:s.getMonth()};return e.monthNames.filter(((e,s)=>i===t&&s>=a))}if(i){const{maxYear:s,maxMonth:a}={maxYear:i.getFullYear(),maxMonth:i.getMonth()};return e.monthNames.filter(((e,i)=>s===t&&i<=a))}return e.monthNames}function S(e,t){const s=[];for(let i=e;i<=t;i++){s.push(i)}return s}const T='.sc-dso-date-picker-legacy-h{display:block}[invalid].sc-dso-date-picker-legacy-h:not([invalid=false]) .dso-date__input.sc-dso-date-picker-legacy{border-color:#ce3f51}.dso-date.sc-dso-date-picker-legacy *.sc-dso-date-picker-legacy,.dso-date.sc-dso-date-picker-legacy *.sc-dso-date-picker-legacy::before,.dso-date.sc-dso-date-picker-legacy *.sc-dso-date-picker-legacy::after{box-sizing:border-box}.dso-date.sc-dso-date-picker-legacy{box-sizing:border-box;color:#191919;display:block;font-family:"Asap", sans-serif;margin:0;position:relative;text-align:start;inline-size:100%}.dso-date.sc-dso-date-picker-legacy:not(.dso-visible) .dso-date__dialog.sc-dso-date-picker-legacy{display:none}.dso-date__input.sc-dso-date-picker-legacy{display:block;inline-size:100%;block-size:40px;padding-block:6px;padding-inline: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-legacy::-moz-placeholder{color:#666;opacity:1}.dso-date__input.sc-dso-date-picker-legacy:-ms-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker-legacy::-webkit-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker-legacy::-ms-expand{background-color:transparent;border:0}.dso-date__input.sc-dso-date-picker-legacy:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled].sc-dso-date-picker-legacy,.dso-date__input[readonly].sc-dso-date-picker-legacy,fieldset[disabled].sc-dso-date-picker-legacy .dso-date__input.sc-dso-date-picker-legacy{background-color:#fff;opacity:1}.dso-date__input[disabled].sc-dso-date-picker-legacy,fieldset[disabled].sc-dso-date-picker-legacy .dso-date__input.sc-dso-date-picker-legacy{cursor:default}.dso-date__input[disabled].sc-dso-date-picker-legacy{border-color:#e5e5e5;color:#999}.dso-date__input[readonly].sc-dso-date-picker-legacy{border-width:1px}.dso-date__input[type=text].sc-dso-date-picker-legacy{line-height:40px}.dso-date__input[size].sc-dso-date-picker-legacy{inline-size:auto}.dso-date__toggle.sc-dso-date-picker-legacy{-moz-appearance:none;-webkit-appearance:none;-webkit-user-select:none;align-items:center;appearance:none;background:transparent;border:0;border-radius:0;border-end-end-radius:4px;border-start-end-radius:4px;color:#39870c;cursor:pointer;display:flex;block-size:38px;justify-content:center;padding:0;position:absolute;inset-inline-end:0;transform:translateY(-50%);inset-block-start:50%;user-select:none;inline-size:38px;z-index:101}.dso-date__toggle.sc-dso-date-picker-legacy:disabled{color:#afcf9d;cursor:default}.dso-date__dialog.sc-dso-date-picker-legacy{border-width:1px;display:flex;inset-inline-end:0;min-inline-size:320px;opacity:0;position:absolute;inset-block-start:100%;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;visibility:hidden;will-change:transform, opacity, visibility;z-index:210}@media (max-width: 35.9375em){.dso-date__dialog.sc-dso-date-picker-legacy{background:rgba(25, 25, 25, 0.5);inset-block-end:0;position:fixed;inset-inline-start:0;inset-inline-end:0;inset-block-start:0;transform:translateZ(0);transform-origin:bottom center}}.dso-date__dialog.is-left.sc-dso-date-picker-legacy{inset-inline-start:-11px;inset-inline-end:auto;inline-size:auto}.dso-date__dialog.is-active.sc-dso-date-picker-legacy{opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.dso-date__dialog-content.sc-dso-date-picker-legacy{background:#fff;border:1px solid rgba(0, 0, 0, 0.1);border-radius:4px;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);margin-inline-start:auto;margin-inline-end:-1px;margin-block-start:8px;max-inline-size:310px;min-inline-size:290px;padding:16px;position:relative;transform:none;inline-size:100%;z-index:210}@media (max-width: 35.9375em){.dso-date__dialog-content.sc-dso-date-picker-legacy{border:0;border-radius:0;border-start-start-radius:4px;border-start-end-radius:4px;inset-block-end:0;inset-inline-start:0;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding-block:0 20px;padding-inline:8%;position:absolute;transform:translateZ(0) translateY(100%);transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;visibility:hidden;will-change:transform, opacity, visibility}.is-active.sc-dso-date-picker-legacy .dso-date__dialog-content.sc-dso-date-picker-legacy{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}}.dso-date__table.sc-dso-date-picker-legacy{border-collapse:collapse;border-spacing:0;color:#191919;font-size:1rem;font-weight:400;line-height:1.25;min-inline-size:280px;table-layout:fixed;text-align:center;inline-size:100%}.dso-date__table-header.sc-dso-date-picker-legacy{font-size:0.875em;font-weight:600;block-size:36px;line-height:36px;text-align:center;text-decoration:none;text-transform:uppercase}.dso-date__cell.sc-dso-date-picker-legacy{block-size:40px;padding:1px;text-align:center;inline-size:40px}.dso-date__day.sc-dso-date-picker-legacy{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;box-shadow:0 0 0 1px transparent;color:#191919;cursor:pointer;display:inline-block;font-family:"Asap", sans-serif;font-variant-numeric:tabular-nums;font-weight:400;block-size:38px;line-height:0;padding:0;position:relative;text-align:center;vertical-align:middle;inline-size:38px;z-index:100}.dso-date__day.is-today.sc-dso-date-picker-legacy{background:transparent;block-size:36px;box-shadow:0 0 0 1px #39870c;inline-size:36px}.dso-date__day.sc-dso-date-picker-legacy:hover,.dso-date__day.sc-dso-date-picker-legacy:active{background:#39870c;color:#fff}.dso-date__day.sc-dso-date-picker-legacy:focus{background:transparent;box-shadow:0 0 0 2px #275937;color:#191919;block-size:34px;outline:0;inline-size:34px}[aria-selected=true].sc-dso-date-picker-legacy .dso-date__day.sc-dso-date-picker-legacy{background:#39870c;color:#fff}[aria-selected=true].sc-dso-date-picker-legacy .dso-date__day.sc-dso-date-picker-legacy:focus{background:transparent}[aria-selected=true].sc-dso-date-picker-legacy .dso-date__day.sc-dso-date-picker-legacy:focus span[aria-hidden=true].sc-dso-date-picker-legacy{background:#39870c;border:1px solid #fff;line-height:32px}.dso-date__day.sc-dso-date-picker-legacy:disabled{background:#fff;color:#ccc;cursor:default}.dso-date__day.sc-dso-date-picker-legacy span[aria-hidden=true].sc-dso-date-picker-legacy{border-radius:50%;display:inline-block;block-size:34px;line-height:34px;inline-size:34px}.dso-date__header.sc-dso-date-picker-legacy{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.dso-date__header.sc-dso-date-picker-legacy span.sc-dso-date-picker-legacy{font-size:0.875rem}.dso-date__nav.sc-dso-date-picker-legacy{white-space:nowrap}.dso-date__prev.sc-dso-date-picker-legacy,.dso-date__next.sc-dso-date-picker-legacy{-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:transparent;border:1px solid #39870c;border-radius:4px;box-sizing:border-box;color:#39870c;cursor:pointer;display:inline-flex;font-size:1em;block-size:32px;justify-content:center;margin-inline-start:8px;padding:0;inline-size:32px}@media (max-width: 35.9375em){.dso-date__prev.sc-dso-date-picker-legacy,.dso-date__next.sc-dso-date-picker-legacy{block-size:40px;inline-size:40px}}.dso-date__prev.sc-dso-date-picker-legacy:hover,.dso-date__prev.sc-dso-date-picker-legacy:active,.dso-date__next.sc-dso-date-picker-legacy:hover,.dso-date__next.sc-dso-date-picker-legacy:active{background-color:#39870c;color:#fff}.dso-date__prev.sc-dso-date-picker-legacy:focus,.dso-date__next.sc-dso-date-picker-legacy:focus{background:transparent;color:#39870c}.dso-date__prev.sc-dso-date-picker-legacy:disabled,.dso-date__prev.sc-dso-date-picker-legacy:disabled:hover,.dso-date__next.sc-dso-date-picker-legacy:disabled,.dso-date__next.sc-dso-date-picker-legacy:disabled:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d;opacity:1}.dso-date__prev.sc-dso-date-picker-legacy svg.sc-dso-date-picker-legacy,.dso-date__next.sc-dso-date-picker-legacy svg.sc-dso-date-picker-legacy{margin-block:0;margin-inline:auto}.dso-date__select.sc-dso-date-picker-legacy{display:inline-flex;block-size:28px;line-height:28px;position:relative}.dso-date__select.sc-dso-date-picker-legacy span.sc-dso-date-picker-legacy{margin-inline-end:4px}.dso-date__select.sc-dso-date-picker-legacy select.sc-dso-date-picker-legacy{color:#275937;cursor:pointer;font-size:1rem;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:101}.dso-date__select.sc-dso-date-picker-legacy select.sc-dso-date-picker-legacy:focus+.dso-date__select-label.sc-dso-date-picker-legacy{box-shadow:0 0 0 2px #275937}.dso-date__select.sc-dso-date-picker-legacy select.sc-dso-date-picker-legacy:disabled{color:#afcf9d}.dso-date__select-label.sc-dso-date-picker-legacy{align-items:center;border-radius:4px;color:#39870c;display:flex;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:100}.dso-date__select-label.sc-dso-date-picker-legacy span.sc-dso-date-picker-legacy{font-size:1.25rem;font-weight:600;line-height:1.25}.dso-date__select-label.sc-dso-date-picker-legacy svg.sc-dso-date-picker-legacy{inline-size:16px;block-size:16px}.dso-date__mobile.sc-dso-date-picker-legacy{align-items:center;border-block-end:1px solid rgba(0, 0, 0, 0.12);display:flex;font-size:1em;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding-block:12px;padding-inline:20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width: 36em){.dso-date__mobile.sc-dso-date-picker-legacy{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-16px;inset-block-start:-16px;inline-size:auto}}.dso-date__mobile-heading.sc-dso-date-picker-legacy{display:inline-block;font-weight:600;max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.dso-date__mobile-heading.sc-dso-date-picker-legacy{display:none}}.dso-date__close.sc-dso-date-picker-legacy{-webkit-appearance:none;align-items:center;appearance:none;background-color:#fff;border:0;border-radius:50%;color:#39870c;cursor:pointer;display:flex;font-size:1em;block-size:32px;justify-content:center;margin-inline-end:-4px;padding:0;inline-size:32px}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker-legacy{margin-inline-end:0;opacity:0}}.dso-date__close.sc-dso-date-picker-legacy:focus{box-shadow:0 0 0 2px #275937;outline:none}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker-legacy:focus{opacity:1}}.dso-date__vhidden.sc-dso-date-picker-legacy{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}';const Y=T;const E={TAB:9,ESC:27,SPACE:32,PAGE_UP:33,PAGE_DOWN:34,END:35,HOME:36,LEFT:37,UP:38,RIGHT:39,DOWN:40};const j=/[^0-9-]+/g;const F=300;function K(e,t){const s=e.value;const i=e.selectionStart;if(!i){return s}const a=s.slice(0,i);const d=s.slice(i,s.length);const o=a.replace(t,"");const n=d.replace(t,"");const c=o+n;const r=o.length;e.value=c;e.selectionStart=e.selectionEnd=r;return c}const C=class{constructor(e){t(this,e);this.dsoDateChange=s(this,"dsoDateChange",7);this.dsoBlur=s(this,"dsoBlur",7);this.dsoKeyUp=s(this,"dsoKeyUp",7);this.dsoKeyDown=s(this,"dsoKeyDown",7);this.dsoFocus=s(this,"dsoFocus",7);this.monthSelectId=d("DsoDateMonth");this.yearSelectId=d("DsoDateYear");this.dialogLabelId=d("DsoDateLabel");this.localization=M;this.firstDayOfWeek=o.Monday;this.enableActiveFocus=()=>{this.activeFocus=true};this.disableActiveFocus=()=>{this.activeFocus=false};this.toggleOpen=e=>{e.preventDefault();this.open?this.hide(false):this.show()};this.handleEscKey=e=>{if(e.keyCode===E.ESC){this.hide()}};this.handleBlur=e=>{e.stopPropagation();this.dsoBlur.emit({component:"dso-date-picker-legacy"})};this.handleKeyUp=e=>{e.stopPropagation();this.dsoKeyUp.emit({component:"dso-date-picker-legacy",originalEvent:e})};this.handleKeyDown=e=>{e.stopPropagation();this.dsoKeyDown.emit({component:"dso-date-picker-legacy",originalEvent:e})};this.handleFocus=e=>{e.stopPropagation();this.dsoFocus.emit({component:"dso-date-picker-legacy"})};this.handleTouchStart=e=>{const t=e.changedTouches[0];if(!t){throw new Error("No touch found")}this.initialTouchX=t.pageX;this.initialTouchY=t.pageY};this.handleTouchMove=e=>{e.preventDefault()};this.handleTouchEnd=e=>{var t,s;const i=e.changedTouches[0];if(!i){throw new Error("No touch found")}const a=i.pageX-((t=this.initialTouchX)!==null&&t!==void 0?t:0);const d=i.pageY-((s=this.initialTouchY)!==null&&s!==void 0?s:0);const o=70;const n=Math.abs(a)>=o&&Math.abs(d)<=o;const c=Math.abs(d)>=o&&Math.abs(a)<=o&&d>0;if(n){this.addMonths(a<0?1:-1)}else if(c){this.hide(false);e.preventDefault()}this.initialTouchY=undefined;this.initialTouchX=undefined};this.handleNextMonthClick=e=>{e.preventDefault();this.addMonths(1)};this.handlePreviousMonthClick=e=>{e.preventDefault();this.addMonths(-1)};this.handleFirstFocusableKeydown=e=>{var t;if(e.keyCode===E.TAB&&e.shiftKey){(t=this.focusedDayNode)===null||t===void 0?void 0:t.focus();e.preventDefault()}};this.handleKeyboardNavigation=e=>{var t;if(e.keyCode===E.TAB&&!e.shiftKey){e.preventDefault();(t=this.firstFocusableElement)===null||t===void 0?void 0:t.focus();return}let s=true;switch(e.keyCode){case E.RIGHT:this.addDays(1);break;case E.LEFT:this.addDays(-1);break;case E.DOWN:this.addDays(7);break;case E.UP:this.addDays(-7);break;case E.PAGE_UP:if(e.shiftKey){this.addYears(-1)}else{this.addMonths(-1)}break;case E.PAGE_DOWN:if(e.shiftKey){this.addYears(1)}else{this.addMonths(1)}break;case E.HOME:this.startOfWeek();break;case E.END:this.endOfWeek();break;default:s=false}if(s){e.preventDefault();this.enableActiveFocus()}};this.handleDaySelect=(e,t)=>{if(!k(t,c(this.min),c(this.max))){return}if(t.getMonth()===this.focusedDay.getMonth()){this.setValue(t);this.hide()}else{this.setFocusedDay(t)}};this.handleMonthSelect=e=>{if(e.target instanceof HTMLSelectElement){this.setMonth(parseInt(e.target.value,10))}};this.handleYearSelect=e=>{if(e.target instanceof HTMLSelectElement){this.setYear(parseInt(e.target.value,10))}};this.handleInputChange=e=>{const t=e.target;const s=K(t,j);this.setValue(s)};this.prepareEvent=e=>{const t={component:"dso-date-picker-legacy",value:"",valueAsDate:undefined};if(e instanceof Date){t.valueAsDate=e}else{t.value=e;t.valueAsDate=c(e)}if(t.valueAsDate){t.value=r(t.valueAsDate)}if(!t.valueAsDate&&this.required){t.error="required"}if(t.value&&!t.valueAsDate){t.error="invalid"}if(t.valueAsDate&&(this.min||this.max)){const e=c(this.min);const s=c(this.max);const i=_(t.valueAsDate,e,s);if(i!==t.valueAsDate&&i===e){t.valueAsDate=undefined;t.error="min-range"}else if(i!==t.valueAsDate&&i===s){t.valueAsDate=undefined;t.error="max-range"}}return t};this.processFocusedDayNode=e=>{this.focusedDayNode=e;if(this.activeFocus&&this.open){setTimeout((()=>e.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}handleDocumentClick(e){if(!this.open){return}const t=e.composedPath();for(const e of t){if(e instanceof Node&&this.element.contains(e)){return}}this.hide(false)}async setFocus(){var e;return(e=this.datePickerLegacyInput)===null||e===void 0?void 0:e.focus()}async show(){if(typeof this.hideTimeoutId!=="undefined"){clearTimeout(this.hideTimeoutId)}this.visible=true;setTimeout((()=>{this.open=true;this.setFocusedDay(c(this.value)||new Date);if(typeof this.focusTimeoutId!=="undefined"){clearTimeout(this.focusTimeoutId)}this.focusTimeoutId=setTimeout((()=>{var e;return(e=this.monthSelectNode)===null||e===void 0?void 0:e.focus()}),F)}))}async hide(e=true){this.open=false;if(typeof this.focusTimeoutId!=="undefined"){clearTimeout(this.focusTimeoutId)}this.hideTimeoutId=setTimeout((()=>{if(e&&this.datePickerLegacyButton){this.datePickerLegacyButton.focus()}this.visible=false}),F+200)}addDays(e){this.setFocusedDay(p(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(f(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(h(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const t=y(b(this.focusedDay),e);const s=u(t);const i=y(this.focusedDay,e);this.setFocusedDay(_(i,t,s))}setYear(e){const t=g(b(this.focusedDay),e);const s=u(t);const i=g(this.focusedDay,e);this.setFocusedDay(_(i,t,s))}setFocusedDay(e){this.focusedDay=_(e,c(this.min),c(this.max))}setValue(e){const t=this.prepareEvent(e);this.value=typeof e==="string"?e:t.value;if(this.value!==this.previousValue){this.dsoDateChange.emit(t);this.previousValue=this.value}}componentWillLoad(){const e=c(this.min);const t=c(this.max);if(e&&e>this.focusedDay){this.focusedDay=e}if(t&&t<this.focusedDay){this.focusedDay=t}}componentDidLoad(){const e=c(this.value);if(e){this.previousValue=this.value=r(e)}if(this.dsoAutofocus){this.setFocus()}}render(){var t,s;const a=c(this.value);const d=a&&r(a);const o=(a||this.focusedDay).getFullYear();const n=this.focusedDay.getMonth();const l=this.focusedDay.getFullYear();const p=c(this.min);const f=c(this.max);const h=p&&p.getMonth()===n&&p.getFullYear()===l;const b=f&&f.getMonth()===n&&f.getFullYear()===l;let u=o-10;let y=o+10;if(p){u=Math.max(u,p.getFullYear())}if(f){y=Math.min(y,f.getFullYear())}return e(i,{key:"d14bbb1fa4a6fa9496b9790b5c8e7fe3b3e1e995"},e("div",{key:"7799d1d402293ea89713f93a7e306793ebafa41f",class:{"dso-date":true,"dso-visible":this.visible}},e("div",{key:"f1183710c97e80d989755adf4ba775ec5a2b2b85",class:"dso-date__input-wrapper"},e("input",{key:"67b4f456f2a653169660eb0e0294a86170a61851",class:"dso-date__input",value:this.value,placeholder:this.localization.placeholder,id:this.identifier,disabled:this.disabled,role:(t=this.role)!==null&&t!==void 0?t:undefined,required:this.required?true:undefined,"aria-autocomplete":"none","aria-invalid":(s=this.invalid)===null||s===void 0?void 0:s.toString(),"aria-describedby":this.describedBy,onInput:this.handleInputChange,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyUp:this.handleKeyUp,onKeyDown:this.handleKeyDown,autoComplete:"off",ref:e=>this.datePickerLegacyInput=e}),e("button",{key:"8a193722292c56fe7abf08ae93f17fa40ca9d40f",type:"button",class:"dso-date__toggle",onClick:this.toggleOpen,disabled:this.disabled,ref:e=>this.datePickerLegacyButton=e},e("span",{key:"1fa5d897acc0081cf347dfa60268788772ba5a62",class:"dso-date__toggle-icon"},e("dso-icon",{key:"a1dd69e476e6ed633d8329be90d2fb4fea2f8926",icon:"calendar"})),e("span",{key:"cb3e00a758bd93b709e93e2b5eeff6616c59114d",class:"dso-date__vhidden"},this.localization.buttonLabel,d&&e("span",{key:"26753798debaabcd060afdfe9c8572761ea9d02e"},", ",this.localization.selectedDateMessage," ",d)))),e("div",{key:"18aba1ca1ec0a28a17e7ef67a26561082d2ee7c5",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},e("div",{key:"a2cb4eac5ebe13f6ac32b3226b74300b5100afad",class:"dso-date__dialog-content",onKeyDown:this.handleEscKey},e("div",{key:"767c3234e62982a414c221a8c2c1f5fee04d5ce5",class:"dso-date__vhidden dso-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),e("div",{key:"72a45a35e721bec9b4117f09df5e1047bf6ec717",class:"dso-date__mobile",onFocusin:this.disableActiveFocus},e("label",{key:"fe9ef5e66bb819c2f4610dbd7eb8f6332f1aa446",class:"dso-date__mobile-heading"},this.localization.calendarHeading),e("button",{key:"22bb3ab6cd85c71fd5ca22311fde0f061260ad3d",class:"dso-date__close",ref:e=>this.firstFocusableElement=e,onKeyDown:this.handleFirstFocusableKeydown,onClick:()=>this.hide(),type:"button"},e("dso-icon",{key:"7cd44065f4eceb4be7955ed991b2affe79b8f20d",icon:"times"}),e("span",{key:"70304b3e5cf5391e3a3b549bc7c66ff1589849a9",class:"dso-date__vhidden"},this.localization.closeLabel))),e("div",{key:"f50e6ae68c829ef6c67b61e08f261ca13ffbb384",class:"dso-date__header",onFocusin:this.disableActiveFocus},e("div",{key:"dbf18c6f73053877a3788cc580ff13c8e2dcb000"},e("h2",{key:"18540ccb64bfd82e8d9a9c58e8c0f39809d52ba4",id:this.dialogLabelId,class:"dso-date__vhidden","aria-live":"polite"},this.localization.monthNames[n]," ",this.focusedDay.getFullYear()),e("label",{key:"cc79dd0065f3e4010e5344b40c57bd3f7390d9e5",htmlFor:this.monthSelectId,class:"dso-date__vhidden"},this.localization.monthSelectLabel),e("div",{key:"97578788ea819c9e6fb23e10e39fa638dd6bf51d",class:"dso-date__select"},e("select",{key:"dbbfaf38efae5a17742ecd8a859a1d835da1d193",id:this.monthSelectId,class:"dso-date__select--month",ref:e=>this.monthSelectNode=e,onChange:this.handleMonthSelect},N(this.localization,o,p,f).map((t=>{const s=this.localization.monthNames.indexOf(t);return e("option",{key:t,value:s,selected:s===n},t)}))),e("div",{key:"3199841b30d6e8735446f3d67c48300898cb2512",class:"dso-date__select-label","aria-hidden":"true"},e("span",{key:"aca70d70bfaad605d9b399b58757b795cc6486ad"},this.localization.monthNamesShort[n]),e("dso-icon",{key:"d1e2bdb898278c6f6ba6fc3fce3c54bacc4300e6",icon:"chevron-down"}))),e("label",{key:"e85a464a083d160ebe2da35435d4d6b8e70594e6",htmlFor:this.yearSelectId,class:"dso-date__vhidden"},this.localization.yearSelectLabel),e("div",{key:"c9bb89e82bdce8242c5b88a8c0422bb713f4649f",class:"dso-date__select"},e("select",{key:"8db7da290dddc3c31519e8b62d8593f3c3ae25c9",id:this.yearSelectId,class:"dso-date__select--year",onChange:this.handleYearSelect},S(u,y).map((t=>e("option",{key:t,selected:t===l},t)))),e("div",{key:"1d6a4dd37a71e6a25167552e54033f8caba5c926",class:"dso-date__select-label","aria-hidden":"true"},e("span",{key:"53c46f3503fbe521b3363130cef2c0e77c5a76d1"},this.focusedDay.getFullYear()),e("dso-icon",{key:"646d1d9262090f0d31244f87d9d1e7a992712445",icon:"chevron-down"})))),e("div",{key:"177c07ee02756bf8d2d562d891b85f525fdf0459",class:"dso-date__nav"},e("button",{key:"1496337177df07d457f0ee15e70c6cfcc95d54f0",class:"dso-date__prev",onClick:this.handlePreviousMonthClick,disabled:h,type:"button"},e("dso-icon",{key:"af2ffd8b999268c0bf001822e5951060054332b0",icon:"chevron-left"}),e("span",{key:"e3592b7a770f78223cd02a466375fb86b7c34670",class:"dso-date__vhidden"},this.localization.prevMonthLabel)),e("button",{key:"695b50d73c7ed486cef08b010d77166baaf51545",class:"dso-date__next",onClick:this.handleNextMonthClick,disabled:b,type:"button"},e("dso-icon",{key:"007286ed973be218e37c6161bf2ad686726a632e",icon:"chevron-right"}),e("span",{key:"c67ebbd7023e2ff3fbae2e06e1f534c8c5507c83",class:"dso-date__vhidden"},this.localization.nextMonthLabel)))),e(D,{key:"9a7f19704f9774f0e915f9180ccfdbdbfe69ff56",selectedDate:a,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:p,max:f})))))}get element(){return a(this)}};C.style=Y;export{C as dso_date_picker_legacy};
+//# sourceMappingURL=p-93e278c0.entry.js.map

package/dist/dso-toolkit/p-93e278c0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DaysOfWeek","createDate","year","month","day","dayInt","parseInt","monthInt","yearInt","isValid","Number","isInteger","Date","parseDutchDate","value","matches","split","length","printDutchDate","date","d","getDate","toString","padStart","m","getMonth","y","getFullYear","isEqual","a","b","addDays","days","setDate","startOfWeek","firstDayOfWeek","Monday","getDay","diff","endOfWeek","startOfMonth","endOfMonth","setMonth","setYear","setFullYear","inRange","min","max","clamp","time","getTime","getDaysInRange","start","end","current","push","getViewOfMonth","DatePickerLegacyDay","focusedDay","today","onDaySelect","onKeyboardNavigation","focusedDayRef","isToday","isFocused","notCurrentMonth","isOutsideRange","handleClick","e","h","class","tabIndex","onClick","onKeyDown","disabled","type","ref","el","chunk","array","chunkSize","result","i","slice","mapWithOffset","startingOffset","mapFn","map","_","adjustedIndex","item","Error","DatePickerLegacyMonth","selectedDate","focusedDate","labelledById","localization","onDateSelect","onMouseDown","onFocusIn","role","onFocusin","dayNames","dayName","scope","substr","week","undefined","buttonLabel","placeholder","selectedDateMessage","prevMonthLabel","nextMonthLabel","monthSelectLabel","yearSelectLabel","closeLabel","keyboardInstruction","calendarHeading","monthNames","monthNamesShort","monthRange","selectedYear","minDate","maxDate","minYear","minMonth","maxYear","maxMonth","filter","_month","index","range","from","to","datePickerLegacyCss","DsoDatePickerLegacyStyle0","keyCode","TAB","ESC","SPACE","PAGE_UP","PAGE_DOWN","END","HOME","LEFT","UP","RIGHT","DOWN","DISALLOWED_CHARACTERS","TRANSITION_MS","cleanValue","input","regex","cursor","selectionStart","beforeCursor","afterCursor","filteredBeforeCursor","replace","filterAfterCursor","newValue","newCursor","selectionEnd","DsoDatePickerLegacy","this","monthSelectId","createIdentifier","yearSelectId","dialogLabelId","defaultLocalization","enableActiveFocus","activeFocus","disableActiveFocus","toggleOpen","preventDefault","open","hide","show","handleEscKey","event","handleBlur","stopPropagation","dsoBlur","emit","component","handleKeyUp","dsoKeyUp","originalEvent","handleKeyDown","dsoKeyDown","handleFocus","dsoFocus","handleTouchStart","touch","changedTouches","initialTouchX","pageX","initialTouchY","pageY","handleTouchMove","handleTouchEnd","distX","_a","distY","_b","threshold","isHorizontalSwipe","Math","abs","isDownwardsSwipe","addMonths","handleNextMonthClick","handlePreviousMonthClick","handleFirstFocusableKeydown","shiftKey","focusedDayNode","focus","handleKeyboardNavigation","firstFocusableElement","handled","addYears","handleDaySelect","_event","setValue","setFocusedDay","handleMonthSelect","target","HTMLSelectElement","handleYearSelect","handleInputChange","cleanedValue","prepareEvent","valueAsDate","required","error","clampValue","processFocusedDayNode","element","setTimeout","handleDocumentClick","path","composedPath","Node","contains","setFocus","datePickerLegacyInput","hideTimeoutId","clearTimeout","visible","focusTimeoutId","monthSelectNode","moveFocusToButton","datePickerLegacyButton","months","years","previousValue","dsoDateChange","componentWillLoad","componentDidLoad","dsoAutofocus","render","formattedDate","focusedMonth","focusedYear","prevMonthDisabled","nextMonthDisabled","Host","key","id","identifier","invalid","describedBy","onInput","onFocus","onBlur","onKeyUp","autoComplete","icon","direction","onTouchMove","onTouchStart","onTouchEnd","htmlFor","onChange","indexOf","selected"],"sources":["src/components/date-picker-legacy/date-utils.ts","src/components/date-picker-legacy/date-picker-day.tsx","src/components/date-picker-legacy/date-picker-month.tsx","src/components/date-picker-legacy/date-localization.ts","src/components/date-picker-legacy/utils/month-range.ts","src/components/date-picker-legacy/utils/range.ts","src/components/date-picker-legacy/date-picker-legacy.scss?tag=dso-date-picker-legacy&encapsulation=scoped","src/components/date-picker-legacy/date-picker-legacy.tsx"],"sourcesContent":["// eslint-disable-next-line @stencil-community/ban-exported-const-enums -- This enum is not part of public API\r\nexport enum DaysOfWeek {\r\n  Sunday = 0,\r\n  Monday = 1,\r\n  Tuesday = 2,\r\n  Wednesday = 3,\r\n  Thursday = 4,\r\n  Friday = 5,\r\n  Saturday = 6,\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 Dutch format D-M-YYYY\r\n */\r\nexport function parseDutchDate(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[2].length === 4\r\n  ) {\r\n    return createDate(matches[2], matches[1], matches[0]);\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 * Compare if two dates are equal in terms of day, month, and year\r\n */\r\nexport function isEqual(a: Date | undefined, b: Date | undefined): boolean {\r\n  if (!a || !b) {\r\n    return false;\r\n  }\r\n\r\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();\r\n}\r\n\r\nexport function addDays(date: Date, days: number): Date {\r\n  const d = new Date(date);\r\n  d.setDate(d.getDate() + days);\r\n  return d;\r\n}\r\n\r\nexport function addMonths(date: Date, months: number): Date {\r\n  const d = new Date(date);\r\n  d.setMonth(date.getMonth() + months);\r\n  return d;\r\n}\r\n\r\nexport function addYears(date: Date, years: number): Date {\r\n  const d = new Date(date);\r\n  d.setFullYear(date.getFullYear() + years);\r\n  return d;\r\n}\r\n\r\nexport function startOfWeek(date: Date, firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday): Date {\r\n  const d = new Date(date);\r\n  const day = d.getDay();\r\n  const diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;\r\n\r\n  d.setDate(d.getDate() - diff);\r\n  return d;\r\n}\r\n\r\nexport function endOfWeek(date: Date, firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday): Date {\r\n  const d = new Date(date);\r\n  const day = d.getDay();\r\n  const diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek);\r\n\r\n  d.setDate(d.getDate() + diff);\r\n  return d;\r\n}\r\n\r\nexport function startOfMonth(date: Date): Date {\r\n  return new Date(date.getFullYear(), date.getMonth(), 1);\r\n}\r\n\r\nexport function endOfMonth(date: Date): Date {\r\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\r\n}\r\n\r\nexport function setMonth(date: Date, month: number): Date {\r\n  const d = new Date(date);\r\n  d.setMonth(month);\r\n  return d;\r\n}\r\n\r\nexport function setYear(date: Date, year: number): Date {\r\n  const d = new Date(date);\r\n  d.setFullYear(year);\r\n  return d;\r\n}\r\n\r\n/**\r\n * Check if date is within a min and max\r\n */\r\nexport function inRange(date: Date, min?: Date, max?: Date): boolean {\r\n  return clamp(date, min, max) === date;\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\r\n/**\r\n * given start and end date, return an (inclusive) array of all dates in between\r\n * @param start\r\n * @param end\r\n */\r\nfunction getDaysInRange(start: Date, end: Date): Date[] {\r\n  const days: Date[] = [];\r\n  let current = start;\r\n\r\n  while (!isEqual(current, end)) {\r\n    days.push(current);\r\n    current = addDays(current, 1);\r\n  }\r\n\r\n  days.push(current);\r\n\r\n  return days;\r\n}\r\n\r\n/**\r\n * given a date, return an array of dates from a calendar perspective\r\n * @param date\r\n * @param firstDayOfWeek\r\n */\r\nexport function getViewOfMonth(date: Date, firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday): Date[] {\r\n  const start = startOfWeek(startOfMonth(date), firstDayOfWeek);\r\n  const end = endOfWeek(endOfMonth(date), firstDayOfWeek);\r\n\r\n  return getDaysInRange(start, end);\r\n}\r\n","import { h, FunctionalComponent } from \"@stencil/core\";\r\nimport { isEqual, printDutchDate } from \"./date-utils\";\r\n\r\nexport type DatePickerLegacyDayProps = {\r\n  focusedDay: Date;\r\n  today: Date;\r\n  day: Date;\r\n  inRange: boolean;\r\n  onDaySelect: (event: MouseEvent, day: Date) => void;\r\n  onKeyboardNavigation: (event: KeyboardEvent) => void;\r\n  focusedDayRef?: (element: HTMLButtonElement) => void;\r\n};\r\n\r\nexport const DatePickerLegacyDay: FunctionalComponent<DatePickerLegacyDayProps> = ({\r\n  focusedDay,\r\n  today,\r\n  day,\r\n  onDaySelect,\r\n  onKeyboardNavigation,\r\n  focusedDayRef,\r\n  inRange,\r\n}) => {\r\n  const isToday = isEqual(day, today);\r\n  const isFocused = isEqual(day, focusedDay);\r\n  const notCurrentMonth = day.getMonth() !== focusedDay.getMonth();\r\n  const isOutsideRange = !inRange;\r\n\r\n  function handleClick(e: MouseEvent) {\r\n    onDaySelect(e, day);\r\n  }\r\n\r\n  return (\r\n    <button\r\n      class={{\r\n        \"dso-date__day\": true,\r\n        \"is-today\": isToday,\r\n      }}\r\n      tabIndex={isFocused ? 0 : -1}\r\n      onClick={handleClick}\r\n      onKeyDown={onKeyboardNavigation}\r\n      disabled={isOutsideRange || notCurrentMonth}\r\n      type=\"button\"\r\n      ref={(el) => {\r\n        if (isFocused && el && focusedDayRef) {\r\n          focusedDayRef(el);\r\n        }\r\n      }}\r\n    >\r\n      <span aria-hidden=\"true\">{day.getDate()}</span>\r\n      <span class=\"dso-date__vhidden\">{printDutchDate(day)}</span>\r\n    </button>\r\n  );\r\n};\r\n","import { h, FunctionalComponent } from \"@stencil/core\";\r\nimport { DsoLocalizedText } from \"./date-localization\";\r\nimport { DatePickerLegacyDay, DatePickerLegacyDayProps } from \"./date-picker-day\";\r\nimport { getViewOfMonth, inRange, DaysOfWeek, isEqual } from \"./date-utils\";\r\n\r\nfunction chunk<T>(array: T[], chunkSize: number): T[][] {\r\n  const result = [];\r\n\r\n  for (let i = 0; i < array.length; i += chunkSize) {\r\n    result.push(array.slice(i, i + chunkSize));\r\n  }\r\n\r\n  return result;\r\n}\r\n\r\nfunction mapWithOffset<T, U>(array: T[], startingOffset: number, mapFn: (item: T) => U): U[] {\r\n  return array.map((_, i) => {\r\n    const adjustedIndex = (i + startingOffset) % array.length;\r\n    const item = array[adjustedIndex];\r\n    if (!item) {\r\n      throw new Error(\"No item found\");\r\n    }\r\n\r\n    return mapFn(item);\r\n  });\r\n}\r\n\r\ntype DatePickerLegacyMonthProps = {\r\n  selectedDate: Date | undefined;\r\n  focusedDate: Date;\r\n  labelledById: string;\r\n  localization: DsoLocalizedText;\r\n  firstDayOfWeek: DaysOfWeek;\r\n  min?: Date;\r\n  max?: Date;\r\n  onDateSelect: DatePickerLegacyDayProps[\"onDaySelect\"];\r\n  onKeyboardNavigation: DatePickerLegacyDayProps[\"onKeyboardNavigation\"];\r\n  focusedDayRef: (element: HTMLButtonElement) => void;\r\n  onFocusIn?: (e: FocusEvent) => void;\r\n  onMouseDown?: (e: MouseEvent) => void;\r\n};\r\n\r\nexport const DatePickerLegacyMonth: FunctionalComponent<DatePickerLegacyMonthProps> = ({\r\n  selectedDate,\r\n  focusedDate,\r\n  labelledById,\r\n  localization,\r\n  firstDayOfWeek,\r\n  min,\r\n  max,\r\n  onDateSelect,\r\n  onKeyboardNavigation,\r\n  focusedDayRef,\r\n  onMouseDown,\r\n  onFocusIn,\r\n}) => {\r\n  const today = new Date();\r\n  const days = getViewOfMonth(focusedDate, firstDayOfWeek);\r\n\r\n  return (\r\n    <table\r\n      class=\"dso-date__table\"\r\n      role=\"grid\"\r\n      aria-labelledby={labelledById}\r\n      onFocusin={onFocusIn}\r\n      onMouseDown={onMouseDown}\r\n    >\r\n      <thead>\r\n        <tr>\r\n          {mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (\r\n            <th class=\"dso-date__table-header\" scope=\"col\">\r\n              <span aria-hidden=\"true\">{dayName.substr(0, 2)}</span>\r\n              <span class=\"dso-date__vhidden\">{dayName}</span>\r\n            </th>\r\n          ))}\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        {chunk(days, 7).map((week) => (\r\n          <tr class=\"dso-date__row\">\r\n            {week.map((day) => (\r\n              <td\r\n                class=\"dso-date__cell\"\r\n                role=\"gridcell\"\r\n                aria-selected={isEqual(day, selectedDate) ? \"true\" : undefined}\r\n                aria-current={isEqual(day, today) ? \"date\" : undefined}\r\n              >\r\n                <DatePickerLegacyDay\r\n                  day={day}\r\n                  today={today}\r\n                  focusedDay={focusedDate}\r\n                  inRange={inRange(day, min, max)}\r\n                  onDaySelect={onDateSelect}\r\n                  onKeyboardNavigation={onKeyboardNavigation}\r\n                  focusedDayRef={focusedDayRef}\r\n                />\r\n              </td>\r\n            ))}\r\n          </tr>\r\n        ))}\r\n      </tbody>\r\n    </table>\r\n  );\r\n};\r\n","type MonthsNames = [string, string, string, string, string, string, string, string, string, string, string, string];\r\ntype DayNames = [string, string, string, string, string, string, string];\r\n\r\nexport type DsoLocalizedText = {\r\n  buttonLabel: string;\r\n  placeholder: string;\r\n  selectedDateMessage: string;\r\n  prevMonthLabel: string;\r\n  nextMonthLabel: string;\r\n  monthSelectLabel: string;\r\n  yearSelectLabel: string;\r\n  closeLabel: string;\r\n  keyboardInstruction: string;\r\n  calendarHeading: string;\r\n  dayNames: DayNames;\r\n  monthNames: MonthsNames;\r\n  monthNamesShort: MonthsNames;\r\n};\r\n\r\nconst localization: DsoLocalizedText = {\r\n  buttonLabel: \"Kies datum\",\r\n  placeholder: \"dd-mm-jjjj\",\r\n  selectedDateMessage: \"Geselecteerde datum is\",\r\n  prevMonthLabel: \"Vorige maand\",\r\n  nextMonthLabel: \"Volgende maand\",\r\n  monthSelectLabel: \"Maand\",\r\n  yearSelectLabel: \"Jaar\",\r\n  closeLabel: \"Sluiten\",\r\n  keyboardInstruction: \"Gebruik de pijltjestoetsen om een dag te kiezen\",\r\n  calendarHeading: \"Kies een datum\",\r\n  dayNames: [\"Zondag\", \"Maandag\", \"Dinsdag\", \"Woensdag\", \"Donderdag\", \"Vrijdag\", \"Zaterdag\"],\r\n  monthNames: [\r\n    \"Januari\",\r\n    \"Februari\",\r\n    \"Maart\",\r\n    \"April\",\r\n    \"Mei\",\r\n    \"Juni\",\r\n    \"Juli\",\r\n    \"Augustus\",\r\n    \"September\",\r\n    \"Oktober\",\r\n    \"November\",\r\n    \"December\",\r\n  ],\r\n  monthNamesShort: [\"Jan\", \"Feb\", \"Mrt\", \"Apr\", \"Mei\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Okt\", \"Nov\", \"Dec\"],\r\n};\r\n\r\nexport default localization;\r\n","import { DsoLocalizedText } from \"../date-localization\";\r\n\r\nexport function monthRange(\r\n  localization: DsoLocalizedText,\r\n  selectedYear: number,\r\n  minDate?: Date,\r\n  maxDate?: Date,\r\n): string[] {\r\n  if (minDate && maxDate) {\r\n    const { minYear, minMonth } = { minYear: minDate.getFullYear(), minMonth: minDate.getMonth() };\r\n    const { maxYear, maxMonth } = { maxYear: maxDate.getFullYear(), maxMonth: maxDate.getMonth() };\r\n\r\n    return localization.monthNames.filter((_month, index) => {\r\n      if (minYear === selectedYear && maxYear === selectedYear) {\r\n        return index >= minMonth && index >= maxMonth;\r\n      }\r\n\r\n      if (minYear === selectedYear) {\r\n        return index >= minMonth;\r\n      }\r\n\r\n      if (maxYear === selectedYear) {\r\n        return index <= maxMonth;\r\n      }\r\n\r\n      return true;\r\n    });\r\n  }\r\n\r\n  if (minDate) {\r\n    const { minYear, minMonth } = { minYear: minDate.getFullYear(), minMonth: minDate.getMonth() };\r\n\r\n    return localization.monthNames.filter((_month, index) => minYear === selectedYear && index >= minMonth);\r\n  }\r\n\r\n  if (maxDate) {\r\n    const { maxYear, maxMonth } = { maxYear: maxDate.getFullYear(), maxMonth: maxDate.getMonth() };\r\n\r\n    return localization.monthNames.filter((_month, index) => maxYear === selectedYear && index <= maxMonth);\r\n  }\r\n\r\n  return localization.monthNames;\r\n}\r\n","export function range(from: number, to: number) {\r\n  const result: number[] = [];\r\n  for (let i = from; i <= to; i++) {\r\n    result.push(i);\r\n  }\r\n  return result;\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-legacy.variables\" as core-date-picker-legacy-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 *,\r\n.dso-date *::before,\r\n.dso-date *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.dso-date {\r\n  box-sizing: border-box;\r\n  color: core-date-picker-legacy-variables.$color-text;\r\n  display: block;\r\n  font-family: core-date-picker-legacy-variables.$font;\r\n  margin: 0;\r\n  position: relative;\r\n  text-align: start;\r\n  inline-size: 100%;\r\n\r\n  &:not(.dso-visible) {\r\n    .dso-date__dialog {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-date__input {\r\n  @include form-control.root();\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ TOGGLE\r\n// ---------------------------------------------\r\n\r\n.dso-date__toggle {\r\n  -moz-appearance: none;\r\n  -webkit-appearance: none;\r\n  -webkit-user-select: none;\r\n  align-items: center;\r\n  appearance: none;\r\n  background: core-date-picker-legacy-variables.$color-button-bg;\r\n  border: 0;\r\n  border-radius: 0;\r\n  border-end-end-radius: core-date-picker-legacy-variables.$radius;\r\n  border-start-end-radius: core-date-picker-legacy-variables.$radius;\r\n  color: core-date-picker-legacy-variables.$color-icon;\r\n  cursor: pointer;\r\n  display: flex;\r\n  block-size: core-date-picker-legacy-variables.$size;\r\n  justify-content: center;\r\n  padding: 0;\r\n  position: absolute;\r\n  inset-inline-end: 0;\r\n  transform: translateY(-50%);\r\n  inset-block-start: 50%;\r\n  user-select: none;\r\n  inline-size: core-date-picker-legacy-variables.$size;\r\n  z-index: zindex.$datepicker + 1;\r\n\r\n  &:disabled {\r\n    color: core-date-picker-legacy-variables.$nav-button-disabled;\r\n    cursor: default;\r\n  }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ DIALOG\r\n// ---------------------------------------------\r\n\r\n.dso-date__dialog {\r\n  border-width: core-date-picker-legacy-variables.$border-width;\r\n  display: flex;\r\n  inset-inline-end: 0;\r\n  min-inline-size: 320px;\r\n  opacity: 0;\r\n  position: absolute;\r\n  inset-block-start: 100%;\r\n  transform: scale(0.96) translateZ(0) translateY(-20px);\r\n  transform-origin: top right;\r\n  transition:\r\n    transform 300ms ease,\r\n    opacity 300ms ease,\r\n    visibility 300ms ease;\r\n  visibility: hidden;\r\n  will-change: transform, opacity, visibility;\r\n  z-index: zindex.$datepicker-dialog;\r\n\r\n  @media (max-width: 35.9375em) {\r\n    background: core-date-picker-legacy-variables.$overlay;\r\n    inset-block-end: 0;\r\n    position: fixed;\r\n    inset-inline-start: 0;\r\n    inset-inline-end: 0;\r\n    inset-block-start: 0;\r\n    transform: translateZ(0);\r\n    transform-origin: bottom center;\r\n  }\r\n\r\n  &.is-left {\r\n    inset-inline-start: units.$padding-base-inline * -1 + core-date-picker-legacy-variables.$border-width;\r\n    inset-inline-end: auto;\r\n    inline-size: auto;\r\n  }\r\n\r\n  &.is-active {\r\n    opacity: 1;\r\n    // The value of 1.0001 fixes a Chrome glitch with scaling\r\n    transform: scale(1.0001) translateZ(0) translateY(0);\r\n    visibility: visible;\r\n  }\r\n}\r\n\r\n.dso-date__dialog-content {\r\n  background: core-date-picker-legacy-variables.$surface;\r\n  border: 1px solid rgba(0, 0, 0, 0.1);\r\n  border-radius: core-date-picker-legacy-variables.$radius;\r\n  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n  margin-inline-start: auto;\r\n  margin-inline-end: -1px;\r\n  margin-block-start: 8px;\r\n  max-inline-size: 310px;\r\n  min-inline-size: 290px;\r\n  padding: 16px;\r\n  position: relative;\r\n  transform: none;\r\n  inline-size: 100%;\r\n  z-index: zindex.$datepicker-dialog;\r\n\r\n  @media (max-width: 35.9375em) {\r\n    border: 0;\r\n    border-radius: 0;\r\n    border-start-start-radius: core-date-picker-legacy-variables.$radius;\r\n    border-start-end-radius: core-date-picker-legacy-variables.$radius;\r\n    inset-block-end: 0;\r\n    inset-inline-start: 0;\r\n    margin: 0;\r\n    max-inline-size: none;\r\n    min-block-size: 26em;\r\n    opacity: 0;\r\n    padding-block: 0 20px;\r\n    padding-inline: 8%;\r\n    position: absolute;\r\n    transform: translateZ(0) translateY(100%);\r\n    transition:\r\n      transform core-date-picker-legacy-variables.$transition-duration ease,\r\n      opacity core-date-picker-legacy-variables.$transition-duration ease,\r\n      visibility core-date-picker-legacy-variables.$transition-duration ease;\r\n    visibility: hidden;\r\n    will-change: transform, opacity, visibility;\r\n\r\n    .is-active & {\r\n      opacity: 1;\r\n      transform: translateZ(0) translateY(0);\r\n      visibility: visible;\r\n    }\r\n  }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ TABLE\r\n// ---------------------------------------------\r\n\r\n.dso-date__table {\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n  color: core-date-picker-legacy-variables.$color-text;\r\n  font-size: 1rem;\r\n  font-weight: core-date-picker-legacy-variables.$font-normal;\r\n  line-height: 1.25;\r\n  min-inline-size: (core-date-picker-legacy-variables.$size + 2) * 7;\r\n  table-layout: fixed;\r\n  text-align: center;\r\n  inline-size: 100%;\r\n}\r\n\r\n.dso-date__table-header {\r\n  font-size: 0.875em;\r\n  font-weight: core-date-picker-legacy-variables.$font-bold;\r\n  block-size: 36px;\r\n  line-height: 36px;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.dso-date__cell {\r\n  block-size: core-date-picker-legacy-variables.$size + 2;\r\n  padding: 1px;\r\n  text-align: center;\r\n  inline-size: core-date-picker-legacy-variables.$size + 2;\r\n}\r\n\r\n.dso-date__day {\r\n  -moz-appearance: none;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  background: transparent;\r\n  border: 0;\r\n  border-radius: 50%;\r\n  box-shadow: 0 0 0 1px transparent;\r\n  color: core-date-picker-legacy-variables.$color-text;\r\n  cursor: pointer;\r\n  display: inline-block;\r\n  font-family: core-date-picker-legacy-variables.$font;\r\n  font-variant-numeric: tabular-nums;\r\n  font-weight: core-date-picker-legacy-variables.$font-normal;\r\n  block-size: core-date-picker-legacy-variables.$size;\r\n  line-height: 0;\r\n  padding: 0;\r\n  position: relative;\r\n  text-align: center;\r\n  vertical-align: middle;\r\n  inline-size: core-date-picker-legacy-variables.$size;\r\n  z-index: zindex.$datepicker;\r\n\r\n  &.is-today {\r\n    background: transparent;\r\n    block-size: core-date-picker-legacy-variables.$size - 2;\r\n    box-shadow: 0 0 0 1px core-date-picker-legacy-variables.$color-button;\r\n    inline-size: core-date-picker-legacy-variables.$size - 2;\r\n  }\r\n\r\n  &:hover,\r\n  &:active {\r\n    background: core-date-picker-legacy-variables.$color-button;\r\n    color: core-date-picker-legacy-variables.$color-text-active;\r\n  }\r\n\r\n  &:focus {\r\n    background: transparent;\r\n    box-shadow: 0 0 0 2px colors.$bosgroen;\r\n    color: core-date-picker-legacy-variables.$color-text;\r\n    block-size: core-date-picker-legacy-variables.$size - 4;\r\n    outline: 0;\r\n    inline-size: core-date-picker-legacy-variables.$size - 4;\r\n  }\r\n\r\n  [aria-selected=\"true\"] & {\r\n    background: core-date-picker-legacy-variables.$color-button;\r\n    color: core-date-picker-legacy-variables.$color-text-active;\r\n\r\n    &:focus {\r\n      background: transparent;\r\n\r\n      span[aria-hidden=\"true\"] {\r\n        background: core-date-picker-legacy-variables.$color-button;\r\n        border: 1px solid colors.$wit;\r\n        line-height: core-date-picker-legacy-variables.$size - 6;\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    background: colors.$wit;\r\n    color: core-date-picker-legacy-variables.$color-text-disabled;\r\n    cursor: default;\r\n  }\r\n\r\n  span[aria-hidden=\"true\"] {\r\n    border-radius: 50%;\r\n    display: inline-block;\r\n    block-size: core-date-picker-legacy-variables.$size - 4;\r\n    line-height: core-date-picker-legacy-variables.$size - 4;\r\n    inline-size: core-date-picker-legacy-variables.$size - 4;\r\n  }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ HEADER\r\n// ---------------------------------------------\r\n\r\n.dso-date__header {\r\n  align-items: center;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  margin-block-end: 16px;\r\n  inline-size: 100%;\r\n\r\n  span {\r\n    font-size: 0.875rem;\r\n  }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ NAVIGATION\r\n// ---------------------------------------------\r\n\r\n.dso-date__nav {\r\n  white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n}\r\n\r\n.dso-date__prev,\r\n.dso-date__next {\r\n  -moz-appearance: none;\r\n  -webkit-appearance: none;\r\n  align-items: center;\r\n  appearance: none;\r\n  background: core-date-picker-legacy-variables.$color-button-bg;\r\n  border: 1px solid core-date-picker-legacy-variables.$color-button;\r\n  border-radius: core-date-picker-legacy-variables.$radius;\r\n  box-sizing: border-box;\r\n  color: core-date-picker-legacy-variables.$color-button;\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  font-size: 1em;\r\n  block-size: 32px;\r\n  justify-content: center;\r\n  margin-inline-start: 8px;\r\n  padding: 0;\r\n  inline-size: 32px;\r\n\r\n  @media (max-width: 35.9375em) {\r\n    block-size: 40px;\r\n    inline-size: 40px;\r\n  }\r\n\r\n  &:hover,\r\n  &:active {\r\n    background-color: core-date-picker-legacy-variables.$color-button;\r\n    color: core-date-picker-legacy-variables.$color-text-active;\r\n  }\r\n\r\n  &:focus {\r\n    background: core-date-picker-legacy-variables.$color-button-bg;\r\n    color: core-date-picker-legacy-variables.$color-button;\r\n  }\r\n\r\n  &:disabled {\r\n    &,\r\n    &:hover {\r\n      background-color: colors.$wit;\r\n      border-color: core-date-picker-legacy-variables.$nav-button-disabled;\r\n      color: core-date-picker-legacy-variables.$nav-button-disabled;\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n  svg {\r\n    margin-block: 0; // left this in, just to be sure ;)\r\n    margin-inline: auto;\r\n  }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ SELECT\r\n// ---------------------------------------------\r\n\r\n.dso-date__select {\r\n  display: inline-flex;\r\n  block-size: units.$u1 * 4 - 4;\r\n  line-height: units.$u1 * 4 - 4;\r\n  position: relative;\r\n\r\n  span {\r\n    margin-inline-end: 4px;\r\n  }\r\n\r\n  select {\r\n    color: core-date-picker-legacy-variables.$color-primary;\r\n    cursor: pointer;\r\n    font-size: 1rem;\r\n    block-size: 100%;\r\n    inset-inline-start: 0;\r\n    opacity: 0;\r\n    position: absolute;\r\n    inset-block-start: 0;\r\n    inline-size: 100%;\r\n    z-index: zindex.$datepicker + 1;\r\n\r\n    &:focus + .dso-date__select-label {\r\n      box-shadow: 0 0 0 2px core-date-picker-legacy-variables.$color-primary;\r\n    }\r\n\r\n    &:disabled {\r\n      color: core-date-picker-legacy-variables.$nav-button-disabled;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-date__select-label {\r\n  align-items: center;\r\n  border-radius: core-date-picker-legacy-variables.$radius;\r\n  color: core-date-picker-legacy-variables.$select;\r\n  display: flex;\r\n  padding-block: 0;\r\n  padding-inline: 8px 4px;\r\n  pointer-events: none;\r\n  position: relative;\r\n  inline-size: 100%;\r\n  z-index: zindex.$datepicker;\r\n\r\n  span {\r\n    font-size: 1.25rem;\r\n    font-weight: core-date-picker-legacy-variables.$font-bold;\r\n    line-height: 1.25;\r\n  }\r\n\r\n  svg {\r\n    inline-size: 16px;\r\n    block-size: 16px;\r\n  }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ MOBILE\r\n// ---------------------------------------------\r\n\r\n.dso-date__mobile {\r\n  align-items: center;\r\n  border-block-end: 1px solid rgba(0, 0, 0, 0.12);\r\n  display: flex;\r\n  font-size: 1em;\r\n  justify-content: space-between;\r\n  margin-block-end: 20px;\r\n  margin-inline-start: -10%;\r\n  overflow: hidden;\r\n  padding-block: 12px;\r\n  padding-inline: 20px;\r\n  position: relative;\r\n  text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n  white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n  inline-size: 120%;\r\n\r\n  @media (min-width: 36em) {\r\n    border: 0;\r\n    margin: 0;\r\n    overflow: visible;\r\n    padding: 0;\r\n    position: absolute;\r\n    inset-inline-end: -16px;\r\n    inset-block-start: -16px;\r\n    inline-size: auto;\r\n  }\r\n}\r\n\r\n.dso-date__mobile-heading {\r\n  display: inline-block;\r\n  font-weight: core-date-picker-legacy-variables.$font-bold;\r\n  max-inline-size: 84%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n  white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- 3rd party code\r\n\r\n  @media (min-width: 36em) {\r\n    display: none;\r\n  }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ CLOSE\r\n// ---------------------------------------------\r\n\r\n.dso-date__close {\r\n  -webkit-appearance: none;\r\n  align-items: center;\r\n  appearance: none;\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  border-radius: 50%;\r\n  color: core-date-picker-legacy-variables.$color-icon;\r\n  cursor: pointer;\r\n  display: flex;\r\n  font-size: 1em;\r\n  block-size: units.$u1 * 4;\r\n  justify-content: center;\r\n  margin-inline-end: -4px;\r\n  padding: 0;\r\n  inline-size: units.$u1 * 4;\r\n\r\n  @media (min-width: 36em) {\r\n    margin-inline-end: 0;\r\n    opacity: 0;\r\n  }\r\n\r\n  &:focus {\r\n    box-shadow: 0 0 0 2px colors.$bosgroen;\r\n    outline: none;\r\n\r\n    @media (min-width: 36em) {\r\n      opacity: 1;\r\n    }\r\n  }\r\n}\r\n\r\n// ---------------------------------------------\r\n// dso DATE PICKER __ VISUALLY HIDDEN\r\n// ---------------------------------------------\r\n\r\n.dso-date__vhidden {\r\n  border: 0;\r\n  clip: rect(1px, 1px, 1px, 1px);\r\n  block-size: 1px;\r\n  overflow: hidden;\r\n  padding: 0;\r\n  position: absolute;\r\n  inset-block-start: 0;\r\n  inline-size: 1px;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Host,\r\n  Prop,\r\n  Element,\r\n  h,\r\n  Event,\r\n  EventEmitter,\r\n  State,\r\n  Listen,\r\n  Method,\r\n} from \"@stencil/core\";\r\n\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport {\r\n  addDays,\r\n  startOfWeek,\r\n  endOfWeek,\r\n  setMonth,\r\n  setYear,\r\n  clamp,\r\n  inRange,\r\n  endOfMonth,\r\n  startOfMonth,\r\n  printDutchDate,\r\n  parseDutchDate,\r\n  DaysOfWeek,\r\n} from \"./date-utils\";\r\nimport { DatePickerLegacyMonth } from \"./date-picker-month\";\r\nimport defaultLocalization, { DsoLocalizedText } from \"./date-localization\";\r\nimport {\r\n  DsoDatePickerLegacyDirection,\r\n  DsoDatePickerLegacyChangeEvent,\r\n  DsoDatePickerLegacyFocusEvent,\r\n  DsoDatePickerLegacyKeyboardEvent,\r\n} from \"./date-picker-legacy.interfaces\";\r\nimport { monthRange } from \"./utils/month-range\";\r\nimport { range } from \"./utils/range\";\r\n\r\nconst keyCode = {\r\n  TAB: 9,\r\n  ESC: 27,\r\n  SPACE: 32,\r\n  PAGE_UP: 33,\r\n  PAGE_DOWN: 34,\r\n  END: 35,\r\n  HOME: 36,\r\n  LEFT: 37,\r\n  UP: 38,\r\n  RIGHT: 39,\r\n  DOWN: 40,\r\n};\r\n\r\nconst DISALLOWED_CHARACTERS = /[^0-9-]+/g;\r\nconst TRANSITION_MS = 300;\r\n\r\nfunction cleanValue(input: HTMLInputElement, regex: RegExp): string {\r\n  const value = input.value;\r\n  const cursor = input.selectionStart;\r\n\r\n  if (!cursor) {\r\n    return value;\r\n  }\r\n\r\n  const beforeCursor = value.slice(0, cursor);\r\n  const afterCursor = value.slice(cursor, value.length);\r\n\r\n  const filteredBeforeCursor = beforeCursor.replace(regex, \"\");\r\n  const filterAfterCursor = afterCursor.replace(regex, \"\");\r\n\r\n  const newValue = filteredBeforeCursor + filterAfterCursor;\r\n  const newCursor = filteredBeforeCursor.length;\r\n\r\n  input.value = newValue;\r\n  input.selectionStart = input.selectionEnd = newCursor;\r\n\r\n  return newValue;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-date-picker-legacy\",\r\n  styleUrl: \"date-picker-legacy.scss\",\r\n  shadow: false,\r\n  scoped: true,\r\n})\r\nexport class DsoDatePickerLegacy implements ComponentInterface {\r\n  /**\r\n   * Own Properties\r\n   */\r\n  private monthSelectId = createIdentifier(\"DsoDateMonth\");\r\n  private yearSelectId = createIdentifier(\"DsoDateYear\");\r\n  private dialogLabelId = createIdentifier(\"DsoDateLabel\");\r\n\r\n  private datePickerLegacyButton: HTMLButtonElement | undefined;\r\n  private datePickerLegacyInput: HTMLInputElement | undefined;\r\n  private firstFocusableElement: HTMLElement | undefined;\r\n  private monthSelectNode: HTMLElement | undefined;\r\n  private focusedDayNode: HTMLButtonElement | undefined;\r\n\r\n  private focusTimeoutId: ReturnType<typeof setTimeout> | undefined;\r\n  private hideTimeoutId: ReturnType<typeof setTimeout> | undefined;\r\n\r\n  private initialTouchX: number | undefined;\r\n  private initialTouchY: number | undefined;\r\n\r\n  private localization: DsoLocalizedText = defaultLocalization;\r\n  private firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday;\r\n\r\n  private previousValue: string | undefined;\r\n\r\n  /**\r\n   * Reference to host HTML element.\r\n   */\r\n  @Element()\r\n  element!: HTMLDsoDatePickerLegacyElement;\r\n\r\n  /**\r\n   * State() variables\r\n   */\r\n  @State()\r\n  activeFocus = false;\r\n\r\n  @State()\r\n  focusedDay = new Date();\r\n\r\n  @State()\r\n  open = false;\r\n\r\n  @State()\r\n  visible = false;\r\n\r\n  /**\r\n   * Public Property API\r\n   */\r\n\r\n  /**\r\n   * Name of the date picker input.\r\n   */\r\n  @Prop()\r\n  name = \"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   * Defines a specific role attribute for the date picker input.\r\n   */\r\n  @Prop()\r\n  // eslint-disable-next-line @stencil-community/reserved-member-names\r\n  role: string | null = null;\r\n\r\n  /**\r\n   * Forces the opening direction of the calendar modal to be always left or right.\r\n   * This setting can be useful when the input is smaller than the opening date picker\r\n   * would be as by default the picker always opens towards right.\r\n   */\r\n  @Prop()\r\n  direction: DsoDatePickerLegacyDirection = \"right\";\r\n\r\n  /**\r\n   * Should the input be marked as required?\r\n   */\r\n  @Prop()\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, mutable: 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<DsoDatePickerLegacyChangeEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is blurred.\r\n   */\r\n  @Event()\r\n  dsoBlur!: EventEmitter<DsoDatePickerLegacyFocusEvent>;\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<DsoDatePickerLegacyKeyboardEvent>;\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<DsoDatePickerLegacyKeyboardEvent>;\r\n\r\n  /**\r\n   * Event emitted the date picker input is focused.\r\n   */\r\n  @Event()\r\n  dsoFocus!: EventEmitter<DsoDatePickerLegacyFocusEvent>;\r\n\r\n  /**\r\n   * Component event handling.\r\n   */\r\n  @Listen(\"click\", { target: \"document\", capture: true })\r\n  handleDocumentClick(e: MouseEvent) {\r\n    if (!this.open) {\r\n      return;\r\n    }\r\n\r\n    const path = e.composedPath();\r\n\r\n    for (const target of path) {\r\n      if (target instanceof Node && this.element.contains(target)) {\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.hide(false);\r\n  }\r\n\r\n  /**\r\n   * Sets focus on the date picker's input. Use this method instead of the global `focus()`.\r\n   */\r\n  @Method()\r\n  async setFocus() {\r\n    return this.datePickerLegacyInput?.focus();\r\n  }\r\n\r\n  /**\r\n   * Public methods API\r\n   */\r\n\r\n  /**\r\n   * Show the calendar modal, moving focus to the calendar inside.\r\n   */\r\n  @Method()\r\n  async show() {\r\n    if (typeof this.hideTimeoutId !== \"undefined\") {\r\n      clearTimeout(this.hideTimeoutId);\r\n    }\r\n\r\n    this.visible = true;\r\n\r\n    setTimeout(() => {\r\n      this.open = true;\r\n      this.setFocusedDay(parseDutchDate(this.value) || new Date());\r\n\r\n      if (typeof this.focusTimeoutId !== \"undefined\") {\r\n        clearTimeout(this.focusTimeoutId);\r\n      }\r\n\r\n      this.focusTimeoutId = setTimeout(() => this.monthSelectNode?.focus(), TRANSITION_MS);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus\r\n   * returning to the date picker's button. Default is true.\r\n   */\r\n  @Method()\r\n  async hide(moveFocusToButton = true) {\r\n    this.open = false;\r\n\r\n    // in cases where calendar is quickly shown and hidden\r\n    // we should avoid moving focus to the button\r\n    if (typeof this.focusTimeoutId !== \"undefined\") {\r\n      clearTimeout(this.focusTimeoutId);\r\n    }\r\n\r\n    this.hideTimeoutId = setTimeout(() => {\r\n      if (moveFocusToButton && this.datePickerLegacyButton) {\r\n        this.datePickerLegacyButton.focus();\r\n      }\r\n\r\n      this.visible = false;\r\n    }, TRANSITION_MS + 200);\r\n  }\r\n\r\n  /**\r\n   * Local methods.\r\n   */\r\n  private enableActiveFocus = () => {\r\n    this.activeFocus = true;\r\n  };\r\n\r\n  private disableActiveFocus = () => {\r\n    this.activeFocus = false;\r\n  };\r\n\r\n  private addDays(days: number) {\r\n    this.setFocusedDay(addDays(this.focusedDay, days));\r\n  }\r\n\r\n  private addMonths(months: number) {\r\n    this.setMonth(this.focusedDay.getMonth() + months);\r\n  }\r\n\r\n  private addYears(years: number) {\r\n    this.setYear(this.focusedDay.getFullYear() + years);\r\n  }\r\n\r\n  private startOfWeek() {\r\n    this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek));\r\n  }\r\n\r\n  private endOfWeek() {\r\n    this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek));\r\n  }\r\n\r\n  private setMonth(month: number) {\r\n    const min = setMonth(startOfMonth(this.focusedDay), month);\r\n    const max = endOfMonth(min);\r\n    const date = setMonth(this.focusedDay, month);\r\n\r\n    this.setFocusedDay(clamp(date, min, max));\r\n  }\r\n\r\n  private setYear(year: number) {\r\n    const min = setYear(startOfMonth(this.focusedDay), year);\r\n    const max = endOfMonth(min);\r\n    const date = setYear(this.focusedDay, year);\r\n\r\n    this.setFocusedDay(clamp(date, min, max));\r\n  }\r\n\r\n  private setFocusedDay(day: Date) {\r\n    this.focusedDay = clamp(day, parseDutchDate(this.min), parseDutchDate(this.max));\r\n  }\r\n\r\n  private toggleOpen = (e: Event) => {\r\n    e.preventDefault();\r\n    this.open ? this.hide(false) : this.show();\r\n  };\r\n\r\n  private handleEscKey = (event: KeyboardEvent) => {\r\n    if (event.keyCode === keyCode.ESC) {\r\n      this.hide();\r\n    }\r\n  };\r\n\r\n  private handleBlur = (event: Event) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoBlur.emit({\r\n      component: \"dso-date-picker-legacy\",\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-legacy\",\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-legacy\",\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleFocus = (event: Event) => {\r\n    event.stopPropagation();\r\n\r\n    this.dsoFocus.emit({\r\n      component: \"dso-date-picker-legacy\",\r\n    });\r\n  };\r\n\r\n  private handleTouchStart = (event: TouchEvent) => {\r\n    const touch = event.changedTouches[0];\r\n    if (!touch) {\r\n      throw new Error(\"No touch found\");\r\n    }\r\n\r\n    this.initialTouchX = touch.pageX;\r\n    this.initialTouchY = touch.pageY;\r\n  };\r\n\r\n  private handleTouchMove = (event: TouchEvent) => {\r\n    event.preventDefault();\r\n  };\r\n\r\n  private handleTouchEnd = (event: TouchEvent) => {\r\n    const touch = event.changedTouches[0];\r\n    if (!touch) {\r\n      throw new Error(\"No touch found\");\r\n    }\r\n\r\n    const distX = touch.pageX - (this.initialTouchX ?? 0); // get horizontal dist traveled\r\n    const distY = touch.pageY - (this.initialTouchY ?? 0); // get vertical dist traveled\r\n    const threshold = 70;\r\n\r\n    const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\r\n    const isDownwardsSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold && distY > 0;\r\n\r\n    if (isHorizontalSwipe) {\r\n      this.addMonths(distX < 0 ? 1 : -1);\r\n    } else if (isDownwardsSwipe) {\r\n      this.hide(false);\r\n      event.preventDefault();\r\n    }\r\n\r\n    this.initialTouchY = undefined;\r\n    this.initialTouchX = undefined;\r\n  };\r\n\r\n  private handleNextMonthClick = (event: MouseEvent) => {\r\n    event.preventDefault();\r\n    this.addMonths(1);\r\n  };\r\n\r\n  private handlePreviousMonthClick = (event: MouseEvent) => {\r\n    event.preventDefault();\r\n    this.addMonths(-1);\r\n  };\r\n\r\n  private handleFirstFocusableKeydown = (event: KeyboardEvent) => {\r\n    // this ensures focus is trapped inside the dialog\r\n    if (event.keyCode === keyCode.TAB && event.shiftKey) {\r\n      this.focusedDayNode?.focus();\r\n      event.preventDefault();\r\n    }\r\n  };\r\n\r\n  private handleKeyboardNavigation = (event: KeyboardEvent) => {\r\n    // handle tab separately, since it needs to be treated\r\n    // differently to other keyboard interactions\r\n    if (event.keyCode === keyCode.TAB && !event.shiftKey) {\r\n      event.preventDefault();\r\n      this.firstFocusableElement?.focus();\r\n      return;\r\n    }\r\n\r\n    let handled = true;\r\n\r\n    switch (event.keyCode) {\r\n      case keyCode.RIGHT:\r\n        this.addDays(1);\r\n        break;\r\n      case keyCode.LEFT:\r\n        this.addDays(-1);\r\n        break;\r\n      case keyCode.DOWN:\r\n        this.addDays(7);\r\n        break;\r\n      case keyCode.UP:\r\n        this.addDays(-7);\r\n        break;\r\n      case keyCode.PAGE_UP:\r\n        if (event.shiftKey) {\r\n          this.addYears(-1);\r\n        } else {\r\n          this.addMonths(-1);\r\n        }\r\n        break;\r\n      case keyCode.PAGE_DOWN:\r\n        if (event.shiftKey) {\r\n          this.addYears(1);\r\n        } else {\r\n          this.addMonths(1);\r\n        }\r\n        break;\r\n      case keyCode.HOME:\r\n        this.startOfWeek();\r\n        break;\r\n      case keyCode.END:\r\n        this.endOfWeek();\r\n        break;\r\n      default:\r\n        handled = false;\r\n    }\r\n\r\n    if (handled) {\r\n      event.preventDefault();\r\n      this.enableActiveFocus();\r\n    }\r\n  };\r\n\r\n  private handleDaySelect = (_event: MouseEvent, day: Date) => {\r\n    if (!inRange(day, parseDutchDate(this.min), parseDutchDate(this.max))) {\r\n      return;\r\n    }\r\n\r\n    if (day.getMonth() === this.focusedDay.getMonth()) {\r\n      this.setValue(day);\r\n      this.hide();\r\n    } else {\r\n      this.setFocusedDay(day);\r\n    }\r\n  };\r\n\r\n  private handleMonthSelect = (e: Event) => {\r\n    // Todo\r\n    if (e.target instanceof HTMLSelectElement) {\r\n      this.setMonth(parseInt(e.target.value, 10));\r\n    }\r\n  };\r\n\r\n  private handleYearSelect = (e: Event) => {\r\n    if (e.target instanceof HTMLSelectElement) {\r\n      this.setYear(parseInt(e.target.value, 10));\r\n    }\r\n  };\r\n\r\n  private handleInputChange = (e: Event) => {\r\n    const target = e.target as HTMLInputElement;\r\n\r\n    const cleanedValue = cleanValue(target, DISALLOWED_CHARACTERS);\r\n\r\n    this.setValue(cleanedValue);\r\n  };\r\n\r\n  private setValue(value: Date | string) {\r\n    const event = this.prepareEvent(value);\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  private prepareEvent = (value: Date | string): DsoDatePickerLegacyChangeEvent => {\r\n    const event: DsoDatePickerLegacyChangeEvent = {\r\n      component: \"dso-date-picker-legacy\",\r\n      value: \"\",\r\n      valueAsDate: undefined,\r\n    };\r\n\r\n    if (value instanceof Date) {\r\n      event.valueAsDate = value;\r\n    } else {\r\n      event.value = value;\r\n      event.valueAsDate = parseDutchDate(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 = parseDutchDate(this.min);\r\n      const max = parseDutchDate(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    return event;\r\n  };\r\n\r\n  private processFocusedDayNode = (element: HTMLButtonElement) => {\r\n    this.focusedDayNode = element;\r\n\r\n    if (this.activeFocus && this.open) {\r\n      setTimeout(() => element.focus(), 0);\r\n    }\r\n  };\r\n\r\n  componentWillLoad(): void | Promise<void> {\r\n    const minDate = parseDutchDate(this.min);\r\n    const maxDate = parseDutchDate(this.max);\r\n\r\n    if (minDate && minDate > this.focusedDay) {\r\n      this.focusedDay = minDate;\r\n    }\r\n\r\n    if (maxDate && maxDate < this.focusedDay) {\r\n      this.focusedDay = maxDate;\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const valueAsDate = parseDutchDate(this.value);\r\n    if (valueAsDate) {\r\n      this.previousValue = this.value = printDutchDate(valueAsDate);\r\n    }\r\n\r\n    if (this.dsoAutofocus) {\r\n      this.setFocus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * render() function\r\n   * Always the last one in the class.\r\n   */\r\n  render() {\r\n    const valueAsDate = parseDutchDate(this.value);\r\n    const formattedDate = valueAsDate && printDutchDate(valueAsDate);\r\n    const selectedYear = (valueAsDate || this.focusedDay).getFullYear();\r\n    const focusedMonth = this.focusedDay.getMonth();\r\n    const focusedYear = this.focusedDay.getFullYear();\r\n\r\n    const minDate = parseDutchDate(this.min);\r\n    const maxDate = parseDutchDate(this.max);\r\n    const prevMonthDisabled = minDate && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;\r\n    const nextMonthDisabled = maxDate && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear;\r\n\r\n    let minYear = selectedYear - 10;\r\n    let maxYear = selectedYear + 10;\r\n    if (minDate) {\r\n      minYear = Math.max(minYear, minDate.getFullYear());\r\n    }\r\n    if (maxDate) {\r\n      maxYear = Math.min(maxYear, maxDate.getFullYear());\r\n    }\r\n\r\n    return (\r\n      <Host>\r\n        <div class={{ \"dso-date\": true, \"dso-visible\": this.visible }}>\r\n          <div class=\"dso-date__input-wrapper\">\r\n            <input\r\n              class=\"dso-date__input\"\r\n              value={this.value}\r\n              placeholder={this.localization.placeholder}\r\n              id={this.identifier}\r\n              disabled={this.disabled}\r\n              role={this.role ?? undefined}\r\n              required={this.required ? true : undefined}\r\n              aria-autocomplete=\"none\"\r\n              aria-invalid={this.invalid?.toString()}\r\n              aria-describedby={this.describedBy}\r\n              onInput={this.handleInputChange}\r\n              onFocus={this.handleFocus}\r\n              onBlur={this.handleBlur}\r\n              onKeyUp={this.handleKeyUp}\r\n              onKeyDown={this.handleKeyDown}\r\n              autoComplete=\"off\"\r\n              ref={(element) => (this.datePickerLegacyInput = element)}\r\n            />\r\n            <button\r\n              type=\"button\"\r\n              class=\"dso-date__toggle\"\r\n              onClick={this.toggleOpen}\r\n              disabled={this.disabled}\r\n              ref={(element) => (this.datePickerLegacyButton = element)}\r\n            >\r\n              <span class=\"dso-date__toggle-icon\">\r\n                <dso-icon icon=\"calendar\"></dso-icon>\r\n              </span>\r\n              <span class=\"dso-date__vhidden\">\r\n                {this.localization.buttonLabel}\r\n                {formattedDate && (\r\n                  <span>\r\n                    , {this.localization.selectedDateMessage} {formattedDate}\r\n                  </span>\r\n                )}\r\n              </span>\r\n            </button>\r\n          </div>\r\n\r\n          <div\r\n            class={{\r\n              \"dso-date__dialog\": true,\r\n              \"is-left\": this.direction === \"left\",\r\n              \"is-active\": this.open,\r\n            }}\r\n            role=\"dialog\"\r\n            aria-modal=\"true\"\r\n            aria-hidden={this.open ? \"false\" : \"true\"}\r\n            aria-labelledby={this.dialogLabelId}\r\n            onTouchMove={this.handleTouchMove}\r\n            onTouchStart={this.handleTouchStart}\r\n            onTouchEnd={this.handleTouchEnd}\r\n          >\r\n            <div class=\"dso-date__dialog-content\" onKeyDown={this.handleEscKey}>\r\n              <div class=\"dso-date__vhidden dso-date__instructions\" aria-live=\"polite\">\r\n                {this.localization.keyboardInstruction}\r\n              </div>\r\n              <div class=\"dso-date__mobile\" onFocusin={this.disableActiveFocus}>\r\n                <label class=\"dso-date__mobile-heading\">{this.localization.calendarHeading}</label>\r\n                <button\r\n                  class=\"dso-date__close\"\r\n                  ref={(element) => (this.firstFocusableElement = element)}\r\n                  onKeyDown={this.handleFirstFocusableKeydown}\r\n                  onClick={() => this.hide()}\r\n                  type=\"button\"\r\n                >\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"dso-date__vhidden\">{this.localization.closeLabel}</span>\r\n                </button>\r\n              </div>\r\n              <div class=\"dso-date__header\" onFocusin={this.disableActiveFocus}>\r\n                <div>\r\n                  <h2 id={this.dialogLabelId} class=\"dso-date__vhidden\" aria-live=\"polite\">\r\n                    {this.localization.monthNames[focusedMonth]} {this.focusedDay.getFullYear()}\r\n                  </h2>\r\n\r\n                  <label htmlFor={this.monthSelectId} class=\"dso-date__vhidden\">\r\n                    {this.localization.monthSelectLabel}\r\n                  </label>\r\n                  <div class=\"dso-date__select\">\r\n                    <select\r\n                      id={this.monthSelectId}\r\n                      class=\"dso-date__select--month\"\r\n                      ref={(element) => (this.monthSelectNode = element)}\r\n                      onChange={this.handleMonthSelect}\r\n                    >\r\n                      {monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {\r\n                        const index = this.localization.monthNames.indexOf(month);\r\n\r\n                        return (\r\n                          <option key={month} value={index} selected={index === focusedMonth}>\r\n                            {month}\r\n                          </option>\r\n                        );\r\n                      })}\r\n                    </select>\r\n                    <div class=\"dso-date__select-label\" aria-hidden=\"true\">\r\n                      <span>{this.localization.monthNamesShort[focusedMonth]}</span>\r\n                      <dso-icon icon=\"chevron-down\"></dso-icon>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <label htmlFor={this.yearSelectId} class=\"dso-date__vhidden\">\r\n                    {this.localization.yearSelectLabel}\r\n                  </label>\r\n                  <div class=\"dso-date__select\">\r\n                    <select id={this.yearSelectId} class=\"dso-date__select--year\" onChange={this.handleYearSelect}>\r\n                      {range(minYear, maxYear).map((year) => (\r\n                        <option key={year} selected={year === focusedYear}>\r\n                          {year}\r\n                        </option>\r\n                      ))}\r\n                    </select>\r\n                    <div class=\"dso-date__select-label\" aria-hidden=\"true\">\r\n                      <span>{this.focusedDay.getFullYear()}</span>\r\n                      <dso-icon icon=\"chevron-down\"></dso-icon>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"dso-date__nav\">\r\n                  <button\r\n                    class=\"dso-date__prev\"\r\n                    onClick={this.handlePreviousMonthClick}\r\n                    disabled={prevMonthDisabled}\r\n                    type=\"button\"\r\n                  >\r\n                    <dso-icon icon=\"chevron-left\"></dso-icon>\r\n                    <span class=\"dso-date__vhidden\">{this.localization.prevMonthLabel}</span>\r\n                  </button>\r\n                  <button\r\n                    class=\"dso-date__next\"\r\n                    onClick={this.handleNextMonthClick}\r\n                    disabled={nextMonthDisabled}\r\n                    type=\"button\"\r\n                  >\r\n                    <dso-icon icon=\"chevron-right\"></dso-icon>\r\n                    <span class=\"dso-date__vhidden\">{this.localization.nextMonthLabel}</span>\r\n                  </button>\r\n                </div>\r\n              </div>\r\n              <DatePickerLegacyMonth\r\n                selectedDate={valueAsDate}\r\n                focusedDate={this.focusedDay}\r\n                onDateSelect={this.handleDaySelect}\r\n                onKeyboardNavigation={this.handleKeyboardNavigation}\r\n                labelledById={this.dialogLabelId}\r\n                localization={this.localization}\r\n                firstDayOfWeek={this.firstDayOfWeek}\r\n                focusedDayRef={this.processFocusedDayNode}\r\n                min={minDate}\r\n                max={maxDate}\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/p-9438a55c.js

@@ -0,0 +1,2 @@
+var e={exports:{}};function t(e,t=100,n={}){if(typeof e!=="function"){throw new TypeError(`Expected the first parameter to be a function, got \`${typeof e}\`.`)}if(t<0){throw new RangeError("`wait` must not be negative.")}const{immediate:o}=typeof n==="boolean"?{immediate:n}:n;let i;let r;let f;let u;let c;function s(){const t=i;const n=r;i=undefined;r=undefined;c=e.apply(t,n);return c}function d(){const e=Date.now()-u;if(e<t&&e>=0){f=setTimeout(d,t-e)}else{f=undefined;if(!o){c=s()}}}const a=function(...e){if(i&&this!==i){throw new Error("Debounced method called with different contexts.")}i=this;r=e;u=Date.now();const n=o&&!f;if(!f){f=setTimeout(d,t)}if(n){c=s()}return c};a.clear=()=>{if(!f){return}clearTimeout(f);f=undefined};a.flush=()=>{if(!f){return}a.trigger()};a.trigger=()=>{c=s();a.clear()};return a}e.exports.debounce=t;e.exports=t;const n=e.exports;export{n as d};
+//# sourceMappingURL=p-9438a55c.js.map

package/dist/dso-toolkit/p-9438a55c.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["debounce","function_","wait","options","TypeError","RangeError","immediate","storedContext","storedArguments","timeoutId","timestamp","result","run","callContext","callArguments","undefined","apply","later","last","Date","now","setTimeout","debounced","arguments_","this","Error","callNow","clear","clearTimeout","flush","trigger","debounceModule"],"sources":["../../node_modules/debounce/index.js"],"sourcesContent":["function debounce(function_, wait = 100, options = {}) {\n\tif (typeof function_ !== 'function') {\n\t\tthrow new TypeError(`Expected the first parameter to be a function, got \\`${typeof function_}\\`.`);\n\t}\n\n\tif (wait < 0) {\n\t\tthrow new RangeError('`wait` must not be negative.');\n\t}\n\n\t// TODO: Deprecate the boolean parameter at some point.\n\tconst {immediate} = typeof options === 'boolean' ? {immediate: options} : options;\n\n\tlet storedContext;\n\tlet storedArguments;\n\tlet timeoutId;\n\tlet timestamp;\n\tlet result;\n\n\tfunction run() {\n\t\tconst callContext = storedContext;\n\t\tconst callArguments = storedArguments;\n\t\tstoredContext = undefined;\n\t\tstoredArguments = undefined;\n\t\tresult = function_.apply(callContext, callArguments);\n\t\treturn result;\n\t}\n\n\tfunction later() {\n\t\tconst last = Date.now() - timestamp;\n\n\t\tif (last < wait && last >= 0) {\n\t\t\ttimeoutId = setTimeout(later, wait - last);\n\t\t} else {\n\t\t\ttimeoutId = undefined;\n\n\t\t\tif (!immediate) {\n\t\t\t\tresult = run();\n\t\t\t}\n\t\t}\n\t}\n\n\tconst debounced = function (...arguments_) {\n\t\tif (storedContext && this !== storedContext) {\n\t\t\tthrow new Error('Debounced method called with different contexts.');\n\t\t}\n\n\t\tstoredContext = this; // eslint-disable-line unicorn/no-this-assignment\n\t\tstoredArguments = arguments_;\n\t\ttimestamp = Date.now();\n\n\t\tconst callNow = immediate && !timeoutId;\n\n\t\tif (!timeoutId) {\n\t\t\ttimeoutId = setTimeout(later, wait);\n\t\t}\n\n\t\tif (callNow) {\n\t\t\tresult = run();\n\t\t}\n\n\t\treturn result;\n\t};\n\n\tdebounced.clear = () => {\n\t\tif (!timeoutId) {\n\t\t\treturn;\n\t\t}\n\n\t\tclearTimeout(timeoutId);\n\t\ttimeoutId = undefined;\n\t};\n\n\tdebounced.flush = () => {\n\t\tif (!timeoutId) {\n\t\t\treturn;\n\t\t}\n\n\t\tdebounced.trigger();\n\t};\n\n\tdebounced.trigger = () => {\n\t\tresult = run();\n\n\t\tdebounced.clear();\n\t};\n\n\treturn debounced;\n}\n\n// Adds compatibility for ES modules\nmodule.exports.debounce = debounce;\n\nmodule.exports = debounce;\n"],"mappings":"mBAAA,SAASA,EAASC,EAAWC,EAAO,IAAKC,EAAU,IAClD,UAAWF,IAAc,WAAY,CACpC,MAAM,IAAIG,UAAU,+DAA+DH,OACrF,CAEC,GAAIC,EAAO,EAAG,CACb,MAAM,IAAIG,WAAW,+BACvB,CAGC,MAAMC,UAACA,UAAoBH,IAAY,UAAY,CAACG,UAAWH,GAAWA,EAE1E,IAAII,EACJ,IAAIC,EACJ,IAAIC,EACJ,IAAIC,EACJ,IAAIC,EAEJ,SAASC,IACR,MAAMC,EAAcN,EACpB,MAAMO,EAAgBN,EACtBD,EAAgBQ,UAChBP,EAAkBO,UAClBJ,EAASV,EAAUe,MAAMH,EAAaC,GACtC,OAAOH,CACT,CAEC,SAASM,IACR,MAAMC,EAAOC,KAAKC,MAAQV,EAE1B,GAAIQ,EAAOhB,GAAQgB,GAAQ,EAAG,CAC7BT,EAAYY,WAAWJ,EAAOf,EAAOgB,EACxC,KAAS,CACNT,EAAYM,UAEZ,IAAKT,EAAW,CACfK,EAASC,GACb,CACA,CACA,CAEC,MAAMU,EAAY,YAAaC,GAC9B,GAAIhB,GAAiBiB,OAASjB,EAAe,CAC5C,MAAM,IAAIkB,MAAM,mDACnB,CAEElB,EAAgBiB,KAChBhB,EAAkBe,EAClBb,EAAYS,KAAKC,MAEjB,MAAMM,EAAUpB,IAAcG,EAE9B,IAAKA,EAAW,CACfA,EAAYY,WAAWJ,EAAOf,EACjC,CAEE,GAAIwB,EAAS,CACZf,EAASC,GACZ,CAEE,OAAOD,CACT,EAECW,EAAUK,MAAQ,KACjB,IAAKlB,EAAW,CACf,MACH,CAEEmB,aAAanB,GACbA,EAAYM,SAAS,EAGtBO,EAAUO,MAAQ,KACjB,IAAKpB,EAAW,CACf,MACH,CAEEa,EAAUQ,SAAS,EAGpBR,EAAUQ,QAAU,KACnBnB,EAASC,IAETU,EAAUK,OAAO,EAGlB,OAAOL,CACR,C,mBAG0BtB,EAE1B+B,UAAiB/B,E","ignoreList":[]}

package/dist/dso-toolkit/p-97f788d4.js.map

@@ -1 +1 @@
-{"version":3,"names":["chr4","Math","random","toString","slice","createIdentifier","prefix"],"sources":["src/utils/create-identifier.ts"],"sourcesContent":["/**\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"],"mappings":"SAGgBA,IACd,OAAOC,KAAKC,SAASC,SAAS,IAAIC,OAAO,EAC3C,C,SAMgBC,EAAiBC,GAC/B,MAAO,GAAGA,KAAUN,MAASA,OAAUA,OAAUA,OAAUA,OAAUA,MAASA,MAASA,KACzF,Q"}
+{"version":3,"names":["chr4","Math","random","toString","slice","createIdentifier","prefix"],"sources":["src/utils/create-identifier.ts"],"sourcesContent":["/**\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"],"mappings":"SAGgBA,IACd,OAAOC,KAAKC,SAASC,SAAS,IAAIC,OAAO,EAC3C,C,SAMgBC,EAAiBC,GAC/B,MAAO,GAAGA,KAAUN,MAASA,OAAUA,OAAUA,OAAUA,OAAUA,MAASA,MAASA,KACzF,Q","ignoreList":[]}

package/dist/dso-toolkit/p-9a63ac5d.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as r}from"./p-e6cf4fdb.js";import{c as d}from"./p-8a1a6e56.js";const e=":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-badge{border:1px solid;border-radius:1em;display:inline-block;font-size:0.875em;line-height:1;min-inline-size:1.5rem;padding-block:4px;padding-inline:8px;text-align:center}.dso-badge{background-color:#666;border-color:#666;color:#fff}.dso-badge.badge-info{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.dso-badge.badge-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;border-color:#dcd400;color:#191919}.dso-badge.badge-danger{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-error{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;border-color:#191919;color:#191919}.dso-badge.badge-attention{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}";const c=e;const a=class{constructor(r){o(this,r);this.status=undefined}render(){return r("span",{key:"915074c0cc5bbbc08128dfd4a421c6bcde03b28c",class:d("dso-badge",{[`badge-${this.status}`]:this.status})},r("slot",{key:"9c2de7dabf46af1b6619dc36e8022322c1e59803"}))}};a.style=c;export{a as dso_badge};
+//# sourceMappingURL=p-9a63ac5d.entry.js.map

package/dist/dso-toolkit/p-9a63ac5d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["badgeCss","DsoBadgeStyle0","Badge","render","h","key","class","clsx","this","status"],"sources":["src/components/badge/badge.scss?tag=dso-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/badge\";\r\n\r\n:host {\r\n  display: inline-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.dso-badge {\r\n  @include badge.root();\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { BadgeStatus } from \"./badge.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-badge\",\r\n  styleUrl: \"badge.scss\",\r\n  shadow: true,\r\n})\r\nexport class Badge {\r\n  /**\r\n   * The status of the Badge.\r\n   */\r\n  @Prop()\r\n  status?: BadgeStatus;\r\n\r\n  render() {\r\n    return (\r\n      <span class={clsx(\"dso-badge\", { [`badge-${this.status}`]: this.status })}>\r\n        <slot></slot>\r\n      </span>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"+EAAA,MAAMA,EAAW,ykCACjB,MAAAC,EAAeD,E,MCQFE,EAAK,M,+CAOhB,MAAAC,GACE,OACEC,EAAA,QAAAC,IAAA,2CAAMC,MAAOC,EAAK,YAAa,CAAE,CAAC,SAASC,KAAKC,UAAWD,KAAKC,UAC9DL,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/dso-toolkit/p-9b35c459.entry.js

@@ -0,0 +1,2 @@
+import{h as e,F as t,r as n,c as o}from"./p-e6cf4fdb.js";import{c as i}from"./p-8a1a6e56.js";const s=({owner:n,ancestors:o,item:r,index:a,level:l,setSize:c})=>{var d,u,h,p;return e("li",{key:r.id,class:i("tree-item",{"has-child":r.hasItems,"is-expanded":!!r.open&&!!((d=r.items)===null||d===void 0?void 0:d.length)}),role:"none"},e("div",{class:"tree-branch-control"},r.hasItems?e("div",{onClick:e=>n.itemClick(e,o,r)},e("dso-icon",{icon:r.open?"minus-square":"plus-square"})):e("dso-icon",null)),e("p",{class:i("tree-content",{active:r.active},{selected:r.selected}),tabindex:l===1&&a===0?0:-1,role:"treeitem","aria-expanded":r.hasItems?""+(!!r.open&&!!((u=r.items)===null||u===void 0?void 0:u.length)):undefined,"aria-current":r.active?"true":undefined,"aria-level":l,"aria-setsize":c,"aria-posinset":a+1,"aria-busy":r.loading?"true":undefined,"data-item-id":r.id,onClick:e=>n.itemClick(e,o,r)},r.selected&&e("span",{class:"sr-only"},"Resultaat: "),r.href?e("a",{href:r.href,tabindex:"-1"},r.label):e("span",null,r.label),(h=r.icons)===null||h===void 0?void 0:h.map((t=>e("dso-icon",{icon:t.icon,title:t.label})))),r.open&&e(t,null,r.hasItems&&!r.items&&r.loading?e("dso-progress-indicator",{size:"small",label:"Resultaten laden: een moment geduld alstublieft."}):e("ul",{role:"group"},(p=r.items)===null||p===void 0?void 0:p.map(((t,i,a)=>e(s,{owner:n,ancestors:[...o,r],item:t,index:i,level:l+1,setSize:a.length}))))))};const r=':host ul{list-style-type:none;padding-inline-start:32px;position:relative}:host li{position:relative}:host ul[role=tree]{padding-inline-start:0}:host ul[role=group]::before{border-inline-start:1px solid #275937;content:"";block-size:8px;inset-inline-start:44px;position:absolute;inset-block-start:0;inline-size:0}:host li:not(.has-child)::before{border-block-start:1px solid #275937;content:"";block-size:0;inset-inline-start:12px;position:absolute;inset-block-start:20px;inline-size:16px}:host li:not(.has-child)::after{border-inline-start:1px solid #275937;content:"";block-size:100%;inset-inline-start:12px;position:absolute;inset-block-start:8px;inline-size:0}:host li:not(.has-child):last-child::after{block-size:20px;inset-block-start:0}:host li.has-child::before{border-block-start:1px solid #275937;content:"";block-size:0;inset-inline-start:24px;position:absolute;inset-block-start:20px;inline-size:4px}:host li.has-child:not(:last-child)::after{border-inline-start:1px solid #275937;content:"";block-size:calc(100% - 24px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host li.has-child.is-expanded:last-child::after{border-inline-start:1px solid #275937;content:"";block-size:calc(100% - 32px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host .tree-branch-control{color:#39870c;display:inline-block;font-size:16px;margin-block:8px;margin-inline:0 8px;vertical-align:top}:host .tree-branch-control>div{cursor:pointer}:host .tree-content{cursor:pointer;display:inline-block;margin-block:8px;margin-inline:0;max-inline-size:calc(100% - 40px)}:host .tree-content a{color:#191919;text-decoration:underline}:host .tree-content a:hover,:host .tree-content a:focus{color:#191919;text-decoration:none}:host .tree-content a:active{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content.active{color:#8b4a6a;font-style:italic;font-weight:700;text-decoration:underline}:host .tree-content.active:hover,:host .tree-content.active:focus{text-decoration:none}:host .tree-content.active a{color:#8b4a6a}:host .tree-content.active a:hover,:host .tree-content.active a:focus{text-decoration:none}:host .tree-content dso-icon{color:#39870c;font-size:0.75em;margin-inline-start:0.5em;vertical-align:text-bottom}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}';const a=r;const l=class{constructor(e){n(this,e);this.dsoOpenItem=o(this,"dsoOpenItem",7);this.dsoCloseItem=o(this,"dsoCloseItem",7);this.dsoClickItem=o(this,"dsoClickItem",7);this.keyDownListener=e=>{if(e.defaultPrevented){return}const t=e=>e.length===1&&e.match(/\S/);const n=e.composedPath().find((e=>e instanceof HTMLElement?e.className==="dso-tree":false));if(!(e.target instanceof HTMLParagraphElement)||!(n instanceof HTMLElement)){return}switch(e.key){case"ArrowDown":l.moveFocus(n,e.target,"next");break;case"ArrowUp":l.moveFocus(n,e.target,"previous");break;case"ArrowRight":l.expandItemOrFocusChild(n,e.target);break;case"ArrowLeft":l.collapseItemOrFocusParent(n,e.target);break;case"End":l.moveFocus(n,e.target,"last");break;case"Home":l.moveFocus(n,e.target,"first");break;case"Enter":case" ":e.target.click();break;default:if(t(e.key)){if(l.setFocusByFirstCharacter(n,e.target,e.key,e.shiftKey)){break}}return}e.preventDefault()};this.itemClick=(e,t,n)=>{if(!(e.target instanceof HTMLElement)){return}const o=e.target.closest(".tree-content");if(o){const i=e.composedPath().find((e=>e instanceof HTMLElement?e.className==="dso-tree":false));if(!(o instanceof HTMLParagraphElement)||!(i instanceof HTMLElement)){return}l.setFocus(i,o);this.dsoClickItem.emit({path:[...t,n],originalEvent:e});return}if(n.open){this.dsoCloseItem.emit([...t,n])}else{this.dsoOpenItem.emit([...t,n])}};this.collection=undefined}async focusItem(e){var t;const n=this.tree;if(!n||e.length===0){return false}const o=e[e.length-1];if(!o){throw new Error("No itemToFocus found")}const i=Array.from((t=n.querySelectorAll("p"))!==null&&t!==void 0?t:[]).filter((e=>e.offsetWidth>0&&e.offsetHeight>0)).find((e=>e.dataset["itemId"]===o.id));if(!i){return false}l.setFocus(n,i);return true}static setFocus(e,t){if(t){Array.from(e.querySelectorAll("p")).filter((e=>e.tabIndex===0)).forEach((e=>e.tabIndex=-1));t.tabIndex=0;t.focus()}}static moveFocus(e,t,n){const o=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));let i=0;switch(n){case"first":i=0;break;case"previous":i=o.indexOf(t)-1;break;case"next":i=o.indexOf(t)+1;break;case"last":i=o.length-1;break}const s=o[i];if(!s){throw new Error("No focusableItem found")}l.setFocus(e,s)}static expandItemOrFocusChild(e,t){var n;if((t===null||t===void 0?void 0:t.getAttribute("aria-expanded"))==="true"){l.moveFocus(e,t,"next")}else{const e=(n=t.previousElementSibling)===null||n===void 0?void 0:n.firstElementChild;if(e instanceof HTMLElement){e.click()}}}static collapseItemOrFocusParent(e,t){var n,o,i;if((t===null||t===void 0?void 0:t.getAttribute("aria-expanded"))==="true"){const e=(n=t.previousElementSibling)===null||n===void 0?void 0:n.firstElementChild;if(e instanceof HTMLElement){e.click()}}else{const n=(i=(o=t===null||t===void 0?void 0:t.parentElement)===null||o===void 0?void 0:o.parentElement)===null||i===void 0?void 0:i.previousElementSibling;if(n instanceof HTMLElement){l.setFocus(e,n)}}}static setFocusByFirstCharacter(e,t,n,o){const i=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));if(o){i.reverse()}const s=i.indexOf(t);n=n.toLowerCase();let r=i.find(((e,t)=>{var o;return t>s&&((o=e.textContent)===null||o===void 0?void 0:o.toLowerCase().startsWith(n))}));if(!r){r=i.find(((e,t)=>{var o;return t<s&&((o=e.textContent)===null||o===void 0?void 0:o.toLowerCase().startsWith(n))}))}if(r){l.setFocus(e,r);return true}return false}render(){var t;return e("div",{key:"b07d628f7741b4961596210003548094ede749b5",id:"tree",class:"dso-tree",onKeyDown:e=>this.keyDownListener(e),ref:e=>this.tree=e},e("ul",{key:"2ab63613e5b55b09aad1c84678c18c00bc7883ff",role:"tree","aria-label":"Objectenboom"},(t=this.collection)===null||t===void 0?void 0:t.map(((t,n)=>e(s,{owner:this,ancestors:[],item:t,index:n,level:1,setSize:this.collection.length})))))}};l.style=a;export{l as dso_tree_view};
+//# sourceMappingURL=p-9b35c459.entry.js.map

package/dist/dso-toolkit/p-9b35c459.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DsoTreeItem","owner","ancestors","item","index","level","setSize","h","key","id","class","clsx","hasItems","open","_a","items","length","role","onClick","e","itemClick","icon","active","selected","tabindex","_b","undefined","loading","href","label","_c","icons","map","title","Fragment","size","_d","childItem","childIndex","org","treeViewCss","DsoTreeViewStyle0","TreeView","this","keyDownListener","event","defaultPrevented","isIndexLetter","str","match","tree","composedPath","find","HTMLElement","className","target","HTMLParagraphElement","moveFocus","expandItemOrFocusChild","collapseItemOrFocusParent","click","setFocusByFirstCharacter","shiftKey","preventDefault","contentElement","closest","eventTarget","setFocus","dsoClickItem","emit","path","originalEvent","dsoCloseItem","dsoOpenItem","focusItem","itemToFocus","Error","elementToFocus","Array","from","querySelectorAll","filter","offsetWidth","offsetHeight","dataset","tabIndex","forEach","focus","el","moveTo","focusableItems","indexOf","focusableItem","getAttribute","controlElement","previousElementSibling","firstElementChild","parentTarget","parentElement","char","backwards","reverse","current","toLowerCase","nextItem","textContent","startsWith","render","onKeyDown","ref","element","collection"],"sources":["src/components/tree-view/tree-item.tsx","src/components/tree-view/tree-view.scss?tag=dso-tree-view&encapsulation=shadow","src/components/tree-view/tree-view.tsx"],"sourcesContent":["import { h, FunctionalComponent, Fragment } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { TreeViewItem, TreeViewItemIcon } from \"./tree-view.interfaces\";\r\n\r\nimport { TreeView } from \"./tree-view\";\r\n\r\ninterface TreeViewItemProps {\r\n  owner: TreeView;\r\n  ancestors: TreeViewItem[];\r\n  item: TreeViewItem;\r\n  index: number;\r\n  level: number;\r\n  setSize: number;\r\n}\r\n\r\nexport const DsoTreeItem: FunctionalComponent<TreeViewItemProps> = ({\r\n  owner,\r\n  ancestors,\r\n  item,\r\n  index,\r\n  level,\r\n  setSize,\r\n}) => (\r\n  <li\r\n    key={item.id}\r\n    class={clsx(\"tree-item\", { \"has-child\": item.hasItems, \"is-expanded\": !!item.open && !!item.items?.length })}\r\n    role=\"none\"\r\n  >\r\n    <div class=\"tree-branch-control\">\r\n      {item.hasItems ? (\r\n        <div onClick={(e) => owner.itemClick(e, ancestors, item)}>\r\n          <dso-icon icon={item.open ? \"minus-square\" : \"plus-square\"}></dso-icon>\r\n        </div>\r\n      ) : (\r\n        <dso-icon></dso-icon>\r\n      )}\r\n    </div>\r\n    <p\r\n      class={clsx(\"tree-content\", { active: item.active }, { selected: item.selected })}\r\n      tabindex={level === 1 && index === 0 ? 0 : -1}\r\n      role=\"treeitem\"\r\n      aria-expanded={item.hasItems ? \"\" + (!!item.open && !!item.items?.length) : undefined}\r\n      aria-current={item.active ? \"true\" : undefined}\r\n      aria-level={level}\r\n      aria-setsize={setSize}\r\n      aria-posinset={index + 1}\r\n      aria-busy={item.loading ? \"true\" : undefined}\r\n      data-item-id={item.id}\r\n      onClick={(e) => owner.itemClick(e, ancestors, item)}\r\n    >\r\n      {item.selected && <span class=\"sr-only\">Resultaat: </span>}\r\n      {item.href ? (\r\n        <a href={item.href} tabindex=\"-1\">\r\n          {item.label}\r\n        </a>\r\n      ) : (\r\n        <span>{item.label}</span>\r\n      )}\r\n      {item.icons?.map((icon: TreeViewItemIcon) => <dso-icon icon={icon.icon} title={icon.label}></dso-icon>)}\r\n    </p>\r\n    {item.open && (\r\n      <>\r\n        {item.hasItems && !item.items && item.loading ? (\r\n          <dso-progress-indicator size=\"small\" label=\"Resultaten laden: een moment geduld alstublieft.\" />\r\n        ) : (\r\n          <ul role=\"group\">\r\n            {item.items?.map((childItem: TreeViewItem, childIndex: number, org: TreeViewItem[]) => (\r\n              <DsoTreeItem\r\n                owner={owner}\r\n                ancestors={[...ancestors, item]}\r\n                item={childItem}\r\n                index={childIndex}\r\n                level={level + 1}\r\n                setSize={org.length}\r\n              ></DsoTreeItem>\r\n            ))}\r\n          </ul>\r\n        )}\r\n      </>\r\n    )}\r\n  </li>\r\n);\r\n","@use \"sass:math\";\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n\r\n@use \"tree-view.mixins\" as core-tree-view-mixins;\r\n@use \"tree-view.variables\" as core-tree-view-variables;\r\n\r\n:host {\r\n  ul {\r\n    list-style-type: none;\r\n    padding-inline-start: core-tree-view-variables.$indent;\r\n    position: relative;\r\n  }\r\n\r\n  li {\r\n    position: relative;\r\n  }\r\n\r\n  ul[role=\"tree\"] {\r\n    padding-inline-start: 0;\r\n  }\r\n\r\n  // connects branch or leaf to parent\r\n  ul[role=\"group\"]::before {\r\n    @include core-tree-view-mixins.vertical-line(\r\n      core-tree-view-variables.$indent + core-tree-view-variables.$hcenter,\r\n      0,\r\n      core-tree-view-variables.$vspace\r\n    );\r\n  }\r\n\r\n  li:not(.has-child) {\r\n    // horizontal connector for a leaf\r\n    &::before {\r\n      @include core-tree-view-mixins.horizontal-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vcenter,\r\n        core-tree-view-variables.$hspace + 0.5 * core-tree-view-variables.$icon-size - 4px\r\n      );\r\n    }\r\n\r\n    // vertical connector for a leaf\r\n    &::after {\r\n      @include core-tree-view-mixins.vertical-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vspace,\r\n        100%\r\n      );\r\n    }\r\n\r\n    // vertical connector for the last leaf\r\n    &:last-child::after {\r\n      block-size: core-tree-view-variables.$vcenter;\r\n      inset-block-start: 0;\r\n    }\r\n  }\r\n\r\n  li.has-child {\r\n    // horizontal connector for a branch\r\n    &::before {\r\n      @include core-tree-view-mixins.horizontal-line(\r\n        core-tree-view-variables.$icon-size,\r\n        core-tree-view-variables.$vcenter,\r\n        core-tree-view-variables.$hspace - 4px\r\n      );\r\n    }\r\n\r\n    // vertical connector for a branch (not last)\r\n    &:not(:last-child)::after {\r\n      @include core-tree-view-mixins.vertical-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n        calc(100% - core-tree-view-variables.$icon-size)\r\n      );\r\n    }\r\n\r\n    // vertical line after a expanded branch (creating dead ends)\r\n    &.is-expanded:last-child::after {\r\n      @include core-tree-view-mixins.vertical-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n        calc(100% - (core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size))\r\n      );\r\n    }\r\n  }\r\n\r\n  .tree-branch-control {\r\n    color: colors.$grasgroen;\r\n    display: inline-block;\r\n    font-size: math.div(2 * core-tree-view-variables.$icon-size, 3);\r\n    margin-block: core-tree-view-variables.$vspace;\r\n    margin-inline: 0 core-tree-view-variables.$hspace;\r\n    vertical-align: top;\r\n\r\n    > div {\r\n      cursor: pointer;\r\n    }\r\n  }\r\n\r\n  .tree-content {\r\n    cursor: pointer;\r\n    display: inline-block;\r\n    margin-block: core-tree-view-variables.$vspace;\r\n    margin-inline: 0;\r\n    max-inline-size: calc(100% - (core-tree-view-variables.$indent + core-tree-view-variables.$hspace));\r\n\r\n    a {\r\n      color: scaffolding.$text-color;\r\n      text-decoration: underline;\r\n\r\n      &:hover,\r\n      &:focus {\r\n        color: scaffolding.$text-color;\r\n        text-decoration: none;\r\n      }\r\n\r\n      &:active {\r\n        text-decoration: none;\r\n      }\r\n    }\r\n\r\n    &.selected {\r\n      color: scaffolding.$text-color;\r\n      font-weight: 700;\r\n      text-decoration: underline;\r\n\r\n      &:hover,\r\n      &:focus {\r\n        text-decoration: none;\r\n      }\r\n    }\r\n\r\n    &.active {\r\n      color: colors.$mauve;\r\n      font-style: italic;\r\n      font-weight: 700;\r\n\r\n      text-decoration: underline;\r\n\r\n      &:hover,\r\n      &:focus {\r\n        text-decoration: none;\r\n      }\r\n\r\n      a {\r\n        color: colors.$mauve;\r\n\r\n        &:hover,\r\n        &:focus {\r\n          text-decoration: none;\r\n        }\r\n      }\r\n    }\r\n\r\n    dso-icon {\r\n      color: colors.$grasgroen;\r\n      font-size: 0.75em;\r\n      margin-inline-start: 0.5em;\r\n      vertical-align: text-bottom;\r\n    }\r\n  }\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, ComponentInterface, Event, EventEmitter, Prop, Method } from \"@stencil/core\";\r\n\r\nimport { TreeViewPointerEvent, TreeViewItem } from \"./tree-view.interfaces\";\r\nimport { DsoTreeItem } from \"./tree-item\";\r\n\r\n@Component({\r\n  tag: \"dso-tree-view\",\r\n  styleUrl: \"./tree-view.scss\",\r\n  shadow: true,\r\n})\r\nexport class TreeView implements ComponentInterface {\r\n  private tree?: HTMLElement;\r\n\r\n  /**\r\n   * The collection of TreeViewItems\r\n   */\r\n  @Prop()\r\n  collection!: TreeViewItem[];\r\n\r\n  /**\r\n   * Emitted when a tree view item is opened.\r\n   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n   * root to the item that is emitting the open event. The consumer of the event is responsible for updating\r\n   * the TreeView's collection (usually set the open state on the last TreeViewItem in path).\r\n   */\r\n  @Event()\r\n  dsoOpenItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n  /**\r\n   * Emitted when a tree view item is closed.\r\n   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n   * root to the item that is emitting the close event. The consumer of the event is responsible for updating\r\n   * the TreeView's collection (usually set the closed state on the last TreeViewItem in path).\r\n   */\r\n  @Event()\r\n  dsoCloseItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n  /**\r\n   * Emitted when a tree view item is clicked.\r\n   * The `detail` property of the `CustomEvent` will contain an object with:\r\n   * `path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event.\r\n   * `originalEvent` = the original click event.\r\n   * The consumer of the event is responsible for updating the TreeView's collection (usually set the active\r\n   * state on the last TreeViewItem in path and clear all other active item states).\r\n   */\r\n  @Event()\r\n  dsoClickItem!: EventEmitter<TreeViewPointerEvent>;\r\n\r\n  /**\r\n   * Set focus on the last item in the specified path.\r\n   * The consumer is responsible for providing a TreeView collection where the last item is visible.\r\n   * @async\r\n   * @returns Whether the item was found.\r\n   */\r\n  @Method()\r\n  async focusItem(path: TreeViewItem[]): Promise<boolean> {\r\n    const tree = this.tree;\r\n\r\n    if (!tree || path.length === 0) {\r\n      return false;\r\n    }\r\n\r\n    const itemToFocus = path[path.length - 1];\r\n    if (!itemToFocus) {\r\n      throw new Error(\"No itemToFocus found\");\r\n    }\r\n\r\n    const elementToFocus = (Array.from(tree.querySelectorAll(\"p\") ?? []) as HTMLElement[])\r\n      .filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0)\r\n      .find((item) => item.dataset[\"itemId\"] === itemToFocus.id);\r\n\r\n    if (!elementToFocus) {\r\n      return false;\r\n    }\r\n\r\n    TreeView.setFocus(tree, elementToFocus);\r\n\r\n    return true;\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.defaultPrevented) {\r\n      return;\r\n    }\r\n\r\n    const isIndexLetter = (str: string) => str.length === 1 && str.match(/\\S/);\r\n\r\n    const tree = event\r\n      .composedPath()\r\n      .find((item) => (item instanceof HTMLElement ? item.className === \"dso-tree\" : false));\r\n\r\n    if (!(event.target instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"ArrowDown\":\r\n        TreeView.moveFocus(tree, event.target, \"next\");\r\n        break;\r\n      case \"ArrowUp\":\r\n        TreeView.moveFocus(tree, event.target, \"previous\");\r\n        break;\r\n      case \"ArrowRight\":\r\n        TreeView.expandItemOrFocusChild(tree, event.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n        TreeView.collapseItemOrFocusParent(tree, event.target);\r\n        break;\r\n      case \"End\":\r\n        TreeView.moveFocus(tree, event.target, \"last\");\r\n        break;\r\n      case \"Home\":\r\n        TreeView.moveFocus(tree, event.target, \"first\");\r\n        break;\r\n      case \"Enter\":\r\n      case \" \":\r\n        event.target.click();\r\n        break;\r\n      default:\r\n        if (isIndexLetter(event.key)) {\r\n          if (TreeView.setFocusByFirstCharacter(tree, event.target, event.key, event.shiftKey)) {\r\n            break;\r\n          }\r\n        }\r\n\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private -- Omdat this als TreeView instance aan Functionele Components wordt gegeven\r\n  itemClick = (event: MouseEvent, ancestors: TreeViewItem[], item: TreeViewItem) => {\r\n    if (!(event.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    const contentElement = event.target.closest(\".tree-content\");\r\n\r\n    if (contentElement) {\r\n      const tree = event\r\n        .composedPath()\r\n        .find((eventTarget) => (eventTarget instanceof HTMLElement ? eventTarget.className === \"dso-tree\" : false));\r\n      if (!(contentElement instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {\r\n        return;\r\n      }\r\n\r\n      TreeView.setFocus(tree, contentElement);\r\n      this.dsoClickItem.emit({ path: [...ancestors, item], originalEvent: event });\r\n\r\n      return;\r\n    }\r\n\r\n    if (item.open) {\r\n      this.dsoCloseItem.emit([...ancestors, item]);\r\n    } else {\r\n      this.dsoOpenItem.emit([...ancestors, item]);\r\n    }\r\n  };\r\n\r\n  private static setFocus(tree: HTMLElement, target: HTMLElement) {\r\n    if (target) {\r\n      (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[])\r\n        .filter((item) => item.tabIndex === 0)\r\n        .forEach((item) => (item.tabIndex = -1));\r\n\r\n      target.tabIndex = 0;\r\n      target.focus();\r\n    }\r\n  }\r\n\r\n  private static moveFocus(tree: HTMLElement, el: HTMLElement, moveTo: \"first\" | \"previous\" | \"next\" | \"last\"): void {\r\n    const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n      (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n    );\r\n\r\n    let index = 0;\r\n    switch (moveTo) {\r\n      case \"first\":\r\n        index = 0;\r\n        break;\r\n      case \"previous\":\r\n        index = focusableItems.indexOf(el) - 1;\r\n        break;\r\n      case \"next\":\r\n        index = focusableItems.indexOf(el) + 1;\r\n        break;\r\n      case \"last\":\r\n        index = focusableItems.length - 1;\r\n        break;\r\n    }\r\n\r\n    const focusableItem = focusableItems[index];\r\n    if (!focusableItem) {\r\n      throw new Error(\"No focusableItem found\");\r\n    }\r\n\r\n    TreeView.setFocus(tree, focusableItem);\r\n  }\r\n\r\n  private static expandItemOrFocusChild(tree: HTMLElement, target: HTMLElement): void {\r\n    if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n      TreeView.moveFocus(tree, target, \"next\");\r\n    } else {\r\n      const controlElement = target.previousElementSibling?.firstElementChild;\r\n      if (controlElement instanceof HTMLElement) {\r\n        controlElement.click();\r\n      }\r\n    }\r\n  }\r\n\r\n  private static collapseItemOrFocusParent(tree: HTMLElement, target: HTMLElement): void {\r\n    if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n      const controlElement = target.previousElementSibling?.firstElementChild;\r\n      if (controlElement instanceof HTMLElement) {\r\n        controlElement.click();\r\n      }\r\n    } else {\r\n      const parentTarget = target?.parentElement?.parentElement?.previousElementSibling;\r\n      if (parentTarget instanceof HTMLElement) {\r\n        TreeView.setFocus(tree, parentTarget);\r\n      }\r\n    }\r\n  }\r\n\r\n  private static setFocusByFirstCharacter(\r\n    tree: HTMLElement,\r\n    el: HTMLElement,\r\n    char: string,\r\n    backwards: boolean,\r\n  ): boolean {\r\n    const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n      (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n    );\r\n\r\n    if (backwards) {\r\n      focusableItems.reverse();\r\n    }\r\n\r\n    const current = focusableItems.indexOf(el);\r\n\r\n    char = char.toLowerCase();\r\n    let nextItem = focusableItems.find(\r\n      (item, index) => index > current && item.textContent?.toLowerCase().startsWith(char),\r\n    );\r\n    if (!nextItem) {\r\n      nextItem = focusableItems.find(\r\n        (item, index) => index < current && item.textContent?.toLowerCase().startsWith(char),\r\n      );\r\n    }\r\n\r\n    if (nextItem) {\r\n      TreeView.setFocus(tree, nextItem);\r\n      return true;\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        id=\"tree\"\r\n        class=\"dso-tree\"\r\n        onKeyDown={(e) => this.keyDownListener(e)}\r\n        ref={(element) => (this.tree = element)}\r\n      >\r\n        <ul role=\"tree\" aria-label=\"Objectenboom\">\r\n          {this.collection?.map((item, index) => (\r\n            <DsoTreeItem\r\n              owner={this}\r\n              ancestors={[]}\r\n              item={item}\r\n              index={index}\r\n              level={1}\r\n              setSize={this.collection.length}\r\n            ></DsoTreeItem>\r\n          ))}\r\n        </ul>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}