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

package/dist/collection/components/stable/gux-listbox-multi/gux-listbox-multi.js

@@ -1,10 +1,10 @@
 import { h, Host } from '@stencil/core';
 import { actOnActiveOption, clearActiveOptions, goToOption, hasPreviousOption, hasNextOption, onClickedOption, setFirstOptionActive, setInitialActiveOption, setLastOptionActive, setNextOptionActive, setPreviousOptionActive } from '../gux-listbox/gux-listbox.service';
 import { buildI18nForComponent } from '../../../i18n';
-import { whenEventIsFrom } from '../../../utils/dom/when-event-is-from';
-import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
+import { whenEventIsFrom } from '@utils/dom/when-event-is-from';
+import simulateNativeEvent from '@utils/dom/simulate-native-event';
 import { trackComponent } from '@utils/tracking/usage';
-import { afterNextRender } from '../../../utils/dom/after-next-render';
+import { afterNextRender } from '@utils/dom/after-next-render';
 import translationResources from './i18n/en.json';
 /**
  * @slot - collection of gux-option-multi elements
@@ -16,6 +16,7 @@ export class GuxListboxMulti {
     this.filter = '';
     this.textInput = '';
     this.filterType = 'none';
+    this.emptyMessage = undefined;
     this.listboxOptions = [];
     this.allListboxOptionsFiltered = undefined;
     this.hasExactMatch = false;
@@ -117,9 +118,9 @@ export class GuxListboxMulti {
     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;
       }
@@ -204,7 +205,7 @@ export class GuxListboxMulti {
   renderAllListboxOptionsFiltered() {
     if (this.allListboxOptionsFiltered) {
       return [
-        h("div", { class: "gux-message-container" }, h("div", { class: "gux-no-matches" }, this.i18n('noMatches'))),
+        h("div", { class: "gux-message-container" }, h("div", { class: "gux-no-matches" }, this.emptyMessage || this.i18n('noMatches'))),
         this.renderHiddenSlot()
       ];
     }
@@ -222,7 +223,7 @@ export class GuxListboxMulti {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-listbox-multi.less"]
+      "$": ["gux-listbox-multi.scss"]
     };
   }
   static get styleUrls() {
@@ -312,7 +313,7 @@ export class GuxListboxMulti {
           "references": {
             "GuxFilterTypes": {
               "location": "import",
-              "path": "../../stable/gux-dropdown/gux-dropdown.types"
+              "path": "../gux-dropdown/gux-dropdown.types"
             }
           }
         },
@@ -326,6 +327,23 @@ export class GuxListboxMulti {
         "reflect": false,
         "defaultValue": "'none'"
       },
+      "emptyMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "empty-message",
+        "reflect": false
+      },
       "hasExactMatch": {
         "type": "boolean",
         "mutable": true,

package/dist/collection/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.css

@@ -1,53 +1,67 @@
-gux-option-multi {
+:host {
   box-sizing: border-box;
   display: flex;
-  min-height: 32px;
-  padding: 6px 12px;
-  color: #2e394c;
+  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;
 }
-gux-option-multi .gux-checkbox-container::before {
+:host .gux-checkbox-container {
   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 {
+  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;
-  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");
+: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);
 }
-gux-option-multi.gux-active,
-gux-option-multi.gux-hovered:not([disabled]) {
-  color: #fdfdfd;
-  background: #2a60c8;
+: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);
 }
-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");
+:host:host(.gux-hovered:not([disabled])) {
+  background-color: var(--gse-ui-menu-option-hover-backgroundColor);
 }
-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");
+:host:host(.gux-hovered:not([disabled])):host(.gux-selected) .gux-checkbox-container > path {
+  fill: var(--gse-ui-menu-option-checkbox-checked-hover-foregroundColor);
 }
-gux-option-multi.gux-filtered {
+: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;
 }
-gux-option-multi .gux-screenreader {
+:host .gux-screenreader {
   position: absolute;
   top: auto;
   left: -10000px;
   width: 1px;
   height: 1px;
   overflow: hidden;
-}
+}

package/dist/collection/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.js

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { randomHTMLId } from '../../../../utils/dom/random-html-id';
+import { randomHTMLId } from '@utils/dom/random-html-id';
 import { buildI18nForComponent } from '../../../../i18n';
 import translationResources from './i18n/en.json';
 /**
@@ -42,6 +42,12 @@ export class GuxOptionMulti {
       this.internalselectcustomoption.emit(this.value);
     }
   }
+  // SVGs must be in DOM for tokenization to work
+  renderSVGCheckbox() {
+    return this.selected
+      ? (h("svg", { class: "gux-checkbox-container", xmlns: "http://www.w3.org/2000/svg", viewBox: "1 1 13 13" }, 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" })))
+      : (h("svg", { class: "gux-checkbox-container", xmlns: "http://www.w3.org/2000/svg", viewBox: "1 1 13 13" }, 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 (h("span", { class: "gux-screenreader" }, this.i18n('removeCustomElementInstructions')));
@@ -54,12 +60,13 @@ export class GuxOptionMulti {
         'gux-filtered': this.filtered,
         'gux-hovered': this.hovered,
         'gux-selected': this.selected
-      }, "aria-selected": this.selected.toString(), "aria-disabled": this.disabled.toString() }, h("span", { class: "gux-checkbox-container" }), h("gux-truncate", { "gux-slot-container": true, ref: el => (this.truncateElement = el) }, h("slot", null)), this.renderCustomOptionInstructions()));
+      }, "aria-selected": this.selected.toString(), "aria-disabled": this.disabled.toString() }, this.renderSVGCheckbox(), h("gux-truncate", { "gux-slot-container": true, ref: el => (this.truncateElement = el) }, h("slot", null)), this.renderCustomOptionInstructions()));
   }
   static get is() { return "gux-option-multi"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-option-multi.less"]
+      "$": ["gux-option-multi.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-loading-message/gux-loading-message.css

@@ -0,0 +1,102 @@
+/**
+  * @prop --gse-progressAndLoading-loadingState-large-header-fontFamily
+  * @prop --gse-progressAndLoading-loadingState-large-header-fontWeight
+  * @prop --gse-progressAndLoading-loadingState-large-header-lineHeight
+  * @prop --gse-progressAndLoading-loadingState-large-header-fontSize
+  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontFamily
+  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontWeight
+  * @prop --gse-progressAndLoading-loadingState-large-subheader-lineHeight
+  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontSize
+  * @prop --gse-progressAndLoading-loadingState-large-width : TODO https://inindca.atlassian.net/browse/COMUI-2264
+  * @prop --gse-progressAndLoading-loadingState-medium-header-fontFamily
+  * @prop --gse-progressAndLoading-loadingState-medium-header-fontWeight
+  * @prop --gse-progressAndLoading-loadingState-medium-header-lineHeight
+  * @prop --gse-progressAndLoading-loadingState-medium-header-fontSize
+  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontFamily
+  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontWeight
+  * @prop --gse-progressAndLoading-loadingState-medium-subheader-lineHeight
+  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontSize
+  * @prop --gse-progressAndLoading-loadingState-medium-width
+  * @prop --gse-progressAndLoading-loadingState-small-header-fontFamily
+  * @prop --gse-progressAndLoading-loadingState-small-header-fontWeight
+  * @prop --gse-progressAndLoading-loadingState-small-header-lineHeight
+  * @prop --gse-progressAndLoading-loadingState-small-header-fontSize
+  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontFamily
+  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontWeight
+  * @prop --gse-progressAndLoading-loadingState-small-subheader-lineHeight
+  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontSize
+  * @prop --gse-progressAndLoading-loadingState-small-width
+  * @prop --gse-progressAndLoading-large-gap
+  * @prop --gse-progressAndLoading-large-gapText
+  * @prop --gse-progressAndLoading-pageLoading-gap
+  * @prop --gse-progressAndLoading-medium-gap
+  * @prop --gse-progressAndLoading-medium-gapText
+  * @prop --gse-progressAndLoading-small-gap
+  * @prop --gse-progressAndLoading-small-gapText
+  * @prop --gse-ui-progressAndLoading-textColor
+  */
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  container-type: inline-size;
+}
+
+.gux-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--gse-ui-progressAndLoading-textColor);
+  text-align: center;
+}
+
+@container (width > 400px) {
+  .gux-container .gux-primary-message {
+    margin-top: var(--gse-ui-progressAndLoading-large-gap);
+    font-family: var(--gse-ui-progressAndLoading-loadingState-large-header-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-loadingState-large-header-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-loadingState-large-header-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-large-header-fontSize);
+  }
+  .gux-container .gux-additional-guidance {
+    margin-top: var(--gse-ui-progressAndLoading-large-gapText);
+    font-family: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-loadingState-large-subheader-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontSize);
+  }
+}
+@container (width > 200px) and (width <=400px) {
+  .gux-container .gux-primary-message {
+    margin-top: var(--gse-ui-progressAndLoading-medium-gap);
+    font-family: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-loadingState-medium-header-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontSize);
+  }
+  .gux-container .gux-additional-guidance {
+    margin-top: var(--gse-ui-progressAndLoading-medium-gapText);
+    font-family: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontSize);
+  }
+}
+@container (width <=200px) {
+  .gux-container .gux-primary-message {
+    margin-top: var(--gse-ui-progressAndLoading-small-gap);
+    font-family: var(--gse-ui-progressAndLoading-loadingState-small-header-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-loadingState-small-header-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-loadingState-small-header-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-small-header-fontSize);
+  }
+  .gux-container .gux-additional-guidance {
+    margin-top: var(--gse-ui-progressAndLoading-small-gapText);
+    font-family: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-loadingState-small-subheader-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontSize);
+  }
+}

package/dist/collection/components/stable/gux-loading-message/gux-loading-message.js

@@ -0,0 +1,28 @@
+import { h } from '@stencil/core';
+import { trackComponent } from '@utils/tracking/usage';
+/**
+ * @slot progress - Required slot for progress.
+ * @slot primary-guidance - Required slot for primary guidance.
+ * @slot additional-guidance - Slot for additional guidance.
+ */
+export class GuxLoadingMessage {
+  componentWillLoad() {
+    trackComponent(this.root);
+  }
+  render() {
+    return (h("div", { class: "gux-container", role: "alert", "aria-live": "assertive" }, h("div", { class: "gux-progress" }, h("slot", { name: "progress" })), h("div", { class: "gux-primary-message" }, h("slot", { name: "primary-message" })), h("div", { class: "gux-additional-guidance" }, h("slot", { name: "additional-guidance" }))));
+  }
+  static get is() { return "gux-loading-message"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gux-loading-message.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gux-loading-message.css"]
+    };
+  }
+  static get elementRef() { return "root"; }
+}

package/dist/collection/components/stable/gux-modal/gux-modal.css

@@ -9,7 +9,6 @@
   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;
@@ -19,6 +18,7 @@
   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;
@@ -42,7 +42,7 @@
 :host .gux-modal .gux-modal-container .gux-modal-header {
   padding-bottom: 24px;
   margin: 0;
-  font-family: Roboto, sans-serif;
+  font-family: sans-serif;
   font-weight: 400;
   font-weight: 300;
   font-size: 24px;

package/dist/collection/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-button.service.js

@@ -1,63 +1,50 @@
 export 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
-        };
-      });
+  static displayAllPageButtons(currentPage, totalPages, layout) {
+    switch (layout) {
+      case 'advanced':
+        return getAdvancedList(currentPage, totalPages);
+      case 'simple':
+        return getSimpleList(currentPage, totalPages);
     }
-    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;
+  }
+}
+function getAdvancedList(currentPage, totalPages) {
+  if (totalPages <= 7) {
+    return [...Array(totalPages).keys()].map(index => {
+      const pageNumber = index + 1;
+      return {
+        pageNumber,
+        display: String(pageNumber),
+        current: pageNumber === currentPage
+      };
+    });
+  }
+  if (currentPage <= 3) {
+    const startPageList = [...Array(5).keys()].map(index => {
+      const pageNumber = index + 1;
+      return {
+        pageNumber,
+        display: String(pageNumber),
+        current: pageNumber === currentPage
+      };
+    });
+    return [
+      ...startPageList,
+      {
+        pageNumber: 6,
+        display: '...',
+        current: false
+      },
+      {
+        pageNumber: totalPages,
+        display: String(totalPages),
+        current: false
+      }
+    ];
+  }
+  if (currentPage > totalPages - 3) {
+    const endPageList = [...Array(5).keys()].map(index => {
+      const pageNumber = index + totalPages - 4;
       return {
         pageNumber,
         display: String(pageNumber),
@@ -71,20 +58,76 @@ export class GuxPaginationButtonsService {
         current: false
       },
       {
-        pageNumber: currentPage - 3,
+        pageNumber: totalPages - 6,
         display: '...',
         current: false
       },
-      ...middlePageList,
+      ...endPageList
+    ];
+  }
+  const middlePageList = [...Array(3).keys()].map(index => {
+    const pageNumber = index + currentPage - 1;
+    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
+    }
+  ];
+}
+function getSimpleList(currentPage, totalPages) {
+  if (totalPages <= 3) {
+    return [...Array(totalPages).keys()].map(index => {
+      const pageNumber = index + 1;
+      return {
+        pageNumber,
+        display: String(pageNumber),
+        current: pageNumber === currentPage
+      };
+    });
+  }
+  if (totalPages >= 4) {
+    const startPageList = [...Array(1).keys()].map(index => {
+      const pageNumber = index + currentPage;
+      return {
+        pageNumber,
+        display: String(pageNumber),
+        current: pageNumber !== totalPages
+      };
+    });
+    return [
+      ...startPageList,
       {
-        pageNumber: currentPage + 3,
+        pageNumber: currentPage,
         display: '...',
         current: false
       },
       {
         pageNumber: totalPages,
         display: String(totalPages),
-        current: false
+        current: totalPages == currentPage
       }
     ];
   }