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

@dso-toolkit/core 72.2.0 → 73.0.1

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

Files changed (313) hide show

package/dist/dso-toolkit/p-3dc6df90.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["translations","en","menu","login","logout","help","overflowMenu","nl","userHome","headerCss","minDesktopViewportWidth","Header","constructor","hostRef","this","mainMenu","useDropDownMenu","authStatus","showHelp","overflowMenuItems","dropdownOptionsOffset","text","i18n","host","onWindowResize","debounce","_a","dropdownElement","removeAttribute","_b","setDropDownMenu","setOverflowMenu","showDropDown","calculateDropdownOptionsOffset","MenuItem","item","h","class","active","undefined","href","url","onClick","e","clickHandler","menuItem","label","type","options","dsoHeaderClick","emit","originalEvent","isModifiedEvent","setShowDropDown","value","shrinkMenuToFit","wrapper","nav","clientWidth","length","componentDidRender","isConnected","window","setTimeout","componentDidLoad","innerWidth","clientHeight","getBoundingClientRect","bottom","top","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","render","Fragment","clsx","ref","element","name","userHomeUrl","strategy","slot","icon","map","userProfileUrl","userProfileName","loginUrl","logoutUrl","helpUrl","filter","_","index","placement","userHomeActive"],"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"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["translations","en","menu","login","logout","help","overflowMenu","nl","userHome","headerCss","minDesktopViewportWidth","Header","constructor","hostRef","this","mainMenu","useDropDownMenu","authStatus","showHelp","overflowMenuItems","dropdownOptionsOffset","text","i18n","host","onWindowResize","debounce","_a","dropdownElement","removeAttribute","_b","setDropDownMenu","setOverflowMenu","showDropDown","calculateDropdownOptionsOffset","MenuItem","item","h","class","active","undefined","href","url","onClick","e","clickHandler","menuItem","label","type","options","dsoHeaderClick","emit","originalEvent","isModifiedEvent","setShowDropDown","value","shrinkMenuToFit","wrapper","nav","clientWidth","length","componentDidRender","isConnected","window","setTimeout","componentDidLoad","innerWidth","clientHeight","getBoundingClientRect","bottom","top","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","render","Fragment","clsx","ref","element","name","userHomeUrl","strategy","slot","icon","map","userProfileUrl","userProfileName","loginUrl","logoutUrl","helpUrl","filter","_","index","placement","userHomeActive"],"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"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/{p-daafcc37.entry.js → p-49c301fd.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as s,h as r}from"./p-D2Jo0W7B.js";const e=":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.progress{margin-block-end:8px}.progress .progress-bar{background-color:#fff;border:1px solid #39870c;display:block;block-size:16px}.progress .progress-bar>span{background-color:#39870c;float:inline-start;block-size:100%;inline-size:0%}.progress .progress-bar+span{font-size:14px;margin-block-start:8px}";const a=class{constructor(r){s(this,r);this.min=0;this.max=100}render(){const s=Math.round(this.progress);const e=`${s}%`;return r("div",{key:"890a38e19abe239b15e97ab5e863bbb88a2e4d89",class:"progress"},r("span",{key:"a48b38f078f5ef157d035d9148e07d30363a25e4",class:"progress-bar",role:"progressbar","aria-labelledby":"progress-bar-label","aria-valuenow":s,"aria-valuemin":this.min,"aria-valuemax":this.max},r("span",{key:"d1fb152692ac60590536d7c5d957fc14813f33c3",style:{width:`${e}`}})),r("span",{key:"59d3fbfd633705d73ad442602e9de1c8f12c2def",id:"progress-bar-label"},r("slot",{key:"90c470afc6e57e744102c2fc7a9c4353a2a6d2b3"})))}};a.style=e;export{a as dso_progress_bar};
-//# sourceMappingURL=p-daafcc37.entry.js.map
+import{r as s,h as r}from"./p-D2Jo0W7B.js";const e=":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.progress{margin-block-end:8px}.progress .progress-bar{background-color:#fff;border:1px solid #39870c;display:block;block-size:16px}.progress .progress-bar>span{background-color:#39870c;float:inline-start;block-size:100%;inline-size:0%}.progress .progress-bar+span{font-size:14px;margin-block-start:8px}";const a=class{constructor(r){s(this,r);this.min=0;this.max=100}render(){const s=Math.round(this.progress);const e=`${s}%`;return r("div",{key:"40521f2c53b54f7850a17554f6243aec2c57c03e",class:"progress"},r("span",{key:"074d5842a7de6677e65b273738dbda4acc9c935d",class:"progress-bar",role:"progressbar","aria-labelledby":"progress-bar-label","aria-valuenow":s,"aria-valuemin":this.min,"aria-valuemax":this.max},r("span",{key:"4d8427286c61cd604549665dd9f4c648b4c663bd",style:{width:`${e}`}})),r("span",{key:"71876a2059c564cde39196b50950a1598809aba1",id:"progress-bar-label"},r("slot",{key:"39979bcb43c3e258934e5d0d80ca2e4584677b81"})))}};a.style=e;export{a as dso_progress_bar};
+//# sourceMappingURL=p-49c301fd.entry.js.map

package/dist/dso-toolkit/p-4fd85452.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as a,f as o,h as r,H as n,g as i}from"./p-D2Jo0W7B.js";import{i as d}from"./p-Hgv-pDpy.js";const t='a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a :is(dso-icon,svg.di)+span,a span+:is(dso-icon,svg.di){margin-inline-start:8px}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:var(--_dso-di-background-image, url("./di.svg#download"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#download-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:var(--_dso-di-background-image, url("./di.svg#external-link"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#external-link-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-image:var(--_dso-di-background-image, url("./di.svg#call-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#call-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-image:var(--_dso-di-background-image, url("./di.svg#email-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#email-scampi"))},::after,*::before{box-sizing:border-box}:host{display:block}:host([is-selectable]:not([is-selectable=false])) .dso-card-container{display:grid;grid-template-columns:1fr minmax(0, 100%)}:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-heading,:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-content{grid-column:2/-1}:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-selectable{grid-row:span 2}:host([active]:not([active=false])) .dso-card-container{background-color:#e5e5e5}.dso-card-container{padding-block:16px;padding-inline:16px;inline-size:100%;block-size:100%}.dso-card-container:has(.dso-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}.dso-card-container .dso-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-card-container .dso-card-heading{flex-wrap:wrap}}.dso-card-container .dso-card-heading+.dso-card-content{margin-block-start:8px}.heading-anchor{display:flex;gap:4px;color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor dso-icon{flex-shrink:0}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}::slotted([slot=selectable]){font-size:0 !important}::slotted([slot=heading]){display:flex !important;align-items:center !important;margin-block-end:0 !important;margin-block-start:0 !important;font-size:1.125em !important;font-weight:700 !important;color:#275937 !important;line-height:1.25 !important}::slotted([slot=content]){--_dt-rich-content-margin-block:8px;--_dt-rich-content-margin-block-end:0;--_dt-rich-content-margin-block-start:0}::slotted([slot=interactions]){display:flex !important;justify-content:space-between !important;margin-inline-start:auto !important}@media screen and (max-width: 480px){::slotted([slot=interactions]){flex-basis:100% !important;margin-block-start:16px !important}}';const s=class{constructor(o){e(this,o);this.dsoCardClick=a(this,"dsoCardClick",7)}connectedCallback(){this.mutationObserver=new MutationObserver((()=>o(this.host)));this.mutationObserver.observe(this.host,{attributes:true,childList:true})}disconnectedCallback(){var e;(e=this.mutationObserver)===null\|\|e===void 0?void 0:e.disconnect();delete this.mutationObserver}clickEventHandler(e){if(!(e.target instanceof HTMLElement)\|\|!this.href){return}return this.dsoCardClick.emit({originalEvent:e,isModifiedEvent:d(e)})}get selectableSlottedElement(){return this.host.querySelector("[slot='selectable']")}get interactionsSlottedElement(){return this.host.querySelector("[slot='interactions']")}render(){const e=this.selectableSlottedElement!==null;return r(n,{key:"ae559eef542b45634fe3e60859befae34b6758f3","is-selectable":e},r("div",{key:"dbdcd6202dd90afe6163746980568b1da93a1f6b",class:"dso-card-container"},r("div",{key:"a2d327a172087119f00e7ad915c376510c812301",class:"dso-card-selectable",hidden:!e},r("slot",{key:"e8362179580065599e3289f415b7713ce5fa314b",name:"selectable"})),r("div",{key:"ef113d547acb93eb7ddb7d764d6068e0f6961e6c",class:"dso-card-heading"},this.mode==="extern"&&r("a",{key:"c96225236d6860f3a49bec5699ff8dc1b38b28d6",href:this.href,class:"heading-anchor",target:"_blank",rel:"noopener noreferrer",onClick:e=>this.clickEventHandler(e)},r("slot",{key:"a47b5fb10f0439e2c13f522ff8a14d62dabe8989",name:"heading"}),r("dso-icon",{key:"51186c704c9075ebc38a4dd0e3074d0ddf9f2d56",icon:"external-link"}),r("span",{key:"1273130ce694c0a4ae4247420ba07e69d00fa643",class:"sr-only"},"(Opent andere website in nieuw tabblad)"))\|\|this.mode==="download"&&r("a",{key:"8b210a4f08569ec47fe39922d7cd9a5e7eacfe51",href:this.href,class:"heading-anchor",onClick:e=>this.clickEventHandler(e)},r("slot",{key:"530f82e059ab739fb981cfa5ab71924ad2c0ccc6",name:"heading"}),r("dso-icon",{key:"ce5c62061feeda349651c41cdb548b6e4acb941c",icon:"download"}))\|\|r("a",{key:"cd96767ed626d0a2b96fa866d7676c080f8285e1",href:this.href,class:"heading-anchor",onClick:e=>this.clickEventHandler(e)},r("slot",{key:"e044d0aff126c3c20827fa1a096b9452266e223f",name:"heading"}),r("dso-icon",{key:"4ea9e29a4b91016bed380b01f2811abc2102a4bb",icon:"chevron-right"})),this.interactionsSlottedElement!==null&&r("slot",{key:"5eb35ed45a897e399a924cd3fa1fd0f73fe08077",name:"interactions"})),r("div",{key:"b316000aed0849ed15352958be227bc65efe6f48",class:"dso-card-content"},r("slot",{key:"8c8c02740df6f4a19f4375f61a2dc8a706a74162",name:"content"}))))}get host(){return i(this)}};s.style=t;export{s as dso_card};
2	+ //# sourceMappingURL=p-4fd85452.entry.js.map

package/dist/dso-toolkit/p-4fd85452.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["cardCss","Card","connectedCallback","this","mutationObserver","MutationObserver","forceUpdate","host","observe","attributes","childList","disconnectedCallback","_a","disconnect","clickEventHandler","e","target","HTMLElement","href","dsoCardClick","emit","originalEvent","isModifiedEvent","selectableSlottedElement","querySelector","interactionsSlottedElement","render","isSelectable","h","Host","key","class","hidden","name","mode","rel","onClick","icon"],"sources":["src/components/card/card.scss?tag=dso-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@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/components/card\";\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n:host([is-selectable]:not([is-selectable=\"false\"])) {\r\n .dso-card-container {\r\n display: grid;\r\n grid-template-columns: 1fr minmax(0, 100%);\r\n\r\n .dso-card-heading,\r\n .dso-card-content {\r\n grid-column: 2 /-1;\r\n }\r\n\r\n .dso-card-selectable {\r\n grid-row: span 2;\r\n }\r\n }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n .dso-card-container {\r\n background-color: card.$background-color-active;\r\n }\r\n}\r\n\r\n.dso-card-container {\r\n padding-block: units.$u2;\r\n padding-inline: units.$u2;\r\n inline-size: 100%;\r\n block-size: 100%;\r\n\r\n &:has(.dso-card-heading a:is(:hover, :focus-visible)) {\r\n background-color: card.$background-color-hover;\r\n }\r\n\r\n .dso-card-heading {\r\n align-items: center;\r\n display: flex;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n flex-wrap: wrap;\r\n }\r\n\r\n + .dso-card-content {\r\n margin-block-start: units.$u1;\r\n }\r\n }\r\n}\r\n\r\n.heading-anchor {\r\n display: flex;\r\n gap: units.$u1 * 0.5;\r\n\r\n color: card.$heading-anchor-color;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n color: card.$heading-anchor-hover-color;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited {\r\n color: card.$heading-anchor-color;\r\n }\r\n\r\n dso-icon {\r\n flex-shrink: 0;\r\n }\r\n\r\n .sr-only {\r\n @include utilities.sr-only();\r\n }\r\n}\r\n\r\n::slotted([slot=\"selectable\"]) {\r\n font-size: 0 !important;\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n display: flex !important;\r\n align-items: center !important;\r\n\r\n margin-block-end: 0 !important;\r\n margin-block-start: 0 !important;\r\n\r\n font-size: 1.125em !important;\r\n font-weight: 700 !important;\r\n color: colors.$bosgroen !important;\r\n line-height: 1.25 !important;\r\n}\r\n\r\n::slotted([slot=\"content\"]) {\r\n --_dt-rich-content-margin-block: #{units.$u1};\r\n --_dt-rich-content-margin-block-end: 0;\r\n --_dt-rich-content-margin-block-start: 0;\r\n}\r\n\r\n::slotted([slot=\"interactions\"]) {\r\n display: flex !important;\r\n justify-content: space-between !important;\r\n margin-inline-start: auto !important;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n flex-basis: 100% !important;\r\n margin-block-start: units.$u2 !important;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, forceUpdate } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { CardClickEvent } from \"./card.interfaces\";\r\n\r\n/**\r\n * @slot selectable - An optional slot to place a `Selectable` in.\r\n * @slot heading - A slot to place the title of the card in.\r\n * @slot interactions - An optional slot for one or more `Button`s, `Label`s, `Toggletip`s or `SlideToggle`s.\r\n * @slot content - An optional slot to place `Rich Content` in.\r\n */\r\n@Component({\r\n tag: \"dso-card\",\r\n styleUrl: \"card.scss\",\r\n shadow: true,\r\n})\r\nexport class Card implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoCardElement;\r\n\r\n /**\r\n * The URL to which the Card heading links.\r\n */\r\n @Prop({ reflect: true })\r\n href!: string | undefined;\r\n\r\n /**\r\n * Display the link as an external link or a download link\r\n * - \"download\"\r\n * - \"extern\"\r\n */\r\n @Prop({ reflect: true })\r\n mode?: string;\r\n\r\n /**\r\n * Makes the Card active.\r\n */\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /**\r\n * Emitted when the Card heading is clicked.\r\n */\r\n @Event()\r\n dsoCardClick!: EventEmitter<CardClickEvent>;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n\r\n private clickEventHandler(e: MouseEvent) {\r\n if (!(e.target instanceof HTMLElement) || !this.href) {\r\n return;\r\n }\r\n\r\n return this.dsoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n }\r\n\r\n get selectableSlottedElement() {\r\n return this.host.querySelector(\"[slot='selectable']\");\r\n }\r\n\r\n get interactionsSlottedElement() {\r\n return this.host.querySelector(\"[slot='interactions']\");\r\n }\r\n\r\n render() {\r\n const isSelectable = this.selectableSlottedElement !== null;\r\n\r\n return (\r\n <Host is-selectable={isSelectable}>\r\n <div class=\"dso-card-container\">\r\n <div class=\"dso-card-selectable\" hidden={!isSelectable}>\r\n <slot name=\"selectable\" />\r\n </div>\r\n <div class=\"dso-card-heading\">\r\n {(this.mode === \"extern\" && (\r\n <a\r\n href={this.href}\r\n class=\"heading-anchor\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n onClick={(e) => this.clickEventHandler(e)}\r\n >\r\n <slot name=\"heading\" />\r\n <dso-icon icon=\"external-link\"></dso-icon>\r\n <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n </a>\r\n )) ||\r\n (this.mode === \"download\" && (\r\n <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n <slot name=\"heading\" />\r\n <dso-icon icon=\"download\"></dso-icon>\r\n </a>\r\n )) || (\r\n <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n <slot name=\"heading\" />\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n )}\r\n {this.interactionsSlottedElement !== null && <slot name=\"interactions\" />}\r\n </div>\r\n <div class=\"dso-card-content\">\r\n <slot name=\"content\" />\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"2GAAA,MAAMA,EAAU,6wJ,MCiBHC,EAAI,M,oEAgCf,iBAAAC,GACEC,KAAKC,iBAAmB,IAAIC,kBAAiB,IAAMC,EAAYH,KAAKI,QAEpEJ,KAAKC,iBAAiBI,QAAQL,KAAKI,KAAM,CAAEE,WAAY,KAAMC,UAAW,M,CAG1E,oBAAAC,G,OACEC,EAAAT,KAAKC,oBAAkB,MAAAQ,SAAA,SAAAA,EAAAC,oBAEhBV,KAAKC,gB,CAGN,iBAAAU,CAAkBC,GACxB,KAAMA,EAAEC,kBAAkBC,eAAiBd,KAAKe,KAAM,CACpD,M,CAGF,OAAOf,KAAKgB,aAAaC,KAAK,CAAEC,cAAeN,EAAGO,gBAAiBA,EAAgBP,I,CAGrF,4BAAIQ,GACF,OAAOpB,KAAKI,KAAKiB,cAAc,sB,CAGjC,8BAAIC,GACF,OAAOtB,KAAKI,KAAKiB,cAAc,wB,CAGjC,MAAAE,GACE,MAAMC,EAAexB,KAAKoB,2BAA6B,KAEvD,OACEK,EAACC,EAAI,CAAAC,IAAA,2DAAgBH,GACnBC,EAAK,OAAAE,IAAA,2CAAAC,MAAM,sBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBAAsBC,QAASL,GACxCC,EAAA,QAAAE,IAAA,2CAAMG,KAAK,gBAEbL,EAAK,OAAAE,IAAA,2CAAAC,MAAM,oBACP5B,KAAK+B,OAAS,UACdN,EAAA,KAAAE,IAAA,2CACEZ,KAAMf,KAAKe,KACXa,MAAM,iBACNf,OAAO,SACPmB,IAAI,sBACJC,QAAUrB,GAAMZ,KAAKW,kBAAkBC,IAEvCa,EAAM,QAAAE,IAAA,2CAAAG,KAAK,YACXL,EAAU,YAAAE,IAAA,2CAAAO,KAAK,kBACfT,EAAA,QAAAE,IAAA,2CAAMC,MAAM,WAAwD,6CAGrE5B,KAAK+B,OAAS,YACbN,EAAA,KAAAE,IAAA,2CAAGZ,KAAMf,KAAKe,KAAMa,MAAM,iBAAiBK,QAAUrB,GAAMZ,KAAKW,kBAAkBC,IAChFa,EAAM,QAAAE,IAAA,2CAAAG,KAAK,YACXL,EAAA,YAAAE,IAAA,2CAAUO,KAAK,eAGjBT,EAAG,KAAAE,IAAA,2CAAAZ,KAAMf,KAAKe,KAAMa,MAAM,iBAAiBK,QAAUrB,GAAMZ,KAAKW,kBAAkBC,IAChFa,EAAM,QAAAE,IAAA,2CAAAG,KAAK,YACXL,EAAA,YAAAE,IAAA,2CAAUO,KAAK,mBAGpBlC,KAAKsB,6BAA+B,MAAQG,EAAA,QAAAE,IAAA,2CAAMG,KAAK,kBAE1DL,EAAK,OAAAE,IAAA,2CAAAC,MAAM,oBACTH,EAAM,QAAAE,IAAA,2CAAAG,KAAK,c","ignoreList":[]}

package/dist/dso-toolkit/{p-8e1a144a.entry.js → p-52cd0064.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,c as s,h as i,g as o}from"./p-D2Jo0W7B.js";import{i as a}from"./p-BbNJ4wXp.js";import{v as t}from"./p-BF0_OXTe.js";const l={en:{"dso-map-overlays":{title:"Maplayers"}},nl:{"dso-map-overlays":{title:"Kaartlagen"}}};const n=":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}";const r=class{constructor(i){e(this,i);this.dsoToggleOverlay=s(this,"dsoToggleOverlay",7);this.selectableRefs={};this.group=t();this.text=a((()=>this.host),l)}overlayChangeHandler(e,s){const{checked:i}=s.detail;this.dsoToggleOverlay.emit({overlay:e,checked:i})}componentDidRender(){this.overlays.filter((e=>{var s,i;return!e.disabled&&((i=(s=this.previousOverlays)===null||s===void 0?void 0:s.find((s=>s.id===e.id)))===null||i===void 0?void 0:i.disabled)===true})).forEach((e=>{var s;(s=this.selectableRefs[e.id])===null||s===void 0?void 0:s.toggleInfo(false)}));this.previousOverlays=this.overlays}render(){for(const e in this.selectableRefs){delete this.selectableRefs[e]}return i("fieldset",{key:"8ef0c3a734d449e75f42c43e2d2f93acb4a443e3",class:"form-group dso-checkboxes"},i("legend",{key:"d5317715612e9790d65a411f291c00d7319b9a60",class:"sr-only"},"Kaartlagen"),i("div",{key:"e2df4b1aed15cf2e808607a811780ab476bab2b6",class:"dso-label-container"},i("span",{key:"95751d4947a940c02d7a7b9845f9e51238361519",class:"control-label","aria-hidden":"true"},this.text("title"))),i("div",{key:"fc68e624a70062c5c98fab61418183ca784f8600",class:"dso-field-container"},this.overlays.map((e=>i("dso-selectable",{key:e.id,type:"checkbox",value:e.name,checked:e.checked,disabled:e.disabled,name:this.group,ref:s=>s&&(this.selectableRefs[e.id]=s),onDsoChange:s=>this.overlayChangeHandler(e,s)},e.name,e.info?i("p",{slot:"info"},e.info):null)))))}get host(){return o(this)}};r.style=n;export{r as dso_map_overlays};
-//# sourceMappingURL=p-8e1a144a.entry.js.map
+import{r as e,c as s,h as i,g as o}from"./p-D2Jo0W7B.js";import{i as a}from"./p-BbNJ4wXp.js";import{v as t}from"./p-BF0_OXTe.js";const l={en:{"dso-map-overlays":{title:"Maplayers"}},nl:{"dso-map-overlays":{title:"Kaartlagen"}}};const d=":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}";const n=class{constructor(i){e(this,i);this.dsoToggleOverlay=s(this,"dsoToggleOverlay",7);this.selectableRefs={};this.group=t();this.text=a((()=>this.host),l)}overlayChangeHandler(e,s){const{checked:i}=s.detail;this.dsoToggleOverlay.emit({overlay:e,checked:i})}componentDidRender(){this.overlays.filter((e=>{var s,i;return!e.disabled&&((i=(s=this.previousOverlays)===null||s===void 0?void 0:s.find((s=>s.id===e.id)))===null||i===void 0?void 0:i.disabled)===true})).forEach((e=>{var s;(s=this.selectableRefs[e.id])===null||s===void 0?void 0:s.toggleInfo(false)}));this.previousOverlays=this.overlays}render(){for(const e in this.selectableRefs){delete this.selectableRefs[e]}return i("fieldset",{key:"912b3952f7f5e647cd41a29ddfd9c9944f0968ad",class:"form-group dso-checkboxes"},i("legend",{key:"4a00206699febc7cce55074a8ccc656ccadf88af",class:"sr-only"},"Kaartlagen"),i("div",{key:"0b26d2deddd8fc32b9ecad91b317ff478c31add0",class:"dso-label-container"},i("span",{key:"03b7e1541b138e5bd3547ba39e8c59612e906da9",class:"control-label","aria-hidden":"true"},this.text("title"))),i("div",{key:"70f4823f693900a9061395c486c2a0e75b6e8a78",class:"dso-field-container"},this.overlays.map((e=>i("dso-selectable",{key:e.id,type:"checkbox",value:e.name,checked:e.checked,disabled:e.disabled,name:this.group,ref:s=>s&&(this.selectableRefs[e.id]=s),onDsoChange:s=>this.overlayChangeHandler(e,s)},e.name,e.info?i("p",{slot:"info"},e.info):null)))))}get host(){return o(this)}};n.style=d;export{n as dso_map_overlays};
+//# sourceMappingURL=p-52cd0064.entry.js.map

package/dist/dso-toolkit/{p-c9049181.entry.js → p-60a2339f.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as s,h as i,H as e,g as o}from"./p-D2Jo0W7B.js";import{i as n}from"./p-BbNJ4wXp.js";const r={en:{"dso-progress-indicator":{label:"Loading results. Please wait..."}},nl:{"dso-progress-indicator":{label:"Resultaten laden: een moment geduld alstublieft."}}};const a="*,*::after,*::before{box-sizing:border-box}.dso-progress-indicator-spinner{display:inline-block;margin:0;position:relative;vertical-align:middle}span.dso-progress-indicator-label{margin-inline-start:16px;vertical-align:middle}:host([block]){align-items:center;display:flex;justify-content:center}:host([size=small]) .dso-progress-indicator-spinner,:host([size=small]) dso-icon,:host(:not([size=medium]):not([size=large])) .dso-progress-indicator-spinner,:host(:not([size=medium]):not([size=large])) dso-icon{block-size:24px;inline-size:24px}:host([size=small]):host([block]),:host(:not([size=medium]):not([size=large])):host([block]){padding-block:12px;padding-inline:16px}:host([size=medium]) .dso-progress-indicator-spinner,:host([size=medium]) dso-icon{block-size:32px;inline-size:32px}:host([size=medium]):host([block]){padding:16px}:host([size=large]) .dso-progress-indicator-spinner,:host([size=large]) dso-icon{block-size:48px;inline-size:48px}:host([size=large]):host([block]){padding-block:24px;padding-inline:16px}";const t=class{constructor(i){s(this,i);this.text=n((()=>this.host),r)}render(){return i(e,{key:"412708c2c447dea51145c32ae824536080b47a2e"},i("span",{key:"d922af84f2971cb5a238da95f5f94f3674436d8e",class:"dso-progress-indicator-spinner",role:"progressbar","aria-labelledby":"progress-indicator-label"},i("dso-icon",{key:"8af8ba31c28fdabacf700b774db95d463111919a",icon:"spinner"})),i("span",{key:"13c5c78b7aab6696dc0896cfbf3e391a30d45762",id:"progress-indicator-label",class:"dso-progress-indicator-label"},this.label||this.text("label")))}get host(){return o(this)}};t.style=a;export{t as dso_progress_indicator};
-//# sourceMappingURL=p-c9049181.entry.js.map
+import{r as s,h as e,H as i,g as o}from"./p-D2Jo0W7B.js";import{i as n}from"./p-BbNJ4wXp.js";const r={en:{"dso-progress-indicator":{label:"Loading results. Please wait..."}},nl:{"dso-progress-indicator":{label:"Resultaten laden: een moment geduld alstublieft."}}};const a="*,*::after,*::before{box-sizing:border-box}.dso-progress-indicator-spinner{display:inline-block;margin:0;position:relative;vertical-align:middle}span.dso-progress-indicator-label{margin-inline-start:16px;vertical-align:middle}:host([block]){align-items:center;display:flex;justify-content:center}:host([size=small]) .dso-progress-indicator-spinner,:host([size=small]) dso-icon,:host(:not([size=medium]):not([size=large])) .dso-progress-indicator-spinner,:host(:not([size=medium]):not([size=large])) dso-icon{block-size:24px;inline-size:24px}:host([size=small]):host([block]),:host(:not([size=medium]):not([size=large])):host([block]){padding-block:12px;padding-inline:16px}:host([size=medium]) .dso-progress-indicator-spinner,:host([size=medium]) dso-icon{block-size:32px;inline-size:32px}:host([size=medium]):host([block]){padding:16px}:host([size=large]) .dso-progress-indicator-spinner,:host([size=large]) dso-icon{block-size:48px;inline-size:48px}:host([size=large]):host([block]){padding-block:24px;padding-inline:16px}";const t=class{constructor(e){s(this,e);this.text=n((()=>this.host),r)}render(){return e(i,{key:"cc49f22d371a2be1b9f076fa4fdf1c0276922df9"},e("span",{key:"00e4e97e10b0aaf1649812bdb994ebb564c2e5ef",class:"dso-progress-indicator-spinner",role:"progressbar","aria-labelledby":"progress-indicator-label"},e("dso-icon",{key:"1647cca5be934f705d954a7a215ac350ed38bad7",icon:"spinner"})),e("span",{key:"9b25c57d9408f208797bb341be1f24620f98dde7",id:"progress-indicator-label",class:"dso-progress-indicator-label"},this.label||this.text("label")))}get host(){return o(this)}};t.style=a;export{t as dso_progress_indicator};
+//# sourceMappingURL=p-60a2339f.entry.js.map

package/dist/dso-toolkit/{p-00431d87.entry.js → p-638cfb25.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{h as e,F as t,r as o,c as i}from"./p-D2Jo0W7B.js";import{c as n}from"./p-ChV9xqsO.js";const s=({owner:o,ancestors:i,item:r,index:a,level:l,setSize:c})=>{var d,u,h,p;return e("li",{key:r.id,class:n("tree-item",{"has-child":r.hasItems,"is-expanded":!!r.open&&!!((d=r.items)===null||d===void 0?void 0:d.length)}),role:"none"},e("div",{class:"tree-branch-control"},r.hasItems?e("div",{onClick:e=>o.itemClick(e,i,r)},e("dso-icon",{icon:r.open?"minus-square":"plus-square"})):e("dso-icon",null)),e("p",{class:n("tree-content",{active:r.active},{selected:r.selected}),tabindex:l===1&&a===0?0:-1,role:"treeitem","aria-expanded":r.hasItems?""+(!!r.open&&!!((u=r.items)===null||u===void 0?void 0:u.length)):undefined,"aria-current":r.active?"true":undefined,"aria-level":l,"aria-setsize":c,"aria-posinset":a+1,"aria-busy":r.loading?"true":undefined,"data-item-id":r.id,onClick:e=>o.itemClick(e,i,r)},r.selected&&e("span",{class:"sr-only"},"Resultaat: "),r.href?e("a",{href:r.href,tabindex:"-1"},r.label):e("span",null,r.label),(h=r.icons)===null||h===void 0?void 0:h.map((t=>e("dso-icon",{icon:t.icon,title:t.label})))),r.open&&e(t,null,r.hasItems&&!r.items&&r.loading?e("dso-progress-indicator",{size:"small",label:"Resultaten laden: een moment geduld alstublieft."}):e("ul",{role:"group"},(p=r.items)===null||p===void 0?void 0:p.map(((t,n,a)=>e(s,{owner:o,ancestors:[...i,r],item:t,index:n,level:l+1,setSize:a.length}))))))};const r=':host ul{list-style-type:none;padding-inline-start:32px;position:relative}:host li{position:relative}:host ul[role=tree]{padding-inline-start:0}:host ul[role=group]::before{border-inline-start:1px solid #275937;content:"";block-size:8px;inset-inline-start:44px;position:absolute;inset-block-start:0;inline-size:0}:host li:not(.has-child)::before{border-block-start:1px solid #275937;content:"";block-size:0;inset-inline-start:12px;position:absolute;inset-block-start:20px;inline-size:16px}:host li:not(.has-child)::after{border-inline-start:1px solid #275937;content:"";block-size:100%;inset-inline-start:12px;position:absolute;inset-block-start:8px;inline-size:0}:host li:not(.has-child):last-child::after{block-size:20px;inset-block-start:0}:host li.has-child::before{border-block-start:1px solid #275937;content:"";block-size:0;inset-inline-start:24px;position:absolute;inset-block-start:20px;inline-size:4px}:host li.has-child:not(:last-child)::after{border-inline-start:1px solid #275937;content:"";block-size:calc(100% - 24px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host li.has-child.is-expanded:last-child::after{border-inline-start:1px solid #275937;content:"";block-size:calc(100% - 32px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host .tree-branch-control{color:#39870c;display:inline-block;font-size:16px;margin-block:8px;margin-inline:0 8px;vertical-align:top}:host .tree-branch-control>div{cursor:pointer}:host .tree-content{cursor:pointer;display:inline-block;margin-block:8px;margin-inline:0;max-inline-size:calc(100% - 40px)}:host .tree-content a{color:#191919;text-decoration:underline}:host .tree-content a:hover,:host .tree-content a:focus{color:#191919;text-decoration:none}:host .tree-content a:active{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content.active{color:#8b4a6a;font-style:italic;font-weight:700;text-decoration:underline}:host .tree-content.active:hover,:host .tree-content.active:focus{text-decoration:none}:host .tree-content.active a{color:#8b4a6a}:host .tree-content.active a:hover,:host .tree-content.active a:focus{text-decoration:none}:host .tree-content dso-icon{color:#39870c;font-size:0.75em;margin-inline-start:0.5em;vertical-align:text-bottom}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}';const a=class{constructor(e){o(this,e);this.dsoOpenItem=i(this,"dsoOpenItem",7);this.dsoCloseItem=i(this,"dsoCloseItem",7);this.dsoClickItem=i(this,"dsoClickItem",7);this.keyDownListener=e=>{if(e.defaultPrevented){return}const t=e=>e.length===1&&e.match(/\S/);const o=e.composedPath().find((e=>e instanceof HTMLElement?e.className==="dso-tree":false));if(!(e.target instanceof HTMLParagraphElement)||!(o instanceof HTMLElement)){return}switch(e.key){case"ArrowDown":a.moveFocus(o,e.target,"next");break;case"ArrowUp":a.moveFocus(o,e.target,"previous");break;case"ArrowRight":a.expandItemOrFocusChild(o,e.target);break;case"ArrowLeft":a.collapseItemOrFocusParent(o,e.target);break;case"End":a.moveFocus(o,e.target,"last");break;case"Home":a.moveFocus(o,e.target,"first");break;case"Enter":case" ":e.target.click();break;default:if(t(e.key)){if(a.setFocusByFirstCharacter(o,e.target,e.key,e.shiftKey)){break}}return}e.preventDefault()};this.itemClick=(e,t,o)=>{if(!(e.target instanceof HTMLElement)){return}const i=e.target.closest(".tree-content");if(i){const n=e.composedPath().find((e=>e instanceof HTMLElement?e.className==="dso-tree":false));if(!(i instanceof HTMLParagraphElement)||!(n instanceof HTMLElement)){return}a.setFocus(n,i);this.dsoClickItem.emit({path:[...t,o],originalEvent:e});return}if(o.open){this.dsoCloseItem.emit([...t,o])}else{this.dsoOpenItem.emit([...t,o])}}}async focusItem(e){var t;const o=this.tree;if(!o||e.length===0){return false}const i=e[e.length-1];if(!i){throw new Error("No itemToFocus found")}const n=Array.from((t=o.querySelectorAll("p"))!==null&&t!==void 0?t:[]).filter((e=>e.offsetWidth>0&&e.offsetHeight>0)).find((e=>e.dataset["itemId"]===i.id));if(!n){return false}a.setFocus(o,n);return true}static setFocus(e,t){if(t){Array.from(e.querySelectorAll("p")).filter((e=>e.tabIndex===0)).forEach((e=>e.tabIndex=-1));t.tabIndex=0;t.focus()}}static moveFocus(e,t,o){const i=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));let n=0;switch(o){case"first":n=0;break;case"previous":n=i.indexOf(t)-1;break;case"next":n=i.indexOf(t)+1;break;case"last":n=i.length-1;break}const s=i[n];if(!s){throw new Error("No focusableItem found")}a.setFocus(e,s)}static expandItemOrFocusChild(e,t){var o;if((t===null||t===void 0?void 0:t.getAttribute("aria-expanded"))==="true"){a.moveFocus(e,t,"next")}else{const e=(o=t.previousElementSibling)===null||o===void 0?void 0:o.firstElementChild;if(e instanceof HTMLElement){e.click()}}}static collapseItemOrFocusParent(e,t){var o,i,n;if((t===null||t===void 0?void 0:t.getAttribute("aria-expanded"))==="true"){const e=(o=t.previousElementSibling)===null||o===void 0?void 0:o.firstElementChild;if(e instanceof HTMLElement){e.click()}}else{const o=(n=(i=t===null||t===void 0?void 0:t.parentElement)===null||i===void 0?void 0:i.parentElement)===null||n===void 0?void 0:n.previousElementSibling;if(o instanceof HTMLElement){a.setFocus(e,o)}}}static setFocusByFirstCharacter(e,t,o,i){const n=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));if(i){n.reverse()}const s=n.indexOf(t);o=o.toLowerCase();let r=n.find(((e,t)=>{var i;return t>s&&((i=e.textContent)===null||i===void 0?void 0:i.toLowerCase().startsWith(o))}));if(!r){r=n.find(((e,t)=>{var i;return t<s&&((i=e.textContent)===null||i===void 0?void 0:i.toLowerCase().startsWith(o))}))}if(r){a.setFocus(e,r);return true}return false}render(){var t;return e("div",{key:"bb0af3cdb37897eab28b61c078dcd1598122e4b9",id:"tree",class:"dso-tree",onKeyDown:e=>this.keyDownListener(e),ref:e=>this.tree=e},e("ul",{key:"034cbbf4aa4272aecfa5f670787f53b68bf61d76",role:"tree","aria-label":"Objectenboom"},(t=this.collection)===null||t===void 0?void 0:t.map(((t,o)=>e(s,{owner:this,ancestors:[],item:t,index:o,level:1,setSize:this.collection.length})))))}};a.style=r;export{a as dso_tree_view};
-//# sourceMappingURL=p-00431d87.entry.js.map
+import{h as e,F as t,r as o,c as i}from"./p-D2Jo0W7B.js";import{c as n}from"./p-ChV9xqsO.js";const s=({owner:o,ancestors:i,item:r,index:a,level:l,setSize:c})=>{var d,u,h,p;return e("li",{key:r.id,class:n("tree-item",{"has-child":r.hasItems,"is-expanded":!!r.open&&!!((d=r.items)===null||d===void 0?void 0:d.length)}),role:"none"},e("div",{class:"tree-branch-control"},r.hasItems?e("div",{onClick:e=>o.itemClick(e,i,r)},e("dso-icon",{icon:r.open?"minus-square":"plus-square"})):e("dso-icon",null)),e("p",{class:n("tree-content",{active:r.active},{selected:r.selected}),tabindex:l===1&&a===0?0:-1,role:"treeitem","aria-expanded":r.hasItems?""+(!!r.open&&!!((u=r.items)===null||u===void 0?void 0:u.length)):undefined,"aria-current":r.active?"true":undefined,"aria-level":l,"aria-setsize":c,"aria-posinset":a+1,"aria-busy":r.loading?"true":undefined,"data-item-id":r.id,onClick:e=>o.itemClick(e,i,r)},r.selected&&e("span",{class:"sr-only"},"Resultaat: "),r.href?e("a",{href:r.href,tabindex:"-1"},r.label):e("span",null,r.label),(h=r.icons)===null||h===void 0?void 0:h.map((t=>e("dso-icon",{icon:t.icon,title:t.label})))),r.open&&e(t,null,r.hasItems&&!r.items&&r.loading?e("dso-progress-indicator",{size:"small",label:"Resultaten laden: een moment geduld alstublieft."}):e("ul",{role:"group"},(p=r.items)===null||p===void 0?void 0:p.map(((t,n,a)=>e(s,{owner:o,ancestors:[...i,r],item:t,index:n,level:l+1,setSize:a.length}))))))};const r=':host ul{list-style-type:none;padding-inline-start:32px;position:relative}:host li{position:relative}:host ul[role=tree]{padding-inline-start:0}:host ul[role=group]::before{border-inline-start:1px solid #275937;content:"";block-size:8px;inset-inline-start:44px;position:absolute;inset-block-start:0;inline-size:0}:host li:not(.has-child)::before{border-block-start:1px solid #275937;content:"";block-size:0;inset-inline-start:12px;position:absolute;inset-block-start:20px;inline-size:16px}:host li:not(.has-child)::after{border-inline-start:1px solid #275937;content:"";block-size:100%;inset-inline-start:12px;position:absolute;inset-block-start:8px;inline-size:0}:host li:not(.has-child):last-child::after{block-size:20px;inset-block-start:0}:host li.has-child::before{border-block-start:1px solid #275937;content:"";block-size:0;inset-inline-start:24px;position:absolute;inset-block-start:20px;inline-size:4px}:host li.has-child:not(:last-child)::after{border-inline-start:1px solid #275937;content:"";block-size:calc(100% - 24px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host li.has-child.is-expanded:last-child::after{border-inline-start:1px solid #275937;content:"";block-size:calc(100% - 32px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host .tree-branch-control{color:#39870c;display:inline-block;font-size:16px;margin-block:8px;margin-inline:0 8px;vertical-align:top}:host .tree-branch-control>div{cursor:pointer}:host .tree-content{cursor:pointer;display:inline-block;margin-block:8px;margin-inline:0;max-inline-size:calc(100% - 40px)}:host .tree-content a{color:#191919;text-decoration:underline}:host .tree-content a:hover,:host .tree-content a:focus{color:#191919;text-decoration:none}:host .tree-content a:active{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content.active{color:#8b4a6a;font-style:italic;font-weight:700;text-decoration:underline}:host .tree-content.active:hover,:host .tree-content.active:focus{text-decoration:none}:host .tree-content.active a{color:#8b4a6a}:host .tree-content.active a:hover,:host .tree-content.active a:focus{text-decoration:none}:host .tree-content dso-icon{color:#39870c;font-size:0.75em;margin-inline-start:0.5em;vertical-align:text-bottom}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}';const a=class{constructor(e){o(this,e);this.dsoOpenItem=i(this,"dsoOpenItem",7);this.dsoCloseItem=i(this,"dsoCloseItem",7);this.dsoClickItem=i(this,"dsoClickItem",7);this.keyDownListener=e=>{if(e.defaultPrevented){return}const t=e=>e.length===1&&e.match(/\S/);const o=e.composedPath().find((e=>e instanceof HTMLElement?e.className==="dso-tree":false));if(!(e.target instanceof HTMLParagraphElement)||!(o instanceof HTMLElement)){return}switch(e.key){case"ArrowDown":a.moveFocus(o,e.target,"next");break;case"ArrowUp":a.moveFocus(o,e.target,"previous");break;case"ArrowRight":a.expandItemOrFocusChild(o,e.target);break;case"ArrowLeft":a.collapseItemOrFocusParent(o,e.target);break;case"End":a.moveFocus(o,e.target,"last");break;case"Home":a.moveFocus(o,e.target,"first");break;case"Enter":case" ":e.target.click();break;default:if(t(e.key)){if(a.setFocusByFirstCharacter(o,e.target,e.key,e.shiftKey)){break}}return}e.preventDefault()};this.itemClick=(e,t,o)=>{if(!(e.target instanceof HTMLElement)){return}const i=e.target.closest(".tree-content");if(i){const n=e.composedPath().find((e=>e instanceof HTMLElement?e.className==="dso-tree":false));if(!(i instanceof HTMLParagraphElement)||!(n instanceof HTMLElement)){return}a.setFocus(n,i);this.dsoClickItem.emit({path:[...t,o],originalEvent:e});return}if(o.open){this.dsoCloseItem.emit([...t,o])}else{this.dsoOpenItem.emit([...t,o])}}}async focusItem(e){var t;const o=this.tree;if(!o||e.length===0){return false}const i=e[e.length-1];if(!i){throw new Error("No itemToFocus found")}const n=Array.from((t=o.querySelectorAll("p"))!==null&&t!==void 0?t:[]).filter((e=>e.offsetWidth>0&&e.offsetHeight>0)).find((e=>e.dataset["itemId"]===i.id));if(!n){return false}a.setFocus(o,n);return true}static setFocus(e,t){if(t){Array.from(e.querySelectorAll("p")).filter((e=>e.tabIndex===0)).forEach((e=>e.tabIndex=-1));t.tabIndex=0;t.focus()}}static moveFocus(e,t,o){const i=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));let n=0;switch(o){case"first":n=0;break;case"previous":n=i.indexOf(t)-1;break;case"next":n=i.indexOf(t)+1;break;case"last":n=i.length-1;break}const s=i[n];if(!s){throw new Error("No focusableItem found")}a.setFocus(e,s)}static expandItemOrFocusChild(e,t){var o;if((t===null||t===void 0?void 0:t.getAttribute("aria-expanded"))==="true"){a.moveFocus(e,t,"next")}else{const e=(o=t.previousElementSibling)===null||o===void 0?void 0:o.firstElementChild;if(e instanceof HTMLElement){e.click()}}}static collapseItemOrFocusParent(e,t){var o,i,n;if((t===null||t===void 0?void 0:t.getAttribute("aria-expanded"))==="true"){const e=(o=t.previousElementSibling)===null||o===void 0?void 0:o.firstElementChild;if(e instanceof HTMLElement){e.click()}}else{const o=(n=(i=t===null||t===void 0?void 0:t.parentElement)===null||i===void 0?void 0:i.parentElement)===null||n===void 0?void 0:n.previousElementSibling;if(o instanceof HTMLElement){a.setFocus(e,o)}}}static setFocusByFirstCharacter(e,t,o,i){const n=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));if(i){n.reverse()}const s=n.indexOf(t);o=o.toLowerCase();let r=n.find(((e,t)=>{var i;return t>s&&((i=e.textContent)===null||i===void 0?void 0:i.toLowerCase().startsWith(o))}));if(!r){r=n.find(((e,t)=>{var i;return t<s&&((i=e.textContent)===null||i===void 0?void 0:i.toLowerCase().startsWith(o))}))}if(r){a.setFocus(e,r);return true}return false}render(){var t;return e("div",{key:"8fa6eac8e8c49987f8d84e3eb5d6a36cca0aa4fc",id:"tree",class:"dso-tree",onKeyDown:e=>this.keyDownListener(e),ref:e=>this.tree=e},e("ul",{key:"7e985edbbd740375b87cdc4de51acf898ce1a653",role:"tree","aria-label":"Objectenboom"},(t=this.collection)===null||t===void 0?void 0:t.map(((t,o)=>e(s,{owner:this,ancestors:[],item:t,index:o,level:1,setSize:this.collection.length})))))}};a.style=r;export{a as dso_tree_view};
+//# sourceMappingURL=p-638cfb25.entry.js.map

package/dist/dso-toolkit/{p-d112b93b.entry.js → p-6841ccee.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,h as t,F as a}from"./p-D2Jo0W7B.js";const d=":host{display:block;padding:16px;border:1px solid #ccc;border-radius:4px}*,*::after,*::before{box-sizing:border-box}::slotted(dl[slot=progress]),::slotted(dl[slot=status]){--_dt-dl-margin-block-end:0;--_dt-dl-before-display:none;--_dt-dl-dt-font-weight:normal;--_dt-dl-dd-margin-block-start:0;--_dt-dl-dd-margin-inline-start:units.$u1;--_dt-dl-dd-padding-inline-start:0;--_dt-dl-dt-inline-size:auto;--_dt-dl-dd-last-margin-block-end:0;--_dt-mark-bg-color:none;--_dt-mark-padding-block:0;--_dt-mark-color:inherit;--_dt-mark-font-weight:600;display:flex !important;flex-wrap:wrap;column-gap:16px}::slotted([slot=status]){--_dt-dl-font-size:0.875rem}::slotted([slot=title]){margin-block:0 !important;font-size:1.25rem !important}::slotted([slot=actions]){display:flex}.project-item-header{display:flex;gap:16px;flex-wrap:nowrap;align-items:flex-start;margin-block-end:16px}.project-item-title{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;flex-grow:1}.project-item-actions{display:flex;flex-shrink:0;flex-wrap:nowrap}.project-item-info{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;align-items:flex-end}";const s=class{constructor(t){e(this,t)}render(){return t(a,null,t("div",{key:"d15ec4ffeb4103f4bb2f112408b7e499aa0d1e68",class:"project-item-header"},t("div",{key:"b1ac2f3768156a459f87de37491031e804ee5fba",class:"project-item-title"},t("slot",{key:"eac6bf4453bfb5b35297dd4472165e4148178f47",name:"title"}),this.label&&t("dso-label",{key:"d0ee0ca487066a5818b6bbb55936a0356f8d20b3",status:"danger",compact:true},this.label)),t("div",{key:"83a5bc2c5795542387d2e7370e963a6b955998be",class:"project-item-actions"},t("slot",{key:"e85d0a59d4cfbc099b8c3740aaaa6b1c7c7bf4cd",name:"actions"}))),t("div",{key:"c494d7ee66614b801697b4b5423aded99287e10d",class:"project-item-info"},t("div",{key:"f1cccf71fab35f07a018ad4a8811e8e1cded2950",class:"project-item-progress"},t("slot",{key:"68601ab911ba1af9ada2454c9bf4c8230b9d2618",name:"progress"})),t("div",{key:"f5619aa511b2bf0f4d9a8b8e38bcd4c6d382669f",class:"project-item-status"},t("slot",{key:"1d7d7d0a9b70a1d3623e61f22d94fa66efbe658b",name:"status"}))))}};s.style=d;export{s as dso_project_item};
-//# sourceMappingURL=p-d112b93b.entry.js.map
+import{r as e,h as t,F as a}from"./p-D2Jo0W7B.js";const d=":host{display:block;padding:16px;border:1px solid #ccc;border-radius:4px}*,*::after,*::before{box-sizing:border-box}::slotted(dl[slot=progress]),::slotted(dl[slot=status]){--_dt-dl-margin-block-end:0;--_dt-dl-before-display:none;--_dt-dl-dt-font-weight:normal;--_dt-dl-dd-margin-block-start:0;--_dt-dl-dd-margin-inline-start:units.$u1;--_dt-dl-dd-padding-inline-start:0;--_dt-dl-dt-inline-size:auto;--_dt-dl-dd-last-margin-block-end:0;--_dt-mark-bg-color:none;--_dt-mark-padding-block:0;--_dt-mark-color:inherit;--_dt-mark-font-weight:600;display:flex !important;flex-wrap:wrap;column-gap:16px}::slotted([slot=status]){--_dt-dl-font-size:0.875rem}::slotted([slot=title]){margin-block:0 !important;font-size:1.25rem !important}::slotted([slot=actions]){display:flex}.project-item-header{display:flex;gap:16px;flex-wrap:nowrap;align-items:flex-start;margin-block-end:16px}.project-item-title{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;flex-grow:1}.project-item-actions{display:flex;flex-shrink:0;flex-wrap:nowrap}.project-item-info{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;align-items:flex-end}";const s=class{constructor(t){e(this,t)}render(){return t(a,null,t("div",{key:"af232d23ec7307a08cfd541e9cd6a7c9d101f442",class:"project-item-header"},t("div",{key:"3310dd878965eb7a8338f92a7a475a8a2e5d1ed8",class:"project-item-title"},t("slot",{key:"2a7a705075ba857ebec0db96fed670eb2f37e38e",name:"title"}),this.label&&t("dso-label",{key:"2cebc6be62ff52e0f1488a7799223c871919f609",status:"danger",compact:true},this.label)),t("div",{key:"9ae781fb767a780c236eb985291284b516679254",class:"project-item-actions"},t("slot",{key:"758bcb55450348db6eb176f71269cd843c956680",name:"actions"}))),t("div",{key:"79aa45c72390d24b6eccec66648c941fc5da7f32",class:"project-item-info"},t("div",{key:"fb6861d5b4636cb905a9d3e43fdcb9e171682094",class:"project-item-progress"},t("slot",{key:"7a41047f7983d1a9776ee6e3a75d23ebfa964362",name:"progress"})),t("div",{key:"330dc5b7042841706d57da3e549b471168858fdb",class:"project-item-status"},t("slot",{key:"932d42797170138dcedb06f046e784ed44788121",name:"status"}))))}};s.style=d;export{s as dso_project_item};
+//# sourceMappingURL=p-6841ccee.entry.js.map

package/dist/dso-toolkit/p-6bbde78f.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,c as r,h as e,F as a,g as i}from"./p-D2Jo0W7B.js";import{A as d}from"./p-COKRRU_q.js";import{w as n,A as t,a as s}from"./p-D4cSA4l8.js";const c='a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a :is(dso-icon,svg.di)+span,a span+:is(dso-icon,svg.di){margin-inline-start:8px}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:var(--_dso-di-background-image, url("./di.svg#download"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#download-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:var(--_dso-di-background-image, url("./di.svg#external-link"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#external-link-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-image:var(--_dso-di-background-image, url("./di.svg#call-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#call-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-image:var(--_dso-di-background-image, url("./di.svg#email-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#email-scampi"))}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=voegtoe]){box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}:host([wijzigactie=verwijder]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=verwijder]){text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){:host([wijzigactie=verwijder]){font-family:sans-serif}},::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500;word-break:break-word}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}';const l=class{constructor(e){o(this,e);this.dsoActiveChange=r(this,"dsoActiveChange",7);this.watcher=n(this.host)}connectedCallback(){this.watcher.watch()}disconnectedCallback(){this.watcher.unwatch()}render(){const o=this.watcher.hasSymbool();return e(d,{key:"f5614d8f23b882d4f4d40c93f339cfb683bbe182",symbol:o?e(s,null):undefined,active:this.active,dsoActiveChange:this.dsoActiveChange,title:e(a,null,e("span",{class:"content"},e("dso-renvooi",{value:this.naam})),this.gewijzigdeLocatie&&e(t,null))})}get host(){return i(this)}};l.style=c;export{l as dso_annotation_gebiedsaanwijzing};
2	+ //# sourceMappingURL=p-6bbde78f.entry.js.map

package/dist/dso-toolkit/p-6bbde78f.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["annotationCss","AnnotationGebiedsaanwijzing","constructor","hostRef","this","watcher","host","connectedCallback","watch","disconnectedCallback","unwatch","render","hasSymbool","h","AnnotationBody","key","symbol","AnnotationSymbolSlot","undefined","active","dsoActiveChange","title","Fragment","class","value","naam","gewijzigdeLocatie","AnnotationGewijzigdeLocatie"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-gebiedsaanwijzing&encapsulation=shadow","src/components/annotation/annotation-gebiedsaanwijzing/annotation-gebiedsaanwijzing.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n\r\n:host {\r\n display: block;\r\n padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n display: flex;\r\n gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n font-weight: 500;\r\n word-break: break-word;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n margin-block: 0;\r\n\r\n .content:has(+ dso-label) {\r\n margin-inline-end: units.$u1 * 0.5;\r\n }\r\n}\r\n\r\n.annotation-data {\r\n font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Prop, Event, h, EventEmitter, Fragment, Element } from \"@stencil/core\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n tag: \"dso-annotation-gebiedsaanwijzing\",\r\n styleUrl: \"../annotation.scss\",\r\n shadow: true,\r\n})\r\nexport class AnnotationGebiedsaanwijzing implements ComponentInterface {\r\n /**\r\n * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n */\r\n @Prop({ reflect: true })\r\n wijzigactie?: AnnotationWijzigactie;\r\n\r\n /**\r\n * Een optionele boolean die aangeeft of de annotatie actief is.\r\n */\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /**\r\n * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n */\r\n @Prop({ reflect: true })\r\n gewijzigdeLocatie?: boolean;\r\n\r\n /**\r\n * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n */\r\n @Event()\r\n dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n /**\r\n * De naam van de gebiedsaanwijzing.\r\n */\r\n @Prop()\r\n naam?: RenvooiValue | string;\r\n\r\n @Element()\r\n private host!: HTMLDsoAnnotationGebiedsaanwijzingElement;\r\n\r\n private watcher = watcher(this.host);\r\n\r\n connectedCallback(): void {\r\n this.watcher.watch();\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.watcher.unwatch();\r\n }\r\n\r\n render() {\r\n const hasSymbool = this.watcher.hasSymbool();\r\n\r\n return (\r\n <AnnotationBody\r\n symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n active={this.active}\r\n dsoActiveChange={this.dsoActiveChange}\r\n title={\r\n <>\r\n <span class=\"content\">\r\n <dso-renvooi value={this.naam} />\r\n </span>\r\n {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n </>\r\n }\r\n />\r\n );\r\n }\r\n}\r\n"],"mappings":"sJAAA,MAAMA,EAAgB,0gL,MCgBTC,EAA2B,MALxC,WAAAC,CAAAC,G,2DAuCUC,KAAAC,QAAUA,EAAQD,KAAKE,KA6BhC,CA3BC,iBAAAC,GACEH,KAAKC,QAAQG,O,CAGf,oBAAAC,GACEL,KAAKC,QAAQK,S,CAGf,MAAAC,GACE,MAAMC,EAAaR,KAAKC,QAAQO,aAEhC,OACEC,EAACC,EAAc,CAAAC,IAAA,2CACbC,OAAQJ,EAAaC,EAACI,EAAoB,MAAMC,UAChDC,OAAQf,KAAKe,OACbC,gBAAiBhB,KAAKgB,gBACtBC,MACER,EAAAS,EAAA,KACET,EAAM,QAAAU,MAAM,WACVV,EAAA,eAAaW,MAAOpB,KAAKqB,QAE1BrB,KAAKsB,mBAAqBb,EAACc,EAA8B,Q","ignoreList":[]}

package/dist/dso-toolkit/p-75819075.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as s,c as t,h as e,H as i,g as a}from"./p-D2Jo0W7B.js";const o=":host{display:block}";const r=[{width:624,alias:"large"},{width:375,alias:"medium"},{width:0,alias:"small"}];const l=class{constructor(e){s(this,e);this.dsoSizeChange=t(this,"dsoSizeChange",7);this.sizeAlias=r[0].alias;this.sizeWidth=0;this.observer=new ResizeObserver((([s])=>{var t,e;if(!s){throw new Error("No entry found")}const i=(e=(t=r.find((t=>s.contentRect.width>=t.width)))===null\|\|t===void 0?void 0:t.alias)!==null&&e!==void 0?e:r[0].alias;this.sizeAlias=i;this.dsoSizeChange.emit(i)}))}async getSize(){return this.sizeAlias}componentWillLoad(){this.observer.observe(this.host)}disconnectedCallback(){this.observer.unobserve(this.host)}render(){return e(i,{key:"e91c4381f1dbed450ac401d4da518280a8c29779",small:this.sizeAlias==="small",medium:this.sizeAlias==="medium",large:this.sizeAlias==="large"},e("slot",{key:"41e3674a479ce776ef848b0752b928cb89a3dd4b"}))}get host(){return a(this)}};l.style=o;export{l as dso_responsive_element};
2	+ //# sourceMappingURL=p-75819075.entry.js.map

package/dist/dso-toolkit/{p-d4ac95de.entry.js → p-8123ed2f.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,f as t,h as s,H as a,g as r}from"./p-D2Jo0W7B.js";const i="*,*::after,*::before{box-sizing:border-box}:host{display:block}.tabs{border-block-end:1px solid #39870c;display:flex;gap:2px;flex-wrap:wrap;margin-block-end:24px;padding-inline-start:0}@media screen and (max-width: 767px){.tabs{border:0;display:block}}";const o=class{constructor(t){e(this,t);this.keyUpHandler=e=>{if(!(e.target instanceof HTMLElement)){return}switch(e.key){case"ArrowRight":case"ArrowDown":this.moveFocusToNextTab(e.target);break;case"ArrowLeft":case"ArrowUp":this.moveFocusToPreviousTab(e.target);break;default:return}}}get enabledTabs(){return Array.from(this.host.querySelectorAll(":scope > dso-tab")).reduce(((e,t)=>{if(!t.disabled){e.push(t)}return e}),[])}get firstTab(){return this.enabledTabs[0]}get lastTab(){return this.enabledTabs[this.enabledTabs.length-1]}moveFocusToTab(e){e===null||e===void 0?void 0:e._dsoFocus()}moveFocusToPreviousTab(e){var t;const s=this.enabledTabs.findIndex((t=>t===e));const a=(t=this.enabledTabs[s-1])!==null&&t!==void 0?t:this.lastTab;this.moveFocusToTab(a)}moveFocusToNextTab(e){var t;const s=this.enabledTabs.findIndex((t=>t===e));const a=(t=this.enabledTabs[s+1])!==null&&t!==void 0?t:this.firstTab;this.moveFocusToTab(a)}connectedCallback(){var e;(e=this.mutationObserver)!==null&&e!==void 0?e:this.mutationObserver=new MutationObserver((()=>t(this.host)));this.mutationObserver.observe(this.host,{childList:true})}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()}render(){return s(a,{key:"b9568d7dc32c55b0b54c37b28756274bb57cbacf"},s("div",{key:"314522c3eba0fb007ce5d214d309ab20a4a9e53c",class:"tabs",role:"tablist",onKeyUp:this.keyUpHandler},s("slot",{key:"0ea47d9bd541ee8657b5c9be2f24b6f641051c17"})),s("div",{key:"d7a531a6ee574d7deb3455c3f43d16f40a0faf1b",role:"tabpanel",tabindex:"0"},s("slot",{key:"65e458b46fcf351079f225fb49336ffcc5dd7982",name:"panel"})))}get host(){return r(this)}};o.style=i;export{o as dso_tabs};
-//# sourceMappingURL=p-d4ac95de.entry.js.map
+import{r as e,f as t,h as s,H as a,g as r}from"./p-D2Jo0W7B.js";const i="*,*::after,*::before{box-sizing:border-box}:host{display:block}.tabs{border-block-end:1px solid #39870c;display:flex;gap:2px;flex-wrap:wrap;margin-block-end:24px;padding-inline-start:0}@media screen and (max-width: 767px){.tabs{border:0;display:block}}";const o=class{constructor(t){e(this,t);this.keyUpHandler=e=>{if(!(e.target instanceof HTMLElement)){return}switch(e.key){case"ArrowRight":case"ArrowDown":this.moveFocusToNextTab(e.target);break;case"ArrowLeft":case"ArrowUp":this.moveFocusToPreviousTab(e.target);break;default:return}}}get enabledTabs(){return Array.from(this.host.querySelectorAll(":scope > dso-tab")).reduce(((e,t)=>{if(!t.disabled){e.push(t)}return e}),[])}get firstTab(){return this.enabledTabs[0]}get lastTab(){return this.enabledTabs[this.enabledTabs.length-1]}moveFocusToTab(e){e===null||e===void 0?void 0:e._dsoFocus()}moveFocusToPreviousTab(e){var t;const s=this.enabledTabs.findIndex((t=>t===e));const a=(t=this.enabledTabs[s-1])!==null&&t!==void 0?t:this.lastTab;this.moveFocusToTab(a)}moveFocusToNextTab(e){var t;const s=this.enabledTabs.findIndex((t=>t===e));const a=(t=this.enabledTabs[s+1])!==null&&t!==void 0?t:this.firstTab;this.moveFocusToTab(a)}connectedCallback(){var e;(e=this.mutationObserver)!==null&&e!==void 0?e:this.mutationObserver=new MutationObserver((()=>t(this.host)));this.mutationObserver.observe(this.host,{childList:true})}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()}render(){return s(a,{key:"ee52a51bd4dce360be086fe4ac9603c3b1e12255"},s("div",{key:"7f9270557289a2d6a2d8e949cbf8ee7a8ba286a7",class:"tabs",role:"tablist",onKeyUp:this.keyUpHandler},s("slot",{key:"47ad707d1b2dc383074db54e70f85fdd60c8a3d4"})),s("div",{key:"5864caa924fcee7d74ef10410ee3b0d38d8af2c0",role:"tabpanel",tabindex:"0"},s("slot",{key:"a01b5c9915c4385c713dea531eaccecd9757a940",name:"panel"})))}get host(){return r(this)}};o.style=i;export{o as dso_tabs};
+//# sourceMappingURL=p-8123ed2f.entry.js.map

package/dist/dso-toolkit/p-8123ed2f.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["tabsCss","Tabs","constructor","hostRef","this","keyUpHandler","e","target","HTMLElement","key","moveFocusToNextTab","moveFocusToPreviousTab","enabledTabs","Array","from","host","querySelectorAll","reduce","tabs","tab","disabled","push","firstTab","lastTab","length","moveFocusToTab","_dsoFocus","focussedTab","index","findIndex","next","_a","connectedCallback","mutationObserver","MutationObserver","forceUpdate","observe","childList","disconnectedCallback","disconnect","render","h","Host","class","role","onKeyUp","tabindex","name"],"sources":["src/components/tabs/tabs.scss?tag=dso-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/link\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.tabs {\r\n border-block-end: 1px solid colors.$grasgroen;\r\n display: flex;\r\n gap: 2px;\r\n flex-wrap: wrap;\r\n margin-block-end: units.$block-spacing-large;\r\n padding-inline-start: 0;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border: 0;\r\n display: block;\r\n }\r\n}\r\n","import { Element, Component, h, Host, forceUpdate } from \"@stencil/core\";\r\n\r\n/**\r\n * @slot - The dso-tab elements. These should be direct children of the dso-tabs element.\r\n * @slot panel - The panel with the content for the active tab\r\n */\r\n@Component({\r\n tag: \"dso-tabs\",\r\n styleUrl: \"tabs.scss\",\r\n shadow: true,\r\n})\r\nexport class Tabs {\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n host!: HTMLDsoTabsElement;\r\n\r\n private get enabledTabs() {\r\n // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft\r\n return Array.from(this.host.querySelectorAll<HTMLDsoTabElement>(\":scope > dso-tab\")).reduce<HTMLDsoTabElement[]>(\r\n (tabs, tab) => {\r\n if (!tab.disabled) {\r\n tabs.push(tab);\r\n }\r\n\r\n return tabs;\r\n },\r\n [],\r\n );\r\n }\r\n\r\n private get firstTab() {\r\n return this.enabledTabs[0];\r\n }\r\n\r\n private get lastTab() {\r\n return this.enabledTabs[this.enabledTabs.length - 1];\r\n }\r\n\r\n private moveFocusToTab(tab: HTMLDsoTabElement | undefined) {\r\n tab?._dsoFocus();\r\n }\r\n\r\n private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n const next = this.enabledTabs[index - 1] ?? this.lastTab;\r\n\r\n this.moveFocusToTab(next);\r\n }\r\n\r\n private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n const next = this.enabledTabs[index + 1] ?? this.firstTab;\r\n\r\n this.moveFocusToTab(next);\r\n }\r\n\r\n // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.\r\n private keyUpHandler = (e: KeyboardEvent) => {\r\n if (!(e.target instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n switch (e.key) {\r\n case \"ArrowRight\":\r\n case \"ArrowDown\":\r\n this.moveFocusToNextTab(e.target);\r\n break;\r\n case \"ArrowLeft\":\r\n case \"ArrowUp\":\r\n this.moveFocusToPreviousTab(e.target);\r\n break;\r\n default:\r\n return;\r\n }\r\n };\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver ??= new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n <slot />\r\n </div>\r\n <div role=\"tabpanel\" tabindex=\"0\">\r\n <slot name=\"panel\" />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"gEAAA,MAAMA,EAAU,+P,MCWHC,EAAI,MALjB,WAAAC,CAAAC,G,UAoDUC,KAAAC,aAAgBC,IACtB,KAAMA,EAAEC,kBAAkBC,aAAc,CACtC,M,CAGF,OAAQF,EAAEG,KACR,IAAK,aACL,IAAK,YACHL,KAAKM,mBAAmBJ,EAAEC,QAC1B,MACF,IAAK,YACL,IAAK,UACHH,KAAKO,uBAAuBL,EAAEC,QAC9B,MACF,QACE,O,CA0BP,CAlFC,eAAYK,GAEV,OAAOC,MAAMC,KAAKV,KAAKW,KAAKC,iBAAoC,qBAAqBC,QACnF,CAACC,EAAMC,KACL,IAAKA,EAAIC,SAAU,CACjBF,EAAKG,KAAKF,E,CAGZ,OAAOD,CAAI,GAEb,G,CAIJ,YAAYI,GACV,OAAOlB,KAAKQ,YAAY,E,CAG1B,WAAYW,GACV,OAAOnB,KAAKQ,YAAYR,KAAKQ,YAAYY,OAAS,E,CAG5C,cAAAC,CAAeN,GACrBA,IAAG,MAAHA,SAAG,SAAHA,EAAKO,W,CAGC,sBAAAf,CAAuBgB,G,MAC7B,MAAMC,EAAQxB,KAAKQ,YAAYiB,WAAWV,GAAQA,IAAQQ,IAC1D,MAAMG,GAAOC,EAAA3B,KAAKQ,YAAYgB,EAAQ,MAAE,MAAAG,SAAA,EAAAA,EAAI3B,KAAKmB,QAEjDnB,KAAKqB,eAAeK,E,CAGd,kBAAApB,CAAmBiB,G,MACzB,MAAMC,EAAQxB,KAAKQ,YAAYiB,WAAWV,GAAQA,IAAQQ,IAC1D,MAAMG,GAAOC,EAAA3B,KAAKQ,YAAYgB,EAAQ,MAAE,MAAAG,SAAA,EAAAA,EAAI3B,KAAKkB,SAEjDlB,KAAKqB,eAAeK,E,CAuBtB,iBAAAE,G,OACED,EAAA3B,KAAK6B,oBAAgB,MAAAF,SAAA,EAAAA,EAArB3B,KAAK6B,iBAAqB,IAAIC,kBAAiB,IAAMC,EAAY/B,KAAKW,QAEtEX,KAAK6B,iBAAiBG,QAAQhC,KAAKW,KAAM,CAAEsB,UAAW,M,CAGxD,oBAAAC,G,OACEP,EAAA3B,KAAK6B,oBAAkB,MAAAF,SAAA,SAAAA,EAAAQ,Y,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAjC,IAAA,4CACHgC,EAAA,OAAAhC,IAAA,2CAAKkC,MAAM,OAAOC,KAAK,UAAUC,QAASzC,KAAKC,cAC7CoC,EAAA,QAAAhC,IAAA,8CAEFgC,EAAA,OAAAhC,IAAA,2CAAKmC,KAAK,WAAWE,SAAS,KAC5BL,EAAA,QAAAhC,IAAA,2CAAMsC,KAAK,W","ignoreList":[]}

package/dist/dso-toolkit/p-a0960751.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["tabCss","Tab","constructor","hostRef","this","emitEvent","e","dsoTabSwitch","emit","originalEvent","isModifiedEvent","MouseEvent","keyUpHandler","key","disabled","active","clickHandler","href","preventDefault","_dsoFocus","_a","anchorOrButtonRef","focus","render","h","Object","assign","role","onKeyUp","onClick","tabIndex","ref","element","type"],"sources":["src/components/tabs/components/tab.scss?tag=dso-tab&encapsulation=shadow","src/components/tabs/components/tab.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/~~anchor~~\";\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/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"tab.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n border-color: tab-variables.$color;\r\n // Make the list-items overlay the bottom border\r\n margin-block-end: -1px;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n :host {\r\n margin-block: 10px;\r\n }\r\n\r\n :host(:first-child) {\r\n margin-block-start: 0;\r\n }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n [role=\"tab\"] {\r\n &,\r\n &:active,\r\n &:focus,\r\n &:hover,\r\n &:visited {\r\n background-color: colors.$wit;\r\n border: 1px solid tab-variables.$color;\r\n border-block-end-color: colors.$wit;\r\n color: tab-variables.$color;\r\n cursor: default;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: tab-variables.$color;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host([disabled]:not([disabled=\"false\"])) {\r\n [role=\"tab\"] {\r\n color: tab-variables.$nav-disabled-link-color;\r\n\r\n &:hover,\r\n &:focus {\r\n color: tab-variables.$nav-disabled-link-hover-color;\r\n text-decoration: none;\r\n cursor: scaffolding.$cursor-disabled;\r\n background-color: transparent;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: colors.$wit;\r\n }\r\n }\r\n }\r\n}\r\n\r\na {\r\n @include ~~anchor~~.clean();\r\n\r\n &:visited {\r\n color: tab-variables.$text-color;\r\n }\r\n}\r\n\r\nbutton {\r\n font-family: inherit;\r\n font-size: inherit;\r\n background-color: transparent;\r\n}\r\n\r\n[role=\"tab\"] {\r\n font-weight: bold;\r\n cursor: pointer;\r\n display: block;\r\n min-block-size: tab-variables.$block-size;\r\n border: 1px solid transparent;\r\n border-radius: tab-variables.$border-radius tab-variables.$border-radius 0 0;\r\n color: tab-variables.$text-color;\r\n line-height: typography.$line-height-base;\r\n padding-block: tab-variables.$block-padding;\r\n padding-inline: tab-variables.$inline-padding;\r\n\r\n &:hover {\r\n border-color: tab-variables.$link-hover-border-color tab-variables.$link-hover-border-color\r\n tab-variables.$border-color;\r\n }\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n background-color: tab-variables.$nav-link-hover-bg;\r\n }\r\n\r\n &:active,\r\n &:focus,\r\n &:hover {\r\n background-color: tab-variables.$hover-color;\r\n border: 1px solid transparent;\r\n border-block-end-color: tab-variables.$color;\r\n text-decoration: none;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: colors.$wit;\r\n }\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-color: colors.$wit;\r\n border-radius: 8px;\r\n padding-block: 18px;\r\n padding-inline: 20px;\r\n inline-size: 100%;\r\n text-align: start;\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h, Method } from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/*\r\n @slot - The label for this tab\r\n /\r\n@Component({\r\n tag: \"dso-tab\",\r\n styleUrl: \"tab.scss\",\r\n shadow: true,\r\n})\r\nexport class Tab {\r\n @Element()\r\n host!: HTMLDsoTabElement;\r\n\r\n /\r\n Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n /\r\n @Prop({ reflect: true })\r\n disabled?: boolean;\r\n\r\n /\r\n The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n /\r\n @Prop()\r\n href?: string;\r\n\r\n /\r\n Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n /\r\n @Event()\r\n dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _dsoFocus() {\r\n this.anchorOrButtonRef?.focus();\r\n }\r\n\r\n private anchorOrButtonRef?: HTMLAnchorElement \| HTMLButtonElement;\r\n\r\n private emitEvent = (e: MouseEvent \| KeyboardEvent) => {\r\n this.dsoTabSwitch.emit({\r\n originalEvent: e,\r\n isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n });\r\n };\r\n\r\n private keyUpHandler = (e: KeyboardEvent) => {\r\n if (e.key === \" \" && !this.disabled && !this.active) {\r\n this.emitEvent(e);\r\n }\r\n };\r\n\r\n private clickHandler = (e: MouseEvent) => {\r\n if ((this.disabled && this.href) \|\| this.active) {\r\n e.preventDefault();\r\n } else {\r\n this.emitEvent(e);\r\n }\r\n };\r\n\r\n render() {\r\n return this.href ? (\r\n <a\r\n role=\"tab\"\r\n href={this.href}\r\n onKeyUp={this.keyUpHandler}\r\n onClick={this.clickHandler}\r\n aria-selected={this.active ? \"true\" : \"false\"}\r\n {...(!this.active ? { tabIndex: -1 } : {})}\r\n ref={(element) => (this.anchorOrButtonRef = element)}\r\n >\r\n <slot />\r\n </a>\r\n ) : (\r\n <button\r\n role=\"tab\"\r\n type=\"button\"\r\n disabled={this.disabled}\r\n onClick={this.clickHandler}\r\n aria-selected={this.active ? \"true\" : \"false\"}\r\n {...(!this.active ? { tabIndex: -1 } : {})}\r\n ref={(element) => (this.anchorOrButtonRef = element)}\r\n >\r\n <slot />\r\n </button>\r\n );\r\n }\r\n}\r\n"],"mappings":"6FAAA,MAAMA,EAAS,iwE,MCYFC,EAAG,MALhB,WAAAC,CAAAC,G,qDA2CUC,KAAAC,UAAaC,IACnBF,KAAKG,aAAaC,KAAK,CACrBC,cAAeH,EACfI,gBAAiBJ,aAAaK,WAAaD,EAAgBJ,GAAK,OAChE,EAGIF,KAAAQ,aAAgBN,IACtB,GAAIA,EAAEO,MAAQ,MAAQT,KAAKU,WAAaV,KAAKW,OAAQ,CACnDX,KAAKC,UAAUC,E,GAIXF,KAAAY,aAAgBV,IACtB,GAAKF,KAAKU,UAAYV,KAAKa,MAASb,KAAKW,OAAQ,CAC/CT,EAAEY,gB,KACG,CACLd,KAAKC,UAAUC,E,EA+BpB,CAtDC,eAAMa,G,OACJC,EAAAhB,KAAKiB,qBAAmB,MAAAD,SAAA,SAAAA,EAAAE,O,CA0B1B,MAAAC,GACE,OAAOnB,KAAKa,KACVO,EACE,IAAAC,OAAAC,OAAA,CAAAC,KAAK,MACLV,KAAMb,KAAKa,KACXW,QAASxB,KAAKQ,aACdiB,QAASzB,KAAKY,aAAY,gBACXZ,KAAKW,OAAS,OAAS,UAChCX,KAAKW,OAAS,CAAEe,UAAU,GAAO,GAAG,CAC1CC,IAAMC,GAAa5B,KAAKiB,kBAAoBW,IAE5CR,EAAA,cAGFA,EAAA,SAAAC,OAAAC,OAAA,CACEC,KAAK,MACLM,KAAK,SACLnB,SAAUV,KAAKU,SACfe,QAASzB,KAAKY,aACC,gBAAAZ,KAAKW,OAAS,OAAS,UAChCX,KAAKW,OAAS,CAAEe,UAAU,GAAO,GAAG,CAC1CC,IAAMC,GAAa5B,KAAKiB,kBAAoBW,IAE5CR,EAAQ,a","ignoreList":[]}
1	+ {"version":3,"names":["tabCss","Tab","constructor","hostRef","this","emitEvent","e","dsoTabSwitch","emit","originalEvent","isModifiedEvent","MouseEvent","keyUpHandler","key","disabled","active","clickHandler","href","preventDefault","_dsoFocus","_a","anchorOrButtonRef","focus","render","h","Object","assign","role","onKeyUp","onClick","tabIndex","ref","element","type"],"sources":["src/components/tabs/components/tab.scss?tag=dso-tab&encapsulation=shadow","src/components/tabs/components/tab.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\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/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"tab.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n border-color: tab-variables.$color;\r\n // Make the list-items overlay the bottom border\r\n margin-block-end: -1px;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n :host {\r\n margin-block: 10px;\r\n }\r\n\r\n :host(:first-child) {\r\n margin-block-start: 0;\r\n }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n [role=\"tab\"] {\r\n &,\r\n &:active,\r\n &:focus,\r\n &:hover,\r\n &:visited {\r\n background-color: colors.$wit;\r\n border: 1px solid tab-variables.$color;\r\n border-block-end-color: colors.$wit;\r\n color: tab-variables.$color;\r\n cursor: default;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: tab-variables.$color;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host([disabled]:not([disabled=\"false\"])) {\r\n [role=\"tab\"] {\r\n color: tab-variables.$nav-disabled-link-color;\r\n\r\n &:hover,\r\n &:focus {\r\n color: tab-variables.$nav-disabled-link-hover-color;\r\n text-decoration: none;\r\n cursor: scaffolding.$cursor-disabled;\r\n background-color: transparent;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: colors.$wit;\r\n }\r\n }\r\n }\r\n}\r\n\r\na {\r\n @include link.clean();\r\n\r\n &:visited {\r\n color: tab-variables.$text-color;\r\n }\r\n}\r\n\r\nbutton {\r\n font-family: inherit;\r\n font-size: inherit;\r\n background-color: transparent;\r\n}\r\n\r\n[role=\"tab\"] {\r\n font-weight: bold;\r\n cursor: pointer;\r\n display: block;\r\n min-block-size: tab-variables.$block-size;\r\n border: 1px solid transparent;\r\n border-radius: tab-variables.$border-radius tab-variables.$border-radius 0 0;\r\n color: tab-variables.$text-color;\r\n line-height: typography.$line-height-base;\r\n padding-block: tab-variables.$block-padding;\r\n padding-inline: tab-variables.$inline-padding;\r\n\r\n &:hover {\r\n border-color: tab-variables.$link-hover-border-color tab-variables.$link-hover-border-color\r\n tab-variables.$border-color;\r\n }\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n background-color: tab-variables.$nav-link-hover-bg;\r\n }\r\n\r\n &:active,\r\n &:focus,\r\n &:hover {\r\n background-color: tab-variables.$hover-color;\r\n border: 1px solid transparent;\r\n border-block-end-color: tab-variables.$color;\r\n text-decoration: none;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: colors.$wit;\r\n }\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-color: colors.$wit;\r\n border-radius: 8px;\r\n padding-block: 18px;\r\n padding-inline: 20px;\r\n inline-size: 100%;\r\n text-align: start;\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h, Method } from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/*\r\n @slot - The label for this tab\r\n /\r\n@Component({\r\n tag: \"dso-tab\",\r\n styleUrl: \"tab.scss\",\r\n shadow: true,\r\n})\r\nexport class Tab {\r\n @Element()\r\n host!: HTMLDsoTabElement;\r\n\r\n /\r\n Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n /\r\n @Prop({ reflect: true })\r\n disabled?: boolean;\r\n\r\n /\r\n The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n /\r\n @Prop()\r\n href?: string;\r\n\r\n /\r\n Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n /\r\n @Event()\r\n dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _dsoFocus() {\r\n this.anchorOrButtonRef?.focus();\r\n }\r\n\r\n private anchorOrButtonRef?: HTMLAnchorElement \| HTMLButtonElement;\r\n\r\n private emitEvent = (e: MouseEvent \| KeyboardEvent) => {\r\n this.dsoTabSwitch.emit({\r\n originalEvent: e,\r\n isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n });\r\n };\r\n\r\n private keyUpHandler = (e: KeyboardEvent) => {\r\n if (e.key === \" \" && !this.disabled && !this.active) {\r\n this.emitEvent(e);\r\n }\r\n };\r\n\r\n private clickHandler = (e: MouseEvent) => {\r\n if ((this.disabled && this.href) \|\| this.active) {\r\n e.preventDefault();\r\n } else {\r\n this.emitEvent(e);\r\n }\r\n };\r\n\r\n render() {\r\n return this.href ? (\r\n <a\r\n role=\"tab\"\r\n href={this.href}\r\n onKeyUp={this.keyUpHandler}\r\n onClick={this.clickHandler}\r\n aria-selected={this.active ? \"true\" : \"false\"}\r\n {...(!this.active ? { tabIndex: -1 } : {})}\r\n ref={(element) => (this.anchorOrButtonRef = element)}\r\n >\r\n <slot />\r\n </a>\r\n ) : (\r\n <button\r\n role=\"tab\"\r\n type=\"button\"\r\n disabled={this.disabled}\r\n onClick={this.clickHandler}\r\n aria-selected={this.active ? \"true\" : \"false\"}\r\n {...(!this.active ? { tabIndex: -1 } : {})}\r\n ref={(element) => (this.anchorOrButtonRef = element)}\r\n >\r\n <slot />\r\n </button>\r\n );\r\n }\r\n}\r\n"],"mappings":"6FAAA,MAAMA,EAAS,iwE,MCYFC,EAAG,MALhB,WAAAC,CAAAC,G,qDA2CUC,KAAAC,UAAaC,IACnBF,KAAKG,aAAaC,KAAK,CACrBC,cAAeH,EACfI,gBAAiBJ,aAAaK,WAAaD,EAAgBJ,GAAK,OAChE,EAGIF,KAAAQ,aAAgBN,IACtB,GAAIA,EAAEO,MAAQ,MAAQT,KAAKU,WAAaV,KAAKW,OAAQ,CACnDX,KAAKC,UAAUC,E,GAIXF,KAAAY,aAAgBV,IACtB,GAAKF,KAAKU,UAAYV,KAAKa,MAASb,KAAKW,OAAQ,CAC/CT,EAAEY,gB,KACG,CACLd,KAAKC,UAAUC,E,EA+BpB,CAtDC,eAAMa,G,OACJC,EAAAhB,KAAKiB,qBAAmB,MAAAD,SAAA,SAAAA,EAAAE,O,CA0B1B,MAAAC,GACE,OAAOnB,KAAKa,KACVO,EACE,IAAAC,OAAAC,OAAA,CAAAC,KAAK,MACLV,KAAMb,KAAKa,KACXW,QAASxB,KAAKQ,aACdiB,QAASzB,KAAKY,aAAY,gBACXZ,KAAKW,OAAS,OAAS,UAChCX,KAAKW,OAAS,CAAEe,UAAU,GAAO,GAAG,CAC1CC,IAAMC,GAAa5B,KAAKiB,kBAAoBW,IAE5CR,EAAA,cAGFA,EAAA,SAAAC,OAAAC,OAAA,CACEC,KAAK,MACLM,KAAK,SACLnB,SAAUV,KAAKU,SACfe,QAASzB,KAAKY,aACC,gBAAAZ,KAAKW,OAAS,OAAS,UAChCX,KAAKW,OAAS,CAAEe,UAAU,GAAO,GAAG,CAC1CC,IAAMC,GAAa5B,KAAKiB,kBAAoBW,IAE5CR,EAAQ,a","ignoreList":[]}