@dso-toolkit/core 67.0.0 → 67.1.0-ghi-2365.3

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 (94) hide show
  1. package/dist/cjs/dso-accordion-section.cjs.entry.js +5 -3
  2. package/dist/cjs/dso-accordion-section.cjs.entry.js.map +1 -1
  3. package/dist/cjs/dso-alert_6.cjs.entry.js +19 -3
  4. package/dist/cjs/dso-alert_6.cjs.entry.js.map +1 -1
  5. package/dist/cjs/dso-annotation-locatie_2.cjs.entry.js +31 -9
  6. package/dist/cjs/dso-annotation-locatie_2.cjs.entry.js.map +1 -1
  7. package/dist/cjs/dso-document-card.cjs.entry.js +1 -1
  8. package/dist/cjs/dso-document-card.cjs.entry.js.map +1 -1
  9. package/dist/cjs/dso-header.cjs.entry.js +3 -3
  10. package/dist/cjs/dso-header.cjs.entry.js.map +1 -1
  11. package/dist/cjs/dso-toolkit.cjs.js +1 -1
  12. package/dist/cjs/dsot-document-component-demo.cjs.entry.js +8 -3
  13. package/dist/cjs/dsot-document-component-demo.cjs.entry.js.map +1 -1
  14. package/dist/cjs/loader.cjs.js +1 -1
  15. package/dist/collection/components/accordion/components/accordion-section.css +14 -0
  16. package/dist/collection/components/accordion/components/accordion-section.interfaces.js.map +1 -1
  17. package/dist/collection/components/accordion/components/accordion-section.js +39 -8
  18. package/dist/collection/components/accordion/components/accordion-section.js.map +1 -1
  19. package/dist/collection/components/document-card/document-card.css +2 -1
  20. package/dist/collection/components/document-component/document-component-heading.js +15 -6
  21. package/dist/collection/components/document-component/document-component-heading.js.map +1 -1
  22. package/dist/collection/components/document-component/document-component.css +55 -7
  23. package/dist/collection/components/document-component/document-component.js +99 -2
  24. package/dist/collection/components/document-component/document-component.js.map +1 -1
  25. package/dist/collection/components/document-component/document-component.models.js.map +1 -1
  26. package/dist/collection/components/document-component-demo/document-component.demo.js +52 -3
  27. package/dist/collection/components/document-component-demo/document-component.demo.js.map +1 -1
  28. package/dist/collection/components/header/header.css +147 -10
  29. package/dist/collection/components/header/header.js +3 -3
  30. package/dist/collection/components/header/header.js.map +1 -1
  31. package/dist/collection/components/panel/panel.i18n.js +13 -0
  32. package/dist/collection/components/panel/panel.i18n.js.map +1 -0
  33. package/dist/collection/components/panel/panel.js +29 -1
  34. package/dist/collection/components/panel/panel.js.map +1 -1
  35. package/dist/components/document-component.js +35 -10
  36. package/dist/components/document-component.js.map +1 -1
  37. package/dist/components/dso-accordion-section.js +20 -11
  38. package/dist/components/dso-accordion-section.js.map +1 -1
  39. package/dist/components/dso-document-card.js +1 -1
  40. package/dist/components/dso-document-card.js.map +1 -1
  41. package/dist/components/dso-header.js +5 -4
  42. package/dist/components/dso-header.js.map +1 -1
  43. package/dist/components/dsot-document-component-demo.js +9 -3
  44. package/dist/components/dsot-document-component-demo.js.map +1 -1
  45. package/dist/components/panel.js +21 -2
  46. package/dist/components/panel.js.map +1 -1
  47. package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
  48. package/dist/dso-toolkit/dso-toolkit.esm.js.map +1 -1
  49. package/dist/dso-toolkit/p-39d0a5be.entry.js +2 -0
  50. package/dist/dso-toolkit/p-39d0a5be.entry.js.map +1 -0
  51. package/dist/dso-toolkit/p-3e9082b8.entry.js +2 -0
  52. package/dist/dso-toolkit/p-3e9082b8.entry.js.map +1 -0
  53. package/dist/dso-toolkit/p-758523a5.entry.js +2 -0
  54. package/dist/dso-toolkit/p-758523a5.entry.js.map +1 -0
  55. package/dist/dso-toolkit/{p-e05b8f92.entry.js → p-a83d9abb.entry.js} +2 -2
  56. package/dist/dso-toolkit/{p-e05b8f92.entry.js.map → p-a83d9abb.entry.js.map} +1 -1
  57. package/dist/dso-toolkit/p-bd3ed39f.entry.js +2 -0
  58. package/dist/dso-toolkit/p-bd3ed39f.entry.js.map +1 -0
  59. package/dist/dso-toolkit/p-c64628c7.entry.js +2 -0
  60. package/dist/dso-toolkit/p-c64628c7.entry.js.map +1 -0
  61. package/dist/esm/dso-accordion-section.entry.js +5 -3
  62. package/dist/esm/dso-accordion-section.entry.js.map +1 -1
  63. package/dist/esm/dso-alert_6.entry.js +19 -3
  64. package/dist/esm/dso-alert_6.entry.js.map +1 -1
  65. package/dist/esm/dso-annotation-locatie_2.entry.js +31 -9
  66. package/dist/esm/dso-annotation-locatie_2.entry.js.map +1 -1
  67. package/dist/esm/dso-document-card.entry.js +1 -1
  68. package/dist/esm/dso-document-card.entry.js.map +1 -1
  69. package/dist/esm/dso-header.entry.js +3 -3
  70. package/dist/esm/dso-header.entry.js.map +1 -1
  71. package/dist/esm/dso-toolkit.js +1 -1
  72. package/dist/esm/dsot-document-component-demo.entry.js +8 -3
  73. package/dist/esm/dsot-document-component-demo.entry.js.map +1 -1
  74. package/dist/esm/loader.js +1 -1
  75. package/dist/types/components/accordion/components/accordion-section.d.ts +7 -2
  76. package/dist/types/components/accordion/components/accordion-section.interfaces.d.ts +1 -0
  77. package/dist/types/components/document-component/document-component-heading.d.ts +3 -0
  78. package/dist/types/components/document-component/document-component.d.ts +18 -1
  79. package/dist/types/components/document-component/document-component.models.d.ts +7 -0
  80. package/dist/types/components/document-component-demo/document-component.demo.d.ts +11 -1
  81. package/dist/types/components/panel/panel.d.ts +6 -0
  82. package/dist/types/components/panel/panel.i18n.d.ts +2 -0
  83. package/dist/types/components.d.ts +66 -8
  84. package/package.json +3 -3
  85. package/dist/dso-toolkit/p-76dfbee3.entry.js +0 -2
  86. package/dist/dso-toolkit/p-76dfbee3.entry.js.map +0 -1
  87. package/dist/dso-toolkit/p-abe7047e.entry.js +0 -2
  88. package/dist/dso-toolkit/p-abe7047e.entry.js.map +0 -1
  89. package/dist/dso-toolkit/p-bc0a6bac.entry.js +0 -2
  90. package/dist/dso-toolkit/p-bc0a6bac.entry.js.map +0 -1
  91. package/dist/dso-toolkit/p-e665556c.entry.js +0 -2
  92. package/dist/dso-toolkit/p-e665556c.entry.js.map +0 -1
  93. package/dist/dso-toolkit/p-fbfe9a96.entry.js +0 -2
  94. package/dist/dso-toolkit/p-fbfe9a96.entry.js.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"names":["translations","en","menu","login","logout","help","overflowMenu","nl","userHome","headerCss","DsoHeaderStyle0","minDesktopViewportWidth","Header","this","text","i18n","host","onWindowResize","debounce","_a","dropdownElement","removeAttribute","_b","setDropDownMenu","setOverflowMenu","showDropDown","dropdownOptionsOffset","calculateDropdownOptionsOffset","MenuItem","item","h","class","active","undefined","href","url","onClick","e","clickHandler","menuItem","label","type","options","dsoHeaderClick","emit","originalEvent","isModifiedEvent","setShowDropDown","value","shrinkMenuToFit","wrapper","nav","clientWidth","mainMenu","overflowMenuItems","length","componentDidRender","window","setTimeout","componentDidLoad","useDropDownMenu","innerWidth","clientHeight","getBoundingClientRect","bottom","top","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","render","Fragment","clsx","ref","element","name","userHomeUrl","authStatus","strategy","slot","map","userProfileUrl","userProfileName","loginUrl","logoutUrl","showHelp","helpUrl","icon","filter","_","index","placement","userHomeActive"],"sources":["src/components/header/header.i18n.ts","src/components/header/header.scss?tag=dso-header&encapsulation=scoped","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/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\r\n@use \"header.variables\" as core-header-variables;\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 cursor: pointer;\r\n font-family: typography.$font-family-base;\r\n font-weight: 600;\r\n line-height: 1.5;\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 .dso-dropdown-options {\r\n border-block-start: 1px solid colors.$grijs-20;\r\n }\r\n}\r\n\r\ndso-dropdown-menu {\r\n button {\r\n align-items: center;\r\n background-color: transparent;\r\n border: 0;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n padding-inline-end: units.$u4;\r\n }\r\n\r\n .dso-dropdown-options {\r\n border: 0;\r\n border-radius: 0;\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 li {\r\n a,\r\n button {\r\n color: colors.$bosgroen;\r\n font-size: 1.25rem;\r\n padding: units.$u2;\r\n white-space: pre-wrap;\r\n\r\n &:focus {\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\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.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 }\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: center;\r\n color: colors.$bosgroen;\r\n padding-inline-end: units.$u4;\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 scoped: 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 </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 </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"],"mappings":"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","ignoreList":[]}