@dso-toolkit/core 32.1.0 → 33.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/dist/cjs/dso-autosuggest.cjs.entry.js +5 -1
  2. package/dist/cjs/dso-date-picker.cjs.entry.js +8 -7
  3. package/dist/cjs/dso-dropdown-menu.cjs.entry.js +4 -1
  4. package/dist/cjs/dso-label.cjs.entry.js +1 -1
  5. package/dist/cjs/dso-toggletip.cjs.entry.js +2 -1
  6. package/dist/cjs/dso-tree-view.cjs.entry.js +5 -4
  7. package/dist/collection/components/autosuggest/autosuggest.js +19 -1
  8. package/dist/collection/components/autosuggest/autosuggest.template.js +2 -1
  9. package/dist/collection/components/date-picker/date-picker.js +8 -7
  10. package/dist/collection/components/dropdown-menu/dropdown-menu.css +4 -0
  11. package/dist/collection/components/dropdown-menu/dropdown-menu.js +3 -0
  12. package/dist/collection/components/label/label.js +2 -1
  13. package/dist/collection/components/toggletip/toggletip.css +4 -0
  14. package/dist/collection/components/toggletip/toggletip.js +1 -0
  15. package/dist/collection/components/tree-view/tree-item.js +3 -2
  16. package/dist/collection/components/tree-view/tree-view.css +33 -5
  17. package/dist/collection/components/tree-view/tree-view.js +11 -11
  18. package/dist/custom-elements/index.js +25 -15
  19. package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
  20. package/dist/dso-toolkit/p-0a08ac9f.entry.js +1 -0
  21. package/dist/dso-toolkit/p-731a9631.entry.js +1 -0
  22. package/dist/dso-toolkit/p-741e96de.entry.js +5 -0
  23. package/dist/dso-toolkit/{p-e2dc97c4.entry.js → p-984551a8.entry.js} +1 -1
  24. package/dist/dso-toolkit/p-e814d644.entry.js +1 -0
  25. package/dist/dso-toolkit/p-fd5e24c9.entry.js +1 -0
  26. package/dist/esm/dso-autosuggest.entry.js +5 -1
  27. package/dist/esm/dso-date-picker.entry.js +8 -7
  28. package/dist/esm/dso-dropdown-menu.entry.js +4 -1
  29. package/dist/esm/dso-label.entry.js +1 -1
  30. package/dist/esm/dso-toggletip.entry.js +2 -1
  31. package/dist/esm/dso-tree-view.entry.js +5 -4
  32. package/dist/types/components/autosuggest/autosuggest.d.ts +5 -0
  33. package/dist/types/components/autosuggest/autosuggest.template.d.ts +1 -1
  34. package/dist/types/components/dropdown-menu/dropdown-menu.d.ts +1 -0
  35. package/dist/types/components/tree-view/tree-item.d.ts +4 -4
  36. package/dist/types/components/tree-view/tree-view.d.ts +12 -9
  37. package/dist/types/components/tree-view/tree-view.interfaces.d.ts +14 -4
  38. package/dist/types/components/tree-view/tree-view.template.d.ts +1 -1
  39. package/dist/types/components.d.ts +11 -7
  40. package/package.json +1 -8
  41. package/dist/dso-toolkit/p-12f7e7d7.entry.js +0 -5
  42. package/dist/dso-toolkit/p-39dae284.entry.js +0 -1
  43. package/dist/dso-toolkit/p-9e9f8bcf.entry.js +0 -1
  44. package/dist/dso-toolkit/p-ad8f467f.entry.js +0 -1
  45. package/dist/dso-toolkit/p-e03d7741.entry.js +0 -1
@@ -1 +1 @@
1
- import{p as e,b as o}from"./p-a40eeb32.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((e=>o([["p-08427682",[[1,"dso-map-base-layers",{baseLayers:[16],selectedBaseLayer:[1040]}]]],["p-e7700d9e",[[1,"dso-map-overlays",{overlays:[16],checkedOverlays:[1040]}]]],["p-e2dc97c4",[[1,"dso-toggletip",{label:[1],position:[1],small:[4],secondary:[4],active:[32]}]]],["p-ad8f467f",[[1,"dso-tree-view",{collection:[16]}]]],["p-e03d7741",[[1,"dso-date-picker",{name:[1],identifier:[1],disabled:[516],role:[1],direction:[1],required:[4],dsoAutofocus:[4,"dso-autofocus"],value:[1537],min:[1],max:[1],activeFocus:[32],focusedDay:[32],open:[32],setFocus:[64],show:[64],hide:[64]},[[6,"click","handleDocumentClick"]]]]],["p-b07991b9",[[1,"dso-helpcenter-panel",{label:[1],url:[1],visibility:[32],isOpen:[32],slideState:[32],loadIframe:[32]}]]],["p-9e9f8bcf",[[1,"dso-label",{compact:[4],removable:[4],status:[1],hover:[32]}]]],["p-e4269e02",[[1,"dso-map-controls",{open:[1540],disableZoom:[1,"disable-zoom"],hideContent:[32]}]]],["p-83f166b3",[[1,"dso-alert",{status:[1],roleAlert:[4,"role-alert"]}]]],["p-2e7d535c",[[1,"dso-attachments-counter",{count:[2]}]]],["p-39dae284",[[6,"dso-autosuggest",{suggestions:[16],suggestOnFocus:[4,"suggest-on-focus"],showSuggestions:[32],selectedSuggestion:[32]},[[4,"click","onDocumentClick"]]]]],["p-c9c1bc8f",[[1,"dso-badge",{status:[1]}]]],["p-19de4cc7",[[1,"dso-banner",{status:[1]}]]],["p-12f7e7d7",[[1,"dso-dropdown-menu",{open:[1540],dropdownAlign:[1,"dropdown-align"],checkable:[4]}]]],["p-be5682cc",[[1,"dso-highlight-box",{yellow:[4],border:[4],white:[4],dropShadow:[4,"drop-shadow"],step:[2]}]]],["p-a52d3623",[[0,"dso-ozon-content",{content:[1]},[[0,"click","handleClick"]]]]],["p-262858dd",[[1,"dso-progress-bar",{progress:[2],min:[2],max:[2]}]]],["p-b5b946de",[[1,"dso-progress-indicator",{label:[1],size:[1],block:[4]}]]],["p-759920d0",[[1,"dso-tooltip",{position:[1],for:[1],noArrow:[4,"no-arrow"],stateless:[4],small:[4],active:[1540],hidden:[32],activate:[64],deactivate:[64]},[[0,"click","listenClick"]]]]],["p-5665f1ee",[[1,"dso-info-button",{active:[1540],secondary:[4],label:[1]}]]],["p-affe82e6",[[1,"dso-selectable",{type:[1],identifier:[1],name:[1],value:[1],invalid:[4],describedById:[1,"described-by-id"],disabled:[4],required:[4],checked:[4],indeterminate:[4],infoFixed:[4,"info-fixed"],infoActive:[32]}],[1,"dso-info",{fixed:[516],active:[516]}]]],["p-75233655",[[1,"dso-icon",{icon:[1]}]]]],e)));
1
+ import{p as e,b as o}from"./p-a40eeb32.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((e=>o([["p-08427682",[[1,"dso-map-base-layers",{baseLayers:[16],selectedBaseLayer:[1040]}]]],["p-e7700d9e",[[1,"dso-map-overlays",{overlays:[16],checkedOverlays:[1040]}]]],["p-984551a8",[[1,"dso-toggletip",{label:[1],position:[1],small:[4],secondary:[4],active:[32]}]]],["p-e814d644",[[1,"dso-tree-view",{collection:[16]}]]],["p-fd5e24c9",[[1,"dso-date-picker",{name:[1],identifier:[1],disabled:[516],role:[1],direction:[1],required:[4],dsoAutofocus:[4,"dso-autofocus"],value:[1537],min:[1],max:[1],activeFocus:[32],focusedDay:[32],open:[32],setFocus:[64],show:[64],hide:[64]},[[6,"click","handleDocumentClick"]]]]],["p-b07991b9",[[1,"dso-helpcenter-panel",{label:[1],url:[1],visibility:[32],isOpen:[32],slideState:[32],loadIframe:[32]}]]],["p-0a08ac9f",[[1,"dso-label",{compact:[4],removable:[4],status:[1],hover:[32]}]]],["p-e4269e02",[[1,"dso-map-controls",{open:[1540],disableZoom:[1,"disable-zoom"],hideContent:[32]}]]],["p-83f166b3",[[1,"dso-alert",{status:[1],roleAlert:[4,"role-alert"]}]]],["p-2e7d535c",[[1,"dso-attachments-counter",{count:[2]}]]],["p-731a9631",[[6,"dso-autosuggest",{suggestions:[16],suggestOnFocus:[4,"suggest-on-focus"],showSuggestions:[32],selectedSuggestion:[32]},[[4,"click","onDocumentClick"]]]]],["p-c9c1bc8f",[[1,"dso-badge",{status:[1]}]]],["p-19de4cc7",[[1,"dso-banner",{status:[1]}]]],["p-741e96de",[[1,"dso-dropdown-menu",{open:[1540],dropdownAlign:[1,"dropdown-align"],checkable:[4]}]]],["p-be5682cc",[[1,"dso-highlight-box",{yellow:[4],border:[4],white:[4],dropShadow:[4,"drop-shadow"],step:[2]}]]],["p-a52d3623",[[0,"dso-ozon-content",{content:[1]},[[0,"click","handleClick"]]]]],["p-262858dd",[[1,"dso-progress-bar",{progress:[2],min:[2],max:[2]}]]],["p-b5b946de",[[1,"dso-progress-indicator",{label:[1],size:[1],block:[4]}]]],["p-759920d0",[[1,"dso-tooltip",{position:[1],for:[1],noArrow:[4,"no-arrow"],stateless:[4],small:[4],active:[1540],hidden:[32],activate:[64],deactivate:[64]},[[0,"click","listenClick"]]]]],["p-5665f1ee",[[1,"dso-info-button",{active:[1540],secondary:[4],label:[1]}]]],["p-affe82e6",[[1,"dso-selectable",{type:[1],identifier:[1],name:[1],value:[1],invalid:[4],describedById:[1,"described-by-id"],disabled:[4],required:[4],checked:[4],indeterminate:[4],infoFixed:[4,"info-fixed"],infoActive:[32]}],[1,"dso-info",{fixed:[516],active:[516]}]]],["p-75233655",[[1,"dso-icon",{icon:[1]}]]]],e)));
@@ -0,0 +1 @@
1
+ import{r as o,c as l,h as s}from"./p-a40eeb32.js";import{c as r}from"./p-4070c1e5.js";let e=class{constructor(s){o(this,s),this.removeClick=l(this,"removeClick",7)}render(){const o=this.status&&e.statusMap.get(this.status);return s("span",{class:r("dso-label",{[`dso-label-${this.status}`]:this.status,"dso-compact":this.compact&&!this.removable,"dso-hover":this.hover})},s("slot",{name:"symbol"}),o&&s("span",{class:"sr-only"},o,": "),s("slot",null),this.removable&&s("button",{type:"button",onClick:o=>this.removeClick.emit(o),onMouseEnter:()=>this.hover=!0,onMouseLeave:()=>this.hover=!1},s("span",{class:"sr-only"},"Verwijder"),s("dso-icon",{icon:"times"})))}};e.statusMap=new Map([["info","Opmerking"],["success","Gelukt"],["warning","Waarschuwing"],["danger","Fout"]]),e.style=":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{background-color:#f2f2f2;border-radius:4px;color:#191919;display:inline-block;line-height:1.5}.dso-label:not(.dso-label-bright){padding:4px 8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:right;font-size:16px;margin-bottom:-4px;margin-left:8px;margin-right:-4px;margin-top:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label.dso-compact{border:0;padding:0 8px}.dso-label.dso-label-info{background-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{background-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;color:#191919}.dso-label.dso-label-danger{background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;color:#191919;border:1px solid #ccc;padding:3px 7px}";export{e as dso_label}
@@ -0,0 +1 @@
1
+ import{r as t,c as s,h as i,F as e,g as h}from"./p-a40eeb32.js";import{v as o}from"./p-19b890a3.js";function a(t,s,i){var e,h,o,a,n;function r(){var c=Date.now()-a;c<s&&c>=0?e=setTimeout(r,s-c):(e=null,i||(n=t.apply(o,h),o=h=null))}null==s&&(s=100);var c=function(){o=this,h=arguments,a=Date.now();var c=i&&!e;return e||(e=setTimeout(r,s)),c&&(n=t.apply(o,h),o=h=null),n};return c.clear=function(){e&&(clearTimeout(e),e=null)},c.flush=function(){e&&(n=t.apply(o,h),o=h=null,clearTimeout(e),e=null)},c}a.debounce=a;var n=a;let r=class{constructor(i){t(this,i),this.selectEmitter=s(this,"dsoSelect",7),this.changeEmitter=s(this,"dsoChange",7),this.searchEmitter=s(this,"dsoSearch",7),this.suggestions=[],this.suggestOnFocus=!1,this.showSuggestions=!1,this.listboxId=o(),this.inputId=o(),this.labelId=o(),this.debouncedEmitValue=n((t=>this.changeEmitter.emit(t)),200),this.onInput=t=>{if(!(t.target instanceof HTMLInputElement))throw new Error("event.target is not instanceof HTMLInputElement");this.debouncedEmitValue(t.target.value.match(/(\S+)/g)?t.target.value:"")},this.onFocusIn=()=>{this.suggestOnFocus&&this.openSuggestions()},this.onKeyDown=t=>{if(!t.defaultPrevented){switch(t.key){case"ArrowDown":this.showSuggestions?this.selectNextSuggestion():this.openSuggestions("first");break;case"ArrowUp":this.showSuggestions?this.selectPreviousSuggestion():this.openSuggestions("last");break;case"Tab":return void this.closeSuggestions();case"Escape":this.closeSuggestions();break;case"Enter":this.pickSelectedValue();break;default:return}t.preventDefault()}}}suggestionsWatcher(){this.resetSelectedSuggestion(),!this.showSuggestions&&this.suggestions.length>0?this.openSuggestions():this.showSuggestions&&0===this.suggestions.length&&this.closeSuggestions()}onDocumentClick(t){this.showSuggestions&&this.listbox&&t.target instanceof Node&&!this.listbox.contains(t.target)&&this.input!=t.target&&this.closeSuggestions()}connectedCallback(){const t=this.host.querySelector('input[type="text"]');if(!(t instanceof HTMLInputElement))throw new ReferenceError("Mandatory text input not found");if(this.input=t,t.id?this.inputId=t.id:t.id=this.inputId,!this.input.labels||this.input.labels.length<1)throw new ReferenceError("Mandatory label for text input not found");const s=this.input.labels[0];s.id?this.labelId=s.id:s.id=this.labelId,this.input.setAttribute("role","combobox"),this.input.setAttribute("aria-haspopup","listbox"),this.input.setAttribute("aria-owns",this.listboxId),this.input.setAttribute("aria-expanded","false"),this.input.setAttribute("autocomplete","off"),this.input.setAttribute("aria-autocomplete","list"),this.input.setAttribute("aria-activedescendant",""),this.input.addEventListener("input",this.onInput),this.input.addEventListener("keydown",this.onKeyDown),this.input.addEventListener("focusin",this.onFocusIn)}disconnectedCallback(){this.input.removeEventListener("input",this.onInput),this.input.removeEventListener("keydown",this.onKeyDown),this.input.removeEventListener("focusin",this.onFocusIn)}markTerms(t,s){if(!t||!s||0===s.length)return[""];const e=new RegExp(`(${function(t){if("string"!=typeof t)throw new TypeError("Expected a string");return t.replace(/[|\\{}()[\]^$+*?.]/g,"\\$&").replace(/-/g,"\\x2d")}(s[0])})`,"gi");return t.split(e).map((t=>t?e.test(t)?i("mark",null,t):1===s.length?i("span",null,t):this.markTerms(t,s.slice(1)):""))}selectSuggestion(t){this.selectedSuggestion=t,this.input.setAttribute("aria-activedescendant",this.listboxItemId(t))}selectFirstSuggestion(){this.selectedSuggestion=this.suggestions[0],this.selectedSuggestion&&this.input.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}selectLastSuggestion(){this.selectedSuggestion=this.suggestions[this.suggestions.length-1],this.selectedSuggestion&&this.input.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}selectNextSuggestion(){var t;const s=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):-1;this.selectedSuggestion=null!==(t=this.suggestions[s+1])&&void 0!==t?t:this.suggestions[0],this.selectedSuggestion&&this.input.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}selectPreviousSuggestion(){var t;const s=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):0;this.selectedSuggestion=null!==(t=this.suggestions[s-1])&&void 0!==t?t:this.suggestions[this.suggestions.length-1],this.selectedSuggestion&&this.input.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}resetSelectedSuggestion(){this.selectedSuggestion=void 0,this.input.setAttribute("aria-activedescendant","")}openSuggestions(t){this.showSuggestions=this.suggestions.length>0,this.input.setAttribute("aria-expanded",this.showSuggestions.toString()),"first"===t?this.selectFirstSuggestion():"last"===t&&this.selectLastSuggestion()}closeSuggestions(){this.showSuggestions=!1,this.input.setAttribute("aria-expanded","false"),this.selectFirstSuggestion()}pickSelectedValue(){this.selectedSuggestion&&this.showSuggestions?this.selectEmitter.emit(this.selectedSuggestion):this.searchEmitter.emit(this.input.value),this.closeSuggestions()}listboxItemId(t){return`${this.inputId}-${this.suggestions.indexOf(t)+1}`}render(){const t=this.input.value.split(" ").filter((t=>t));return i(e,null,i("slot",null),i("ul",{role:"listbox",id:this.listboxId,"aria-labelledby":this.labelId,ref:t=>this.listbox=t,hidden:!this.showSuggestions},this.showSuggestions?this.suggestions.map((s=>i("li",{role:"option",id:this.listboxItemId(s),key:s.value,onMouseEnter:()=>this.selectSuggestion(s),onMouseLeave:()=>this.resetSelectedSuggestion(),onClick:()=>this.pickSelectedValue(),"aria-selected":(s===this.selectedSuggestion).toString(),"aria-label":s.value},i("span",{class:"value"},this.markTerms(s.value,t)),s.type?i("span",{class:"type"},s.type):void 0))):void 0))}get host(){return h(this)}static get watchers(){return{suggestions:["suggestionsWatcher"]}}};r.style=".sc-dso-autosuggest-h{display:block;position:relative}ul.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-top:2px;padding:4px 0;position:absolute;left:0;right:0;top:100%;z-index:10}ul.sc-dso-autosuggest li.sc-dso-autosuggest{display:flex;justify-content:space-between;padding:4px 18px}li[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#39870c}li[aria-selected=true].sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .type.sc-dso-autosuggest{color:#fff}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest{color:#666}";export{r as dso_autosuggest}
@@ -0,0 +1,5 @@
1
+ import{r as c,h as t,F as e,g as n}from"./p-a40eeb32.js";import{v as o}from"./p-19b890a3.js";
2
+ /*!
3
+ * tabbable 5.2.1
4
+ * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
5
+ */var r=["input","select","textarea","a[href]","button","[tabindex]","audio[controls]","video[controls]",'[contenteditable]:not([contenteditable="false"])',"details>summary:first-of-type","details"].join(","),i="undefined"==typeof Element?function(){}:Element.prototype.matches||Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector,s=function(c){var t=parseInt(c.getAttribute("tabindex"),10);return isNaN(t)?function(c){return"true"===c.contentEditable}(c)?0:"AUDIO"!==c.nodeName&&"VIDEO"!==c.nodeName&&"DETAILS"!==c.nodeName||null!==c.getAttribute("tabindex")?c.tabIndex:0:t},a=function(c,t){return c.tabIndex===t.tabIndex?c.documentOrder-t.documentOrder:c.tabIndex-t.tabIndex},l=function(c){return"INPUT"===c.tagName},u=function(c,t){return!(!function(c,t){return!(t.disabled||function(c){return l(c)&&"hidden"===c.type}(t)||function(c,t){if("hidden"===getComputedStyle(c).visibility)return!0;var e=i.call(c,"details>summary:first-of-type");if(i.call(e?c.parentElement:c,"details:not([open]) *"))return!0;if(t&&"full"!==t){if("non-zero-area"===t){var n=c.getBoundingClientRect();return 0===n.width&&0===n.height}}else for(;c;){if("none"===getComputedStyle(c).display)return!0;c=c.parentElement}return!1}(t,c.displayCheck)||function(c){return"DETAILS"===c.tagName&&Array.prototype.slice.apply(c.children).some((function(c){return"SUMMARY"===c.tagName}))}(t)||function(c){if(l(c)||"SELECT"===c.tagName||"TEXTAREA"===c.tagName||"BUTTON"===c.tagName)for(var t=c.parentElement;t;){if("FIELDSET"===t.tagName&&t.disabled){for(var e=0;e<t.children.length;e++){var n=t.children.item(e);if("LEGEND"===n.tagName)return!n.contains(c)}return!0}t=t.parentElement}return!1}(t))}(c,t)||function(c){return function(c){return l(c)&&"radio"===c.type}(c)&&!function(c){if(!c.name)return!0;var t,e=c.form||c.ownerDocument,n=function(c){return e.querySelectorAll('input[type="radio"][name="'+c+'"]')};if("undefined"!=typeof window&&void 0!==window.CSS&&"function"==typeof window.CSS.escape)t=n(window.CSS.escape(c.name));else try{t=n(c.name)}catch(c){return console.error("Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s",c.message),!1}var o=function(c,t){for(var e=0;e<c.length;e++)if(c[e].checked&&c[e].form===t)return c[e]}(t,c.form);return!o||o===c}(c)}(t)||s(t)<0)},d=function(c,t){var e=[],n=[];return function(c,t,e){var n=Array.prototype.slice.apply(c.querySelectorAll(r));return t&&i.call(c,r)&&n.unshift(c),n.filter(e)}(c,(t=t||{}).includeContainer,u.bind(null,t)).forEach((function(c,t){var o=s(c);0===o?e.push(c):n.push({documentOrder:t,tabIndex:o,node:c})})),n.sort(a).map((function(c){return c.node})).concat(e)};let h=class{constructor(t){c(this,t),this.open=!1,this.dropdownAlign="left",this.checkable=!1,this.focusOutListener=c=>{this.tabbables.includes(c.relatedTarget)||(this.open=!1)},this.keyDownListener=c=>{if(!c.defaultPrevented){switch(c.key){case"ArrowDown":this.tabInPopup(1);break;case"ArrowUp":this.tabInPopup(-1);break;case"Escape":this.escape();break;case" ":c.target instanceof HTMLElement&&c.target.click();break;default:return}c.preventDefault()}},this.escape=()=>{this.button.focus(),this.open=!1}}get button(){const c=this.host.querySelectorAll('button[slot="toggle"]')[0];if(!(c instanceof HTMLButtonElement))throw new ReferenceError("Mandatory toggle button not found");return c}get tabbables(){return d(this.host).filter((c=>c!==this.button))}openWatch(c){c?this.openPopup():this.closePopup()}connectedCallback(){this.button.setAttribute("aria-haspopup","menu"),this.button.setAttribute("aria-expanded","false"),this.button.id||(this.button.id=o()),this.button.addEventListener("click",(()=>{this.open=!this.open}));const c=this.host.querySelector(".dso-dropdown-options");if(null==c)throw new ReferenceError("Dropdown options not found");c.setAttribute("role","menu"),c.setAttribute("aria-labelledby",this.button.id);for(const c of Array.from(this.host.getElementsByTagName("ul"))){c.setAttribute("role","none");for(const t of Array.from(c.getElementsByTagName("li")))t.setAttribute("role","none")}this.open&&this.openPopup()}componentDidRender(){this.host.setAttribute("tabindex","-1")}componentWillRender(){for(const c of Array.from(this.host.getElementsByTagName("li")))for(const t of d(c))t.setAttribute("role",this.checkable?"menuitemradio":"menuitem"),this.checkable&&c.classList.contains("dso-checked")?t.setAttribute("aria-checked","true"):t.removeAttribute("aria-checked")}openPopup(){this.host.addEventListener("keydown",this.keyDownListener),this.host.addEventListener("focusout",this.focusOutListener),this.button.setAttribute("aria-expanded","true"),this.tabbables.forEach((c=>c.addEventListener("click",this.escape)))}closePopup(){this.host.removeEventListener("keydown",this.keyDownListener),this.host.removeEventListener("focusout",this.focusOutListener),this.button.setAttribute("aria-expanded","false"),this.tabbables.forEach((c=>c.removeEventListener("click",this.escape)))}tabInPopup(c){const t=this.tabbables;let e=t.findIndex((c=>c===document.activeElement))+c;e>=t.length?e=0:e<0&&(e=t.length-1),t[e].focus()}render(){return t(e,null,t("slot",{name:"toggle"}),t("div",{hidden:!this.open},t("slot",null)))}get host(){return n(this)}static get watchers(){return{open:["openWatch"]}}};h.style=":host(:focus){outline:none}:host{--di-check-wit:url(\"data:image/svg+xml,%3csvg id='check' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M10.11%2c18%2c5.29%2c13.31A.92.92%2c0%2c0%2c1%2c5.3%2c12a1%2c1%2c0%2c0%2c1%2c1.41%2c0l3.4%2c3.3%2c7.18-7a1%2c1%2c0%2c0%2c1%2c1.41%2c0%2c.92.92%2c0%2c0%2c1%2c0%2c1.35Z'/%3e %3c/svg%3e\");--di-chevron-down:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-wit:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-up:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-wit:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");display:inline-block;position:relative}";export{h as dso_dropdown_menu}
@@ -1 +1 @@
1
- import{r as t,h as s,F as i,g as o}from"./p-a40eeb32.js";let h=class{constructor(s){t(this,s),this.active=!1,this.label="Toelichting",this.position="right",this.click=()=>{this.active?this.close():this.open()},this.open=()=>{this.active=!0,this.host.addEventListener("keydown",this.keyDownListener),this.host.addEventListener("focusout",this.focusOutListener)},this.close=()=>{this.host.removeEventListener("focusout",this.focusOutListener),this.host.removeEventListener("keydown",this.keyDownListener),this.active=!1},this.focusOutListener=t=>{this.host.contains(t.relatedTarget)||this.close()},this.keyDownListener=t=>{t.defaultPrevented||"Escape"!=t.key||(this.close(),this.button.focus(),t.preventDefault())}}componentDidRender(){var t,s,i;const o=null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelector("dso-info-button");if(!o)throw Error("dso-info-button not found");this.infoButton=o;const h=null===(i=null===(s=this.infoButton)||void 0===s?void 0:s.shadowRoot)||void 0===i?void 0:i.querySelector("button");if(!h)throw Error("button not found");this.button=h}render(){return s(i,null,s("dso-info-button",{id:"toggle",onClick:this.click,label:this.label,active:this.active,secondary:this.secondary}),s("dso-tooltip",{stateless:!0,for:"toggle",active:this.active,position:this.position,small:this.small},s("slot",null)))}get host(){return o(this)}};h.style="*,*::after,*::before{box-sizing:border-box}";export{h as dso_toggletip}
1
+ import{r as t,h as s,F as i,g as o}from"./p-a40eeb32.js";let h=class{constructor(s){t(this,s),this.active=!1,this.label="Toelichting",this.position="right",this.click=()=>{this.active?this.close():this.open()},this.open=()=>{this.active=!0,this.host.addEventListener("keydown",this.keyDownListener),this.host.addEventListener("focusout",this.focusOutListener)},this.close=()=>{this.host.removeEventListener("focusout",this.focusOutListener),this.host.removeEventListener("keydown",this.keyDownListener),this.active=!1},this.focusOutListener=t=>{this.host.contains(t.relatedTarget)||this.close()},this.keyDownListener=t=>{t.defaultPrevented||"Escape"!=t.key||(this.close(),this.button.focus(),t.preventDefault())}}componentDidRender(){var t,s,i;const o=null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelector("dso-info-button");if(!o)throw Error("dso-info-button not found");this.infoButton=o;const h=null===(i=null===(s=this.infoButton)||void 0===s?void 0:s.shadowRoot)||void 0===i?void 0:i.querySelector("button");if(!h)throw Error("button not found");this.button=h,this.host.setAttribute("tabindex","-1")}render(){return s(i,null,s("dso-info-button",{id:"toggle",onClick:this.click,label:this.label,active:this.active,secondary:this.secondary}),s("dso-tooltip",{stateless:!0,for:"toggle",active:this.active,position:this.position,small:this.small},s("slot",null)))}get host(){return o(this)}};h.style="*,*::after,*::before{box-sizing:border-box}:host(:focus){outline:none}";export{h as dso_toggletip}
@@ -0,0 +1 @@
1
+ import{h as e,F as t,r as o,c as n}from"./p-a40eeb32.js";import{c as r}from"./p-4070c1e5.js";const i=({owner:o,ancestors:n,item:s,index:a,level:l,setSize:c})=>{var d,u,v;return e("li",{key:s.id,class:r("tree-item",{"has-child":s.hasItems}),role:"none"},e("div",{class:"tree-branch-control"},s.hasItems?e("div",{onClick:e=>o.itemClick(e,n,s)},e("dso-icon",{icon:s.open?"chevron-down":"chevron-right"})):e("dso-icon",null)),e("p",{class:r("tree-content",{active:s.active},{selected:s.selected}),tabindex:1===l&&0===a?0:-1,role:"treeitem","aria-expanded":s.hasItems?""+(!!s.open&&!!(null===(d=s.items)||void 0===d?void 0:d.length)):void 0,"aria-current":s.active?"true":void 0,"aria-level":l,"aria-setsize":c,"aria-posinset":a+1,"aria-busy":s.loading?"true":void 0,onClick:e=>o.itemClick(e,n,s)},s.selected&&e("span",{class:"sr-only"},"Resultaat: "),s.href?e("a",{href:s.href,tabindex:"-1"},s.label):e("span",null,s.label),null===(u=s.icons)||void 0===u?void 0:u.map((t=>e("dso-icon",{icon:t.icon,title:t.label})))),s.open&&e(t,null,s.hasItems&&!s.items&&s.loading?e("dso-progress-indicator",{size:"small",label:"Resultaten laden: een moment geduld alstublieft."}):e("ul",{role:"group"},null===(v=s.items)||void 0===v?void 0:v.map(((t,r,a)=>e(i,{owner:o,ancestors:[...n,s],item:t,index:r,level:l+1,setSize:a.length}))))))};let s=class{constructor(e){o(this,e),this.openItem=n(this,"openItem",7),this.closeItem=n(this,"closeItem",7),this.clickItem=n(this,"clickItem",7),this.keyDownListener=e=>{if(e.defaultPrevented)return;const t=e.composedPath().find((e=>e instanceof HTMLElement&&"dso-tree"===e.className));if(e.target instanceof HTMLParagraphElement&&t instanceof HTMLElement){switch(e.key){case"ArrowDown":s.moveFocus(t,e.target,"next");break;case"ArrowUp":s.moveFocus(t,e.target,"previous");break;case"ArrowRight":s.expandItemOrFocusChild(t,e.target);break;case"ArrowLeft":s.collapseItemOrFocusParent(t,e.target);break;case"End":s.moveFocus(t,e.target,"last");break;case"Home":s.moveFocus(t,e.target,"first");break;case"Enter":case" ":e.target.click();break;default:if(1===(o=e.key).length&&o.match(/\S/)&&s.setFocusByFirstCharacter(t,e.target,e.key,e.shiftKey))break;return}var o;e.preventDefault()}},this.itemClick=(e,t,o)=>{if(!(e.target instanceof HTMLElement))return;const n=e.target.closest(".tree-content");if(n){const r=e.composedPath().find((e=>e instanceof HTMLElement&&"dso-tree"===e.className));if(!(n instanceof HTMLParagraphElement&&r instanceof HTMLElement))return;return s.setFocus(r,n),void this.clickItem.emit({path:[...t,o],originalEvent:e})}o.open?this.closeItem.emit([...t,o]):this.openItem.emit([...t,o])}}static setFocus(e,t){t&&(Array.from(e.querySelectorAll("p")).filter((e=>0===e.tabIndex)).forEach((e=>e.tabIndex=-1)),t.tabIndex=0,t.focus())}static moveFocus(e,t,o){const n=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));let r=0;switch(o){case"first":r=0;break;case"previous":r=n.indexOf(t)-1;break;case"next":r=n.indexOf(t)+1;break;case"last":r=n.length-1}s.setFocus(e,n[r])}static expandItemOrFocusChild(e,t){var o;if("true"===(null==t?void 0:t.getAttribute("aria-expanded")))s.moveFocus(e,t,"next");else{const e=null===(o=t.previousElementSibling)||void 0===o?void 0:o.firstElementChild;e instanceof HTMLElement&&e.click()}}static collapseItemOrFocusParent(e,t){var o,n,r;if("true"===(null==t?void 0:t.getAttribute("aria-expanded"))){const e=null===(o=t.previousElementSibling)||void 0===o?void 0:o.firstElementChild;e instanceof HTMLElement&&e.click()}else{const o=null===(r=null===(n=null==t?void 0:t.parentElement)||void 0===n?void 0:n.parentElement)||void 0===r?void 0:r.previousElementSibling;o instanceof HTMLElement&&s.setFocus(e,o)}}static setFocusByFirstCharacter(e,t,o,n){const r=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));n&&r.reverse();const i=r.indexOf(t);o=o.toLowerCase();let a=r.find(((e,t)=>{var n;return t>i&&(null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase().startsWith(o))}));return a||(a=r.find(((e,t)=>{var n;return t<i&&(null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase().startsWith(o))}))),!!a&&(s.setFocus(e,a),!0)}render(){var t;return e("div",{id:"tree",class:"dso-tree",onKeyDown:e=>this.keyDownListener(e)},e("ul",{role:"tree","aria-label":"Objectenboom"},null===(t=this.collection)||void 0===t?void 0:t.map(((t,o)=>e(i,{owner:this,ancestors:[],item:t,index:o,level:1,setSize:this.collection.length})))))}};s.style=":host ul{list-style-type:none}:host ul[role=tree]{padding-left:0}:host li[role=treeitem]>ul{padding-left:1.5em}:host .tree-branch-control{cursor:pointer;display:inline-block}:host .tree-content{cursor:pointer;display:inline-block;margin:8px 0}:host .tree-content.active{font-weight:700}:host .tree-content.active:hover{text-decoration:underline}:host .tree-content.active a{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 a,:host .tree-content a:visited{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 dso-icon{font-size:0.75em;margin-left:0.5em;vertical-align:text-bottom}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";export{s as dso_tree_view}
@@ -0,0 +1 @@
1
+ import{h as e,r as t,c as i,H as s,g as a}from"./p-a40eeb32.js";import{c as o}from"./p-7b37bd52.js";var d;function n(e){if(!e)return;const t=e.split("-");return 3===t.length&&4===t[2].length?function(e,t,i){var s=parseInt(i,10),a=parseInt(t,10),o=parseInt(e,10);if(Number.isInteger(o)&&Number.isInteger(a)&&Number.isInteger(s)&&a>0&&a<=12&&s>0&&s<=31&&o>0)return new Date(o,a-1,s)}(t[2],t[1],t[0]):void 0}function r(e){return e?`${e.getDate().toString(10).padStart(2,"0")}-${(e.getMonth()+1).toString(10).padStart(2,"0")}-${e.getFullYear().toString(10).padStart(2,"0")}`:""}function l(e,t){return!(!e||!t)&&e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function h(e,t){var i=new Date(e);return i.setDate(i.getDate()+t),i}function c(e,t=d.Monday){var i=new Date(e),s=i.getDay(),a=(s<t?7:0)+s-t;return i.setDate(i.getDate()-a),i}function p(e,t=d.Monday){var i=new Date(e),s=i.getDay(),a=6+(s<t?-7:0)-(s-t);return i.setDate(i.getDate()+a),i}function u(e){return new Date(e.getFullYear(),e.getMonth(),1)}function _(e){return new Date(e.getFullYear(),e.getMonth()+1,0)}function b(e,t){const i=new Date(e);return i.setMonth(t),i}function f(e,t){const i=new Date(e);return i.setFullYear(t),i}function g(e,t,i){return m(e,t,i)===e}function m(e,t,i){const s=e.getTime();return t&&t instanceof Date&&s<t.getTime()?t:i&&i instanceof Date&&s>i.getTime()?i:e}!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"}(d||(d={}));const x=({focusedDay:t,today:i,day:s,onDaySelect:a,onKeyboardNavigation:o,focusedDayRef:d,inRange:n})=>{const h=l(s,i),c=l(s,t),p=s.getMonth()!==t.getMonth(),u=!n;return e("button",{class:{"dso-date__day":!0,"is-outside":u,"is-disabled":p,"is-today":h},tabIndex:c?0:-1,onClick:function(e){a(e,s)},onKeyDown:o,disabled:u||p,type:"button",ref:e=>{c&&e&&d&&d(e)}},e("span",{"aria-hidden":"true"},s.getDate()),e("span",{class:"dso-date__vhidden"},r(s)))},v=({selectedDate:t,focusedDate:i,labelledById:s,localization:a,firstDayOfWeek:o,min:n,max:r,onDateSelect:b,onKeyboardNavigation:f,focusedDayRef:m,onMouseDown:v,onFocusIn:y})=>{const w=new Date,k=function(e,t=d.Monday){return function(e,t){const i=[];let s=e;for(;!l(s,t);)i.push(s),s=h(s,1);return i.push(s),i}(c(u(e),t),p(_(e),t))}(i,o);return e("table",{class:"dso-date__table",role:"grid","aria-labelledby":s,onFocusin:y,onMouseDown:v},e("thead",null,e("tr",null,(z=o,M=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)),(D=a.dayNames).map(((e,t)=>M(D[(t+z)%D.length])))))),e("tbody",null,function(e){const t=[];for(let i=0;i<e.length;i+=7)t.push(e.slice(i,i+7));return t}(k).map((s=>e("tr",{class:"dso-date__row"},s.map((s=>e("td",{class:"dso-date__cell",role:"gridcell","aria-selected":l(s,t)?"true":void 0,"aria-current":l(s,w)?"date":void 0},e(x,{day:s,today:w,focusedDay:i,inRange:g(s,n,r),onDaySelect:b,onKeyboardNavigation:f,focusedDayRef:m})))))))));var D,z,M},y={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"]},w=/[^0-9\.\/\-]+/g;let k=class{constructor(e){t(this,e),this.dateChange=i(this,"dateChange",7),this.dsoBlur=i(this,"dsoBlur",7),this.dsoKeyUp=i(this,"dsoKeyUp",7),this.dsoKeyDown=i(this,"dsoKeyDown",7),this.dsoFocus=i(this,"dsoFocus",7),this.monthSelectId=o("DsoDateMonth"),this.yearSelectId=o("DsoDateYear"),this.dialogLabelId=o("DsoDateLabel"),this.localization=y,this.firstDayOfWeek=d.Monday,this.activeFocus=!1,this.focusedDay=new Date,this.open=!1,this.name="date",this.disabled=!1,this.direction="right",this.required=!1,this.dsoAutofocus=!1,this.value="",this.enableActiveFocus=()=>{this.activeFocus=!0},this.disableActiveFocus=()=>{this.activeFocus=!1},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleEscKey=e=>{27===e.keyCode&&this.hide()},this.handleBlur=e=>{e.stopPropagation(),this.dsoBlur.emit({component:"dso-date-picker"})},this.handleKeyUp=e=>{e.stopPropagation(),this.dsoKeyUp.emit({component:"dso-date-picker",originalEvent:e})},this.handleKeyDown=e=>{e.stopPropagation(),this.dsoKeyDown.emit({component:"dso-date-picker",originalEvent:e})},this.handleFocus=e=>{e.stopPropagation(),this.dsoFocus.emit({component:"dso-date-picker"})},this.handleTouchStart=e=>{const t=e.changedTouches[0];this.initialTouchX=t.pageX,this.initialTouchY=t.pageY},this.handleTouchMove=e=>{e.preventDefault()},this.handleTouchEnd=e=>{const t=e.changedTouches[0],i=t.pageX-this.initialTouchX,s=t.pageY-this.initialTouchY,a=Math.abs(i)>=70&&Math.abs(s)<=70,o=Math.abs(s)>=70&&Math.abs(i)<=70&&s>0;a?this.addMonths(i<0?1:-1):o&&(this.hide(!1),e.preventDefault()),this.initialTouchY=void 0,this.initialTouchX=void 0},this.handleNextMonthClick=e=>{e.preventDefault(),this.addMonths(1)},this.handlePreviousMonthClick=e=>{e.preventDefault(),this.addMonths(-1)},this.handleFirstFocusableKeydown=e=>{var t;9===e.keyCode&&e.shiftKey&&(null===(t=this.focusedDayNode)||void 0===t||t.focus(),e.preventDefault())},this.handleKeyboardNavigation=e=>{var t;if(9===e.keyCode&&!e.shiftKey)return e.preventDefault(),void(null===(t=this.firstFocusableElement)||void 0===t||t.focus());var i=!0;switch(e.keyCode){case 39:this.addDays(1);break;case 37:this.addDays(-1);break;case 40:this.addDays(7);break;case 38:this.addDays(-7);break;case 33:e.shiftKey?this.addYears(-1):this.addMonths(-1);break;case 34:e.shiftKey?this.addYears(1):this.addMonths(1);break;case 36:this.startOfWeek();break;case 35:this.endOfWeek();break;default:i=!1}i&&(e.preventDefault(),this.enableActiveFocus())},this.handleDaySelect=(e,t)=>{g(t,n(this.min),n(this.max))&&(t.getMonth()===this.focusedDay.getMonth()?(this.setValue(t),this.hide()):this.setFocusedDay(t))},this.handleMonthSelect=e=>{this.setMonth(parseInt(e.target.value,10))},this.handleYearSelect=e=>{this.setYear(parseInt(e.target.value,10))},this.handleInputChange=e=>{this.setValue(e.target.value.replace(w,""))},this.processFocusedDayNode=e=>{this.focusedDayNode=e,this.activeFocus&&this.open&&setTimeout((()=>e.focus()),0)}}handleDocumentClick(e){var t;if(!this.open)return;const i=e.composedPath();for(const e of i)if(e instanceof Node&&(null===(t=this.element.shadowRoot)||void 0===t?void 0:t.contains(e)))return;this.hide(!1)}async setFocus(){var e;return null===(e=this.datePickerInput)||void 0===e?void 0:e.focus()}async show(){this.open=!0,this.setFocusedDay(n(this.value)||new Date),void 0!==this.focusTimeoutId&&clearTimeout(this.focusTimeoutId),this.focusTimeoutId=setTimeout((()=>{var e;return null===(e=this.monthSelectNode)||void 0===e?void 0:e.focus()}),300)}async hide(e=!0){this.open=!1,void 0!==this.focusTimeoutId&&clearTimeout(this.focusTimeoutId),e&&setTimeout((()=>{var e;return null===(e=this.datePickerButton)||void 0===e?void 0:e.focus()}),500)}addDays(e){this.setFocusedDay(h(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(c(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(p(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const t=b(u(this.focusedDay),e),i=_(t),s=b(this.focusedDay,e);this.setFocusedDay(m(s,t,i))}setYear(e){const t=f(u(this.focusedDay),e),i=_(t),s=f(this.focusedDay,e);this.setFocusedDay(m(s,t,i))}setFocusedDay(e){this.focusedDay=m(e,n(this.min),n(this.max))}setValue(e){var t={component:"dso-date-picker",value:"",valueAsDate:void 0};e instanceof Date?t.valueAsDate=e:(t.value=e,t.valueAsDate=n(e)),t.valueAsDate&&(t.value=r(t.valueAsDate)),!t.valueAsDate&&this.required&&(t.error="required"),t.value&&!t.valueAsDate&&(t.error="invalid"),this.value=t.value,this.dateChange.emit(t)}componentDidLoad(){const e=n(this.value);e&&(this.value=r(e)),this.dsoAutofocus&&this.setFocus()}render(){const t=n(this.value),i=t&&r(t),a=(t||this.focusedDay).getFullYear(),o=this.focusedDay.getMonth(),d=this.focusedDay.getFullYear(),l=n(this.min),h=n(this.max),c=null!=l&&l.getMonth()===o&&l.getFullYear()===d,p=null!=h&&h.getMonth()===o&&h.getFullYear()===d;let u=a-10,_=a+10;return l&&(u=Math.max(u,l.getFullYear())),h&&(_=Math.min(_,h.getFullYear())),e(s,null,e("div",{class:"dso-date"},e("div",{class:"dso-date__input-wrapper"},e("input",{class:"dso-date__input",value:this.value,placeholder:this.localization.placeholder,id:this.identifier,disabled:this.disabled,role:this.role,required:!!this.required||void 0,"aria-autocomplete":"none",onInput:this.handleInputChange,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyUp:this.handleKeyUp,onKeyDown:this.handleKeyDown,autoComplete:"off",ref:e=>this.datePickerInput=e}),e("button",{type:"button",class:"dso-date__toggle",onClick:this.toggleOpen,disabled:this.disabled,ref:e=>this.datePickerButton=e},e("span",{class:"dso-date__toggle-icon"},e("dso-icon",{icon:"calendar"})),e("span",{class:"dso-date__vhidden"},this.localization.buttonLabel,i&&e("span",null,", ",this.localization.selectedDateMessage," ",i)))),e("div",{class:{"dso-date__dialog":!0,"is-left":"left"===this.direction,"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",{class:"dso-date__dialog-content",onKeyDown:this.handleEscKey},e("div",{class:"dso-date__vhidden dso-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),e("div",{class:"dso-date__mobile",onFocusin:this.disableActiveFocus},e("label",{class:"dso-date__mobile-heading"},this.localization.calendarHeading),e("button",{class:"dso-date__close",ref:e=>this.firstFocusableElement=e,onKeyDown:this.handleFirstFocusableKeydown,onClick:()=>this.hide(),type:"button"},e("dso-icon",{icon:"times"}),e("span",{class:"dso-date__vhidden"},this.localization.closeLabel))),e("div",{class:"dso-date__header",onFocusin:this.disableActiveFocus},e("div",null,e("h2",{id:this.dialogLabelId,class:"dso-date__vhidden","aria-live":"polite"},this.localization.monthNames[o]," ",this.focusedDay.getFullYear()),e("label",{htmlFor:this.monthSelectId,class:"dso-date__vhidden"},this.localization.monthSelectLabel),e("div",{class:"dso-date__select"},e("select",{id:this.monthSelectId,class:"dso-date__select--month",ref:e=>this.monthSelectNode=e,onChange:this.handleMonthSelect},this.localization.monthNames.map(((t,i)=>e("option",{key:t,value:i,selected:i===o},t)))),e("div",{class:"dso-date__select-label","aria-hidden":"true"},e("span",null,this.localization.monthNamesShort[o]),e("dso-icon",{icon:"chevron-down"}))),e("label",{htmlFor:this.yearSelectId,class:"dso-date__vhidden"},this.localization.yearSelectLabel),e("div",{class:"dso-date__select"},e("select",{id:this.yearSelectId,class:"dso-date__select--year",onChange:this.handleYearSelect},function(e,t){for(var i=[],s=e;s<=t;s++)i.push(s);return i}(u,_).map((t=>e("option",{key:t,selected:t===d},t)))),e("div",{class:"dso-date__select-label","aria-hidden":"true"},e("span",null,this.focusedDay.getFullYear()),e("dso-icon",{icon:"chevron-down"})))),e("div",{class:"dso-date__nav"},e("button",{class:"dso-date__prev",onClick:this.handlePreviousMonthClick,disabled:c,type:"button"},e("dso-icon",{icon:"chevron-left"}),e("span",{class:"dso-date__vhidden"},this.localization.prevMonthLabel)),e("button",{class:"dso-date__next",onClick:this.handleNextMonthClick,disabled:p,type:"button"},e("dso-icon",{icon:"chevron-right"}),e("span",{class:"dso-date__vhidden"},this.localization.nextMonthLabel)))),e(v,{selectedDate:t,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:l,max:h})))))}get element(){return a(this)}};k.style=':host{display:block}.dso-date *,.dso-date *::before,.dso-date *::after{box-sizing:border-box}.dso-date{box-sizing:border-box;color:#191919;display:block;font-family:"Asap", sans-serif;margin:0;position:relative;text-align:left;width:100%}.dso-date__input{display:block;width:100%;height:40px;padding:6px 14px;font-size:16px;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::-moz-placeholder{color:#666;opacity:1}.dso-date__input:-ms-input-placeholder{color:#666}.dso-date__input::-webkit-input-placeholder{color:#666}.dso-date__input::-ms-expand{background-color:transparent;border:0}.dso-date__input:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled],.dso-date__input[readonly],fieldset[disabled] .dso-date__input{background-color:#fff;opacity:1}.dso-date__input[disabled],fieldset[disabled] .dso-date__input{cursor:default}.dso-date__input[disabled]{border-color:#e5e5e5;color:#999}.dso-date__input[readonly]{border-width:1px}.dso-date__input[type=text]{line-height:40px}.dso-date__input[size]{width:auto}.dso-date__toggle{-moz-appearance:none;-webkit-appearance:none;-webkit-user-select:none;align-items:center;appearance:none;background:transparent;border:0;border-radius:0;border-bottom-right-radius:4px;border-top-right-radius:4px;color:#39870c;cursor:pointer;display:flex;height:38px;justify-content:center;padding:0;position:absolute;right:0;transform:translateY(-50%);top:50%;user-select:none;width:38px;z-index:2}.dso-date__toggle:disabled{color:#afcf9d;cursor:pointer}.dso-date__dialog{display:flex;right:0;min-width:320px;opacity:0;position:absolute;top: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:600}@media (max-width: 35.9375em){.dso-date__dialog{background:rgba(25, 25, 25, 0.5);bottom:0;position:fixed;left:0;right:0;top:0;transform:translateZ(0);transform-origin:bottom center}}.dso-date__dialog.is-left{left:auto;right:0;width:auto}.dso-date__dialog.is-active{opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.dso-date__dialog-content{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-left:auto;margin-right:-1px;margin-top:8px;max-width:310px;min-width:290px;padding:16px;position:relative;transform:none;width:100%;z-index:600}@media (max-width: 35.9375em){.dso-date__dialog-content{border:0;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;bottom:0;left:0;margin:0;max-width:none;min-height:26em;opacity:0;padding:0 8% 20px;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 .dso-date__dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}}.dso-date__table{border-collapse:collapse;border-spacing:0;color:#191919;font-size:1rem;font-weight:400;line-height:1.25;min-width:280px;table-layout:fixed;text-align:center;width:100%}.dso-date__table-header{font-size:0.875em;font-weight:600;height:36px;line-height:36px;text-decoration:none;text-transform:uppercase}.dso-date__cell{height:40px;padding:1px;text-align:center;width:40px}.dso-date__day{-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;height:38px;line-height:0;padding:0;position:relative;text-align:center;vertical-align:middle;width:38px;z-index:1}.dso-date__day.is-today{background:transparent;height:36px;box-shadow:0 0 0 1px #39870c;width:36px}.dso-date__day:hover,.dso-date__day:active{background:#39870c;color:#fff}.dso-date__day:focus{background:transparent;box-shadow:0 0 0 2px #275937;color:#191919;height:34px;outline:0;width:34px}[aria-selected=true] .dso-date__day{background:#39870c;color:#fff}[aria-selected=true] .dso-date__day:focus{background:transparent}[aria-selected=true] .dso-date__day:focus span[aria-hidden=true]{background:#39870c;border:1px solid #fff;line-height:32px}.dso-date__day.is-outside{background:#f2f2f2;box-shadow:none;color:#666;cursor:default;pointer-events:none}.dso-date__day.is-disabled{background:#fff;cursor:default}.dso-date__day.is-disabled:hover{color:#666}.dso-date__day span[aria-hidden=true]{border-radius:50%;display:inline-block;height:34px;line-height:34px;width:34px}.dso-date__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px;width:100%}.dso-date__header span{font-size:0.875rem}.dso-date__nav{white-space:nowrap}.dso-date__prev,.dso-date__next{-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;height:32px;justify-content:center;margin-left:8px;padding:0;width:32px}@media (max-width: 35.9375em){.dso-date__prev,.dso-date__next{height:40px;width:40px}}.dso-date__prev:hover,.dso-date__prev:active,.dso-date__next:hover,.dso-date__next:active{background-color:#39870c;color:#fff}.dso-date__prev:focus,.dso-date__next:focus{background:transparent;color:#39870c}.dso-date__prev:disabled,.dso-date__prev:disabled:hover,.dso-date__next:disabled,.dso-date__next:disabled:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d;opacity:1}.dso-date__prev svg,.dso-date__next svg{margin:0 auto}.dso-date__select{display:inline-flex;height:28px;line-height:28px;position:relative}.dso-date__select span{margin-right:4px}.dso-date__select select{color:#275937;cursor:pointer;font-size:1rem;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.dso-date__select select:focus+.dso-date__select-label{box-shadow:0 0 0 2px #275937}.dso-date__select select:disabled{color:#afcf9d}.dso-date__select-label{align-items:center;border-radius:4px;color:#39870c;display:flex;padding:0 4px 0 8px;pointer-events:none;position:relative;width:100%;z-index:1}.dso-date__select-label span{font-size:1.25rem;font-weight:600;line-height:1.25}.dso-date__select-label svg{width:16px;height:16px}.dso-date__mobile{align-items:center;border-bottom:1px solid rgba(0, 0, 0, 0.12);display:flex;font-size:1em;justify-content:space-between;margin-bottom:20px;margin-left:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;width:120%}@media (min-width: 36em){.dso-date__mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-16px;top:-16px;width:auto}}.dso-date__mobile-heading{display:inline-block;font-weight:600;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.dso-date__mobile-heading{display:none}}.dso-date__close{-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;height:32px;justify-content:center;margin-right:-4px;padding:0;width:32px}@media (min-width: 36em){.dso-date__close{margin-right:0;opacity:0}}.dso-date__close:focus{box-shadow:0 0 0 2px #275937;outline:none}@media (min-width: 36em){.dso-date__close:focus{opacity:1}}.dso-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}';export{k as dso_date_picker}
@@ -89,6 +89,7 @@ let Autosuggest = class {
89
89
  registerInstance(this, hostRef);
90
90
  this.selectEmitter = createEvent(this, "dsoSelect", 7);
91
91
  this.changeEmitter = createEvent(this, "dsoChange", 7);
92
+ this.searchEmitter = createEvent(this, "dsoSearch", 7);
92
93
  /**
93
94
  * The suggestions for the value of the slotted input element
94
95
  */
@@ -275,9 +276,12 @@ let Autosuggest = class {
275
276
  this.selectFirstSuggestion();
276
277
  }
277
278
  pickSelectedValue() {
278
- if (this.selectedSuggestion) {
279
+ if (this.selectedSuggestion && this.showSuggestions) {
279
280
  this.selectEmitter.emit(this.selectedSuggestion);
280
281
  }
282
+ else {
283
+ this.searchEmitter.emit(this.input.value);
284
+ }
281
285
  this.closeSuggestions();
282
286
  }
283
287
  listboxItemId(suggestion) {
@@ -474,8 +474,7 @@ let DsoDatePicker = class {
474
474
  };
475
475
  this.handleInputChange = (e) => {
476
476
  const target = e.target;
477
- target.value = target.value.replace(DISALLOWED_CHARACTERS, "");
478
- this.setValue(target.value);
477
+ this.setValue(target.value.replace(DISALLOWED_CHARACTERS, ""));
479
478
  };
480
479
  this.processFocusedDayNode = (element) => {
481
480
  this.focusedDayNode = element;
@@ -581,10 +580,7 @@ let DsoDatePicker = class {
581
580
  event.valueAsDate = parseDutchDate(value);
582
581
  }
583
582
  if (event.valueAsDate) {
584
- event.value = this.value = printDutchDate(event.valueAsDate);
585
- }
586
- else {
587
- this.value = "";
583
+ event.value = printDutchDate(event.valueAsDate);
588
584
  }
589
585
  if (!event.valueAsDate && this.required) {
590
586
  event.error = "required";
@@ -592,9 +588,14 @@ let DsoDatePicker = class {
592
588
  if (event.value && !event.valueAsDate) {
593
589
  event.error = "invalid";
594
590
  }
591
+ this.value = event.value;
595
592
  this.dateChange.emit(event);
596
593
  }
597
594
  componentDidLoad() {
595
+ const valueAsDate = parseDutchDate(this.value);
596
+ if (valueAsDate) {
597
+ this.value = printDutchDate(valueAsDate);
598
+ }
598
599
  if (this.dsoAutofocus) {
599
600
  this.setFocus();
600
601
  }
@@ -621,7 +622,7 @@ let DsoDatePicker = class {
621
622
  if (maxDate) {
622
623
  maxYear = Math.min(maxYear, maxDate.getFullYear());
623
624
  }
624
- return (h(Host, null, h("div", { class: "dso-date" }, h("div", { class: "dso-date__input-wrapper" }, h("input", { class: "dso-date__input", value: formattedDate, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }), h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) }, h("span", { class: "dso-date__toggle-icon" }, h("dso-icon", { icon: "calendar" })), h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { class: {
625
+ return (h(Host, null, h("div", { class: "dso-date" }, h("div", { class: "dso-date__input-wrapper" }, h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }), h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) }, h("span", { class: "dso-date__toggle-icon" }, h("dso-icon", { icon: "calendar" })), h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { class: {
625
626
  "dso-date__dialog": true,
626
627
  "is-left": this.direction === "left",
627
628
  "is-active": this.open,
@@ -226,7 +226,7 @@ var tabbable = function tabbable(el, options) {
226
226
  return tabbableNodes;
227
227
  };
228
228
 
229
- const dropdownMenuCss = ":host{--di-check-wit:url(\"data:image/svg+xml,%3csvg id='check' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M10.11%2c18%2c5.29%2c13.31A.92.92%2c0%2c0%2c1%2c5.3%2c12a1%2c1%2c0%2c0%2c1%2c1.41%2c0l3.4%2c3.3%2c7.18-7a1%2c1%2c0%2c0%2c1%2c1.41%2c0%2c.92.92%2c0%2c0%2c1%2c0%2c1.35Z'/%3e %3c/svg%3e\");--di-chevron-down:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-wit:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-up:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-wit:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");display:inline-block;position:relative}";
229
+ const dropdownMenuCss = ":host(:focus){outline:none}:host{--di-check-wit:url(\"data:image/svg+xml,%3csvg id='check' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M10.11%2c18%2c5.29%2c13.31A.92.92%2c0%2c0%2c1%2c5.3%2c12a1%2c1%2c0%2c0%2c1%2c1.41%2c0l3.4%2c3.3%2c7.18-7a1%2c1%2c0%2c0%2c1%2c1.41%2c0%2c.92.92%2c0%2c0%2c1%2c0%2c1.35Z'/%3e %3c/svg%3e\");--di-chevron-down:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-wit:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-up:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-wit:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");display:inline-block;position:relative}";
230
230
 
231
231
  let DropdownMenu = class {
232
232
  constructor(hostRef) {
@@ -321,6 +321,9 @@ let DropdownMenu = class {
321
321
  this.openPopup();
322
322
  }
323
323
  }
324
+ componentDidRender() {
325
+ this.host.setAttribute("tabindex", "-1");
326
+ }
324
327
  componentWillRender() {
325
328
  for (const li of Array.from(this.host.getElementsByTagName("li"))) {
326
329
  for (const tab of tabbable(li)) {
@@ -10,7 +10,7 @@ let Label = class {
10
10
  }
11
11
  render() {
12
12
  const status = this.status && Label.statusMap.get(this.status);
13
- return (h("span", { class: clsx('dso-label', { [`dso-label-${this.status}`]: this.status, 'dso-compact': this.compact && !this.removable, 'dso-hover': this.hover }) }, h("slot", { name: "symbol" }), status && (h("span", { class: "sr-only" }, status, ": ")), h("slot", null), this.removable && (h("button", { type: "button", onClick: e => this.removeClick.emit(e), title: "Verwijder", onMouseEnter: () => this.hover = true, onMouseLeave: () => this.hover = false }, h("dso-icon", { icon: "times" })))));
13
+ return (h("span", { class: clsx('dso-label', { [`dso-label-${this.status}`]: this.status, 'dso-compact': this.compact && !this.removable, 'dso-hover': this.hover }) }, h("slot", { name: "symbol" }), status && (h("span", { class: "sr-only" }, status, ": ")), h("slot", null), this.removable && (h("button", { type: "button", onClick: e => this.removeClick.emit(e), onMouseEnter: () => this.hover = true, onMouseLeave: () => this.hover = false }, h("span", { class: "sr-only" }, "Verwijder"), h("dso-icon", { icon: "times" })))));
14
14
  }
15
15
  };
16
16
  Label.statusMap = new Map([
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, h, F as Fragment, g as getElement } from './index-61410be2.js';
2
2
 
3
- const toggletipCss = "*,*::after,*::before{box-sizing:border-box}";
3
+ const toggletipCss = "*,*::after,*::before{box-sizing:border-box}:host(:focus){outline:none}";
4
4
 
5
5
  let Toggletip = class {
6
6
  constructor(hostRef) {
@@ -47,6 +47,7 @@ let Toggletip = class {
47
47
  throw Error("button not found");
48
48
  }
49
49
  this.button = button;
50
+ this.host.setAttribute("tabindex", "-1");
50
51
  }
51
52
  render() {
52
53
  return (h(Fragment, null, h("dso-info-button", { id: "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary }), h("dso-tooltip", { stateless: true, for: "toggle", active: this.active, position: this.position, small: this.small }, h("slot", null))));
@@ -3,13 +3,14 @@ import { c as clsx } from './clsx.m-071989db.js';
3
3
 
4
4
  const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize }) => {
5
5
  var _a, _b, _c;
6
- return (h("li", { key: item.reference, class: clsx('tree-item', { 'has-child': item.hasItems }), role: 'none' },
6
+ return (h("li", { key: item.id, class: clsx('tree-item', { 'has-child': item.hasItems }), role: 'none' },
7
7
  h("div", { class: "tree-branch-control" }, item.hasItems
8
8
  ?
9
9
  h("div", { onClick: (e) => owner.itemClick(e, ancestors, item) },
10
10
  h("dso-icon", { icon: item.open ? 'chevron-down' : 'chevron-right' }))
11
11
  : h("dso-icon", null)),
12
- h("p", { class: "tree-content", tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? '' + (!!item.open && !!((_a = item.items) === null || _a === void 0 ? void 0 : _a.length)) : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? 'true' : undefined, onClick: (e) => owner.itemClick(e, ancestors, item) },
12
+ h("p", { class: clsx('tree-content', { 'active': item.active }, { 'selected': item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? '' + (!!item.open && !!((_a = item.items) === null || _a === void 0 ? void 0 : _a.length)) : undefined, "aria-current": item.active ? 'true' : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? 'true' : undefined, onClick: (e) => owner.itemClick(e, ancestors, item) },
13
+ item.selected && h("span", { class: "sr-only" }, "Resultaat: "),
13
14
  item.href
14
15
  ? h("a", { href: item.href, tabindex: "-1" }, item.label)
15
16
  : h("span", null, item.label), (_b = item.icons) === null || _b === void 0 ? void 0 :
@@ -20,7 +21,7 @@ const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize }) => {
20
21
  : h("ul", { role: "group" }, (_c = item.items) === null || _c === void 0 ? void 0 : _c.map((childItem, index, org) => h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: index, level: level + 1, setSize: org.length }))))));
21
22
  };
22
23
 
23
- const treeViewCss = ":host ul{list-style-type:none}:host ul[role=tree]{padding-left:0}:host li[role=treeitem]>ul{padding-left:1.5em}:host .tree-branch-control{cursor:pointer;display:inline-block}:host .tree-content{cursor:pointer;display:inline-block;margin:8px 0}:host .tree-content a,:host .tree-content a:visited{color:#39870c;text-decoration:none}:host .tree-content a:hover,:host .tree-content a:focus{color:#676cb0;text-decoration:underline}:host .tree-content a:active{text-decoration:none}:host .tree-content dso-icon{vertical-align:text-bottom;font-size:0.75em;margin-left:0.5em}*,*::after,*::before{box-sizing:border-box}";
24
+ const treeViewCss = ":host ul{list-style-type:none}:host ul[role=tree]{padding-left:0}:host li[role=treeitem]>ul{padding-left:1.5em}:host .tree-branch-control{cursor:pointer;display:inline-block}:host .tree-content{cursor:pointer;display:inline-block;margin:8px 0}:host .tree-content.active{font-weight:700}:host .tree-content.active:hover{text-decoration:underline}:host .tree-content.active a{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 a,:host .tree-content a:visited{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 dso-icon{font-size:0.75em;margin-left:0.5em;vertical-align:text-bottom}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
24
25
 
25
26
  let TreeView = class {
26
27
  constructor(hostRef) {
@@ -81,7 +82,7 @@ let TreeView = class {
81
82
  return;
82
83
  }
83
84
  TreeView.setFocus(tree, contentElement);
84
- this.clickItem.emit([...ancestors, item]);
85
+ this.clickItem.emit({ path: [...ancestors, item], originalEvent: event });
85
86
  return;
86
87
  }
87
88
  if (item.open) {
@@ -21,6 +21,11 @@ export declare class Autosuggest {
21
21
  * This is emitted debounced for every change for the slotted input type=text element.
22
22
  */
23
23
  changeEmitter: EventEmitter<string>;
24
+ /**
25
+ * Emitted when enter is pressed.
26
+ * The `detail` property of the `CustomEvent` will contain the input text.
27
+ */
28
+ searchEmitter: EventEmitter<string>;
24
29
  host: HTMLElement;
25
30
  showSuggestions: boolean;
26
31
  selectedSuggestion: Suggestion | undefined;
@@ -1,3 +1,3 @@
1
1
  import { Autosuggest } from '@dso-toolkit/sources';
2
2
  import { TemplateResult } from 'lit-html';
3
- export declare function autosuggestTemplate({ suggestions, onSelect, onChange, suggestOnFocus }: Autosuggest, children: TemplateResult): TemplateResult<1>;
3
+ export declare function autosuggestTemplate({ suggestions, onSelect, onChange, onSearch, suggestOnFocus }: Autosuggest, children: TemplateResult): TemplateResult<1>;
@@ -18,6 +18,7 @@ export declare class DropdownMenu {
18
18
  get tabbables(): FocusableElement[];
19
19
  openWatch(open: boolean): void;
20
20
  connectedCallback(): void;
21
+ componentDidRender(): void;
21
22
  componentWillRender(): void;
22
23
  openPopup(): void;
23
24
  closePopup(): void;
@@ -1,13 +1,13 @@
1
1
  import { FunctionalComponent } from '../../stencil-public-runtime';
2
2
  import { TreeViewItem } from '@dso-toolkit/sources';
3
3
  import { TreeView } from './tree-view';
4
- interface TreeViewItemProps<T> {
4
+ interface TreeViewItemProps {
5
5
  owner: TreeView;
6
- ancestors: TreeViewItem<T>[];
7
- item: TreeViewItem<T>;
6
+ ancestors: TreeViewItem[];
7
+ item: TreeViewItem;
8
8
  index: number;
9
9
  level: number;
10
10
  setSize: number;
11
11
  }
12
- export declare const DsoTreeItem: FunctionalComponent<TreeViewItemProps<string>>;
12
+ export declare const DsoTreeItem: FunctionalComponent<TreeViewItemProps>;
13
13
  export {};
@@ -1,32 +1,35 @@
1
- import { ComponentInterface, Event, EventEmitter } from '../../stencil-public-runtime';
2
- import { TreeViewItem } from './tree-view.interfaces';
1
+ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
2
+ import { TreeViewPointerEvent, TreeViewItem } from './tree-view.interfaces';
3
3
  export declare class TreeView implements ComponentInterface {
4
4
  /**
5
5
  * The collection of TreeViewItems
6
6
  */
7
- collection: TreeViewItem<string>[];
7
+ collection: TreeViewItem[];
8
8
  /**
9
9
  * Emitted when a tree view item is opened.
10
10
  * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the
11
11
  * root to the item that is emitting the open event. The consumer of the event is responsible for updating
12
12
  * the TreeView's collection (usually set the open state on the last TreeViewItem in path).
13
13
  */
14
- openItem: EventEmitter<TreeViewItem<string>[]>;
14
+ openItem: EventEmitter<TreeViewItem[]>;
15
15
  /**
16
16
  * Emitted when a tree view item is closed.
17
17
  * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the
18
18
  * root to the item that is emitting the close event. The consumer of the event is responsible for updating
19
19
  * the TreeView's collection (usually set the closed state on the last TreeViewItem in path).
20
20
  */
21
- closeItem: EventEmitter<TreeViewItem<string>[]>;
21
+ closeItem: EventEmitter<TreeViewItem[]>;
22
22
  /**
23
23
  * Emitted when a tree view item is clicked.
24
- * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the
25
- * root to the item that is emitting the clicked event.
24
+ * The `detail` property of the `CustomEvent` will contain an object with:
25
+ * `path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event.
26
+ * `originalEvent` = the original click event.
27
+ * The consumer of the event is responsible for updating the TreeView's collection (usually set the active
28
+ * state on the last TreeViewItem in path and clear all other active item states).
26
29
  */
27
- clickItem: EventEmitter<TreeViewItem<string>[]>;
30
+ clickItem: EventEmitter<TreeViewPointerEvent>;
28
31
  keyDownListener: (event: KeyboardEvent) => void;
29
- itemClick: (event: Event, ancestors: TreeViewItem<string>[], item: TreeViewItem<string>) => void;
32
+ itemClick: (event: MouseEvent, ancestors: TreeViewItem[], item: TreeViewItem) => void;
30
33
  private static setFocus;
31
34
  private static moveFocus;
32
35
  private static expandItemOrFocusChild;
@@ -1,6 +1,6 @@
1
- export interface TreeViewItem<T> {
2
- /** The reference of type T */
3
- reference: T;
1
+ export interface TreeViewItem {
2
+ /** The id of the item */
3
+ id: string;
4
4
  /** The label of the item */
5
5
  label: string;
6
6
  /** The optional href of the item (creates a link) */
@@ -8,11 +8,15 @@ export interface TreeViewItem<T> {
8
8
  /** Indicates whether the item has children */
9
9
  hasItems: boolean;
10
10
  /** The array of child items */
11
- items?: TreeViewItem<T>[];
11
+ items?: TreeViewItem[];
12
12
  /** Indicates whether the node is open and child items are shown */
13
13
  open?: boolean;
14
14
  /** Indicates the node is loading child items */
15
15
  loading?: boolean;
16
+ /** Indicates the node is active, only one item should be active */
17
+ active?: boolean;
18
+ /** Indicates the node is selected, multiple items can be selected */
19
+ selected?: boolean;
16
20
  /** An optional array of icons */
17
21
  icons?: TreeViewItemIcon[];
18
22
  }
@@ -22,3 +26,9 @@ export interface TreeViewItemIcon {
22
26
  /** The label for the icon */
23
27
  label: string;
24
28
  }
29
+ export interface TreeViewPointerEvent {
30
+ /** The path to the clicked item */
31
+ path: TreeViewItem[];
32
+ /** The original pointer event */
33
+ originalEvent: MouseEvent;
34
+ }
@@ -1,2 +1,2 @@
1
1
  import { TreeView } from '@dso-toolkit/sources';
2
- export declare function treeViewTemplate({ collection, onOpenItem, onCloseItem, onClickItem }: TreeView<string>): import("lit-html").TemplateResult<1>;
2
+ export declare function treeViewTemplate({ collection, onOpenItem, onCloseItem, onClickItem }: TreeView): import("lit-html").TemplateResult<1>;
@@ -12,7 +12,7 @@ import { BaseLayer } from "./components/map-base-layers/map-base-layers.interfac
12
12
  import { Overlay } from "./components/map-overlays/map-overlays.interfaces";
13
13
  import { ContentAnchor } from "./components/ozon-content/ozon-content.interfaces";
14
14
  import { SelectableChangeEvent } from "./components/selectable/selectable";
15
- import { TreeViewItem } from "./components/tree-view/tree-view.interfaces";
15
+ import { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
16
16
  export namespace Components {
17
17
  interface DsoAlert {
18
18
  /**
@@ -221,7 +221,7 @@ export namespace Components {
221
221
  /**
222
222
  * The collection of TreeViewItems
223
223
  */
224
- "collection": TreeViewItem<string>[];
224
+ "collection": TreeViewItem[];
225
225
  }
226
226
  }
227
227
  declare global {
@@ -408,6 +408,10 @@ declare namespace LocalJSX {
408
408
  * This is emitted debounced for every change for the slotted input type=text element.
409
409
  */
410
410
  "onDsoChange"?: (event: CustomEvent<string>) => void;
411
+ /**
412
+ * Emitted when enter is pressed. The `detail` property of the `CustomEvent` will contain the input text.
413
+ */
414
+ "onDsoSearch"?: (event: CustomEvent<string>) => void;
411
415
  /**
412
416
  * Emitted when a suggestion is selected. The `detail` property of the `CustomEvent` will contain the selected suggestion.
413
417
  */
@@ -614,19 +618,19 @@ declare namespace LocalJSX {
614
618
  /**
615
619
  * The collection of TreeViewItems
616
620
  */
617
- "collection": TreeViewItem<string>[];
621
+ "collection": TreeViewItem[];
618
622
  /**
619
- * Emitted when a tree view item is clicked. The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the root to the item that is emitting the clicked event.
623
+ * Emitted when a tree view item is clicked. The `detail` property of the `CustomEvent` will contain an object with: `path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event. `originalEvent` = the original click event. The consumer of the event is responsible for updating the TreeView's collection (usually set the active state on the last TreeViewItem in path and clear all other active item states).
620
624
  */
621
- "onClickItem"?: (event: CustomEvent<TreeViewItem<string>[]>) => void;
625
+ "onClickItem"?: (event: CustomEvent<TreeViewPointerEvent>) => void;
622
626
  /**
623
627
  * Emitted when a tree view item is closed. The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the root to the item that is emitting the close event. The consumer of the event is responsible for updating the TreeView's collection (usually set the closed state on the last TreeViewItem in path).
624
628
  */
625
- "onCloseItem"?: (event: CustomEvent<TreeViewItem<string>[]>) => void;
629
+ "onCloseItem"?: (event: CustomEvent<TreeViewItem[]>) => void;
626
630
  /**
627
631
  * Emitted when a tree view item is opened. The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the root to the item that is emitting the open event. The consumer of the event is responsible for updating the TreeView's collection (usually set the open state on the last TreeViewItem in path).
628
632
  */
629
- "onOpenItem"?: (event: CustomEvent<TreeViewItem<string>[]>) => void;
633
+ "onOpenItem"?: (event: CustomEvent<TreeViewItem[]>) => void;
630
634
  }
631
635
  interface IntrinsicElements {
632
636
  "dso-alert": DsoAlert;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dso-toolkit/core",
3
- "version": "32.1.0",
3
+ "version": "33.2.0",
4
4
  "description": "DSO Toolkit Web Components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/custom-elements/index.js",
@@ -18,9 +18,7 @@
18
18
  "clear": "rimraf dist && rimraf loader",
19
19
  "build": "stencil build",
20
20
  "start": "yarn clear && cross-env DSO_ENV=development yarn node scripts/start.js",
21
- "test-storybook-static": "start-server-and-test 'http-server --silent --port 56106 www' http://localhost:56106 'cypress run'",
22
21
  "watch": "yarn clear && cross-env DSO_ENV=development yarn node scripts/watch.js",
23
- "cypress": "yarn clear && cross-env DSO_ENV=cypress yarn node scripts/cypress.js",
24
22
  "build-www": "cross-env DSO_ENV=production yarn bin_build-storybook --static-dir ./dist --output-dir ./www",
25
23
  "bin_stencil": "stencil",
26
24
  "bin_start-storybook": "start-storybook",
@@ -50,20 +48,15 @@
50
48
  "clsx": "1.1.1",
51
49
  "concurrently": "^6.3.0",
52
50
  "cross-env": "^7.0.3",
53
- "cypress": "^8.6.0",
54
- "cypress-axe": "^0.13.0",
55
- "cypress-real-events": "^1.5.1",
56
51
  "debounce": "^1.2.1",
57
52
  "escape-string-regexp": "^5.0.0",
58
53
  "http-proxy-middleware": "^2.0.1",
59
- "http-server": "^13.0.2",
60
54
  "lit-html": "^2.0.1",
61
55
  "mini-svg-data-uri": "1.4.3",
62
56
  "minimist": "^1.2.5",
63
57
  "react": "^17.0.2",
64
58
  "react-dom": "^17.0.2",
65
59
  "rimraf": "^3.0.2",
66
- "start-server-and-test": "^1.14.0",
67
60
  "stencil-inline-svg": "1.1.0",
68
61
  "tabbable": "^5.2.1",
69
62
  "typescript": "4.4.4",
@@ -1,5 +0,0 @@
1
- import{r as c,h as t,F as e,g as n}from"./p-a40eeb32.js";import{v as r}from"./p-19b890a3.js";
2
- /*!
3
- * tabbable 5.2.1
4
- * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
5
- */var o=["input","select","textarea","a[href]","button","[tabindex]","audio[controls]","video[controls]",'[contenteditable]:not([contenteditable="false"])',"details>summary:first-of-type","details"].join(","),i="undefined"==typeof Element?function(){}:Element.prototype.matches||Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector,s=function(c){var t=parseInt(c.getAttribute("tabindex"),10);return isNaN(t)?function(c){return"true"===c.contentEditable}(c)?0:"AUDIO"!==c.nodeName&&"VIDEO"!==c.nodeName&&"DETAILS"!==c.nodeName||null!==c.getAttribute("tabindex")?c.tabIndex:0:t},a=function(c,t){return c.tabIndex===t.tabIndex?c.documentOrder-t.documentOrder:c.tabIndex-t.tabIndex},l=function(c){return"INPUT"===c.tagName},u=function(c,t){return!(!function(c,t){return!(t.disabled||function(c){return l(c)&&"hidden"===c.type}(t)||function(c,t){if("hidden"===getComputedStyle(c).visibility)return!0;var e=i.call(c,"details>summary:first-of-type");if(i.call(e?c.parentElement:c,"details:not([open]) *"))return!0;if(t&&"full"!==t){if("non-zero-area"===t){var n=c.getBoundingClientRect();return 0===n.width&&0===n.height}}else for(;c;){if("none"===getComputedStyle(c).display)return!0;c=c.parentElement}return!1}(t,c.displayCheck)||function(c){return"DETAILS"===c.tagName&&Array.prototype.slice.apply(c.children).some((function(c){return"SUMMARY"===c.tagName}))}(t)||function(c){if(l(c)||"SELECT"===c.tagName||"TEXTAREA"===c.tagName||"BUTTON"===c.tagName)for(var t=c.parentElement;t;){if("FIELDSET"===t.tagName&&t.disabled){for(var e=0;e<t.children.length;e++){var n=t.children.item(e);if("LEGEND"===n.tagName)return!n.contains(c)}return!0}t=t.parentElement}return!1}(t))}(c,t)||function(c){return function(c){return l(c)&&"radio"===c.type}(c)&&!function(c){if(!c.name)return!0;var t,e=c.form||c.ownerDocument,n=function(c){return e.querySelectorAll('input[type="radio"][name="'+c+'"]')};if("undefined"!=typeof window&&void 0!==window.CSS&&"function"==typeof window.CSS.escape)t=n(window.CSS.escape(c.name));else try{t=n(c.name)}catch(c){return console.error("Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s",c.message),!1}var r=function(c,t){for(var e=0;e<c.length;e++)if(c[e].checked&&c[e].form===t)return c[e]}(t,c.form);return!r||r===c}(c)}(t)||s(t)<0)},d=function(c,t){var e=[],n=[];return function(c,t,e){var n=Array.prototype.slice.apply(c.querySelectorAll(o));return t&&i.call(c,o)&&n.unshift(c),n.filter(e)}(c,(t=t||{}).includeContainer,u.bind(null,t)).forEach((function(c,t){var r=s(c);0===r?e.push(c):n.push({documentOrder:t,tabIndex:r,node:c})})),n.sort(a).map((function(c){return c.node})).concat(e)};let h=class{constructor(t){c(this,t),this.open=!1,this.dropdownAlign="left",this.checkable=!1,this.focusOutListener=c=>{this.tabbables.includes(c.relatedTarget)||(this.open=!1)},this.keyDownListener=c=>{if(!c.defaultPrevented){switch(c.key){case"ArrowDown":this.tabInPopup(1);break;case"ArrowUp":this.tabInPopup(-1);break;case"Escape":this.escape();break;case" ":c.target instanceof HTMLElement&&c.target.click();break;default:return}c.preventDefault()}},this.escape=()=>{this.button.focus(),this.open=!1}}get button(){const c=this.host.querySelectorAll('button[slot="toggle"]')[0];if(!(c instanceof HTMLButtonElement))throw new ReferenceError("Mandatory toggle button not found");return c}get tabbables(){return d(this.host).filter((c=>c!==this.button))}openWatch(c){c?this.openPopup():this.closePopup()}connectedCallback(){this.button.setAttribute("aria-haspopup","menu"),this.button.setAttribute("aria-expanded","false"),this.button.id||(this.button.id=r()),this.button.addEventListener("click",(()=>{this.open=!this.open}));const c=this.host.querySelector(".dso-dropdown-options");if(null==c)throw new ReferenceError("Dropdown options not found");c.setAttribute("role","menu"),c.setAttribute("aria-labelledby",this.button.id);for(const c of Array.from(this.host.getElementsByTagName("ul"))){c.setAttribute("role","none");for(const t of Array.from(c.getElementsByTagName("li")))t.setAttribute("role","none")}this.open&&this.openPopup()}componentWillRender(){for(const c of Array.from(this.host.getElementsByTagName("li")))for(const t of d(c))t.setAttribute("role",this.checkable?"menuitemradio":"menuitem"),this.checkable&&c.classList.contains("dso-checked")?t.setAttribute("aria-checked","true"):t.removeAttribute("aria-checked")}openPopup(){this.host.addEventListener("keydown",this.keyDownListener),this.host.addEventListener("focusout",this.focusOutListener),this.button.setAttribute("aria-expanded","true"),this.tabbables.forEach((c=>c.addEventListener("click",this.escape)))}closePopup(){this.host.removeEventListener("keydown",this.keyDownListener),this.host.removeEventListener("focusout",this.focusOutListener),this.button.setAttribute("aria-expanded","false"),this.tabbables.forEach((c=>c.removeEventListener("click",this.escape)))}tabInPopup(c){const t=this.tabbables;let e=t.findIndex((c=>c===document.activeElement))+c;e>=t.length?e=0:e<0&&(e=t.length-1),t[e].focus()}render(){return t(e,null,t("slot",{name:"toggle"}),t("div",{hidden:!this.open},t("slot",null)))}get host(){return n(this)}static get watchers(){return{open:["openWatch"]}}};h.style=":host{--di-check-wit:url(\"data:image/svg+xml,%3csvg id='check' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M10.11%2c18%2c5.29%2c13.31A.92.92%2c0%2c0%2c1%2c5.3%2c12a1%2c1%2c0%2c0%2c1%2c1.41%2c0l3.4%2c3.3%2c7.18-7a1%2c1%2c0%2c0%2c1%2c1.41%2c0%2c.92.92%2c0%2c0%2c1%2c0%2c1.35Z'/%3e %3c/svg%3e\");--di-chevron-down:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-wit:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-up:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-wit:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");display:inline-block;position:relative}";export{h as dso_dropdown_menu}
@@ -1 +0,0 @@
1
- import{r as t,c as s,h as i,F as e,g as o}from"./p-a40eeb32.js";import{v as a}from"./p-19b890a3.js";function h(t,s,i){var e,o,a,h,n;function r(){var c=Date.now()-h;c<s&&c>=0?e=setTimeout(r,s-c):(e=null,i||(n=t.apply(a,o),a=o=null))}null==s&&(s=100);var c=function(){a=this,o=arguments,h=Date.now();var c=i&&!e;return e||(e=setTimeout(r,s)),c&&(n=t.apply(a,o),a=o=null),n};return c.clear=function(){e&&(clearTimeout(e),e=null)},c.flush=function(){e&&(n=t.apply(a,o),a=o=null,clearTimeout(e),e=null)},c}h.debounce=h;var n=h;let r=class{constructor(i){t(this,i),this.selectEmitter=s(this,"dsoSelect",7),this.changeEmitter=s(this,"dsoChange",7),this.suggestions=[],this.suggestOnFocus=!1,this.showSuggestions=!1,this.listboxId=a(),this.inputId=a(),this.labelId=a(),this.debouncedEmitValue=n((t=>this.changeEmitter.emit(t)),200),this.onInput=t=>{if(!(t.target instanceof HTMLInputElement))throw new Error("event.target is not instanceof HTMLInputElement");this.debouncedEmitValue(t.target.value.match(/(\S+)/g)?t.target.value:"")},this.onFocusIn=()=>{this.suggestOnFocus&&this.openSuggestions()},this.onKeyDown=t=>{if(!t.defaultPrevented){switch(t.key){case"ArrowDown":this.showSuggestions?this.selectNextSuggestion():this.openSuggestions("first");break;case"ArrowUp":this.showSuggestions?this.selectPreviousSuggestion():this.openSuggestions("last");break;case"Tab":return void this.closeSuggestions();case"Escape":this.closeSuggestions();break;case"Enter":this.pickSelectedValue();break;default:return}t.preventDefault()}}}suggestionsWatcher(){this.resetSelectedSuggestion(),!this.showSuggestions&&this.suggestions.length>0?this.openSuggestions():this.showSuggestions&&0===this.suggestions.length&&this.closeSuggestions()}onDocumentClick(t){this.showSuggestions&&this.listbox&&t.target instanceof Node&&!this.listbox.contains(t.target)&&this.input!=t.target&&this.closeSuggestions()}connectedCallback(){const t=this.host.querySelector('input[type="text"]');if(!(t instanceof HTMLInputElement))throw new ReferenceError("Mandatory text input not found");if(this.input=t,t.id?this.inputId=t.id:t.id=this.inputId,!this.input.labels||this.input.labels.length<1)throw new ReferenceError("Mandatory label for text input not found");const s=this.input.labels[0];s.id?this.labelId=s.id:s.id=this.labelId,this.input.setAttribute("role","combobox"),this.input.setAttribute("aria-haspopup","listbox"),this.input.setAttribute("aria-owns",this.listboxId),this.input.setAttribute("aria-expanded","false"),this.input.setAttribute("autocomplete","off"),this.input.setAttribute("aria-autocomplete","list"),this.input.setAttribute("aria-activedescendant",""),this.input.addEventListener("input",this.onInput),this.input.addEventListener("keydown",this.onKeyDown),this.input.addEventListener("focusin",this.onFocusIn)}disconnectedCallback(){this.input.removeEventListener("input",this.onInput),this.input.removeEventListener("keydown",this.onKeyDown),this.input.removeEventListener("focusin",this.onFocusIn)}markTerms(t,s){if(!t||!s||0===s.length)return[""];const e=new RegExp(`(${function(t){if("string"!=typeof t)throw new TypeError("Expected a string");return t.replace(/[|\\{}()[\]^$+*?.]/g,"\\$&").replace(/-/g,"\\x2d")}(s[0])})`,"gi");return t.split(e).map((t=>t?e.test(t)?i("mark",null,t):1===s.length?i("span",null,t):this.markTerms(t,s.slice(1)):""))}selectSuggestion(t){this.selectedSuggestion=t,this.input.setAttribute("aria-activedescendant",this.listboxItemId(t))}selectFirstSuggestion(){this.selectedSuggestion=this.suggestions[0],this.selectedSuggestion&&this.input.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}selectLastSuggestion(){this.selectedSuggestion=this.suggestions[this.suggestions.length-1],this.selectedSuggestion&&this.input.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}selectNextSuggestion(){var t;const s=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):-1;this.selectedSuggestion=null!==(t=this.suggestions[s+1])&&void 0!==t?t:this.suggestions[0],this.selectedSuggestion&&this.input.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}selectPreviousSuggestion(){var t;const s=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):0;this.selectedSuggestion=null!==(t=this.suggestions[s-1])&&void 0!==t?t:this.suggestions[this.suggestions.length-1],this.selectedSuggestion&&this.input.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}resetSelectedSuggestion(){this.selectedSuggestion=void 0,this.input.setAttribute("aria-activedescendant","")}openSuggestions(t){this.showSuggestions=this.suggestions.length>0,this.input.setAttribute("aria-expanded",this.showSuggestions.toString()),"first"===t?this.selectFirstSuggestion():"last"===t&&this.selectLastSuggestion()}closeSuggestions(){this.showSuggestions=!1,this.input.setAttribute("aria-expanded","false"),this.selectFirstSuggestion()}pickSelectedValue(){this.selectedSuggestion&&this.selectEmitter.emit(this.selectedSuggestion),this.closeSuggestions()}listboxItemId(t){return`${this.inputId}-${this.suggestions.indexOf(t)+1}`}render(){const t=this.input.value.split(" ").filter((t=>t));return i(e,null,i("slot",null),i("ul",{role:"listbox",id:this.listboxId,"aria-labelledby":this.labelId,ref:t=>this.listbox=t,hidden:!this.showSuggestions},this.showSuggestions?this.suggestions.map((s=>i("li",{role:"option",id:this.listboxItemId(s),key:s.value,onMouseEnter:()=>this.selectSuggestion(s),onMouseLeave:()=>this.resetSelectedSuggestion(),onClick:()=>this.pickSelectedValue(),"aria-selected":(s===this.selectedSuggestion).toString(),"aria-label":s.value},i("span",{class:"value"},this.markTerms(s.value,t)),s.type?i("span",{class:"type"},s.type):void 0))):void 0))}get host(){return o(this)}static get watchers(){return{suggestions:["suggestionsWatcher"]}}};r.style=".sc-dso-autosuggest-h{display:block;position:relative}ul.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-top:2px;padding:4px 0;position:absolute;left:0;right:0;top:100%;z-index:10}ul.sc-dso-autosuggest li.sc-dso-autosuggest{display:flex;justify-content:space-between;padding:4px 18px}li[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#39870c}li[aria-selected=true].sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .type.sc-dso-autosuggest{color:#fff}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest{color:#666}";export{r as dso_autosuggest}