@dso-toolkit/core 72.0.0 → 72.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 && !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"]}
+{"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 && !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"]}

package/dist/collection/components/panel/panel.js

@@ -33,6 +33,7 @@ export class Panel {
         return {
             "closeButtonLabel": {
                 "type": "string",
+                "attribute": "close-button-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -47,11 +48,11 @@ export class Panel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close-button-label",
                 "reflect": false
             },
             "emphasized": {
                 "type": "boolean",
+                "attribute": "emphasized",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -66,7 +67,6 @@ export class Panel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "emphasized",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/plekinfo-card/plekinfo-card.js

@@ -50,7 +50,7 @@ export class PlekinfoCard {
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: '5cd241eabf508145625d46a6d923a9fdeeb8d191', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'd4f5887cfe88050246c31d84ef389a6b289ebb15', wijzigactie: this.wijzigactie }, h("div", { key: '8e160f4e8f8329c11feefa842c035500b46b3c5b', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '2f8110b2bda5a39bf12df96a8838dcc41b0eb014', name: "symbol" })), h("div", { key: 'dbbc8d0e7f39a5888fd18c91674888a3f56cf086', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { name: "heading" }), this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: 'f71a03bc2ce6c168d645bfc37e21bdb7585261c1', name: "meta" }), this.interaction !== null && h("slot", { key: '5716ff3cd0f4270c9220076810e5f7e5e2f65347', name: "interaction" })), h("div", { key: 'f65b1f199ba70cea2fb254475a84547aba0d99ab', class: "dso-plekinfo-card-content" }, h("slot", { key: '678564a6fe0ab238570730eb5e78922b45df9b94', name: "content" })))));
+        return (h(Host, { key: 'aee71a264aa898231fbc5e708bc6b1057bfee886', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '234a6cf3826848efd20985b118b1aceb9948df58', wijzigactie: this.wijzigactie }, h("div", { key: '606b796f15489d6096f211b68b291e4dffdd9598', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '876469b5dd24f9404d32bbed7ac96e666ea96792', name: "symbol" })), h("div", { key: 'feb529e9820291145fef32d99f658e5091536c71', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { name: "heading" }), this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: 'b08865c49b90d8231606c91f3a2d3fb9373a98e1', name: "meta" }), this.interaction !== null && h("slot", { key: '3327e66eacf36753029666d7a56565d21732aec5', name: "interaction" })), h("div", { key: '6bec23e361930bbb8d66cde9350d13161747cd1d', class: "dso-plekinfo-card-content" }, h("slot", { key: '12ae5a2a1b4fca94fb8232c033767b220721f651', name: "content" })))));
     }
     static get is() { return "dso-plekinfo-card"; }
     static get encapsulation() { return "shadow"; }
@@ -68,6 +68,7 @@ export class PlekinfoCard {
         return {
             "wijzigactie": {
                 "type": "string",
+                "attribute": "wijzigactie",
                 "mutable": false,
                 "complexType": {
                     "original": "PlekinfoWijzigactie",
@@ -88,11 +89,11 @@ export class PlekinfoCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "wijzigactie",
                 "reflect": true
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -107,11 +108,11 @@ export class PlekinfoCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": true
             },
             "targetBlank": {
                 "type": "boolean",
+                "attribute": "target-blank",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -126,12 +127,12 @@ export class PlekinfoCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "target-blank",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -146,7 +147,6 @@ export class PlekinfoCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": true
             }
         };

package/dist/collection/components/progress-bar/progress-bar.js

@@ -13,7 +13,7 @@ export class ProgressBar {
     render() {
         const progressNumber = Math.round(this.progress);
         const progressPercentage = `${progressNumber}%`;
-        return (h("div", { key: 'f36531b1a2a63c681dd43343a56e27ae989ce4d3', class: "progress" }, h("span", { key: '1ebf570e2636eea9ce92afa1178be72e558ea97c', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '2e3b5359953d98adeb8b602dc38f172d166cbf07', style: { width: `${progressPercentage}` } })), h("span", { key: '6cbff28be0db354b9559ae88f03cdbd24cf6349d', id: "progress-bar-label" }, h("slot", { key: 'a389ee94c6ea3f592b6884841e013a3fc8c7e058' }))));
+        return (h("div", { key: '890a38e19abe239b15e97ab5e863bbb88a2e4d89', class: "progress" }, h("span", { key: 'a48b38f078f5ef157d035d9148e07d30363a25e4', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: 'd1fb152692ac60590536d7c5d957fc14813f33c3', style: { width: `${progressPercentage}` } })), h("span", { key: '59d3fbfd633705d73ad442602e9de1c8f12c2def', id: "progress-bar-label" }, h("slot", { key: '90c470afc6e57e744102c2fc7a9c4353a2a6d2b3' }))));
     }
     static get is() { return "dso-progress-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -31,6 +31,7 @@ export class ProgressBar {
         return {
             "progress": {
                 "type": "number",
+                "attribute": "progress",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -45,11 +46,11 @@ export class ProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "progress",
                 "reflect": false
             },
             "min": {
                 "type": "number",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -64,12 +65,12 @@ export class ProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "max": {
                 "type": "number",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -84,7 +85,6 @@ export class ProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false,
                 "defaultValue": "100"
             }

package/dist/collection/components/progress-indicator/progress-indicator.js

@@ -6,7 +6,7 @@ export class Progressindicator {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h(Host, { key: '52411c54285ee531622097d20636d86490eb5347' }, h("span", { key: 'f041f3f2e1cbb130ac28c9f372be4c3ea55e6408', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'f40a24bbba984fc401843e60731e6568756e3c19', icon: "spinner" })), h("span", { key: 'ec13ec473f01dcb0ad18a64f0dc56cce16b87cac', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: '412708c2c447dea51145c32ae824536080b47a2e' }, h("span", { key: 'd922af84f2971cb5a238da95f5f94f3674436d8e', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '8af8ba31c28fdabacf700b774db95d463111919a', icon: "spinner" })), h("span", { key: '13c5c78b7aab6696dc0896cfbf3e391a30d45762', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
     }
     static get is() { return "dso-progress-indicator"; }
     static get encapsulation() { return "shadow"; }
@@ -24,6 +24,7 @@ export class Progressindicator {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -38,11 +39,11 @@ export class Progressindicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "\"small\" | \"medium\" | \"large\"",
@@ -57,11 +58,11 @@ export class Progressindicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": true
             },
             "block": {
                 "type": "boolean",
+                "attribute": "block",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -76,7 +77,6 @@ export class Progressindicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "block",
                 "reflect": true
             }
         };

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

@@ -1,7 +1,7 @@
 import { h, Fragment } from "@stencil/core";
 export class ProjectItem {
     render() {
-        return (h(Fragment, null, h("div", { key: '3d3b1bc8f12eba2607d5536f6c87be8601484671', class: "project-item-header" }, h("div", { key: '13d3358e7ec3f837658dcce47e333898ee5da527', class: "project-item-title" }, h("slot", { key: '5133a6630099106d78549101bb974659eb515e7c', name: "title" }), this.label && (h("dso-label", { key: 'a955a28692b88cecbb755a0d5e7f6c1e54a5bf2b', status: "danger", compact: true }, this.label))), h("div", { key: '847a95a32f9130bec82a55e590bde4d319eceb39', class: "project-item-actions" }, h("slot", { key: 'dfc72d7cbe7a58ec08a5c6b68b0b9388944aa1e8', name: "actions" }))), h("div", { key: '2e3a43fec7416b100680a68bbfce3e3e05b84aaa', class: "project-item-info" }, h("div", { key: 'f20a244104d7f853d6be17b1977f1a612a60fcd8', class: "project-item-progress" }, h("slot", { key: '4806c05b5837d3164d44ee4804f98e0cfba30775', name: "progress" })), h("div", { key: 'b7593174a234950a1cd52b7c3bec4fc98ce83802', class: "project-item-status" }, h("slot", { key: 'a509ac9469b91bd514940688ab01c1c50300398d', name: "status" })))));
+        return (h(Fragment, null, h("div", { key: 'd15ec4ffeb4103f4bb2f112408b7e499aa0d1e68', class: "project-item-header" }, h("div", { key: 'b1ac2f3768156a459f87de37491031e804ee5fba', class: "project-item-title" }, h("slot", { key: 'eac6bf4453bfb5b35297dd4472165e4148178f47', name: "title" }), this.label && (h("dso-label", { key: 'd0ee0ca487066a5818b6bbb55936a0356f8d20b3', status: "danger", compact: true }, this.label))), h("div", { key: '83a5bc2c5795542387d2e7370e963a6b955998be', class: "project-item-actions" }, h("slot", { key: 'e85d0a59d4cfbc099b8c3740aaaa6b1c7c7bf4cd', name: "actions" }))), h("div", { key: 'c494d7ee66614b801697b4b5423aded99287e10d', class: "project-item-info" }, h("div", { key: 'f1cccf71fab35f07a018ad4a8811e8e1cded2950', class: "project-item-progress" }, h("slot", { key: '68601ab911ba1af9ada2454c9bf4c8230b9d2618', name: "progress" })), h("div", { key: 'f5619aa511b2bf0f4d9a8b8e38bcd4c6d382669f', class: "project-item-status" }, h("slot", { key: '1d7d7d0a9b70a1d3623e61f22d94fa66efbe658b', name: "status" })))));
     }
     static get is() { return "dso-project-item"; }
     static get encapsulation() { return "shadow"; }
@@ -19,6 +19,7 @@ export class ProjectItem {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -33,7 +34,6 @@ export class ProjectItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             }
         };

package/dist/collection/components/renvooi/renvooi.js

@@ -34,6 +34,7 @@ export class Renvooi {
         return {
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "RenvooiValue | RenvooiValue[]",
@@ -54,11 +55,11 @@ export class Renvooi {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
             "mark": {
                 "type": "unknown",
+                "attribute": "mark",
                 "mutable": false,
                 "complexType": {
                     "original": "RenvooiMarkFunction",

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

@@ -1 +1 @@
-{"version":3,"file":"renvooi.js","sourceRoot":"","sources":["../../../../src/components/renvooi/renvooi.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAGtG,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD;;GAEG;AAMH,MAAM,OAAO,OAAO;IALpB;QAgCU,4BAAuB,GAAG,CAAC,IAAY,EAAE,UAAuB,EAAE,EAAE;YAC1E,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAC9D,CAAC,CAAC;KAeH;IAzBC,IAAI,MAAM;QACR,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/D,CAAC;IAMD,MAAM;QACJ,OAAO,CACL,kBACG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACtB,EAAC,aAAa,IACZ,KAAK,EAAE,CAAC,EACR,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,IAAI,qDAAG,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA,EAAA,CAAC,EAChE,mBAAmB,EAAE,IAAI,CAAC,uBAAuB,GACjD,CACH,CAAC,CACD,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Fragment, Prop, h, Event, EventEmitter } from \"@stencil/core\";\r\n\r\nimport { RenvooiMarkFunction, RenvooiMarkItemHighlightEvent, RenvooiValue } from \"./renvooi.interfaces\";\r\nimport { RenvooiRender } from \"./renvooi-render\";\r\n\r\n/**\r\n * Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n */\r\n@Component({\r\n  tag: \"dso-renvooi\",\r\n  styleUrl: \"renvooi.scss\",\r\n  shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n  /**\r\n   * The renvooi value to render.\r\n   */\r\n  @Prop()\r\n  value?: RenvooiValue | RenvooiValue[];\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: RenvooiMarkFunction;\r\n\r\n  /**\r\n   * Emitted when a marked item is highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRenvooiMarkItemHighlight!: EventEmitter<RenvooiMarkItemHighlightEvent>;\r\n\r\n  get values(): RenvooiValue[] {\r\n    if (!this.value) {\r\n      return [];\r\n    }\r\n\r\n    return Array.isArray(this.value) ? this.value : [this.value];\r\n  }\r\n\r\n  private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n    this.dsoRenvooiMarkItemHighlight.emit({ text, elementRef });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.values.map((v) => (\r\n          <RenvooiRender\r\n            value={v}\r\n            mark={this.mark && ((text) => this.mark?.(text, v, this.values))}\r\n            onMarkItemHighlight={this.handleMarkItemHighlight}\r\n          />\r\n        ))}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"renvooi.js","sourceRoot":"","sources":["../../../../src/components/renvooi/renvooi.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAGtG,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD;;GAEG;AAMH,MAAM,OAAO,OAAO;IALpB;QAgCU,4BAAuB,GAAG,CAAC,IAAY,EAAE,UAAuB,EAAE,EAAE;YAC1E,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAC9D,CAAC,CAAC;KAeH;IAzBC,IAAI,MAAM;QACR,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/D,CAAC;IAMD,MAAM;QACJ,OAAO,CACL,kBACG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACtB,EAAC,aAAa,IACZ,KAAK,EAAE,CAAC,EACR,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,IAAI,qDAAG,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA,EAAA,CAAC,EAChE,mBAAmB,EAAE,IAAI,CAAC,uBAAuB,GACjD,CACH,CAAC,CACD,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Fragment, Prop, h, Event, EventEmitter } from \"@stencil/core\";\r\n\r\nimport { RenvooiMarkFunction, RenvooiMarkItemHighlightEvent, RenvooiValue } from \"./renvooi.interfaces\";\r\nimport { RenvooiRender } from \"./renvooi-render\";\r\n\r\n/**\r\n * Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n */\r\n@Component({\r\n  tag: \"dso-renvooi\",\r\n  styleUrl: \"renvooi.scss\",\r\n  shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n  /**\r\n   * The renvooi value to render.\r\n   */\r\n  @Prop()\r\n  value?: RenvooiValue | RenvooiValue[];\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: RenvooiMarkFunction;\r\n\r\n  /**\r\n   * Emitted when a marked item is highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRenvooiMarkItemHighlight!: EventEmitter<RenvooiMarkItemHighlightEvent>;\r\n\r\n  get values(): RenvooiValue[] {\r\n    if (!this.value) {\r\n      return [];\r\n    }\r\n\r\n    return Array.isArray(this.value) ? this.value : [this.value];\r\n  }\r\n\r\n  private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n    this.dsoRenvooiMarkItemHighlight.emit({ text, elementRef });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.values.map((v) => (\r\n          <RenvooiRender\r\n            value={v}\r\n            mark={this.mark && ((text) => this.mark?.(text, v, this.values))}\r\n            onMarkItemHighlight={this.handleMarkItemHighlight}\r\n          />\r\n        ))}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}

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: 'ca9c1b61a8604e516e05bdce5117192964831c90', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'd8465b9289ba9657d50c36cd0d43926e5ac47d3f' })));
+        return (h(Host, { key: 'e6593b115541e2a8d86f82c0ef8e19a3709f41bf', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '5b3263ef3ec5ea3376002bc62316b7af63a5a0ae' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }

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

@@ -84,9 +84,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: 'c05eb5ae95b609ffd925de71c6ef24c46dcbc766', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '7995d59689685e4b66b9fc93e3ca94f79971ae55', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: '18cfb4eb27e7dafc8b2421236dcdaa6bf22bdbe5', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'a32dba02a761a573ff12e80f8f45e3e372bc773a', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: '8beab734494a921c45d519828b15128b09623a38' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'c6f2e56c42e21c91bb8bc63a411dd314bd2652e7' }))));
     }
     static get is() { return "dso-scrollable"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,7 +51,7 @@ export class Selectable {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: '6be928de297ac8c9e25bfee2d06c39aa3325223a' }, h("div", { key: '95816f8f3bf9c78b767e722c101b3de3ebdc02c7', class: "dso-selectable-container" }, h("div", { key: 'e357c54e22edca90183d8d02c5ac18383214c1d3', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: 'cf93d6a44737dc536a79c7d3234d3ac18a0fb32b', 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: 'ccca28238ea3c20c8d85964034e00b08d70b18d2', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'e6141cd94e9c499a4b18e791793e5e1a4daa439d', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '32872781b1a8ad9d1649e88f3725e1eadc775a4b' }, h("slot", { key: '014b75f1bdf48b4f7f171bd32d6717f3a7d52a90', name: "info" })))), h("slot", { key: '9879fc525dcfcf7cac3c6cfd99c142e8fc5adb19', name: "options" })));
+        return (h(Fragment, { key: 'e68ce686f5d6fd57c6acb6a5fe641304d29ed06f' }, h("div", { key: 'd7b628443f8f2d05201387b7fccf0af23b2e1713', class: "dso-selectable-container" }, h("div", { key: 'a7abb03469b370fa5e1b91b5169373ec942f7720', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: '34b87eb1e4c2240546d3149c5c15afcd041d7fa7', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '361ef8a8f27e4da5907a5b47c93a8259013c3cff', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'c8967fc6ccdc2bc254deb2e2935a09ebbd7b6bcf', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'f50d96b7a1022bb1eb62ab158d5e0c702297288e' }, h("slot", { key: '0ada90bcc617aa8b670d316aa796dc01e2763b95', name: "info" })))), h("slot", { key: 'e923228d15e24dd1405208ffe352edbfdd332da8', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {
@@ -78,6 +78,7 @@ export class Selectable {
         return {
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "\"checkbox\" | \"radio\"",
@@ -92,11 +93,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -111,11 +112,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -130,11 +131,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -149,11 +150,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -168,11 +169,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": false
             },
             "describedById": {
                 "type": "string",
+                "attribute": "described-by-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -187,11 +188,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "described-by-id",
                 "reflect": false
             },
             "labelledById": {
                 "type": "string",
+                "attribute": "labelled-by-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -206,11 +207,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "labelled-by-id",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -225,11 +226,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -244,11 +245,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -263,11 +264,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": true
             },
             "indeterminate": {
                 "type": "boolean",
+                "attribute": "indeterminate",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -282,11 +283,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "indeterminate",
                 "reflect": false
             },
             "infoFixed": {
                 "type": "boolean",
+                "attribute": "info-fixed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -301,7 +302,6 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "info-fixed",
                 "reflect": false
             }
         };

package/dist/collection/components/skiplink/skiplink.js

@@ -8,7 +8,7 @@ export class Skiplink {
         return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
     }
     render() {
-        return (h("a", { key: 'c78ada691201b00d93801b8dc232bf9111e8dfa8', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '5e069b50839ca41db1a6a098df3d7c73e1ebdd08', icon: "chevron-right" })));
+        return (h("a", { key: '78c9b83c84af108ad52064712dea6dfd03fcf186', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'e1ed433e9827d63a09140adbc5c25cadf9d34e6c', icon: "chevron-right" })));
     }
     static get is() { return "dso-skiplink"; }
     static get encapsulation() { return "shadow"; }
@@ -26,6 +26,7 @@ export class Skiplink {
         return {
             "to": {
                 "type": "string",
+                "attribute": "to",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -40,11 +41,11 @@ export class Skiplink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "to",
                 "reflect": true
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -59,7 +60,6 @@ export class Skiplink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": true
             }
         };