npm - @dso-toolkit/core - Versions diffs - 79.0.1 → 80.0.0 - Mend

@dso-toolkit/core 79.0.1 → 80.0.0

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

Files changed (833) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-header.entry.js","sources":["src/components/header/header.i18n.ts","src/components/header/menu-item.functional-component.tsx","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","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { HeaderMenuItem } from \"./header.interfaces\";\r\n\r\nexport interface MenuItemProps {\r\n item: HeaderMenuItem;\r\n onClick: (event: MouseEvent) => void;\r\n key: string;\r\n ref?: (el: HTMLLIElement \| undefined) => void;\r\n}\r\n\r\nexport const MenuItem: FunctionalComponent<MenuItemProps> = ({ item, onClick, key, ref }) => {\r\n return (\r\n <li class={clsx({ \"dso-active\": item.active })} key={key} ref={ref}>\r\n <a href={item.url} aria-current={item.active ? \"page\" : undefined} onClick={onClick}>\r\n {item.label}\r\n </a>\r\n </li>\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/link\";\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 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:host([is-compact]) {\r\n ::slotted([slot=\"logo\"]) {\r\n --_dso-logo-block-size: #{units.$ru5} !important;\r\n }\r\n\r\n .dso-header {\r\n flex-wrap: nowrap;\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n inline-size: 100%;\r\n }\r\n }\r\n}\r\n\r\n:host(:not([is-compact])) {\r\n .dso-header {\r\n align-items: center;\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n inline-size: 375px;\r\n }\r\n }\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 .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 + .logout,\r\n .logout + .help,\r\n .login + .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 .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 max-inline-size: 100%;\r\n position: relative; // Needed for menu item calculations\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 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:not(:hover):not(:focus-visible) {\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 &.ready {\r\n .menu-user-home {\r\n margin-inline-start: auto;\r\n }\r\n }\r\n\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 link.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 .main-menu-item-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 .dropdown-menu-item .main-menu-item-icon {\r\n margin-inline-end: 0;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Host,\r\n Prop,\r\n State,\r\n Watch,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { translations } from \"./header.i18n\";\r\nimport {\r\n HeaderAuthStatus,\r\n HeaderCompactMode,\r\n HeaderEvent,\r\n HeaderMenuItem,\r\n HeaderNavigationType,\r\n} from \"./header.interfaces\";\r\nimport { MenuItem } from \"./menu-item.functional-component\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\ninterface ClickHandlerOptions {\r\n menuItem?: HeaderMenuItem;\r\n url?: string;\r\n}\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 implements ComponentInterface {\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 Set to \"always\" to force the header to be compact. Otherwise it will be compact when\r\n * the viewport is smaller than 992px.\r\n /\r\n @Prop()\r\n compact: HeaderCompactMode = \"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: HeaderAuthStatus = \"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 = false;\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 @State()\r\n visibleMenuItemsCount: number \| undefined = undefined;\r\n\r\n @State()\r\n dropdownOptionsOffset = 0;\r\n\r\n @Watch(\"mainMenu\")\r\n mainMenuChanged() {\r\n this.resetVisibleMenuItems();\r\n }\r\n\r\n private resetVisibleMenuItems = () => {\r\n this.visibleMenuItemsCount = undefined;\r\n };\r\n\r\n private get isCompact() {\r\n return this.compact === \"always\" \|\| window.innerWidth < minDesktopViewportWidth;\r\n }\r\n\r\n private clickHandler = (e: MouseEvent, type: HeaderNavigationType, options?: ClickHandlerOptions) => {\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: HTMLDsoDropdownMenuElement \| undefined;\r\n private navElement: HTMLUListElement \| undefined;\r\n private menuItemElementRefs: (HTMLLIElement \| undefined)[] = [];\r\n private dropdownMenuItemElementRef: HTMLLIElement \| undefined;\r\n private userHomeMenuItemElementRef: HTMLLIElement \| undefined;\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n /\r\n Before determining the visible menu items, all the menu items are rendered (including the dropdown menu item and the user home menu item).\r\n * Then the visible menu items are calculated in componentDidRender() and ONLY when the visibleMenuItemsCount is undefined.\r\n \r\n When the window resizes or this.mainMenu changes, a reset is triggered to recalculate the visible menu items.\r\n \r\n @param navElement The navigation element to calculate the overflow menu item count for.\r\n * @returns The number of menu items that can fit in the available space.\r\n */\r\n private calculateOverflowMenuItemCount(navElement: HTMLUListElement): number {\r\n const availableWidth = navElement.offsetWidth;\r\n\r\n const lastMenuItem = this.menuItemElementRefs[this.menuItemElementRefs.length - 1];\r\n const mostRightMenuItem = this.userHomeMenuItemElementRef ?? lastMenuItem;\r\n const dropdownMenuItem = this.dropdownMenuItemElementRef;\r\n\r\n if (!mostRightMenuItem \|\| !dropdownMenuItem \|\| !lastMenuItem) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n const dropdownMenuItemEffectiveWidth =\r\n dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth - (lastMenuItem.offsetLeft + lastMenuItem.offsetWidth);\r\n\r\n const requiredWidth = mostRightMenuItem.offsetLeft + mostRightMenuItem.offsetWidth - dropdownMenuItemEffectiveWidth;\r\n\r\n if (requiredWidth <= availableWidth) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n const userHomeMenuItemEffectiveWidth = this.userHomeMenuItemElementRef\r\n ? this.userHomeMenuItemElementRef.offsetLeft +\r\n this.userHomeMenuItemElementRef.offsetWidth -\r\n (dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth)\r\n : 0;\r\n\r\n const remainingWidth = availableWidth - dropdownMenuItemEffectiveWidth - userHomeMenuItemEffectiveWidth;\r\n\r\n const visibleMenuItems = this.menuItemElementRefs.findIndex(\r\n (menuItem) => menuItem && menuItem.offsetLeft + menuItem.offsetWidth > remainingWidth,\r\n );\r\n\r\n if (visibleMenuItems < 0) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n return visibleMenuItems;\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 get visibleMainMenuItems(): HeaderMenuItem[] {\r\n return typeof this.visibleMenuItemsCount === \"number\"\r\n ? this.mainMenu.slice(0, this.visibleMenuItemsCount)\r\n : this.mainMenu;\r\n }\r\n\r\n private get hiddenMainMenuItems(): HeaderMenuItem[] {\r\n return typeof this.visibleMenuItemsCount === \"number\" ? this.mainMenu.slice(this.visibleMenuItemsCount) : [];\r\n }\r\n\r\n private resizeObserver = new ResizeObserver(() => {\r\n this.resetVisibleMenuItems();\r\n\r\n forceUpdate(this.host);\r\n });\r\n\r\n connectedCallback(): void {\r\n this.resizeObserver.observe(this.host);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.resizeObserver.disconnect();\r\n }\r\n\r\n componentDidRender() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n if (this.isCompact && this.dropdownElement) {\r\n this.dropdownElement.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n\r\n if (typeof this.visibleMenuItemsCount === \"undefined\" && this.navElement) {\r\n this.visibleMenuItemsCount = this.calculateOverflowMenuItemCount(this.navElement);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host is-compact={this.isCompact}>\r\n <div class=\"dso-header\">\r\n <div class=\"logo-container\">\r\n <slot name=\"logo\" />\r\n </div>\r\n {this.isCompact ? this.renderCompact() : this.renderNormal()}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private renderCompact() {\r\n return (\r\n (this.mainMenu.length > 0 \|\| this.userHomeUrl \|\| this.authStatus !== \"none\") && (\r\n <div class=\"dropdown\">\r\n <dso-dropdown-menu\r\n dropdown-align=\"right\"\r\n dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n ref={(element) => (this.dropdownElement = element)}\r\n >\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"menu\")}</span>\r\n <dso-icon icon=\"chevron-down\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu.map((menuItem) => (\r\n <MenuItem\r\n item={menuItem}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n key={menuItem.label}\r\n />\r\n ))}\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 href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\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 href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\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 );\r\n }\r\n\r\n private renderNormal() {\r\n this.menuItemElementRefs = [];\r\n\r\n return (\r\n <Fragment>\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.length > 0 \|\| this.userHomeUrl) && (\r\n <nav class=\"dso-navbar\">\r\n <ul\r\n class={clsx(\"dso-nav\", \"dso-nav-main\", { ready: this.visibleMenuItemsCount !== undefined })}\r\n ref={(element) => (this.navElement = element)}\r\n >\r\n {this.visibleMainMenuItems.map((menuItem, i) => (\r\n <MenuItem\r\n item={menuItem}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n key={menuItem.label}\r\n ref={(el) => (this.menuItemElementRefs[i] = el)}\r\n />\r\n ))}\r\n {(this.visibleMenuItemsCount === undefined \|\| this.hiddenMainMenuItems.length > 0) && (\r\n <li\r\n aria-hidden={this.visibleMenuItemsCount === undefined}\r\n ref={(el) => (this.dropdownMenuItemElementRef = el)}\r\n class=\"dropdown-menu-item\"\r\n >\r\n <dso-dropdown-menu>\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"overflowMenu\")}</span>\r\n <dso-icon icon=\"chevron-down\" class=\"main-menu-item-icon\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.hiddenMainMenuItems.map((menuItem) => (\r\n <MenuItem\r\n item={menuItem}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n key={menuItem.label}\r\n />\r\n ))}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </li>\r\n )}\r\n {this.userHomeUrl && (\r\n <li\r\n class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}\r\n ref={(el) => (this.userHomeMenuItemElementRef = el)}\r\n >\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\" class=\"main-menu-item-icon\"></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 </Fragment>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"dso-header.entry.js","sources":["src/components/header/header.i18n.ts","src/components/header/menu-item.functional-component.tsx","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","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { HeaderMenuItem } from \"./header.interfaces\";\r\n\r\nexport interface MenuItemProps {\r\n item: HeaderMenuItem;\r\n onClick: (event: MouseEvent) => void;\r\n key: string;\r\n ref?: (el: HTMLLIElement \| undefined) => void;\r\n}\r\n\r\nexport const MenuItem: FunctionalComponent<MenuItemProps> = ({ item, onClick, key, ref }) => {\r\n return (\r\n <li class={clsx({ \"dso-active\": item.active })} key={key} ref={ref}>\r\n <a href={item.url} aria-current={item.active ? \"page\" : undefined} onClick={onClick}>\r\n {item.label}\r\n </a>\r\n </li>\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/link\";\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 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:host([is-compact]) {\r\n ::slotted([slot=\"logo\"]) {\r\n --_dso-logo-block-size: #{units.$ru5} !important;\r\n }\r\n\r\n .dso-header {\r\n flex-wrap: nowrap;\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n inline-size: 100%;\r\n }\r\n }\r\n}\r\n\r\n:host(:not([is-compact])) {\r\n .dso-header {\r\n align-items: center;\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n inline-size: 375px;\r\n }\r\n }\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 .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: 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 + .logout,\r\n .logout + .help,\r\n .login + .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 .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 max-inline-size: 100%;\r\n position: relative; // Needed for menu item calculations\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 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:not(:hover):not(:focus-visible) {\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 &.ready {\r\n .menu-user-home {\r\n margin-inline-start: auto;\r\n }\r\n }\r\n\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 link.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 .main-menu-item-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 .dropdown-menu-item .main-menu-item-icon {\r\n margin-inline-end: 0;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Host,\r\n Prop,\r\n State,\r\n Watch,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { translations } from \"./header.i18n\";\r\nimport {\r\n HeaderAuthStatus,\r\n HeaderCompactMode,\r\n HeaderEvent,\r\n HeaderMenuItem,\r\n HeaderNavigationType,\r\n} from \"./header.interfaces\";\r\nimport { MenuItem } from \"./menu-item.functional-component\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\ninterface ClickHandlerOptions {\r\n menuItem?: HeaderMenuItem;\r\n url?: string;\r\n}\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 implements ComponentInterface {\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 Set to \"always\" to force the header to be compact. Otherwise it will be compact when\r\n * the viewport is smaller than 992px.\r\n /\r\n @Prop()\r\n compact: HeaderCompactMode = \"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: HeaderAuthStatus = \"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 = false;\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 @State()\r\n visibleMenuItemsCount: number \| undefined = undefined;\r\n\r\n @State()\r\n dropdownOptionsOffset = 0;\r\n\r\n @Watch(\"mainMenu\")\r\n mainMenuChanged() {\r\n this.resetVisibleMenuItems();\r\n }\r\n\r\n private resetVisibleMenuItems = () => {\r\n this.visibleMenuItemsCount = undefined;\r\n };\r\n\r\n private get isCompact() {\r\n return this.compact === \"always\" \|\| window.innerWidth < minDesktopViewportWidth;\r\n }\r\n\r\n private clickHandler = (e: MouseEvent, type: HeaderNavigationType, options?: ClickHandlerOptions) => {\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: HTMLDsoDropdownMenuElement \| undefined;\r\n private navElement: HTMLUListElement \| undefined;\r\n private menuItemElementRefs: (HTMLLIElement \| undefined)[] = [];\r\n private dropdownMenuItemElementRef: HTMLLIElement \| undefined;\r\n private userHomeMenuItemElementRef: HTMLLIElement \| undefined;\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n /\r\n Before determining the visible menu items, all the menu items are rendered (including the dropdown menu item and the user home menu item).\r\n * Then the visible menu items are calculated in componentDidRender() and ONLY when the visibleMenuItemsCount is undefined.\r\n \r\n When the window resizes or this.mainMenu changes, a reset is triggered to recalculate the visible menu items.\r\n \r\n @param navElement The navigation element to calculate the overflow menu item count for.\r\n * @returns The number of menu items that can fit in the available space.\r\n */\r\n private calculateOverflowMenuItemCount(navElement: HTMLUListElement): number {\r\n const availableWidth = navElement.offsetWidth;\r\n\r\n const lastMenuItem = this.menuItemElementRefs[this.menuItemElementRefs.length - 1];\r\n const mostRightMenuItem = this.userHomeMenuItemElementRef ?? lastMenuItem;\r\n const dropdownMenuItem = this.dropdownMenuItemElementRef;\r\n\r\n if (!mostRightMenuItem \|\| !dropdownMenuItem \|\| !lastMenuItem) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n const dropdownMenuItemEffectiveWidth =\r\n dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth - (lastMenuItem.offsetLeft + lastMenuItem.offsetWidth);\r\n\r\n const requiredWidth = mostRightMenuItem.offsetLeft + mostRightMenuItem.offsetWidth - dropdownMenuItemEffectiveWidth;\r\n\r\n if (requiredWidth <= availableWidth) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n const userHomeMenuItemEffectiveWidth = this.userHomeMenuItemElementRef\r\n ? this.userHomeMenuItemElementRef.offsetLeft +\r\n this.userHomeMenuItemElementRef.offsetWidth -\r\n (dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth)\r\n : 0;\r\n\r\n const remainingWidth = availableWidth - dropdownMenuItemEffectiveWidth - userHomeMenuItemEffectiveWidth;\r\n\r\n const visibleMenuItems = this.menuItemElementRefs.findIndex(\r\n (menuItem) => menuItem && menuItem.offsetLeft + menuItem.offsetWidth > remainingWidth,\r\n );\r\n\r\n if (visibleMenuItems < 0) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n return visibleMenuItems;\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 get visibleMainMenuItems(): HeaderMenuItem[] {\r\n return typeof this.visibleMenuItemsCount === \"number\"\r\n ? this.mainMenu.slice(0, this.visibleMenuItemsCount)\r\n : this.mainMenu;\r\n }\r\n\r\n private get hiddenMainMenuItems(): HeaderMenuItem[] {\r\n return typeof this.visibleMenuItemsCount === \"number\" ? this.mainMenu.slice(this.visibleMenuItemsCount) : [];\r\n }\r\n\r\n private resizeObserver = new ResizeObserver(() => {\r\n this.resetVisibleMenuItems();\r\n\r\n forceUpdate(this.host);\r\n });\r\n\r\n connectedCallback(): void {\r\n this.resizeObserver.observe(this.host);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.resizeObserver.disconnect();\r\n }\r\n\r\n componentDidRender() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n if (this.isCompact && this.dropdownElement) {\r\n this.dropdownElement.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n\r\n if (typeof this.visibleMenuItemsCount === \"undefined\" && this.navElement) {\r\n this.visibleMenuItemsCount = this.calculateOverflowMenuItemCount(this.navElement);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host is-compact={this.isCompact}>\r\n <div class=\"dso-header\">\r\n <div class=\"logo-container\">\r\n <slot name=\"logo\" />\r\n </div>\r\n {this.isCompact ? this.renderCompact() : this.renderNormal()}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private renderCompact() {\r\n return (\r\n (this.mainMenu.length > 0 \|\| this.userHomeUrl \|\| this.authStatus !== \"none\") && (\r\n <div class=\"dropdown\">\r\n <dso-dropdown-menu\r\n dropdown-align=\"right\"\r\n dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n ref={(element) => (this.dropdownElement = element)}\r\n >\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"menu\")}</span>\r\n <dso-icon icon=\"chevron-down\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu.map((menuItem) => (\r\n <MenuItem\r\n item={menuItem}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n key={menuItem.label}\r\n />\r\n ))}\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 href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\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 href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\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 );\r\n }\r\n\r\n private renderNormal() {\r\n this.menuItemElementRefs = [];\r\n\r\n return (\r\n <Fragment>\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.length > 0 \|\| this.userHomeUrl) && (\r\n <nav class=\"dso-navbar\">\r\n <ul\r\n class={clsx(\"dso-nav\", \"dso-nav-main\", { ready: this.visibleMenuItemsCount !== undefined })}\r\n ref={(element) => (this.navElement = element)}\r\n >\r\n {this.visibleMainMenuItems.map((menuItem, i) => (\r\n <MenuItem\r\n item={menuItem}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n key={menuItem.label}\r\n ref={(el) => (this.menuItemElementRefs[i] = el)}\r\n />\r\n ))}\r\n {(this.visibleMenuItemsCount === undefined \|\| this.hiddenMainMenuItems.length > 0) && (\r\n <li\r\n aria-hidden={this.visibleMenuItemsCount === undefined}\r\n ref={(el) => (this.dropdownMenuItemElementRef = el)}\r\n class=\"dropdown-menu-item\"\r\n >\r\n <dso-dropdown-menu>\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"overflowMenu\")}</span>\r\n <dso-icon icon=\"chevron-down\" class=\"main-menu-item-icon\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.hiddenMainMenuItems.map((menuItem) => (\r\n <MenuItem\r\n item={menuItem}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n key={menuItem.label}\r\n />\r\n ))}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </li>\r\n )}\r\n {this.userHomeUrl && (\r\n <li\r\n class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}\r\n ref={(el) => (this.userHomeMenuItemElementRef = el)}\r\n >\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\" class=\"main-menu-item-icon\"></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 </Fragment>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

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

@@ -9,7 +9,7 @@ const HighlightBox = class {
     render() {
         var _a;
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: 'a17c902d2d0218ca9535995de35277932314703a', "has-counter": hasCounter }, hasCounter && h("div", { key: '51784bd453e91291a9b6f89f63a53860bd0015dd', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: '48e88b38b2ea9e9b696db3830bb489ffcf129ff6', name: "icon" })), h("slot", { key: 'cd1d9e7ab981c5c155c624dc604a58b6b5a1ca65' })));
+        return (h(Host, { key: '85ebcf8a64e4a5a49bf0e5ad10c22a754cb567d7', "has-counter": hasCounter }, hasCounter && h("div", { key: 'ec03a4b681b21ffd024007d8f7657c808151b735', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'bc2fd03cb80dae329290697a10179603fda2a7f1', name: "icon" })), h("slot", { key: '1dcb3fa374291cbdffc4b42aa683c75feba776c7' })));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/dso-history-item.entry.js ADDED Viewed

@@ -0,0 +1,52 @@
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, F as Fragment, g as getElement } from './index-DxWmN7gh.js';
+import { i as isModifiedEvent } from './is-modified-event-Hgv-pDpy.js';
+const historyItemCss = ":host{border-block-end:1px solid #e5e5e5;display:flex;gap:8px;inline-size:100%;padding-block:16px}:host:has(.history-item-title a:is(:hover,:focus-visible)){background-color:#f2f2f2}*,*::after,*::before{box-sizing:border-box}:host([type=tijdelijk-regelingdeel]) .history-item-status-message{color:#8b4a6a}:host([type=waarschuwing]) .history-item-status-message{color:#b62f41}.history-item-date,.history-item-content{display:flex;flex-direction:column}.history-item-date{flex:0 0 90px}.history-item-status-message,.history-item-warning{display:flex}.history-item-status-message dso-icon,.history-item-warning dso-icon{flex-shrink:0;margin-inline-end:8px}.history-item-warning{color:#b62f41}.history-item-title,.history-item-explanation,.history-item-warning{margin-block-start:8px;margin-inline-start:32px}.title-anchor{color:#39870c;font-weight:600;text-decoration:none}.title-anchor:hover{color:#39870c;text-decoration:underline}.title-anchor:visited{color:#39870c}";
+const HistoryItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsoClick = createEvent(this, "dsoClick", 3);
+        this.typeIcons = {
+            ontwerp: "pencil",
+            "in-werking": "document",
+            "tijdelijk-regelingdeel": "document",
+            waarschuwing: "status-warning-inline",
+            besluit: "hammer",
+        };
+    }
+    connectedCallback() {
+        this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
+        this.mutationObserver.observe(this.host, { attributes: true, childList: true });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        delete this.mutationObserver;
+    }
+    clickEventHandler(e) {
+        if (!(e.target instanceof HTMLElement) || !this.href) {
+            return;
+        }
+        return this.dsoClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
+    }
+    get titleSlottedElement() {
+        return this.host.querySelector("[slot='title']");
+    }
+    get explanationSlottedElement() {
+        return this.host.querySelector("[slot='explanation']");
+    }
+    get warningSlottedElement() {
+        return this.host.querySelector("[slot='warning']");
+    }
+    render() {
+        return (h(Fragment, { key: 'c93c9663ff6b96d34898c0efe2be2adabbbed820' }, h("div", { key: '0167b33d2263c83963a03f5471917a91620710bf', class: "history-item-date" }, h("slot", { key: '8d52fc2eac2ca693122589634d942b60a43b1cc5', name: "date" })), h("div", { key: 'aa930709d2de4545e446e5216f7855af877ec145', class: "history-item-content" }, h("div", { key: 'd608f7e07938862b5bc819abef893a8cc9fd821a', class: "history-item-status-message" }, h("dso-icon", { key: '8482b12318241fd681e9906ef703127875187a25', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'e8800aae35bd1a2548d245a6674cca237cff5c11', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '97134a190b4d4618cdf7911d5ff67b6b3f8468b0', class: "history-item-title" }, h("a", { key: '3f88fcc3ff64dd498f092a5070dd2354fb1831c2', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'c5124382a42034793220611c88bada4672d5b6e1', name: "title" })))), this.explanationSlottedElement !== null && (h("div", { key: 'ce1038df5c5655ee0134557f022245aa91deb348', class: "history-item-explanation" }, h("slot", { key: '25b6ca6163c4b39a4554c55c0b86ef9203811e3b', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '9c0bf88484285a5e48d1aa4cd14336b29070e35e', class: "history-item-warning" }, h("dso-icon", { key: 'cae6adb826b605d58914dc0a2b5fa9d838c0eb8e', icon: "status-warning-inline", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: '7de3f72175daa5ea4329af7823880cf7536668da', name: "warning" }))))));
+    }
+    get host() { return getElement(this); }
+};
+HistoryItem.style = historyItemCss;
+export { HistoryItem as dso_history_item };
+//# sourceMappingURL=dso-history-item.entry.js.map
+//# sourceMappingURL=dso-history-item.entry.js.map

package/dist/esm/dso-history-item.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dso-history-item.entry.js","sources":["src/components/history-item/history-item.scss?tag=dso-history-item&encapsulation=shadow","src/components/history-item/history-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"history-item.variables\" as history-item-variables;\r\n\r\n:host {\r\n border-block-end: 1px solid colors.$grijs-10;\r\n display: flex;\r\n gap: units.$u1;\r\n inline-size: 100%;\r\n padding-block: units.$u2;\r\n\r\n &:has(.history-item-title a:is(:hover, :focus-visible)) {\r\n background-color: history-item-variables.$background-color-hover;\r\n }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([type=\"tijdelijk-regelingdeel\"]) {\r\n .history-item-status-message {\r\n color: history-item-variables.$tijdelijke-regeldingdeel-color;\r\n }\r\n}\r\n\r\n:host([type=\"waarschuwing\"]) {\r\n .history-item-status-message {\r\n color: history-item-variables.$waarschuwing-color;\r\n }\r\n}\r\n\r\n.history-item-date,\r\n.history-item-content {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.history-item-date {\r\n flex: 0 0 90px;\r\n}\r\n\r\n.history-item-status-message,\r\n.history-item-warning {\r\n display: flex;\r\n\r\n dso-icon {\r\n flex-shrink: 0;\r\n margin-inline-end: units.$u1;\r\n }\r\n}\r\n\r\n.history-item-warning {\r\n color: history-item-variables.$waarschuwing-color;\r\n}\r\n\r\n.history-item-title,\r\n.history-item-explanation,\r\n.history-item-warning {\r\n margin-block-start: units.$u1;\r\n margin-inline-start: units.$u4;\r\n}\r\n\r\n.title-anchor {\r\n color: history-item-variables.$title-anchor-color;\r\n font-weight: 600;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n color: history-item-variables.$title-anchor-color;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited {\r\n color: history-item-variables.$title-anchor-color;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Prop,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HistoryItemClickEvent, HistoryItemType } from \"./history-item.interfaces\";\r\n\r\n/**\r\n * @slot date - The slot to place a string that holds a date in.\r\n * @slot status - The slot to place the status message in.\r\n * @slot title - An optional slot to place the title in. When used, the property `href` must be set.\r\n * @slot explanation - An optional slot to place explanation in.\r\n * @slot warning - An optional slot to place a warning in.\r\n */\r\n@Component({\r\n tag: \"dso-history-item\",\r\n styleUrl: \"history-item.scss\",\r\n shadow: true,\r\n})\r\nexport class HistoryItem implements ComponentInterface {\r\n private typeIcons: Record<HistoryItemType, string> = {\r\n ontwerp: \"pencil\",\r\n \"in-werking\": \"document\",\r\n \"tijdelijk-regelingdeel\": \"document\",\r\n waarschuwing: \"status-warning-inline\",\r\n besluit: \"hammer\",\r\n };\r\n\r\n @Element()\r\n host!: HTMLDsoHistoryItemElement;\r\n\r\n /**\r\n * The type of History Item\r\n */\r\n @Prop({ reflect: true })\r\n type!: HistoryItemType;\r\n\r\n /**\r\n * The optional URL to which the History Item title links. Needs to be provided when slot `title` is used.\r\n */\r\n @Prop({ reflect: true })\r\n href?: string;\r\n\r\n /**\r\n * Emitted when the History Item title is clicked.\r\n */\r\n @Event({ bubbles: false })\r\n dsoClick!: EventEmitter<HistoryItemClickEvent>;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n private clickEventHandler(e: MouseEvent) {\r\n if (!(e.target instanceof HTMLElement) || !this.href) {\r\n return;\r\n }\r\n\r\n return this.dsoClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n }\r\n\r\n get titleSlottedElement() {\r\n return this.host.querySelector(\"[slot='title']\");\r\n }\r\n\r\n get explanationSlottedElement() {\r\n return this.host.querySelector(\"[slot='explanation']\");\r\n }\r\n\r\n get warningSlottedElement() {\r\n return this.host.querySelector(\"[slot='warning']\");\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <div class=\"history-item-date\">\r\n <slot name=\"date\"></slot>\r\n </div>\r\n <div class=\"history-item-content\">\r\n <div class=\"history-item-status-message\">\r\n <dso-icon icon={this.typeIcons[this.type]} aria-hidden=\"true\"></dso-icon>\r\n <slot name=\"status\"></slot>\r\n </div>\r\n {this.titleSlottedElement !== null && this.href && (\r\n <div class=\"history-item-title\">\r\n <a href={this.href} class=\"title-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n <slot name=\"title\"></slot>\r\n </a>\r\n </div>\r\n )}\r\n {this.explanationSlottedElement !== null && (\r\n <div class=\"history-item-explanation\">\r\n <slot name=\"explanation\"></slot>\r\n </div>\r\n )}\r\n {this.warningSlottedElement !== null && (\r\n <div class=\"history-item-warning\">\r\n <dso-icon icon=\"status-warning-inline\" role=\"img\" aria-label=\"Waarschuwing\"></dso-icon>\r\n <slot name=\"warning\"></slot>\r\n </div>\r\n )}\r\n </div>\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/dso-icon-button.entry.js ADDED Viewed

@@ -0,0 +1,98 @@
+import { h, r as registerInstance, c as createEvent } from './index-DxWmN7gh.js';
+import { p as positionTooltip } from './position-tooltip.function-CozxeEX7.js';
+import { c as clsx } from './clsx-ChV9xqsO.js';
+import './floating-ui.dom-gdsca1fx.js';
+const Tooltip = ({ visible, onAfterHidden, tipElementRef, tipArrowElementRef }, children) => (h("div", { popover: "manual", id: "tooltip", class: clsx(["dso-tooltip", { visible }]), ref: tipElementRef, onTransitionEnd: (e) => {
+        e.stopPropagation();
+        if (e.propertyName === "opacity" && !visible) {
+            onAfterHidden();
+        }
+    } },
+    h("span", { class: "tooltip-arrow", ref: tipArrowElementRef }),
+    h("div", { class: "tooltip-inner" }, children)));
+const iconButtonCss = ".dso-tooltip {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  --_dso-icon-button-tertiary-color: #fff;\n  background-color: #666;\n  color: #fff;\n}\n.dso-tooltip a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\n.dso-tooltip a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\n.dso-tooltip a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\n.dso-tooltip a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\n.dso-tooltip {\n  border-radius: 4px;\n  overflow: unset;\n  margin: 0;\n  border: 0;\n  padding: 0;\n  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.15s;\n}\n.dso-tooltip.visible {\n  opacity: 1;\n  visibility: visible;\n}\n.dso-tooltip .tooltip-inner {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  --_dso-icon-button-tertiary-color: #fff;\n  background-color: #666;\n  color: #fff;\n}\n.dso-tooltip .tooltip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\n.dso-tooltip .tooltip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\n.dso-tooltip .tooltip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\n.dso-tooltip .tooltip-inner a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\n.dso-tooltip .tooltip-inner {\n  font-family: Asap, sans-serif;\n  font-size: 1rem;\n  font-weight: normal;\n  padding-block: 0;\n  padding-inline: 8px;\n  border-radius: 4px;\n  line-height: 1.5;\n  max-inline-size: 320px;\n}\n.dso-tooltip .tooltip-arrow {\n  --_dso-alert-success-border-color: #39870c;\n  --_dso-alert-error-border-color: #ce3f51;\n  --_dso-alert-info-border-color: #6ca4d9;\n  --_dso-alert-warning-border-color: #dcd400;\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  --_dso-icon-button-tertiary-color: #fff;\n  background-color: #666;\n  color: #fff;\n}\n.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\n.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\n.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\n.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\n.dso-tooltip .tooltip-arrow {\n  position: absolute;\n  border-start-start-radius: 4px;\n  block-size: 8px;\n  inline-size: 8px;\n  pointer-events: none;\n  z-index: -1;\n}\n\n:host {\n  display: inline-block;\n  line-height: 1;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n.dso-secondary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.dso-secondary:focus, .dso-secondary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-secondary:active {\n  outline: 0;\n}\n.dso-secondary.extern::after, .dso-secondary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\n.dso-secondary {\n  background-color: var(--_dso-button-secondary-background-color, #fff);\n  border-color: var(--_dso-button-secondary-border-color, #39870c);\n  color: var(--_dso-button-secondary-color, #39870c);\n}\n.dso-secondary {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.dso-secondary:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n  color: var(--_dso-button-secondary-hover-color, #275937);\n}\n.dso-secondary:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #275937);\n  border-color: var(--_dso-button-secondary-active-border-color, #275937);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\n.dso-secondary[disabled], .dso-secondary[disabled]:hover {\n  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\n.dso-secondary.dso-small {\n  line-height: 1rem;\n}\n.dso-secondary.dso-small dso-icon,\n.dso-secondary.dso-small svg.di, .dso-secondary.dso-small.extern::after, .dso-secondary.dso-small.download::after, .dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.dso-secondary.dso-extra-small {\n  line-height: 1rem;\n}\n.dso-secondary.dso-extra-small dso-icon,\n.dso-secondary.dso-extra-small svg.di, .dso-secondary.dso-extra-small.extern::after, .dso-secondary.dso-extra-small.download::after, .dso-secondary.dso-extra-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.dso-secondary.dso-extra-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.dso-secondary.dso-extra-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.dso-secondary.dso-extra-small {\n  padding-block: 9px;\n}\n.dso-secondary dso-icon:has(+ span:not(.sr-only)),\n.dso-secondary svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\n.dso-secondary span:not(.sr-only) + dso-icon,\n.dso-secondary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.dso-secondary dso-icon + span:not(.sr-only),\n.dso-secondary svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\n.dso-secondary.dso-spinner-left[disabled], .dso-secondary.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.dso-secondary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.dso-secondary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.dso-secondary {\n  padding-inline: calc(8px - 1px);\n  padding-block: calc(8px - 1px);\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary.extern::after, .dso-tertiary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\n.dso-tertiary {\n  padding-inline: 0;\n  padding-block: 0;\n  color: var(--_dso-icon-button-tertiary-color, #39870c);\n  background-color: transparent;\n  border: 0;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: var(--_dso-icon-button-tertiary-hover-color, var(--_dso-icon-button-tertiary-color, #275937));\n}\n.dso-tertiary:not([disabled]):active {\n  color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #275937));\n}\n.dso-tertiary[disabled] {\n  color: var(--_dso-icon-button-tertiary-disabled-color, var(--_dso-icon-button-tertiary-color, #afcf9d));\n}\n\n.dso-map {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.dso-map:focus, .dso-map:focus-visible {\n  outline-offset: 2px;\n}\n.dso-map:active {\n  outline: 0;\n}\n.dso-map {\n  background-color: var(--_dso-button-secondary-background-color, #fff);\n  border-color: var(--_dso-button-secondary-border-color, #39870c);\n  color: var(--_dso-button-secondary-color, #39870c);\n}\n.dso-map {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.dso-map:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n  color: var(--_dso-button-secondary-hover-color, #275937);\n}\n.dso-map:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #275937);\n  border-color: var(--_dso-button-secondary-active-border-color, #275937);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\n.dso-map[disabled], .dso-map[disabled]:hover {\n  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\n.dso-map.dso-small {\n  line-height: 1rem;\n}\n.dso-map.dso-small dso-icon,\n.dso-map.dso-small svg.di, .dso-map.dso-small.extern::after, .dso-map.dso-small.download::after, .dso-map.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.dso-map.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.dso-map.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.dso-map.dso-extra-small {\n  line-height: 1rem;\n}\n.dso-map.dso-extra-small dso-icon,\n.dso-map.dso-extra-small svg.di, .dso-map.dso-extra-small.extern::after, .dso-map.dso-extra-small.download::after, .dso-map.dso-extra-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.dso-map.dso-extra-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.dso-map.dso-extra-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.dso-map.dso-extra-small {\n  padding-block: 9px;\n}\n.dso-map dso-icon:has(+ span:not(.sr-only)),\n.dso-map svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\n.dso-map span:not(.sr-only) + dso-icon,\n.dso-map span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.dso-map dso-icon + span:not(.sr-only),\n.dso-map svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\n.dso-map.dso-spinner-left[disabled], .dso-map.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.dso-map.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.dso-map.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.dso-map.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.dso-map.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.dso-map {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  border: 0;\n  font-weight: 600;\n  margin-inline-end: 16px;\n  padding-block: 8px;\n  padding-inline: 16px;\n  white-space: nowrap;\n}\n.dso-map:focus, .dso-map:focus-visible {\n  outline-offset: -1px;\n}\n.dso-map:has(span.sr-only):has(dso-icon, svg.di) {\n  padding: 8px;\n  min-inline-size: auto;\n  block-size: 40px;\n  inline-size: 40px;\n}\n.dso-map {\n  padding-inline: 8px;\n  padding-block: 8px;\n  border: 0;\n  margin-inline-end: 0;\n  box-shadow: var(--_dso-icon-button-map-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.3));\n  border-radius: var(--_dso-icon-button-map-border-radius, 4px);\n}\n\n.icon-button {\n  min-inline-size: auto;\n  cursor: pointer;\n}\n.icon-button[disabled] {\n  cursor: default;\n}";
+const IconButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsoClick = createEvent(this, "dsoClick", 3);
+        /**
+         * The variant of the Icon Button.
+         */
+        this.variant = "secondary";
+        /**
+         * The placement of the tooltip on hover and focus of the Icon Button.
+         */
+        this.tooltipPlacement = "top";
+        /**
+         * To disable the Icon Button
+         */
+        this.disabled = false;
+        this.showTooltip = false;
+        this.lastClickTime = 0;
+        this.tooltipShowDelay = 500;
+        this.handleShowTooltip = () => {
+            if (this.disabled) {
+                return;
+            }
+            // Don't show the tooltip if the button is clicked within 500ms of the last click
+            if (Date.now() - this.lastClickTime < this.tooltipShowDelay) {
+                return;
+            }
+            if (this.tooltipTimeout) {
+                clearTimeout(this.tooltipTimeout);
+            }
+            this.tooltipTimeout = window.setTimeout(() => {
+                var _a;
+                this.showTooltip = true;
+                (_a = this.tooltipElRef) === null || _a === void 0 ? void 0 : _a.showPopover();
+                if (!this.cleanUp && this.buttonElRef && this.tooltipElRef && this.tipArrowElRef) {
+                    this.cleanUp = positionTooltip({
+                        referenceElement: this.buttonElRef,
+                        tipRef: this.tooltipElRef,
+                        tipArrowRef: this.tipArrowElRef,
+                        placementTip: this.tooltipPlacement,
+                        topPositionSmallViewPort: false,
+                        halfMainAxisOffset: false,
+                        forceVisible: true,
+                    });
+                }
+            }, this.tooltipShowDelay);
+        };
+        this.handleHideTooltip = () => {
+            var _a;
+            if (this.tooltipTimeout) {
+                clearTimeout(this.tooltipTimeout);
+            }
+            this.showTooltip = false;
+            (_a = this.tooltipElRef) === null || _a === void 0 ? void 0 : _a.hidePopover();
+            if (!this.showTooltip && this.cleanUp) {
+                this.cleanUp();
+                this.cleanUp = undefined;
+            }
+        };
+        this.handleClick = (e) => {
+            this.lastClickTime = Date.now();
+            this.handleHideTooltip();
+            this.dsoClick.emit({ originalEvent: e });
+        };
+    }
+    /**
+     * Focuses the button.
+     */
+    async setFocus() {
+        var _a;
+        (_a = this.buttonElRef) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    render() {
+        return (h("button", { key: '205d7a8341a9637bf590025963bf26fe5dc68fc9', ref: (el) => (this.buttonElRef = el), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: 'c4e2286cdf4e165c9fdf934ca4488f4e0bb7bc46', icon: this.icon }), h(Tooltip, { key: 'dd5eae4e76a0048852d9d4137a6cad0b249c5101', visible: this.showTooltip, onAfterHidden: this.handleHideTooltip, tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label)));
+    }
+};
+IconButton.style = iconButtonCss;
+export { IconButton as dso_icon_button };
+//# sourceMappingURL=dso-icon-button.entry.js.map
+//# sourceMappingURL=dso-icon-button.entry.js.map

package/dist/esm/dso-icon-button.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dso-icon-button.entry.js","sources":["src/functional-components/tooltip/tooltip.functional-component.tsx","src/components/icon-button/icon-button.scss?tag=dso-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\ninterface TooltipProps {\r\n visible: boolean;\r\n onAfterHidden: () => void;\r\n tipElementRef: (ref: HTMLDivElement | undefined) => void;\r\n tipArrowElementRef: (ref: HTMLSpanElement | undefined) => void;\r\n}\r\n\r\nexport const Tooltip: FunctionalComponent<TooltipProps> = (\r\n { visible, onAfterHidden, tipElementRef, tipArrowElementRef },\r\n children,\r\n) => (\r\n <div\r\n popover=\"manual\"\r\n id=\"tooltip\"\r\n class={clsx([\"dso-tooltip\", { visible }])}\r\n ref={tipElementRef}\r\n onTransitionEnd={(e) => {\r\n e.stopPropagation();\r\n\r\n if (e.propertyName === \"opacity\" && !visible) {\r\n onAfterHidden();\r\n }\r\n }}\r\n >\r\n <span class=\"tooltip-arrow\" ref={tipArrowElementRef}></span>\r\n <div class=\"tooltip-inner\">{children}</div>\r\n </div>\r\n);\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"../../functional-components/tooltip\";\r\n\r\n@include tooltip.include(colors.$grijs-60, 4px, units.$u1, 0, units.$u1);\r\n\r\n:host {\r\n display: inline-block;\r\n line-height: 1;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-secondary {\r\n @include button.secondary();\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n padding-inline: calc(#{units.$u1} - 1px);\r\n padding-block: calc(#{units.$u1} - 1px);\r\n }\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.base();\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n padding-inline: 0;\r\n padding-block: 0;\r\n\r\n color: var(--_dso-icon-button-tertiary-color, button.$tertiary-color);\r\n background-color: transparent;\r\n border: 0;\r\n }\r\n\r\n &:not([disabled]) {\r\n &:hover {\r\n color: var(\r\n --_dso-icon-button-tertiary-hover-color,\r\n var(--_dso-icon-button-tertiary-color, button.$tertiary-hover-color)\r\n );\r\n }\r\n\r\n &:active {\r\n color: var(\r\n --_dso-icon-button-tertiary-active-color,\r\n var(--_dso-icon-button-tertiary-color, button.$tertiary-hover-color)\r\n );\r\n }\r\n }\r\n\r\n &[disabled] {\r\n color: var(\r\n --_dso-icon-button-tertiary-disabled-color,\r\n var(--_dso-icon-button-tertiary-color, button.$tertiary-disabled-color)\r\n );\r\n }\r\n}\r\n\r\n.dso-map {\r\n @include button.map();\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n padding-inline: units.$u1;\r\n padding-block: units.$u1;\r\n border: 0;\r\n margin-inline-end: 0;\r\n box-shadow: var(--_dso-icon-button-map-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.3));\r\n border-radius: var(--_dso-icon-button-map-border-radius, button.$border-radius);\r\n }\r\n}\r\n\r\n.icon-button {\r\n min-inline-size: auto;\r\n cursor: pointer;\r\n\r\n &[disabled] {\r\n cursor: default;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../functional-components/tooltip/position-tooltip.function\";\r\nimport { Tooltip } from \"../../functional-components/tooltip/tooltip.functional-component\";\r\nimport { TooltipClean, TooltipPlacement } from \"../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\nimport { IconButtonClickEvent, IconButtonVariant } from \"./icon-button.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-icon-button\",\r\n styleUrl: \"icon-button.scss\",\r\n shadow: true,\r\n})\r\nexport class IconButton implements ComponentInterface {\r\n /**\r\n * The alias of the icon in the button.\r\n */\r\n @Prop({ reflect: true })\r\n icon!: string | undefined;\r\n\r\n /**\r\n * The label of the Icon Button which is shown on hover in a tooltip.\r\n */\r\n @Prop({ reflect: true })\r\n label!: string | undefined;\r\n\r\n /**\r\n * The variant of the Icon Button.\r\n */\r\n @Prop({ reflect: true })\r\n variant?: IconButtonVariant = \"secondary\";\r\n\r\n /**\r\n * The placement of the tooltip on hover and focus of the Icon Button.\r\n */\r\n @Prop({ reflect: true })\r\n tooltipPlacement: TooltipPlacement = \"top\";\r\n\r\n /**\r\n * To disable the Icon Button\r\n */\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /**\r\n * Emitted when the user clicks the Icon Button.\r\n */\r\n @Event({ bubbles: false })\r\n dsoClick!: EventEmitter<IconButtonClickEvent>;\r\n\r\n @State()\r\n showTooltip = false;\r\n\r\n /**\r\n * Focuses the button.\r\n */\r\n @Method()\r\n async setFocus() {\r\n this.buttonElRef?.focus();\r\n }\r\n\r\n private buttonElRef?: HTMLButtonElement;\r\n private tooltipElRef?: HTMLDivElement;\r\n private tipArrowElRef?: HTMLSpanElement;\r\n private tooltipTimeout?: number;\r\n private cleanUp: TooltipClean | undefined;\r\n private lastClickTime = 0;\r\n private tooltipShowDelay = 500;\r\n\r\n private handleShowTooltip = () => {\r\n if (this.disabled) {\r\n return;\r\n }\r\n\r\n // Don't show the tooltip if the button is clicked within 500ms of the last click\r\n if (Date.now() - this.lastClickTime < this.tooltipShowDelay) {\r\n return;\r\n }\r\n\r\n if (this.tooltipTimeout) {\r\n clearTimeout(this.tooltipTimeout);\r\n }\r\n\r\n this.tooltipTimeout = window.setTimeout(() => {\r\n this.showTooltip = true;\r\n this.tooltipElRef?.showPopover();\r\n\r\n if (!this.cleanUp && this.buttonElRef && this.tooltipElRef && this.tipArrowElRef) {\r\n this.cleanUp = positionTooltip({\r\n referenceElement: this.buttonElRef,\r\n tipRef: this.tooltipElRef,\r\n tipArrowRef: this.tipArrowElRef,\r\n placementTip: this.tooltipPlacement,\r\n topPositionSmallViewPort: false,\r\n halfMainAxisOffset: false,\r\n forceVisible: true,\r\n });\r\n }\r\n }, this.tooltipShowDelay);\r\n };\r\n\r\n private handleHideTooltip = () => {\r\n if (this.tooltipTimeout) {\r\n clearTimeout(this.tooltipTimeout);\r\n }\r\n\r\n this.showTooltip = false;\r\n this.tooltipElRef?.hidePopover();\r\n\r\n if (!this.showTooltip && this.cleanUp) {\r\n this.cleanUp();\r\n this.cleanUp = undefined;\r\n }\r\n };\r\n\r\n private handleClick = (e: MouseEvent) => {\r\n this.lastClickTime = Date.now();\r\n this.handleHideTooltip();\r\n this.dsoClick.emit({ originalEvent: e });\r\n };\r\n\r\n render() {\r\n return (\r\n <button\r\n ref={(el) => (this.buttonElRef = el)}\r\n type=\"button\"\r\n disabled={this.disabled}\r\n aria-label={this.label}\r\n class={`icon-button dso-${this.variant}`}\r\n onMouseEnter={this.handleShowTooltip}\r\n onMouseLeave={this.handleHideTooltip}\r\n onFocus={this.handleShowTooltip}\r\n onBlur={this.handleHideTooltip}\r\n onClick={this.handleClick}\r\n >\r\n <dso-icon icon={this.icon} />\r\n <Tooltip\r\n visible={this.showTooltip}\r\n onAfterHidden={this.handleHideTooltip}\r\n tipElementRef={(element) => (this.tooltipElRef = element)}\r\n tipArrowElementRef={(element) => (this.tipArrowElRef = element)}\r\n >\r\n {this.label}\r\n </Tooltip>\r\n </button>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

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

@@ -101,8 +101,8 @@ var circleNotch = `<svg id="circle-notch" xmlns="http://www.w3.org/2000/svg" vie
 </svg>
 `;
-var clock = `<svg id="clock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path fill="currentColor" d="M12,3a9,9,0,1,1-9,9,9,9,0,0,1,9-9m0-2A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm1,11h0V6.17a1,1,0,0,0-2,0v5.42l-3.21,3.2a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l3.49-3.5a.91.91,0,0,0,.22-.33A.84.84,0,0,0,13,12Z"/>
+var clock = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M12 5.25C13.335 5.25 14.6401 5.64588 15.7501 6.38758C16.8601 7.12928 17.7253 8.18349 18.2362 9.41689C18.7471 10.6503 18.8808 12.0075 18.6203 13.3169C18.3599 14.6262 17.717 15.829 16.773 16.773C15.829 17.717 14.6262 18.3599 13.3169 18.6203C12.0075 18.8808 10.6503 18.7471 9.41689 18.2362C8.18349 17.7253 7.12928 16.8601 6.38758 15.7501C5.64588 14.6401 5.25 13.335 5.25 12C5.25 10.2098 5.96116 8.4929 7.22703 7.22703C8.4929 5.96116 10.2098 5.25 12 5.25ZM12 3.75C10.3683 3.75 8.77326 4.23385 7.41655 5.14038C6.05984 6.0469 5.00242 7.33537 4.378 8.84286C3.75357 10.3504 3.5902 12.0092 3.90853 13.6095C4.22685 15.2098 5.01259 16.6798 6.16637 17.8336C7.32016 18.9874 8.79017 19.7732 10.3905 20.0915C11.9909 20.4098 13.6497 20.2464 15.1571 19.622C16.6646 18.9976 17.9531 17.9402 18.8596 16.5835C19.7662 15.2268 20.25 13.6317 20.25 12C20.25 9.81196 19.3808 7.71354 17.8336 6.16637C16.2865 4.61919 14.188 3.75 12 3.75ZM12.75 12V7.6275C12.75 7.42859 12.671 7.23782 12.5303 7.09717C12.3897 6.95652 12.1989 6.8775 12 6.8775C11.8011 6.8775 11.6103 6.95652 11.4697 7.09717C11.329 7.23782 11.25 7.42859 11.25 7.6275V11.6925L8.8425 14.0925C8.77221 14.1622 8.71641 14.2452 8.67834 14.3366C8.64026 14.428 8.62066 14.526 8.62066 14.625C8.62066 14.724 8.64026 14.822 8.67834 14.9134C8.71641 15.0048 8.77221 15.0878 8.8425 15.1575C8.91223 15.2278 8.99518 15.2836 9.08657 15.3217C9.17797 15.3597 9.276 15.3793 9.375 15.3793C9.47401 15.3793 9.57204 15.3597 9.66344 15.3217C9.75483 15.2836 9.83778 15.2278 9.9075 15.1575L12.525 12.5325C12.5975 12.4631 12.6539 12.3786 12.69 12.285C12.732 12.196 12.7525 12.0984 12.75 12Z" fill="currentColor"/>
 </svg>
 `;
@@ -244,11 +244,9 @@ var lightBulb = `<svg id="light-bulb" xmlns="http://www.w3.org/2000/svg" viewBox
 `;
 var locationOutline = `<svg id="location-outline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <g>
-    <ellipse cx="12" cy="8.57" rx="4.5" ry="4.29" fill="none"/>
-    <path d="M12,1.71A7.28,7.28,0,0,0,4.8,8.57c0,6,6.2,13.72,7.2,13.72s7.2-7.72,7.2-13.72C19.2,5.14,15.6,1.71,12,1.71Zm0,11.15A4.4,4.4,0,0,1,7.5,8.57,4.39,4.39,0,0,1,12,4.29a4.39,4.39,0,0,1,4.5,4.28A4.4,4.4,0,0,1,12,12.86Z" fill="#e17000"/>
-    <path d="M12,0C7.21,0,3,4,3,8.57c0,3.85,2.18,7.91,3.48,10C8,21,10.25,24,12,24s4-3,5.53-5.45c1.3-2.07,3.47-6.13,3.47-10C21,4.17,16.63,0,12,0Zm0,22.29c-1,0-7.2-7.72-7.2-13.72A7.28,7.28,0,0,1,12,1.71c3.6,0,7.2,3.43,7.2,6.86C19.2,14.57,13,22.29,12,22.29Z"/>
-  </g>
+  <path fill="#E17000" d="M12 5.14a4.853 4.853 0 0 0-4.8 4.573c0 4 4.133 9.147 4.8 9.147.667 0 4.8-5.147 4.8-9.147 0-2.286-2.4-4.573-4.8-4.573Zm0 7.433a2.933 2.933 0 0 1-3-2.86 2.927 2.927 0 0 1 3-2.853 2.927 2.927 0 0 1 3 2.853 2.933 2.933 0 0 1-3 2.86Z"/>
+  <path fill="#000" d="M12 4C8.807 4 6 6.667 6 9.713c0 2.567 1.453 5.274 2.32 6.667C9.333 18 10.833 20 12 20c1.167 0 2.667-2 3.687-3.633C16.553 14.987 18 12.28 18 9.7 18 6.78 15.087 4 12 4Zm0 14.86c-.667 0-4.8-5.147-4.8-9.147A4.853 4.853 0 0 1 12 5.14c2.4 0 4.8 2.287 4.8 4.573 0 4-4.133 9.147-4.8 9.147Z"/>
+  <path fill="#191919" d="M13.667 9.745c0-.831-.716-1.558-1.667-1.558-.95 0-1.667.727-1.667 1.558 0 .83.716 1.558 1.667 1.558.95 0 1.667-.728 1.667-1.558Zm1.333 0c0 1.626-1.373 2.89-3 2.89s-3-1.264-3-2.89c0-1.627 1.373-2.892 3-2.892s3 1.265 3 2.892Z"/>
 </svg>
 `;
@@ -553,10 +551,9 @@ var trash = `<svg id="trash" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24
 </svg>
 `;
-var undo = `<svg id="undo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path fill="currentColor" d="M11.63,1A11.49,11.49,0,0,0,3.55,4.27L1.74,2.46c-.41-.41-.74-.27-.74.3V8.51a1,1,0,0,0,1,1.05H7.79c.58,0,.72-.34.31-.74L5.31,6a8.94,8.94,0,0,1,6.32-2.59A8.71,8.71,0,0,1,20.47,12a8.71,8.71,0,0,1-8.84,8.56,8.82,8.82,0,0,1-8.2-5.35,1.27,1.27,0,0,0-1.64-.68,1.22,1.22,0,0,0-.7,1.6A11.34,11.34,0,0,0,11.63,23,11.2,11.2,0,0,0,23,12,11.2,11.2,0,0,0,11.63,1Z"/>
-</svg>
-`;
+var undo = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M12.2482 4.50092C10.1904 4.49166 8.21155 5.29244 6.73939 6.73019L5.50537 5.49625C5.22584 5.21674 5.00085 5.31218 5.00085 5.70077L5.00085 9.62075C4.99151 9.80738 5.05919 9.98967 5.18808 10.125C5.31696 10.2603 5.49575 10.3368 5.68263 10.3366H9.63014C10.0256 10.3366 10.121 10.1048 9.84149 9.83208L7.93932 7.90959C9.08529 6.77398 10.6348 6.13902 12.2482 6.1439C13.8243 6.12022 15.3452 6.72416 16.4757 7.82262C17.6062 8.92108 18.2536 10.4239 18.2751 12C18.2191 15.2742 15.5227 17.885 12.2482 17.8357C9.81893 17.8607 7.61322 16.4217 6.65758 14.1884C6.47273 13.7557 5.97622 13.5499 5.53946 13.7248C5.32974 13.8039 5.16082 13.9643 5.07098 14.1696C4.98113 14.375 4.97797 14.6079 5.06221 14.8156C6.29242 17.6841 9.12697 19.5315 12.2482 19.4991C16.4577 19.5636 19.9253 16.2091 20 12C19.9253 7.7909 16.4577 4.43636 12.2482 4.50092Z"/>
+</svg>`;
 var userLine = `<svg id="user-line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path fill="currentColor" d="M11.91,12h.18A4.93,4.93,0,0,0,17,7.09V6.91A4.93,4.93,0,0,0,12.09,2h-.18A4.93,4.93,0,0,0,7,6.91v.18A4.93,4.93,0,0,0,11.91,12ZM9,6.91A2.92,2.92,0,0,1,11.91,4h.18A2.92,2.92,0,0,1,15,6.91v.18A2.92,2.92,0,0,1,12.09,10h-.18A2.92,2.92,0,0,1,9,7.09ZM20.86,19.73l-2.19-5.4a4.63,4.63,0,0,0-3-2.26A6.8,6.8,0,0,1,8.51,12a4.82,4.82,0,0,0-3.18,2.33l-2.19,5.4C2.75,20.81,3.17,22,4.51,22h15C20.83,22,21.25,20.81,20.86,19.73ZM5.2,20l2-4.87a2.29,2.29,0,0,1,1.18-.94,8.75,8.75,0,0,0,3.84.88,8.82,8.82,0,0,0,3.65-.8,2.08,2.08,0,0,1,1,.84l2,4.89Z"/>
@@ -699,7 +696,7 @@ const Icon = class {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: '487ea1db4f0bb118860e08fe8d7fc16ca1705f94', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: 'b1e25292f9290e70a6328fd2b2318a06b7a7b281', class: "icon-container", innerHTML: icon.svg });
         }
     }
 };