npm - @dso-toolkit/core - Versions diffs - 72.2.0 → 73.0.0 - Mend

@dso-toolkit/core 72.2.0 → 73.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 (306) 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/header.scss?tag=dso-header&encapsulation=shadow","src/components/header/header.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-header\": {\r\n menu: \"Menu\",\r\n login: \"Log in\",\r\n logout: \"Log out\",\r\n help: \"Help\",\r\n overflowMenu: \"More\",\r\n },\r\n },\r\n nl: {\r\n \"dso-header\": {\r\n menu: \"Menu\",\r\n login: \"Inloggen\",\r\n logout: \"Uitloggen\",\r\n help: \"Help\",\r\n overflowMenu: \"Meer\",\r\n userHome: \"Mijn Omgevingsloket\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n@use \"header.variables\" as core-header-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin nav-item-border($color) {\r\n border-block-end: 4px solid $color;\r\n}\r\n\r\n@mixin nav-item-main {\r\n font-size: 1.25em;\r\n line-height: 1;\r\n margin-block-start: units.$u1;\r\n padding-block: units.$u2;\r\n padding-inline: 0;\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.dso-header {\r\n border-block-end: 1px solid colors.$grijs-20;\r\n display: flex;\r\n flex-wrap: wrap;\r\n position: relative;\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n align-items: center;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {\r\n &.use-drop-down {\r\n flex-wrap: nowrap;\r\n }\r\n }\r\n\r\n .dso-nav {\r\n border: 0;\r\n }\r\n}\r\n\r\n.logo-container {\r\n flex: 1 1 12.5rem;\r\n margin-inline-end: units.$u3;\r\n padding-block-end: units.$u2;\r\n padding-block-start: units.$u2;\r\n}\r\n\r\n.dso-header-session {\r\n display: flex;\r\n align-items: center;\r\n margin-inline-start: auto;\r\n\r\n .profile,\r\n .login,\r\n .logout,\r\n .help {\r\n .dso-tertiary {\r\n display: flex;\r\n gap: 0.5rem;\r\n\r\n cursor: pointer;\r\n\r\n border: 0;\r\n\r\n background-color: transparent;\r\n\r\n padding-inline-start: 0;\r\n\r\n outline-offset: 2px;\r\n\r\n font-family: typography.$font-family-base;\r\n color: colors.$grasgroen;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n line-height: 1.5;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n\r\n .profile {\r\n margin-inline-start: units.$u1;\r\n\r\n + .logout,\r\n ~ .help {\r\n border-inline-start: 3px solid colors.$grijs-20;\r\n margin-inline-start: units.$u1;\r\n padding-inline-start: units.$u1;\r\n }\r\n }\r\n\r\n .help {\r\n a,\r\n button {\r\n display: flex;\r\n }\r\n }\r\n}\r\n\r\n.dso-navbar {\r\n flex-basis: 100%;\r\n}\r\n\r\ndso-dropdown-menu {\r\n @include dropdown-menu.children();\r\n\r\n button {\r\n background-color: transparent;\r\n border: 0;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n align-items: center;\r\n position: relative;\r\n\r\n dso-icon {\r\n inline-size: units.$u3;\r\n block-size: units.$u3;\r\n margin-inline-start: units.$u1;\r\n padding-block-start: units.$u1 * 0.25;\r\n }\r\n\r\n &[aria-expanded=\"true\"] {\r\n dso-icon {\r\n transform: rotate(180deg);\r\n }\r\n }\r\n }\r\n\r\n .dso-dropdown-options {\r\n border: 0;\r\n border-radius: 0;\r\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n inline-size: 375px;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n inline-size: 100%;\r\n }\r\n\r\n ul {\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n\r\n li {\r\n a,\r\n button {\r\n display: block;\r\n padding: units.$u2;\r\n color: colors.$bosgroen;\r\n font-size: 1.25rem;\r\n white-space: pre-wrap;\r\n text-decoration: none;\r\n\r\n &:focus-visible {\r\n background-color: colors.$grasgroen;\r\n color: colors.$wit;\r\n }\r\n\r\n &:hover {\r\n background-color: colors.$wit;\r\n color: colors.$bosgroen;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n button {\r\n inline-size: 100%;\r\n text-align: start;\r\n\r\n dso-icon {\r\n margin-inline-start: units.$u1;\r\n }\r\n }\r\n\r\n &.dso-active {\r\n a {\r\n font-weight: 600;\r\n }\r\n }\r\n\r\n + li {\r\n border-block-start: 1px solid colors.$grijs-20;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dropdown {\r\n margin-inline-start: auto;\r\n display: flex;\r\n align-items: center;\r\n\r\n dso-dropdown-menu {\r\n position: static;\r\n\r\n .dso-dropdown-options {\r\n inset-inline-end: 0;\r\n inset-block-start: 100%;\r\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n > button {\r\n color: colors.$grasgroen;\r\n font-size: typography.$font-size-base;\r\n font-weight: 600;\r\n line-height: normal;\r\n position: relative;\r\n\r\n &::after {\r\n margin-inline-start: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0px;\r\n inset-block-start: 50%;\r\n transform: translateY(-50%);\r\n }\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-nav {\r\n align-items: end;\r\n column-gap: units.$u4;\r\n display: flex;\r\n list-style: none;\r\n margin-block-end: 0;\r\n margin-block-start: 0;\r\n padding-inline-start: 0;\r\n\r\n > li {\r\n margin-block-end: 4px;\r\n\r\n > a {\r\n display: block;\r\n\r\n &,\r\n &:hover,\r\n &:focus,\r\n &:visited {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n &.dso-active,\r\n &.is-active {\r\n margin-block-end: 0;\r\n\r\n > a {\r\n @include nav-item-border(core-header-variables.$navigation-selected-color);\r\n\r\n font-weight: bold;\r\n }\r\n }\r\n }\r\n\r\n &.dso-nav-main {\r\n display: flex !important;\r\n\r\n > li {\r\n > a {\r\n @include anchor.reverse();\r\n @include nav-item-main();\r\n\r\n // stylelint-disable-next-line declaration-property-value-disallowed-list -- no wrapping wanted because of icon\r\n white-space: nowrap;\r\n }\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n inset-inline-start: units.$ru2 * -1 !important;\r\n inset-block-start: 3px !important;\r\n }\r\n\r\n button {\r\n @include nav-item-main();\r\n\r\n align-items: flex-end;\r\n color: colors.$bosgroen;\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n\r\n &::after {\r\n margin-inline-start: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0px;\r\n inset-block-start: auto;\r\n transform: none;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .menu-user-home {\r\n margin-inline-start: auto;\r\n\r\n dso-icon {\r\n block-size: 1em;\r\n margin-inline-end: units.$u1;\r\n position: relative;\r\n inset-block-start: -2px;\r\n inline-size: 1.2em;\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, h, Prop, State, Watch } from \"@stencil/core\";\r\n\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HeaderEvent, HeaderMenuItem, HeaderNavigationType } from \"./header.interfaces\";\r\nimport { translations } from \"./header.i18n\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\n@Component({\r\n tag: \"dso-header\",\r\n styleUrl: \"header.scss\",\r\n shadow: true,\r\n})\r\nexport class Header {\r\n private clickHandler(\r\n e: MouseEvent,\r\n type: HeaderNavigationType,\r\n options?: { menuItem?: HeaderMenuItem; url?: string },\r\n ) {\r\n this.dsoHeaderClick.emit({\r\n originalEvent: e,\r\n isModifiedEvent: isModifiedEvent(e),\r\n type,\r\n menuItem: options?.menuItem,\r\n url: options?.url ?? options?.menuItem?.url,\r\n });\r\n }\r\n\r\n private dropdownElement?: HTMLElement;\r\n\r\n @Element()\r\n host!: HTMLDsoHeaderElement;\r\n\r\n /*\r\n The main menu items.\r\n /\r\n @Prop()\r\n mainMenu?: HeaderMenuItem[] = [];\r\n\r\n /\r\n Either have the dropdown menu appear automatically or always.\r\n /\r\n @Prop()\r\n useDropDownMenu: \"always\" \| \"auto\" = \"auto\";\r\n\r\n /\r\n Used to show the login/logout option. 'none' renders nothing.\r\n /\r\n @Prop()\r\n authStatus: \"none\" \| \"loggedIn\" \| \"loggedOut\" = \"none\";\r\n\r\n /\r\n When the `authStatus` is `loggedOut` a loginUrl can be provided.\r\n * The login button will then render as an anchor.\r\n /\r\n @Prop()\r\n loginUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"logout\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n logoutUrl?: string;\r\n\r\n /\r\n Show a help-button or link in the header\r\n /\r\n @Prop()\r\n showHelp? = false;\r\n\r\n /\r\n The URL to open when the user activates \"help\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n helpUrl?: string;\r\n\r\n /\r\n The name to show when the user is logged in.\r\n /\r\n @Prop()\r\n userProfileName?: string;\r\n\r\n /\r\n The URL to open when the user activates the profile url.\r\n /\r\n @Prop()\r\n userProfileUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeUrl?: string;\r\n\r\n /\r\n Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeActive?: boolean;\r\n\r\n @State()\r\n showDropDown?: boolean;\r\n\r\n @State()\r\n overflowMenuItems = 0;\r\n\r\n @State()\r\n dropdownOptionsOffset = 0;\r\n\r\n /\r\n Emitted when something in the header is selected.\r\n \r\n `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n */\r\n @Event()\r\n dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n @Watch(\"useDropDownMenu\")\r\n setShowDropDown(value: \"always\" \| \"auto\") {\r\n if (value === \"auto\") {\r\n this.setDropDownMenu();\r\n\r\n return;\r\n }\r\n\r\n this.showDropDown = value === \"always\";\r\n }\r\n\r\n private wrapper: HTMLDivElement \| undefined;\r\n\r\n private nav: HTMLUListElement \| undefined;\r\n\r\n private shrinkMenuToFit() {\r\n if (!this.wrapper \|\| !this.nav) {\r\n return;\r\n }\r\n\r\n if (this.wrapper.clientWidth >= this.nav.clientWidth) {\r\n return;\r\n }\r\n\r\n if (this.mainMenu && this.overflowMenuItems >= this.mainMenu.length) {\r\n return;\r\n }\r\n\r\n this.overflowMenuItems++;\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n componentDidRender() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n\r\n return;\r\n }\r\n\r\n window.setTimeout(() => this.shrinkMenuToFit(), 0);\r\n }\r\n\r\n componentDidLoad() {\r\n this.setShowDropDown(this.useDropDownMenu);\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }\r\n\r\n private setOverflowMenu() {\r\n if (this.showDropDown) {\r\n return;\r\n }\r\n\r\n if (this.overflowMenuItems !== 0) {\r\n this.overflowMenuItems = 0;\r\n return;\r\n }\r\n\r\n this.shrinkMenuToFit();\r\n }\r\n\r\n private setDropDownMenu() {\r\n if (this.useDropDownMenu !== \"auto\") {\r\n return;\r\n }\r\n\r\n this.showDropDown = window.innerWidth < minDesktopViewportWidth;\r\n }\r\n\r\n private calculateDropdownOptionsOffset() {\r\n if (!this.dropdownElement) {\r\n return 0;\r\n }\r\n\r\n return (\r\n this.host.clientHeight -\r\n (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n );\r\n }\r\n\r\n private onWindowResize = debounce(() => {\r\n this.dropdownElement?.removeAttribute(\"open\");\r\n this.dropdownElement?.removeAttribute(\"tabindex\");\r\n\r\n this.setDropDownMenu();\r\n this.setOverflowMenu();\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }, 100);\r\n\r\n connectedCallback() {\r\n window.addEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n disconnectedCallback() {\r\n window.removeEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n private MenuItem = (item: HeaderMenuItem) => {\r\n return (\r\n <li class={item.active ? \"dso-active\" : undefined}>\r\n <a\r\n href={item.url}\r\n aria-current={item.active ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem: item })}\r\n >\r\n {item.label}\r\n </a>\r\n </li>\r\n );\r\n };\r\n\r\n render() {\r\n // Prevent 'flickering' when useDropDownMenu = 'always'\r\n if (this.showDropDown === undefined) {\r\n return;\r\n }\r\n\r\n return (\r\n <>\r\n <div\r\n class={clsx(\"dso-header\", {\r\n [\"use-drop-down\"]: this.showDropDown,\r\n })}\r\n ref={(element) => (this.wrapper = element)}\r\n >\r\n <div class=\"logo-container\">\r\n <slot name=\"logo\" />\r\n </div>\r\n {this.showDropDown &&\r\n this.mainMenu &&\r\n (this.mainMenu.length > 0 \|\| this.userHomeUrl \|\| this.authStatus !== \"none\") && (\r\n <div class=\"dropdown\">\r\n <dso-dropdown-menu\r\n dropdown-align=\"right\"\r\n strategy=\"absolute\"\r\n dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n ref={(element) => (this.dropdownElement = element)}\r\n >\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"menu\")}</span>\r\n <dso-icon icon=\"chevron-down\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu.map(this.MenuItem)}\r\n {this.userHomeUrl && (\r\n <li>\r\n <a\r\n href={this.userHomeUrl}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <li>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n <span class=\"profile-label\"> - Mijn profiel</span>\r\n </a>\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <li>\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <li>\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.showHelp && (\r\n <li>\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button type=\"button\" class=\"dso-tertiary\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </div>\r\n )}\r\n {!this.showDropDown && (\r\n <>\r\n <div class=\"dso-header-session\">\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <div class=\"profile\">\r\n <a\r\n href={this.userProfileUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n </a>\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <div class=\"login\">\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <div class=\"logout\">\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.showHelp && (\r\n <div class=\"help\">\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {((this.mainMenu && this.mainMenu.length > 0) \|\| this.userHomeUrl) && (\r\n <nav class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-main\" ref={(element) => (this.nav = element)}>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)\r\n .map(this.MenuItem)}\r\n {this.overflowMenuItems > 0 && (\r\n <li>\r\n <dso-dropdown-menu placement=\"bottom\">\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"overflowMenu\")}</span>\r\n <dso-icon icon=\"chevron-down\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter(\r\n (_, index) =>\r\n this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems,\r\n )\r\n .map(this.MenuItem)}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </li>\r\n )}\r\n {this.userHomeUrl && (\r\n <li class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}>\r\n <a\r\n href={this.userHomeUrl}\r\n aria-current={this.userHomeActive ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n <dso-icon icon=\"user-line\"></dso-icon>\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n </ul>\r\n </nav>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"dso-header.entry.js","sources":["src/components/header/header.i18n.ts","src/components/header/header.scss?tag=dso-header&encapsulation=shadow","src/components/header/header.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-header\": {\r\n menu: \"Menu\",\r\n login: \"Log in\",\r\n logout: \"Log out\",\r\n help: \"Help\",\r\n overflowMenu: \"More\",\r\n },\r\n },\r\n nl: {\r\n \"dso-header\": {\r\n menu: \"Menu\",\r\n login: \"Inloggen\",\r\n logout: \"Uitloggen\",\r\n help: \"Help\",\r\n overflowMenu: \"Meer\",\r\n userHome: \"Mijn Omgevingsloket\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/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 margin-block-start: units.$u1;\r\n padding-block: units.$u2;\r\n padding-inline: 0;\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.dso-header {\r\n border-block-end: 1px solid colors.$grijs-20;\r\n display: flex;\r\n flex-wrap: wrap;\r\n position: relative;\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n align-items: center;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {\r\n &.use-drop-down {\r\n flex-wrap: nowrap;\r\n }\r\n }\r\n\r\n .dso-nav {\r\n border: 0;\r\n }\r\n}\r\n\r\n.logo-container {\r\n flex: 1 1 12.5rem;\r\n margin-inline-end: units.$u3;\r\n padding-block-end: units.$u2;\r\n padding-block-start: units.$u2;\r\n}\r\n\r\n.dso-header-session {\r\n display: flex;\r\n align-items: center;\r\n margin-inline-start: auto;\r\n\r\n .profile,\r\n .login,\r\n .logout,\r\n .help {\r\n .dso-tertiary {\r\n display: flex;\r\n gap: 0.5rem;\r\n\r\n cursor: pointer;\r\n\r\n border: 0;\r\n\r\n background-color: transparent;\r\n\r\n padding-inline-start: 0;\r\n\r\n outline-offset: 2px;\r\n\r\n font-family: typography.$font-family-base;\r\n color: colors.$grasgroen;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n line-height: 1.5;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n\r\n .profile {\r\n margin-inline-start: units.$u1;\r\n\r\n + .logout,\r\n ~ .help {\r\n border-inline-start: 3px solid colors.$grijs-20;\r\n margin-inline-start: units.$u1;\r\n padding-inline-start: units.$u1;\r\n }\r\n }\r\n\r\n .help {\r\n a,\r\n button {\r\n display: flex;\r\n }\r\n }\r\n}\r\n\r\n.dso-navbar {\r\n flex-basis: 100%;\r\n}\r\n\r\ndso-dropdown-menu {\r\n @include dropdown-menu.children();\r\n\r\n button {\r\n background-color: transparent;\r\n border: 0;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n align-items: center;\r\n position: relative;\r\n\r\n dso-icon {\r\n inline-size: units.$u3;\r\n block-size: units.$u3;\r\n margin-inline-start: units.$u1;\r\n padding-block-start: units.$u1 * 0.25;\r\n }\r\n\r\n &[aria-expanded=\"true\"] {\r\n dso-icon {\r\n transform: rotate(180deg);\r\n }\r\n }\r\n }\r\n\r\n .dso-dropdown-options {\r\n border: 0;\r\n border-radius: 0;\r\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n inline-size: 375px;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n inline-size: 100%;\r\n }\r\n\r\n ul {\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n\r\n li {\r\n a,\r\n button {\r\n display: block;\r\n padding: units.$u2;\r\n color: colors.$bosgroen;\r\n font-size: 1.25rem;\r\n white-space: pre-wrap;\r\n text-decoration: none;\r\n\r\n &:focus-visible {\r\n background-color: colors.$grasgroen;\r\n color: colors.$wit;\r\n }\r\n\r\n &:hover {\r\n background-color: colors.$wit;\r\n color: colors.$bosgroen;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n button {\r\n inline-size: 100%;\r\n text-align: start;\r\n\r\n dso-icon {\r\n margin-inline-start: units.$u1;\r\n }\r\n }\r\n\r\n &.dso-active {\r\n a {\r\n font-weight: 600;\r\n }\r\n }\r\n\r\n + li {\r\n border-block-start: 1px solid colors.$grijs-20;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dropdown {\r\n margin-inline-start: auto;\r\n display: flex;\r\n align-items: center;\r\n\r\n dso-dropdown-menu {\r\n position: static;\r\n\r\n .dso-dropdown-options {\r\n inset-inline-end: 0;\r\n inset-block-start: 100%;\r\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n > button {\r\n color: colors.$grasgroen;\r\n font-size: typography.$font-size-base;\r\n font-weight: 600;\r\n line-height: normal;\r\n position: relative;\r\n\r\n &::after {\r\n margin-inline-start: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0px;\r\n inset-block-start: 50%;\r\n transform: translateY(-50%);\r\n }\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-nav {\r\n align-items: end;\r\n column-gap: units.$u4;\r\n display: flex;\r\n list-style: none;\r\n margin-block-end: 0;\r\n margin-block-start: 0;\r\n padding-inline-start: 0;\r\n\r\n > li {\r\n margin-block-end: 4px;\r\n\r\n > a {\r\n display: block;\r\n\r\n &,\r\n &:hover,\r\n &:focus,\r\n &:visited {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n &.dso-active,\r\n &.is-active {\r\n margin-block-end: 0;\r\n\r\n > a {\r\n @include nav-item-border(core-header-variables.$navigation-selected-color);\r\n\r\n font-weight: bold;\r\n }\r\n }\r\n }\r\n\r\n &.dso-nav-main {\r\n display: flex !important;\r\n\r\n > li {\r\n > a {\r\n @include 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 .menu-user-home {\r\n margin-inline-start: auto;\r\n\r\n dso-icon {\r\n block-size: 1em;\r\n margin-inline-end: units.$u1;\r\n position: relative;\r\n inset-block-start: -2px;\r\n inline-size: 1.2em;\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, h, Prop, State, Watch } from \"@stencil/core\";\r\n\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HeaderEvent, HeaderMenuItem, HeaderNavigationType } from \"./header.interfaces\";\r\nimport { translations } from \"./header.i18n\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\n@Component({\r\n tag: \"dso-header\",\r\n styleUrl: \"header.scss\",\r\n shadow: true,\r\n})\r\nexport class Header {\r\n private clickHandler(\r\n e: MouseEvent,\r\n type: HeaderNavigationType,\r\n options?: { menuItem?: HeaderMenuItem; url?: string },\r\n ) {\r\n this.dsoHeaderClick.emit({\r\n originalEvent: e,\r\n isModifiedEvent: isModifiedEvent(e),\r\n type,\r\n menuItem: options?.menuItem,\r\n url: options?.url ?? options?.menuItem?.url,\r\n });\r\n }\r\n\r\n private dropdownElement?: HTMLElement;\r\n\r\n @Element()\r\n host!: HTMLDsoHeaderElement;\r\n\r\n /*\r\n The main menu items.\r\n /\r\n @Prop()\r\n mainMenu?: HeaderMenuItem[] = [];\r\n\r\n /\r\n Either have the dropdown menu appear automatically or always.\r\n /\r\n @Prop()\r\n useDropDownMenu: \"always\" \| \"auto\" = \"auto\";\r\n\r\n /\r\n Used to show the login/logout option. 'none' renders nothing.\r\n /\r\n @Prop()\r\n authStatus: \"none\" \| \"loggedIn\" \| \"loggedOut\" = \"none\";\r\n\r\n /\r\n When the `authStatus` is `loggedOut` a loginUrl can be provided.\r\n * The login button will then render as an anchor.\r\n /\r\n @Prop()\r\n loginUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"logout\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n logoutUrl?: string;\r\n\r\n /\r\n Show a help-button or link in the header\r\n /\r\n @Prop()\r\n showHelp? = false;\r\n\r\n /\r\n The URL to open when the user activates \"help\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n helpUrl?: string;\r\n\r\n /\r\n The name to show when the user is logged in.\r\n /\r\n @Prop()\r\n userProfileName?: string;\r\n\r\n /\r\n The URL to open when the user activates the profile url.\r\n /\r\n @Prop()\r\n userProfileUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeUrl?: string;\r\n\r\n /\r\n Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeActive?: boolean;\r\n\r\n @State()\r\n showDropDown?: boolean;\r\n\r\n @State()\r\n overflowMenuItems = 0;\r\n\r\n @State()\r\n dropdownOptionsOffset = 0;\r\n\r\n /\r\n Emitted when something in the header is selected.\r\n \r\n `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n */\r\n @Event()\r\n dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n @Watch(\"useDropDownMenu\")\r\n setShowDropDown(value: \"always\" \| \"auto\") {\r\n if (value === \"auto\") {\r\n this.setDropDownMenu();\r\n\r\n return;\r\n }\r\n\r\n this.showDropDown = value === \"always\";\r\n }\r\n\r\n private wrapper: HTMLDivElement \| undefined;\r\n\r\n private nav: HTMLUListElement \| undefined;\r\n\r\n private shrinkMenuToFit() {\r\n if (!this.wrapper \|\| !this.nav) {\r\n return;\r\n }\r\n\r\n if (this.wrapper.clientWidth >= this.nav.clientWidth) {\r\n return;\r\n }\r\n\r\n if (this.mainMenu && this.overflowMenuItems >= this.mainMenu.length) {\r\n return;\r\n }\r\n\r\n this.overflowMenuItems++;\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n componentDidRender() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n\r\n return;\r\n }\r\n\r\n window.setTimeout(() => this.shrinkMenuToFit(), 0);\r\n }\r\n\r\n componentDidLoad() {\r\n this.setShowDropDown(this.useDropDownMenu);\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }\r\n\r\n private setOverflowMenu() {\r\n if (this.showDropDown) {\r\n return;\r\n }\r\n\r\n if (this.overflowMenuItems !== 0) {\r\n this.overflowMenuItems = 0;\r\n return;\r\n }\r\n\r\n this.shrinkMenuToFit();\r\n }\r\n\r\n private setDropDownMenu() {\r\n if (this.useDropDownMenu !== \"auto\") {\r\n return;\r\n }\r\n\r\n this.showDropDown = window.innerWidth < minDesktopViewportWidth;\r\n }\r\n\r\n private calculateDropdownOptionsOffset() {\r\n if (!this.dropdownElement) {\r\n return 0;\r\n }\r\n\r\n return (\r\n this.host.clientHeight -\r\n (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n );\r\n }\r\n\r\n private onWindowResize = debounce(() => {\r\n this.dropdownElement?.removeAttribute(\"open\");\r\n this.dropdownElement?.removeAttribute(\"tabindex\");\r\n\r\n this.setDropDownMenu();\r\n this.setOverflowMenu();\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }, 100);\r\n\r\n connectedCallback() {\r\n window.addEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n disconnectedCallback() {\r\n window.removeEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n private MenuItem = (item: HeaderMenuItem) => {\r\n return (\r\n <li class={item.active ? \"dso-active\" : undefined}>\r\n <a\r\n href={item.url}\r\n aria-current={item.active ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem: item })}\r\n >\r\n {item.label}\r\n </a>\r\n </li>\r\n );\r\n };\r\n\r\n render() {\r\n // Prevent 'flickering' when useDropDownMenu = 'always'\r\n if (this.showDropDown === undefined) {\r\n return;\r\n }\r\n\r\n return (\r\n <>\r\n <div\r\n class={clsx(\"dso-header\", {\r\n [\"use-drop-down\"]: this.showDropDown,\r\n })}\r\n ref={(element) => (this.wrapper = element)}\r\n >\r\n <div class=\"logo-container\">\r\n <slot name=\"logo\" />\r\n </div>\r\n {this.showDropDown &&\r\n this.mainMenu &&\r\n (this.mainMenu.length > 0 \|\| this.userHomeUrl \|\| this.authStatus !== \"none\") && (\r\n <div class=\"dropdown\">\r\n <dso-dropdown-menu\r\n dropdown-align=\"right\"\r\n strategy=\"absolute\"\r\n dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n ref={(element) => (this.dropdownElement = element)}\r\n >\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"menu\")}</span>\r\n <dso-icon icon=\"chevron-down\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu.map(this.MenuItem)}\r\n {this.userHomeUrl && (\r\n <li>\r\n <a\r\n href={this.userHomeUrl}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <li>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n <span class=\"profile-label\"> - Mijn profiel</span>\r\n </a>\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <li>\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <li>\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.showHelp && (\r\n <li>\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button type=\"button\" class=\"dso-tertiary\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </div>\r\n )}\r\n {!this.showDropDown && (\r\n <>\r\n <div class=\"dso-header-session\">\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <div class=\"profile\">\r\n <a\r\n href={this.userProfileUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n </a>\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <div class=\"login\">\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <div class=\"logout\">\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.showHelp && (\r\n <div class=\"help\">\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {((this.mainMenu && this.mainMenu.length > 0) \|\| this.userHomeUrl) && (\r\n <nav class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-main\" ref={(element) => (this.nav = element)}>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)\r\n .map(this.MenuItem)}\r\n {this.overflowMenuItems > 0 && (\r\n <li>\r\n <dso-dropdown-menu placement=\"bottom\">\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"overflowMenu\")}</span>\r\n <dso-icon icon=\"chevron-down\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter(\r\n (_, index) =>\r\n this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems,\r\n )\r\n .map(this.MenuItem)}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </li>\r\n )}\r\n {this.userHomeUrl && (\r\n <li class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}>\r\n <a\r\n href={this.userHomeUrl}\r\n aria-current={this.userHomeActive ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n <dso-icon icon=\"user-line\"></dso-icon>\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n </ul>\r\n </nav>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

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

@@ -64,7 +64,7 @@ const Selectable = class {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: 'e68ce686f5d6fd57c6acb6a5fe641304d29ed06f' }, h("div", { key: 'd7b628443f8f2d05201387b7fccf0af23b2e1713', class: "dso-selectable-container" }, h("div", { key: 'a7abb03469b370fa5e1b91b5169373ec942f7720', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: '34b87eb1e4c2240546d3149c5c15afcd041d7fa7', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '361ef8a8f27e4da5907a5b47c93a8259013c3cff', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'c8967fc6ccdc2bc254deb2e2935a09ebbd7b6bcf', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'f50d96b7a1022bb1eb62ab158d5e0c702297288e' }, h("slot", { key: '0ada90bcc617aa8b670d316aa796dc01e2763b95', name: "info" })))), h("slot", { key: 'e923228d15e24dd1405208ffe352edbfdd332da8', name: "options" })));
+        return (h(Fragment, { key: '3ccfb5fe1b7cc2277408105abfc30f159e67f8aa' }, h("div", { key: '3a50d50879e4a913826cc5d51720b47e362219ea', class: "dso-selectable-container" }, h("div", { key: '45f837f824cb01d68c6549b21e8c26ede74ec68a', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: '50aefa55a69808a25a1f498439c48f1da313dbfb', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '90f7fc614489e7769224ecf7faa038a66b283479', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'c204aafd654b548b7ac2f51918593a2a46f42f20', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '25d4e18df38eedb2a0c979768c778ddd8f7f4459' }, h("slot", { key: 'a57125559ab66646ac4364fae11387297881054d', name: "info" })))), h("slot", { key: '4bc06cf9c7893571fbaecf183895b0d9b0c6fd7a', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

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

@@ -205,7 +205,7 @@ const SlideToggle = class {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, null, h("button", Object.assign({ key: '9998feb9ab9de5a90688ec1c4c437e099c71bce8', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: 'bc761b84d0c94aa0b3c7f14858a8809f6f565f34', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '5fb96fdd754cf0281df897ae5fa4186d7228606d', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'a1ef646ad0c14eef2053a61dddaac5bc97fcb2c6', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '5b283aa09bf71007263e26dc103ad8f373de5e7c', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'd76771061d5f36cab2b1c312f2014140746d6c6d', htmlFor: this.identifier }, h("slot", { key: '799f7bb5d225c8d6eebb80d3659e247d93ce3a7e' })))));
+        return (h(Fragment, null, h("button", Object.assign({ key: 'e475cae552eba25e291ff9f54c823c488c16913a', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: 'c635252b0cadd064f45ee5e9ce30b9be66b7ba6e', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '09e9fe08d79adf636fef5fed3962315bc3453637', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '7e8a00179728cd789cb758b2270446074783c1e9', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '68dfb69746a42329c66536715a27d698a294cd77', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '1c478c6f626c7fb6698fae764c9934a9c05e1bbf', htmlFor: this.identifier }, h("slot", { key: '22c1f7ae12086ba13589cb1621e0b435ecc4b42a' })))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-list-button.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, F as Fragment, g as getElement } from './index-D2Jo0W7B.js';
 import { c as clsx } from './clsx-ChV9xqsO.js';
-const listButtonCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\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 {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dso-tertiary.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: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.dso-tertiary.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: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-inline-start: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n.dso-tertiary {\n  cursor: pointer;\n}\n\n.dso-input-number {\n  align-items: center;\n  display: flex;\n}\n.dso-input-number .dso-input-step-counter {\n  text-align: center;\n  inline-size: 1.5rem;\n  font-size: 14px;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n}\n.dso-button-group.dso-disabled > * {\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-inline-start-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  opacity: 1;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n}\n.dso-button-group .dso-list-button {\n  padding-inline-end: 15px;\n}\n\n.dso-selectable {\n  position: relative;\n  display: var(--dso-selectable-display, block);\n  padding-block: 0;\n  padding-inline: 32px 0;\n}\n.dso-selectable label {\n  font-weight: 400;\n  line-height: 24px;\n  margin: 0;\n}\n.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,\n.dso-selectable input[type=radio][disabled] + label::before,\n.dso-selectable input[type=radio][disabled]:active + label::before,\n.dso-selectable input[type=radio][disabled]:focus + label::before {\n  background-color: #fff;\n  box-shadow: 0 0 0 2px #e5e5e5;\n}\n.dso-selectable input[type=checkbox],\n.dso-selectable input[type=radio] {\n  block-size: 24px;\n  inset-inline-start: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 0;\n  inline-size: 24px;\n  z-index: 100;\n  zoom: 1;\n}\n@media (prefers-contrast: more) {\n  .dso-selectable input[type=checkbox],\n  .dso-selectable input[type=radio] {\n    opacity: 1;\n  }\n}\n.dso-selectable input[type=checkbox]:not([disabled]),\n.dso-selectable input[type=radio]:not([disabled]) {\n  cursor: pointer;\n}\n.dso-selectable input[type=checkbox] + label,\n.dso-selectable input[type=radio] + label {\n  display: inline;\n  font-style: normal;\n  padding-inline-start: 0;\n}\n.dso-selectable input[type=checkbox] + label::before,\n.dso-selectable input[type=radio] + label::before {\n  background: #fff;\n  border: 0;\n  box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);\n  content: \"\";\n  block-size: 20px;\n  inset-inline-start: 2px;\n  position: absolute;\n  inset-block-start: 2px;\n  inline-size: 20px;\n}\n.dso-selectable input[type=checkbox]:focus,\n.dso-selectable input[type=radio]:focus {\n  outline: 0;\n}\n.dso-selectable input[type=checkbox]:focus + label::before,\n.dso-selectable input[type=radio]:focus + label::before {\n  box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);\n  block-size: 18px;\n  inset-inline-start: 3px;\n  inset-block-start: 3px;\n  inline-size: 18px;\n}\n.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,\n.dso-selectable input[type=radio]:active + label::before,\n.dso-selectable input[type=radio].active + label::before {\n  background-color: #ebf3e6;\n  box-shadow: 0 0 0 1px #275937;\n  block-size: 22px;\n  inset-inline-start: 1px;\n  inset-block-start: 1px;\n  inline-size: 22px;\n}\n.dso-selectable input[type=checkbox] + label::before {\n  border-radius: 4px;\n}\n.dso-selectable input[type=checkbox] + label::after {\n  background: transparent;\n  content: \"\";\n  inset-inline-start: 6px;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 6px;\n  zoom: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {\n  opacity: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after {\n  border: solid;\n  border-color: var(--dso-selectable-color, #39870c);\n  border-block-start-color: transparent;\n  border-width: 0 0 3px 3px;\n  block-size: 8px;\n  transform: rotate(-45deg);\n  inline-size: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  block-size: 12px;\n  inline-size: 12px;\n}\n.dso-selectable input[type=radio] + label::before {\n  border-radius: 50%;\n}\n.dso-selectable input[type=radio] + label::after {\n  background-color: transparent;\n  border-radius: 50%;\n  content: \"\";\n  block-size: 12px;\n  inset-inline-start: 6px;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 6px;\n  inline-size: 12px;\n  zoom: 1;\n}\n.dso-selectable input[type=radio]:checked + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  opacity: 1;\n}\n.dso-selectable label {\n  font-weight: 700;\n}\n\n.dso-list-button {\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-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n.dso-list-button {\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding-block: 15px;\n  padding-inline: 15px 47px;\n  position: relative;\n  text-align: start;\n  white-space: normal;\n  inline-size: 100%;\n  cursor: pointer;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  opacity: 1;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-inline-end: 0;\n    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n  }\n}\n.dso-list-button label {\n  cursor: inherit;\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel {\n  font-weight: 400;\n  inline-size: 100%;\n  padding-inline-start: 32px;\n}\n.dso-list-button dso-icon {\n  block-size: 24px;\n  color: #39870c;\n  inset-block-start: 15px;\n  inset-inline-end: 15px;\n  inline-size: 24px;\n  page-break-before: always;\n  position: absolute;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    inline-size: 0;\n  }\n}";
+const listButtonCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\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 {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dso-tertiary.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: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.dso-tertiary.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: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-inline-start: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n.dso-tertiary {\n  cursor: pointer;\n}\n\n.dso-input-number {\n  align-items: center;\n  display: flex;\n}\n.dso-input-number .dso-input-step-counter {\n  text-align: center;\n  inline-size: 1.5rem;\n  font-size: 14px;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n}\n.dso-button-group.dso-disabled > * {\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-inline-start-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  opacity: 1;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n}\n.dso-button-group .dso-list-button {\n  padding-inline-end: 15px;\n}\n\n.dso-selectable {\n  position: relative;\n  display: var(--dso-selectable-display, block);\n  padding-block: 0;\n  padding-inline: 32px 0;\n}\n.dso-selectable label {\n  font-weight: 400;\n  line-height: 24px;\n  margin: 0;\n}\n.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,\n.dso-selectable input[type=radio][disabled] + label::before,\n.dso-selectable input[type=radio][disabled]:active + label::before,\n.dso-selectable input[type=radio][disabled]:focus + label::before {\n  background-color: #fff;\n  box-shadow: 0 0 0 2px #e5e5e5;\n}\n.dso-selectable input[type=checkbox],\n.dso-selectable input[type=radio] {\n  block-size: 24px;\n  inset-inline-start: 0;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 0;\n  inline-size: 24px;\n  z-index: 100;\n  zoom: 1;\n}\n@media (prefers-contrast: more) {\n  .dso-selectable input[type=checkbox],\n  .dso-selectable input[type=radio] {\n    opacity: 1;\n  }\n}\n.dso-selectable input[type=checkbox]:not([disabled]),\n.dso-selectable input[type=radio]:not([disabled]) {\n  cursor: pointer;\n}\n.dso-selectable input[type=checkbox] + label,\n.dso-selectable input[type=radio] + label {\n  display: inline;\n  font-style: normal;\n  padding-inline-start: 0;\n}\n.dso-selectable input[type=checkbox] + label::before,\n.dso-selectable input[type=radio] + label::before {\n  background: #fff;\n  border: 0;\n  box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);\n  content: \"\";\n  block-size: 20px;\n  inset-inline-start: 2px;\n  position: absolute;\n  inset-block-start: 2px;\n  inline-size: 20px;\n}\n.dso-selectable input[type=checkbox]:focus,\n.dso-selectable input[type=radio]:focus {\n  outline: 0;\n}\n.dso-selectable input[type=checkbox]:focus + label::before,\n.dso-selectable input[type=radio]:focus + label::before {\n  box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);\n  block-size: 18px;\n  inset-inline-start: 3px;\n  inset-block-start: 3px;\n  inline-size: 18px;\n}\n.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,\n.dso-selectable input[type=radio]:active + label::before,\n.dso-selectable input[type=radio].active + label::before {\n  background-color: #ebf3e6;\n  box-shadow: 0 0 0 1px #275937;\n  block-size: 22px;\n  inset-inline-start: 1px;\n  inset-block-start: 1px;\n  inline-size: 22px;\n}\n.dso-selectable input[type=checkbox] + label::before {\n  border-radius: 4px;\n}\n.dso-selectable input[type=checkbox] + label::after {\n  background: transparent;\n  content: \"\";\n  inset-inline-start: 6px;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 6px;\n  zoom: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {\n  opacity: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after {\n  border: solid;\n  border-color: var(--dso-selectable-color, #39870c);\n  border-block-start-color: transparent;\n  border-width: 0 0 3px 3px;\n  block-size: 8px;\n  transform: rotate(-45deg);\n  inline-size: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  block-size: 12px;\n  inline-size: 12px;\n}\n.dso-selectable input[type=radio] + label::before {\n  border-radius: 50%;\n}\n.dso-selectable input[type=radio] + label::after {\n  background-color: transparent;\n  border-radius: 50%;\n  content: \"\";\n  block-size: 12px;\n  inset-inline-start: 6px;\n  opacity: 0;\n  position: absolute;\n  inset-block-start: 6px;\n  inline-size: 12px;\n  zoom: 1;\n}\n.dso-selectable input[type=radio]:checked + label::after {\n  background-color: var(--dso-selectable-color, #39870c);\n  opacity: 1;\n}\n.dso-selectable label {\n  font-weight: 700;\n}\n\n.dso-list-button {\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-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n.dso-list-button {\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding-block: 15px;\n  padding-inline: 15px 47px;\n  position: relative;\n  text-align: start;\n  white-space: normal;\n  inline-size: 100%;\n  cursor: pointer;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  opacity: 1;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-inline-end: 0;\n    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n  }\n}\n.dso-list-button label {\n  cursor: inherit;\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel,\n.dso-list-button .subcontent {\n  font-weight: 400;\n  inline-size: 100%;\n  padding-inline-start: 32px;\n}\n.dso-list-button dso-icon {\n  block-size: 24px;\n  color: #39870c;\n  inset-block-start: 15px;\n  inset-inline-end: 15px;\n  inline-size: 24px;\n  page-break-before: always;\n  position: absolute;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    inline-size: 0;\n  }\n}";
 const ListButton = class {
     constructor(hostRef) {
@@ -73,7 +73,7 @@ const ListButton = class {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: 'b598da82cfebc24eeccc5a2ec2b46613ba6eba69', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'ddf4368fb2eafc2be93b9a9e5c85c227c220303e', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { key: 'f2c536704711f53fadc40463b39f0fec0430d9c9', class: "dso-selectable" }, h("input", { key: 'e751f37d8eb12e3f6e41742dd93b1019a3bb9303', id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), h("label", { key: '7ece1b6cdd28904be5dc222ce19f86f64d0cadac', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (h("div", { key: '7d7bd35557060c7e4ca370f122bfed958957a634', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", h("div", { key: '87dd6a05f6886e745f2448a2358cd3a8c2110cf7', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (h("span", { key: '0c490aa9be692955ab1fedae67d832d787e2edea', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), h("slot", { key: '9836db0e661e3eeb87d9dc74b0e4f033215d0fe0', name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { key: 'c090e9c9eceec57fbe748739fef29da156576068', class: "dso-input-number" }, this.count > 1 && (h(Fragment, null, h("button", { key: '39ba1384b1ec7df2f816cfa33522e3cb8a7cd2b2', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: 'fe93d0957c319970873b5005e4f3502eacb30b90', icon: "minus-circle" }), h("span", { key: 'd0344facadf6c2923b9da6b54678222e6278fb48', class: "sr-only" }, "Aantal verlagen")), h("span", { key: '248ac189bdd3a8556c1b9f33033e4ca9b56ba3c7', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("button", { key: 'dfcd174240953bcb9956efe253e43e18d9a78318', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: '29c77388606a75f2b781760ef7055a66e6a1a3b4', icon: "plus-circle" }), h("span", { key: '7eb4b4ccf7403c63344ab75e9b49d9f814558049', class: "sr-only" }, "Aantal verhogen"))))));
+        return (h("div", { key: 'b598da82cfebc24eeccc5a2ec2b46613ba6eba69', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'ddf4368fb2eafc2be93b9a9e5c85c227c220303e', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { key: 'f2c536704711f53fadc40463b39f0fec0430d9c9', class: "dso-selectable" }, h("input", { key: 'e751f37d8eb12e3f6e41742dd93b1019a3bb9303', id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), h("label", { key: '7ece1b6cdd28904be5dc222ce19f86f64d0cadac', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (h("div", { key: '7d7bd35557060c7e4ca370f122bfed958957a634', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", h("div", { key: '87dd6a05f6886e745f2448a2358cd3a8c2110cf7', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (h("span", { key: '0c490aa9be692955ab1fedae67d832d787e2edea', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), this.subcontentSlot && (h("div", { key: 'd10de6f4ad7cafe0735603fdcc9dde1f52eea620', class: "subcontent" }, h("slot", { key: 'a19c3621e895948edf1b1c6cf3245d0d6869e9e7', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '94c1149928f8dcdcdc446ef2ccc287c6b0d65b35', class: "dso-input-number" }, this.count > 1 && (h(Fragment, null, h("button", { key: '3a11c8e551814a5061881a70132256804b682604', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: '54fd8dc97e5d0b543c82e85750bfb6caeaea02ef', icon: "minus-circle" }), h("span", { key: '7f24b449569afea6a498d592d13f360bf328a0da', class: "sr-only" }, "Aantal verlagen")), h("span", { key: '5d7a3c2fe16cb3e8003500de84691919845bc0b5', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("button", { key: 'cbeee360c92ab646420c63bdd21ce8782e17dd72', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: '479edf8adbb0896abc366d6e79e8386d753a857a', icon: "plus-circle" }), h("span", { key: '6c1d00d2e2dcd983d703368e7550faa3ade4c4d6', class: "sr-only" }, "Aantal verhogen"))))));
     }
     get host() { return getElement(this); }
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-list-button.entry.js","sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"list-button.variables\" as list-button-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin _state-styling($background-color: inherit, $border-color: inherit, $color: inherit) {\r\n & {\r\n background-color: $background-color;\r\n border-color: $border-color;\r\n color: $color;\r\n }\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n cursor: pointer;\r\n }\r\n}\r\n\r\n.dso-input-number {\r\n align-items: center;\r\n display: flex;\r\n\r\n .dso-input-step-counter {\r\n text-align: center;\r\n inline-size: units.$ru3;\r\n font-size: list-button-variables.$font-size-count;\r\n }\r\n}\r\n\r\n.dso-button-group {\r\n display: flex;\r\n flex-direction: row;\r\n\r\n &.dso-disabled {\r\n > * {\r\n @include _state-styling(colors.$wit, colors.$grijs-10, colors.$grijs-60);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n pointer-events: none;\r\n }\r\n }\r\n }\r\n\r\n > * {\r\n border-radius: 0;\r\n\r\n &:first-child {\r\n border-radius: list-button-variables.$border-radius 0 0 list-button-variables.$border-radius;\r\n }\r\n\r\n &:not(:first-child) {\r\n border-inline-start-style: none !important;\r\n }\r\n\r\n &:last-child {\r\n border-radius: 0 list-button-variables.$border-radius list-button-variables.$border-radius 0;\r\n }\r\n\r\n &:only-child {\r\n border-radius: list-button-variables.$border-radius;\r\n }\r\n }\r\n\r\n > .dso-input-number {\r\n border-style: solid;\r\n border-width: 1px;\r\n flex-wrap: nowrap;\r\n padding-block: 0;\r\n padding-inline: units.$u2;\r\n\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n justify-content: center;\r\n }\r\n }\r\n\r\n > :hover + .dso-input-number,\r\n > :focus + .dso-input-number {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n\r\n > .dso-selected + .dso-input-number {\r\n box-shadow:\r\n inset 0 -1px 0 0 button.$secondary-border-color,\r\n inset 0 1px 0 0 button.$secondary-border-color,\r\n inset -1px 0 0 0 button.$secondary-border-color;\r\n\r\n @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n }\r\n\r\n > :active + .dso-input-number,\r\n > .active + .dso-input-number {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n }\r\n\r\n > .disabled + .dso-input-number,\r\n > [disabled] + .dso-input-number {\r\n &,\r\n &:hover {\r\n opacity: 1;\r\n\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n }\r\n }\r\n\r\n .dso-list-button {\r\n padding-inline-end: #{units.$u2 - 1};\r\n }\r\n}\r\n\r\n.dso-selectable {\r\n @include selectable.root(\"dso-info\");\r\n\r\n label {\r\n font-weight: 700;\r\n }\r\n}\r\n\r\n.dso-list-button {\r\n @include button.base($modifiers: false);\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2977\r\n & {\r\n border-radius: button.$border-radius;\r\n border-width: 1px;\r\n border-style: solid;\r\n font-weight: 600;\r\n padding-block: #{units.$u2 - 1};\r\n padding-inline: #{units.$u2 - 1} #{units.$u6 - 1};\r\n position: relative;\r\n text-align: start;\r\n white-space: normal;\r\n inline-size: 100%;\r\n cursor: pointer;\r\n }\r\n\r\n &:hover,\r\n &:focus {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n\r\n &:active,\r\n &.active {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n }\r\n\r\n &.disabled,\r\n &[disabled] {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n\r\n &.dso-selected {\r\n border-color: colors.$grasgroen;\r\n border-width: 1px;\r\n box-shadow:\r\n inset 0px 0px 0px 1px colors.$grasgroen,\r\n inset -1px 0px 0px 0px colors.$grasgroen;\r\n\r\n &.dso-single-count {\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n border-inline-end: 0;\r\n box-shadow:\r\n colors.$grasgroen 0px 1px 0px 0px inset,\r\n colors.$grasgroen 1px 0px 0px 0px inset,\r\n colors.$grasgroen 0px -1px 0px 0px inset;\r\n }\r\n }\r\n }\r\n\r\n label {\r\n cursor: inherit;\r\n }\r\n\r\n > span {\r\n display: block;\r\n }\r\n\r\n .dso-sublabel {\r\n font-weight: 400;\r\n inline-size: 100%;\r\n padding-inline-start: selectable.$size + units.$u1;\r\n }\r\n\r\n dso-icon {\r\n block-size: units.$u3;\r\n color: colors.$grasgroen;\r\n inset-block-start: #{units.$u2 - 1};\r\n inset-inline-end: #{units.$u2 - 1};\r\n inline-size: units.$u3;\r\n page-break-before: always;\r\n position: absolute;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n &.dso-selected.dso-single-count {\r\n &::after {\r\n inline-size: 0;\r\n }\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Fragment,\r\n h,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoListButtonElement;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private get subcontentSlot() {\r\n return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n }\r\n\r\n /\r\n The label of the List Button.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The sublabel of the List Button.\r\n /\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /\r\n When defined the count can show on the List Button.\r\n /\r\n @Prop()\r\n count?: number;\r\n\r\n /\r\n The minimum value.\r\n /\r\n @Prop()\r\n min?: string \| number;\r\n\r\n /\r\n The maximum value.\r\n /\r\n @Prop()\r\n max?: string \| number;\r\n\r\n /\r\n Whether the List Button is checked.\r\n /\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /\r\n Whether the List Button is disabled.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Prefix to subcontent for the purpose of screenreading.\r\n /\r\n @Prop()\r\n subcontentPrefix?: string;\r\n\r\n /\r\n Emitted when the user changes the count.\r\n /\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /\r\n Emitted when the user activates the List Button itself.\r\n \r\n Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n connectedCallback() {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n }\r\n\r\n componentDidRender(): void {\r\n if (!this.subcontentSlot?.hasAttribute(\"aria-hidden\")) {\r\n this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n delete this.mutationObserver;\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" \| \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (!this.isNewCountValid(newValue)) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n return !(\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) \|\| newValue > Number(this.max))\r\n );\r\n }\r\n\r\n render() {\r\n const selected = this.checked \|\| (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n aria-describedby={\r\n [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") \|\| null\r\n }\r\n checked={selected}\r\n disabled={this.disabled}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n {this.subcontentSlot && (\r\n <div class=\"sr-only\" id=\"description\">\r\n {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n </div>\r\n )}\r\n </div>\r\n {this.sublabel && (\r\n <span class=\"dso-sublabel\" id=\"sublabel\">\r\n {this.sublabel}\r\n </span>\r\n )}\r\n <slot name=\"subcontent\" />\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.count > 1 && (\r\n <>\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.min) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"decrement\")}\r\n >\r\n <dso-icon icon=\"minus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verlagen</span>\r\n </button>\r\n <span class=\"dso-input-step-counter\" aria-label=\"Aantal\" aria-live=\"polite\">\r\n {this.count}\r\n </span>\r\n </>\r\n )}\r\n\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.max) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"increment\")}\r\n >\r\n <dso-icon icon=\"plus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verhogen</span>\r\n </button>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"dso-list-button.entry.js","sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"list-button.variables\" as list-button-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin _state-styling($background-color: inherit, $border-color: inherit, $color: inherit) {\r\n & {\r\n background-color: $background-color;\r\n border-color: $border-color;\r\n color: $color;\r\n }\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n cursor: pointer;\r\n }\r\n}\r\n\r\n.dso-input-number {\r\n align-items: center;\r\n display: flex;\r\n\r\n .dso-input-step-counter {\r\n text-align: center;\r\n inline-size: units.$ru3;\r\n font-size: list-button-variables.$font-size-count;\r\n }\r\n}\r\n\r\n.dso-button-group {\r\n display: flex;\r\n flex-direction: row;\r\n\r\n &.dso-disabled {\r\n > * {\r\n @include _state-styling(colors.$wit, colors.$grijs-10, colors.$grijs-60);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n pointer-events: none;\r\n }\r\n }\r\n }\r\n\r\n > * {\r\n border-radius: 0;\r\n\r\n &:first-child {\r\n border-radius: list-button-variables.$border-radius 0 0 list-button-variables.$border-radius;\r\n }\r\n\r\n &:not(:first-child) {\r\n border-inline-start-style: none !important;\r\n }\r\n\r\n &:last-child {\r\n border-radius: 0 list-button-variables.$border-radius list-button-variables.$border-radius 0;\r\n }\r\n\r\n &:only-child {\r\n border-radius: list-button-variables.$border-radius;\r\n }\r\n }\r\n\r\n > .dso-input-number {\r\n border-style: solid;\r\n border-width: 1px;\r\n flex-wrap: nowrap;\r\n padding-block: 0;\r\n padding-inline: units.$u2;\r\n\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n justify-content: center;\r\n }\r\n }\r\n\r\n > :hover + .dso-input-number,\r\n > :focus + .dso-input-number {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n\r\n > .dso-selected + .dso-input-number {\r\n box-shadow:\r\n inset 0 -1px 0 0 button.$secondary-border-color,\r\n inset 0 1px 0 0 button.$secondary-border-color,\r\n inset -1px 0 0 0 button.$secondary-border-color;\r\n\r\n @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n }\r\n\r\n > :active + .dso-input-number,\r\n > .active + .dso-input-number {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n }\r\n\r\n > .disabled + .dso-input-number,\r\n > [disabled] + .dso-input-number {\r\n &,\r\n &:hover {\r\n opacity: 1;\r\n\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n }\r\n }\r\n\r\n .dso-list-button {\r\n padding-inline-end: #{units.$u2 - 1};\r\n }\r\n}\r\n\r\n.dso-selectable {\r\n @include selectable.root(\"dso-info\");\r\n\r\n label {\r\n font-weight: 700;\r\n }\r\n}\r\n\r\n.dso-list-button {\r\n @include button.base($modifiers: false);\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2977\r\n & {\r\n border-radius: button.$border-radius;\r\n border-width: 1px;\r\n border-style: solid;\r\n font-weight: 600;\r\n padding-block: #{units.$u2 - 1};\r\n padding-inline: #{units.$u2 - 1} #{units.$u6 - 1};\r\n position: relative;\r\n text-align: start;\r\n white-space: normal;\r\n inline-size: 100%;\r\n cursor: pointer;\r\n }\r\n\r\n &:hover,\r\n &:focus {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n\r\n &:active,\r\n &.active {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n }\r\n\r\n &.disabled,\r\n &[disabled] {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n\r\n &.dso-selected {\r\n border-color: colors.$grasgroen;\r\n border-width: 1px;\r\n box-shadow:\r\n inset 0px 0px 0px 1px colors.$grasgroen,\r\n inset -1px 0px 0px 0px colors.$grasgroen;\r\n\r\n &.dso-single-count {\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n border-inline-end: 0;\r\n box-shadow:\r\n colors.$grasgroen 0px 1px 0px 0px inset,\r\n colors.$grasgroen 1px 0px 0px 0px inset,\r\n colors.$grasgroen 0px -1px 0px 0px inset;\r\n }\r\n }\r\n }\r\n\r\n label {\r\n cursor: inherit;\r\n }\r\n\r\n > span {\r\n display: block;\r\n }\r\n\r\n .dso-sublabel,\r\n .subcontent {\r\n font-weight: 400;\r\n inline-size: 100%;\r\n padding-inline-start: selectable.$size + units.$u1;\r\n }\r\n\r\n dso-icon {\r\n block-size: units.$u3;\r\n color: colors.$grasgroen;\r\n inset-block-start: #{units.$u2 - 1};\r\n inset-inline-end: #{units.$u2 - 1};\r\n inline-size: units.$u3;\r\n page-break-before: always;\r\n position: absolute;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n &.dso-selected.dso-single-count {\r\n &::after {\r\n inline-size: 0;\r\n }\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Fragment,\r\n h,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoListButtonElement;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private get subcontentSlot() {\r\n return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n }\r\n\r\n /\r\n The label of the List Button.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The sublabel of the List Button.\r\n /\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /\r\n When defined the count can show on the List Button.\r\n /\r\n @Prop()\r\n count?: number;\r\n\r\n /\r\n The minimum value.\r\n /\r\n @Prop()\r\n min?: string \| number;\r\n\r\n /\r\n The maximum value.\r\n /\r\n @Prop()\r\n max?: string \| number;\r\n\r\n /\r\n Whether the List Button is checked.\r\n /\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /\r\n Whether the List Button is disabled.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Prefix to subcontent for the purpose of screenreading.\r\n /\r\n @Prop()\r\n subcontentPrefix?: string;\r\n\r\n /\r\n Emitted when the user changes the count.\r\n /\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /\r\n Emitted when the user activates the List Button itself.\r\n \r\n Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n connectedCallback() {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n }\r\n\r\n componentDidRender(): void {\r\n if (!this.subcontentSlot?.hasAttribute(\"aria-hidden\")) {\r\n this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n delete this.mutationObserver;\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" \| \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (!this.isNewCountValid(newValue)) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n return !(\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) \|\| newValue > Number(this.max))\r\n );\r\n }\r\n\r\n render() {\r\n const selected = this.checked \|\| (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n aria-describedby={\r\n [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") \|\| null\r\n }\r\n checked={selected}\r\n disabled={this.disabled}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n {this.subcontentSlot && (\r\n <div class=\"sr-only\" id=\"description\">\r\n {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n </div>\r\n )}\r\n </div>\r\n {this.sublabel && (\r\n <span class=\"dso-sublabel\" id=\"sublabel\">\r\n {this.sublabel}\r\n </span>\r\n )}\r\n {this.subcontentSlot && (\r\n <div class=\"subcontent\">\r\n <slot name=\"subcontent\" />\r\n </div>\r\n )}\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.count > 1 && (\r\n <>\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.min) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"decrement\")}\r\n >\r\n <dso-icon icon=\"minus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verlagen</span>\r\n </button>\r\n <span class=\"dso-input-step-counter\" aria-label=\"Aantal\" aria-live=\"polite\">\r\n {this.count}\r\n </span>\r\n </>\r\n )}\r\n\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.max) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"increment\")}\r\n >\r\n <dso-icon icon=\"plus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verhogen</span>\r\n </button>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

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

@@ -29,7 +29,7 @@ const Logo = class {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, { name: this.name }))) : (h(DsoLogo, { name: this.name })), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '7610aa58ca6f96ae046979fc6775b7e81ed383d2', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '7979dd6758ffbeeb8b0f98b193d57b6f943d3cf1', class: "logo-ribbon" }, this.ribbon)));
     }
 };
 Logo.style = logoCss;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"dso-logo.entry.js","sources":["src/components/logo/logo.scss?tag=dso-logo&encapsulation=shadow","src/components/logo/logo.tsx"],"sourcesContent":["@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@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/~~anchor~~\";\r\n\r\n:host {\r\n max-block-size: units.$ru6;\r\n block-size: units.$ru6;\r\n display: grid;\r\n grid-template-areas: \"target wordmark label\";\r\n grid-template-columns: repeat(3, max-content);\r\n grid-template-rows: 100%;\r\n gap: units.$u2;\r\n font-size: 1.5625rem;\r\n font-weight: 500;\r\n align-items: center;\r\n container-type: size;\r\n container-name: logo;\r\n\r\n .logo-url,\r\n .logo-label-url {\r\n display: flex;\r\n align-items: center;\r\n gap: units.$u2;\r\n\r\n @include ~~anchor~~.reverse();\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\r\n:host([logo-url]:not([logo-url=\"\"])[ribbon]:not([ribbon=\"\"])) {\r\n grid-template-areas: \"targetwordmark label\";\r\n\r\n .logo-url,\r\n .logo-ribbon {\r\n grid-area: targetwordmark;\r\n }\r\n}\r\n\r\n.logo-label-url {\r\n grid-area: label;\r\n}\r\n\r\n.logo-target {\r\n grid-area: target;\r\n max-block-size: units.$u6;\r\n max-inline-size: units.$u6;\r\n inline-size: 100%;\r\n display: block;\r\n aspect-ratio: 1 / 1;\r\n}\r\n\r\n.logo-wordmark {\r\n grid-area: wordmark;\r\n font-size: 1.5625rem;\r\n}\r\n\r\n@container logo (max-height: 47px) {\r\n .logo-wordmark,\r\n .logo-label {\r\n font-size: 50cqb;\r\n line-height: 1;\r\n }\r\n}\r\n\r\n.logo-wordmark-omgevings {\r\n color: colors.$grasgroen;\r\n}\r\n\r\n.logo-wordmark-loket {\r\n color: colors.$bosgroen;\r\n}\r\n\r\n.logo-label {\r\n grid-area: label;\r\n color: colors.$bosgroen;\r\n margin-inline-start: units.$ru2;\r\n}\r\n\r\n.logo-ribbon {\r\n grid-area: wordmark;\r\n place-self: start end;\r\n display: flex;\r\n place-items: center;\r\n\r\n background-color: colors.$mauve;\r\n border-radius: 3px;\r\n transform: rotate(3deg);\r\n padding-block: 0;\r\n padding-inline: 8px;\r\n\r\n font-size: 0.75rem;\r\n font-weight: normal;\r\n text-transform: uppercase;\r\n color: colors.$wit;\r\n\r\n @container logo (max-height: 47px) {\r\n & {\r\n block-size: 28cqb;\r\n font-size: 25cqb;\r\n }\r\n }\r\n}\r\n\r\n.inner {\r\n fill: colors.$oranje;\r\n}\r\n\r\n.middle {\r\n fill: colors.$bosgroen;\r\n}\r\n\r\n.outer {\r\n fill: #80bc00;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n .logo-wordmark {\r\n font-size: initial;\r\n }\r\n\r\n // if the logo has a label, hide the wordmark on smaller screens and replace it with the label\r\n :host([label]) {\r\n grid-template-areas: \"target label\";\r\n grid-template-columns: max-content minmax(130px, max-content);\r\n\r\n .logo-wordmark {\r\n display: none;\r\n }\r\n\r\n .logo-ribbon {\r\n grid-area: label;\r\n }\r\n\r\n .logo-label {\r\n margin-inline-start: 0;\r\n font-size: initial;\r\n text-wrap: balance;\r\n overflow-wrap: normal;\r\n }\r\n }\r\n\r\n :host([logo-url][ribbon]) {\r\n .logo-label-url + .logo-ribbon {\r\n grid-area: label;\r\n }\r\n }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n .logo-ribbon {\r\n transform: rotate(3deg) translateY(-7px);\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Fragment,\r\n Prop,\r\n h,\r\n Event,\r\n EventEmitter,\r\n FunctionalComponent,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { LogoClickEvent, LogoLabelClickEvent } from \"./logo.interfaces\";\r\n\r\nconst DsoLogo: FunctionalComponent<{ name: string }> = ({ name }) => {\r\n const splittedName = name.split(\"\|\");\r\n return (\r\n <>\r\n <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n </svg>\r\n <div class=\"logo-wordmark\">\r\n <span class=\"logo-wordmark-omgevings\">{splittedName[0]}</span>\r\n {splittedName.length === 2 && <span class=\"logo-wordmark-loket\">{splittedName[1]}</span>}\r\n </div>\r\n </>\r\n );\r\n};\r\n\r\n@Component({\r\n tag: \"dso-logo\",\r\n styleUrl: \"logo.scss\",\r\n shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n /*\r\n An alternative name for the logo wordmark Omgevingsloket. For instance `Environment\| Desk`. It should contains a\r\n * pipe-character: the left-hand side of the pipe will be shown in grasgroen, the right-hand side of the pipe will be\r\n * shown in bosgroen.\r\n * When omitted the logo wordmark will default to Omgevingsloket, with 'Omgevings' shown in grasgroen and 'loket' in\r\n * bosgroen.\r\n /\r\n @Prop({ reflect: true })\r\n name = \"Omgevings\|loket\";\r\n /\r\n The url the logo is pointing to.\r\n /\r\n @Prop({ reflect: true })\r\n logoUrl?: string;\r\n\r\n /\r\n The label clarifies the service within the Omgevingsloket, shown\r\n * as a subtitle (and on smaller screens as the main wordmark itself).\r\n /\r\n @Prop({ reflect: true })\r\n label?: string;\r\n\r\n /\r\n The url the label is pointing to.\r\n /\r\n @Prop({ reflect: true })\r\n labelUrl?: string;\r\n\r\n /\r\n The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n * Used to clarify the (non-production) server environment (\"int\", \"kta\", \"pfm\", \"pre\", or \"dmo\")\r\n /\r\n @Prop({ reflect: true })\r\n ribbon?: string;\r\n\r\n /\r\n Emitted when the logo is clicked (only when logoUrl is set).\r\n /\r\n @Event()\r\n dsoLogoClick!: EventEmitter<LogoClickEvent>;\r\n\r\n /\r\n Emitted when the label in the logo is clicked (only when labelUrl is set).\r\n */\r\n @Event()\r\n dsoLabelClick!: EventEmitter<LogoLabelClickEvent>;\r\n\r\n private handleLogoClick = (e: MouseEvent) => {\r\n this.dsoLogoClick.emit({ originalEvent: e, url: this.logoUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n };\r\n\r\n private handleLabelClick = (e: MouseEvent) => {\r\n this.dsoLabelClick.emit({ originalEvent: e, url: this.labelUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n {this.logoUrl ? (\r\n <a class=\"logo-url\" href={this.logoUrl} onClick={this.handleLogoClick}>\r\n <DsoLogo name={this.name} />\r\n </a>\r\n ) : (\r\n <DsoLogo name={this.name} />\r\n )}\r\n\r\n {this.label &&\r\n (!this.labelUrl ? (\r\n <span class=\"logo-label\">{this.label}</span>\r\n ) : (\r\n <a class=\"logo-label-url\" href={this.labelUrl} onClick={this.handleLabelClick}>\r\n <span class=\"logo-label\">{this.label}</span>\r\n </a>\r\n ))}\r\n {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n </>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"dso-logo.entry.js","sources":["src/components/logo/logo.scss?tag=dso-logo&encapsulation=shadow","src/components/logo/logo.tsx"],"sourcesContent":["@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@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/link\";\r\n\r\n:host {\r\n max-block-size: units.$ru6;\r\n block-size: units.$ru6;\r\n display: grid;\r\n grid-template-areas: \"target wordmark label\";\r\n grid-template-columns: repeat(3, max-content);\r\n grid-template-rows: 100%;\r\n gap: units.$u2;\r\n font-size: 1.5625rem;\r\n font-weight: 500;\r\n align-items: center;\r\n container-type: size;\r\n container-name: logo;\r\n\r\n .logo-url,\r\n .logo-label-url {\r\n display: flex;\r\n align-items: center;\r\n gap: units.$u2;\r\n\r\n @include link.reverse();\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\r\n:host([logo-url]:not([logo-url=\"\"])[ribbon]:not([ribbon=\"\"])) {\r\n grid-template-areas: \"targetwordmark label\";\r\n\r\n .logo-url,\r\n .logo-ribbon {\r\n grid-area: targetwordmark;\r\n }\r\n}\r\n\r\n.logo-label-url {\r\n grid-area: label;\r\n}\r\n\r\n.logo-target {\r\n grid-area: target;\r\n max-block-size: units.$u6;\r\n max-inline-size: units.$u6;\r\n inline-size: 100%;\r\n display: block;\r\n aspect-ratio: 1 / 1;\r\n}\r\n\r\n.logo-wordmark {\r\n grid-area: wordmark;\r\n font-size: 1.5625rem;\r\n}\r\n\r\n@container logo (max-height: 47px) {\r\n .logo-wordmark,\r\n .logo-label {\r\n font-size: 50cqb;\r\n line-height: 1;\r\n }\r\n}\r\n\r\n.logo-wordmark-omgevings {\r\n color: colors.$grasgroen;\r\n}\r\n\r\n.logo-wordmark-loket {\r\n color: colors.$bosgroen;\r\n}\r\n\r\n.logo-label {\r\n grid-area: label;\r\n color: colors.$bosgroen;\r\n margin-inline-start: units.$ru2;\r\n}\r\n\r\n.logo-ribbon {\r\n grid-area: wordmark;\r\n place-self: start end;\r\n display: flex;\r\n place-items: center;\r\n\r\n background-color: colors.$mauve;\r\n border-radius: 3px;\r\n transform: rotate(3deg);\r\n padding-block: 0;\r\n padding-inline: 8px;\r\n\r\n font-size: 0.75rem;\r\n font-weight: normal;\r\n text-transform: uppercase;\r\n color: colors.$wit;\r\n\r\n @container logo (max-height: 47px) {\r\n & {\r\n block-size: 28cqb;\r\n font-size: 25cqb;\r\n }\r\n }\r\n}\r\n\r\n.inner {\r\n fill: colors.$oranje;\r\n}\r\n\r\n.middle {\r\n fill: colors.$bosgroen;\r\n}\r\n\r\n.outer {\r\n fill: #80bc00;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n .logo-wordmark {\r\n font-size: initial;\r\n }\r\n\r\n // if the logo has a label, hide the wordmark on smaller screens and replace it with the label\r\n :host([label]) {\r\n grid-template-areas: \"target label\";\r\n grid-template-columns: max-content minmax(130px, max-content);\r\n\r\n .logo-wordmark {\r\n display: none;\r\n }\r\n\r\n .logo-ribbon {\r\n grid-area: label;\r\n }\r\n\r\n .logo-label {\r\n margin-inline-start: 0;\r\n font-size: initial;\r\n text-wrap: balance;\r\n overflow-wrap: normal;\r\n }\r\n }\r\n\r\n :host([logo-url][ribbon]) {\r\n .logo-label-url + .logo-ribbon {\r\n grid-area: label;\r\n }\r\n }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n .logo-ribbon {\r\n transform: rotate(3deg) translateY(-7px);\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Fragment,\r\n Prop,\r\n h,\r\n Event,\r\n EventEmitter,\r\n FunctionalComponent,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { LogoClickEvent, LogoLabelClickEvent } from \"./logo.interfaces\";\r\n\r\nconst DsoLogo: FunctionalComponent<{ name: string }> = ({ name }) => {\r\n const splittedName = name.split(\"\|\");\r\n return (\r\n <>\r\n <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n </svg>\r\n <div class=\"logo-wordmark\">\r\n <span class=\"logo-wordmark-omgevings\">{splittedName[0]}</span>\r\n {splittedName.length === 2 && <span class=\"logo-wordmark-loket\">{splittedName[1]}</span>}\r\n </div>\r\n </>\r\n );\r\n};\r\n\r\n@Component({\r\n tag: \"dso-logo\",\r\n styleUrl: \"logo.scss\",\r\n shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n /*\r\n An alternative name for the logo wordmark Omgevingsloket. For instance `Environment\| Desk`. It should contains a\r\n * pipe-character: the left-hand side of the pipe will be shown in grasgroen, the right-hand side of the pipe will be\r\n * shown in bosgroen.\r\n * When omitted the logo wordmark will default to Omgevingsloket, with 'Omgevings' shown in grasgroen and 'loket' in\r\n * bosgroen.\r\n /\r\n @Prop({ reflect: true })\r\n name = \"Omgevings\|loket\";\r\n /\r\n The url the logo is pointing to.\r\n /\r\n @Prop({ reflect: true })\r\n logoUrl?: string;\r\n\r\n /\r\n The label clarifies the service within the Omgevingsloket, shown\r\n * as a subtitle (and on smaller screens as the main wordmark itself).\r\n /\r\n @Prop({ reflect: true })\r\n label?: string;\r\n\r\n /\r\n The url the label is pointing to.\r\n /\r\n @Prop({ reflect: true })\r\n labelUrl?: string;\r\n\r\n /\r\n The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n * Used to clarify the (non-production) server environment (\"int\", \"kta\", \"pfm\", \"pre\", or \"dmo\")\r\n /\r\n @Prop({ reflect: true })\r\n ribbon?: string;\r\n\r\n /\r\n Emitted when the logo is clicked (only when logoUrl is set).\r\n /\r\n @Event()\r\n dsoLogoClick!: EventEmitter<LogoClickEvent>;\r\n\r\n /\r\n Emitted when the label in the logo is clicked (only when labelUrl is set).\r\n */\r\n @Event()\r\n dsoLabelClick!: EventEmitter<LogoLabelClickEvent>;\r\n\r\n private handleLogoClick = (e: MouseEvent) => {\r\n this.dsoLogoClick.emit({ originalEvent: e, url: this.logoUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n };\r\n\r\n private handleLabelClick = (e: MouseEvent) => {\r\n this.dsoLabelClick.emit({ originalEvent: e, url: this.labelUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n {this.logoUrl ? (\r\n <a class=\"logo-url\" href={this.logoUrl} onClick={this.handleLogoClick}>\r\n <DsoLogo name={this.name} />\r\n </a>\r\n ) : (\r\n <DsoLogo name={this.name} />\r\n )}\r\n\r\n {this.label &&\r\n (!this.labelUrl ? (\r\n <span class=\"logo-label\">{this.label}</span>\r\n ) : (\r\n <a class=\"logo-label-url\" href={this.labelUrl} onClick={this.handleLabelClick}>\r\n <span class=\"logo-label\">{this.label}</span>\r\n </a>\r\n ))}\r\n {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n </>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

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

@@ -44,7 +44,7 @@ const MapBaseLayers = class {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '7e13ee00a63cdad0665bc3730387ccac941c8d66', class: "form-group dso-radios" }, h("legend", { key: '3ef5163845f93065b87711fd01d78725f227d3ce', class: "sr-only" }, "Achtergrond"), h("div", { key: 'f0dafaffdc8c13125cd4afb3c98b6384e1312433', class: "dso-label-container" }, h("span", { key: 'bcf82a98342df39d98832db27823db6e6b2713a2', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '2feee1a616600ef226745c101d9a288b25753ac3', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: 'acd8cb9bd22f5021d89e656292650098afb58d3c', class: "form-group dso-radios" }, h("legend", { key: '3f6c5f5297323a9d0d1c5195df12b5e162ae3991', class: "sr-only" }, "Achtergrond"), h("div", { key: 'eea63f4a56b1d01fffaab78202718d667533948f', class: "dso-label-container" }, h("span", { key: 'c8aba96d494bea90da43c86c4cc28f0f2ae9f737', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'e6b5b3718321632fe2b9f794dec1dd74b2876620', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     get host() { return getElement(this); }
 };

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

@@ -85,7 +85,7 @@ const MapControls = class {
         });
     }
     render() {
-        return (h(Fragment, null, h("button", { key: '0fd986956411cb17370bee64462d0d8819611841', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '52a726ecf9d7b42dfec754efdf8de04d88123c58', icon: "layers" }), h("span", { key: '1ddd1e60d1a4f018fb84199c3a61066352d06431' }, this.text("layersButton"))), h("div", { key: '034b8741f04b6764fa8fa8b8c308a5a354c0dcb3', class: "zoom-buttons" }, h("button", { key: '859a740325bbeeae6adc2b7f0b373705ff422ee2', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '480623c3611aa1184c7220db69efcfa204f72a2b' }, this.text("zoomIn")), h("dso-icon", { key: '82622c8e1a812ec3db1063124729096d6f0f76a9', icon: "plus" })), h("button", { key: '5452cf6f7ade2d583f3f9563786b6cec01f5ce04', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '9952df75387874e21072fb5564588f438e2aa0c6' }, this.text("zoomOut")), h("dso-icon", { key: '81c398b34a59db6f00545264685427ddd466f2d5', icon: "minus" }))), h("section", { key: '48e2d301e96a373af8926c7d5f3fc32068993c23', hidden: this.hideContent }, h("header", { key: 'ebbe567521c62e8243add8859fc0a889e624f5bd' }, h("h2", { key: 'b0b6b51cd9ea6f5795ee8d6f35f2be16ae610010' }, this.text("title")), h("button", { key: '1122debc7dbff1b1144a89ca47c0693b88f53919', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '209fa94e79a1b937e8306b1b0e5953d8e7fa8ef5' }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: 'caaedeaabcec01c76928e8f86b952ea9297a25ef', icon: "times" }))), h("dso-scrollable", { key: '34a5fac306731abb91b670f22238501a5cf60f06' }, h("div", { key: '34d4a73073d3a53537821c6d5d1360a5886952aa', class: "content" }, h("slot", { key: '98ed8da0651cbd7d30cc6a38948451bce2e1b29a' }))))));
+        return (h(Fragment, null, h("button", { key: 'b441858814604737198dee69f4846f6c9f9defa5', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '6413ca3c5e95bf73e2bb6dc9b0a084f7f571c6b5', icon: "layers" }), h("span", { key: '99b7a59c28ff5bde93899c033ab823c989681074' }, this.text("layersButton"))), h("div", { key: 'db99e4f86727a989f08d917e849117476988265e', class: "zoom-buttons" }, h("button", { key: '303e997c3ca4523bb043acd52704a91821707a4b', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'd16dbdcaa12c8b16d86d3c15dea1bab29876de2d' }, this.text("zoomIn")), h("dso-icon", { key: '294f98be996687998285a9e5f97746544126f8d4', icon: "plus" })), h("button", { key: '503b79c1ac721de7fe4afb8be473b8e8ef83b247', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: 'e957feacae4705fe6aea225f7cbb8947bfea8abb' }, this.text("zoomOut")), h("dso-icon", { key: '121b6fec06a8a629f5ccde14d0ea8a729adc3637', icon: "minus" }))), h("section", { key: '0de7e180cdc57f010bbbc5c34647316147583154', hidden: this.hideContent }, h("header", { key: '2a684665cb6f38d5243d56f03eb33e09a04edc51' }, h("h2", { key: '72d8775338f6619d81ddf668dbed684c3d9114f3' }, this.text("title")), h("button", { key: 'af87fedfd6149ea86d4fee73011110c0fa2e9273', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '5c6b6f98b2856e76d9991e4916182d06fa96c091' }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '79c097527f0c769782e18ff5e6f5ce0551ef6b2e', icon: "times" }))), h("dso-scrollable", { key: '26f4e1fe150f39f3333c550c3a9f976ae5e9397a' }, h("div", { key: '4b477dc5ba05eee31edc894ce19a07cb105d6eca', class: "content" }, h("slot", { key: 'e9fefab83fc4f3f08246393bd91b228563bd7563' }))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -45,7 +45,7 @@ const MapOverlays = class {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '8ef0c3a734d449e75f42c43e2d2f93acb4a443e3', class: "form-group dso-checkboxes" }, h("legend", { key: 'd5317715612e9790d65a411f291c00d7319b9a60', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'e2df4b1aed15cf2e808607a811780ab476bab2b6', class: "dso-label-container" }, h("span", { key: '95751d4947a940c02d7a7b9845f9e51238361519', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'fc68e624a70062c5c98fab61418183ca784f8600', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: '912b3952f7f5e647cd41a29ddfd9c9944f0968ad', class: "form-group dso-checkboxes" }, h("legend", { key: '4a00206699febc7cce55074a8ccc656ccadf88af', class: "sr-only" }, "Kaartlagen"), h("div", { key: '0b26d2deddd8fc32b9ecad91b317ff478c31add0', class: "dso-label-container" }, h("span", { key: '03b7e1541b138e5bd3547ba39e8c59612e906da9', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '70f4823f693900a9061395c486c2a0e75b6e8a78', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-mark-bar.entry.js CHANGED Viewed

@@ -50,7 +50,7 @@ const MarkBar = class {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '654d016b7900a348bb5ecfd0fbe8dd8d1597bf11', class: "dso-mark-bar" }, h("div", { key: '739df0e4d1a381c2f1f2df909d00d958da86ea6e', class: "dso-mark-bar-input" }, h("input", { key: 'be9023cb3f759f8f751accd3d1199bf8c25c6b78', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '1802cb4d1be66d351d68ce743b05a0b2630cc9a2', htmlFor: "search-input" }, h("dso-icon", { key: '29dd2af6fa7ccbff36baabcbcb9ac17f9db75c74', class: "dso-search-icon", icon: "search" }), h("span", { key: '693c70b79a205b28d5d56d4d6e02e4c82bf8cf3d', class: "label-text" }, this.label)), h("button", { key: '4458b5f67b5b90eb03132942c39b3dfdf6f72404', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '601dd220625122f3548e18cd324a90f39430c6bf', icon: "times" }), h("span", { key: 'f3142054e7714925f5c2c22f4b7ac2f47311feb7', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '7f17607ebfdcbce1608d8a5ae6c3e365ce43517c', class: "dso-button-container" }, h("span", { key: 'ffb56f06408798b6065d31405167f91890f243e9', class: "divider" }), h("button", { key: '5edb2809f48b286a3cc4857d18a9551e52d775cb', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '74d026687c712e6b51a8b6bd716f2e02f23cb380', icon: "chevron-up", class: "hydrated" }), h("span", { key: '49255a80b38e4db1b99842700cdb4c21b26fcffb', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: 'f6a268019e5e946f359386693db8b664e7a995da' }, current, "/", totalCount), h("button", { key: '917951cca40a5f84d9f76f24ab0e713f56280b28', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: 'e766db3602e8b4011e78f063e552a6b3a32a9442', icon: "chevron-down", class: "hydrated" }), h("span", { key: 'a57cdf1625c09daa708ee9e354a7086bd20ec22d', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (h("div", { key: 'dd7b7eaaabb3c90cb8e22ae789add1e489729997', class: "dso-mark-bar" }, h("div", { key: '4c512dad639d767e3956b9e225fee0b8301dfd63', class: "dso-mark-bar-input" }, h("input", { key: 'cd65945d8d1d76f07b987860fb84162af7e520e4', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'c71d9938fe4b5b7be255ff29dfd933f5ffbda692', htmlFor: "search-input" }, h("dso-icon", { key: '38b0f84fd24ece2c0f8279f61984f1fa458d6c0f', class: "dso-search-icon", icon: "search" }), h("span", { key: '1404fe4cfed0b57d3a19c8cf43c56a7622bb37d5', class: "label-text" }, this.label)), h("button", { key: 'eb4197ba90988a53e1aabf0b9f84eb2039f110fb', type: "button", onClick: this.handleClear }, h("dso-icon", { key: 'd4632a107abcaf10cdad91f51f9a53b495de1a88', icon: "times" }), h("span", { key: '761fbb5e96a50990e6ec0453f216578d78bbc7dd', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '7364c1860a5e684f32ea6800b2bc4c19e9b4f272', class: "dso-button-container" }, h("span", { key: '8c57772036cdc0a51644f157311a85102bf9d92d', class: "divider" }), h("button", { key: '7c0fda2062a24c52787ce272298ed68922ecb87e', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '5c0c6165c64a7011cb8d46f6458440dae6a60e26', icon: "chevron-up", class: "hydrated" }), h("span", { key: '7750fabddc5075e89f5795d4ed6e2e40573ad31d', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: 'a6ac6df0c61467d452dc9547e311db586e391096' }, current, "/", totalCount), h("button", { key: 'dae1e4a795809ac9af20261cd93277640ccbbb9b', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: 'f86affb1ad65b8b5e2d570cabd1855b61488687f', icon: "chevron-down", class: "hydrated" }), h("span", { key: '5f016699b38483d38303c6f7cfac48778394d6ae', class: "sr-only" }, "Volgend zoekresultaat")))));
     }
 };
 MarkBar.style = markBarCss;

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

@@ -68,10 +68,10 @@ const Modal = class {
     }
     render() {
         var _a;
-        return (h("dialog", { key: 'ccf4e09ebb89081ed7a64ef33fac7f45f6759472', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
+        return (h("dialog", { key: 'b00551329a77638a99e92fc9535fc97bedddf777', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
                 e.preventDefault();
                 this.dsoClose.emit({ originalEvent: e });
-            } }, h("div", { key: '78bb62b918f77eff28a6f19f02b3e96e7d81c263', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '5000362fe08de5cf67a307e50ae036da36a9eabd' }, h("div", { key: '46acc85a8f80c96792ebaf46eab3ee9077047040', class: "dso-body", tabIndex: 0 }, h("slot", { key: '0a5abf6641f7f3da1ac70cede9355c56eb577d9d', name: "body" }))), this.hasFooter && (h("div", { key: 'e731105b044fb9cd47ad1a8ccdd0265d6304a915', class: "dso-footer" }, h("slot", { key: 'fcbc1f8e4f1e45df0dd52c9bddcb992d5569d42a', name: "footer" }))))));
+            } }, h("div", { key: '0431cff1fb6b496c96991f01cbc51b5680505a2b', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: 'b5e0c1d6f3894f5fa358573180c8cdf6568248ab' }, h("div", { key: '15d5f642b319448922960e008f5e40760e6b2bf4', class: "dso-body", tabIndex: 0 }, h("slot", { key: '89a6c5aad48a67c10f4ac8065734f190856cddbd', name: "body" }))), this.hasFooter && (h("div", { key: '9ec880a7f89630a0635d952dc3078751cfba36e4', class: "dso-footer" }, h("slot", { key: '5606e60c780ab8c26435664f7e4a751f94a54c60', name: "footer" }))))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-onboarding-tip.entry.js CHANGED Viewed

@@ -1753,7 +1753,7 @@ const OnboardingTip = class {
         });
     }
     render() {
-        return (h(Host, { key: '81f55bb9189b1e006db917d0563d67701710f519', popover: "manual" }, h("div", { key: 'eed3544de4a3a2b592c4ae418a582e87b2ee0133', class: "onboarding-tip", role: "tooltip" }, h("div", { key: '5847872cf4e5b918c525d62a3d592a765a8e8154', class: "onboarding-tip-inner" }, h("div", { key: 'c35d3a3fe5e926dde418019e1b8b209e6223d504', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '1911891c6aff456fc4e43f80b687f87d1ba1df9d', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '3050474a5736b09709e114f1397b8160cb5b9868', icon: "light-bulb" }), h("slot", { key: '86c668f6602ba615db80c4338edc1157cdaa9999', name: "heading" }))), h("button", { key: '65d9ec9d3e84a409fa18ebd4d6343377a6e25126', type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { key: 'ec8eb3a63525d2736debd7986ce5546619315553', icon: "times" }), h("span", { key: '99e9048e8003e211488c7fdd2eeda4a32c740b3a', class: "sr-only" }, "Sluiten")), h("slot", { key: '886ba7c055fc303d0186dec7ca30c90d2c6c2943' }))), h("div", { key: 'e838baea223b335370a4d0f14f300fa6d48853a7', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: 'dfebef068529cd980e0687b2cd5f9174787b6362', popover: "manual" }, h("div", { key: 'a4be1d3305a8d5adf5c5182cef80835b238e7774', class: "onboarding-tip", role: "tooltip" }, h("div", { key: 'ea8adbe1732c9158295967cd8a408d13c047200d', class: "onboarding-tip-inner" }, h("div", { key: '50371ee599f9a1cffdde7054d48d6e2c77ad6371', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'd5316ac2efae64714d518e044eecb5f029dd2813', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: 'f915a2258b8874eec15ec42c4a1249d8e17f4e2f', icon: "light-bulb" }), h("slot", { key: '132fbab5f794a2e4bafbdaf178cc45ea165daf7d', name: "heading" }))), h("button", { key: '29ef10c9ff3fb2d996a7d479a94409617db56775', type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { key: 'b5e5786d2d646f7aaaa5b752773eee8c7a16779f', icon: "times" }), h("span", { key: 'fbfc0861af78a5bf87e87e86241199abf1ea9a66', class: "sr-only" }, "Sluiten")), h("slot", { key: '08b3622b8244f51443a7fe28573efbcc60e264d3' }))), h("div", { key: '4f614b48c66975e71246588de6e8329f652d365f', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");