genesys-spark-components 3.2.0 → 3.3.0

package/dist/esm/gux-form-field-color.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h, g as getElement } from './index-76794476.js';
 import { O as OnMutation } from './on-mutation-2e96b1b9.js';
 import { o as onDisabledChange, a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-label-ac49a8be.js';
 import { h as hasErrorSlot, G as GuxFormFieldError, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.servce-971609e2.js';
 import './random-html-id-8e3f658c.js';

package/dist/esm/gux-form-field-input-clear-button.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-76794476.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
-import { b as buildI18nForComponent } from './index-eb3999c5.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
+import { b as buildI18nForComponent } from './index-5bfcdeb1.js';
 import './get-closest-element-1597503c.js';
 
 const clear = "Clear";

package/dist/esm/gux-form-field-legacy.entry.js

@@ -4,7 +4,7 @@ import { r as randomHTMLId } from './random-html-id-8e3f658c.js';
 import { l as logError } from './log-error-b1a1a086.js';
 import { a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 
 const guxFormFieldCss = "gux-form-field-legacy{display:block;color:#2e394c}gux-form-field-legacy .gux-label-and-input-and-error-container{margin:16px 0}gux-form-field-legacy .gux-label-and-input-and-error-container label{font-size:12px;font-weight:bold;line-height:20px}gux-form-field-legacy .gux-label-and-input-and-error-container input,gux-form-field-legacy .gux-label-and-input-and-error-container select{width:100%;font-size:12px}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-container input{overflow:hidden;text-overflow:ellipsis}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-error .gux-input-container{border-color:#ea0b0b}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-error textarea{border-color:#ea0b0b}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-error .gux-input-color-main-element{border-color:#ea0b0b}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-and-error-container{flex-grow:1}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside{display:flex;flex-direction:row}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside .gux-label-container{position:relative;top:7px;width:fit-content;min-width:45px;margin-right:8px}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-range,gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-select,gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-text-like,gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-search{flex:1 1 auto}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-screenreader label{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}gux-form-field-legacy .gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}gux-form-field-legacy .gux-error{display:none;margin:4px 0}gux-form-field-legacy .gux-error.gux-show{display:block}";
 

package/dist/esm/gux-form-field-number.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, h, g as getElement } from './index-76794476.js';
-import { b as buildI18nForComponent } from './index-eb3999c5.js';
+import { b as buildI18nForComponent } from './index-5bfcdeb1.js';
 import { O as OnMutation } from './on-mutation-2e96b1b9.js';
 import { o as onDisabledChange, a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 import { s as setInputValue } from './set-input-value-5adeaccc.js';
 import { s as simulateNativeEvent } from './simulate-native-event-ac69961f.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-label-ac49a8be.js';

package/dist/esm/gux-form-field-radio.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-76
 import { O as OnMutation } from './on-mutation-2e96b1b9.js';
 import { o as onDisabledChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 import { h as hasErrorSlot, G as GuxFormFieldError, v as validateFormIds } from './gux-form-field.servce-971609e2.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-b1a1a086.js';

package/dist/esm/gux-form-field-range.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-76
 import { O as OnMutation } from './on-mutation-2e96b1b9.js';
 import { o as onDisabledChange, a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 import { a as GuxFormFieldContainer, G as GuxFormFieldLabel } from './gux-form-field-label-ac49a8be.js';
 import { h as hasErrorSlot, G as GuxFormFieldError, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.servce-971609e2.js';
 import './random-html-id-8e3f658c.js';

package/dist/esm/gux-form-field-search.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h, g as getElement } from './index-76794476.js';
 import { O as OnMutation } from './on-mutation-2e96b1b9.js';
 import { o as onDisabledChange, a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-label-ac49a8be.js';
 import { h as hasErrorSlot, c as clearInput, G as GuxFormFieldError, a as hasContent, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.servce-971609e2.js';
 import './random-html-id-8e3f658c.js';

package/dist/esm/gux-form-field-select.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h, g as getElement } from './index-76794476.js';
 import { O as OnMutation } from './on-mutation-2e96b1b9.js';
 import { o as onDisabledChange, a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-label-ac49a8be.js';
 import { h as hasErrorSlot, G as GuxFormFieldError, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.servce-971609e2.js';
 import './random-html-id-8e3f658c.js';

package/dist/esm/gux-form-field-text-like.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h, g as getElement } from './index-76794476.js';
 import { O as OnMutation } from './on-mutation-2e96b1b9.js';
 import { o as onDisabledChange, a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-label-ac49a8be.js';
 import { h as hasErrorSlot, c as clearInput, G as GuxFormFieldError, a as hasContent, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.servce-971609e2.js';
 import './random-html-id-8e3f658c.js';

package/dist/esm/gux-form-field-textarea.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h, g as getElement } from './index-76794476.js';
 import { O as OnMutation } from './on-mutation-2e96b1b9.js';
 import { o as onDisabledChange, a as onRequiredChange } from './on-attribute-change-2b01c315.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-label-ac49a8be.js';
 import { h as hasErrorSlot, G as GuxFormFieldError, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.servce-971609e2.js';
 import './random-html-id-8e3f658c.js';

package/dist/esm/gux-icon.entry.js

@@ -1,5 +1,5 @@
 import { a as getAssetPath, r as registerInstance, h, g as getElement } from './index-76794476.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 import { l as logError } from './log-error-b1a1a086.js';
 
 const iconNameMap = {

package/dist/esm/gux-input-checkbox_7.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-76794476.js';
-import { b as buildI18nForComponent } from './index-eb3999c5.js';
+import { b as buildI18nForComponent } from './index-5bfcdeb1.js';
 import { r as randomHTMLId } from './random-html-id-8e3f658c.js';
 import { o as onDisabledChange } from './on-attribute-change-2b01c315.js';
 import { s as setInputValue } from './set-input-value-5adeaccc.js';

package/dist/esm/gux-input-search.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-76794476.js';
-import { b as buildI18nForComponent } from './index-eb3999c5.js';
+import { b as buildI18nForComponent } from './index-5bfcdeb1.js';
 import { s as setInputValue } from './set-input-value-5adeaccc.js';
 import { o as onDisabledChange } from './on-attribute-change-2b01c315.js';
 import './get-closest-element-1597503c.js';

package/dist/esm/gux-input-text-like.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-76794476.js';
-import { b as buildI18nForComponent } from './index-eb3999c5.js';
+import { b as buildI18nForComponent } from './index-5bfcdeb1.js';
 import { s as setInputValue } from './set-input-value-5adeaccc.js';
 import { o as onDisabledChange } from './on-attribute-change-2b01c315.js';
 import './get-closest-element-1597503c.js';

package/dist/esm/gux-list-item-legacy_2.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-76794476.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 
 const guxListItemCss = ":host:focus .gux-list-item,:host:active .gux-list-item,:host:hover:not([disabled]) .gux-list-item{color:#fdfdfd;background:#2a60c8}:host(:focus) .gux-list-item,:host(:active) .gux-list-item,:host(:hover:not([disabled])) .gux-list-item{color:#fdfdfd;background:#2a60c8}:host([disabled]) .gux-list-item{pointer-events:none;cursor:default;opacity:0.5}.gux-list-item{display:flex;height:max-content;padding:0 16px;line-height:32px;word-wrap:break-word;cursor:pointer}.gux-list-item .gux-text{width:100%}";
 

package/dist/esm/gux-list.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-76794476.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 
 const validFocusableItems = ['gux-list-item'];
 function getRootChildren(root) {

package/dist/esm/gux-modal.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-76794476.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 
 const guxModalCss = ":host .gux-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;color:#2e394c;background:rgba(32, 41, 55, 0.8)}:host .gux-modal .gux-modal-container{box-shadow:0 8px 24px rgba(32, 41, 55, 0.4);position:relative;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:40px;background:#fdfdfd;border:1px solid #b4bccb;border-radius:4px}:host .gux-modal .gux-modal-container.gux-small{width:416px;max-height:min(368px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-medium{width:672px;max-height:min(640px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-large{width:940px;max-height:min(640px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-dynamic{max-width:calc(100vw - 2 * 24px);max-height:calc(100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-dynamic .gux-modal-content{max-height:none}:host .gux-modal .gux-modal-container .gux-modal-header{padding-bottom:24px;margin:0;font-family:Roboto, sans-serif;font-weight:400;font-weight:300;font-size:24px;line-height:32px}:host .gux-modal .gux-modal-container .gux-modal-content{max-height:432px;margin:0 8px 24px;overflow-y:auto}:host .gux-modal .gux-modal-container .gux-modal-content.gux-no-buttons{margin-bottom:0}:host .gux-modal .gux-modal-container .gux-button-footer{display:flex;justify-content:space-between}:host .gux-modal .gux-modal-container .gux-button-footer .gux-left-align-buttons gux-button{padding-right:5px}:host .gux-modal .gux-modal-container .gux-button-footer .gux-right-align-buttons gux-button{padding-left:5px}@media (max-width: 416px){:host .gux-modal .gux-modal-container.gux-small,:host .gux-modal .gux-modal-container.gux-medium,:host .gux-modal .gux-modal-container.gux-large{width:100%;height:100%}}";
 

package/dist/esm/gux-notification-toast.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-76794476.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 
 const guxNotificationToastCss = ":host{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;width:294px;padding:16px 8px 16px 16px;margin-bottom:4px;color:#2e394c;background:#f6f7f9;border:1px solid #b4bccb;border-color:#b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-icon{flex:0 1 auto;align-self:auto;order:0;margin:4px}.gux-icon ::slotted(gux-icon){width:24px !important;height:24px !important}.gux-icon.gux-alert{color:#ea0b0b}.gux-icon.gux-warning{color:#ffae00}.gux-icon.gux-positive{color:#3c8527}.gux-icon.gux-neutral{color:#203b73}.gux-content{display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;align-self:auto;justify-content:flex-start;order:0}.gux-content .gux-title{flex:1 1 auto;align-self:auto;order:0;max-height:48px;margin:0 12px 0 8px;overflow:hidden;font-size:14px;line-height:20px;color:#2e394c;text-overflow:ellipsis}.gux-content .gux-message{flex:1 1 auto;align-self:auto;order:0;max-height:24px;margin:0 12px 0 8px;overflow:hidden;line-height:24px;text-overflow:ellipsis}";
 

package/dist/esm/gux-page-loading-spinner.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-76794476.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 
 const guxPageLoadingSpinnerCss = ":host{display:flex}.gux-spinner{margin:auto}";
 

package/dist/esm/gux-pagination-beta.entry.js

@@ -0,0 +1,111 @@
+import { r as registerInstance, c as createEvent, d as readTask, h, g as getElement } from './index-76794476.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
+
+const guxPaginationBetaCss = ":host{display:block;border-top:1px solid #e2e6ee}.gux-pagination-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:space-between;height:40px;margin:12px 12px 0 12px}.gux-pagination-container .gux-pagination-info{display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;align-self:auto;justify-content:flex-start;order:0}.gux-pagination-container .gux-pagination-info>*{flex:0 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-change{flex:1 1 auto;align-self:auto;order:0;margin-left:24px}.gux-pagination-container .gux-pagination-change:first-child{margin-left:0}";
+
+/**
+ * The minimum size in px at which the advanced layout will display.
+ * Below this size we switch to the simple layout.
+ * This was chosen based on the width required for 3-digit page numbers, so
+ * page counts that go into 4 digits could overflow at small sizes.
+ */
+const MIN_ADVANCED_SIZE = 810;
+const GuxPaginationBeta = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.guxpaginationchange = createEvent(this, "guxpaginationchange", 7);
+    /**
+     * The pagination component can have different layouts to suit the available space
+     */
+    this.layout = 'advanced';
+    /**
+     * The currently select page. Changes are watched by the component.
+     */
+    this.currentPage = 1;
+    /**
+     * The total number of items in the data set. Used to calculate total page count
+     */
+    this.totalItems = 0;
+    /**
+     * The max number of items on a page. Used to calculate total page count
+     */
+    this.itemsPerPage = 25;
+  }
+  setPage(page) {
+    if (page < 0) {
+      if (this.totalPages > 0) {
+        this.setPage(1);
+      }
+      else {
+        this.setPage(0);
+      }
+      return;
+    }
+    const totalPages = this.calculateTotalPages(this.totalItems, this.itemsPerPage);
+    if (page > totalPages) {
+      this.setPage(totalPages);
+      return;
+    }
+    this.currentPage = page;
+    this.guxpaginationchange.emit({
+      currentPage: this.currentPage,
+      itemsPerPage: this.itemsPerPage
+    });
+  }
+  handleInternalitemsperpagechange(event) {
+    this.itemsPerPage = event.detail;
+    this.setPage(1);
+  }
+  handleInternalcurrentpagechange(event) {
+    this.setPage(event.detail);
+  }
+  calculateTotalPages(totalItems, itemsPerPage) {
+    return Math.ceil(totalItems / itemsPerPage);
+  }
+  calculateCurrentPage(totalPages, currentPage) {
+    const minCurrentPage = totalPages > 0 ? 1 : 0;
+    return Math.max(minCurrentPage, Math.min(currentPage, totalPages));
+  }
+  checkPaginationContainerWidthForLayout() {
+    readTask(() => {
+      const el = this.root.shadowRoot.querySelector('.gux-pagination-container');
+      const paginationContainerWidth = el.clientWidth;
+      if (paginationContainerWidth < MIN_ADVANCED_SIZE) {
+        this.displayedLayout = 'simple';
+      }
+      else {
+        this.displayedLayout = this.layout;
+      }
+    });
+  }
+  componentWillLoad() {
+    trackComponent(this.root, { variant: this.layout });
+  }
+  componentWillRender() {
+    this.totalPages = this.calculateTotalPages(this.totalItems, this.itemsPerPage);
+    this.currentPage = this.calculateCurrentPage(this.totalPages, this.currentPage);
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver) {
+      this.resizeObserver.unobserve(this.root.shadowRoot.querySelector('.gux-pagination-container'));
+    }
+  }
+  componentDidLoad() {
+    if (!this.resizeObserver && window.ResizeObserver) {
+      this.resizeObserver = new ResizeObserver(() => this.checkPaginationContainerWidthForLayout());
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.observe(this.root.shadowRoot.querySelector('.gux-pagination-container'));
+    }
+    setTimeout(() => {
+      this.checkPaginationContainerWidthForLayout();
+    }, 500);
+  }
+  render() {
+    return (h("div", { class: "gux-pagination-container" }, h("div", { class: "gux-pagination-info" }, h("gux-pagination-item-counts-beta", { "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage }), this.displayedLayout === 'advanced' && (h("gux-pagination-items-per-page-beta", { "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }))), h("div", { class: "gux-pagination-change" }, h("gux-pagination-buttons-beta", { layout: this.displayedLayout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
+  }
+  get root() { return getElement(this); }
+};
+GuxPaginationBeta.style = guxPaginationBetaCss;
+
+export { GuxPaginationBeta as gux_pagination_beta };

package/dist/esm/gux-pagination-buttons-beta_3.entry.js

@@ -0,0 +1,252 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-76794476.js';
+import { b as buildI18nForComponent } from './index-5bfcdeb1.js';
+import './get-closest-element-1597503c.js';
+
+const page = "Page";
+const totalPages = " of {totalPages, number}";
+const first = "First";
+const previous = "Previous";
+const next = "Next";
+const last = "Last";
+const pageInputLabel = "Page {currentPage, number} of {totalPages, number}";
+const paginationResources$2 = {
+	page: page,
+	totalPages: totalPages,
+	first: first,
+	previous: previous,
+	next: next,
+	last: last,
+	pageInputLabel: pageInputLabel
+};
+
+class GuxPaginationButtonsService {
+  static getPageList(currentPage, totalPages) {
+    if (totalPages <= 10) {
+      return [...Array(totalPages).keys()].map(index => {
+        const pageNumber = index + 1;
+        return {
+          pageNumber,
+          display: String(pageNumber),
+          current: pageNumber === currentPage
+        };
+      });
+    }
+    if (currentPage <= 5) {
+      const startPageList = [...Array(6).keys()].map(index => {
+        const pageNumber = index + 1;
+        return {
+          pageNumber,
+          display: String(pageNumber),
+          current: pageNumber === currentPage
+        };
+      });
+      return [
+        ...startPageList,
+        {
+          pageNumber: 7,
+          display: '...',
+          current: false
+        },
+        {
+          pageNumber: totalPages,
+          display: String(totalPages),
+          current: false
+        }
+      ];
+    }
+    if (currentPage > totalPages - 5) {
+      const endPageList = [...Array(6).keys()].map(index => {
+        const pageNumber = index + totalPages - 5;
+        return {
+          pageNumber,
+          display: String(pageNumber),
+          current: pageNumber === currentPage
+        };
+      });
+      return [
+        {
+          pageNumber: 1,
+          display: '1',
+          current: false
+        },
+        {
+          pageNumber: totalPages - 6,
+          display: '...',
+          current: false
+        },
+        ...endPageList
+      ];
+    }
+    const middlePageList = [...Array(5).keys()].map(index => {
+      const pageNumber = index + currentPage - 2;
+      return {
+        pageNumber,
+        display: String(pageNumber),
+        current: pageNumber === currentPage
+      };
+    });
+    return [
+      {
+        pageNumber: 1,
+        display: '1',
+        current: false
+      },
+      {
+        pageNumber: currentPage - 3,
+        display: '...',
+        current: false
+      },
+      ...middlePageList,
+      {
+        pageNumber: currentPage + 3,
+        display: '...',
+        current: false
+      },
+      {
+        pageNumber: totalPages,
+        display: String(totalPages),
+        current: false
+      }
+    ];
+  }
+}
+
+const guxPaginationButtonsBetaCss = "gux-pagination-buttons-beta{color:#2e394c}gux-pagination-buttons-beta .gux-pagination-buttons-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:flex-end}gux-pagination-buttons-beta .gux-pagination-buttons-container>div{flex:0 1 auto;align-self:auto;order:0}gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-group{white-space:nowrap}gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-group gux-button-slot-beta:not(:first-of-type){margin-left:8px}gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-input-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center;margin:0 16px}gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-input-container>div{flex:0 1 auto;align-self:auto;order:0;white-space:nowrap}gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-input-container .gux-pagination-buttons-input{width:60px;margin:0 8px}gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-input-container .gux-pagination-buttons-input input{width:inherit;text-align:center}gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center}gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current,gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target{height:32px;padding:0 8px;margin:0;background:inherit;border:none}gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current:focus-visible,gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target:focus-visible{border:3px solid #aac9ff;border-radius:5px;outline:none}gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current{font-weight:600}gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target{color:#2a60c8;cursor:pointer}gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-spacer{width:8px}";
+
+const GuxPaginationButtonsBeta = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.internalcurrentpagechange = createEvent(this, "internalcurrentpagechange", 3);
+    this.layout = 'advanced';
+  }
+  get onFirstPage() {
+    return this.currentPage <= 1;
+  }
+  get onLastPage() {
+    return this.currentPage >= this.totalPages;
+  }
+  handleClickFirst() {
+    this.internalcurrentpagechange.emit(1);
+  }
+  handleClickPrevious() {
+    this.internalcurrentpagechange.emit(this.currentPage - 1);
+  }
+  handleClickNext() {
+    this.internalcurrentpagechange.emit(this.currentPage + 1);
+  }
+  handleClickLast() {
+    this.internalcurrentpagechange.emit(this.totalPages);
+  }
+  handleClickPage(pageNumber) {
+    this.internalcurrentpagechange.emit(pageNumber);
+  }
+  getPageListEnteries(currentPage, totalPages) {
+    return GuxPaginationButtonsService.getPageList(currentPage, totalPages).reduce((acc, cv) => {
+      if (cv.current) {
+        return acc.concat((h("button", { class: "gux-pagination-buttons-list-current" }, cv.display)));
+      }
+      return acc.concat((h("button", { class: "gux-pagination-buttons-list-target", onClick: () => this.handleClickPage(cv.pageNumber) }, cv.display)));
+    }, []);
+  }
+  getSmallPagePicker() {
+    return (h("div", { class: 'gux-pagination-buttons-spacer' }));
+  }
+  getFullPagePicker() {
+    return (h("div", { class: "gux-pagination-buttons-list-container" }, this.getPageListEnteries(this.currentPage, this.totalPages)));
+  }
+  getPagePicker(layout) {
+    if (layout === 'simple') {
+      return this.getSmallPagePicker();
+    }
+    return this.getFullPagePicker();
+  }
+  async componentWillLoad() {
+    this.i18n = await buildI18nForComponent(this.root, paginationResources$2);
+  }
+  render() {
+    return (h("div", { class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { class: "gux-pagination-buttons-group" }, h("gux-button-slot-beta", { accent: "secondary" }, h("button", { title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-double-left" }))), h("gux-button-slot-beta", { accent: "secondary" }, h("button", { title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-left" })))), this.getPagePicker(this.layout), h("div", { class: "gux-pagination-buttons-group" }, h("gux-button-slot-beta", { accent: "secondary" }, h("button", { title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))), h("gux-button-slot-beta", { accent: "secondary" }, h("button", { title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-double-right" }))))));
+  }
+  get root() { return getElement(this); }
+};
+GuxPaginationButtonsBeta.style = guxPaginationButtonsBetaCss;
+
+const itemCountDisplay = "{firstItem, number} - {lastItem, number}";
+const totalItems = " of {totalItems, number}";
+const paginationResources$1 = {
+	itemCountDisplay: itemCountDisplay,
+	totalItems: totalItems
+};
+
+const guxPaginationItemCountsBetaCss = "gux-pagination-item-counts-beta{color:#2e394c}gux-pagination-item-counts-beta .gux-pagination-item-counts-container{white-space:nowrap}gux-pagination-item-counts-beta .gux-pagination-item-counts-container .gux-pagination-item-counts-range{font-weight:bold}";
+
+const GuxPaginationItemCountsBeta = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.totalItems = 0;
+    this.currentPage = 0;
+    this.itemsPerPage = 25;
+  }
+  get firstItem() {
+    if (this.totalItems < 1) {
+      return 0;
+    }
+    return (this.currentPage - 1) * this.itemsPerPage + 1;
+  }
+  get lastItem() {
+    if (this.totalItems < 1) {
+      return 0;
+    }
+    return Math.min(this.currentPage * this.itemsPerPage, this.totalItems);
+  }
+  async componentWillLoad() {
+    this.i18n = await buildI18nForComponent(this.root, paginationResources$1);
+  }
+  getPaginationItemCountsRange() {
+    if (this.totalItems) {
+      return (h("span", null, this.i18n('totalItems', { totalItems: this.totalItems })));
+    }
+  }
+  render() {
+    return (h("div", { class: "gux-pagination-item-counts-container" }, h("span", { class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
+      firstItem: this.firstItem,
+      lastItem: this.lastItem
+    })), this.getPaginationItemCountsRange()));
+  }
+  get root() { return getElement(this); }
+};
+GuxPaginationItemCountsBeta.style = guxPaginationItemCountsBetaCss;
+
+const perPage = "per page";
+const itemsPerPage = "Items per page";
+const paginationResources = {
+	perPage: perPage,
+	itemsPerPage: itemsPerPage
+};
+
+const guxPaginationItemsPerPageBetaCss = "gux-pagination-items-per-page-beta{color:#2e394c}gux-pagination-items-per-page-beta .gux-pagination-items-per-page-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center}gux-pagination-items-per-page-beta .gux-pagination-items-per-page-container>div{flex:0 1 auto;align-self:auto;order:0;white-space:nowrap}gux-pagination-items-per-page-beta .gux-pagination-items-per-page-container .gux-pagination-items-per-page-picker{margin:0 8px 0 16px}gux-pagination-items-per-page-beta .gux-pagination-items-per-page-container gux-dropdown div.gux-dropdown .gux-options.gux-opened{bottom:100%;display:flex;flex-direction:column-reverse}";
+
+const GuxPaginationItemsPerPageBeta = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.internalitemsperpagechange = createEvent(this, "internalitemsperpagechange", 3);
+    this.itemsPerPage = 25;
+  }
+  handleChange(event) {
+    event.stopPropagation();
+    const newItemsPerPageValue = parseInt(this.dropdownElement.value, 10);
+    this.internalitemsperpagechange.emit(newItemsPerPageValue);
+  }
+  async componentWillLoad() {
+    this.i18n = await buildI18nForComponent(this.root, paginationResources);
+  }
+  getDropdown() {
+    return (h("gux-dropdown", { ref: el => (this.dropdownElement = el), value: `${this.itemsPerPage}` }, h("gux-listbox", { "aria-label": this.i18n('itemsPerPage') }, h("gux-option", { value: "25" }, "25"), h("gux-option", { value: "50" }, "50"), h("gux-option", { value: "75" }, "75"), h("gux-option", { value: "100" }, "100"))));
+  }
+  render() {
+    return (h("div", { class: "gux-pagination-items-per-page-container" }, h("div", { class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", null, this.i18n('perPage'))));
+  }
+  get root() { return getElement(this); }
+};
+GuxPaginationItemsPerPageBeta.style = guxPaginationItemsPerPageBetaCss;
+
+export { GuxPaginationButtonsBeta as gux_pagination_buttons_beta, GuxPaginationItemCountsBeta as gux_pagination_item_counts_beta, GuxPaginationItemsPerPageBeta as gux_pagination_items_per_page_beta };

package/dist/esm/gux-pagination-buttons_3.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-76794476.js';
-import { b as buildI18nForComponent } from './index-eb3999c5.js';
+import { b as buildI18nForComponent } from './index-5bfcdeb1.js';
 import './get-closest-element-1597503c.js';
 
 const page = "Page";

package/dist/esm/gux-pagination-cursor.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-76794476.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
-import { b as buildI18nForComponent } from './index-eb3999c5.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
+import { b as buildI18nForComponent } from './index-5bfcdeb1.js';
 import './get-closest-element-1597503c.js';
 
 const previous = "Previous";

package/dist/esm/gux-pagination.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-76794476.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 
 const guxPaginationCss = ":host{display:block;border-top:1px solid #e2e6ee}.gux-pagination-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:space-between;height:32px;margin-top:12px}.gux-pagination-container .gux-pagination-info{display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;align-self:auto;justify-content:flex-start;order:0}.gux-pagination-container .gux-pagination-info>*{flex:0 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-change{flex:1 1 auto;align-self:auto;order:0;margin-left:16px}.gux-pagination-container .gux-pagination-change:first-child{margin-left:0}";
 

package/dist/esm/gux-panel-frame-legacy.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-76794476.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 
 function hasSlot(element, slotName) {
   return Boolean(element.querySelector(`[slot=${slotName}]`));

package/dist/esm/gux-popover-list.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-76794476.js';
 import { O as OnClickOutside } from './on-click-outside-ce30de20.js';
 import { b as onHiddenChange } from './on-attribute-change-2b01c315.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 import { c as createPopper } from './popper-93ecb064.js';
 
 const guxPopoverListCss = ":host{color:#2e394c}.gux-popover-wrapper{z-index:2;display:inline-block;padding:8px 0;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-popover-wrapper .gux-arrow,.gux-popover-wrapper .gux-arrow::before{position:absolute;width:10px;height:10px;background:inherit}.gux-popover-wrapper .gux-arrow{visibility:hidden}.gux-popover-wrapper .gux-arrow::before{visibility:visible;content:'';transform:rotate(45deg)}.gux-popover-wrapper[data-popper-placement='bottom'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='bottom-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='bottom-end'] .gux-arrow{top:-5px}.gux-popover-wrapper[data-popper-placement='bottom'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='bottom-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='bottom-end'] .gux-arrow::before{border-top:1px solid #b4bccb;border-left:1px solid #b4bccb}.gux-popover-wrapper[data-popper-placement='top'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='top-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='top-end'] .gux-arrow{bottom:-5px}.gux-popover-wrapper[data-popper-placement='top'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='top-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='top-end'] .gux-arrow::before{border-right:1px solid #b4bccb;border-bottom:1px solid #b4bccb}.gux-popover-wrapper[data-popper-placement='left'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='left-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='left-end'] .gux-arrow{right:-5px}.gux-popover-wrapper[data-popper-placement='left'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='left-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='left-end'] .gux-arrow::before{border-top:1px solid #b4bccb;border-right:1px solid #b4bccb}.gux-popover-wrapper[data-popper-placement='right'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='right-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='right-end'] .gux-arrow{left:-5px}.gux-popover-wrapper[data-popper-placement='right'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='right-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='right-end'] .gux-arrow::before{border-bottom:1px solid #b4bccb;border-left:1px solid #b4bccb}";

package/dist/esm/gux-popover.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-76794476.js';
 import { O as OnClickOutside } from './on-click-outside-ce30de20.js';
 import { b as onHiddenChange } from './on-attribute-change-2b01c315.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 import { c as createPopper } from './popper-93ecb064.js';
 
 const guxPopoverCss = ":host{color:#2e394c}.gux-popover-wrapper{z-index:2;display:inline-block;padding:16px;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-popover-wrapper .gux-arrow,.gux-popover-wrapper .gux-arrow::before{position:absolute;width:10px;height:10px;background:inherit}.gux-popover-wrapper .gux-arrow{visibility:hidden}.gux-popover-wrapper .gux-arrow::before{visibility:visible;content:'';transform:rotate(45deg)}.gux-popover-wrapper[data-popper-placement='bottom'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='bottom-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='bottom-end'] .gux-arrow{top:-5px}.gux-popover-wrapper[data-popper-placement='bottom'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='bottom-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='bottom-end'] .gux-arrow::before{border-top:1px solid #b4bccb;border-left:1px solid #b4bccb}.gux-popover-wrapper[data-popper-placement='top'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='top-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='top-end'] .gux-arrow{bottom:-5px}.gux-popover-wrapper[data-popper-placement='top'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='top-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='top-end'] .gux-arrow::before{border-right:1px solid #b4bccb;border-bottom:1px solid #b4bccb}.gux-popover-wrapper[data-popper-placement='left'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='left-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='left-end'] .gux-arrow{right:-5px}.gux-popover-wrapper[data-popper-placement='left'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='left-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='left-end'] .gux-arrow::before{border-top:1px solid #b4bccb;border-right:1px solid #b4bccb}.gux-popover-wrapper[data-popper-placement='right'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='right-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='right-end'] .gux-arrow{left:-5px}.gux-popover-wrapper[data-popper-placement='right'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='right-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='right-end'] .gux-arrow::before{border-bottom:1px solid #b4bccb;border-left:1px solid #b4bccb}";

package/dist/esm/gux-radial-loading.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-76794476.js';
-import { b as buildI18nForComponent } from './index-eb3999c5.js';
-import { t as trackComponent } from './usage-tracking-27c65ae8.js';
+import { b as buildI18nForComponent } from './index-5bfcdeb1.js';
+import { t as trackComponent } from './usage-tracking-51697c05.js';
 import './get-closest-element-1597503c.js';
 
 const loading = "Loading";