genesys-spark-components 4.0.0-beta.3 → 4.0.0-beta.30

package/dist/cjs/gux-listbox-multi.cjs.entry.js

@@ -7,7 +7,7 @@ const guxListbox_service = require('./gux-listbox.service-93102b5b.js');
 const index$1 = require('./index-9bbde1aa.js');
 const whenEventIsFrom = require('./when-event-is-from-69b5ca13.js');
 const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 const afterNextRender = require('./after-next-render-a09f528a.js');
 require('./get-closest-element-ab4b2eee.js');
 
@@ -20,7 +20,7 @@ const translationResources = {
 	loading: loading
 };
 
-const guxListboxMultiCss = ":host{box-sizing:border-box;display:block;max-height:20rem;padding:8px 0;margin:0;overflow-y:auto;color:#2e394c;background:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;outline:none}:host(:focus-visible){outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-message-container{display:flex;flex-direction:column;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center}.gux-message-container .gux-no-matches{box-sizing:border-box;height:32px;padding:8px 16px;color:#2e394c}";
+const guxListboxMultiCss = ":host{box-sizing:border-box;display:block;max-height:20rem;padding:var(--gse-ui-menu-padding);overflow-y:auto;background:var(--gse-ui-menu-backgroundColor);border:var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);border-radius:var(--gse-ui-menu-borderRadius);outline:none;box-shadow:var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);scrollbar-color:var(--gse-ui-menu-scrollbar-foregroundColor)}:host(:focus-visible){outline:var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-message-container{display:flex;flex-direction:column;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center}.gux-message-container .gux-no-matches{box-sizing:border-box;height:var(--gse-ui-menu-option-height);font-family:var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontFamily);font-weight:var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontWeight);line-height:var(--gse-ui-dropdown-menu-emptyState-subheader-text-lineHeight);font-size:var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontSize);color:var(--gse-ui-dropdown-menu-emptyState-subheader-foregroundColor)}";
 
 const GuxListboxMulti = class {
   constructor(hostRef) {
@@ -31,6 +31,7 @@ const GuxListboxMulti = class {
     this.filter = '';
     this.textInput = '';
     this.filterType = 'none';
+    this.emptyMessage = undefined;
     this.listboxOptions = [];
     this.allListboxOptionsFiltered = undefined;
     this.hasExactMatch = false;
@@ -132,9 +133,9 @@ const GuxListboxMulti = class {
     let hasExactMatch = false;
     this.hasExactMatch = false;
     this.listboxOptions.forEach(listboxOption => {
-      var _a, _b, _c;
-      if (((_c = (_b = (_a = listboxOption
-        .querySelector('[gux-slot-container]')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === null || _c === void 0 ? void 0 : _c.trim()) == this.textInput.toLowerCase().trim()) {
+      var _a, _b;
+      if (((_b = (_a = listboxOption.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.trim()) ==
+        this.textInput.toLowerCase().trim()) {
         hasExactMatch = true;
         this.hasExactMatch = true;
       }
@@ -219,7 +220,7 @@ const GuxListboxMulti = class {
   renderAllListboxOptionsFiltered() {
     if (this.allListboxOptionsFiltered) {
       return [
-        index.h("div", { class: "gux-message-container" }, index.h("div", { class: "gux-no-matches" }, this.i18n('noMatches'))),
+        index.h("div", { class: "gux-message-container" }, index.h("div", { class: "gux-no-matches" }, this.emptyMessage || this.i18n('noMatches'))),
         this.renderHiddenSlot()
       ];
     }

package/dist/cjs/gux-loading-message.cjs.entry.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0d0fdb85.js');
+const usage = require('./usage-89e1afa4.js');
+
+const guxLoadingMessageCss = "/**\n  * @prop --gse-progressAndLoading-loadingState-large-header-fontFamily\n  * @prop --gse-progressAndLoading-loadingState-large-header-fontWeight\n  * @prop --gse-progressAndLoading-loadingState-large-header-lineHeight\n  * @prop --gse-progressAndLoading-loadingState-large-header-fontSize\n  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontFamily\n  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontWeight\n  * @prop --gse-progressAndLoading-loadingState-large-subheader-lineHeight\n  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontSize\n  * @prop --gse-progressAndLoading-loadingState-large-width : TODO https://inindca.atlassian.net/browse/COMUI-2264\n  * @prop --gse-progressAndLoading-loadingState-medium-header-fontFamily\n  * @prop --gse-progressAndLoading-loadingState-medium-header-fontWeight\n  * @prop --gse-progressAndLoading-loadingState-medium-header-lineHeight\n  * @prop --gse-progressAndLoading-loadingState-medium-header-fontSize\n  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontFamily\n  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontWeight\n  * @prop --gse-progressAndLoading-loadingState-medium-subheader-lineHeight\n  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontSize\n  * @prop --gse-progressAndLoading-loadingState-medium-width\n  * @prop --gse-progressAndLoading-loadingState-small-header-fontFamily\n  * @prop --gse-progressAndLoading-loadingState-small-header-fontWeight\n  * @prop --gse-progressAndLoading-loadingState-small-header-lineHeight\n  * @prop --gse-progressAndLoading-loadingState-small-header-fontSize\n  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontFamily\n  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontWeight\n  * @prop --gse-progressAndLoading-loadingState-small-subheader-lineHeight\n  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontSize\n  * @prop --gse-progressAndLoading-loadingState-small-width\n  * @prop --gse-progressAndLoading-large-gap\n  * @prop --gse-progressAndLoading-large-gapText\n  * @prop --gse-progressAndLoading-pageLoading-gap\n  * @prop --gse-progressAndLoading-medium-gap\n  * @prop --gse-progressAndLoading-medium-gapText\n  * @prop --gse-progressAndLoading-small-gap\n  * @prop --gse-progressAndLoading-small-gapText\n  * @prop --gse-ui-progressAndLoading-textColor\n  */\n:host {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  container-type: inline-size;\n}\n\n.gux-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  color: var(--gse-ui-progressAndLoading-textColor);\n  text-align: center;\n}\n\n@container (width > 400px) {\n  .gux-container .gux-primary-message {\n    margin-top: var(--gse-ui-progressAndLoading-large-gap);\n    font-family: var(--gse-ui-progressAndLoading-loadingState-large-header-fontFamily);\n    font-weight: var(--gse-ui-progressAndLoading-loadingState-large-header-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-loadingState-large-header-lineHeight);\n    font-size: var(--gse-ui-progressAndLoading-loadingState-large-header-fontSize);\n  }\n  .gux-container .gux-additional-guidance {\n    margin-top: var(--gse-ui-progressAndLoading-large-gapText);\n    font-family: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontFamily);\n    font-weight: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-loadingState-large-subheader-lineHeight);\n    font-size: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontSize);\n  }\n}\n@container (width > 200px) and (width <=400px) {\n  .gux-container .gux-primary-message {\n    margin-top: var(--gse-ui-progressAndLoading-medium-gap);\n    font-family: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontFamily);\n    font-weight: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-loadingState-medium-header-lineHeight);\n    font-size: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontSize);\n  }\n  .gux-container .gux-additional-guidance {\n    margin-top: var(--gse-ui-progressAndLoading-medium-gapText);\n    font-family: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontFamily);\n    font-weight: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-lineHeight);\n    font-size: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontSize);\n  }\n}\n@container (width <=200px) {\n  .gux-container .gux-primary-message {\n    margin-top: var(--gse-ui-progressAndLoading-small-gap);\n    font-family: var(--gse-ui-progressAndLoading-loadingState-small-header-fontFamily);\n    font-weight: var(--gse-ui-progressAndLoading-loadingState-small-header-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-loadingState-small-header-lineHeight);\n    font-size: var(--gse-ui-progressAndLoading-loadingState-small-header-fontSize);\n  }\n  .gux-container .gux-additional-guidance {\n    margin-top: var(--gse-ui-progressAndLoading-small-gapText);\n    font-family: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontFamily);\n    font-weight: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontWeight);\n    line-height: var(--gse-ui-progressAndLoading-loadingState-small-subheader-lineHeight);\n    font-size: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontSize);\n  }\n}";
+
+const GuxLoadingMessage = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    usage.trackComponent(this.root);
+  }
+  render() {
+    return (index.h("div", { class: "gux-container", role: "alert", "aria-live": "assertive" }, index.h("div", { class: "gux-progress" }, index.h("slot", { name: "progress" })), index.h("div", { class: "gux-primary-message" }, index.h("slot", { name: "primary-message" })), index.h("div", { class: "gux-additional-guidance" }, index.h("slot", { name: "additional-guidance" }))));
+  }
+  get root() { return index.getElement(this); }
+};
+GuxLoadingMessage.style = guxLoadingMessageCss;
+
+exports.gux_loading_message = GuxLoadingMessage;

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 
-const guxModalCss = ":host .gux-modal{position:fixed;inset:0;z-index:var(--gux-zindex-modal, 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%}}";
+const guxModalCss = ":host .gux-modal{position:fixed;inset:0;z-index:var(--gux-zindex-modal, 1);display:flex;align-items:center;justify-content:center;color:#2e394c;background:rgba(32, 41, 55, 0.8)}:host .gux-modal .gux-modal-container{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;box-shadow:0 8px 24px rgba(32, 41, 55, 0.4)}: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: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%}}";
 
 const GuxModal = class {
   constructor(hostRef) {

package/dist/cjs/gux-month-calendar.cjs.entry.js

@@ -14,7 +14,7 @@ const translationResources = {
 	changeYear: changeYear
 };
 
-const guxMonthCalendarCss = ".gux-month-calendar{flex-wrap:wrap;width:255px;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-month-calendar .gux-year-header{position:relative;display:flex;align-items:center;justify-content:space-between;height:16px;padding:16px;color:#fdfdfd;background-color:#2a60c8;border-top-left-radius:3px;border-top-right-radius:3px}.gux-month-calendar .gux-year-header button{color:#fdfdfd;cursor:pointer;background:none;border:none;outline:none}.gux-month-calendar .gux-year-header button:focus-visible{border-radius:4px;outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-month-calendar .gux-year-header button.gux-year-change:disabled{cursor:default;opacity:0.5}.gux-month-calendar .gux-year-header button gux-icon{width:16px;height:16px;pointer-events:none}.gux-month-calendar .gux-year-header .gux-year{font-family:Roboto, sans-serif;font-weight:400;font-weight:700}.gux-month-calendar .gux-months{padding:24px;background-color:#fdfdfd}.gux-month-calendar .gux-months button{width:65px;height:50px;margin:2px;text-align:center;cursor:pointer;background:none;border:none;border-radius:4px;outline:none;font-family:Roboto, sans-serif;font-weight:400;font-size:12px;line-height:20px}.gux-month-calendar .gux-months button:focus-visible{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-month-calendar .gux-months button.gux-selected,.gux-month-calendar .gux-months button:hover{color:#fdfdfd;background-color:#2a60c8}.gux-month-calendar .gux-months button:disabled{color:#596373;pointer-events:none;background-color:#fdfdfd}";
+const guxMonthCalendarCss = ".gux-month-calendar{flex-wrap:wrap;width:255px;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-month-calendar .gux-year-header{position:relative;display:flex;align-items:center;justify-content:space-between;height:16px;padding:16px;color:#fdfdfd;background-color:#2a60c8;border-top-left-radius:3px;border-top-right-radius:3px}.gux-month-calendar .gux-year-header button{color:#fdfdfd;cursor:pointer;background:none;border:none;outline:none}.gux-month-calendar .gux-year-header button:focus-visible{border-radius:4px;outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-month-calendar .gux-year-header button.gux-year-change:disabled{cursor:default;opacity:0.5}.gux-month-calendar .gux-year-header button gux-icon{width:16px;height:16px;pointer-events:none}.gux-month-calendar .gux-year-header .gux-year{font-family:sans-serif;font-weight:400;font-weight:700}.gux-month-calendar .gux-months{padding:24px;background-color:#fdfdfd}.gux-month-calendar .gux-months button{width:65px;height:50px;margin:2px;text-align:center;cursor:pointer;background:none;border:none;border-radius:4px;outline:none;font-family:sans-serif;font-weight:400;font-size:12px;line-height:20px}.gux-month-calendar .gux-months button:focus-visible{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-month-calendar .gux-months button.gux-selected,.gux-month-calendar .gux-months button:hover{color:#fdfdfd;background-color:#2a60c8}.gux-month-calendar .gux-months button:disabled{color:#596373;pointer-events:none;background-color:#fdfdfd}";
 
 const GuxMonthCalendar = class {
   constructor(hostRef) {

package/dist/cjs/gux-month-picker-beta.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 const onClickOutside = require('./on-click-outside-428f8bbf.js');
 const index$1 = require('./index-9bbde1aa.js');
 const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');

package/dist/cjs/gux-notification-toast-legacy.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 
-const guxNotificationToastCss = ".gux-focus-ring-focused:focus{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-focus-ring-focused-within:focus-within{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-focus-ring-focused-visible:focus-visible{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-focus-ring-small-focused:focus{outline:2px solid #aac9ff;outline-offset:0}.gux-focus-ring-small-focused-within:focus-within{outline:2px solid #aac9ff;outline-offset:0}.gux-focus-ring-small-focused-visible:focus-visible{outline:2px solid #aac9ff;outline-offset:0}@font-face{font-family:Roboto;font-style:normal;font-weight:300;src:url(\"./fonts/roboto-v20-latin-300.eot\");src:local(\"Roboto Light\"), local(\"Roboto-Light\"), url(\"./fonts/roboto-v20-latin-300.eot?#iefix\") format(\"embedded-opentype\"), url(\"./fonts/roboto-v20-latin-300.woff2\") format(\"woff2\"), url(\"./fonts/roboto-v20-latin-300.woff\") format(\"woff\"), url(\"./fonts/roboto-v20-latin-300.ttf\") format(\"truetype\"), url(\"./fonts/roboto-v20-latin-300.svg#Roboto\") format(\"svg\");}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:url(\"./fonts/roboto-v20-latin-regular.eot\");src:local(\"Roboto\"), local(\"Roboto-Regular\"), url(\"./fonts/roboto-v20-latin-regular.eot?#iefix\") format(\"embedded-opentype\"), url(\"./fonts/roboto-v20-latin-regular.woff2\") format(\"woff2\"), url(\"./fonts/roboto-v20-latin-regular.woff\") format(\"woff\"), url(\"./fonts/roboto-v20-latin-regular.ttf\") format(\"truetype\"), url(\"./fonts/roboto-v20-latin-regular.svg#Roboto\") format(\"svg\");}@font-face{font-family:Roboto;font-style:italic;font-weight:400;src:url(\"./fonts/roboto-v20-latin-italic.eot\");src:local(\"Roboto Italic\"), local(\"Roboto-Italic\"), url(\"./fonts/roboto-v20-latin-italic.eot?#iefix\") format(\"embedded-opentype\"), url(\"./fonts/roboto-v20-latin-italic.woff2\") format(\"woff2\"), url(\"./fonts/roboto-v20-latin-italic.woff\") format(\"woff\"), url(\"./fonts/roboto-v20-latin-italic.ttf\") format(\"truetype\"), url(\"./fonts/roboto-v20-latin-italic.svg#Roboto\") format(\"svg\");}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:url(\"./fonts/roboto-v20-latin-700.eot\");src:local(\"Roboto Bold\"), local(\"Roboto-Bold\"), url(\"./fonts/roboto-v20-latin-700.eot?#iefix\") format(\"embedded-opentype\"), url(\"./fonts/roboto-v20-latin-700.woff2\") format(\"woff2\"), url(\"./fonts/roboto-v20-latin-700.woff\") format(\"woff\"), url(\"./fonts/roboto-v20-latin-700.ttf\") format(\"truetype\"), url(\"./fonts/roboto-v20-latin-700.svg#Roboto\") format(\"svg\");}body{font-family:Roboto, sans-serif;font-weight:400;font-size:12px;line-height:20px}h1{font-family:Roboto, sans-serif;font-weight:400;font-weight:300;font-size:24px;line-height:32px}h2{font-family:Roboto, sans-serif;font-weight:400;font-weight:300;font-size:18px;line-height:24px}h3{font-family:Roboto, sans-serif;font-weight:400;font-weight:700;font-size:14px;line-height:20px}h4,h5,h6{font-family:Roboto, sans-serif;font-weight:400;font-size:14px;line-height:20px}.gux-icon-anchor gux-icon{padding-right:8px}a{color:#2a60c8;text-decoration:underline;border-radius:2px}a:hover{color:#2754ac}a:active{color:#23478f}a:focus-visible{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}table a{color:#2a60c8;text-decoration:underline;border-radius:2px;text-decoration:none}table a:hover{color:#2754ac}table a:active{color:#23478f}table a:focus-visible{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}: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 fade(#202937, 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;margin:0 12px 0 8px;color:#2e394c}.gux-content .gux-title,.gux-content .gux-message{flex:1 1 auto;align-self:auto;order:0}.gux-content .gux-title{font-family:Roboto, sans-serif;font-weight:400;font-size:14px;line-height:20px}";
+const guxNotificationToastCss = ".gux-focus-ring-focused:focus{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-focus-ring-focused-within:focus-within{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-focus-ring-focused-visible:focus-visible{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-focus-ring-small-focused:focus{outline-width:var(--gse-semantic-focusRing-small-border-width);outline-style:var(--gse-semantic-focusRing-small-border-style);outline-color:var(--gse-semantic-focusRing-small-border-color)}.gux-focus-ring-small-focused-within:focus-within{outline-width:var(--gse-semantic-focusRing-small-border-width);outline-style:var(--gse-semantic-focusRing-small-border-style);outline-color:var(--gse-semantic-focusRing-small-border-color)}.gux-focus-ring-small-focused-visible:focus-visible{outline-width:var(--gse-semantic-focusRing-small-border-width);outline-style:var(--gse-semantic-focusRing-small-border-style);outline-color:var(--gse-semantic-focusRing-small-border-color)}.gux-icon-anchor gux-icon{padding-right:var(--gse-ui-links-inLine-padding)}: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;margin:0 12px 0 8px;color:#2e394c}.gux-content .gux-title,.gux-content .gux-message{flex:1 1 auto;align-self:auto;order:0}.gux-content .gux-title{font-family:var(--gse-core-fontFamily-heading), var(--gse-core-fontFamily-body), sans-serif;font-weight:var(--gse-core-fontWeight-semiBold);font-size:var(--gse-core-fontSize-sm);line-height:var(--gse-core-lineHeight-sm)}";
 
 const GuxNotificationToast = class {
   constructor(hostRef) {

package/dist/cjs/gux-option-icon.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0d0fdb85.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
 
-const guxOptionIconCss = "gux-option-icon{box-sizing:border-box;display:flex;height:32px;padding:6px 8px;color:#2e394c;word-wrap:break-word;cursor:pointer;align-items:flex-start}gux-option-icon.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}gux-option-icon.gux-selected{background:#deeaff}gux-option-icon.gux-active,gux-option-icon.gux-hovered:not(:disabled){color:#fdfdfd;background:#2a60c8}gux-option-icon.gux-filtered{display:none}gux-option-icon .gux-slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}gux-option-icon gux-icon{flex-shrink:0;width:16px;height:16px;margin-block-start:calc((20px - 16px) / 2);margin-inline-end:8px}";
+const guxOptionIconCss = ":host{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center;height:var(--gse-ui-menu-option-height);padding:var(--gse-ui-menu-option-padding);color:var(--gse-ui-menu-option-label-foregroundColor);word-wrap:break-word;cursor:pointer;font-family:var(--gse-ui-menu-option-label-default-text-fontFamily);font-weight:var(--gse-ui-menu-option-label-default-text-fontWeight);line-height:var(--gse-ui-menu-option-label-default-text-lineHeight);font-size:var(--gse-ui-menu-option-label-default-text-fontSize);gap:var(--gse-ui-menu-option-gap)}:host .gux-slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.gux-disabled){pointer-events:none;cursor:default;opacity:var(--gse-ui-menu-option-disabled-opacity)}:host(.gux-selected){font-family:var(--gse-ui-menu-option-label-active-text-fontFamily);font-weight:var(--gse-ui-menu-option-label-active-text-fontWeight);line-height:var(--gse-ui-menu-option-label-active-text-lineHeight);font-size:var(--gse-ui-menu-option-label-active-text-fontSize);background:var(--gse-ui-menu-option-selected-backgroundColor)}:host(.gux-active){outline:var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);border-radius:var(--gse-semantic-focusRing-cornerRadius)}:host(.gux-hovered:not(:disabled)){background:var(--gse-ui-menu-option-hover-backgroundColor)}:host(.gux-filtered){display:none}:host gux-icon{flex-shrink:0;width:var(--gse-ui-menu-option-startIcon-width);height:var(--gse-ui-menu-option-startIcon-height)}";
 
 const GuxOptionIcon = class {
   constructor(hostRef) {

package/dist/cjs/gux-option-multi.cjs.entry.js

@@ -12,7 +12,7 @@ const translationResources = {
 	removeCustomElementInstructions: removeCustomElementInstructions
 };
 
-const guxOptionMultiCss = "gux-option-multi{box-sizing:border-box;display:flex;min-height:32px;padding:6px 12px;color:#2e394c;word-wrap:break-word;cursor:pointer}gux-option-multi .gux-checkbox-container::before{position:relative;top:2px;display:inline-block;width:13px;height:13px;margin-right:7px;content:'';background-color:white;background-image:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z' fill='%23596373' /%3E%3C/svg%3E\");border-radius:30%}gux-option-multi.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}gux-option-multi.gux-selected .gux-checkbox-container::before{background-image:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M4 1H11C11.7956 1 12.5587 1.31607 13.1213 1.87868C13.6839 2.44129 14 3.20435 14 4V11C14 11.7956 13.6839 12.5587 13.1213 13.1213C12.5587 13.6839 11.7956 14 11 14H4C3.20435 14 2.44129 13.6839 1.87868 13.1213C1.31607 12.5587 1 11.7956 1 11V4C1 3.20435 1.31607 2.44129 1.87868 1.87868C2.44129 1.31607 3.20435 1 4 1ZM5.57018 10.4198C5.7051 10.5547 5.87599 10.6177 6.04689 10.6177C6.22678 10.6177 6.39767 10.5457 6.52359 10.4198L11.7944 5.14905C12.0552 4.88821 12.0552 4.45647 11.7944 4.19563C11.5335 3.93479 11.1018 3.93479 10.841 4.19563L6.04689 8.9897L4.14905 7.08286C3.88821 6.82202 3.45647 6.82202 3.19563 7.08286C2.93479 7.3437 2.93479 7.77544 3.19563 8.03628L5.57018 10.4198Z' fill='%232a60c8' /%3E%3C/svg%3E\")}gux-option-multi.gux-active,gux-option-multi.gux-hovered:not([disabled]){color:#fdfdfd;background:#2a60c8}gux-option-multi.gux-active.gux-selected .gux-checkbox-container::before,gux-option-multi.gux-hovered:not([disabled]).gux-selected .gux-checkbox-container::before{background-image:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M5.57018 10.4198C5.7051 10.5547 5.87599 10.6177 6.04689 10.6177C6.22678 10.6177 6.39767 10.5457 6.52359 10.4198L11.7944 5.14905C12.0552 4.88821 12.0552 4.45647 11.7944 4.19563C11.5335 3.93479 11.1018 3.93479 10.841 4.19563L6.04689 8.9897L4.14905 7.08286C3.88821 6.82202 3.45647 6.82202 3.19563 7.08286C2.93479 7.3437 2.93479 7.77544 3.19563 8.03628L5.57018 10.4198Z' fill='%232a60c8' /%3E%3C/svg%3E\")}gux-option-multi.gux-active:not(.gux-selected) .gux-checkbox-container::before,gux-option-multi.gux-hovered:not([disabled]):not(.gux-selected) .gux-checkbox-container::before{background-image:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z' fill='none' /%3E%3C/svg%3E\")}gux-option-multi.gux-filtered{display:none}gux-option-multi .gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
+const guxOptionMultiCss = ":host{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;min-height:var(--gse-ui-menu-option-height);padding:var(--gse-ui-menu-option-padding);font-family:var(--gse-ui-menu-option-label-default-text-fontFamily);font-weight:var(--gse-ui-menu-option-label-default-text-fontWeight);line-height:var(--gse-ui-menu-option-label-default-text-lineHeight);font-size:var(--gse-ui-menu-option-label-default-text-fontSize);color:var(--gse-ui-menu-option-label-foregroundColor);gap:var(--gse-ui-menu-option-gap);word-wrap:break-word;cursor:pointer}:host .gux-checkbox-container{position:relative;display:inline-block;width:var(--gse-ui-menu-option-startIcon-width);height:var(--gse-ui-menu-option-startIcon-height);content:\"\"}:host .gux-checkbox-container>path{fill:var(--gse-ui-menu-option-checkbox-unchecked-default-foregroundColor)}:host:host(.gux-disabled){opacity:var(--gse-ui-menu-option-disabled-opacity);pointer-events:none;cursor:default}:host:host(.gux-selected){font-family:var(--gse-ui-menu-option-label-active-text-fontFamily);font-weight:var(--gse-ui-menu-option-label-active-text-fontWeight);line-height:var(--gse-ui-menu-option-label-active-text-lineHeight);font-size:var(--gse-ui-menu-option-label-active-text-fontSize);background-color:var(--gse-ui-menu-option-selected-backgroundColor)}:host:host(.gux-selected) .gux-checkbox-container>path{fill:var(--gse-ui-menu-option-checkbox-checked-default-foregroundColor)}:host:host(.gux-active){outline:var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);border-radius:var(--gse-semantic-focusRing-cornerRadius)}:host:host(.gux-hovered:not([disabled])){background-color:var(--gse-ui-menu-option-hover-backgroundColor)}:host:host(.gux-hovered:not([disabled])):host(.gux-selected) .gux-checkbox-container>path{fill:var(--gse-ui-menu-option-checkbox-checked-hover-foregroundColor)}:host:host(.gux-hovered:not([disabled])):host(:not(.gux-selected)) .gux-checkbox-container>path{fill:var(--gse-ui-menu-option-checkbox-unchecked-hover-foregroundColor)}:host:host(.gux-filtered){display:none}:host .gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
 
 const GuxOptionMulti = class {
   constructor(hostRef) {
@@ -54,6 +54,12 @@ const GuxOptionMulti = class {
       this.internalselectcustomoption.emit(this.value);
     }
   }
+  // SVGs must be in DOM for tokenization to work
+  renderSVGCheckbox() {
+    return this.selected
+      ? (index.h("svg", { class: "gux-checkbox-container", xmlns: "http://www.w3.org/2000/svg", viewBox: "1 1 13 13" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4 1H11C11.7956 1 12.5587 1.31607 13.1213 1.87868C13.6839 2.44129 14 3.20435 14 4V11C14 11.7956 13.6839 12.5587 13.1213 13.1213C12.5587 13.6839 11.7956 14 11 14H4C3.20435 14 2.44129 13.6839 1.87868 13.1213C1.31607 12.5587 1 11.7956 1 11V4C1 3.20435 1.31607 2.44129 1.87868 1.87868C2.44129 1.31607 3.20435 1 4 1ZM5.57018 10.4198C5.7051 10.5547 5.87599 10.6177 6.04689 10.6177C6.22678 10.6177 6.39767 10.5457 6.52359 10.4198L11.7944 5.14905C12.0552 4.88821 12.0552 4.45647 11.7944 4.19563C11.5335 3.93479 11.1018 3.93479 10.841 4.19563L6.04689 8.9897L4.14905 7.08286C3.88821 6.82202 3.45647 6.82202 3.19563 7.08286C2.93479 7.3437 2.93479 7.77544 3.19563 8.03628L5.57018 10.4198Z" })))
+      : (index.h("svg", { class: "gux-checkbox-container", xmlns: "http://www.w3.org/2000/svg", viewBox: "1 1 13 13" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" })));
+  }
   renderCustomOptionInstructions() {
     if (this.custom) {
       return (index.h("span", { class: "gux-screenreader" }, this.i18n('removeCustomElementInstructions')));
@@ -66,7 +72,7 @@ const GuxOptionMulti = class {
         'gux-filtered': this.filtered,
         'gux-hovered': this.hovered,
         'gux-selected': this.selected
-      }, "aria-selected": this.selected.toString(), "aria-disabled": this.disabled.toString() }, index.h("span", { class: "gux-checkbox-container" }), index.h("gux-truncate", { "gux-slot-container": true, ref: el => (this.truncateElement = el) }, index.h("slot", null)), this.renderCustomOptionInstructions()));
+      }, "aria-selected": this.selected.toString(), "aria-disabled": this.disabled.toString() }, this.renderSVGCheckbox(), index.h("gux-truncate", { "gux-slot-container": true, ref: el => (this.truncateElement = el) }, index.h("slot", null)), this.renderCustomOptionInstructions()));
   }
   get root() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-89e1afa4.js');
 
 const guxPageLoadingSpinnerCss = ":host{display:flex}.gux-spinner{margin:auto}";
 

package/dist/cjs/gux-pagination-buttons-legacy_3.cjs.entry.js

@@ -0,0 +1,277 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0d0fdb85.js');
+const index$1 = require('./index-9bbde1aa.js');
+require('./get-closest-element-ab4b2eee.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 guxPaginationButtonsLegacyCss = "gux-pagination-buttons-legacy .gux-pagination-buttons-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);align-items:center;justify-content:flex-end;margin-left:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap)}gux-pagination-buttons-legacy .gux-pagination-buttons-container.gux-expanded{justify-content:center}gux-pagination-buttons-legacy .gux-pagination-buttons-container>div{flex:0 1 auto;align-self:auto;order:0}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-group{white-space:nowrap}gux-pagination-buttons-legacy .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;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap)}gux-pagination-buttons-legacy .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-legacy .gux-pagination-buttons-container .gux-pagination-buttons-input-container .gux-pagination-buttons-input{width:60px}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-input-container .gux-pagination-buttons-input input{width:inherit;text-align:center}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);justify-content:center}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button{height:32px;padding-left:var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);padding-right:var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);margin-left:var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);margin-right:var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);background:inherit;border:none}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button:focus-visible{outline:var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus);outline-offset:var(--gse-semantic-focusRing-offset);border-radius:calc(var(--gse-semantic-focusRing-cornerRadius) - var(--gse-semantic-focusRing-offset))}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button.gux-current{background-color:var(--gse-ui-button-ghost-active-backgroundColor);border-radius:var(--gse-ui-button-borderRadius);padding-left:var(--gse-ui-dataTableItems-tablePagination-padding);padding-right:var(--gse-ui-dataTableItems-tablePagination-padding);font-family:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);color:var(--gse-ui-button-ghost-default-foregroundColor);font-size:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);line-height:var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);font-weight:var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight)}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button.gux-target{padding-left:var(--gse-ui-dataTableItems-tablePagination-padding);padding-right:var(--gse-ui-dataTableItems-tablePagination-padding);font-family:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);color:var(--gse-ui-button-ghost-default-foregroundColor);font-size:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);line-height:var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);font-weight:var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);cursor:pointer}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button.gux-target:hover{color:var(--gse-ui-button-ghost-hover-foregroundColor);background-color:var(--gse-ui-button-ghost-hover-backgroundColor);border-radius:var(--gse-ui-button-borderRadius)}gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-spacer{width:var(--gse-ui-dataTableItems-tablePagination-padding)}";
+
+const GuxPaginationButtonsLegacy = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.internalcurrentpagechange = index.createEvent(this, "internalcurrentpagechange", 3);
+    this.currentPage = undefined;
+    this.totalPages = undefined;
+    this.layout = 'full';
+  }
+  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);
+  }
+  setPageFromInput(value) {
+    const page = parseInt(value, 10);
+    if (!page || isNaN(page)) {
+      this.textFieldRef.value = String(this.currentPage);
+    }
+    else {
+      this.internalcurrentpagechange.emit(page);
+    }
+  }
+  getPageListEnteries(currentPage, totalPages) {
+    return GuxPaginationButtonsService.getPageList(currentPage, totalPages).reduce((acc, cv) => {
+      if (cv.current) {
+        return acc.concat((index.h("button", { class: "gux-pagination-buttons-list-button gux-current" }, cv.display)));
+      }
+      return acc.concat((index.h("button", { class: "gux-pagination-buttons-list-button gux-target", onClick: () => this.handleClickPage(cv.pageNumber) }, cv.display)));
+    }, []);
+  }
+  getSmallPagePicker() {
+    return (index.h("div", { class: 'gux-pagination-buttons-spacer' }));
+  }
+  getExpandedPagePicker() {
+    return (index.h("div", { class: "gux-pagination-buttons-list-container" }, this.getPageListEnteries(this.currentPage, this.totalPages)));
+  }
+  getFullPagePicker() {
+    return (index.h("div", { class: "gux-pagination-buttons-input-container" }, index.h("div", null, this.i18n('page')), index.h("div", { class: "gux-pagination-buttons-input" }, index.h("gux-form-field-text-like", { "label-position": "screenreader" }, index.h("label", { slot: "label" }, this.i18n('pageInputLabel', {
+      currentPage: this.currentPage,
+      totalPages: this.totalPages
+    })), index.h("input", { type: "text", slot: "input", value: String(this.currentPage), ref: ref => (this.textFieldRef = ref), onChange: () => this.setPageFromInput(this.textFieldRef.value) }))), index.h("div", null, this.i18n('totalPages', { totalPages: this.totalPages }))));
+  }
+  getPagePicker(layout) {
+    if (layout === 'small') {
+      return this.getSmallPagePicker();
+    }
+    if (layout === 'expanded') {
+      return this.getExpandedPagePicker();
+    }
+    return this.getFullPagePicker();
+  }
+  async componentWillLoad() {
+    this.i18n = await index$1.buildI18nForComponent(this.root, paginationResources$2);
+  }
+  render() {
+    return (index.h("div", { class: `gux-pagination-buttons-container gux-${this.layout}` }, index.h("div", { class: "gux-pagination-buttons-group" }, index.h("gux-button-slot", { accent: "ghost" }, index.h("button", { title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-double-left" }))), index.h("gux-button-slot", { accent: "ghost" }, index.h("button", { title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-small-left" })))), this.getPagePicker(this.layout), index.h("div", { class: "gux-pagination-buttons-group" }, index.h("gux-button-slot", { accent: "ghost" }, index.h("button", { title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))), index.h("gux-button-slot", { accent: "ghost" }, index.h("button", { title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-double-right" }))))));
+  }
+  get root() { return index.getElement(this); }
+};
+GuxPaginationButtonsLegacy.style = guxPaginationButtonsLegacyCss;
+
+const itemCountDisplay = "{firstItem, number} - {lastItem, number}";
+const totalItems = " of {totalItems, number}";
+const paginationResources$1 = {
+	itemCountDisplay: itemCountDisplay,
+	totalItems: totalItems
+};
+
+const guxPaginationItemCountsLegacyCss = "gux-pagination-item-counts-legacy .gux-pagination-item-counts-container{display:flex;flex-direction:row;white-space:nowrap;gap:var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);font-family:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);color:var(--gse-ui-dataTableItems-tablePagination-foregroundColor);font-size:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);line-height:var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);font-weight:var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight)}";
+
+const GuxPaginationItemCountsLegacy = class {
+  constructor(hostRef) {
+    index.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 index$1.buildI18nForComponent(this.root, paginationResources$1);
+  }
+  render() {
+    return (index.h("div", { class: "gux-pagination-item-counts-container" }, index.h("span", { class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
+      firstItem: this.firstItem,
+      lastItem: this.lastItem
+    })), index.h("span", null, this.i18n('totalItems', { totalItems: this.totalItems }))));
+  }
+  get root() { return index.getElement(this); }
+};
+GuxPaginationItemCountsLegacy.style = guxPaginationItemCountsLegacyCss;
+
+const perPage = "per page";
+const itemsPerPage = "Items per page";
+const rangeSelected = "Items per page dropdown, {range} selected";
+const paginationResources = {
+	perPage: perPage,
+	itemsPerPage: itemsPerPage,
+	rangeSelected: rangeSelected
+};
+
+const guxPaginationItemsPerPageLegacyCss = "gux-pagination-items-per-page-legacy .gux-pagination-items-per-page-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap)}gux-pagination-items-per-page-legacy .gux-pagination-items-per-page-container>div{flex:0 1 auto;align-self:auto;order:0;white-space:nowrap}gux-pagination-items-per-page-legacy .gux-pagination-items-per-page-container .gux-pagination-items-per-page-picker gux-dropdown{display:inline-block;width:64px}gux-pagination-items-per-page-legacy .gux-pagination-items-per-page-container .gux-pagination-per-page{font-family:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);color:var(--gse-ui-dataTableItems-tablePagination-foregroundColor);font-size:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);line-height:var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);font-weight:var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight)}";
+
+const GuxPaginationItemsPerPageLegacy = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.internalitemsperpagechange = index.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 index$1.buildI18nForComponent(this.root, paginationResources);
+  }
+  getDropdown() {
+    return (index.h("gux-dropdown", { ref: el => (this.dropdownElement = el), value: `${this.itemsPerPage}`, "aria-label": this.i18n('rangeSelected', {
+        range: this.itemsPerPage
+      }) }, index.h("gux-listbox", { "aria-label": this.i18n('itemsPerPage') }, index.h("gux-option", { value: "25" }, "25"), index.h("gux-option", { value: "50" }, "50"), index.h("gux-option", { value: "75" }, "75"), index.h("gux-option", { value: "100" }, "100"))));
+  }
+  render() {
+    return (index.h("div", { class: "gux-pagination-items-per-page-container" }, index.h("div", { class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), index.h("div", { class: "gux-pagination-per-page" }, this.i18n('perPage'))));
+  }
+  get root() { return index.getElement(this); }
+};
+GuxPaginationItemsPerPageLegacy.style = guxPaginationItemsPerPageLegacyCss;
+
+exports.gux_pagination_buttons_legacy = GuxPaginationButtonsLegacy;
+exports.gux_pagination_item_counts_legacy = GuxPaginationItemCountsLegacy;
+exports.gux_pagination_items_per_page_legacy = GuxPaginationItemsPerPageLegacy;