npm - @dso-toolkit/core - Versions diffs - 69.2.1 → 70.0.1 - Mend

@dso-toolkit/core 69.2.1 → 70.0.1

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 (927) hide show

package/dist/esm/dso-dropdown-menu.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-dropdown-menu.entry.js","mappings":"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","names":["uuidv4"],"sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n outline: none;\r\n}\r\n\r\n:host {\r\n @include dropdown-menu.root();\r\n}\r\n","import { createPopper, Placement, Instance as PopperInstance } from \"@popperjs/core\";\r\nimport { h, Component, Element, Host, Prop, Watch, Listen } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\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 /\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"],"version":3}
1	+ {"version":3,"file":"dso-dropdown-menu.entry.js","sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n outline: none;\r\n}\r\n\r\n:host {\r\n @include dropdown-menu.root();\r\n}\r\n","import { createPopper, Placement, Instance as PopperInstance } from \"@popperjs/core\";\r\nimport { h, Component, Element, Host, Prop, Watch, Listen } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\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 /\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"],"names":["uuidv4"],"mappings":"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"}

package/dist/esm/dso-header.entry.js CHANGED Viewed

@@ -1,8 +1,9 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-91149367.js';
-import { c as clsx } from './clsx-297c1ffe.js';
-import { d as debounce } from './index-e112e225.js';
-import { i as i18n } from './i18n-653506dc.js';
-import { i as isModifiedEvent } from './is-modified-event-70db5fa8.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-BzEnSYbR.js';
+import { c as clsx } from './clsx-ChV9xqsO.js';
+import { d as debounce } from './index-CoMRvcY0.js';
+import { i as i18n } from './i18n-D6dst_Em.js';
+import { i as isModifiedEvent } from './is-modified-event-Hgv-pDpy.js';
+import './_commonjsHelpers-BFTU3MAI.js';
 const translations = {
     en: {
@@ -27,7 +28,6 @@ const translations = {
 };
 const headerCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-header{border-block-end:1px solid #ccc;display:flex;flex-wrap:wrap;position:relative}@media screen and (min-width: 768px){.dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down{flex-wrap:nowrap}}.dso-header .dso-nav{border:0}.logo-container{flex:1 1 12.5rem;margin-inline-end:24px;padding-block-end:16px;padding-block-start:16px}.dso-header-session{display:flex;align-items:center;margin-inline-start:auto}.dso-header-session .profile .dso-tertiary,.dso-header-session .login .dso-tertiary,.dso-header-session .logout .dso-tertiary,.dso-header-session .help .dso-tertiary{display:flex;gap:0.5rem;cursor:pointer;border:0;background-color:transparent;padding-inline-start:0;outline-offset:2px;font-family:Asap, sans-serif;color:#39870c;font-size:1rem;font-weight:600;line-height:1.5;text-decoration:none}.dso-header-session .profile .dso-tertiary:hover,.dso-header-session .login .dso-tertiary:hover,.dso-header-session .logout .dso-tertiary:hover,.dso-header-session .help .dso-tertiary:hover{text-decoration:underline}.dso-header-session .profile{margin-inline-start:8px}.dso-header-session .profile+.logout,.dso-header-session .profile~.help{border-inline-start:3px solid #ccc;margin-inline-start:8px;padding-inline-start:8px}.dso-header-session .help a,.dso-header-session .help button{display:flex}.dso-navbar{flex-basis:100%}dso-dropdown-menu>button:not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),dso-dropdown-menu>.dso-primary,dso-dropdown-menu>.dso-secondary,dso-dropdown-menu>.dso-tertiary{position:relative}dso-dropdown-menu>button:not(.dso-primary):not(.dso-secondary):not(.dso-tertiary)::after,dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.dso-tertiary::after{content:\"\";display:inline-block}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.dso-secondary::after{margin-inline-start:8px}dso-dropdown-menu .dso-group-label{color:#999;font-size:0.875em;font-weight:400;margin:0;padding-block:4px 2px;padding-inline:20px;text-transform:uppercase}dso-dropdown-menu ul{margin:0;padding:0}dso-dropdown-menu ul:not(:last-child){border-block-end:1px solid #e5e5e5;margin-block-end:11px;padding-block-end:11px}dso-dropdown-menu .dso-dropdown-options{background-clip:padding-box;background-color:#fff;border-radius:4px;border:1px solid rgba(0, 0, 0, 0.15);box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);font-size:1rem;min-inline-size:160px;padding-block:5px;padding-inline:0;z-index:220}dso-dropdown-menu .dso-dropdown-options li{list-style:none}dso-dropdown-menu .dso-dropdown-options li a:visited{color:#191919}dso-dropdown-menu .dso-dropdown-options li a,dso-dropdown-menu .dso-dropdown-options li button{text-decoration:none}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus-visible,dso-dropdown-menu .dso-dropdown-options li a:active,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus-visible,dso-dropdown-menu .dso-dropdown-options li button:active{text-decoration:underline}dso-dropdown-menu .dso-dropdown-options li a,dso-dropdown-menu .dso-dropdown-options li button{clear:both;color:#191919;display:block;font-weight:400;line-height:1.5;padding-block:3px;padding-inline:20px;text-decoration:none;white-space:nowrap}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus{background-color:#39870c;border-color:#39870c;color:#fff;text-decoration:none}dso-dropdown-menu .dso-dropdown-options li button{background-color:transparent;border:0;border-radius:0;text-align:inherit;inline-size:100%}dso-dropdown-menu button{background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;align-items:center;position:relative}dso-dropdown-menu button dso-icon{inline-size:24px;block-size:24px;margin-inline-start:8px;padding-block-start:2px}dso-dropdown-menu button[aria-expanded=true] dso-icon{transform:rotate(180deg)}dso-dropdown-menu .dso-dropdown-options{border:0;border-radius:0;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4)}@media screen and (min-width: 768px){dso-dropdown-menu .dso-dropdown-options{inline-size:375px}}@media screen and (max-width: 767px){dso-dropdown-menu .dso-dropdown-options{inline-size:100%}}dso-dropdown-menu .dso-dropdown-options ul{margin:0;padding:0;list-style:none}dso-dropdown-menu .dso-dropdown-options ul li a,dso-dropdown-menu .dso-dropdown-options ul li button{display:block;padding:16px;color:#275937;font-size:1.25rem;white-space:pre-wrap;text-decoration:none}dso-dropdown-menu .dso-dropdown-options ul li a:focus-visible,dso-dropdown-menu .dso-dropdown-options ul li button:focus-visible{background-color:#39870c;color:#fff}dso-dropdown-menu .dso-dropdown-options ul li a:hover,dso-dropdown-menu .dso-dropdown-options ul li button:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu .dso-dropdown-options ul li a:visited,dso-dropdown-menu .dso-dropdown-options ul li button:visited{color:#275937}dso-dropdown-menu .dso-dropdown-options ul li button{inline-size:100%;text-align:start}dso-dropdown-menu .dso-dropdown-options ul li button dso-icon{margin-inline-start:8px}dso-dropdown-menu .dso-dropdown-options ul li.dso-active a{font-weight:600}dso-dropdown-menu .dso-dropdown-options ul li+li{border-block-start:1px solid #ccc}.dropdown{margin-inline-start:auto;display:flex;align-items:center}.dropdown dso-dropdown-menu{position:static}.dropdown dso-dropdown-menu .dso-dropdown-options{inset-inline-end:0;inset-block-start:100%;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4)}.dropdown dso-dropdown-menu>button{color:#39870c;font-size:16px;font-weight:600;line-height:normal;position:relative}.dropdown dso-dropdown-menu>button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0px;inset-block-start:50%;transform:translateY(-50%)}.dropdown dso-dropdown-menu>button:hover,.dropdown dso-dropdown-menu>button:active{cursor:pointer;text-decoration:underline}.dso-nav{align-items:end;column-gap:32px;display:flex;list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.dso-nav>li{margin-block-end:4px}.dso-nav>li>a{display:block}.dso-nav>li>a,.dso-nav>li>a:hover,.dso-nav>li>a:focus,.dso-nav>li>a:visited{color:#275937}.dso-nav>li.dso-active,.dso-nav>li.is-active{margin-block-end:0}.dso-nav>li.dso-active>a,.dso-nav>li.is-active>a{border-block-end:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main{display:flex !important}.dso-nav.dso-nav-main>li>a{text-decoration:none;font-size:1.25em;line-height:1;margin-block-start:8px;padding-block:16px;padding-inline:0;white-space:nowrap}.dso-nav.dso-nav-main>li>a:hover,.dso-nav.dso-nav-main>li>a:focus-visible,.dso-nav.dso-nav-main>li>a:active{text-decoration:underline}.dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options{inset-inline-start:-1rem !important;inset-block-start:3px !important}.dso-nav.dso-nav-main dso-dropdown-menu button{font-size:1.25em;line-height:1;margin-block-start:8px;padding-block:16px;padding-inline:0;align-items:flex-end;color:#275937}.dso-nav.dso-nav-main dso-dropdown-menu button:hover,.dso-nav.dso-nav-main dso-dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main dso-dropdown-menu button::after{margin-inline-start:8px;position:absolute;inset-inline-end:0px;inset-block-start:auto;transform:none}.dso-nav .menu-user-home{margin-inline-start:auto}.dso-nav .menu-user-home dso-icon{block-size:1em;margin-inline-end:8px;position:relative;inset-block-start:-2px;inline-size:1.2em}";
-const DsoHeaderStyle0 = headerCss;
 const minDesktopViewportWidth = 992;
 const Header = class {
@@ -161,8 +161,9 @@ const Header = class {
         "useDropDownMenu": ["setShowDropDown"]
     }; }
 };
-Header.style = DsoHeaderStyle0;
+Header.style = headerCss;
 export { Header as dso_header };
+//# sourceMappingURL=dso-header.entry.js.map
 //# sourceMappingURL=dso-header.entry.js.map

package/dist/esm/dso-header.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-header.entry.js","mappings":"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","names":[],"sources":["src/components/header/header.i18n.ts","src/components/header/header.scss?tag=dso-header&encapsulation=shadow","src/components/header/header.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-header\": {\r\n menu: \"Menu\",\r\n login: \"Log in\",\r\n logout: \"Log out\",\r\n help: \"Help\",\r\n overflowMenu: \"More\",\r\n },\r\n },\r\n nl: {\r\n \"dso-header\": {\r\n menu: \"Menu\",\r\n login: \"Inloggen\",\r\n logout: \"Uitloggen\",\r\n help: \"Help\",\r\n overflowMenu: \"Meer\",\r\n userHome: \"Mijn Omgevingsloket\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n@use \"header.variables\" as core-header-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin nav-item-border($color) {\r\n border-block-end: 4px solid $color;\r\n}\r\n\r\n@mixin nav-item-main {\r\n font-size: 1.25em;\r\n line-height: 1;\r\n margin-block-start: units.$u1;\r\n padding-block: units.$u2;\r\n padding-inline: 0;\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.dso-header {\r\n border-block-end: 1px solid colors.$grijs-20;\r\n display: flex;\r\n flex-wrap: wrap;\r\n position: relative;\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n align-items: center;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {\r\n &.use-drop-down {\r\n flex-wrap: nowrap;\r\n }\r\n }\r\n\r\n .dso-nav {\r\n border: 0;\r\n }\r\n}\r\n\r\n.logo-container {\r\n flex: 1 1 12.5rem;\r\n margin-inline-end: units.$u3;\r\n padding-block-end: units.$u2;\r\n padding-block-start: units.$u2;\r\n}\r\n\r\n.dso-header-session {\r\n display: flex;\r\n align-items: center;\r\n margin-inline-start: auto;\r\n\r\n .profile,\r\n .login,\r\n .logout,\r\n .help {\r\n .dso-tertiary {\r\n display: flex;\r\n gap: 0.5rem;\r\n\r\n cursor: pointer;\r\n\r\n border: 0;\r\n\r\n background-color: transparent;\r\n\r\n padding-inline-start: 0;\r\n\r\n outline-offset: 2px;\r\n\r\n font-family: typography.$font-family-base;\r\n color: colors.$grasgroen;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n line-height: 1.5;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n\r\n .profile {\r\n margin-inline-start: units.$u1;\r\n\r\n + .logout,\r\n ~ .help {\r\n border-inline-start: 3px solid colors.$grijs-20;\r\n margin-inline-start: units.$u1;\r\n padding-inline-start: units.$u1;\r\n }\r\n }\r\n\r\n .help {\r\n a,\r\n button {\r\n display: flex;\r\n }\r\n }\r\n}\r\n\r\n.dso-navbar {\r\n flex-basis: 100%;\r\n}\r\n\r\ndso-dropdown-menu {\r\n @include dropdown-menu.children();\r\n\r\n button {\r\n background-color: transparent;\r\n border: 0;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n align-items: center;\r\n position: relative;\r\n\r\n dso-icon {\r\n inline-size: units.$u3;\r\n block-size: units.$u3;\r\n margin-inline-start: units.$u1;\r\n padding-block-start: units.$u1 * 0.25;\r\n }\r\n\r\n &[aria-expanded=\"true\"] {\r\n dso-icon {\r\n transform: rotate(180deg);\r\n }\r\n }\r\n }\r\n\r\n .dso-dropdown-options {\r\n border: 0;\r\n border-radius: 0;\r\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n inline-size: 375px;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n inline-size: 100%;\r\n }\r\n\r\n ul {\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n\r\n li {\r\n a,\r\n button {\r\n display: block;\r\n padding: units.$u2;\r\n color: colors.$bosgroen;\r\n font-size: 1.25rem;\r\n white-space: pre-wrap;\r\n text-decoration: none;\r\n\r\n &:focus-visible {\r\n background-color: colors.$grasgroen;\r\n color: colors.$wit;\r\n }\r\n\r\n &:hover {\r\n background-color: colors.$wit;\r\n color: colors.$bosgroen;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n button {\r\n inline-size: 100%;\r\n text-align: start;\r\n\r\n dso-icon {\r\n margin-inline-start: units.$u1;\r\n }\r\n }\r\n\r\n &.dso-active {\r\n a {\r\n font-weight: 600;\r\n }\r\n }\r\n\r\n + li {\r\n border-block-start: 1px solid colors.$grijs-20;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dropdown {\r\n margin-inline-start: auto;\r\n display: flex;\r\n align-items: center;\r\n\r\n dso-dropdown-menu {\r\n position: static;\r\n\r\n .dso-dropdown-options {\r\n inset-inline-end: 0;\r\n inset-block-start: 100%;\r\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n > button {\r\n color: colors.$grasgroen;\r\n font-size: typography.$font-size-base;\r\n font-weight: 600;\r\n line-height: normal;\r\n position: relative;\r\n\r\n &::after {\r\n margin-inline-start: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0px;\r\n inset-block-start: 50%;\r\n transform: translateY(-50%);\r\n }\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-nav {\r\n align-items: end;\r\n column-gap: units.$u4;\r\n display: flex;\r\n list-style: none;\r\n margin-block-end: 0;\r\n margin-block-start: 0;\r\n padding-inline-start: 0;\r\n\r\n > li {\r\n margin-block-end: 4px;\r\n\r\n > a {\r\n display: block;\r\n\r\n &,\r\n &:hover,\r\n &:focus,\r\n &:visited {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n &.dso-active,\r\n &.is-active {\r\n margin-block-end: 0;\r\n\r\n > a {\r\n @include nav-item-border(core-header-variables.$navigation-selected-color);\r\n\r\n font-weight: bold;\r\n }\r\n }\r\n }\r\n\r\n &.dso-nav-main {\r\n display: flex !important;\r\n\r\n > li {\r\n > a {\r\n @include anchor.reverse();\r\n @include nav-item-main();\r\n\r\n // stylelint-disable-next-line declaration-property-value-disallowed-list -- no wrapping wanted because of icon\r\n white-space: nowrap;\r\n }\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n inset-inline-start: units.$ru2 * -1 !important;\r\n inset-block-start: 3px !important;\r\n }\r\n\r\n button {\r\n @include nav-item-main();\r\n\r\n align-items: flex-end;\r\n color: colors.$bosgroen;\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n\r\n &::after {\r\n margin-inline-start: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0px;\r\n inset-block-start: auto;\r\n transform: none;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .menu-user-home {\r\n margin-inline-start: auto;\r\n\r\n dso-icon {\r\n block-size: 1em;\r\n margin-inline-end: units.$u1;\r\n position: relative;\r\n inset-block-start: -2px;\r\n inline-size: 1.2em;\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, h, Prop, State, Watch } from \"@stencil/core\";\r\n\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 { HeaderEvent, HeaderMenuItem, HeaderNavigationType } from \"./header.interfaces\";\r\nimport { translations } from \"./header.i18n\";\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.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"],"version":3}
1	+ {"version":3,"file":"dso-header.entry.js","sources":["src/components/header/header.i18n.ts","src/components/header/header.scss?tag=dso-header&encapsulation=shadow","src/components/header/header.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-header\": {\r\n menu: \"Menu\",\r\n login: \"Log in\",\r\n logout: \"Log out\",\r\n help: \"Help\",\r\n overflowMenu: \"More\",\r\n },\r\n },\r\n nl: {\r\n \"dso-header\": {\r\n menu: \"Menu\",\r\n login: \"Inloggen\",\r\n logout: \"Uitloggen\",\r\n help: \"Help\",\r\n overflowMenu: \"Meer\",\r\n userHome: \"Mijn Omgevingsloket\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n@use \"header.variables\" as core-header-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin nav-item-border($color) {\r\n border-block-end: 4px solid $color;\r\n}\r\n\r\n@mixin nav-item-main {\r\n font-size: 1.25em;\r\n line-height: 1;\r\n margin-block-start: units.$u1;\r\n padding-block: units.$u2;\r\n padding-inline: 0;\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.dso-header {\r\n border-block-end: 1px solid colors.$grijs-20;\r\n display: flex;\r\n flex-wrap: wrap;\r\n position: relative;\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n align-items: center;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {\r\n &.use-drop-down {\r\n flex-wrap: nowrap;\r\n }\r\n }\r\n\r\n .dso-nav {\r\n border: 0;\r\n }\r\n}\r\n\r\n.logo-container {\r\n flex: 1 1 12.5rem;\r\n margin-inline-end: units.$u3;\r\n padding-block-end: units.$u2;\r\n padding-block-start: units.$u2;\r\n}\r\n\r\n.dso-header-session {\r\n display: flex;\r\n align-items: center;\r\n margin-inline-start: auto;\r\n\r\n .profile,\r\n .login,\r\n .logout,\r\n .help {\r\n .dso-tertiary {\r\n display: flex;\r\n gap: 0.5rem;\r\n\r\n cursor: pointer;\r\n\r\n border: 0;\r\n\r\n background-color: transparent;\r\n\r\n padding-inline-start: 0;\r\n\r\n outline-offset: 2px;\r\n\r\n font-family: typography.$font-family-base;\r\n color: colors.$grasgroen;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n line-height: 1.5;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n\r\n .profile {\r\n margin-inline-start: units.$u1;\r\n\r\n + .logout,\r\n ~ .help {\r\n border-inline-start: 3px solid colors.$grijs-20;\r\n margin-inline-start: units.$u1;\r\n padding-inline-start: units.$u1;\r\n }\r\n }\r\n\r\n .help {\r\n a,\r\n button {\r\n display: flex;\r\n }\r\n }\r\n}\r\n\r\n.dso-navbar {\r\n flex-basis: 100%;\r\n}\r\n\r\ndso-dropdown-menu {\r\n @include dropdown-menu.children();\r\n\r\n button {\r\n background-color: transparent;\r\n border: 0;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n align-items: center;\r\n position: relative;\r\n\r\n dso-icon {\r\n inline-size: units.$u3;\r\n block-size: units.$u3;\r\n margin-inline-start: units.$u1;\r\n padding-block-start: units.$u1 * 0.25;\r\n }\r\n\r\n &[aria-expanded=\"true\"] {\r\n dso-icon {\r\n transform: rotate(180deg);\r\n }\r\n }\r\n }\r\n\r\n .dso-dropdown-options {\r\n border: 0;\r\n border-radius: 0;\r\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n inline-size: 375px;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n inline-size: 100%;\r\n }\r\n\r\n ul {\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n\r\n li {\r\n a,\r\n button {\r\n display: block;\r\n padding: units.$u2;\r\n color: colors.$bosgroen;\r\n font-size: 1.25rem;\r\n white-space: pre-wrap;\r\n text-decoration: none;\r\n\r\n &:focus-visible {\r\n background-color: colors.$grasgroen;\r\n color: colors.$wit;\r\n }\r\n\r\n &:hover {\r\n background-color: colors.$wit;\r\n color: colors.$bosgroen;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n button {\r\n inline-size: 100%;\r\n text-align: start;\r\n\r\n dso-icon {\r\n margin-inline-start: units.$u1;\r\n }\r\n }\r\n\r\n &.dso-active {\r\n a {\r\n font-weight: 600;\r\n }\r\n }\r\n\r\n + li {\r\n border-block-start: 1px solid colors.$grijs-20;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dropdown {\r\n margin-inline-start: auto;\r\n display: flex;\r\n align-items: center;\r\n\r\n dso-dropdown-menu {\r\n position: static;\r\n\r\n .dso-dropdown-options {\r\n inset-inline-end: 0;\r\n inset-block-start: 100%;\r\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n > button {\r\n color: colors.$grasgroen;\r\n font-size: typography.$font-size-base;\r\n font-weight: 600;\r\n line-height: normal;\r\n position: relative;\r\n\r\n &::after {\r\n margin-inline-start: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0px;\r\n inset-block-start: 50%;\r\n transform: translateY(-50%);\r\n }\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-nav {\r\n align-items: end;\r\n column-gap: units.$u4;\r\n display: flex;\r\n list-style: none;\r\n margin-block-end: 0;\r\n margin-block-start: 0;\r\n padding-inline-start: 0;\r\n\r\n > li {\r\n margin-block-end: 4px;\r\n\r\n > a {\r\n display: block;\r\n\r\n &,\r\n &:hover,\r\n &:focus,\r\n &:visited {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n &.dso-active,\r\n &.is-active {\r\n margin-block-end: 0;\r\n\r\n > a {\r\n @include nav-item-border(core-header-variables.$navigation-selected-color);\r\n\r\n font-weight: bold;\r\n }\r\n }\r\n }\r\n\r\n &.dso-nav-main {\r\n display: flex !important;\r\n\r\n > li {\r\n > a {\r\n @include anchor.reverse();\r\n @include nav-item-main();\r\n\r\n // stylelint-disable-next-line declaration-property-value-disallowed-list -- no wrapping wanted because of icon\r\n white-space: nowrap;\r\n }\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n inset-inline-start: units.$ru2 * -1 !important;\r\n inset-block-start: 3px !important;\r\n }\r\n\r\n button {\r\n @include nav-item-main();\r\n\r\n align-items: flex-end;\r\n color: colors.$bosgroen;\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n\r\n &::after {\r\n margin-inline-start: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0px;\r\n inset-block-start: auto;\r\n transform: none;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .menu-user-home {\r\n margin-inline-start: auto;\r\n\r\n dso-icon {\r\n block-size: 1em;\r\n margin-inline-end: units.$u1;\r\n position: relative;\r\n inset-block-start: -2px;\r\n inline-size: 1.2em;\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, h, Prop, State, Watch } from \"@stencil/core\";\r\n\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 { HeaderEvent, HeaderMenuItem, HeaderNavigationType } from \"./header.interfaces\";\r\nimport { translations } from \"./header.i18n\";\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.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"],"names":[],"mappings":"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"}

package/dist/esm/dso-highlight-box.entry.js CHANGED Viewed

@@ -1,7 +1,6 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-91149367.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BzEnSYbR.js';
 const highlightBoxCss = "*,*::after,*::before{box-sizing:border-box}.dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;block-size:2rem;inset-inline-start:16px;line-height:2rem;position:absolute;text-align:center;inset-block-start:-1.5rem;inline-size:2rem}:host{margin-block-start:16px;padding:16px;margin-block-end:24px;block-size:var(--highlight-box-block-size, unset);min-block-size:var(--highlight-box-min-block-size, unset);display:block;container-type:inline-size;position:relative;z-index:1}:host[has-counter]{block-size:var(--highlight-box-counter-block-size, unset)}:host:not([has-counter]){block-size:var(--highlight-box-nocounter-block-size, unset)}";
-const DsoHighlightBoxStyle0 = highlightBoxCss;
 const HighlightBox = class {
     constructor(hostRef) {
@@ -10,12 +9,13 @@ const HighlightBox = class {
     render() {
         var _a;
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '3fcbc608da08fabe5bf843fecb4d95b7e68e6150', "has-counter": hasCounter }, hasCounter && h("div", { key: 'b525a2982aba2720a7383473ff2e9d78d5c33b99', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'f35cd37a9ac498c830c6cbe2aea69ac1876ac359', name: "icon" })), h("slot", { key: '07e27b87bfcb7e3c596f5aefd5ab323628bc2670' })));
+        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' })));
     }
     get element() { return getElement(this); }
 };
-HighlightBox.style = DsoHighlightBoxStyle0;
+HighlightBox.style = highlightBoxCss;
 export { HighlightBox as dso_highlight_box };
+//# sourceMappingURL=dso-highlight-box.entry.js.map
 //# sourceMappingURL=dso-highlight-box.entry.js.map

package/dist/esm/dso-highlight-box.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-highlight-box.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,muBAAmuB,CAAC;AAC5vB,8BAAe,eAAe;;MCMjB,YAAY;;;;IAkCvB,MAAM;;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QAE5E,QACE,EAAC,IAAI,oEAAc,UAAU,IAC1B,UAAU,IAAI,4DAAK,KAAK,EAAC,kBAAkB,IAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,6DAAM,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC3F,8DAAa,CACR,EACP;KACH;;;;;;;","names":[],"sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@include step-counter.step-counter();\r\n\r\n:host {\r\n @include highlight-box.root();\r\n\r\n display: block;\r\n container-type: inline-size;\r\n position: relative;\r\n z-index: 1;\r\n}\r\n","import { Component, h, Prop, Element, Host } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-highlight-box\",\r\n styleUrl: \"highlight-box.scss\",\r\n shadow: true,\r\n})\r\nexport class HighlightBox {\r\n /*\r\n For yellow Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n yellow?: boolean;\r\n\r\n /\r\n For a bordered Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n border?: boolean;\r\n\r\n /\r\n For a while Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n white?: boolean;\r\n\r\n /\r\n For an Highlight Box with a drop shadow.\r\n /\r\n @Prop({ reflect: true })\r\n dropShadow?: boolean;\r\n\r\n /\r\n To create a step indicator.\r\n */\r\n @Prop({ reflect: true })\r\n step?: number;\r\n\r\n @Element()\r\n private element!: HTMLDsoHighlightBoxElement;\r\n\r\n render() {\r\n const hasCounter = this.step \|\| !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n return (\r\n <Host has-counter={hasCounter}>\r\n {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"~~version~~":3}
1	+ {"version":3,"file":"dso-highlight-box.entry.js","sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@include step-counter.step-counter();\r\n\r\n:host {\r\n @include highlight-box.root();\r\n\r\n display: block;\r\n container-type: inline-size;\r\n position: relative;\r\n z-index: 1;\r\n}\r\n","import { Component, h, Prop, Element, Host } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-highlight-box\",\r\n styleUrl: \"highlight-box.scss\",\r\n shadow: true,\r\n})\r\nexport class HighlightBox {\r\n /*\r\n For yellow Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n yellow?: boolean;\r\n\r\n /\r\n For a bordered Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n border?: boolean;\r\n\r\n /\r\n For a while Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n white?: boolean;\r\n\r\n /\r\n For an Highlight Box with a drop shadow.\r\n /\r\n @Prop({ reflect: true })\r\n dropShadow?: boolean;\r\n\r\n /\r\n To create a step indicator.\r\n */\r\n @Prop({ reflect: true })\r\n step?: number;\r\n\r\n @Element()\r\n private element!: HTMLDsoHighlightBoxElement;\r\n\r\n render() {\r\n const hasCounter = this.step \|\| !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n return (\r\n <Host has-counter={hasCounter}>\r\n {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,muBAAmuB;;MCO9uB,YAAY,GAAA,MAAA;;;;IAkCvB,MAAM,GAAA;;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC;AAE3E,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAc,UAAU,EAAA,EAC1B,UAAU,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,IAAE,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,mCAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC3F,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;"}