npm - @dso-toolkit/core - Versions diffs - 69.0.0 → 69.1.0 - Mend

@dso-toolkit/core 69.0.0 → 69.1.0

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

Files changed (65) hide show

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

@@ -30,8 +30,8 @@ export class Pagination {
         (_a = this.responsiveElement) === null || _a === void 0 ? void 0 : _a.getSize().then((size) => (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])));
     }
     render() {
-        var _a, _b, _c;
-        if (!this.totalPages) {
+        var _a;
+        if (!this.totalPages && !this.currentPage) {
             return null;
         }
         if (this.availablePositions === undefined) {
@@ -40,12 +40,7 @@ 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("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" })))))));
+        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 ? "dso-page-hidden" : undefined }, h("a", { href: this.formatHref(currentPage - 1), "aria-label": "Vorige", onClick: (e) => currentPage && this.clickHandler(e, currentPage - 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, "..."))), this.showEllipsisLastWithoutTotal(pages, page, this.totalPages) && (h("li", null, h("span", null, "...")))))), h("li", { class: (this.totalPages && currentPage >= this.totalPages) || !currentPage ? "dso-page-hidden" : undefined }, h("a", { href: this.formatHref(currentPage + 1), "aria-label": "Volgende", onClick: (e) => currentPage && this.clickHandler(e, currentPage + 1) }, h("dso-icon", { icon: "chevron-right" })))))));
     }
     getAvailablePositions(sizePositions) {
         if (sizePositions % 2 === 0) {
@@ -59,17 +54,20 @@ export class Pagination {
         return sizePositions;
     }
     getPages(currentPage, availablePositions, totalPages) {
-        if (totalPages + 2 <= availablePositions) {
-            // + 2 voor de vorige en volgende knop
-            return Array.from({ length: totalPages }, (_value, i) => i + 1);
-        }
-        if (availablePositions === 3) {
-            return [currentPage];
-        }
-        if (availablePositions === 5) {
-            return [1, currentPage, totalPages];
+        if (totalPages) {
+            if (totalPages + 2 <= availablePositions) {
+                // + 2 voor de vorige en volgende knop
+                return Array.from({ length: totalPages }, (_value, i) => i + 1);
+            }
+            if (availablePositions === 3) {
+                return [currentPage];
+            }
+            if (availablePositions === 5) {
+                return [1, currentPage, totalPages];
+            }
+            return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];
         }
-        return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];
+        return this.getPageRangeWithoutTotalPages(currentPage, availablePositions);
     }
     getPageRange(currentPage, availablePositions, totalPages) {
         const range = [];
@@ -110,20 +108,35 @@ export class Pagination {
         if (!totalPages) {
             throw new Error("No totalPages");
         }
-        return (pages.indexOf(page) === 0 &&
-            totalPages > availablePositions - 2 &&
-            !pages.some((p) => p === 2) &&
-            availablePositions >= 7);
+        const isFirstPage = pages.indexOf(page) === 0;
+        const hasManyPages = totalPages > availablePositions - (this.totalPages ? 2 : 6);
+        const isPageTwoMissing = !pages.includes(2);
+        const hasEnoughPositions = availablePositions >= 7;
+        return isFirstPage && hasManyPages && isPageTwoMissing && hasEnoughPositions;
     }
     showEllipsisBeforeLast(pages, page, availablePositions) {
         const totalPages = pages[pages.length - 1];
         if (!totalPages) {
             throw new Error("No totalPages");
         }
-        return (pages.indexOf(page) === pages.length - 1 &&
-            totalPages > availablePositions - 2 &&
-            !pages.some((p) => p === totalPages - 1) &&
-            availablePositions >= 7);
+        const isLastPage = pages.indexOf(page) === pages.length - 1;
+        const hasManyPages = totalPages > availablePositions - (this.totalPages ? 2 : 6);
+        const isSecondLastPageMissing = !pages.includes(totalPages - 1);
+        const hasEnoughPositions = availablePositions >= 7;
+        return isLastPage && hasManyPages && isSecondLastPageMissing && hasEnoughPositions;
+    }
+    showEllipsisLastWithoutTotal(pages, page, totalPages) {
+        return totalPages ? false : pages.at(-1) === page;
+    }
+    getPageRangeWithoutTotalPages(currentPage, availablePositions) {
+        const positionRange = availablePositions >= 9 ? 2 : 0;
+        const start = Math.max(1, currentPage - positionRange);
+        // Creates an array of numbers from `start` to `currentPage + 1`
+        const result = Array.from({ length: currentPage - start + 2 }, (_, i) => start + i);
+        // Adds 1 to the start of the result array if `start` is >= 2
+        if (start >= 2)
+            result.unshift(1);
+        return result;
     }
     static get is() { return "dso-pagination"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +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 <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"]}
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"]}

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

@@ -31,6 +31,9 @@ export class Scrollable {
      * @internal
      */
     async _setScrollState() {
+        if (!this.host.isConnected) {
+            return;
+        }
         const scrollPosition = this.getScrollPosition();
         if (this.scrollPosition !== scrollPosition) {
             this.scrollPosition = scrollPosition;
@@ -81,9 +84,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: 'ff6794620912d49f124f4bac4222fd278dbd6b29', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '532d8178bd3755a10e3d3adbe582c8dfa894347a', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: '70329cb775aa7b06be2e6fcb1e28670f735c2467', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'ff50504d84fad62027ea67742b64ddae2be63f47', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'ae425415162ffd8d13adae1e42c9e4728106d5d5' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'ab03fe8a94df6fd40037376a054c474d75197944' }))));
     }
     static get is() { return "dso-scrollable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scrollable/scrollable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scrollable.js","sourceRoot":"","sources":["../../../../src/components/scrollable/scrollable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1F,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,QAAQ,MAAM,UAAU,CAAC;AAIhC,MAAM,cAAc,GAAG,IAAI,cAAc,CACvC,QAAQ,CACN,CAAC,OAA8B,EAAE,EAAE,CACjC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,WAAC,OAAA,MAAA,6CAA6C,CAAC,KAAK,CAAC,0CAAE,eAAe,EAAE,CAAA,EAAA,CAAC,EACrG,EAAE,CACH,CACF,CAAC;AAEF,SAAS,6CAA6C,CAAC,EACrD,MAAM,GACc;IACpB,IAAI,MAAM,CAAC,UAAU,YAAY,UAAU,IAAI,wBAAwB,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;QAChG,OAAO,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC;IAChC,CAAC;IAED,IAAI,MAAM,CAAC,aAAa,IAAI,wBAAwB,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,CAAC;QAC3E,OAAO,MAAM,CAAC,aAAa,CAAC;IAC9B,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,wBAAwB,CAAC,OAAgB;IAChD,OAAO,OAAO,CAAC,OAAO,KAAK,gBAAgB,CAAC;AAC9C,CAAC;AAOD,MAAM,OAAO,UAAU;IALvB;QAME,wFAAwF;QAChF,qBAAgB,GAAG,IAAI,gBAAgB,CAAC,CAAC,OAAO,EAAE,EAAE,CAC1D,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;;YAC7B,MAAM,OAAO,GAAG,MAAA,MAAM,CAAC,aAAa,0CAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;YAChE,IAAI,OAAO,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBAC1B,OAAO;YACT,CAAC;YAED,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC,CAAC,CACH,CAAC;QAgBF,mBAAc,GAAmB,UAAU,CAAC;~~KAuF7C~~;~~IArFC~~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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce(\r\n (entries: ResizeObserverEntry[]) =>\r\n entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n 50,\r\n ),\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement \| undefined {\r\n if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n return target.parentNode.host;\r\n }\r\n\r\n if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n return target.parentElement;\r\n }\r\n\r\n return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n tag: \"dso-scrollable\",\r\n styleUrl: \"scrollable.scss\",\r\n shadow: true,\r\n})\r\nexport class Scrollable {\r\n // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n private mutationObserver = new MutationObserver((entries) =>\r\n entries.forEach(({ target }) => {\r\n const element = target.parentElement?.closest(\"dso-scrollable\");\r\n if (element !== this.host) {\r\n return;\r\n }\r\n\r\n this._setScrollState();\r\n }),\r\n );\r\n\r\n private scrollContainerDiv?: HTMLDivElement;\r\n\r\n private shadowContainerDiv?: HTMLDivElement;\r\n\r\n @Element()\r\n host!: HTMLDsoScrollableElement;\r\n\r\n /*\r\n Event emitted when the scrollbar has reached top or bottom.\r\n /\r\n @Event()\r\n dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n @State()\r\n scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _setScrollState() {\r\n const scrollPosition = this.getScrollPosition();\r\n if (this.scrollPosition !== scrollPosition) {\r\n this.scrollPosition = scrollPosition;\r\n\r\n if (this.scrollPosition === \"top\" \|\| this.scrollPosition === \"bottom\") {\r\n this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n }\r\n }\r\n }\r\n\r\n private get slottedElements() {\r\n return Array.from(this.host.children);\r\n }\r\n\r\n private getScrollPosition(): ScrollPosition {\r\n if (!this.scrollContainerDiv) {\r\n return \"noScroll\";\r\n }\r\n\r\n const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n if (scrollHeight <= clientHeight) {\r\n return \"noScroll\";\r\n }\r\n\r\n if (scrollTop === 0) {\r\n return \"top\";\r\n }\r\n\r\n if (scrollHeight - scrollTop - clientHeight < 1) {\r\n return \"bottom\";\r\n }\r\n\r\n if (scrollTop > 0) {\r\n return \"middle\";\r\n }\r\n\r\n return \"noScroll\";\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n attributes: false,\r\n childList: false,\r\n subtree: true,\r\n });\r\n\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.observe(this.shadowContainerDiv);\r\n }\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n }\r\n\r\n disconnectedCallback(): void {\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.unobserve(this.shadowContainerDiv);\r\n }\r\n\r\n this.mutationObserver.disconnect();\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n }\r\n\r\n render() {\r\n return (\r\n <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n <div\r\n ref={(el) => (this.scrollContainerDiv = el)}\r\n class={clsx(\"dso-scroll-container\", {\r\n [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n })}\r\n onScroll={() => this._setScrollState()}\r\n >\r\n <slot></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"scrollable.js","sourceRoot":"","sources":["../../../../src/components/scrollable/scrollable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce(\r\n (entries: ResizeObserverEntry[]) =>\r\n entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n 50,\r\n ),\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement \| undefined {\r\n if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n return target.parentNode.host;\r\n }\r\n\r\n if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n return target.parentElement;\r\n }\r\n\r\n return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n tag: \"dso-scrollable\",\r\n styleUrl: \"scrollable.scss\",\r\n shadow: true,\r\n})\r\nexport class Scrollable {\r\n // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n private mutationObserver = new MutationObserver((entries) =>\r\n entries.forEach(({ target }) => {\r\n const element = target.parentElement?.closest(\"dso-scrollable\");\r\n if (element !== this.host) {\r\n return;\r\n }\r\n\r\n this._setScrollState();\r\n }),\r\n );\r\n\r\n private scrollContainerDiv?: HTMLDivElement;\r\n\r\n private shadowContainerDiv?: HTMLDivElement;\r\n\r\n @Element()\r\n host!: HTMLDsoScrollableElement;\r\n\r\n /*\r\n Event emitted when the scrollbar has reached top or bottom.\r\n /\r\n @Event()\r\n dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n @State()\r\n scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _setScrollState() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n const scrollPosition = this.getScrollPosition();\r\n if (this.scrollPosition !== scrollPosition) {\r\n this.scrollPosition = scrollPosition;\r\n\r\n if (this.scrollPosition === \"top\" \|\| this.scrollPosition === \"bottom\") {\r\n this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n }\r\n }\r\n }\r\n\r\n private get slottedElements() {\r\n return Array.from(this.host.children);\r\n }\r\n\r\n private getScrollPosition(): ScrollPosition {\r\n if (!this.scrollContainerDiv) {\r\n return \"noScroll\";\r\n }\r\n\r\n const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n if (scrollHeight <= clientHeight) {\r\n return \"noScroll\";\r\n }\r\n\r\n if (scrollTop === 0) {\r\n return \"top\";\r\n }\r\n\r\n if (scrollHeight - scrollTop - clientHeight < 1) {\r\n return \"bottom\";\r\n }\r\n\r\n if (scrollTop > 0) {\r\n return \"middle\";\r\n }\r\n\r\n return \"noScroll\";\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n attributes: false,\r\n childList: false,\r\n subtree: true,\r\n });\r\n\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.observe(this.shadowContainerDiv);\r\n }\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n }\r\n\r\n disconnectedCallback(): void {\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.unobserve(this.shadowContainerDiv);\r\n }\r\n\r\n this.mutationObserver.disconnect();\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n }\r\n\r\n render() {\r\n return (\r\n <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n <div\r\n ref={(el) => (this.scrollContainerDiv = el)}\r\n class={clsx(\"dso-scroll-container\", {\r\n [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n })}\r\n onScroll={() => this._setScrollState()}\r\n >\r\n <slot></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

package/dist/components/dso-autosuggest.js CHANGED Viewed

@@ -31,12 +31,28 @@ const translations = {
     },
 };
-const autosuggestCss = ".sc-dso-autosuggest-h{display:block;position:relative}.listbox-container.sc-dso-autosuggest{inset-inline:0;inset-block-start:100%;block-size:auto;max-block-size:var(--max-block-size);min-block-size:50px;overflow-y:auto;position:absolute;z-index:200}ul.sc-dso-autosuggest,.autosuggest-progress-box.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-block:0}.autosuggest-progress-box.sc-dso-autosuggest{padding-block:12px;padding-inline:8px}ul.sc-dso-autosuggest{padding-block:8px;padding-inline:0}ul.sc-dso-autosuggest li.sc-dso-autosuggest{padding-block:4px;padding-inline:16px}ul.sc-dso-autosuggest li.sc-dso-autosuggest .suggestion-row.sc-dso-autosuggest{display:flex;justify-content:space-between}li[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#39870c}li[aria-selected=true].sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .type.sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .extra.sc-dso-autosuggest{color:#fff}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest,.extra.sc-dso-autosuggest{color:#666}.type.sc-dso-autosuggest{text-align:end}.extra.sc-dso-autosuggest{font-size:14px;line-height:21px}.extra.sc-dso-autosuggest:not(:first-child){text-align:end}";
+const autosuggestCss = ".sc-dso-autosuggest-h{display:block;position:relative}.listbox-container.sc-dso-autosuggest{inset-inline:0;inset-block-start:100%;block-size:auto;max-block-size:var(--max-block-size);min-block-size:50px;overflow-y:auto;position:absolute;z-index:200}.listbox.sc-dso-autosuggest,.autosuggest-progress-box.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-block:0}.autosuggest-progress-box.sc-dso-autosuggest{padding-block:12px;padding-inline:8px}.listbox.sc-dso-autosuggest{padding-block:8px;padding-inline:0}.listbox.sc-dso-autosuggest .group.sc-dso-autosuggest:not(:first-child) .group-label.sc-dso-autosuggest{border-block-start:1px solid #b2b2b2}.listbox.sc-dso-autosuggest .group-label.sc-dso-autosuggest{color:#275937;font-weight:700;padding-block:4px;margin-inline:16px}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest{padding-block:4px;padding-inline:16px}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest .suggestion-row.sc-dso-autosuggest{display:flex;justify-content:space-between}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active{background-color:#275937}.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active,.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active .type.sc-dso-autosuggest,.listbox.sc-dso-autosuggest .option.sc-dso-autosuggest:active .extra.sc-dso-autosuggest{color:#fff}.option[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#d7e7ce}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest,.extra.sc-dso-autosuggest{color:#666}.type.sc-dso-autosuggest{text-align:end}.extra.sc-dso-autosuggest{font-size:14px;line-height:21px}.extra.sc-dso-autosuggest:not(:first-child){text-align:end}";
 const DsoAutosuggestStyle0 = autosuggestCss;
 const maxSuggestionsViewable = 10;
 const listboxPaddingBlock = 8;
 const listboxBorderWidth = 1;
+const Option = ({ id, mouseEnter, mouseLeave, click, selected, suggestion, ref, markedSuggestion }) => (h("div", { class: "option", role: "option", id: id, onMouseEnter: mouseEnter, onMouseLeave: mouseLeave, onClick: click, "aria-selected": selected, "aria-label": suggestion.value, ref: ref }, h("div", { class: "suggestion-row" }, h("span", { class: "value" }, markedSuggestion.value), markedSuggestion.type ? h("span", { class: "type" }, markedSuggestion.type) : undefined), markedSuggestion.extras &&
+    markedSuggestion.extras.map((markedChunk) => (h("div", { class: "suggestion-row" }, markedChunk.map((extra) => (h("span", { class: "extra" }, extra))))))));
+function isGrouped(suggestions) {
+    return (!!suggestions &&
+        suggestions.length > 0 &&
+        suggestions.every((suggestion) => suggestion !== undefined &&
+            "groupLabel" in suggestion &&
+            suggestion.groupLabel !== undefined &&
+            "suggestions" in suggestion &&
+            suggestion.suggestions.length > 0));
+}
+function isFlat(suggestions) {
+    return (!!suggestions &&
+        suggestions.length > 0 &&
+        suggestions.every((suggestion) => suggestion !== undefined && "value" in suggestion && suggestion.value !== undefined));
+}
 const Autosuggest = /*@__PURE__*/ proxyCustomElement(class Autosuggest extends HTMLElement {
     constructor() {
         super();
@@ -45,11 +61,16 @@ const Autosuggest = /*@__PURE__*/ proxyCustomElement(class Autosuggest extends H
         this.dsoChange = createEvent(this, "dsoChange", 7);
         this.dsoSearch = createEvent(this, "dsoSearch", 7);
         /**
-         * The suggestions for the value of the slotted input element. Optionally a
-         * Suggestion can have a `type` and `item`.
+         * The suggestions for the value of the slotted input element.
+         *
+         * This can be an array of type Suggestion or an Array of type SuggestionGroup.
          *
-         * The `type` is used to style the suggestion. `item` can be use to reference
-         * the original object that was used to create the suggestion.
+         * A suggestionGroup must have a `groupLabel` and `suggestions`.
+         *
+         * A suggestion must have a `value` and can have a `type`, an `item` or `extras`.
+         *
+         * The `type` is used to style the suggestion. `item` can be use to reference the original object that was used to
+         * create the suggestion. `extras` is an array of additional strings to further specify the suggestion.
          *
          * The value should be null when no suggestions have been fetched.
          */
@@ -270,22 +291,38 @@ const Autosuggest = /*@__PURE__*/ proxyCustomElement(class Autosuggest extends H
             return item;
         });
     }
-    selectSuggestion(suggestion) {
+    selectSuggestion(suggestion, group) {
         this.selectedSuggestion = suggestion;
+        this.selectedSuggestionGroup = group;
         this.setAriaActiveDescendant();
     }
     selectFirstSuggestion() {
         if (!this.suggestions) {
             return;
         }
-        this.selectedSuggestion = this.suggestions[0];
+        if (isGrouped(this.suggestions) && this.selectedSuggestionGroup) {
+            this.selectedSuggestion = this.selectedSuggestionGroup.suggestions[0];
+        }
+        else {
+            if (isFlat(this.suggestions)) {
+                this.selectedSuggestion = this.suggestions[0];
+            }
+        }
         this.setAriaActiveDescendant(true);
     }
     selectLastSuggestion() {
         if (!this.suggestions) {
             return;
         }
-        this.selectedSuggestion = this.suggestions[this.suggestions.length - 1];
+        if (isGrouped(this.suggestions) && this.selectedSuggestionGroup) {
+            this.selectedSuggestion =
+                this.selectedSuggestionGroup.suggestions[this.selectedSuggestionGroup.suggestions.length - 1];
+        }
+        else {
+            if (isFlat(this.suggestions)) {
+                this.selectedSuggestion = this.suggestions[this.suggestions.length - 1];
+            }
+        }
         this.setAriaActiveDescendant(true);
     }
     selectNextSuggestion() {
@@ -293,23 +330,91 @@ const Autosuggest = /*@__PURE__*/ proxyCustomElement(class Autosuggest extends H
         if (!this.suggestions) {
             return;
         }
-        const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : -1;
-        this.selectedSuggestion = (_a = this.suggestions[index + 1]) !== null && _a !== void 0 ? _a : this.suggestions[0];
+        if (isGrouped(this.suggestions)) {
+            this.selectNextGroupedSuggestion();
+        }
+        else {
+            const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : -1;
+            this.selectedSuggestion = (_a = this.suggestions[index + 1]) !== null && _a !== void 0 ? _a : this.suggestions[0];
+        }
         this.setAriaActiveDescendant(true);
     }
+    selectNextGroupedSuggestion() {
+        var _a;
+        if (!this.suggestions) {
+            return;
+        }
+        if (this.selectedSuggestionGroup) {
+            const indexInGroup = this.selectedSuggestion
+                ? this.selectedSuggestionGroup.suggestions.indexOf(this.selectedSuggestion)
+                : -1;
+            if (indexInGroup === this.selectedSuggestionGroup.suggestions.length - 1) {
+                // Move to first suggestion in next or first group
+                const groupIndex = this.suggestionGroups.indexOf(this.selectedSuggestionGroup);
+                this.selectedSuggestionGroup = (_a = this.suggestionGroups[groupIndex + 1]) !== null && _a !== void 0 ? _a : this.suggestionGroups[0];
+                this.selectedSuggestion = this.selectedSuggestionGroup.suggestions[0];
+            }
+            else {
+                // Within this group
+                this.selectedSuggestion = this.selectedSuggestionGroup.suggestions[indexInGroup + 1];
+            }
+        }
+        else {
+            this.selectedSuggestionGroup = this.suggestionGroups[0];
+            this.selectedSuggestion = this.selectedSuggestionGroup.suggestions[0];
+        }
+    }
     selectPreviousSuggestion() {
         var _a;
         if (!this.suggestions) {
             return;
         }
-        const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : 0;
-        this.selectedSuggestion = (_a = this.suggestions[index - 1]) !== null && _a !== void 0 ? _a : this.suggestions[this.suggestions.length - 1];
+        if (isGrouped(this.suggestions)) {
+            this.selectPreviousGroupedSuggestion();
+        }
+        else {
+            const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : 0;
+            this.selectedSuggestion = (_a = this.suggestions[index - 1]) !== null && _a !== void 0 ? _a : this.suggestions[this.suggestions.length - 1];
+        }
         this.setAriaActiveDescendant(true);
     }
+    selectPreviousGroupedSuggestion() {
+        var _a;
+        if (!this.suggestions) {
+            return;
+        }
+        if (this.selectedSuggestionGroup) {
+            const indexInGroup = this.selectedSuggestion
+                ? this.selectedSuggestionGroup.suggestions.indexOf(this.selectedSuggestion)
+                : -1;
+            if (indexInGroup === 0) {
+                // Move to last suggestion in previous or last group
+                const groupIndex = this.suggestionGroups.indexOf(this.selectedSuggestionGroup);
+                this.selectedSuggestionGroup =
+                    (_a = this.suggestionGroups[groupIndex - 1]) !== null && _a !== void 0 ? _a : this.suggestionGroups[this.suggestions.length - 1];
+                this.selectedSuggestion =
+                    this.selectedSuggestionGroup.suggestions[this.selectedSuggestionGroup.suggestions.length - 1];
+            }
+            else {
+                // Within this group
+                this.selectedSuggestion = this.selectedSuggestionGroup.suggestions[indexInGroup - 1];
+            }
+        }
+        else {
+            this.selectedSuggestionGroup = this.suggestionGroups[this.suggestions.length - 1];
+            this.selectedSuggestion =
+                this.selectedSuggestionGroup.suggestions[this.selectedSuggestionGroup.suggestions.length - 1];
+        }
+    }
+    get suggestionGroups() {
+        return isGrouped(this.suggestions) ? this.suggestions : [];
+    }
     setAriaActiveDescendant(scroll = false) {
         var _a, _b;
         if (this.selectedSuggestion) {
-            const id = this.listboxItemId(this.selectedSuggestion);
+            const id = this.selectedSuggestionGroup
+                ? this.listboxGroupedItemId(this.selectedSuggestionGroup, this.selectedSuggestion)
+                : this.listboxItemId(this.selectedSuggestion);
             (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", id);
             if (scroll) {
                 (_b = document.getElementById(id)) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: "nearest" });
@@ -321,6 +426,7 @@ const Autosuggest = /*@__PURE__*/ proxyCustomElement(class Autosuggest extends H
         this.showLoading = !this.loadingDelayed;
         this.notFound = false;
         this.selectedSuggestion = undefined;
+        this.selectedSuggestionGroup = undefined;
         (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", "");
     }
     openSuggestions(selectSuggestion) {
@@ -356,10 +462,16 @@ const Autosuggest = /*@__PURE__*/ proxyCustomElement(class Autosuggest extends H
         if (!this.suggestions) {
             return "";
         }
-        return `${this.inputId}-${this.suggestions.indexOf(suggestion) + 1}`;
+        return `${this.inputId}-${isFlat(this.suggestions) && this.suggestions.indexOf(suggestion) + 1}`;
     }
-    getChunkedExtras(extras) {
-        return extras.reduce((resultArray, extra, index) => {
+    listboxGroupedItemId(suggestionGroup, suggestion) {
+        if (!this.suggestions) {
+            return "";
+        }
+        return `${this.inputId}-${this.suggestionGroups.indexOf(suggestionGroup) + 1}-${suggestionGroup.suggestions.indexOf(suggestion) + 1}`;
+    }
+    getMarkedChunkedExtras(extras, suggestion) {
+        const chunkedExtras = extras.reduce((resultArray, extra, index) => {
             var _a;
             const chunkIndex = Math.floor(index / 2);
             if (!resultArray[chunkIndex]) {
@@ -368,21 +480,38 @@ const Autosuggest = /*@__PURE__*/ proxyCustomElement(class Autosuggest extends H
             (_a = resultArray[chunkIndex]) === null || _a === void 0 ? void 0 : _a.push(extra);
             return resultArray;
         }, []);
+        return chunkedExtras.map((chunk, index) => chunk.map((c, i) => this.handleMark(suggestion, c, "extra", index * 2 + i)));
+    }
+    getMarkedSuggestions(suggestion) {
+        return {
+            value: this.handleMark(suggestion, suggestion.value, "value"),
+            type: suggestion.type ? this.handleMark(suggestion, suggestion.type, "type") : undefined,
+            extras: suggestion.extras ? this.getMarkedChunkedExtras(suggestion.extras, suggestion) : undefined,
+        };
     }
     render() {
         this.listboxItems = [];
         const showListbox = this.showSuggestions || this.notFound;
+        const grouped = isGrouped(this.suggestions);
+        const flat = isFlat(this.suggestions);
         if (showListbox && this.input) {
             this.input.setAttribute("aria-controls", this.listboxId);
         }
         else if (this.input) {
             this.input.removeAttribute("aria-controls");
         }
-        return (h(Fragment, null, h("slot", { key: '2ed8694b6cfa86863f0e22b6a7cfa1a1144e673f' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (showListbox && (h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element), style: { "--max-block-size": `${this.listboxContainerMaxBlockSize}px` } }, h("ul", { role: "listbox", "aria-live": "polite", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), tabindex: "0" }, (this.showSuggestions &&
+        return (h(Fragment, null, h("slot", { key: '557d829f9238c3fa9f6082beba78381472115ccd' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (showListbox && (h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element), style: { "--max-block-size": `${this.listboxContainerMaxBlockSize}px` } }, h("div", { class: "listbox", role: "listbox", "aria-live": "polite", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), tabindex: "0" }, (flat &&
+            this.showSuggestions &&
             this.suggestions &&
-            this.suggestions.map((suggestion) => (h("li", { role: "option", id: this.listboxItemId(suggestion), key: suggestion.value, onMouseEnter: () => this.selectSuggestion(suggestion), onMouseLeave: () => this.resetSelectedSuggestion(), onClick: () => this.pickSelectedValue(), "aria-selected": (suggestion === this.selectedSuggestion).toString(), "aria-label": suggestion.value, ref: (li) => li && this.listboxItems.push(li) }, h("div", { class: "suggestion-row" }, h("span", { class: "value" }, this.handleMark(suggestion, suggestion.value, "value")), suggestion.type ? (h("span", { class: "type" }, this.handleMark(suggestion, suggestion.type, "type"))) : undefined), suggestion.extras &&
-                this.getChunkedExtras(suggestion.extras).map((chunk, index) => (h("div", { class: "suggestion-row" }, chunk.map((c, i) => (h("span", { class: "extra" }, this.handleMark(suggestion, c, "extra", index * 2 + i))))))))))) ||
-            (this.notFound && (h("li", null, h("span", { class: "value" }, this.notFoundLabel ||
+            this.suggestions.map((suggestion) => (h(Option, { id: this.listboxItemId(suggestion), mouseEnter: () => this.selectSuggestion(suggestion), mouseLeave: () => this.resetSelectedSuggestion(), click: () => this.pickSelectedValue(), selected: (suggestion === this.selectedSuggestion).toString(), suggestion: suggestion, ref: (element) => element && this.listboxItems.push(element), markedSuggestion: this.getMarkedSuggestions(suggestion) })))) ||
+            (grouped &&
+                this.showSuggestions &&
+                this.suggestions &&
+                this.suggestions.map((suggestionGroup) => {
+                    const groupLabelId = v4();
+                    return (h("div", { role: "group", class: "group", "aria-labelledby": groupLabelId }, h("div", { class: "group-label", role: "presentation", id: groupLabelId }, suggestionGroup.groupLabel), suggestionGroup.suggestions.map((suggestion) => (h(Option, { id: this.listboxGroupedItemId(suggestionGroup, suggestion), mouseEnter: () => this.selectSuggestion(suggestion, suggestionGroup), mouseLeave: () => this.resetSelectedSuggestion(), click: () => this.pickSelectedValue(), selected: (suggestion === this.selectedSuggestion).toString(), suggestion: suggestion, ref: (element) => element && this.listboxItems.push(element), markedSuggestion: this.getMarkedSuggestions(suggestion) })))));
+                })) ||
+            (this.notFound && (h("div", { class: "option" }, h("span", { class: "value" }, this.notFoundLabel ||
                 this.showInputValueNotFound(this.text("notFound", { inputValue: this.inputValue }))))))))))));
     }
     get host() { return this; }
@@ -400,6 +529,7 @@ const Autosuggest = /*@__PURE__*/ proxyCustomElement(class Autosuggest extends H
         "mark": [16],
         "showSuggestions": [32],
         "selectedSuggestion": [32],
+        "selectedSuggestionGroup": [32],
         "notFound": [32],
         "showLoading": [32],
         "listItemBlockSize": [32],