@dso-toolkit/core 79.0.0-pre.4 → 79.0.1

package/dist/dso-toolkit/{p-2165f443.entry.js.map → p-0f9f5005.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["paginationCss","Pagination","constructor","hostRef","this","sizePositionsMap","small","medium","large","formatHref","page","sizeChangeHandler","event","availablePositions","getAvailablePositions","detail","clickHandler","e","dsoSelectPage","emit","originalEvent","isModifiedEvent","componentDidLoad","_a","responsiveElement","getSize","then","size","render","totalPages","currentPage","undefined","h","ref","element","pages","getPages","class","href","onClick","icon","map","Fragment","showEllipsisBeforeLast","key","showEllipsisAfterFirst","showEllipsisLastWithoutTotal","sizePositions","Array","from","length","_value","i","getPageRange","getPageRangeWithoutTotalPages","range","positionRange","Math","floor","push","pagesBeforeOrAfter","min","max","filter","v","a","indexOf","Error","isFirstPage","hasManyPages","isPageTwoMissing","includes","hasEnoughPositions","isLastPage","isSecondLastPageMissing","at","start","result","_","unshift"],"sources":["src/components/pagination/pagination.scss?tag=dso-pagination&encapsulation=shadow","src/components/pagination/pagination.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 \"pagination.variables\" as pagination-variables;\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.pagination {\r\n  ul {\r\n    padding-inline-start: initial;\r\n    text-align: center;\r\n\r\n    > li {\r\n      display: inline-block;\r\n      font-weight: bold;\r\n      line-height: calc(pagination-variables.$item-size - pagination-variables.$border-size * 2);\r\n      text-align: center;\r\n      vertical-align: middle;\r\n\r\n      > a,\r\n      > span {\r\n        align-items: center;\r\n        color: colors.$grasgroen;\r\n        display: flex;\r\n        block-size: pagination-variables.$item-size;\r\n        justify-content: center;\r\n        position: relative;\r\n        min-inline-size: pagination-variables.$item-size;\r\n        padding: #{units.$u1 * 0.25};\r\n        padding-block: units.$u1 * 0.25;\r\n        padding-inline: units.$u1 * 0.25;\r\n      }\r\n\r\n      > a:active {\r\n        background-color: colors.$grasgroen-10;\r\n      }\r\n\r\n      > span {\r\n        border: pagination-variables.$border-size solid transparent;\r\n        border-radius: pagination-variables.$item-size * 0.5;\r\n      }\r\n\r\n      a {\r\n        line-height: pagination-variables.$line-height;\r\n        text-decoration: none;\r\n\r\n        &:hover,\r\n        &:focus {\r\n          text-decoration: none;\r\n\r\n          &::after {\r\n            border-block-end-color: colors.$grasgroen;\r\n          }\r\n        }\r\n\r\n        &::after {\r\n          border-block-end: 3px solid transparent;\r\n          inset-block-end: 0;\r\n          content: \"\";\r\n          display: inline-block;\r\n          inset-inline-start: 0;\r\n          position: absolute;\r\n          inline-size: 100%;\r\n        }\r\n      }\r\n\r\n      &.active {\r\n        span {\r\n          background-color: colors.$grasgroen;\r\n          color: colors.$wit;\r\n        }\r\n      }\r\n\r\n      & + li {\r\n        margin-inline-start: units.$u1;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dso-page-hidden {\r\n  visibility: hidden;\r\n}\r\n\r\n.sr-only.sr-only {\r\n  // class daisy-chained to prevent overwrites by other more specific styling set on this element.\r\n  @include utilities.sr-only();\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\r\n\r\nimport { PaginationSelectPageEvent } from \"./pagination.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-pagination\",\r\n  styleUrl: \"pagination.scss\",\r\n  shadow: true,\r\n})\r\nexport class Pagination implements ComponentInterface {\r\n  private sizePositionsMap: Record<ResponsiveElementSize, number> = {\r\n    small: 7,\r\n    medium: 9,\r\n    large: 11,\r\n  };\r\n\r\n  private responsiveElement?: HTMLDsoResponsiveElementElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoPaginationElement;\r\n\r\n  @State()\r\n  availablePositions?: number;\r\n  /**\r\n   * Total pages\r\n   */\r\n  @Prop()\r\n  totalPages?: number;\r\n\r\n  /**\r\n   * Current page\r\n   */\r\n  @Prop()\r\n  currentPage?: number;\r\n\r\n  /**\r\n   * This function is called to format the href\r\n   */\r\n  @Prop()\r\n  formatHref: (page: number) => string = (page) => \"#\" + page;\r\n\r\n  /**\r\n   * Emitted on page select\r\n   */\r\n  @Event()\r\n  dsoSelectPage!: EventEmitter<PaginationSelectPageEvent>;\r\n\r\n  /**\r\n   * Listens to the dsoSizeChange event on Responsive Element\r\n   */\r\n  @Listen(\"dsoSizeChange\")\r\n  sizeChangeHandler(event: CustomEvent<ResponsiveElementSize>) {\r\n    this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);\r\n  }\r\n\r\n  private clickHandler(e: MouseEvent, page: number) {\r\n    this.dsoSelectPage.emit({\r\n      originalEvent: e,\r\n      page,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.responsiveElement\r\n      ?.getSize()\r\n      .then(\r\n        (size: ResponsiveElementSize) =>\r\n          (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])),\r\n      );\r\n  }\r\n\r\n  render() {\r\n    if (!this.totalPages && !this.currentPage) {\r\n      return null;\r\n    }\r\n\r\n    if (this.availablePositions === undefined) {\r\n      return <dso-responsive-element ref={(element) => (this.responsiveElement = element)}></dso-responsive-element>;\r\n    }\r\n\r\n    const availablePositions = this.availablePositions;\r\n\r\n    const currentPage = this.currentPage ?? 0;\r\n\r\n    const pages: number[] = this.getPages(currentPage, this.availablePositions, this.totalPages);\r\n\r\n    return (\r\n      <dso-responsive-element ref={(element) => (this.responsiveElement = element)}>\r\n        <nav class=\"pagination\" aria-label=\"Paginering\">\r\n          <ul>\r\n            <li class={currentPage <= 1 || !currentPage ? \"dso-page-hidden\" : undefined}>\r\n              <a\r\n                href={this.formatHref(currentPage - 1)}\r\n                aria-label=\"Vorige\"\r\n                onClick={(e) => currentPage && this.clickHandler(e, currentPage - 1)}\r\n              >\r\n                <dso-icon icon=\"chevron-left\"></dso-icon>\r\n              </a>\r\n            </li>\r\n            {pages.map((page) => (\r\n              <Fragment>\r\n                {this.showEllipsisBeforeLast(pages, page, availablePositions) && (\r\n                  <li>\r\n                    <span>...</span>\r\n                  </li>\r\n                )}\r\n\r\n                <li key={page} class={currentPage === page ? \"active\" : undefined}>\r\n                  {currentPage === page ? (\r\n                    <span aria-current=\"page\">{page}</span>\r\n                  ) : (\r\n                    <a href={this.formatHref(page)} onClick={(e) => this.clickHandler(e, page)}>\r\n                      {page}\r\n                    </a>\r\n                  )}\r\n                  {page === this.totalPages ? <span class=\"sr-only\"> (laatste pagina)</span> : null}\r\n                </li>\r\n\r\n                {this.showEllipsisAfterFirst(pages, page, availablePositions) && (\r\n                  <li>\r\n                    <span>...</span>\r\n                  </li>\r\n                )}\r\n\r\n                {this.showEllipsisLastWithoutTotal(pages, page, this.totalPages) && (\r\n                  <li>\r\n                    <span>...</span>\r\n                  </li>\r\n                )}\r\n              </Fragment>\r\n            ))}\r\n            <li\r\n              class={\r\n                (this.totalPages && currentPage >= this.totalPages) || !currentPage ? \"dso-page-hidden\" : undefined\r\n              }\r\n            >\r\n              <a\r\n                href={this.formatHref(currentPage + 1)}\r\n                aria-label=\"Volgende\"\r\n                onClick={(e) => currentPage && this.clickHandler(e, currentPage + 1)}\r\n              >\r\n                <dso-icon icon=\"chevron-right\"></dso-icon>\r\n              </a>\r\n            </li>\r\n          </ul>\r\n        </nav>\r\n      </dso-responsive-element>\r\n    );\r\n  }\r\n\r\n  private getAvailablePositions(sizePositions: number) {\r\n    if (sizePositions % 2 === 0) {\r\n      // Even aantal posities zorgt voor een scheve pagination\r\n      return sizePositions - 1;\r\n    }\r\n    if (sizePositions <= 3) {\r\n      // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.\r\n      return 3;\r\n    }\r\n\r\n    return sizePositions;\r\n  }\r\n\r\n  private getPages(currentPage: number, availablePositions: number, totalPages?: number): number[] {\r\n    if (totalPages) {\r\n      if (totalPages + 2 <= availablePositions) {\r\n        // + 2 voor de vorige en volgende knop\r\n        return Array.from({ length: totalPages }, (_value, i) => i + 1);\r\n      }\r\n\r\n      if (availablePositions === 3) {\r\n        return [currentPage];\r\n      }\r\n\r\n      if (availablePositions === 5) {\r\n        return [1, currentPage, totalPages];\r\n      }\r\n\r\n      return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];\r\n    }\r\n    return this.getPageRangeWithoutTotalPages(currentPage, availablePositions);\r\n  }\r\n\r\n  private getPageRange(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n    const range: number[] = [];\r\n\r\n    const positionRange = Math.floor(availablePositions / 2);\r\n\r\n    if (currentPage <= positionRange) {\r\n      for (let i = 2; i <= availablePositions - 4; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {\r\n      if (positionRange === 1) {\r\n        if (currentPage > totalPages - 2) {\r\n          range.push(totalPages - 2);\r\n        }\r\n\r\n        range.push(currentPage);\r\n\r\n        if (currentPage < 3) {\r\n          range.push(3);\r\n        }\r\n      }\r\n\r\n      if (positionRange > 1) {\r\n        const pagesBeforeOrAfter = positionRange - 3;\r\n\r\n        for (\r\n          let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange);\r\n          i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange);\r\n          i++\r\n        ) {\r\n          if (i > 2 && i < totalPages - 1) {\r\n            range.push(i);\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    if (currentPage > totalPages - positionRange) {\r\n      for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    return range.filter((v, i, a) => a.indexOf(v) === i);\r\n  }\r\n\r\n  private showEllipsisAfterFirst(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    const isFirstPage = pages.indexOf(page) === 0;\r\n    const hasManyPages = totalPages > availablePositions - (this.totalPages ? 2 : 6);\r\n    const isPageTwoMissing = !pages.includes(2);\r\n    const hasEnoughPositions = availablePositions >= 7;\r\n\r\n    return isFirstPage && hasManyPages && isPageTwoMissing && hasEnoughPositions;\r\n  }\r\n\r\n  private showEllipsisBeforeLast(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    const isLastPage = pages.indexOf(page) === pages.length - 1;\r\n    const hasManyPages = totalPages > availablePositions - (this.totalPages ? 2 : 6);\r\n    const isSecondLastPageMissing = !pages.includes(totalPages - 1);\r\n    const hasEnoughPositions = availablePositions >= 7;\r\n\r\n    return isLastPage && hasManyPages && isSecondLastPageMissing && hasEnoughPositions;\r\n  }\r\n\r\n  private showEllipsisLastWithoutTotal(pages: number[], page: number, totalPages?: number) {\r\n    return totalPages ? false : pages.at(-1) === page;\r\n  }\r\n\r\n  private getPageRangeWithoutTotalPages(currentPage: number, availablePositions: number): number[] {\r\n    const positionRange = availablePositions >= 9 ? 2 : 0;\r\n    const start = Math.max(1, currentPage - positionRange);\r\n\r\n    // Creates an array of numbers from `start` to `currentPage + 1`\r\n    const result = Array.from({ length: currentPage - start + 2 }, (_, i) => start + i);\r\n\r\n    // Adds 1 to the start of the result array if `start` is >= 2\r\n    if (start >= 2) result.unshift(1);\r\n\r\n    return result;\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["paginationCss","Pagination","constructor","hostRef","this","sizePositionsMap","small","medium","large","formatHref","page","sizeChangeHandler","event","availablePositions","getAvailablePositions","detail","clickHandler","e","dsoSelectPage","emit","originalEvent","isModifiedEvent","componentDidLoad","_a","responsiveElement","getSize","then","size","render","totalPages","currentPage","undefined","h","ref","element","pages","getPages","class","href","onClick","icon","map","Fragment","showEllipsisBeforeLast","key","showEllipsisAfterFirst","showEllipsisLastWithoutTotal","sizePositions","Array","from","length","_value","i","getPageRange","getPageRangeWithoutTotalPages","range","positionRange","Math","floor","push","pagesBeforeOrAfter","min","max","filter","v","a","indexOf","Error","isFirstPage","hasManyPages","isPageTwoMissing","includes","hasEnoughPositions","isLastPage","isSecondLastPageMissing","at","start","result","_","unshift"],"sources":["src/components/pagination/pagination.scss?tag=dso-pagination&encapsulation=shadow","src/components/pagination/pagination.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 \"pagination.variables\" as pagination-variables;\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.pagination {\r\n  ul {\r\n    padding-inline-start: initial;\r\n    text-align: center;\r\n\r\n    > li {\r\n      display: inline-block;\r\n      font-weight: bold;\r\n      line-height: calc(pagination-variables.$item-size - pagination-variables.$border-size * 2);\r\n      text-align: center;\r\n      vertical-align: middle;\r\n\r\n      > a,\r\n      > span {\r\n        align-items: center;\r\n        color: colors.$grasgroen;\r\n        display: flex;\r\n        block-size: pagination-variables.$item-size;\r\n        justify-content: center;\r\n        position: relative;\r\n        min-inline-size: pagination-variables.$item-size;\r\n        padding: #{units.$u1 * 0.25};\r\n        padding-block: units.$u1 * 0.25;\r\n        padding-inline: units.$u1 * 0.25;\r\n      }\r\n\r\n      > a:active {\r\n        background-color: colors.$grasgroen-10;\r\n      }\r\n\r\n      > span {\r\n        border: pagination-variables.$border-size solid transparent;\r\n        border-radius: pagination-variables.$item-size * 0.5;\r\n      }\r\n\r\n      a {\r\n        line-height: pagination-variables.$line-height;\r\n        text-decoration: none;\r\n\r\n        &:hover,\r\n        &:focus {\r\n          text-decoration: none;\r\n\r\n          &::after {\r\n            border-block-end-color: colors.$grasgroen;\r\n          }\r\n        }\r\n\r\n        &::after {\r\n          border-block-end: 3px solid transparent;\r\n          inset-block-end: 0;\r\n          content: \"\";\r\n          display: inline-block;\r\n          inset-inline-start: 0;\r\n          position: absolute;\r\n          inline-size: 100%;\r\n        }\r\n      }\r\n\r\n      &.active {\r\n        span {\r\n          background-color: colors.$grasgroen;\r\n          color: colors.$wit;\r\n        }\r\n      }\r\n\r\n      & + li {\r\n        margin-inline-start: units.$u1;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.dso-page-hidden {\r\n  visibility: hidden;\r\n}\r\n\r\n.sr-only.sr-only {\r\n  // class daisy-chained to prevent overwrites by other more specific styling set on this element.\r\n  @include utilities.sr-only();\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\r\n\r\nimport { PaginationSelectPageEvent } from \"./pagination.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-pagination\",\r\n  styleUrl: \"pagination.scss\",\r\n  shadow: true,\r\n})\r\nexport class Pagination implements ComponentInterface {\r\n  private sizePositionsMap: Record<ResponsiveElementSize, number> = {\r\n    small: 7,\r\n    medium: 9,\r\n    large: 11,\r\n  };\r\n\r\n  private responsiveElement?: HTMLDsoResponsiveElementElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoPaginationElement;\r\n\r\n  @State()\r\n  availablePositions?: number;\r\n  /**\r\n   * Total pages\r\n   */\r\n  @Prop()\r\n  totalPages?: number;\r\n\r\n  /**\r\n   * Current page\r\n   */\r\n  @Prop()\r\n  currentPage?: number;\r\n\r\n  /**\r\n   * This function is called to format the href\r\n   */\r\n  @Prop()\r\n  formatHref: (page: number) => string = (page) => \"#\" + page;\r\n\r\n  /**\r\n   * Emitted on page select\r\n   */\r\n  @Event()\r\n  dsoSelectPage!: EventEmitter<PaginationSelectPageEvent>;\r\n\r\n  /**\r\n   * Listens to the dsoSizeChange event on Responsive Element\r\n   */\r\n  @Listen(\"dsoSizeChange\")\r\n  sizeChangeHandler(event: CustomEvent<ResponsiveElementSize>) {\r\n    this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);\r\n  }\r\n\r\n  private clickHandler(e: MouseEvent, page: number) {\r\n    this.dsoSelectPage.emit({\r\n      originalEvent: e,\r\n      page,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.responsiveElement\r\n      ?.getSize()\r\n      .then(\r\n        (size: ResponsiveElementSize) =>\r\n          (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])),\r\n      );\r\n  }\r\n\r\n  render() {\r\n    if (!this.totalPages && !this.currentPage) {\r\n      return null;\r\n    }\r\n\r\n    if (this.availablePositions === undefined) {\r\n      return <dso-responsive-element ref={(element) => (this.responsiveElement = element)}></dso-responsive-element>;\r\n    }\r\n\r\n    const availablePositions = this.availablePositions;\r\n\r\n    const currentPage = this.currentPage ?? 0;\r\n\r\n    const pages: number[] = this.getPages(currentPage, this.availablePositions, this.totalPages);\r\n\r\n    return (\r\n      <dso-responsive-element ref={(element) => (this.responsiveElement = element)}>\r\n        <nav class=\"pagination\" aria-label=\"Paginering\">\r\n          <ul>\r\n            <li class={currentPage <= 1 || !currentPage ? \"dso-page-hidden\" : undefined}>\r\n              <a\r\n                href={this.formatHref(currentPage - 1)}\r\n                aria-label=\"Vorige\"\r\n                onClick={(e) => currentPage && this.clickHandler(e, currentPage - 1)}\r\n              >\r\n                <dso-icon icon=\"chevron-left\"></dso-icon>\r\n              </a>\r\n            </li>\r\n            {pages.map((page) => (\r\n              <Fragment>\r\n                {this.showEllipsisBeforeLast(pages, page, availablePositions) && (\r\n                  <li>\r\n                    <span>...</span>\r\n                  </li>\r\n                )}\r\n\r\n                <li key={page} class={currentPage === page ? \"active\" : undefined}>\r\n                  {currentPage === page ? (\r\n                    <span aria-current=\"page\">{page}</span>\r\n                  ) : (\r\n                    <a href={this.formatHref(page)} onClick={(e) => this.clickHandler(e, page)}>\r\n                      {page}\r\n                    </a>\r\n                  )}\r\n                  {page === this.totalPages ? <span class=\"sr-only\"> (laatste pagina)</span> : null}\r\n                </li>\r\n\r\n                {this.showEllipsisAfterFirst(pages, page, availablePositions) && (\r\n                  <li>\r\n                    <span>...</span>\r\n                  </li>\r\n                )}\r\n\r\n                {this.showEllipsisLastWithoutTotal(pages, page, this.totalPages) && (\r\n                  <li>\r\n                    <span>...</span>\r\n                  </li>\r\n                )}\r\n              </Fragment>\r\n            ))}\r\n            <li\r\n              class={\r\n                (this.totalPages && currentPage >= this.totalPages) || !currentPage ? \"dso-page-hidden\" : undefined\r\n              }\r\n            >\r\n              <a\r\n                href={this.formatHref(currentPage + 1)}\r\n                aria-label=\"Volgende\"\r\n                onClick={(e) => currentPage && this.clickHandler(e, currentPage + 1)}\r\n              >\r\n                <dso-icon icon=\"chevron-right\"></dso-icon>\r\n              </a>\r\n            </li>\r\n          </ul>\r\n        </nav>\r\n      </dso-responsive-element>\r\n    );\r\n  }\r\n\r\n  private getAvailablePositions(sizePositions: number) {\r\n    if (sizePositions % 2 === 0) {\r\n      // Even aantal posities zorgt voor een scheve pagination\r\n      return sizePositions - 1;\r\n    }\r\n    if (sizePositions <= 3) {\r\n      // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.\r\n      return 3;\r\n    }\r\n\r\n    return sizePositions;\r\n  }\r\n\r\n  private getPages(currentPage: number, availablePositions: number, totalPages?: number): number[] {\r\n    if (totalPages) {\r\n      if (totalPages + 2 <= availablePositions) {\r\n        // + 2 voor de vorige en volgende knop\r\n        return Array.from({ length: totalPages }, (_value, i) => i + 1);\r\n      }\r\n\r\n      if (availablePositions === 3) {\r\n        return [currentPage];\r\n      }\r\n\r\n      if (availablePositions === 5) {\r\n        return [1, currentPage, totalPages];\r\n      }\r\n\r\n      return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];\r\n    }\r\n    return this.getPageRangeWithoutTotalPages(currentPage, availablePositions);\r\n  }\r\n\r\n  private getPageRange(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n    const range: number[] = [];\r\n\r\n    const positionRange = Math.floor(availablePositions / 2);\r\n\r\n    if (currentPage <= positionRange) {\r\n      for (let i = 2; i <= availablePositions - 4; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {\r\n      if (positionRange === 1) {\r\n        if (currentPage > totalPages - 2) {\r\n          range.push(totalPages - 2);\r\n        }\r\n\r\n        range.push(currentPage);\r\n\r\n        if (currentPage < 3) {\r\n          range.push(3);\r\n        }\r\n      }\r\n\r\n      if (positionRange > 1) {\r\n        const pagesBeforeOrAfter = positionRange - 3;\r\n\r\n        for (\r\n          let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange);\r\n          i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange);\r\n          i++\r\n        ) {\r\n          if (i > 2 && i < totalPages - 1) {\r\n            range.push(i);\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    if (currentPage > totalPages - positionRange) {\r\n      for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    return range.filter((v, i, a) => a.indexOf(v) === i);\r\n  }\r\n\r\n  private showEllipsisAfterFirst(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    const isFirstPage = pages.indexOf(page) === 0;\r\n    const hasManyPages = totalPages > availablePositions - (this.totalPages ? 2 : 6);\r\n    const isPageTwoMissing = !pages.includes(2);\r\n    const hasEnoughPositions = availablePositions >= 7;\r\n\r\n    return isFirstPage && hasManyPages && isPageTwoMissing && hasEnoughPositions;\r\n  }\r\n\r\n  private showEllipsisBeforeLast(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    const isLastPage = pages.indexOf(page) === pages.length - 1;\r\n    const hasManyPages = totalPages > availablePositions - (this.totalPages ? 2 : 6);\r\n    const isSecondLastPageMissing = !pages.includes(totalPages - 1);\r\n    const hasEnoughPositions = availablePositions >= 7;\r\n\r\n    return isLastPage && hasManyPages && isSecondLastPageMissing && hasEnoughPositions;\r\n  }\r\n\r\n  private showEllipsisLastWithoutTotal(pages: number[], page: number, totalPages?: number) {\r\n    return totalPages ? false : pages.at(-1) === page;\r\n  }\r\n\r\n  private getPageRangeWithoutTotalPages(currentPage: number, availablePositions: number): number[] {\r\n    const positionRange = availablePositions >= 9 ? 2 : 0;\r\n    const start = Math.max(1, currentPage - positionRange);\r\n\r\n    // Creates an array of numbers from `start` to `currentPage + 1`\r\n    const result = Array.from({ length: currentPage - start + 2 }, (_, i) => start + i);\r\n\r\n    // Adds 1 to the start of the result array if `start` is >= 2\r\n    if (start >= 2) result.unshift(1);\r\n\r\n    return result;\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dso-toolkit/p-16a365f4.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as r,h as a,F as e,g as i}from"./p-DxWmN7gh.js";import{A as d}from"./p-CtC5362R.js";import{w as t,A as n,a as s}from"./p-Dk013L7v.js";import{A as l}from"./p-Ah0-aaXh.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 .sr-only+:is(dso-icon,svg.di){margin-inline-start:0}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.5)}: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;overflow-wrap:anywhere}.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 g=class{constructor(a){o(this,a);this.dsoActiveChange=r(this,"dsoActiveChange",7);this.watcher=t(this.host)}connectedCallback(){this.watcher.watch()}disconnectedCallback(){this.watcher.unwatch()}render(){const o=this.watcher.hasSymbool();return a(d,{key:"5f7f95b4a735625893ea921bf4a063fb8f133f84",symbol:o?a(s,null):undefined,active:this.active,dsoActiveChange:this.dsoActiveChange,title:a("dso-renvooi",{value:this.naam}),data:a(e,null,a("span",{class:"content"},this.regelKwalificatie&&a(e,null,a("dso-renvooi",{value:this.regelKwalificatie})," "),this.regelKwalificatieVoorzetsel&&`${this.regelKwalificatieVoorzetsel}: `,a(l,{values:this.locatieNoemers})),this.gewijzigdeLocatie&&a(n,null))})}get host(){return i(this)}};g.style=c;export{g as dso_annotation_activiteit};
+//# sourceMappingURL=p-16a365f4.entry.js.map

package/dist/dso-toolkit/{p-246b1186.entry.js.map → p-16a365f4.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["annotationCss","AnnotationActiviteit","constructor","hostRef","this","watcher","host","connectedCallback","watch","disconnectedCallback","unwatch","render","hasSymbool","h","AnnotationBody","key","symbol","AnnotationSymbolSlot","undefined","active","dsoActiveChange","title","value","naam","data","Fragment","class","regelKwalificatie","regelKwalificatieVoorzetsel","AnnotationListRenvooiValues","values","locatieNoemers","gewijzigdeLocatie","AnnotationGewijzigdeLocatie"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-activiteit&encapsulation=shadow","src/components/annotation/annotation-activiteit/annotation-activiteit.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  overflow-wrap: anywhere;\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, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { AnnotationListRenvooiValues } from \"../annotation-list-renvooi-values\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.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-activiteit\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationActiviteit 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 activiteit.\r\n   */\r\n  @Prop()\r\n  naam?: RenvooiValue | string;\r\n\r\n  /**\r\n   * De activiteit regel kwalificatie.\r\n   */\r\n  @Prop()\r\n  regelKwalificatie?: RenvooiValue | string;\r\n\r\n  /**\r\n   * De noemer van de locatie.\r\n   */\r\n  @Prop()\r\n  locatieNoemers?: Array<RenvooiValue | string>;\r\n\r\n  /**\r\n   * Voorzetsel van de regelKwalificatie. Exclusief dubbele punt.\r\n   */\r\n  @Prop()\r\n  regelKwalificatieVoorzetsel?: string;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoAnnotationActiviteitElement;\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={<dso-renvooi value={this.naam} />}\r\n        data={\r\n          <>\r\n            <span class=\"content\">\r\n              {this.regelKwalificatie && (\r\n                <>\r\n                  <dso-renvooi value={this.regelKwalificatie} />{\" \"}\r\n                </>\r\n              )}\r\n              {this.regelKwalificatieVoorzetsel && `${this.regelKwalificatieVoorzetsel}: `}\r\n              <AnnotationListRenvooiValues values={this.locatieNoemers} />\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"mappings":"0LAAA,MAAMA,EAAgB,klL,MCkBTC,EAAoB,MALjC,WAAAC,CAAAC,G,2DAyDUC,KAAAC,QAAUA,EAAQD,KAAKE,KAoChC,CAlCC,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,EAAuB,MAAGC,UAChDC,OAAQf,KAAKe,OACbC,gBAAiBhB,KAAKgB,gBACtBC,MAAOR,EAAa,eAAAS,MAAOlB,KAAKmB,OAChCC,KACEX,EAAAY,EAAA,KACEZ,EAAM,QAAAa,MAAM,WACTtB,KAAKuB,mBACJd,EAAAY,EAAA,KACEZ,EAAA,eAAaS,MAAOlB,KAAKuB,oBAAsB,KAGlDvB,KAAKwB,6BAA+B,GAAGxB,KAAKwB,gCAC7Cf,EAACgB,EAA2B,CAACC,OAAQ1B,KAAK2B,kBAE3C3B,KAAK4B,mBAAqBnB,EAACoB,EAA8B,Q","ignoreList":[]}
+{"version":3,"names":["annotationCss","AnnotationActiviteit","constructor","hostRef","this","watcher","host","connectedCallback","watch","disconnectedCallback","unwatch","render","hasSymbool","h","AnnotationBody","key","symbol","AnnotationSymbolSlot","undefined","active","dsoActiveChange","title","value","naam","data","Fragment","class","regelKwalificatie","regelKwalificatieVoorzetsel","AnnotationListRenvooiValues","values","locatieNoemers","gewijzigdeLocatie","AnnotationGewijzigdeLocatie"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-activiteit&encapsulation=shadow","src/components/annotation/annotation-activiteit/annotation-activiteit.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  overflow-wrap: anywhere;\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, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { AnnotationListRenvooiValues } from \"../annotation-list-renvooi-values\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.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-activiteit\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationActiviteit 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 activiteit.\r\n   */\r\n  @Prop()\r\n  naam?: RenvooiValue | string;\r\n\r\n  /**\r\n   * De activiteit regel kwalificatie.\r\n   */\r\n  @Prop()\r\n  regelKwalificatie?: RenvooiValue | string;\r\n\r\n  /**\r\n   * De noemer van de locatie.\r\n   */\r\n  @Prop()\r\n  locatieNoemers?: Array<RenvooiValue | string>;\r\n\r\n  /**\r\n   * Voorzetsel van de regelKwalificatie. Exclusief dubbele punt.\r\n   */\r\n  @Prop()\r\n  regelKwalificatieVoorzetsel?: string;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoAnnotationActiviteitElement;\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={<dso-renvooi value={this.naam} />}\r\n        data={\r\n          <>\r\n            <span class=\"content\">\r\n              {this.regelKwalificatie && (\r\n                <>\r\n                  <dso-renvooi value={this.regelKwalificatie} />{\" \"}\r\n                </>\r\n              )}\r\n              {this.regelKwalificatieVoorzetsel && `${this.regelKwalificatieVoorzetsel}: `}\r\n              <AnnotationListRenvooiValues values={this.locatieNoemers} />\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"mappings":"0LAAA,MAAMA,EAAgB,gkL,MCkBTC,EAAoB,MALjC,WAAAC,CAAAC,G,2DAyDUC,KAAAC,QAAUA,EAAQD,KAAKE,KAoChC,CAlCC,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,EAAuB,MAAGC,UAChDC,OAAQf,KAAKe,OACbC,gBAAiBhB,KAAKgB,gBACtBC,MAAOR,EAAa,eAAAS,MAAOlB,KAAKmB,OAChCC,KACEX,EAAAY,EAAA,KACEZ,EAAM,QAAAa,MAAM,WACTtB,KAAKuB,mBACJd,EAAAY,EAAA,KACEZ,EAAA,eAAaS,MAAOlB,KAAKuB,oBAAsB,KAGlDvB,KAAKwB,6BAA+B,GAAGxB,KAAKwB,gCAC7Cf,EAACgB,EAA2B,CAACC,OAAQ1B,KAAK2B,kBAE3C3B,KAAK4B,mBAAqBnB,EAACoB,EAA8B,Q","ignoreList":[]}

package/dist/dso-toolkit/p-2bd67420.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as r,h as e}from"./p-DxWmN7gh.js";import{i as a}from"./p-Hgv-pDpy.js";import{A as i}from"./p-CtC5362R.js";const d='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 .sr-only+:is(dso-icon,svg.di){margin-inline-start:0}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.5)}: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;overflow-wrap:anywhere}.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 n=class{constructor(e){o(this,e);this.dsoClick=r(this,"dsoClick",3);this.clickHandler=o=>{if(!this.href){return}this.dsoClick.emit({href:this.href,originalEvent:o,isModifiedEvent:a(o)})}}render(){const o=this.href?e("a",{class:"content",href:this.href,onClick:this.clickHandler},e("dso-renvooi",{value:this.naam})):e("span",{class:"content"},e("dso-renvooi",{value:this.naam}));return e(i,{key:"43c585932f9e2e1b01c100e32d64a893bd4c03c0",symbol:e("dso-icon",{icon:"land"}),title:o})}};n.style=d;export{n as dso_annotation_kaart};
+//# sourceMappingURL=p-2bd67420.entry.js.map

package/dist/dso-toolkit/{p-ab39576c.entry.js.map → p-2bd67420.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["annotationCss","AnnotationKaart","constructor","hostRef","this","clickHandler","e","href","dsoClick","emit","originalEvent","isModifiedEvent","render","title","h","class","onClick","value","naam","AnnotationBody","key","symbol","icon"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-kaart&encapsulation=shadow","src/components/annotation/annotation-kaart/annotation-kaart.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  overflow-wrap: anywhere;\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, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\nimport { AnnotationKaartClickEvent } from \"./annotation-kaart.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-annotation-kaart\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationKaart implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie is toegevoegd of verwijderd.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * De naam van de kaart.\r\n   */\r\n  @Prop()\r\n  naam?: RenvooiValue | string;\r\n\r\n  /**\r\n   * De url naar de kaart.\r\n   *\r\n   * Gebruik het event `dsoClick` om de navigatie aan de router te koppelen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href?: string;\r\n\r\n  /**\r\n   * Event als de gebruiker de kaartnaam selecteert.\r\n   *\r\n   * Let op \"isModifiedEvent\" om te bepalen of de navigatieactie door de router of de browser moet worden afgehandeld.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClick!: EventEmitter<AnnotationKaartClickEvent>;\r\n\r\n  private clickHandler = (e: MouseEvent): void => {\r\n    if (!this.href) {\r\n      return;\r\n    }\r\n\r\n    this.dsoClick.emit({\r\n      href: this.href,\r\n      originalEvent: e,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  };\r\n\r\n  render() {\r\n    const title = this.href ? (\r\n      <a class=\"content\" href={this.href} onClick={this.clickHandler}>\r\n        <dso-renvooi value={this.naam} />\r\n      </a>\r\n    ) : (\r\n      <span class=\"content\">\r\n        <dso-renvooi value={this.naam} />\r\n      </span>\r\n    );\r\n\r\n    return <AnnotationBody symbol={<dso-icon icon=\"land\" />} title={title} />;\r\n  }\r\n}\r\n"],"mappings":"0HAAA,MAAMA,EAAgB,klL,MCcTC,EAAe,MAL5B,WAAAC,CAAAC,G,6CAkCUC,KAAAC,aAAgBC,IACtB,IAAKF,KAAKG,KAAM,CACd,M,CAGFH,KAAKI,SAASC,KAAK,CACjBF,KAAMH,KAAKG,KACXG,cAAeJ,EACfK,gBAAiBA,EAAgBL,IACjC,CAgBL,CAbC,MAAAM,GACE,MAAMC,EAAQT,KAAKG,KACjBO,EAAA,KAAGC,MAAM,UAAUR,KAAMH,KAAKG,KAAMS,QAASZ,KAAKC,cAChDS,EAAA,eAAaG,MAAOb,KAAKc,QAG3BJ,EAAM,QAAAC,MAAM,WACVD,EAAa,eAAAG,MAAOb,KAAKc,QAI7B,OAAOJ,EAACK,EAAe,CAAAC,IAAA,2CAAAC,OAAQP,EAAU,YAAAQ,KAAK,SAAWT,MAAOA,G","ignoreList":[]}
+{"version":3,"names":["annotationCss","AnnotationKaart","constructor","hostRef","this","clickHandler","e","href","dsoClick","emit","originalEvent","isModifiedEvent","render","title","h","class","onClick","value","naam","AnnotationBody","key","symbol","icon"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-kaart&encapsulation=shadow","src/components/annotation/annotation-kaart/annotation-kaart.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  overflow-wrap: anywhere;\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, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\nimport { AnnotationKaartClickEvent } from \"./annotation-kaart.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-annotation-kaart\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationKaart implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie is toegevoegd of verwijderd.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * De naam van de kaart.\r\n   */\r\n  @Prop()\r\n  naam?: RenvooiValue | string;\r\n\r\n  /**\r\n   * De url naar de kaart.\r\n   *\r\n   * Gebruik het event `dsoClick` om de navigatie aan de router te koppelen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href?: string;\r\n\r\n  /**\r\n   * Event als de gebruiker de kaartnaam selecteert.\r\n   *\r\n   * Let op \"isModifiedEvent\" om te bepalen of de navigatieactie door de router of de browser moet worden afgehandeld.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClick!: EventEmitter<AnnotationKaartClickEvent>;\r\n\r\n  private clickHandler = (e: MouseEvent): void => {\r\n    if (!this.href) {\r\n      return;\r\n    }\r\n\r\n    this.dsoClick.emit({\r\n      href: this.href,\r\n      originalEvent: e,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  };\r\n\r\n  render() {\r\n    const title = this.href ? (\r\n      <a class=\"content\" href={this.href} onClick={this.clickHandler}>\r\n        <dso-renvooi value={this.naam} />\r\n      </a>\r\n    ) : (\r\n      <span class=\"content\">\r\n        <dso-renvooi value={this.naam} />\r\n      </span>\r\n    );\r\n\r\n    return <AnnotationBody symbol={<dso-icon icon=\"land\" />} title={title} />;\r\n  }\r\n}\r\n"],"mappings":"0HAAA,MAAMA,EAAgB,gkL,MCcTC,EAAe,MAL5B,WAAAC,CAAAC,G,6CAkCUC,KAAAC,aAAgBC,IACtB,IAAKF,KAAKG,KAAM,CACd,M,CAGFH,KAAKI,SAASC,KAAK,CACjBF,KAAMH,KAAKG,KACXG,cAAeJ,EACfK,gBAAiBA,EAAgBL,IACjC,CAgBL,CAbC,MAAAM,GACE,MAAMC,EAAQT,KAAKG,KACjBO,EAAA,KAAGC,MAAM,UAAUR,KAAMH,KAAKG,KAAMS,QAASZ,KAAKC,cAChDS,EAAA,eAAaG,MAAOb,KAAKc,QAG3BJ,EAAM,QAAAC,MAAM,WACVD,EAAa,eAAAG,MAAOb,KAAKc,QAI7B,OAAOJ,EAACK,EAAe,CAAAC,IAAA,2CAAAC,OAAQP,EAAU,YAAAQ,KAAK,SAAWT,MAAOA,G","ignoreList":[]}

package/dist/dso-toolkit/p-340eb5f3.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as e,f as i,h as n,F as a,H as r,g as t}from"./p-DxWmN7gh.js";import{i as d}from"./p-Hgv-pDpy.js";const s='ins{text-decoration:none}ins{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}ins 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"))}ins 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"))}ins 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"))}ins 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"))}ins{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5)}del{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}del 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"))}del 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"))}del 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"))}del 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"))}del{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){del{font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-plekinfo-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-plekinfo-card-container .dso-plekinfo-card-heading{display:flex;align-items:start;column-gap:8px}@media screen and (max-width: 480px){.dso-plekinfo-card-container .dso-plekinfo-card-heading{flex-wrap:wrap}}.dso-plekinfo-card-container .dso-plekinfo-card-heading+.dso-plekinfo-card-content{margin-block-start:8px}.dso-plekinfo-card-container .dso-plekinfo-card-symbol{grid-row:span 2;margin-inline-end:8px}.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}ins.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#d8e5c9}del.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#e9cdd1}:host([active]:not([active=false])) .dso-plekinfo-card-container{background-color:#e5e5e5}:host([active]:not([active=false])) ins.dso-plekinfo-card-container{background-color:#ced9bf}:host([active]:not([active=false])) del.dso-plekinfo-card-container{background-color:#ddc3c6}:host([has-symbol]) .dso-plekinfo-card-container{display:grid;grid-template-columns:1fr minmax(0, 100%)}:host([has-symbol]) .dso-plekinfo-card-container .dso-plekinfo-card-heading,:host([has-symbol]) .dso-plekinfo-card-container .dso-plekinfo-card-content{grid-column:2/-1}::slotted([slot=meta]){display:flex !important;justify-content:space-between !important;flex-shrink:0 !important;align-self:end !important}@media screen and (max-width: 480px){::slotted([slot=meta]){flex-basis:100% !important;margin-block-start:8px !important}}::slotted([slot=heading]){display:inline !important;font-size:1.125em !important;font-weight:700 !important;color:#275937 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !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=interaction]){display:flex !important;justify-content:space-between !important;margin-inline-start:auto !important}@media screen and (max-width: 480px){::slotted([slot=interaction]){flex-basis:100% !important;margin-block-start:16px !important}}.heading-anchor{color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.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}.heading-anchor .icon-container{position:relative;padding-inline-end:24px}.heading-anchor .icon-container dso-icon{position:absolute;inset-inline-end:0;inset-block-end:-3px;block-size:24px;inline-size:24px}';const c=({wijzigactie:o},e)=>{if(o==="voegtoe"){return n("ins",{class:"dso-plekinfo-card-container"},e)}if(o==="verwijder"){return n("del",{class:"dso-plekinfo-card-container"},e)}return n("div",{class:"dso-plekinfo-card-container"},e)};const l=class{constructor(i){o(this,i);this.dsoPlekinfoCardClick=e(this,"dsoPlekinfoCardClick",7);this.targetBlank=false}connectedCallback(){this.mutationObserver=new MutationObserver((()=>i(this.host)));this.mutationObserver.observe(this.host,{attributes:true,childList:true})}disconnectedCallback(){var o;(o=this.mutationObserver)===null||o===void 0?void 0:o.disconnect();delete this.mutationObserver}clickEventHandler(o){if(!(o.target instanceof HTMLElement)||!this.href){return}return this.dsoPlekinfoCardClick.emit({originalEvent:o,isModifiedEvent:d(o)})}get symbolSlottedElement(){return this.host.querySelector("[slot='symbol']")}get metaSlottedElement(){return this.host.querySelector("[slot='meta']")}get interaction(){return this.host.querySelector("[slot='interaction']")}render(){const o=this.symbolSlottedElement!==null;return n(r,{key:"7f3be40ea02949d97bbe86d086949522e901436a","has-symbol":o},n(c,{key:"a5675d4dd1049e1d7cf463acf89f38129636ecc3",wijzigactie:this.wijzigactie},n("div",{key:"635421895dc1698b54c9248b1082f29f45049a8d",class:"dso-plekinfo-card-symbol",hidden:!o},n("slot",{key:"c16565055d4c2bc88f8326a5c9faaba69ddef3c7",name:"symbol"})),n("div",{key:"207c6f1e741f004d94ccea1051828eac9a343593",class:"dso-plekinfo-card-heading"},this.href?n("a",{href:this.href,target:this.targetBlank?"_blank":undefined,rel:this.targetBlank?"noopener noreferrer":undefined,class:"heading-anchor",onClick:o=>this.clickEventHandler(o)},n("span",{class:"icon-container"},this.targetBlank?n(a,null,n("dso-icon",{icon:"external-link"}),n("span",{class:"sr-only"},"(Opent andere website in nieuw tabblad)")):n("dso-icon",{icon:"chevron-right"}),n("slot",{name:"heading"}))):n("slot",{name:"heading"}),this.metaSlottedElement!==null&&n("slot",{key:"08245c5be48eacfb2803c823014d8523d652418d",name:"meta"}),this.interaction!==null&&n("slot",{key:"77aa9a57edb4d70a380b1a4e8b9f41b55150892a",name:"interaction"})),n("div",{key:"e811b2c12d5c3560778a935d55e80e1c527e0f09",class:"dso-plekinfo-card-content"},n("slot",{key:"51babf8c2d33176709d0027d6a7abcf3d41074f7",name:"content"}))))}get host(){return t(this)}};l.style=s;export{l as dso_plekinfo_card};
+//# sourceMappingURL=p-340eb5f3.entry.js.map

package/dist/dso-toolkit/{p-9566b0a7.entry.js.map → p-340eb5f3.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["plekinfoCardCss","WrapWijzigactie","wijzigactie","children","h","class","PlekinfoCard","constructor","hostRef","this","targetBlank","connectedCallback","mutationObserver","MutationObserver","forceUpdate","host","observe","attributes","childList","disconnectedCallback","_a","disconnect","clickEventHandler","e","target","HTMLElement","href","dsoPlekinfoCardClick","emit","originalEvent","isModifiedEvent","symbolSlottedElement","querySelector","metaSlottedElement","interaction","render","hasSymbol","Host","key","hidden","name","undefined","rel","onClick","Fragment","icon"],"sources":["src/components/plekinfo-card/plekinfo-card.scss?tag=dso-plekinfo-card&encapsulation=shadow","src/components/plekinfo-card/plekinfo-card.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/plekinfo-card\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.dso-plekinfo-card-container {\r\n  padding-block: units.$u2;\r\n  padding-inline: units.$u2;\r\n  inline-size: 100%;\r\n\r\n  .dso-plekinfo-card-heading {\r\n    display: flex;\r\n    align-items: start;\r\n    column-gap: units.$u1;\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\r\n  .dso-plekinfo-card-heading + .dso-plekinfo-card-content {\r\n    margin-block-start: units.$u1;\r\n  }\r\n\r\n  .dso-plekinfo-card-symbol {\r\n    grid-row: span 2;\r\n\r\n    margin-inline-end: units.$u1;\r\n  }\r\n\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover;\r\n  }\r\n}\r\n\r\nins.dso-plekinfo-card-container {\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover-voegtoe;\r\n  }\r\n}\r\n\r\ndel.dso-plekinfo-card-container {\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover-verwijder;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  .dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active;\r\n  }\r\n\r\n  ins.dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active-voegtoe;\r\n  }\r\n\r\n  del.dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active-verwijder;\r\n  }\r\n}\r\n\r\n:host([has-symbol]) {\r\n  .dso-plekinfo-card-container {\r\n    display: grid;\r\n    grid-template-columns: 1fr minmax(0, 100%);\r\n\r\n    .dso-plekinfo-card-heading,\r\n    .dso-plekinfo-card-content {\r\n      grid-column: 2 /-1;\r\n    }\r\n  }\r\n}\r\n\r\n::slotted([slot=\"meta\"]) {\r\n  display: flex !important;\r\n  justify-content: space-between !important;\r\n  flex-shrink: 0 !important;\r\n  align-self: end !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.$u1 !important;\r\n  }\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n  display: inline !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  margin-block-end: 0 !important;\r\n  margin-block-start: 0 !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=\"interaction\"]) {\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\r\n.heading-anchor {\r\n  color: plekinfo-card.$heading-anchor-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    color: plekinfo-card.$heading-anchor-hover-color;\r\n    text-decoration: underline;\r\n  }\r\n\r\n  &:visited {\r\n    color: plekinfo-card.$heading-anchor-color;\r\n  }\r\n\r\n  .sr-only {\r\n    @include utilities.sr-only();\r\n  }\r\n\r\n  .icon-container {\r\n    position: relative;\r\n    padding-inline-end: units.$u3;\r\n\r\n    dso-icon {\r\n      position: absolute;\r\n      inset-inline-end: 0;\r\n      inset-block-end: -3px;\r\n      block-size: units.$u3;\r\n      inline-size: units.$u3;\r\n    }\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  FunctionalComponent,\r\n  Host,\r\n  Prop,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { PlekinfoCardClickEvent, PlekinfoWijzigactie } from \"./plekinfo-card.interfaces\";\r\n\r\ninterface WrapWijzigactieProps {\r\n  wijzigactie: PlekinfoWijzigactie | undefined;\r\n}\r\n\r\nconst WrapWijzigactie: FunctionalComponent<WrapWijzigactieProps> = ({ wijzigactie }, children) => {\r\n  if (wijzigactie === \"voegtoe\") {\r\n    return <ins class=\"dso-plekinfo-card-container\">{children}</ins>;\r\n  }\r\n\r\n  if (wijzigactie === \"verwijder\") {\r\n    return <del class=\"dso-plekinfo-card-container\">{children}</del>;\r\n  }\r\n\r\n  return <div class=\"dso-plekinfo-card-container\">{children}</div>;\r\n};\r\n\r\n/**\r\n * @slot symbol - An optional slot to place a symbol, representing the plekinfo item, in.\r\n * @slot heading - A slot to place the title of the card in.\r\n * @slot meta - An optional slot to place a `Label` in.\r\n * @slot content - An optional slot to place `Rich Content` in.\r\n * @slot interaction - A slot for the `SlideToggle`s elments.\r\n *\r\n */\r\n@Component({\r\n  tag: \"dso-plekinfo-card\",\r\n  styleUrl: \"plekinfo-card.scss\",\r\n  shadow: true,\r\n})\r\nexport class PlekinfoCard implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoPlekinfoCardElement;\r\n\r\n  /**\r\n   * An optional 'wijzigactie' that signals if the plekinfo on the card is added or removed.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: PlekinfoWijzigactie;\r\n\r\n  /**\r\n   * The URL to which the PlekinfoCard heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href!: string | undefined;\r\n\r\n  /**\r\n   * Opens the urls in a new window or tab\r\n   */\r\n  @Prop()\r\n  targetBlank: boolean = false;\r\n\r\n  /**\r\n   * Makes the PlekinfoCard active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the PlekinfoCard heading is clicked.\r\n   */\r\n  @Event()\r\n  dsoPlekinfoCardClick!: EventEmitter<PlekinfoCardClickEvent>;\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.dsoPlekinfoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get metaSlottedElement() {\r\n    return this.host.querySelector(\"[slot='meta']\");\r\n  }\r\n\r\n  get interaction() {\r\n    return this.host.querySelector(\"[slot='interaction']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n\r\n    return (\r\n      <Host has-symbol={hasSymbol}>\r\n        <WrapWijzigactie wijzigactie={this.wijzigactie}>\r\n          <div class=\"dso-plekinfo-card-symbol\" hidden={!hasSymbol}>\r\n            <slot name=\"symbol\" />\r\n          </div>\r\n          <div class=\"dso-plekinfo-card-heading\">\r\n            {this.href ? (\r\n              <a\r\n                href={this.href}\r\n                target={this.targetBlank ? \"_blank\" : undefined}\r\n                rel={this.targetBlank ? \"noopener noreferrer\" : undefined}\r\n                class=\"heading-anchor\"\r\n                onClick={(e) => this.clickEventHandler(e)}\r\n              >\r\n                <span class=\"icon-container\">\r\n                  {this.targetBlank ? (\r\n                    <>\r\n                      <dso-icon icon=\"external-link\" />\r\n                      <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n                    </>\r\n                  ) : (\r\n                    <dso-icon icon=\"chevron-right\" />\r\n                  )}\r\n                  <slot name=\"heading\" />\r\n                </span>\r\n              </a>\r\n            ) : (\r\n              <slot name=\"heading\" />\r\n            )}\r\n            {this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n            {this.interaction !== null && <slot name=\"interaction\" />}\r\n          </div>\r\n          <div class=\"dso-plekinfo-card-content\">\r\n            <slot name=\"content\" />\r\n          </div>\r\n        </WrapWijzigactie>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kHAAA,MAAMA,EAAkB,4zJCsBxB,MAAMC,EAA6D,EAAGC,eAAeC,KACnF,GAAID,IAAgB,UAAW,CAC7B,OAAOE,EAAA,OAAKC,MAAM,+BAA+BF,E,CAGnD,GAAID,IAAgB,YAAa,CAC/B,OAAOE,EAAA,OAAKC,MAAM,+BAA+BF,E,CAGnD,OAAOC,EAAA,OAAKC,MAAM,+BAA+BF,EAAe,E,MAgBrDG,EAAY,MALzB,WAAAC,CAAAC,G,qEAyBEC,KAAWC,YAAY,KA2FxB,CA3EC,iBAAAC,GACEF,KAAKG,iBAAmB,IAAIC,kBAAiB,IAAMC,EAAYL,KAAKM,QAEpEN,KAAKG,iBAAiBI,QAAQP,KAAKM,KAAM,CAAEE,WAAY,KAAMC,UAAW,M,CAG1E,oBAAAC,G,OACEC,EAAAX,KAAKG,oBAAkB,MAAAQ,SAAA,SAAAA,EAAAC,oBAEhBZ,KAAKG,gB,CAGN,iBAAAU,CAAkBC,GACxB,KAAMA,EAAEC,kBAAkBC,eAAiBhB,KAAKiB,KAAM,CACpD,M,CAGF,OAAOjB,KAAKkB,qBAAqBC,KAAK,CAAEC,cAAeN,EAAGO,gBAAiBA,EAAgBP,I,CAG7F,wBAAIQ,GACF,OAAOtB,KAAKM,KAAKiB,cAAc,kB,CAGjC,sBAAIC,GACF,OAAOxB,KAAKM,KAAKiB,cAAc,gB,CAGjC,eAAIE,GACF,OAAOzB,KAAKM,KAAKiB,cAAc,uB,CAGjC,MAAAG,GACE,MAAMC,EAAY3B,KAAKsB,uBAAyB,KAEhD,OACE3B,EAACiC,EAAI,CAAAC,IAAA,wDAAaF,GAChBhC,EAACH,EAAgB,CAAAqC,IAAA,2CAAApC,YAAaO,KAAKP,aACjCE,EAAA,OAAAkC,IAAA,2CAAKjC,MAAM,2BAA2BkC,QAASH,GAC7ChC,EAAA,QAAAkC,IAAA,2CAAME,KAAK,YAEbpC,EAAK,OAAAkC,IAAA,2CAAAjC,MAAM,6BACRI,KAAKiB,KACJtB,EAAA,KACEsB,KAAMjB,KAAKiB,KACXF,OAAQf,KAAKC,YAAc,SAAW+B,UACtCC,IAAKjC,KAAKC,YAAc,sBAAwB+B,UAChDpC,MAAM,iBACNsC,QAAUpB,GAAMd,KAAKa,kBAAkBC,IAEvCnB,EAAM,QAAAC,MAAM,kBACTI,KAAKC,YACJN,EAAAwC,EAAA,KACExC,EAAU,YAAAyC,KAAK,kBACfzC,EAAA,QAAMC,MAAM,WAAS,4CAGvBD,EAAU,YAAAyC,KAAK,kBAEjBzC,EAAA,QAAMoC,KAAK,cAIfpC,EAAM,QAAAoC,KAAK,YAEZ/B,KAAKwB,qBAAuB,MAAQ7B,EAAM,QAAAkC,IAAA,2CAAAE,KAAK,SAC/C/B,KAAKyB,cAAgB,MAAQ9B,EAAA,QAAAkC,IAAA,2CAAME,KAAK,iBAE3CpC,EAAK,OAAAkC,IAAA,2CAAAjC,MAAM,6BACTD,EAAM,QAAAkC,IAAA,2CAAAE,KAAK,c","ignoreList":[]}
+{"version":3,"names":["plekinfoCardCss","WrapWijzigactie","wijzigactie","children","h","class","PlekinfoCard","constructor","hostRef","this","targetBlank","connectedCallback","mutationObserver","MutationObserver","forceUpdate","host","observe","attributes","childList","disconnectedCallback","_a","disconnect","clickEventHandler","e","target","HTMLElement","href","dsoPlekinfoCardClick","emit","originalEvent","isModifiedEvent","symbolSlottedElement","querySelector","metaSlottedElement","interaction","render","hasSymbol","Host","key","hidden","name","undefined","rel","onClick","Fragment","icon"],"sources":["src/components/plekinfo-card/plekinfo-card.scss?tag=dso-plekinfo-card&encapsulation=shadow","src/components/plekinfo-card/plekinfo-card.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/plekinfo-card\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.dso-plekinfo-card-container {\r\n  padding-block: units.$u2;\r\n  padding-inline: units.$u2;\r\n  inline-size: 100%;\r\n\r\n  .dso-plekinfo-card-heading {\r\n    display: flex;\r\n    align-items: start;\r\n    column-gap: units.$u1;\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\r\n  .dso-plekinfo-card-heading + .dso-plekinfo-card-content {\r\n    margin-block-start: units.$u1;\r\n  }\r\n\r\n  .dso-plekinfo-card-symbol {\r\n    grid-row: span 2;\r\n\r\n    margin-inline-end: units.$u1;\r\n  }\r\n\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover;\r\n  }\r\n}\r\n\r\nins.dso-plekinfo-card-container {\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover-voegtoe;\r\n  }\r\n}\r\n\r\ndel.dso-plekinfo-card-container {\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover-verwijder;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  .dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active;\r\n  }\r\n\r\n  ins.dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active-voegtoe;\r\n  }\r\n\r\n  del.dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active-verwijder;\r\n  }\r\n}\r\n\r\n:host([has-symbol]) {\r\n  .dso-plekinfo-card-container {\r\n    display: grid;\r\n    grid-template-columns: 1fr minmax(0, 100%);\r\n\r\n    .dso-plekinfo-card-heading,\r\n    .dso-plekinfo-card-content {\r\n      grid-column: 2 /-1;\r\n    }\r\n  }\r\n}\r\n\r\n::slotted([slot=\"meta\"]) {\r\n  display: flex !important;\r\n  justify-content: space-between !important;\r\n  flex-shrink: 0 !important;\r\n  align-self: end !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.$u1 !important;\r\n  }\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n  display: inline !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  margin-block-end: 0 !important;\r\n  margin-block-start: 0 !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=\"interaction\"]) {\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\r\n.heading-anchor {\r\n  color: plekinfo-card.$heading-anchor-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    color: plekinfo-card.$heading-anchor-hover-color;\r\n    text-decoration: underline;\r\n  }\r\n\r\n  &:visited {\r\n    color: plekinfo-card.$heading-anchor-color;\r\n  }\r\n\r\n  .sr-only {\r\n    @include utilities.sr-only();\r\n  }\r\n\r\n  .icon-container {\r\n    position: relative;\r\n    padding-inline-end: units.$u3;\r\n\r\n    dso-icon {\r\n      position: absolute;\r\n      inset-inline-end: 0;\r\n      inset-block-end: -3px;\r\n      block-size: units.$u3;\r\n      inline-size: units.$u3;\r\n    }\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  FunctionalComponent,\r\n  Host,\r\n  Prop,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { PlekinfoCardClickEvent, PlekinfoWijzigactie } from \"./plekinfo-card.interfaces\";\r\n\r\ninterface WrapWijzigactieProps {\r\n  wijzigactie: PlekinfoWijzigactie | undefined;\r\n}\r\n\r\nconst WrapWijzigactie: FunctionalComponent<WrapWijzigactieProps> = ({ wijzigactie }, children) => {\r\n  if (wijzigactie === \"voegtoe\") {\r\n    return <ins class=\"dso-plekinfo-card-container\">{children}</ins>;\r\n  }\r\n\r\n  if (wijzigactie === \"verwijder\") {\r\n    return <del class=\"dso-plekinfo-card-container\">{children}</del>;\r\n  }\r\n\r\n  return <div class=\"dso-plekinfo-card-container\">{children}</div>;\r\n};\r\n\r\n/**\r\n * @slot symbol - An optional slot to place a symbol, representing the plekinfo item, in.\r\n * @slot heading - A slot to place the title of the card in.\r\n * @slot meta - An optional slot to place a `Label` in.\r\n * @slot content - An optional slot to place `Rich Content` in.\r\n * @slot interaction - A slot for the `SlideToggle`s elments.\r\n *\r\n */\r\n@Component({\r\n  tag: \"dso-plekinfo-card\",\r\n  styleUrl: \"plekinfo-card.scss\",\r\n  shadow: true,\r\n})\r\nexport class PlekinfoCard implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoPlekinfoCardElement;\r\n\r\n  /**\r\n   * An optional 'wijzigactie' that signals if the plekinfo on the card is added or removed.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: PlekinfoWijzigactie;\r\n\r\n  /**\r\n   * The URL to which the PlekinfoCard heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href!: string | undefined;\r\n\r\n  /**\r\n   * Opens the urls in a new window or tab\r\n   */\r\n  @Prop()\r\n  targetBlank: boolean = false;\r\n\r\n  /**\r\n   * Makes the PlekinfoCard active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the PlekinfoCard heading is clicked.\r\n   */\r\n  @Event()\r\n  dsoPlekinfoCardClick!: EventEmitter<PlekinfoCardClickEvent>;\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.dsoPlekinfoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get metaSlottedElement() {\r\n    return this.host.querySelector(\"[slot='meta']\");\r\n  }\r\n\r\n  get interaction() {\r\n    return this.host.querySelector(\"[slot='interaction']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n\r\n    return (\r\n      <Host has-symbol={hasSymbol}>\r\n        <WrapWijzigactie wijzigactie={this.wijzigactie}>\r\n          <div class=\"dso-plekinfo-card-symbol\" hidden={!hasSymbol}>\r\n            <slot name=\"symbol\" />\r\n          </div>\r\n          <div class=\"dso-plekinfo-card-heading\">\r\n            {this.href ? (\r\n              <a\r\n                href={this.href}\r\n                target={this.targetBlank ? \"_blank\" : undefined}\r\n                rel={this.targetBlank ? \"noopener noreferrer\" : undefined}\r\n                class=\"heading-anchor\"\r\n                onClick={(e) => this.clickEventHandler(e)}\r\n              >\r\n                <span class=\"icon-container\">\r\n                  {this.targetBlank ? (\r\n                    <>\r\n                      <dso-icon icon=\"external-link\" />\r\n                      <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n                    </>\r\n                  ) : (\r\n                    <dso-icon icon=\"chevron-right\" />\r\n                  )}\r\n                  <slot name=\"heading\" />\r\n                </span>\r\n              </a>\r\n            ) : (\r\n              <slot name=\"heading\" />\r\n            )}\r\n            {this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n            {this.interaction !== null && <slot name=\"interaction\" />}\r\n          </div>\r\n          <div class=\"dso-plekinfo-card-content\">\r\n            <slot name=\"content\" />\r\n          </div>\r\n        </WrapWijzigactie>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kHAAA,MAAMA,EAAkB,0yJCsBxB,MAAMC,EAA6D,EAAGC,eAAeC,KACnF,GAAID,IAAgB,UAAW,CAC7B,OAAOE,EAAA,OAAKC,MAAM,+BAA+BF,E,CAGnD,GAAID,IAAgB,YAAa,CAC/B,OAAOE,EAAA,OAAKC,MAAM,+BAA+BF,E,CAGnD,OAAOC,EAAA,OAAKC,MAAM,+BAA+BF,EAAe,E,MAgBrDG,EAAY,MALzB,WAAAC,CAAAC,G,qEAyBEC,KAAWC,YAAY,KA2FxB,CA3EC,iBAAAC,GACEF,KAAKG,iBAAmB,IAAIC,kBAAiB,IAAMC,EAAYL,KAAKM,QAEpEN,KAAKG,iBAAiBI,QAAQP,KAAKM,KAAM,CAAEE,WAAY,KAAMC,UAAW,M,CAG1E,oBAAAC,G,OACEC,EAAAX,KAAKG,oBAAkB,MAAAQ,SAAA,SAAAA,EAAAC,oBAEhBZ,KAAKG,gB,CAGN,iBAAAU,CAAkBC,GACxB,KAAMA,EAAEC,kBAAkBC,eAAiBhB,KAAKiB,KAAM,CACpD,M,CAGF,OAAOjB,KAAKkB,qBAAqBC,KAAK,CAAEC,cAAeN,EAAGO,gBAAiBA,EAAgBP,I,CAG7F,wBAAIQ,GACF,OAAOtB,KAAKM,KAAKiB,cAAc,kB,CAGjC,sBAAIC,GACF,OAAOxB,KAAKM,KAAKiB,cAAc,gB,CAGjC,eAAIE,GACF,OAAOzB,KAAKM,KAAKiB,cAAc,uB,CAGjC,MAAAG,GACE,MAAMC,EAAY3B,KAAKsB,uBAAyB,KAEhD,OACE3B,EAACiC,EAAI,CAAAC,IAAA,wDAAaF,GAChBhC,EAACH,EAAgB,CAAAqC,IAAA,2CAAApC,YAAaO,KAAKP,aACjCE,EAAA,OAAAkC,IAAA,2CAAKjC,MAAM,2BAA2BkC,QAASH,GAC7ChC,EAAA,QAAAkC,IAAA,2CAAME,KAAK,YAEbpC,EAAK,OAAAkC,IAAA,2CAAAjC,MAAM,6BACRI,KAAKiB,KACJtB,EAAA,KACEsB,KAAMjB,KAAKiB,KACXF,OAAQf,KAAKC,YAAc,SAAW+B,UACtCC,IAAKjC,KAAKC,YAAc,sBAAwB+B,UAChDpC,MAAM,iBACNsC,QAAUpB,GAAMd,KAAKa,kBAAkBC,IAEvCnB,EAAM,QAAAC,MAAM,kBACTI,KAAKC,YACJN,EAAAwC,EAAA,KACExC,EAAU,YAAAyC,KAAK,kBACfzC,EAAA,QAAMC,MAAM,WAAS,4CAGvBD,EAAU,YAAAyC,KAAK,kBAEjBzC,EAAA,QAAMoC,KAAK,cAIfpC,EAAM,QAAAoC,KAAK,YAEZ/B,KAAKwB,qBAAuB,MAAQ7B,EAAM,QAAAkC,IAAA,2CAAAE,KAAK,SAC/C/B,KAAKyB,cAAgB,MAAQ9B,EAAA,QAAAkC,IAAA,2CAAME,KAAK,iBAE3CpC,EAAK,OAAAkC,IAAA,2CAAAjC,MAAM,6BACTD,EAAM,QAAAkC,IAAA,2CAAAE,KAAK,c","ignoreList":[]}