npm - @dso-toolkit/core - Versions diffs - 76.0.0 → 78.0.0 - Mend

@dso-toolkit/core 76.0.0 → 78.0.0

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

Files changed (668) hide show

package/dist/collection/components/dropdown-menu/dropdown-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyC,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACrF,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAoB,QAAQ,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AAEpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAOvD,MAAM,OAAO,YAAY;IALzB;QAME;;;WAGG;QAEH,SAAI,GAAG,KAAK,CAAC;QAEb;;WAEG;QAEH,kBAAa,GAAqB,MAAM,CAAC;QAEzC;;WAEG;QAEH,0BAAqB,GAAG,CAAC,CAAC;QAE1B;;WAEG;QAEH,cAAS,GAAG,KAAK,CAAC;QAgBlB;;WAEG;QAEH,aAAQ,GAAkC,MAAM,CAAC;QAqLzC,qBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,IACE,IAAI,CAAC,IAAI;gBACT,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,EACtG,CAAC;gBACD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;QAwDM,WAAM,GAAG,GAAG,EAAE;YACpB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC,CAAC;KAYH;IA/PC,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC;YACrB,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,aAAa,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC;SAC9F,CAAC,CAAC;IACL,CAAC;IAGD,kBAAkB;;QAChB,MAAA,IAAI,CAAC,MAAM,0CAAE,UAAU,CAAC;YACtB,SAAS,EAAE;gBACT;oBACE,IAAI,EAAE,QAAQ;oBACd,OAAO,EAAE;wBACP,MAAM,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;qBACxC;iBACF;aACF;SACF,CAAC,CAAC;IACL,CAAC;IAGD,aAAa;QACX,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,IAAI,IAAI,CAAC,QAAQ,KAAK,OAAO,EAAE,CAAC;YAC9D,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC;gBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;YAEH,OAAO;QACT,CAAC;QAED,IAAI,OAAO,GAAmB,IAAI,CAAC,IAAI,CAAC;QAExC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC;QAE3C,OAAO,OAAO,IAAI,OAAO,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YAClD,OAAO,GAAG,OAAO,CAAC,UAAU,YAAY,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC;YACrG,IAAI,OAAO,KAAK,IAAI,IAAI,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;gBAC7C,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC;oBACrB,QAAQ,EAAE,OAAO;iBAClB,CAAC,CAAC;gBAEH,OAAO;YACT,CAAC;QACH,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC;YACrB,QAAQ,EAAE,UAAU;SACrB,CAAC,CAAC;IACL,CAAC;IAOD,IAAI,MAAM;QACR,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAEhE,IAAI,CAAC,CAAC,MAAM,YAAY,iBAAiB,CAAC,EAAE,CAAC;YAC3C,MAAM,IAAI,cAAc,CAAC,mCAAmC,CAAC,CAAC;QAChE,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAEO,SAAS,CAAC,UAAmB;QACnC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAEnE,OAAO,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC;IACzF,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;QAClD,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;QACnD,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC;YACpB,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,MAAM,EAAE,CAAC;QAC5B,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QACjE,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,MAAM,IAAI,cAAc,CAAC,4BAA4B,CAAC,CAAC;QACzD,CAAC;QAED,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACrC,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QAExD,KAAK,MAAM,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;YAClE,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YACjC,KAAK,MAAM,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;gBAC3D,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YAClC,CAAC;QACH,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QAED,MAAM,sBAAsB,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAEhF,IAAI,CAAC,CAAC,sBAAsB,YAAY,WAAW,CAAC,EAAE,CAAC;YACrD,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;QAC5E,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,sBAAsB,EAAE;YAC9D,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,aAAa,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC;YAC7F,SAAS,EAAE;gBACT;oBACE,IAAI,EAAE,QAAQ;oBACd,OAAO,EAAE;wBACP,MAAM,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;qBACxC;iBACF;gBACD;oBACE,IAAI,EAAE,iBAAiB;oBACvB,OAAO,EAAE;wBACP,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI;qBACvE;oBACD,OAAO,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS;iBACrC;aACF;SACF,CAAC,CAAC;IACL,CAAC;IAED,kBAAkB;;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAC;QACxB,CAAC;QAED,KAAK,MAAM,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;YAClE,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;gBAC5D,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;gBAExE,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;oBACnB,GAAG,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACpF,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC1E,CAAC;IAGD,OAAO,CAAC,KAAiB;QACvB,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAE1C,IAAI,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,EAAE,CAAC;YAC3C,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACzB,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,EAAE,CAAC;YAC3D,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;IACH,CAAC;IAEO,mBAAmB,CAAC,YAA2B;QACrD,OAAO,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC;IAEO,eAAe,CAAC,YAA2B;QACjD,OAAO,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC;IACrF,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,EAAE,CAAC;IACzB,CAAC;IAYD,eAAe,CAAC,KAAoB;QAClC,IAAI,KAAK,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACzC,OAAO;QACT,CAAC;QAED,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAClB,KAAK,KAAK;gBACR,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;oBACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;gBAC5C,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC3C,CAAC;gBAED,MAAM;YACR,KAAK,WAAW;gBACd,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC1C,MAAM;YAER,KAAK,SAAS;gBACZ,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;gBAC3C,MAAM;YAER,KAAK,QAAQ;gBACX,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,MAAM;YAER,KAAK,GAAG;gBACN,IAAI,KAAK,CAAC,MAAM,YAAY,WAAW,EAAE,CAAC;oBACxC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;gBACvB,CAAC;gBAED,MAAM;YAER;gBACE,OAAO;QACX,CAAC;QAED,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC;IAEO,UAAU,CAAC,SAA6B,EAAE,SAAiB;;QACjE,MAAM,YAAY,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,gBAAgB,EAAE,CAAC,CAAC;QAE1E,IAAI,SAAS,GAAG,YAAY,GAAG,SAAS,CAAC;QACzC,IAAI,SAAS,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC;YAClC,SAAS,GAAG,CAAC,CAAC;QAChB,CAAC;aAAM,IAAI,SAAS,GAAG,CAAC,EAAE,CAAC;YACzB,SAAS,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;QACnC,CAAC;QAED,MAAA,SAAS,CAAC,SAAS,CAAC,0CAAE,KAAK,EAAE,CAAC;IAChC,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB;YACrC,6DAAM,IAAI,EAAC,QAAQ,GAAG;YACtB,4DAAK,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI;gBACrB,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Instance as PopperInstance, Placement, createPopper } from \"@popperjs/core\";\r\nimport { Component, Element, Host, Listen, Prop, Watch, h } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\n\r\n@Component({\r\n tag: \"dso-dropdown-menu\",\r\n styleUrl: \"dropdown-menu.scss\",\r\n shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n /*\r\n Whether the menu is open or closed.\r\n * This attribute is reflected and mutable.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /\r\n Alignment of the dropdown\r\n /\r\n @Prop()\r\n dropdownAlign: \"left\" \| \"right\" = \"left\";\r\n\r\n /\r\n Space between button and dropdown options\r\n /\r\n @Prop()\r\n dropdownOptionsOffset = 2;\r\n\r\n /\r\n Whether the menu is checkable.\r\n /\r\n @Prop()\r\n checkable = false;\r\n\r\n /\r\n Selector for the element the dropdown options should not be overflowing.\r\n /\r\n @Prop()\r\n boundary?: string;\r\n\r\n /\r\n Force placement of dropdown.\r\n \r\n This property overrides `dropdownAlign`.\r\n /\r\n @Prop()\r\n placement?: Placement;\r\n\r\n /\r\n Set position strategy of dropdown options\r\n */\r\n @Prop()\r\n strategy: \"auto\" \| \"absolute\" \| \"fixed\" = \"auto\";\r\n\r\n @Watch(\"placement\")\r\n @Watch(\"dropdownAlign\")\r\n watchPosition() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n this.popper.setOptions({\r\n placement: this.placement \|\| (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n });\r\n }\r\n\r\n @Watch(\"dropdownOptionsOffset\")\r\n watchOptionsOffset() {\r\n this.popper?.setOptions({\r\n modifiers: [\r\n {\r\n name: \"offset\",\r\n options: {\r\n offset: [0, this.dropdownOptionsOffset],\r\n },\r\n },\r\n ],\r\n });\r\n }\r\n\r\n @Watch(\"strategy\")\r\n watchStrategy() {\r\n this.setStrategy();\r\n }\r\n\r\n private setStrategy() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n if (this.strategy === \"absolute\" \|\| this.strategy === \"fixed\") {\r\n this.popper.setOptions({\r\n strategy: this.strategy,\r\n });\r\n\r\n return;\r\n }\r\n\r\n let element: Element \| null = this.host;\r\n\r\n const boundary = this.boundary \|\| document;\r\n\r\n while (element && element.parentNode !== boundary) {\r\n element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n if (element !== null && hasOverflow(element)) {\r\n this.popper.setOptions({\r\n strategy: \"fixed\",\r\n });\r\n\r\n return;\r\n }\r\n }\r\n\r\n this.popper.setOptions({\r\n strategy: \"absolute\",\r\n });\r\n }\r\n\r\n @Element()\r\n host!: HTMLDsoDropdownMenuElement;\r\n\r\n private popper: PopperInstance \| undefined;\r\n\r\n get button(): HTMLButtonElement {\r\n const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n if (!(button instanceof HTMLButtonElement)) {\r\n throw new ReferenceError(\"Mandatory toggle button not found\");\r\n }\r\n\r\n return button;\r\n }\r\n\r\n private tabbables(withButton: boolean): FocusableElement[] {\r\n const tabbables = this.host.isConnected ? tabbable(this.host) : [];\r\n\r\n return withButton ? tabbables : tabbables.filter((element) => element !== this.button);\r\n }\r\n\r\n componentDidLoad() {\r\n this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n this.button.setAttribute(\"aria-expanded\", \"false\");\r\n if (!this.button.id) {\r\n this.button.id = uuidv4();\r\n }\r\n\r\n const options = this.host.querySelector(\".dso-dropdown-options\");\r\n if (!options) {\r\n throw new ReferenceError(\"Dropdown options not found\");\r\n }\r\n\r\n options.setAttribute(\"role\", \"menu\");\r\n options.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n ul.setAttribute(\"role\", \"group\");\r\n for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n li.setAttribute(\"role\", \"none\");\r\n }\r\n }\r\n\r\n if (this.popper) {\r\n return;\r\n }\r\n\r\n const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n }\r\n\r\n this.popper = createPopper(this.button, dropdownOptionsElement, {\r\n placement: this.placement \|\| (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n modifiers: [\r\n {\r\n name: \"offset\",\r\n options: {\r\n offset: [0, this.dropdownOptionsOffset],\r\n },\r\n },\r\n {\r\n name: \"preventOverflow\",\r\n options: {\r\n boundary: this.boundary ? document.querySelector(this.boundary) : null,\r\n },\r\n enabled: this.boundary !== undefined,\r\n },\r\n ],\r\n });\r\n }\r\n\r\n componentDidRender() {\r\n this.setStrategy();\r\n if (this.open) {\r\n this.popper?.update();\r\n }\r\n\r\n for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n for (const tab of this.host.isConnected ? tabbable(li) : []) {\r\n tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n if (this.checkable) {\r\n tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n }\r\n }\r\n }\r\n\r\n this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n }\r\n\r\n @Listen(\"click\", { target: \"window\" })\r\n onClick(event: MouseEvent) {\r\n const composedPath = event.composedPath();\r\n\r\n if (this.isToggleButtonEvent(composedPath)) {\r\n this.open = !this.open;\r\n } else if (this.open && this.isMenuItemEvent(composedPath)) {\r\n this.open = false;\r\n }\r\n }\r\n\r\n private isToggleButtonEvent(composedPath: EventTarget[]) {\r\n return composedPath.includes(this.button);\r\n }\r\n\r\n private isMenuItemEvent(composedPath: EventTarget[]) {\r\n return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.popper?.destroy();\r\n }\r\n\r\n private focusOutListener = (event: FocusEvent) => {\r\n if (\r\n this.open &&\r\n (!(event.relatedTarget instanceof HTMLElement) \|\| !this.tabbables(true).includes(event.relatedTarget))\r\n ) {\r\n this.open = false;\r\n }\r\n };\r\n\r\n @Listen(\"keydown\", { target: \"window\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.defaultPrevented \|\| !this.open) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"Tab\":\r\n if (event.shiftKey) {\r\n this.tabInPopup(this.tabbables(true), -1);\r\n } else {\r\n this.tabInPopup(this.tabbables(true), 1);\r\n }\r\n\r\n break;\r\n case \"ArrowDown\":\r\n this.tabInPopup(this.tabbables(false), 1);\r\n break;\r\n\r\n case \"ArrowUp\":\r\n this.tabInPopup(this.tabbables(false), -1);\r\n break;\r\n\r\n case \"Escape\":\r\n this.escape();\r\n break;\r\n\r\n case \" \":\r\n if (event.target instanceof HTMLElement) {\r\n event.target.click();\r\n }\r\n\r\n break;\r\n\r\n default:\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n }\r\n\r\n private tabInPopup(tabbables: FocusableElement[], direction: number) {\r\n const currentIndex = tabbables.findIndex((e) => e === getActiveElement());\r\n\r\n let nextIndex = currentIndex + direction;\r\n if (nextIndex >= tabbables.length) {\r\n nextIndex = 0;\r\n } else if (nextIndex < 0) {\r\n nextIndex = tabbables.length - 1;\r\n }\r\n\r\n tabbables[nextIndex]?.focus();\r\n }\r\n\r\n private escape = () => {\r\n this.button.focus();\r\n this.open = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <Host onFocusout={this.focusOutListener}>\r\n <slot name=\"toggle\" />\r\n <div hidden={!this.open}>\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset } from \"@floating-ui/dom\";\r\nimport { Component, Element, Host, Listen, Prop, h } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n tag: \"dso-dropdown-menu\",\r\n styleUrl: \"dropdown-menu.scss\",\r\n shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n /*\r\n Whether the menu is open or closed.\r\n * This attribute is reflected and mutable.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /\r\n Alignment of the dropdown\r\n /\r\n @Prop()\r\n dropdownAlign: \"left\" \| \"right\" = \"left\";\r\n\r\n /\r\n Space between button and dropdown options\r\n /\r\n @Prop()\r\n dropdownOptionsOffset = 2;\r\n\r\n /\r\n Whether the menu is checkable.\r\n */\r\n @Prop()\r\n checkable = false;\r\n\r\n @Element()\r\n host!: HTMLDsoDropdownMenuElement;\r\n\r\n private cleanUp: ReturnType<typeof autoUpdate> \| undefined;\r\n\r\n private popoverElement: HTMLDivElement \| undefined;\r\n\r\n get button(): HTMLButtonElement {\r\n const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n if (!(button instanceof HTMLButtonElement)) {\r\n throw new ReferenceError(\"Mandatory toggle button not found\");\r\n }\r\n\r\n return button;\r\n }\r\n\r\n private tabbables(withButton: boolean): FocusableElement[] {\r\n const tabbables = this.host.isConnected ? tabbable(this.host) : [];\r\n\r\n return withButton ? tabbables : tabbables.filter((element) => element !== this.button);\r\n }\r\n\r\n componentDidLoad() {\r\n this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n this.button.setAttribute(\"aria-expanded\", \"false\");\r\n if (!this.button.id) {\r\n this.button.id = uuidv4();\r\n }\r\n\r\n const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n }\r\n\r\n dropdownOptionsElement.setAttribute(\"role\", \"menu\");\r\n dropdownOptionsElement.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n ul.setAttribute(\"role\", \"group\");\r\n for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n li.setAttribute(\"role\", \"none\");\r\n }\r\n }\r\n }\r\n\r\n componentDidRender() {\r\n for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n for (const tab of this.host.isConnected ? tabbable(li) : []) {\r\n tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n if (this.checkable) {\r\n tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n }\r\n }\r\n }\r\n\r\n this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n\r\n if (this.popoverElement && !this.cleanUp) {\r\n const element = this.popoverElement;\r\n this.cleanUp = autoUpdate(this.button, element, () => {\r\n computePosition(this.button, element, {\r\n strategy: \"fixed\",\r\n middleware: [\r\n offset(this.dropdownOptionsOffset),\r\n flip({\r\n padding: this.dropdownOptionsOffset,\r\n }),\r\n ],\r\n placement: this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\",\r\n }).then(({ x, y }) => {\r\n Object.assign(element.style, {\r\n left: `${x}px`,\r\n top: `${y}px`,\r\n });\r\n });\r\n });\r\n }\r\n }\r\n\r\n @Listen(\"click\", { target: \"window\" })\r\n onClick(event: MouseEvent) {\r\n const composedPath = event.composedPath();\r\n\r\n if (this.isToggleButtonEvent(composedPath)) {\r\n this.toggleOptions();\r\n } else if (this.open && this.isMenuItemEvent(composedPath)) {\r\n this.toggleOptions(false);\r\n }\r\n }\r\n\r\n private isToggleButtonEvent(composedPath: EventTarget[]) {\r\n return composedPath.includes(this.button);\r\n }\r\n\r\n private isMenuItemEvent(composedPath: EventTarget[]) {\r\n return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);\r\n }\r\n\r\n private toggleOptions(force?: boolean) {\r\n this.open = force ?? !this.open;\r\n if (this.popoverElement?.isConnected) {\r\n this.popoverElement?.togglePopover(this.open);\r\n }\r\n\r\n if (!this.open && this.cleanUp) {\r\n this.cleanUp();\r\n this.cleanUp = undefined;\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.toggleOptions(false);\r\n }\r\n\r\n private focusOutListener = (event: FocusEvent) => {\r\n if (\r\n this.open &&\r\n (!(event.relatedTarget instanceof HTMLElement) \|\| !this.tabbables(true).includes(event.relatedTarget))\r\n ) {\r\n this.toggleOptions(false);\r\n }\r\n };\r\n\r\n @Listen(\"keydown\", { target: \"window\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.defaultPrevented \|\| !this.open) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"Tab\":\r\n if (event.shiftKey) {\r\n this.tabInPopup(this.tabbables(true), -1);\r\n } else {\r\n this.tabInPopup(this.tabbables(true), 1);\r\n }\r\n\r\n break;\r\n case \"ArrowDown\":\r\n this.tabInPopup(this.tabbables(false), 1);\r\n break;\r\n\r\n case \"ArrowUp\":\r\n this.tabInPopup(this.tabbables(false), -1);\r\n break;\r\n\r\n case \"Escape\":\r\n this.escape();\r\n break;\r\n\r\n case \" \":\r\n if (event.target instanceof HTMLElement) {\r\n event.target.click();\r\n }\r\n\r\n break;\r\n\r\n default:\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n }\r\n\r\n private tabInPopup(tabbables: FocusableElement[], direction: number) {\r\n const currentIndex = tabbables.findIndex((e) => e === getActiveElement());\r\n\r\n let nextIndex = currentIndex + direction;\r\n if (nextIndex >= tabbables.length) {\r\n nextIndex = 0;\r\n } else if (nextIndex < 0) {\r\n nextIndex = tabbables.length - 1;\r\n }\r\n\r\n tabbables[nextIndex]?.focus();\r\n }\r\n\r\n private escape = () => {\r\n this.button.focus();\r\n this.toggleOptions(false);\r\n };\r\n\r\n render() {\r\n return (\r\n <Host onFocusout={this.focusOutListener}>\r\n <slot name=\"toggle\" />\r\n <div popover=\"manual\" ref={(element) => (this.popoverElement = element)}>\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/header/header.js CHANGED Viewed

@@ -124,10 +124,10 @@ export class Header {
                 ["use-drop-down"]: this.showDropDown,
             }), ref: (element) => (this.wrapper = element) }, h("div", { class: "logo-container" }, h("slot", { name: "logo" })), this.showDropDown &&
             this.mainMenu &&
-            (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right", strategy: "absolute", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("menu")), h("dso-icon", { icon: "chevron-down" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", null, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", null, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("li", null, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))))))), !this.showDropDown && (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("a", { href: this.userProfileUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (h("div", { class: "login" }, this.loginUrl ? (h("a", { href: this.loginUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("div", { class: "logout" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("div", { class: "help" }, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))), ((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu &&
+            (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("menu")), h("dso-icon", { icon: "chevron-down" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", null, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", null, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("li", null, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))))))), !this.showDropDown && (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("a", { href: this.userProfileUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (h("div", { class: "login" }, this.loginUrl ? (h("a", { href: this.loginUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("div", { class: "logout" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("div", { class: "help" }, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))), ((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu &&
             this.mainMenu
                 .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)
-                .map(this.MenuItem), this.overflowMenuItems > 0 && (h("li", null, h("dso-dropdown-menu", { placement: "bottom" }, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("overflowMenu")), h("dso-icon", { icon: "chevron-down" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu &&
+                .map(this.MenuItem), this.overflowMenuItems > 0 && (h("li", null, h("dso-dropdown-menu", null, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("overflowMenu")), h("dso-icon", { icon: "chevron-down" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu &&
             this.mainMenu
                 .filter((_, index) => this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems)
                 .map(this.MenuItem)))))), this.userHomeUrl && (h("li", { class: clsx("menu-user-home", { "dso-active": this.userHomeActive }) }, h("a", { href: this.userHomeUrl, "aria-current": this.userHomeActive ? "page" : undefined, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, h("dso-icon", { icon: "user-line" }), this.text("userHome"))))))))))));

package/dist/collection/components/header/header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"header.js","sourceRoot":"","sources":["../../../../src/components/header/header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Fragment, Prop, State, Watch, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { translations } from \"./header.i18n\";\r\nimport { HeaderEvent, HeaderMenuItem, HeaderNavigationType } from \"./header.interfaces\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\n@Component({\r\n tag: \"dso-header\",\r\n styleUrl: \"header.scss\",\r\n shadow: true,\r\n})\r\nexport class Header {\r\n private clickHandler(\r\n e: MouseEvent,\r\n type: HeaderNavigationType,\r\n options?: { menuItem?: HeaderMenuItem; url?: string },\r\n ) {\r\n this.dsoHeaderClick.emit({\r\n originalEvent: e,\r\n isModifiedEvent: isModifiedEvent(e),\r\n type,\r\n menuItem: options?.menuItem,\r\n url: options?.url ?? options?.menuItem?.url,\r\n });\r\n }\r\n\r\n private dropdownElement?: HTMLElement;\r\n\r\n @Element()\r\n host!: HTMLDsoHeaderElement;\r\n\r\n /*\r\n The main menu items.\r\n /\r\n @Prop()\r\n mainMenu?: HeaderMenuItem[] = [];\r\n\r\n /\r\n Either have the dropdown menu appear automatically or always.\r\n /\r\n @Prop()\r\n useDropDownMenu: \"always\" \| \"auto\" = \"auto\";\r\n\r\n /\r\n Used to show the login/logout option. 'none' renders nothing.\r\n /\r\n @Prop()\r\n authStatus: \"none\" \| \"loggedIn\" \| \"loggedOut\" = \"none\";\r\n\r\n /\r\n When the `authStatus` is `loggedOut` a loginUrl can be provided.\r\n * The login button will then render as an anchor.\r\n /\r\n @Prop()\r\n loginUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"logout\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n logoutUrl?: string;\r\n\r\n /\r\n Show a help-button or link in the header\r\n /\r\n @Prop()\r\n showHelp? = false;\r\n\r\n /\r\n The URL to open when the user activates \"help\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n helpUrl?: string;\r\n\r\n /\r\n The name to show when the user is logged in.\r\n /\r\n @Prop()\r\n userProfileName?: string;\r\n\r\n /\r\n The URL to open when the user activates the profile url.\r\n /\r\n @Prop()\r\n userProfileUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeUrl?: string;\r\n\r\n /\r\n Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeActive?: boolean;\r\n\r\n @State()\r\n showDropDown?: boolean;\r\n\r\n @State()\r\n overflowMenuItems = 0;\r\n\r\n @State()\r\n dropdownOptionsOffset = 0;\r\n\r\n /\r\n Emitted when something in the header is selected.\r\n \r\n `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n */\r\n @Event()\r\n dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n @Watch(\"useDropDownMenu\")\r\n setShowDropDown(value: \"always\" \| \"auto\") {\r\n if (value === \"auto\") {\r\n this.setDropDownMenu();\r\n\r\n return;\r\n }\r\n\r\n this.showDropDown = value === \"always\";\r\n }\r\n\r\n private wrapper: HTMLDivElement \| undefined;\r\n\r\n private nav: HTMLUListElement \| undefined;\r\n\r\n private shrinkMenuToFit() {\r\n if (!this.wrapper \|\| !this.nav) {\r\n return;\r\n }\r\n\r\n if (this.wrapper.clientWidth >= this.nav.clientWidth) {\r\n return;\r\n }\r\n\r\n if (this.mainMenu && this.overflowMenuItems >= this.mainMenu.length) {\r\n return;\r\n }\r\n\r\n this.overflowMenuItems++;\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n componentDidRender() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n\r\n return;\r\n }\r\n\r\n window.setTimeout(() => this.shrinkMenuToFit(), 0);\r\n }\r\n\r\n componentDidLoad() {\r\n this.setShowDropDown(this.useDropDownMenu);\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }\r\n\r\n private setOverflowMenu() {\r\n if (this.showDropDown) {\r\n return;\r\n }\r\n\r\n if (this.overflowMenuItems !== 0) {\r\n this.overflowMenuItems = 0;\r\n return;\r\n }\r\n\r\n this.shrinkMenuToFit();\r\n }\r\n\r\n private setDropDownMenu() {\r\n if (this.useDropDownMenu !== \"auto\") {\r\n return;\r\n }\r\n\r\n this.showDropDown = window.innerWidth < minDesktopViewportWidth;\r\n }\r\n\r\n private calculateDropdownOptionsOffset() {\r\n if (!this.dropdownElement) {\r\n return 0;\r\n }\r\n\r\n return (\r\n this.host.clientHeight -\r\n (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n );\r\n }\r\n\r\n private onWindowResize = debounce(() => {\r\n this.dropdownElement?.removeAttribute(\"open\");\r\n this.dropdownElement?.removeAttribute(\"tabindex\");\r\n\r\n this.setDropDownMenu();\r\n this.setOverflowMenu();\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }, 100);\r\n\r\n connectedCallback() {\r\n window.addEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n disconnectedCallback() {\r\n window.removeEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n private MenuItem = (item: HeaderMenuItem) => {\r\n return (\r\n <li class={item.active ? \"dso-active\" : undefined}>\r\n <a\r\n href={item.url}\r\n aria-current={item.active ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem: item })}\r\n >\r\n {item.label}\r\n </a>\r\n </li>\r\n );\r\n };\r\n\r\n render() {\r\n // Prevent 'flickering' when useDropDownMenu = 'always'\r\n if (this.showDropDown === undefined) {\r\n return;\r\n }\r\n\r\n return (\r\n <>\r\n <div\r\n class={clsx(\"dso-header\", {\r\n [\"use-drop-down\"]: this.showDropDown,\r\n })}\r\n ref={(element) => (this.wrapper = element)}\r\n >\r\n <div class=\"logo-container\">\r\n <slot name=\"logo\" />\r\n </div>\r\n {this.showDropDown &&\r\n this.mainMenu &&\r\n (this.mainMenu.length > 0 \|\| this.userHomeUrl \|\| this.authStatus !== \"none\") && (\r\n <div class=\"dropdown\">\r\n <dso-dropdown-menu\r\n dropdown-align=\"right\"\r\n strategy=\"absolute\"\r\n dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n ref={(element) => (this.dropdownElement = element)}\r\n >\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"menu\")}</span>\r\n <dso-icon icon=\"chevron-down\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu.map(this.MenuItem)}\r\n {this.userHomeUrl && (\r\n <li>\r\n <a\r\n href={this.userHomeUrl}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <li>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n <span class=\"profile-label\"> - Mijn profiel</span>\r\n </a>\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <li>\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <li>\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.showHelp && (\r\n <li>\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button type=\"button\" class=\"dso-tertiary\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </div>\r\n )}\r\n {!this.showDropDown && (\r\n <>\r\n <div class=\"dso-header-session\">\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <div class=\"profile\">\r\n <a\r\n href={this.userProfileUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n </a>\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <div class=\"login\">\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <div class=\"logout\">\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.showHelp && (\r\n <div class=\"help\">\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {((this.mainMenu && this.mainMenu.length > 0) \|\| this.userHomeUrl) && (\r\n <nav class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-main\" ref={(element) => (this.nav = element)}>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)\r\n .map(this.MenuItem)}\r\n {this.overflowMenuItems > 0 && (\r\n <li>\r\n <dso-dropdown-menu placement=\"bottom\">\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"overflowMenu\")}</span>\r\n <dso-icon icon=\"chevron-down\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter(\r\n (_, index) =>\r\n this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems,\r\n )\r\n .map(this.MenuItem)}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </li>\r\n )}\r\n {this.userHomeUrl && (\r\n <li class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}>\r\n <a\r\n href={this.userHomeUrl}\r\n aria-current={this.userHomeActive ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n <dso-icon icon=\"user-line\"></dso-icon>\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n </ul>\r\n </nav>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"header.js","sourceRoot":"","sources":["../../../../src/components/header/header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Fragment, Prop, State, Watch, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { translations } from \"./header.i18n\";\r\nimport { HeaderEvent, HeaderMenuItem, HeaderNavigationType } from \"./header.interfaces\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\n@Component({\r\n tag: \"dso-header\",\r\n styleUrl: \"header.scss\",\r\n shadow: true,\r\n})\r\nexport class Header {\r\n private clickHandler(\r\n e: MouseEvent,\r\n type: HeaderNavigationType,\r\n options?: { menuItem?: HeaderMenuItem; url?: string },\r\n ) {\r\n this.dsoHeaderClick.emit({\r\n originalEvent: e,\r\n isModifiedEvent: isModifiedEvent(e),\r\n type,\r\n menuItem: options?.menuItem,\r\n url: options?.url ?? options?.menuItem?.url,\r\n });\r\n }\r\n\r\n private dropdownElement?: HTMLElement;\r\n\r\n @Element()\r\n host!: HTMLDsoHeaderElement;\r\n\r\n /*\r\n The main menu items.\r\n /\r\n @Prop()\r\n mainMenu?: HeaderMenuItem[] = [];\r\n\r\n /\r\n Either have the dropdown menu appear automatically or always.\r\n /\r\n @Prop()\r\n useDropDownMenu: \"always\" \| \"auto\" = \"auto\";\r\n\r\n /\r\n Used to show the login/logout option. 'none' renders nothing.\r\n /\r\n @Prop()\r\n authStatus: \"none\" \| \"loggedIn\" \| \"loggedOut\" = \"none\";\r\n\r\n /\r\n When the `authStatus` is `loggedOut` a loginUrl can be provided.\r\n * The login button will then render as an anchor.\r\n /\r\n @Prop()\r\n loginUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"logout\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n logoutUrl?: string;\r\n\r\n /\r\n Show a help-button or link in the header\r\n /\r\n @Prop()\r\n showHelp? = false;\r\n\r\n /\r\n The URL to open when the user activates \"help\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n helpUrl?: string;\r\n\r\n /\r\n The name to show when the user is logged in.\r\n /\r\n @Prop()\r\n userProfileName?: string;\r\n\r\n /\r\n The URL to open when the user activates the profile url.\r\n /\r\n @Prop()\r\n userProfileUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeUrl?: string;\r\n\r\n /\r\n Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeActive?: boolean;\r\n\r\n @State()\r\n showDropDown?: boolean;\r\n\r\n @State()\r\n overflowMenuItems = 0;\r\n\r\n @State()\r\n dropdownOptionsOffset = 0;\r\n\r\n /\r\n Emitted when something in the header is selected.\r\n \r\n `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n */\r\n @Event()\r\n dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n @Watch(\"useDropDownMenu\")\r\n setShowDropDown(value: \"always\" \| \"auto\") {\r\n if (value === \"auto\") {\r\n this.setDropDownMenu();\r\n\r\n return;\r\n }\r\n\r\n this.showDropDown = value === \"always\";\r\n }\r\n\r\n private wrapper: HTMLDivElement \| undefined;\r\n\r\n private nav: HTMLUListElement \| undefined;\r\n\r\n private shrinkMenuToFit() {\r\n if (!this.wrapper \|\| !this.nav) {\r\n return;\r\n }\r\n\r\n if (this.wrapper.clientWidth >= this.nav.clientWidth) {\r\n return;\r\n }\r\n\r\n if (this.mainMenu && this.overflowMenuItems >= this.mainMenu.length) {\r\n return;\r\n }\r\n\r\n this.overflowMenuItems++;\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n componentDidRender() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n\r\n return;\r\n }\r\n\r\n window.setTimeout(() => this.shrinkMenuToFit(), 0);\r\n }\r\n\r\n componentDidLoad() {\r\n this.setShowDropDown(this.useDropDownMenu);\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }\r\n\r\n private setOverflowMenu() {\r\n if (this.showDropDown) {\r\n return;\r\n }\r\n\r\n if (this.overflowMenuItems !== 0) {\r\n this.overflowMenuItems = 0;\r\n return;\r\n }\r\n\r\n this.shrinkMenuToFit();\r\n }\r\n\r\n private setDropDownMenu() {\r\n if (this.useDropDownMenu !== \"auto\") {\r\n return;\r\n }\r\n\r\n this.showDropDown = window.innerWidth < minDesktopViewportWidth;\r\n }\r\n\r\n private calculateDropdownOptionsOffset() {\r\n if (!this.dropdownElement) {\r\n return 0;\r\n }\r\n\r\n return (\r\n this.host.clientHeight -\r\n (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n );\r\n }\r\n\r\n private onWindowResize = debounce(() => {\r\n this.dropdownElement?.removeAttribute(\"open\");\r\n this.dropdownElement?.removeAttribute(\"tabindex\");\r\n\r\n this.setDropDownMenu();\r\n this.setOverflowMenu();\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }, 100);\r\n\r\n connectedCallback() {\r\n window.addEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n disconnectedCallback() {\r\n window.removeEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n private MenuItem = (item: HeaderMenuItem) => {\r\n return (\r\n <li class={item.active ? \"dso-active\" : undefined}>\r\n <a\r\n href={item.url}\r\n aria-current={item.active ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem: item })}\r\n >\r\n {item.label}\r\n </a>\r\n </li>\r\n );\r\n };\r\n\r\n render() {\r\n // Prevent 'flickering' when useDropDownMenu = 'always'\r\n if (this.showDropDown === undefined) {\r\n return;\r\n }\r\n\r\n return (\r\n <>\r\n <div\r\n class={clsx(\"dso-header\", {\r\n [\"use-drop-down\"]: this.showDropDown,\r\n })}\r\n ref={(element) => (this.wrapper = element)}\r\n >\r\n <div class=\"logo-container\">\r\n <slot name=\"logo\" />\r\n </div>\r\n {this.showDropDown &&\r\n this.mainMenu &&\r\n (this.mainMenu.length > 0 \|\| this.userHomeUrl \|\| this.authStatus !== \"none\") && (\r\n <div class=\"dropdown\">\r\n <dso-dropdown-menu\r\n dropdown-align=\"right\"\r\n dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n ref={(element) => (this.dropdownElement = element)}\r\n >\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"menu\")}</span>\r\n <dso-icon icon=\"chevron-down\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu.map(this.MenuItem)}\r\n {this.userHomeUrl && (\r\n <li>\r\n <a\r\n href={this.userHomeUrl}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <li>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n <span class=\"profile-label\"> - Mijn profiel</span>\r\n </a>\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <li>\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <li>\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.showHelp && (\r\n <li>\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button type=\"button\" class=\"dso-tertiary\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </div>\r\n )}\r\n {!this.showDropDown && (\r\n <>\r\n <div class=\"dso-header-session\">\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <div class=\"profile\">\r\n <a\r\n href={this.userProfileUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n </a>\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <div class=\"login\">\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <div class=\"logout\">\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.showHelp && (\r\n <div class=\"help\">\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {((this.mainMenu && this.mainMenu.length > 0) \|\| this.userHomeUrl) && (\r\n <nav class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-main\" ref={(element) => (this.nav = element)}>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)\r\n .map(this.MenuItem)}\r\n {this.overflowMenuItems > 0 && (\r\n <li>\r\n <dso-dropdown-menu>\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"overflowMenu\")}</span>\r\n <dso-icon icon=\"chevron-down\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter(\r\n (_, index) =>\r\n this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems,\r\n )\r\n .map(this.MenuItem)}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </li>\r\n )}\r\n {this.userHomeUrl && (\r\n <li class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}>\r\n <a\r\n href={this.userHomeUrl}\r\n aria-current={this.userHomeActive ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n <dso-icon icon=\"user-line\"></dso-icon>\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n </ul>\r\n </nav>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/highlight-box/highlight-box.js CHANGED Viewed

@@ -3,7 +3,7 @@ export class HighlightBox {
     render() {
         var _a;
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '1ac773ce6f43d05b3c03be516e6d19a42ba4219c', "has-counter": hasCounter }, hasCounter && h("div", { key: '3d61d88228a27065b1f3b362f5ebef8a95e0faae', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: '794c1bbae6bcf93c86faaa42ec4b8e23da43e1ba', name: "icon" })), h("slot", { key: 'c27f824a00a38cb69710faa1a3ab7dc0cedab683' })));
+        return (h(Host, { key: '86c4c5ff4f81dc76c1dc7ced1ae0f08ac4ab871c', "has-counter": hasCounter }, hasCounter && h("div", { key: '550d9f9ef78cc89764ceebf7c9cff46587a4ec80', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'bc7cbca36525b162059ec21356ab96d1f313722f', name: "icon" })), h("slot", { key: 'd4d43a29f08c330a3e6b59604e8509d2af05a50a' })));
     }
     static get is() { return "dso-highlight-box"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon/icon.js CHANGED Viewed

@@ -216,7 +216,7 @@ export class Icon {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: 'c27aa654d2b1f79399d304699639670466897344', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: 'fb24ae73d46158d43091e9a654b7e2651f428a7c', class: "icon-container", innerHTML: icon.svg });
         }
     }
     static get is() { return "dso-icon"; }

package/dist/collection/components/image-overlay/image-overlay.css CHANGED Viewed

@@ -76,12 +76,12 @@ button::-moz-focus-inner {
 }
 .open:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
-  border-color: var(--_dso-button-secondary-hover-border-color, #39870c);
-  color: var(--_dso-button-secondary-hover-color, #39870c);
+  border-color: var(--_dso-button-secondary-hover-border-color, #275937);
+  color: var(--_dso-button-secondary-hover-color, #275937);
 }
 .open:active {
-  background-color: var(--_dso-button-secondary-active-background-color, #39870c);
-  border-color: var(--_dso-button-secondary-active-border-color, #39870c);
+  background-color: var(--_dso-button-secondary-active-background-color, #275937);
+  border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
 }
 .open[disabled], .open[disabled]:hover {
@@ -251,12 +251,12 @@ button::-moz-focus-inner {
 }
 .close:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
-  border-color: var(--_dso-button-secondary-hover-border-color, #39870c);
-  color: var(--_dso-button-secondary-hover-color, #39870c);
+  border-color: var(--_dso-button-secondary-hover-border-color, #275937);
+  color: var(--_dso-button-secondary-hover-color, #275937);
 }
 .close:active {
-  background-color: var(--_dso-button-secondary-active-background-color, #39870c);
-  border-color: var(--_dso-button-secondary-active-border-color, #39870c);
+  background-color: var(--_dso-button-secondary-active-background-color, #275937);
+  border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
 }
 .close[disabled], .close[disabled]:hover {

package/dist/collection/components/info/info.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class Info {
     render() {
-        return (h(Fragment, { key: '3155979f2b9164ed98c842e27b23ee3960aaadd4' }, h("slot", { key: '056134ca144d2b3ab4268d0d12cfaa94b5a46536' }), !this.fixed && (h("button", { key: '7b466d3bf9fde5780a40197c043b86e746d8326c', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: '43e42fa9309144981d7bf8e96dfc7dc36a16af8d', icon: "times" }), h("span", { key: '19e315ce3c50e0b0d08607f04ac2c5cef4a114b8', class: "sr-only" }, "Sluiten")))));
+        return (h(Fragment, { key: '7c3f9fed7a8ab8dbabe817e1b978e940f26f27f8' }, h("slot", { key: '74dbbbdf2d445f448a7de100196ef0df2305734f' }), !this.fixed && (h("button", { key: '5e702078b32a2d57fafb0758941c57548d7a5851', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: '494887a2f0fa4ab19a2d2b448d9821a001cd9cfb', icon: "times" }), h("span", { key: '052dde259dd0f396097b3c3ead102bb10edda4ff', class: "sr-only" }, "Sluiten")))));
     }
     static get is() { return "dso-info"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/info-button/info-button.js CHANGED Viewed

@@ -20,7 +20,7 @@ export class InfoButton {
         this.dsoToggle.emit({ originalEvent: e, active: this.active });
     }
     render() {
-        return (h(Host, { key: '3fe772b2e9a36bc328ce92d53f7bdf4fe782f4a7', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: '4e46d72a9300c690da0e0f44d5e874befd358c92', type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { key: '2e9c74db3fa22b57c7c29052c25c0607897f1006', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: 'ddac02ec84b4fef5a463c8b162de1b118a633eba', class: "sr-only" }, this.label))));
+        return (h(Host, { key: '0943299e0676d7b9abcb7ce7ccc1bf189e0d492a', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: '062f533cb31e179a279d1b4f6b18374966434196', type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { key: 'a8a717a778cfbb2fe2306c5420e2a97dddc69be7', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: '18c1eb9ca295d6f46f6cd52ce1b379186fe06e53', class: "sr-only" }, this.label))));
     }
     static get is() { return "dso-info-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-range/input-range.js CHANGED Viewed

@@ -10,13 +10,13 @@ export class InputRange {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: '3ce7d089cca0568f1daa0f807954242b345f10d8', id: "description", hidden: true }, this.description)), h("span", { key: 'c94c4286f7d15cdf3988f12ecb74a08e3a076007', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '7b6eddff48fa714b3fe973a6db0d9c81e0c56c5a', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: 'bd3e2d52c55adab4c14bb2b2e77fd03d786a5963', id: "description", hidden: true }, this.description)), h("span", { key: 'f882c7f95664ab0bc13ff5025f9cc29d2d6d7350', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '0618bbb18445fc1284a8ff569fa1d29cbdc36edd', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: 'cefdd673ec000aaf1a5076a21a039e330d4efe0a', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: '6ebeab32da3617ea9c7c1fa192e018fb30ca815e', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
     }
     static get is() { return "dso-input-range"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/label/label.js CHANGED Viewed

@@ -94,13 +94,13 @@ export class Label {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: 'e23db971036b407f72546fdd805a1a80b5758336' }, h("span", { key: '4bd34e3b88bf4413d4211bcee2a5527dbb8cab7a', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
+        return (h(Fragment, { key: '7f5b7dff373ee8c80f77bb57f7b0df84a3fc2c26' }, h("span", { key: 'b2d2ba725922928570ecc4702755853c7adbfd6d', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, h("slot", { key: 'fa65178f639694c0a0945b885e8c2f503abe2c10', name: "symbol" }), h("span", { key: 'aed996383fd7a7daa3bfb632a0a3f46dbdfa992a', class: clsx("dso-label-content", {
+            }) }, h("slot", { key: '3386ac158e8cb260583c8248ac942d7eaa2a865c', name: "symbol" }), h("span", { key: 'ba633553bc2faef796752d952ccdcc5ed0d786c8', class: clsx("dso-label-content", {
                 "dso-truncate": !!this.truncate,
-            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: 'f835dbbbe712e50a9e439974af8a31b96838330c' })), this.removable && (h("button", { key: '0fdaabdc5127fbd43b4de8a3cf23461e7ad5e775', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { key: '4d1ece7fa5b2cc30b4f767665af82497d8617865', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: 'ced6a99d673d93c3f196b798966090f43bf09253', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: 'fa80303b8e0a32f28bb3255d195b9009316d0ee8', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: '29a3c0dd5e3c2cc1f6738c0c090e3136b067d054' })), this.removable && (h("button", { key: '5bd9daa44ce5b74dd96b08f80162dcd4dd93a34b', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { key: '1abd5d4c0c1b70dc7b873682e6a025dc071146d6', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: '217b6c9ed632ffceb90a88c2e6bdca2fb5119563', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: '5dc1852e817a09ba28ef534e3c474a1b7588bc0d', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
     }
     static get is() { return "dso-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legend-item/legend-item.js CHANGED Viewed

@@ -31,7 +31,7 @@ export class LegendItem {
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasOptions = this.optionsSlottedElement !== null;
-        return (h(Host, { key: '1cca644113e31e873435acc05a7d30895bca321a', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '0db7247bbacfb2670281f24197a3408888200c5f', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'fab9bbeb5f66f62b3230534f419f2030c04863b8' }, h("slot", { key: '6e38001352a5440134821206ad316780daa078a6', name: "symbol" }))), h("div", { key: 'e6de6865e69cd8ff622d3890d14b7b4739b9d336' }, h("slot", { key: '7372794008572b2edda2ba83475dfeeb9edabafb' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '8e70eb75ca01f0f2712ab8032741ba6b3c83ec66', position: "bottom" }, this.disabledMessage)), h("div", { key: 'bfe9e011b1a369c4944f0533b266e0be2a1c5334', class: "legend-item-right-content" }, hasOptions && !this.disabled && (h("button", { key: 'e62a2746ebcef8e9a4f49edf5587f7b906cb5ba0', id: "edit-button", type: "button", onClick: () => (this.showOptions = !this.showOptions), class: { active: this.showOptions } }, h("span", { key: '6f535d1d53dcee770462b101095f89002025d5f3', class: "sr-only" }, "Legenda item aanpassen"), h("dso-icon", { key: 'c46b048dd9066168cc160231eba82a8b38c5962b', icon: "more" }))), this.activatable && (h("dso-slide-toggle", { key: 'd46c045ec4d85f0c1313b2fc274f3ce6a81d50b9', accessibleLabel: "Maak actief", checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: 'f64d986d760c2da00372aba529cea1eada29b688', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '3740338b14c565b4e141c0934317f8817bf5180d', name: "options" })))));
+        return (h(Host, { key: '48bb0757b6716a84776a90df42c5cedbe1132e88', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '83a4982542080f2e0eb06d9aea7757b571054b7d', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'f75b796cafd2bb3d20a1f010af0ae6a755dd8cf2' }, h("slot", { key: 'd3e9246d6cb03a005d9709a3e3af9532ff466bfe', name: "symbol" }))), h("div", { key: '37a1d1f933c02d60d14c4f9ef922652dda5b5f82' }, h("slot", { key: '7f8c13ac2371171e1a294419b3999e0f74b94878' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: 'a96f549a20f2571378c8cc5c4dec54c7f99a4287', position: "bottom" }, this.disabledMessage)), h("div", { key: 'd68c0a13bc1e83f6ff7b8ae7b2788c8b8dd4c6de', class: "legend-item-right-content" }, hasOptions && !this.disabled && (h("button", { key: 'd89bd6c87a72b48ff57d5969e4237a30bceb63c5', id: "edit-button", type: "button", onClick: () => (this.showOptions = !this.showOptions), class: { active: this.showOptions } }, h("span", { key: '987354c4a06854060b57648f07eb6825ea246a9a', class: "sr-only" }, "Legenda item aanpassen"), h("dso-icon", { key: '88ab0f66103f3b75edc0d58ccca744abe9ce6fed', icon: "more" }))), this.activatable && (h("dso-slide-toggle", { key: 'f000ae71b5b095b25f833db0bb6f0eed6a7b42c4', accessibleLabel: "Maak actief", checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: '2d7e760c836b57e2fd91ea96cb5b9191549153a0', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '8561f4039c6d1422e5d2cfd4d0e86792e8aa343d', name: "options" })))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list-button/list-button.js CHANGED Viewed

@@ -67,7 +67,7 @@ export class ListButton {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: 'e636dbbe162b7e354a35b9066785a8438311a97d', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '7f17be99f84d62a25e78152c2451f01414bd7d51', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: 'bb75436e5260a214c6b8097565a5f468d94f5078', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: 'e9a884de1d9c894d614ddd7bc94c196f5631ba3e', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '3ea927ca3c4ea061fc81a4e64a7cd0d6ee0d5639', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '4c2e9f4be2d149dc15ee78744a83a347da05e164', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: 'c39c90a86b694f07e7f29503486c0e9cbc7276fa', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: 'b8b9214b19793c75b9acb2c54ebc8cb036c5decc', class: "subcontent" }, h("slot", { key: '0f987bf503a1e8a1a29f57e175de6b10f26a86b1', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'f53c128eaf6d7f936f93eb27bc3eafbefb81c102', class: "dso-input-number" }, this.count > 1 && (h(Fragment, null, h("button", { key: '88461fe51eb4f13b6196b9e4ccee95eb28eff03c', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: '64980976c0a0138efdf67586f29a2cfbcf4a10ce', icon: "minus-circle" }), h("span", { key: 'ce6e1a1dc7c85a86bd444868401f9ab12b13db5b', class: "sr-only" }, "Aantal verlagen")), h("span", { key: '4c626a85ec4841fdcd915a7a8f8ff9a35b66a591', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("button", { key: '2558cd23a5f9e8f630ff788f3de06e69fe12e12e', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: '626ad95cd6e7ae0ce24288365bf43f205f6e8250', icon: "plus-circle" }), h("span", { key: '04caa4933bf6f498c5d8ab009e77cde337cf8132', class: "sr-only" }, "Aantal verhogen"))))));
+        return (h("div", { key: '114dbe1b563e2e4b989b9787508224bc92ea7f88', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '279651ed6b4673607def53ef02a4a47f1eef2100', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '0551e290314ac62131eb37218b6a860ac0e9ae0b', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: '4f50393b5563c3b7fe138d3cc4cd87ae76a7e1ad', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '0f43ee5445c6cf49be5075573d8e012ac2570bf5', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '22d545debc9d2ecc47406e0196087026b865228b', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: '0721a2537944a23835d1e1828a87b75d18e57a31', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '47460c522c5cef35ac7f37afa37c5d7aa9c6b7b7', class: "subcontent" }, h("slot", { key: 'd437d967158345a999293815685951946da55475', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'e03ea8ac5dd31ae4de7ddc4dfc3f4253845202c6', class: "dso-input-number" }, this.count > 1 && (h(Fragment, null, h("button", { key: '7da6ad63789ec3737610d9b574d660da14336c61', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: '00aa64efeb850e8399177f6d263ff63df4d36651', icon: "minus-circle" }), h("span", { key: '03679ff5c361989f4504459ddbd83ae0e9561ea4', class: "sr-only" }, "Aantal verlagen")), h("span", { key: 'b897066acf0f4f502b3a8196826b19acfdd48e8c', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("button", { key: 'd963a7f42b42758bc336db06c6ccd494a0b44528', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: 'f01f985c5035b84326d99d00b222cd82d9ba368c', icon: "plus-circle" }), h("span", { key: '52354f0e31a7cc68601ef50ba5da77ea7f551488', class: "sr-only" }, "Aantal verhogen"))))));
     }
     static get is() { return "dso-list-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/logo/logo.js CHANGED Viewed

@@ -23,7 +23,7 @@ export class Logo {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, { name: this.name }))) : (h(DsoLogo, { name: this.name })), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '33065b8cf5ed4704ddf6983fbc42fbaadfa11b31', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '7c8d35708cfa747568929f24257c3d871f7238ba', class: "logo-ribbon" }, this.ribbon)));
     }
     static get is() { return "dso-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-base-layers/map-base-layers.js CHANGED Viewed

@@ -27,7 +27,7 @@ export class MapBaseLayers {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'b67d1a73d8f8b1b618797866cb98271f373be93a', class: "form-group dso-radios" }, h("legend", { key: 'e7092b9d91ee1a90665217d0679f81729b48e85b', class: "sr-only" }, "Achtergrond"), h("div", { key: '9f7210efd19c9c2ac4f612f2875f9631ad38918b', class: "dso-label-container" }, h("span", { key: '772c1768e5382914cc3b53098298ec48d51cc33f', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'fc949df3a55d35981281165985b7959b0ee63e2a', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: 'acd8cb9bd22f5021d89e656292650098afb58d3c', class: "form-group dso-radios" }, h("legend", { key: '3f6c5f5297323a9d0d1c5195df12b5e162ae3991', class: "sr-only" }, "Achtergrond"), h("div", { key: 'eea63f4a56b1d01fffaab78202718d667533948f', class: "dso-label-container" }, h("span", { key: 'c8aba96d494bea90da43c86c4cc28f0f2ae9f737', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'e6b5b3718321632fe2b9f794dec1dd74b2876620', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     static get is() { return "dso-map-base-layers"; }
     static get encapsulation() { return "shadow"; }