@dso-toolkit/core 63.0.0 → 65.0.0

package/dist/collection/components/pagination/pagination.css

@@ -8,19 +8,19 @@
   box-sizing: border-box;
 }
 
-.pagination {
+.pagination ul {
   padding-inline-start: initial;
   text-align: center;
 }
-.pagination > li {
+.pagination ul > li {
   display: inline-block;
   font-weight: bold;
   line-height: calc(2rem - 4px);
   text-align: center;
   vertical-align: middle;
 }
-.pagination > li > a,
-.pagination > li > span {
+.pagination ul > li > a,
+.pagination ul > li > span {
   align-items: center;
   color: #39870c;
   display: flex;
@@ -32,25 +32,25 @@
   padding-block: 2px;
   padding-inline: 2px;
 }
-.pagination > li > a:active,
-.pagination > li > span:active {
+.pagination ul > li > a:active,
+.pagination ul > li > span:active {
   background-color: #ebf3e6;
 }
-.pagination > li > span {
+.pagination ul > li > span {
   border: 2px solid transparent;
   border-radius: 1rem;
 }
-.pagination > li a {
+.pagination ul > li a {
   line-height: 2rem;
   text-decoration: none;
 }
-.pagination > li a:hover, .pagination > li a:focus {
+.pagination ul > li a:hover, .pagination ul > li a:focus {
   text-decoration: none;
 }
-.pagination > li a:hover::after, .pagination > li a:focus::after {
+.pagination ul > li a:hover::after, .pagination ul > li a:focus::after {
   border-block-end-color: #39870c;
 }
-.pagination > li a::after {
+.pagination ul > li a::after {
   border-block-end: 3px solid transparent;
   inset-block-end: 0;
   content: "";
@@ -59,14 +59,25 @@
   position: absolute;
   inline-size: 100%;
 }
-.pagination > li.active span {
+.pagination ul > li.active span {
   background-color: #39870c;
   color: #fff;
 }
-.pagination > li + li {
+.pagination ul > li + li {
   margin-inline-start: 8px;
 }
 
 .dso-page-hidden {
   visibility: hidden;
+}
+
+.sr-only.sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
 }

package/dist/collection/components/pagination/pagination.js

@@ -40,12 +40,12 @@ export class Pagination {
         const availablePositions = this.availablePositions;
         const currentPage = (_a = this.currentPage) !== null && _a !== void 0 ? _a : 0;
         const pages = this.getPages(currentPage, this.availablePositions, this.totalPages);
-        return (h("dso-responsive-element", { ref: (element) => (this.responsiveElement = element) }, h("ul", { class: "pagination" }, h("li", { class: currentPage <= 1 || currentPage > this.totalPages ? "dso-page-hidden" : undefined }, h("a", { href: this.formatHref((_b = pages[pages.indexOf(currentPage) - 1]) !== null && _b !== void 0 ? _b : 1), "aria-label": "Vorige", onClick: (e) => { var _a; return currentPage && this.clickHandler(e, (_a = pages[pages.indexOf(currentPage) - 1]) !== null && _a !== void 0 ? _a : 1); } }, h("dso-icon", { icon: "chevron-left" }))), pages.map((page) => (h(Fragment, null, this.showEllipsisBeforeLast(pages, page, availablePositions) && (h("li", null, h("span", null, "..."))), h("li", { key: page, class: currentPage === page ? "active" : undefined }, currentPage === page ? (h("span", { "aria-current": "page" }, page)) : (h("a", { href: this.formatHref(page), onClick: (e) => this.clickHandler(e, page) }, page))), this.showEllipsisAfterFirst(pages, page, availablePositions) && (h("li", null, h("span", null, "...")))))), h("li", { class: currentPage < 1 || currentPage >= this.totalPages ? "dso-page-hidden" : undefined }, h("a", { href: this.formatHref((_c = pages[pages.indexOf(currentPage) + 1]) !== null && _c !== void 0 ? _c : this.totalPages), "aria-label": "Volgende", onClick: (e) => {
+        return (h("dso-responsive-element", { ref: (element) => (this.responsiveElement = element) }, h("nav", { class: "pagination", "aria-label": "Paginering" }, h("ul", null, h("li", { class: currentPage <= 1 || currentPage > this.totalPages ? "dso-page-hidden" : undefined }, h("a", { href: this.formatHref((_b = pages[pages.indexOf(currentPage) - 1]) !== null && _b !== void 0 ? _b : 1), "aria-label": "Vorige", onClick: (e) => { var _a; return currentPage && this.clickHandler(e, (_a = pages[pages.indexOf(currentPage) - 1]) !== null && _a !== void 0 ? _a : 1); } }, h("dso-icon", { icon: "chevron-left" }))), pages.map((page) => (h(Fragment, null, this.showEllipsisBeforeLast(pages, page, availablePositions) && (h("li", null, h("span", null, "..."))), h("li", { key: page, class: currentPage === page ? "active" : undefined }, currentPage === page ? (h("span", { "aria-current": "page" }, page)) : (h("a", { href: this.formatHref(page), onClick: (e) => this.clickHandler(e, page) }, page)), page === this.totalPages ? h("span", { class: "sr-only" }, " (laatste pagina)") : null), this.showEllipsisAfterFirst(pages, page, availablePositions) && (h("li", null, h("span", null, "...")))))), h("li", { class: currentPage < 1 || currentPage >= this.totalPages ? "dso-page-hidden" : undefined }, h("a", { href: this.formatHref((_c = pages[pages.indexOf(currentPage) + 1]) !== null && _c !== void 0 ? _c : this.totalPages), "aria-label": "Volgende", onClick: (e) => {
                 var _a;
                 return currentPage &&
                     this.totalPages &&
                     this.clickHandler(e, (_a = pages[pages.indexOf(currentPage) + 1]) !== null && _a !== void 0 ? _a : this.totalPages);
-            } }, h("dso-icon", { icon: "chevron-right" }))))));
+            } }, h("dso-icon", { icon: "chevron-right" })))))));
     }
     getAvailablePositions(sizePositions) {
         if (sizePositions % 2 === 0) {

package/dist/collection/components/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  h,\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} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\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) {\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        <ul class=\"pagination\">\r\n          <li class={currentPage <= 1 || currentPage > this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n            <a\r\n              href={this.formatHref(pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n              aria-label=\"Vorige\"\r\n              onClick={(e) => currentPage && this.clickHandler(e, pages[pages.indexOf(currentPage) - 1] ?? 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            <>\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              </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          ))}\r\n          <li class={currentPage < 1 || currentPage >= this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n            <a\r\n              href={this.formatHref(pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)}\r\n              aria-label=\"Volgende\"\r\n              onClick={(e) =>\r\n                currentPage &&\r\n                this.totalPages &&\r\n                this.clickHandler(e, pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)\r\n              }\r\n            >\r\n              <dso-icon icon=\"chevron-right\"></dso-icon>\r\n            </a>\r\n          </li>\r\n        </ul>\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 + 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\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    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === 0 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === 2) &&\r\n      availablePositions >= 7\r\n    );\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    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === pages.length - 1 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === totalPages - 1) &&\r\n      availablePositions >= 7\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  h,\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} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\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) {\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 > this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n              <a\r\n                href={this.formatHref(pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n                aria-label=\"Vorige\"\r\n                onClick={(e) => currentPage && this.clickHandler(e, pages[pages.indexOf(currentPage) - 1] ?? 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              <>\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            ))}\r\n            <li class={currentPage < 1 || currentPage >= this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n              <a\r\n                href={this.formatHref(pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)}\r\n                aria-label=\"Volgende\"\r\n                onClick={(e) =>\r\n                  currentPage &&\r\n                  this.totalPages &&\r\n                  this.clickHandler(e, pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)\r\n                }\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 + 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\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    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === 0 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === 2) &&\r\n      availablePositions >= 7\r\n    );\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    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === pages.length - 1 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === totalPages - 1) &&\r\n      availablePositions >= 7\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/project-item/project-item.css

@@ -0,0 +1,75 @@
+:host {
+  display: block;
+  padding: 16px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+::slotted(dl[slot=progress]),
+::slotted(dl[slot=status]) {
+  --_dt-dl-margin-block-end: 0;
+  --_dt-dl-before-display: none;
+  --_dt-dl-dt-font-weight: normal;
+  --_dt-dl-dd-margin-block-start: 0;
+  --_dt-dl-dd-margin-inline-start: units.$u1;
+  --_dt-dl-dd-padding-inline-start: 0;
+  --_dt-dl-dt-inline-size: auto;
+  --_dt-dl-dd-last-margin-block-end: 0;
+  --_dt-mark-bg-color: none;
+  --_dt-mark-padding-block: 0;
+  --_dt-mark-color: inherit;
+  --_dt-mark-font-weight: 600;
+  display: flex !important;
+  flex-wrap: wrap;
+  column-gap: 16px;
+}
+
+::slotted([slot=status]) {
+  --_dt-dl-font-size: 0.875rem;
+}
+
+::slotted([slot=title]) {
+  margin-block: 0 !important;
+  font-size: 1.25rem !important;
+}
+
+::slotted([slot=actions]) {
+  display: flex;
+}
+
+.project-item-header {
+  display: flex;
+  gap: 16px;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  margin-block-end: 16px;
+}
+
+.project-item-title {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  flex-grow: 1;
+}
+
+.project-item-actions {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+}
+
+.project-item-info {
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: flex-end;
+}

package/dist/collection/components/project-item/project-item.js

@@ -0,0 +1,43 @@
+import { h, Fragment } from "@stencil/core";
+export class ProjectItem {
+    constructor() {
+        this.label = undefined;
+    }
+    render() {
+        return (h(Fragment, null, h("div", { key: '7e8ce0768a4d29b8f0e0870e514fb0cb839dca70', class: "project-item-header" }, h("div", { key: '5c7b01e378c96a972b1780aff226af0437569148', class: "project-item-title" }, h("slot", { key: 'e8af48f1b1ef400f6598b299dc424e1c068c493a', name: "title" }), this.label && (h("dso-label", { key: '7d4d6bfb4104391af6feeef50c8abfdf0112a19c', status: "danger", compact: true }, this.label))), h("div", { key: 'cb66a125f18494e5504a86a530a92fc07b972fd9', class: "project-item-actions" }, h("slot", { key: '3fd674fe94215b163cbd741febf8a255d2e69ee6', name: "actions" }))), h("div", { key: 'cee317bf938c9d5f3943f2f5df46377748963108', class: "project-item-info" }, h("div", { key: '91402c05f20e06d21e219be63da508c2116beb45', class: "project-item-progress" }, h("slot", { key: '60fe0fa198bd97e757ce867460ef1b0124a56129', name: "progress" })), h("div", { key: '2f2252fe030f12d87d956848aca9bd6559794fbf', class: "project-item-status" }, h("slot", { key: '7e15b524f5ca6d20dc8b9550dd80162614e1c3c6', name: "status" })))));
+    }
+    static get is() { return "dso-project-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["project-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["project-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the project item."
+                },
+                "attribute": "label",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=project-item.js.map

package/dist/collection/components/project-item/project-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"project-item.js","sourceRoot":"","sources":["../../../../src/components/project-item/project-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAOjF,MAAM,OAAO,WAAW;;;;IAOtB,MAAM;QACJ,OAAO,CACL;YACE,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,4DAAK,KAAK,EAAC,oBAAoB;oBAC7B,6DAAM,IAAI,EAAC,OAAO,GAAG;oBACpB,IAAI,CAAC,KAAK,IAAI,CACb,kEAAW,MAAM,EAAC,QAAQ,EAAC,OAAO,UAC/B,IAAI,CAAC,KAAK,CACD,CACb,CACG;gBACN,4DAAK,KAAK,EAAC,sBAAsB;oBAC/B,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF;YACN,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,4DAAK,KAAK,EAAC,uBAAuB;oBAChC,6DAAM,IAAI,EAAC,UAAU,GAAG,CACpB;gBACN,4DAAK,KAAK,EAAC,qBAAqB;oBAC9B,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF,CACL,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, h, Prop, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-project-item\",\r\n  styleUrl: \"project-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class ProjectItem implements ComponentInterface {\r\n  /**\r\n   * The label of the project item.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <div class=\"project-item-header\">\r\n          <div class=\"project-item-title\">\r\n            <slot name=\"title\" />\r\n            {this.label && (\r\n              <dso-label status=\"danger\" compact>\r\n                {this.label}\r\n              </dso-label>\r\n            )}\r\n          </div>\r\n          <div class=\"project-item-actions\">\r\n            <slot name=\"actions\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"project-item-info\">\r\n          <div class=\"project-item-progress\">\r\n            <slot name=\"progress\" />\r\n          </div>\r\n          <div class=\"project-item-status\">\r\n            <slot name=\"status\" />\r\n          </div>\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/renvooi/renvooi.css

@@ -1,12 +1,13 @@
 ins {
   text-decoration: none;
+}
+ins {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
   background-color: #e4f1d4;
   border-color: #e4f1d4;
   color: #191919;
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
 }
 ins a:is(.download, .download:hover, .download:focus-visible) {
   background-image: url("./dso-icons.svg#img-download-zwart");
@@ -20,6 +21,9 @@ ins a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
 ins a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: url("./dso-icons.svg#img-email-zwart");
 }
+ins {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
+}
 
 del {
   --link-color: currentColor;
@@ -28,7 +32,6 @@ del {
   background-color: #f5d8dc;
   border-color: #f5d8dc;
   color: #191919;
-  text-decoration: line-through;
 }
 del a:is(.download, .download:hover, .download:focus-visible) {
   background-image: url("./dso-icons.svg#img-download-zwart");
@@ -42,6 +45,9 @@ del a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
 del a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: url("./dso-icons.svg#img-email-zwart");
 }
+del {
+  text-decoration: line-through;
+}
 
 :host {
   display: inline;

package/dist/collection/components/responsive-element/responsive-element.js

@@ -40,7 +40,7 @@ export class ResponsiveElement {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: '4d5e917e2e7a46743621de2c38e124b9ddd6821f', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'ff4856f719b596eeb4caab380f22afd386c63ab7' })));
+        return (h(Host, { key: 'da7d53fadbf366d94af9b81a7fbe82d5b841fae6', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '7f5760e962121bb49d6df0bbec7480f8cdca2e0b' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scrollable/scrollable.js

@@ -81,9 +81,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: 'd9c73f524fa17860c1cad8a0ca960d7db540dbab', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'b2ce5ba340f7907fcb111c0395d7e22324e58237', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: 'b786c2765a723299a16956239d0a3f2814bdb365', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '32629e90bd713faf99192825f4d5f6b730949724', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: '47cf6e7432017040b5e3c5815427f11d10f1b8e8' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: '3d02e6603fb849f9535529ae5143452e0ee0484e' }))));
     }
     static get is() { return "dso-scrollable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/selectable/selectable.js

@@ -63,7 +63,7 @@ export class Selectable {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: '91453618df769cca5d2b8b11d0749d27b53f59b1' }, h("div", { key: '517f33fff46189d305568f6e68168831a94c0c57', class: "dso-selectable-container" }, h("div", { key: 'ef669b7497bd52b108d4c877493dbe772d8700a4', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: 'c6f2aa35044581a2d5f7f43d870ba0ce22424c92', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: 'b5482b39b6045fcdffb4cd2284f83bd9f554f267', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'e66998b45aa63933b73d0c54eeb3ccbae8246bee', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '8b2033a0b23d356be3804632698e687310de6ed7' }, h("slot", { key: '411eafba867420af9d581d7af5f35cec59fff133', name: "info" })))), h("slot", { key: 'e1d3855d686c4bc6119f65a76d889f5c2d44dcb6', name: "options" })));
+        return (h(Fragment, { key: '7bc5f9b9e029af047da32ea329ec28ef5a1b9a6e' }, h("div", { key: 'e1d8151cfc4a179c574cdd22f5b8a522433f9896', class: "dso-selectable-container" }, h("div", { key: 'b7089b2e8b02bacaf0485351726d019b2d3faaf3', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: 'bbf2571b7578706abf523f5fc0d66435159b5ab5', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: 'c03e4642630e5a7dfd902af7389eb8eefedef6f7', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'bd49a93be3a86178bb3b3ea6df7744baeb746d3d', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'a34fe7983e523fcb8b07d90bcd3b48a4359abb31' }, h("slot", { key: 'd733610afc9465da63844b0c8430ddde7227fae5', name: "info" })))), h("slot", { key: '7af6229ca414ff808ea348d396f51f6674ba30e1', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/collection/components/slide-toggle/slide-toggle.js

@@ -19,7 +19,7 @@ export class SlideToggle {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, null, h("button", Object.assign({ key: '7ce2d8bf2bb8ba405449eaefc5762cb67a4ac4dc', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: '12e21116b6fc68e0bf49c53496940bd580e6f10b', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'aca7818aa5260621fc58279481b312ada6dbddc7', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'dfbc32a846cea43c346f10d70076a261db8d5d96', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '9497b94ec12c7629550c95228fc975c9fdd9520c', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'b5859b19eb2aaddc36b39bb57874f0ae8bf637fc', htmlFor: this.identifier }, h("slot", { key: 'd98d76eb907c33f5a1bb0427a3fa5d9b2a99b32a' })))));
+        return (h(Fragment, null, h("button", Object.assign({ key: '2a589d57cb3a34fbc7d545ba463eb5dfdc7c8e3b', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: 'daeae3ad7945cca85dbcfcd0393088c2247d3063', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '1dc77f9db7e0c8e8a4118a12dd7e153092fd7c3d', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '44f1f0491a5e32eea07435b4bb5d2ac5e10e5dc1', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '4a5c4a0f67804163ae09155e1fa1bad50d7b6202', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '4a68fb9b36dc403cfb3f48614b603a218453454f', htmlFor: this.identifier }, h("slot", { key: 'b41750cfec394016cfd4b9dd75b5ffa8c8dad754' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get originalStyleUrls() {

package/dist/collection/components/table/table.css

@@ -30,16 +30,6 @@ label.dso-primary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
-  background-color: #39870c;
-  border-color: #39870c;
-  color: #fff;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-inline-size: 56px;
-  padding-block: 11px;
-  padding-inline: 15px;
 }
 a.dso-primary:focus, a.dso-primary:focus-visible,
 button.dso-primary:focus,
@@ -62,6 +52,24 @@ label.dso-primary.download::after {
   display: inline-block;
   margin-inline-start: 8px;
 }
+a.dso-primary,
+button.dso-primary,
+label.dso-primary {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+a.dso-primary,
+button.dso-primary,
+label.dso-primary {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
 a.dso-primary:hover,
 button.dso-primary:hover,
 label.dso-primary:hover {
@@ -200,16 +208,6 @@ label.dso-secondary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
-  background-color: #fff;
-  border-color: #39870c;
-  color: #39870c;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-inline-size: 56px;
-  padding-block: 11px;
-  padding-inline: 15px;
 }
 a.dso-secondary:focus, a.dso-secondary:focus-visible,
 button.dso-secondary:focus,
@@ -232,6 +230,24 @@ label.dso-secondary.download::after {
   display: inline-block;
   margin-inline-start: 8px;
 }
+a.dso-secondary,
+button.dso-secondary,
+label.dso-secondary {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+a.dso-secondary,
+button.dso-secondary,
+label.dso-secondary {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
 a.dso-secondary:hover,
 button.dso-secondary:hover,
 label.dso-secondary:hover {
@@ -426,11 +442,6 @@ label.dso-tertiary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
-  border: 0;
-  color: #39870c;
-  line-height: 1;
-  padding: 0;
-  background-color: transparent;
 }
 a.dso-tertiary:focus, a.dso-tertiary:focus-visible,
 button.dso-tertiary:focus,
@@ -453,6 +464,15 @@ label.dso-tertiary.download::after {
   display: inline-block;
   margin-inline-start: 8px;
 }
+a.dso-tertiary,
+button.dso-tertiary,
+label.dso-tertiary {
+  border: 0;
+  color: #39870c;
+  line-height: 1;
+  padding: 0;
+  background-color: transparent;
+}
 a.dso-tertiary[disabled],
 button.dso-tertiary[disabled],
 label.dso-tertiary[disabled] {
@@ -734,14 +754,6 @@ a.dso-tertiary, a.dso-tertiary:visited {
   border: 0;
   text-align: center;
 }
-:host .dso-modal > .dso-dialog > .dso-body {
-  /* stylelint-disable-next-line scss/operator-no-newline-after -- disabled because of prettier newline */
-  block-size: calc(100% - 96px - 1.5rem);
-  max-block-size: calc(70vh - 144px - 1.5em);
-  min-block-size: 1.5rem;
-  overflow-x: auto;
-  padding: 32px;
-}
 :host .dso-modal > .dso-dialog > .dso-body p {
   margin-block: 0 16px;
   margin-inline: 0;
@@ -776,15 +788,18 @@ a.dso-tertiary, a.dso-tertiary:visited {
   block-size: auto;
   max-inline-size: 100%;
 }
+:host .dso-modal > .dso-dialog > .dso-body {
+  block-size: calc(100% - 96px - 1.5rem);
+  max-block-size: calc(70vh - 144px - 1.5em);
+  min-block-size: 1.5rem;
+  overflow-x: auto;
+  padding: 32px;
+}
 :host .dso-modal > .dso-dialog > dso-scrollable {
-  /* stylelint-disable-next-line scss/operator-no-newline-after -- disabled because of prettier newline */
   block-size: calc(100% - 96px - 1.5rem);
   max-block-size: calc(70vh - 144px - 1.5em);
   min-block-size: 6.5rem;
 }
-:host .dso-modal > .dso-dialog > dso-scrollable .dso-body {
-  padding: 32px;
-}
 :host .dso-modal > .dso-dialog > dso-scrollable .dso-body p {
   margin-block: 0 16px;
   margin-inline: 0;
@@ -819,15 +834,12 @@ a.dso-tertiary, a.dso-tertiary:visited {
   block-size: auto;
   max-inline-size: 100%;
 }
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body {
+  padding: 32px;
+}
 :host .dso-modal .dso-body:focus-visible {
   outline: none;
 }
-:host .dso-modal .dso-footer {
-  min-block-size: 80px;
-  padding-block: 16px;
-  padding-inline: 32px;
-  text-align: end;
-}
 @media screen and (max-width: 767px) {
   :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 + .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 + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
     margin-inline-start: 0;
@@ -844,6 +856,12 @@ a.dso-tertiary, a.dso-tertiary:visited {
     float: none;
   }
 }
+:host .dso-modal .dso-footer {
+  min-block-size: 80px;
+  padding-block: 16px;
+  padding-inline: 32px;
+  text-align: end;
+}
 @media screen and (min-width: 768px) {
   :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary {
     margin-inline-start: 16px;

package/dist/collection/components/table/table.js

@@ -30,7 +30,7 @@ export class Table {
     render() {
         var _a, _b;
         const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
-        return (h(Host, { key: '1c2e38c6f3217711cafe6542bd11c3d248fb48e9' }, this.modalActive && this.placeholderHeight && (h("div", { key: '4c020d2f6c087f4095c24a99767fe04110d8da86', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: 'b1c0d4c9eddb85ef3f6b63ec50b61f75fdeb67f0', class: "dso-modal-overlay" }), h("div", { key: 'c2a1ad13e86fd67850a1a774821f92fe7425e71c', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '8451d846bbdda8cffe5a45e2608ba57725a7bfec', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: '12941802e431b50d0397fc6e5718a93e49f5fdc9', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: 'e60e7c1c42887eba56ce16fd3e4a177e5ae183a2', class: "dso-responsive-message" }, h("span", { key: 'd4909e420fd1f7016bd774d60b453dd81b9f90c9' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '4fb9f254a724310cea532d8ea7522fde7f025880', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: '93f19b8e5c73554247135c3a18b4e05f263d2b86', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: '4dd3fb097d1e09d95e4e25c12e6a57f8bf27012e' }, "vergroten"), h("dso-icon", { key: '41ba653a6f30b4f5aa6fca791d4616688df95507', icon: "external-link" }))))), this.modalActive && (h("div", { key: 'c865dfdc842892326b83ad888921337ee77a5922', class: "dso-header" }, h("h2", { key: '8b1913d8abc5d8618ba9d94b8e0ce334f10087ee', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '05994fa6fd752851b92868f690eb4bb8d8197f9f', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: '2ef2e866d58999eac9653d5ded98bd927a36b1fc', icon: "times" }), h("span", { key: '2b715ea3a09ce362b54d7f5ee6490e8b67cec86b', class: "sr-only" }, "Sluiten")))), h("div", { key: '51129e5af78fe0c0a0fa36b9865054f9b60d12f7', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '8cb0bb0a56b801ae50d29eadc180f7729258f627' }))))));
+        return (h(Host, { key: '72635aa7a0e69c5aaba5d8818d4cf62722f4d730' }, this.modalActive && this.placeholderHeight && (h("div", { key: '661735ad5d092ce7abfebca3d9ecab571cbb667c', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '00fb6d4496cabe0e0614630440d741e6b277b734', class: "dso-modal-overlay" }), h("div", { key: 'efcf1cf01e0d826bfd1ca59ed1b64518b9a3d2cf', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '485a98cdddd01b8975f0967b4efc3b71f7b94979', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: '0d0db83cdae29e609aca0047473ba3b209522cf6', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: '5392a5016adf8dffc44b513142d5a1aebc2cb51b', class: "dso-responsive-message" }, h("span", { key: '00d8a2c83a3e75700f454f446bcf1aed3d3f5024' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '6b7eaf6b69966dfd468ca9eaad10c7c3b8a95d1c', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: '5d6bb7e0b1bc9f409529ddd1f2db88e0528a0951', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: 'f316e9cf2d53ce38daf9c444c876e5c7cf01fdcc' }, "vergroten"), h("dso-icon", { key: '347b3aeb40a7dc074f95c70a90c42e329239f348', icon: "external-link" }))))), this.modalActive && (h("div", { key: 'd26f367ffa7b39e840c1fd071e7262d6dfa606ef', class: "dso-header" }, h("h2", { key: '965cdd0b891b2ae8d5888e920b9e8d3e5da24c7a', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '0952fbb314ec2457d9508f285dad1e323ab15c39', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: 'd8d5ec0de5eedd1f17a2ba6ac7765a59e90f831c', icon: "times" }), h("span", { key: '02d4fd9da8af57960e68a32f82fa30f475d1e87f', class: "sr-only" }, "Sluiten")))), h("div", { key: 'cae5e1e2daa69351b1f4f157382fa2102fa24657', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '3bb8855a6ea597457abdf28d146c9dc61c8bab6f' }))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;