@dso-toolkit/core 56.0.0 → 57.0.0

package/dist/dso-toolkit/p-674e2406.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["headerCss","minDesktopViewportWidth","Header","this","onWindowResize","debounce","_a","dropdownElement","removeAttribute","_b","setDropDownMenu","setOverflowMenu","showDropDown","dropdownOptionsOffset","calculateDropdownOptionsOffset","MenuItem","item","h","class","active","undefined","href","url","onClick","e","clickHandler","menuItem","label","type","options","dsoHeaderClick","emit","originalEvent","isModifiedEvent","setShowDropDown","value","componentWillLoad","hasSubLogo","host","querySelector","shrinkMenuToFit","wrapper","nav","clientWidth","mainMenu","overflowMenuItems","length","componentDidRender","window","setTimeout","componentDidLoad","useDropDownMenu","innerWidth","clientHeight","getBoundingClientRect","bottom","top","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","render","Fragment","clsx","ref","element","name","userHomeUrl","authStatus","strategy","slot","map","userProfileUrl","userProfileName","loginUrl","logoutUrl","filter","_","index","userHomeActive","icon"],"sources":["./src/components/header/header.scss?tag=dso-header&encapsulation=scoped","./src/components/header/header.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"header.variables\" as core-header-variables;\r\n\r\n@mixin nav-item-border($color) {\r\n  border-bottom: 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-top: units.$u1;\r\n  padding: units.$u2 0;\r\n}\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.dso-header {\r\n  border-bottom: 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  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 0 units.$u3;\r\n  padding-bottom: units.$u2;\r\n  padding-top: units.$u2;\r\n}\r\n\r\n.login,\r\n.logout {\r\n  .dso-tertiary {\r\n    cursor: pointer;\r\n    font-family: typography.$font-family-base;\r\n    font-weight: 600;\r\n    vertical-align: text-bottom;\r\n  }\r\n}\r\n\r\n.profile,\r\n.logout,\r\n.login {\r\n  a {\r\n    @include anchor.clean();\r\n\r\n    color: colors.$grasgroen;\r\n    font-weight: 600;\r\n\r\n    &:focus {\r\n      color: colors.$wit;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-header-session {\r\n  display: flex;\r\n  margin-left: auto;\r\n\r\n  .profile {\r\n    a {\r\n      margin-left: units.$u1;\r\n    }\r\n\r\n    + .logout {\r\n      border-left: 3px solid colors.$grijs-20;\r\n      margin-left: units.$u2;\r\n      padding-left: units.$u2;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-navbar {\r\n  flex-basis: 100%;\r\n\r\n  .dso-dropdown-options {\r\n    border-top: 1px solid colors.$grijs-20;\r\n  }\r\n}\r\n\r\ndso-dropdown-menu {\r\n  button {\r\n    align-items: flex-end;\r\n    background-color: transparent;\r\n    border: 0;\r\n    display: flex;\r\n    font-family: typography.$font-family-base;\r\n    padding-right: units.$u4;\r\n  }\r\n\r\n  .dso-dropdown-options {\r\n    border: 0;\r\n    border-radius: 0;\r\n\r\n    @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n      width: 375px;\r\n    }\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      width: 100%;\r\n    }\r\n\r\n    ul li {\r\n      a,\r\n      button {\r\n        color: colors.$bosgroen;\r\n        font-size: 1.25rem;\r\n        padding: units.$u2;\r\n        white-space: pre-wrap;\r\n\r\n        &:focus {\r\n          color: colors.$wit;\r\n        }\r\n\r\n        &:hover {\r\n          background-color: colors.$wit;\r\n          color: colors.$bosgroen;\r\n          text-decoration: underline;\r\n        }\r\n      }\r\n\r\n      &.dso-active {\r\n        a {\r\n          font-weight: 600;\r\n        }\r\n      }\r\n\r\n      + li {\r\n        border-top: 1px solid colors.$grijs-20;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dropdown {\r\n  margin-left: auto;\r\n\r\n  dso-dropdown-menu {\r\n    position: static;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      margin-top: units.$u1 * 3.5;\r\n    }\r\n\r\n    .dso-dropdown-options {\r\n      right: 0;\r\n      top: 100%;\r\n    }\r\n\r\n    button {\r\n      color: colors.$grasgroen;\r\n      font-size: typography.$font-size-base;\r\n      font-weight: 600;\r\n      line-height: normal;\r\n      position: relative;\r\n\r\n      &::after {\r\n        margin-left: units.$u1;\r\n        position: absolute;\r\n        right: 0px;\r\n        top: 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-bottom: 0;\r\n  margin-top: 0;\r\n  padding-left: 0;\r\n\r\n  > li {\r\n    margin-bottom: 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-bottom: 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        left: units.$ru2 * -1 !important;\r\n        top: 3px !important;\r\n      }\r\n\r\n      button {\r\n        @include nav-item-main();\r\n\r\n        align-items: center;\r\n        color: colors.$bosgroen;\r\n        padding-right: units.$u4;\r\n\r\n        &:hover,\r\n        &:active {\r\n          cursor: pointer;\r\n          text-decoration: underline;\r\n        }\r\n\r\n        &::after {\r\n          margin-left: units.$u1;\r\n          position: absolute;\r\n          right: 0px;\r\n          top: auto;\r\n          transform: none;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .menu-user-home {\r\n    margin-left: auto;\r\n\r\n    dso-icon {\r\n      height: 1em;\r\n      margin-right: units.$u1;\r\n      position: relative;\r\n      top: -2px;\r\n      width: 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\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HeaderMenuItem, HeaderNavigationType, HeaderEvent } from \"./header.interfaces\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\n@Component({\r\n  tag: \"dso-header\",\r\n  styleUrl: \"header.scss\",\r\n  scoped: true,\r\n})\r\nexport class Header {\r\n  private clickHandler(\r\n    e: MouseEvent,\r\n    type: HeaderNavigationType,\r\n    options?: { menuItem?: HeaderMenuItem; url?: string }\r\n  ) {\r\n    this.dsoHeaderClick.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n      type,\r\n      menuItem: options?.menuItem,\r\n      url: options?.url ?? options?.menuItem?.url,\r\n    });\r\n  }\r\n\r\n  private dropdownElement?: HTMLElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoHeaderElement;\r\n\r\n  /**\r\n   * The main menu items.\r\n   */\r\n  @Prop()\r\n  mainMenu?: HeaderMenuItem[] = [];\r\n\r\n  /**\r\n   * Either have the dropdown menu appear automatically or always.\r\n   */\r\n  @Prop()\r\n  useDropDownMenu: \"always\" | \"auto\" = \"auto\";\r\n\r\n  /**\r\n   * Used to show the login/logout option. 'none' renders nothing.\r\n   */\r\n  @Prop()\r\n  authStatus: \"none\" | \"loggedIn\" | \"loggedOut\" = \"none\";\r\n\r\n  /**\r\n   * When the `authStatus` is `loggedOut` a loginUrl can be provided, the login button will 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   */\r\n  @Prop()\r\n  logoutUrl?: 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  hasSubLogo = false;\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  componentWillLoad() {\r\n    this.hasSubLogo = this.host.querySelector(\"*[slot = 'sub-logo']\") !== null;\r\n  }\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  componentDidRender() {\r\n    if (this.showDropDown) {\r\n      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n\r\n      return;\r\n    }\r\n\r\n    window.setTimeout(() => this.shrinkMenuToFit(), 0);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.setShowDropDown(this.useDropDownMenu);\r\n\r\n    if (this.showDropDown) {\r\n      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n    }\r\n  }\r\n\r\n  private setOverflowMenu() {\r\n    if (this.showDropDown) {\r\n      return;\r\n    }\r\n\r\n    if (this.overflowMenuItems !== 0) {\r\n      this.overflowMenuItems = 0;\r\n      return;\r\n    }\r\n\r\n    this.shrinkMenuToFit();\r\n  }\r\n\r\n  private setDropDownMenu() {\r\n    if (this.useDropDownMenu !== \"auto\") {\r\n      return;\r\n    }\r\n\r\n    this.showDropDown = window.innerWidth < minDesktopViewportWidth;\r\n  }\r\n\r\n  private calculateDropdownOptionsOffset() {\r\n    if (!this.dropdownElement) {\r\n      return 0;\r\n    }\r\n\r\n    return (\r\n      this.host.clientHeight -\r\n      (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n    );\r\n  }\r\n\r\n  private onWindowResize = debounce(() => {\r\n    this.dropdownElement?.removeAttribute(\"open\");\r\n    this.dropdownElement?.removeAttribute(\"tabindex\");\r\n\r\n    this.setDropDownMenu();\r\n    this.setOverflowMenu();\r\n\r\n    if (this.showDropDown) {\r\n      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n    }\r\n  }, 100);\r\n\r\n  connectedCallback() {\r\n    window.addEventListener(\"resize\", this.onWindowResize);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.removeEventListener(\"resize\", this.onWindowResize);\r\n  }\r\n\r\n  private MenuItem = (item: HeaderMenuItem) => {\r\n    return (\r\n      <li class={item.active ? \"dso-active\" : undefined}>\r\n        <a\r\n          href={item.url}\r\n          aria-current={item.active ? \"page\" : undefined}\r\n          onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem: item })}\r\n        >\r\n          {item.label}\r\n        </a>\r\n      </li>\r\n    );\r\n  };\r\n\r\n  render() {\r\n    // Prevent 'flickering' when useDropDownMenu = 'always'\r\n    if (this.showDropDown === undefined) {\r\n      return;\r\n    }\r\n\r\n    return (\r\n      <>\r\n        <div\r\n          class={clsx(\"dso-header\", {\r\n            [\"use-drop-down\"]: this.showDropDown,\r\n            [\"has-sub-logo\"]: this.hasSubLogo,\r\n          })}\r\n          ref={(element) => (this.wrapper = element)}\r\n        >\r\n          <div class=\"logo-container\">\r\n            <div class=\"logo\">\r\n              <slot name=\"logo\" />\r\n            </div>\r\n            <div class=\"sub-logo\">\r\n              <slot name=\"sub-logo\" />\r\n            </div>\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>Menu</span>\r\n                  </button>\r\n                  <div class=\"dso-dropdown-options\">\r\n                    <ul>\r\n                      {this.mainMenu.map(this.MenuItem)}\r\n                      {this.userHomeUrl && (\r\n                        <li>\r\n                          <a\r\n                            href={this.userHomeUrl}\r\n                            onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n                          >\r\n                            Mijn Omgevingsloket\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                              Inloggen\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                              Inloggen\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                              Uitloggen\r\n                            </a>\r\n                          ) : (\r\n                            <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                              Uitloggen\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                    <span class=\"profile-label\">Welkom:</span>\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                    </a>\r\n                  </div>\r\n                )}\r\n                {this.authStatus === \"loggedOut\" && (\r\n                  <div class=\"login\">\r\n                    {this.loginUrl ? (\r\n                      <a href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\r\n                        Inloggen\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n                        Inloggen\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 href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\r\n                        Uitloggen\r\n                      </a>\r\n                    ) : (\r\n                      <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n                        Uitloggen\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 dropdown-align=\"left\">\r\n                          <button type=\"button\" slot=\"toggle\">\r\n                            <span>Meer</span>\r\n                          </button>\r\n                          <div class=\"dso-dropdown-options\">\r\n                            <ul>\r\n                              {this.mainMenu &&\r\n                                this.mainMenu\r\n                                  .filter(\r\n                                    (_, index) =>\r\n                                      this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems\r\n                                  )\r\n                                  .map(this.MenuItem)}\r\n                            </ul>\r\n                          </div>\r\n                        </dso-dropdown-menu>\r\n                      </li>\r\n                    )}\r\n                    {this.userHomeUrl && (\r\n                      <li class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}>\r\n                        <a\r\n                          href={this.userHomeUrl}\r\n                          aria-current={this.userHomeActive ? \"page\" : undefined}\r\n                          onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n                        >\r\n                          <dso-icon icon=\"user-line\"></dso-icon>\r\n                          Mijn Omgevingsloket\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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"}

package/dist/dso-toolkit/p-909ccf98.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as s,H as n,a as t}from"./p-ce928197.js";import{d}from"./p-1805f5b0.js";import{c as e}from"./p-91963e3d.js";import{v as a}from"./p-5d7f4ff2.js";import"./p-5950644a.js";const i="@keyframes slideInFromTop {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n:host {\n  display: block;\n  margin-bottom: 24px;\n}\n\n.dso-header {\n  min-height: 32px;\n}\n.dso-header h2 {\n  color: #275937;\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n.dso-header .dso-close {\n  color: #275937;\n}\n\n:host .dso-modal {\n  bottom: 0;\n  height: 100%;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 530;\n  inset: 0px;\n  height: 100%;\n  position: fixed;\n  z-index: 530;\n}\n:host .dso-modal .dso-dialog {\n  animation: 1s ease-out 0s 1 slideInFromTop;\n  background-color: #fff;\n  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);\n  margin-left: auto;\n  margin-right: auto;\n  margin-top: clamp(40px, 15vh, 15vh);\n  max-width: 640px;\n  opacity: 1;\n}\n:host .dso-modal .dso-header {\n  border-bottom: 1px solid #ccc;\n  padding: 16px;\n  position: relative;\n}\n:host .dso-modal .dso-header h2 {\n  color: #275937;\n  margin: 0;\n  max-width: calc(100% - 24px);\n}\n:host .dso-modal .dso-header .dso-close {\n  background-color: transparent;\n  border: 0;\n  height: 32px;\n  padding: 0;\n  position: absolute;\n  right: 13px;\n  text-align: center;\n  top: 16px;\n  width: 32px;\n}\n:host .dso-modal > .dso-dialog > .dso-body {\n  height: calc(100% - 96px - 1.5rem);\n  max-height: calc(70vh - 144px - 1.5em);\n  min-height: 1.5rem;\n  overflow-x: auto;\n  padding: 32px;\n}\n:host .dso-modal > .dso-dialog > .dso-body p {\n  margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > .dso-body ul,\n:host .dso-modal > .dso-dialog > .dso-body ol {\n  margin-bottom: 16px;\n}\n:host .dso-modal > .dso-dialog > .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\n:host .dso-modal > .dso-dialog > .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n  padding-inline-start: 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body pre {\n  margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > .dso-body blockquote {\n  padding: 16px 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body dso-highlight-box,\n:host .dso-modal > .dso-dialog > .dso-body .dso-highlight-box {\n  margin-bottom: 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body img {\n  height: auto;\n  max-width: 100%;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable {\n  height: calc(100% - 96px - 1.5rem);\n  max-height: calc(70vh - 144px - 1.5em);\n  min-height: 6.5rem;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body {\n  padding: 32px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body p {\n  margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol {\n  margin-bottom: 16px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n  padding-inline-start: 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body pre {\n  margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body blockquote {\n  padding: 16px 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body dso-highlight-box,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body .dso-highlight-box {\n  margin-bottom: 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body img {\n  height: auto;\n  max-width: 100%;\n}\n:host .dso-modal .dso-footer {\n  min-height: 80px;\n  padding: 16px 32px;\n  text-align: right;\n}\n@media screen and (max-width: 767px) {\n  :host .dso-modal .dso-footer .btn + .btn, :host .dso-modal .dso-footer .btn + .dso-primary, :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn, :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n    margin-left: 0;\n  }\n  :host .dso-modal .dso-footer button {\n    text-align: center;\n    width: 100%;\n  }\n  :host .dso-modal .dso-footer button + button {\n    margin-top: 8px;\n  }\n  :host .dso-modal .dso-footer button.dso-tertiary,\n  :host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,\n  :host .dso-modal .dso-footer button.btn-link span {\n    float: none;\n  }\n}\n@media screen and (min-width: 768px) {\n  :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .btn-default, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .btn-default, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .btn-default, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .btn-default {\n    margin-left: 16px;\n  }\n  :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .btn + .btn-link, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn-link, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn-link, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn-link {\n    margin-left: 0;\n  }\n}\n@media screen and (max-width: 767px) {\n  :host .dso-modal .dso-dialog {\n    max-width: 100%;\n    margin-top: 0;\n  }\n  :host .dso-modal .dso-footer .btn + .btn, :host .dso-modal .dso-footer .btn + .dso-primary, :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn, :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n    margin-left: 0;\n  }\n  :host .dso-modal .dso-footer button {\n    text-align: center;\n    width: 100%;\n  }\n  :host .dso-modal .dso-footer button + button {\n    margin-top: 8px;\n  }\n  :host .dso-modal .dso-footer button.dso-tertiary,\n  :host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,\n  :host .dso-modal .dso-footer button.btn-link span {\n    float: none;\n  }\n}\n@media screen and (max-height: 380px) {\n  :host .dso-modal .dso-dialog {\n    margin-bottom: 8px;\n    margin-top: 8px;\n    min-height: 216px;\n  }\n  :host .dso-modal .dso-header {\n    padding: 8px 16px;\n  }\n  :host .dso-modal .dso-header .dso-close {\n    top: 8px;\n  }\n  :host .dso-modal .dso-body {\n    padding: 16px 24px;\n  }\n  :host .dso-modal .dso-footer {\n    min-height: auto;\n    overflow: auto;\n    padding: 8px 32px;\n  }\n}\n\n.dso-modal .dso-dialog.dso-table-dialog {\n  margin-top: 1rem;\n  max-width: calc(100% - 2rem);\n}\n.dso-modal .dso-dialog.dso-table-dialog .dso-body {\n  max-height: calc(100vh - 112px - 1.5em - 2rem);\n}\n@media screen and (max-width: 767px) {\n  .dso-modal .dso-dialog.dso-table-dialog {\n    max-width: 100%;\n  }\n}\n\n:host([is-responsive]) .dso-table-body {\n  border: 1px solid #ccc;\n  margin-bottom: 0;\n  overflow-y: hidden;\n  width: 100%;\n}\n:host([is-responsive]) .dso-table-body.dso-body {\n  width: calc(100% - 64px);\n}\n\n.dso-table-utilities {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 8px;\n}\n.dso-table-utilities .dso-responsive-message {\n  margin-bottom: 0;\n}\n.dso-table-utilities .dso-responsive-message:only-child {\n  width: 100%;\n}\n.dso-table-utilities .open-modal-button:only-child {\n  margin-left: auto;\n}\n\n.dso-responsive-message {\n  font-size: 0.8em;\n  margin-bottom: 8px;\n  position: relative;\n  text-align: center;\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.dso-tertiary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-modal-overlay {\n  background-color: rgba(255, 255, 255, 0.8);\n  bottom: 0;\n  display: block;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 529;\n}\n\n.dso-table-placeholder {\n  box-shadow: inset 0 0 0 1px #ccc;\n  display: grid;\n  place-content: center;\n}";const r=class{constructor(s){o(this,s);this.labelledbyId=a();this.noModal=false;this.isResponsive=false;this.modalActive=false;this.placeholderHeight=undefined}startResponsiveBehavior(){var o;(o=this.resizeObserver)===null||o===void 0?void 0:o.observe(this.host)}componentWillLoad(){this.resizeObserver=new ResizeObserver(d((o=>this.setResponsiveTable(o)),200))}componentDidLoad(){this.startResponsiveBehavior()}componentDidRender(){this.setFocusTrap()}disconnectedCallback(){var o;(o=this.resizeObserver)===null||o===void 0?void 0:o.disconnect()}render(){var o,t;const d=(t=(o=this.host.querySelector(":scope > table > caption"))===null||o===void 0?void 0:o.textContent)===null||t===void 0?void 0:t.trim();return s(n,null,this.modalActive&&this.placeholderHeight&&s("div",{class:"dso-table-placeholder",style:{height:`${this.placeholderHeight}px`}}),this.modalActive&&s("div",{class:"dso-modal-overlay"}),s("div",{class:{"dso-modal":this.modalActive}},s("div",Object.assign({class:{"dso-dialog":this.modalActive,"dso-table-dialog":true},ref:o=>this.focusTrapElement=o},this.modalActive?{["aria-labelledby"]:this.labelledbyId,role:"dialog"}:{}),(this.isResponsive||!this.noModal)&&s("div",{class:"dso-table-utilities",style:this.modalActive?{display:"none"}:undefined},this.isResponsive&&s("div",{class:"dso-responsive-message"},s("span",null,"beweeg de tabel van links naar rechts")),!this.noModal&&s("button",{type:"button",class:"dso-tertiary open-modal-button",ref:o=>this.buttonElement=o,onClick:()=>this.openModal()},s("span",{class:"sr-only"},"tabel ",d!==null&&d!==void 0?d:""," "),s("span",null,"vergroten"),s("dso-icon",{icon:"external-link"}))),this.modalActive&&s("div",{class:"dso-header"},s("h2",{id:this.labelledbyId,class:{"sr-only":!d}},d||"Uitvergrote tabel dialoog"),s("button",{type:"button",class:"dso-close",onClick:()=>this.closeModal()},s("dso-icon",{icon:"times"}),s("span",{class:"sr-only"},"Sluiten"))),s("div",{class:{"dso-body":this.modalActive,"dso-table-body":true}},s("slot",null)))))}openModal(){this.placeholderHeight=this.host.clientHeight;this.modalActive=true}closeModal(){this.placeholderHeight=undefined;this.modalActive=false}setFocusTrap(){var o,s;if(this.modalActive&&this.focusTrapElement&&!this.trap){this.trap=e([this.host,this.focusTrapElement],{escapeDeactivates:true,clickOutsideDeactivates:o=>{if(o instanceof MouseEvent&&o.composedPath()[0]===this.focusTrapElement){this.closeModal();return false}return true},setReturnFocus:(o=this.buttonElement)!==null&&o!==void 0?o:false,onDeactivate:()=>this.closeModal(),tabbableOptions:{getShadowRoot:true}}).activate()}else if(!this.modalActive&&this.trap){(s=this.trap)===null||s===void 0?void 0:s.deactivate();delete this.trap}}setResponsiveTable([o]){if(!o){throw new Error("No dsoTable found")}const s=o.target.querySelector("table");if(o&&s instanceof HTMLTableElement){this.isResponsive=Math.floor(s.getBoundingClientRect().width)>Math.floor(o.contentRect.width)}}get host(){return t(this)}};r.style=i;export{r as dso_table};
-//# sourceMappingURL=p-909ccf98.entry.js.map

package/dist/dso-toolkit/p-9c0477fc.entry.js

@@ -1,2 +0,0 @@
-import{r as o,c as d,h as s,F as t,a}from"./p-ce928197.js";import{c as r}from"./p-91963e3d.js";import{v as i}from"./p-5d7f4ff2.js";import"./p-5950644a.js";const e="@keyframes slideInFromTop{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{bottom:0;height:100%;left:0;position:fixed;right:0;top:0;z-index:530}.dso-modal .dso-dialog{animation:1s ease-out 0s 1 slideInFromTop;background-color:#fff;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);margin-left:auto;margin-right:auto;margin-top:clamp(40px, 15vh, 15vh);max-width:640px;opacity:1}.dso-modal .dso-header{border-bottom:1px solid #ccc;padding:16px;position:relative}.dso-modal .dso-header h2{color:#275937;margin:0;max-width:calc(100% - 24px)}.dso-modal .dso-header .dso-close{background-color:transparent;border:0;height:32px;padding:0;position:absolute;right:13px;text-align:center;top:16px;width:32px}.dso-modal>.dso-dialog>.dso-body{height:calc(100% - 96px - 1.5rem);max-height:calc(70vh - 144px - 1.5em);min-height:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>.dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>.dso-body img{height:auto;max-width:100%}.dso-modal>.dso-dialog>dso-scrollable{height:calc(100% - 96px - 1.5rem);max-height:calc(70vh - 144px - 1.5em);min-height:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{height:auto;max-width:100%}.dso-modal .dso-footer{min-height:80px;padding:16px 32px;text-align:right}@media screen and (max-width: 767px){.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-left:0}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.btn-default,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.btn-default,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.btn-default,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.btn-default{margin-left:16px}.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .btn+.btn-link,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn-link,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn-link,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn-link{margin-left:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-width:100%;margin-top:0}.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-left:0}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{margin-bottom:8px;margin-top:8px;min-height:216px}.dso-modal .dso-header{padding:8px 16px}.dso-modal .dso-header .dso-close{top:8px}.dso-modal .dso-body{padding:16px 24px}.dso-modal .dso-footer{min-height:auto;overflow:auto;padding:8px 32px}}.dso-modal-overlay{background-color:rgba(255, 255, 255, 0.8);bottom:0;display:block;left:0;position:fixed;right:0;top:0;z-index:529}.dso-close dso-icon{color:#39870c}";const l=class{constructor(s){o(this,s);this.dsoClose=d(this,"dsoClose",7);this.ariaId=i();this.hasFooter=undefined;this.modalTitle=undefined;this.role="dialog";this.showCloseButton=true;this.initialFocus=undefined;this.returnFocus=undefined}componentWillLoad(){this.hasFooter=this.host.querySelector("*[slot = 'footer']")!==null}componentDidLoad(){this.setFocusTrap()}disconnectedCallback(){var o;(o=this.trap)===null||o===void 0?void 0:o.deactivate({onDeactivate:()=>undefined})}render(){var o;return s(t,null,s("div",{class:"dso-modal-overlay"}),s("div",{class:"dso-modal",role:(o=this.role)!==null&&o!==void 0?o:undefined,"aria-modal":"true","aria-labelledby":this.ariaId,ref:o=>this.modalElement=o},s("div",{class:"dso-dialog",role:"document",ref:o=>this.dialogElement=o},this.modalTitle?s("div",{class:"dso-header"},s("h2",{id:this.ariaId},this.modalTitle),this.showCloseButton&&s("button",{type:"button",class:"dso-close",onClick:o=>this.dsoClose.emit({originalEvent:o})},s("dso-icon",{icon:"times"}),s("span",{class:"sr-only"},"Sluiten"))):s("span",{class:"sr-only",id:this.ariaId},"Dialoog"),s("dso-scrollable",null,s("div",{class:"dso-body",tabIndex:0},s("slot",{name:"body"}))),this.hasFooter&&s("div",{class:"dso-footer"},s("slot",{name:"footer"})))))}setFocusTrap(){if(this.dialogElement&&!this.trap){this.trap=r(this.dialogElement,{initialFocus:()=>{var o,d,s;if(this.initialFocus){const o=this.host.querySelector(this.initialFocus);if(!o){console.warn(`element '${this.initialFocus}' could not be found`)}else{return o}}return(s=(o=this.host.querySelector("div[slot='footer'] .dso-primary"))!==null&&o!==void 0?o:(d=this.modalElement)===null||d===void 0?void 0:d.querySelector(".dso-close"))!==null&&s!==void 0?s:false},allowOutsideClick:true,setReturnFocus:o=>{var d,s;return(s=(d=this.returnFocus)===null||d===void 0?void 0:d.call(this,o))!==null&&s!==void 0?s:o},escapeDeactivates:true,tabbableOptions:{getShadowRoot:true},clickOutsideDeactivates:o=>{if(o instanceof MouseEvent&&o.composedPath()[0]===this.modalElement){return true}return false},onDeactivate:()=>{delete this.trap;this.dsoClose.emit({originalEvent:undefined})}}).activate()}}get host(){return a(this)}};l.style=e;export{l as dso_modal};
-//# sourceMappingURL=p-9c0477fc.entry.js.map

package/dist/dso-toolkit/p-b627d9ac.entry.js

@@ -1,2 +0,0 @@
-import{r as n,h as t,F as e}from"./p-ce928197.js";import{c as o}from"./p-91963e3d.js";import"./p-5950644a.js";const r=":host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.wrapper {\n  height: 100%;\n  left: 0;\n  position: fixed;\n  top: 0;\n  visibility: hidden;\n  width: 100%;\n}\n.wrapper.visible {\n  visibility: visible;\n}\n\n.dimscreen {\n  background-color: #000;\n  height: 100%;\n  opacity: 0.4;\n  width: 100%;\n}\n\n.open-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  bottom: 16px;\n  font-family: Asap, sans-serif;\n  position: fixed;\n  right: 16px;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n.open-button:focus, .open-button:focus-visible {\n  outline-offset: 2px;\n}\n.open-button:active {\n  outline: 0;\n}\n.open-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.open-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.open-button[disabled], .open-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.open-button.btn-sm {\n  line-height: 1rem;\n}\n.open-button.btn-sm dso-icon,\n.open-button.btn-sm svg.di, .open-button.btn-sm.extern::after, .open-button.btn-sm.download::after, .open-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.open-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.open-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.open-button dso-icon,\n.open-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.open-button span + dso-icon,\n.open-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.open-button.dso-spinner-left[disabled], .open-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.open-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.open-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.open-button:hover {\n  cursor: pointer;\n}\n.open-button.open {\n  display: none;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border-right: 0;\n  border-top: 0;\n  border-radius: 0 0 0 8px;\n  height: 40px;\n  min-width: 40px;\n  padding: 0;\n  position: fixed;\n  right: 0;\n  width: 40px;\n  top: 0;\n}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.close-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.close-button[disabled], .close-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.close-button.btn-sm {\n  line-height: 1rem;\n}\n.close-button.btn-sm dso-icon,\n.close-button.btn-sm svg.di, .close-button.btn-sm.extern::after, .close-button.btn-sm.download::after, .close-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.close-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.close-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.close-button dso-icon,\n.close-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.close-button span + dso-icon,\n.close-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.close-button.dso-spinner-left[disabled], .close-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.close-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.close-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.close-button dso-icon {\n  margin-left: 0;\n  margin-right: 0;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n.close-button:hover, .close-button:active, .close-button:focus {\n  cursor: pointer;\n}\n.close-button.close {\n  display: none;\n}\n\n.iframe-container {\n  background-color: #fff;\n  border: 0;\n  border-left: 1px solid #ccc;\n  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\n  height: 100%;\n  position: absolute;\n  top: 0;\n  transition: right 0.5s;\n}\n@media screen and (max-width: 480px) {\n  .iframe-container {\n    right: -320px;\n    width: 320px;\n  }\n}\n@media screen and (min-width: 481px) and (max-width: 767px) {\n  .iframe-container {\n    right: -480px;\n    width: 480px;\n  }\n}\n@media screen and (min-width: 768px) {\n  .iframe-container {\n    right: -640px;\n    width: 640px;\n  }\n}\n.iframe-container.open {\n  right: 0;\n}\n\niframe {\n  border: 0;\n  height: 100%;\n  width: 100%;\n}";const s=500;const i=class{constructor(t){n(this,t);this.iframeLoaded=false;this.openClick=()=>{this.visibility="visible";this.slideState="open";setTimeout((()=>{this.isOpen="open"}));if(!this.loadIframe){setTimeout((()=>{this.loadIframe=true}),s)}};this.closeClick=()=>{this.isOpen="close";this.slideState="close";setTimeout((()=>{this.visibility="hidden"}),s)};this.label="Hulp nodig";this.url=undefined;this.visibility="hidden";this.isOpen="close";this.slideState="close";this.loadIframe=false}watchUrl(n){if(this.isOpen==="open"&&this.iframeUrl!==n){this.iframeUrl=n}}watchIsOpen(n){const t=document.querySelector("body");if(n==="open"){t===null||t===void 0?void 0:t.style.setProperty("overflow","hidden");if(this.iframeUrl!==this.url){this.iframeUrl=this.url}}else{t===null||t===void 0?void 0:t.style.removeProperty("overflow")}}keyDownListener(n){if(n.key==="Escape"&&this.isOpen==="open"){this.closeClick()}}createTrap(){var n,t;if(!this.panelWrapperElement){return}this.trap=o(this.panelWrapperElement,{allowOutsideClick:true,tabbableOptions:{getShadowRoot:true},setReturnFocus:(n=this.openButtonElement)!==null&&n!==void 0?n:false,initialFocus:(t=this.closeButtonElement)!==null&&t!==void 0?t:false}).activate()}componentDidRender(){var n;if(this.isOpen==="open"&&this.iframeLoaded&&!this.trap){this.createTrap()}else if(this.isOpen==="close"&&this.trap){(n=this.trap)===null||n===void 0?void 0:n.deactivate();delete this.trap}}render(){return t(e,null,t("button",{type:"button",onClick:this.openClick,class:`open-button ${this.isOpen}`,"aria-expanded":this.isOpen==="open"?"true":"false","aria-haspopup":"dialog","aria-controls":"dso-panel-wrapper",ref:n=>this.openButtonElement=n},t("dso-icon",{icon:"help"}),t("span",null,this.label)),t("div",{id:"dso-panel-wrapper",class:`wrapper ${this.visibility}`,"aria-label":"helpcentrum",role:"dialog",ref:n=>this.panelWrapperElement=n},t("div",{class:"dimscreen",onClick:this.closeClick}),t("div",{class:`iframe-container ${this.slideState}`,"aria-live":"polite"},this.loadIframe?t("iframe",{src:this.iframeUrl,tabindex:"0",onLoad:()=>{this.createTrap();this.iframeLoaded=true}}):t("div",null)),t("button",{type:"button",class:`close-button ${this.isOpen}`,onClick:this.closeClick,"aria-expanded":this.isOpen==="open"?"true":"false","aria-controls":"dso-panel-wrapper",ref:n=>this.closeButtonElement=n},t("dso-icon",{icon:"times"}),t("span",{class:"sr-only"},"sluiten"))))}static get watchers(){return{url:["watchUrl"],isOpen:["watchIsOpen"]}}};i.style=r;export{i as dso_helpcenter_panel};
-//# sourceMappingURL=p-b627d9ac.entry.js.map