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

package/dist/collection/components/stable/gux-pagination-cursor/gux-pagination-cursor.css

@@ -5,19 +5,20 @@
   align-content: stretch;
   align-items: flex-start;
   justify-content: space-between;
-  padding: 12px;
-  border-top: 1px solid #e2e6ee;
+  padding: var(--gse-ui-dataTableItems-tablePagination-padding);
+  border-top: var(--gse-ui-dataTableItems-tablePagination-divider-width) var(--gse-ui-dataTableItems-tablePagination-divider-style) var(--gse-ui-dataTableItems-tablePagination-divider-color);
+  background-color: var(--gse-ui-dataTableItems-tablePagination-defaultBackgroundColor);
+  color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
+  font-family: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);
+  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
+  font-size: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);
+  font-weight: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontWeight);
 }
 :host .gux-pagination-button-container {
   display: flex;
   flex-wrap: nowrap;
-  justify-content: space-between;
-}
-:host button {
-  color: #2e394c;
-}
-:host button[disabled] {
-  color: rgba(46, 57, 76, 0.5);
+  align-content: center;
+  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
 }
 :host .gux-button-align-content {
   display: flex;
@@ -25,29 +26,14 @@
   flex-wrap: nowrap;
   align-content: center;
   align-items: center;
-  justify-content: center;
+  gap: var(--gse-ui-button-gap);
 }
 :host .gux-button-align-content > * {
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
 }
-:host .gux-button-align-content > .gux-icon-previous {
-  padding-right: 4px;
-}
-:host .gux-button-align-content > .gux-icon-next {
-  padding-left: 4px;
-}
 :host gux-icon {
-  width: 16px;
-  height: 16px;
-}
-:host gux-button-slot-beta.gux-previous {
-  margin-right: 12px;
-}
-:host gux-button-slot-beta.gux-next {
-  margin-left: 12px;
-}
-:host .gux-simple-button {
-  padding: 0;
-}
+  width: var(--gse-ui-button-icon-size);
+  height: var(--gse-ui-button-icon-size);
+}

package/dist/collection/components/stable/gux-pagination-cursor/gux-pagination-cursor.js

@@ -24,12 +24,12 @@ export class GuxPaginationCursor {
   }
   renderSimpleLayout() {
     return [
-      h("div", { role: "navigation", class: "gux-pagination-button-container" }, h("gux-button-slot-beta", { accent: "ghost", class: "gux-previous" }, h("button", { class: "gux-simple-button", type: "button", disabled: !this.hasPrevious, onClick: () => this.onButtonClick('previous') }, h("gux-icon", { iconName: "chevron-small-left", "screenreader-text": this.i18n('previous') }))), h("gux-button-slot-beta", { accent: "ghost", class: "gux-next" }, h("button", { class: "gux-simple-button", type: "button", disabled: !this.hasNext, onClick: () => this.onButtonClick('next') }, h("gux-icon", { iconName: "chevron-small-right", "screenreader-text": this.i18n('next') }))))
+      h("div", { role: "navigation", class: "gux-pagination-button-container" }, h("gux-button-slot", { accent: "ghost" }, h("button", { class: "gux-simple-button", type: "button", disabled: !this.hasPrevious, onClick: () => this.onButtonClick('previous') }, h("gux-icon", { iconName: "chevron-small-left", "screenreader-text": this.i18n('previous') }))), h("gux-button-slot", { accent: "ghost" }, h("button", { class: "gux-simple-button", type: "button", disabled: !this.hasNext, onClick: () => this.onButtonClick('next') }, h("gux-icon", { iconName: "chevron-small-right", "screenreader-text": this.i18n('next') }))))
     ];
   }
   renderAdvancedLayout() {
     return [
-      h("div", { role: "navigation", class: "gux-pagination-button-container" }, h("gux-button-slot-beta", { accent: "ghost", class: "gux-previous" }, h("button", { type: "button", disabled: !this.hasPrevious, onClick: () => this.onButtonClick('previous') }, h("div", { class: "gux-button-align-content" }, h("gux-icon", { class: "gux-icon-previous", decorative: true, iconName: "chevron-small-left" }), h("span", null, this.i18n('previous'))))), h("gux-button-slot-beta", { accent: "ghost", class: "gux-next" }, h("button", { type: "button", disabled: !this.hasNext, onClick: () => this.onButtonClick('next') }, h("div", { class: "gux-button-align-content" }, h("span", null, this.i18n('next')), h("gux-icon", { class: "gux-icon-next", decorative: true, iconName: "chevron-small-right" }))))),
+      h("div", { role: "navigation", class: "gux-pagination-button-container" }, h("gux-button-slot", { accent: "ghost" }, h("button", { type: "button", disabled: !this.hasPrevious, onClick: () => this.onButtonClick('previous') }, h("div", { class: "gux-button-align-content" }, h("gux-icon", { decorative: true, iconName: "chevron-small-left" }), h("span", null, this.i18n('previous'))))), h("gux-button-slot", { accent: "ghost" }, h("button", { type: "button", disabled: !this.hasNext, onClick: () => this.onButtonClick('next') }, h("div", { class: "gux-button-align-content" }, h("span", null, this.i18n('next')), h("gux-icon", { decorative: true, iconName: "chevron-small-right" }))))),
       this.renderItemsPerPage()
     ];
   }
@@ -46,7 +46,7 @@ export class GuxPaginationCursor {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-pagination-cursor.less"]
+      "$": ["gux-pagination-cursor.scss"]
     };
   }
   static get styleUrls() {
@@ -101,7 +101,7 @@ export class GuxPaginationCursor {
           "references": {
             "GuxItemsPerPage": {
               "location": "import",
-              "path": "../gux-pagination/gux-pagination.types"
+              "path": "../../legacy/gux-pagination-legacy/gux-pagination.types"
             }
           }
         },

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

@@ -1,62 +1,37 @@
-:host {
-  color: #2e394c;
-}
 .gux-popover-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  min-width: 280px;
   z-index: var(--gux-zindex-popover, 2);
   display: inline-block;
-  padding: 16px;
-  background-color: #fdfdfd;
-  border-radius: 4px;
-  box-shadow: 0 3px 14px rgba(46, 57, 76, 0.22);
+  padding: var(--gse-ui-popover-gap);
+  background-color: var(--gse-ui-popover-backgroundColor);
+  border-radius: var(--gse-ui-popover-borderRadius);
+  box-shadow: var(--gse-ui-popover-boxShadow-x) var(--gse-ui-popover-boxShadow-y) var(--gse-ui-popover-boxShadow-blur) var(--gse-ui-popover-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color);
 }
-.gux-popover-wrapper .gux-arrow,
-.gux-popover-wrapper .gux-arrow::before {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background: inherit;
+.gux-popover-wrapper.gux-hidden {
+  display: none;
 }
 .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='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='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='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;
+  position: absolute;
+  width: var(--gse-ui-popover-anchor-width);
+  height: var(--gse-ui-popover-anchor-width);
+  background: var(--gse-ui-popover-backgroundColor);
 }
 .gux-popover-wrapper .gux-popover-header {
-  font-size: 12px;
-  line-height: 20px;
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 700;
+  font-family: var(--gse-ui-popover-title-text-fontFamily);
+  font-size: var(--gse-ui-popover-title-text-fontSize);
+  font-weight: var(--gse-ui-popover-title-text-fontWeight);
+  line-height: var(--gse-ui-popover-title-text-lineHeight);
+  color: --gse-ui-popover-headerColor;
   display: flex;
   flex-direction: row;
   align-content: center;
   align-items: center;
   justify-content: space-between;
-  padding-bottom: 16px;
+  padding-bottom: var(--gse-ui-popover-gap);
 }
 .gux-popover-wrapper gux-dismiss-button {
   float: right;
-}
+}

package/dist/collection/components/stable/gux-popover/gux-popover.js

@@ -8,10 +8,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { createPopper } from '@popperjs/core';
 import { h } from '@stencil/core';
+import { autoUpdate, computePosition, arrow, flip, offset, shift } from '@floating-ui/dom';
 import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
-import { onHiddenChange } from '../../../utils/dom/on-attribute-change';
 import { trackComponent } from '@utils/tracking/usage';
 import { getSlot } from '@utils/dom/get-slot';
 import { findElementById } from '@utils/dom/find-element-by-id';
@@ -25,22 +24,14 @@ export class GuxPopover {
     this.position = 'bottom';
     this.displayDismissButton = undefined;
     this.closeOnClickOutside = false;
-    this.hidden = true;
-  }
-  hiddenHandler(hidden) {
-    if (!hidden && !this.popperInstance) {
-      this.runPopper();
-    }
-    else if (!hidden && this.popperInstance) {
-      this.popperInstance.forceUpdate();
-    }
+    this.isOpen = false;
   }
   checkForClickOutside(event) {
     const clickPath = event.composedPath();
     const forElement = findElementById(this.root, this.for);
     const clickedForElement = clickPath.includes(forElement);
     if ((this.closeOnClickOutside || !this.displayDismissButton) &&
-      !this.hidden &&
+      this.isOpen &&
       !clickedForElement) {
       this.dismiss();
     }
@@ -48,63 +39,87 @@ export class GuxPopover {
   get titleSlot() {
     return getSlot(this.root, 'title');
   }
-  runPopper() {
-    const forElement = findElementById(this.root, this.for);
-    if (!forElement) {
-      console.error(`gux-popover: invalid "for" attribute. No element in page with the id "${this.for}"`);
-    }
-    else if (this.popupElement) {
-      this.popperInstance = createPopper(forElement, this.popupElement, {
-        modifiers: [
-          {
-            name: 'computeStyles',
-            options: {
-              gpuAcceleration: false
-            }
-          },
-          {
-            name: 'offset',
-            options: {
-              offset: [0, 7]
-            }
-          },
-          {
-            name: 'arrow',
-            options: {
-              padding: 16
-            }
-          }
-        ],
-        placement: this.position
+  runUpdatePosition() {
+    if (this.root.isConnected) {
+      this.cleanupUpdatePosition = autoUpdate(findElementById(this.root, this.for), this.popupElement, () => this.updatePosition(), {
+        ancestorScroll: true,
+        elementResize: true,
+        animationFrame: true,
+        ancestorResize: true
       });
     }
+    else {
+      this.disconnectedCallback();
+    }
   }
-  destroyPopper() {
-    if (this.popperInstance) {
-      this.popperInstance.destroy();
-      this.popperInstance = null;
+  updatePosition() {
+    const forElement = findElementById(this.root, this.for);
+    // This is 13 because this makes the arrow look aligned
+    const arrowLen = 13;
+    if (this.popupElement) {
+      void computePosition(forElement, this.popupElement, {
+        placement: this.position,
+        middleware: [
+          offset(7),
+          flip(),
+          shift(),
+          arrow({
+            element: this.arrowElement,
+            padding: 16
+          })
+        ]
+      }).then(({ x, y, middlewareData, placement }) => {
+        Object.assign(this.popupElement.style, {
+          left: `${x}px`,
+          top: `${y}px`
+        });
+        const side = placement.split('-')[0];
+        const staticSide = {
+          top: 'bottom',
+          right: 'left',
+          bottom: 'top',
+          left: 'right'
+        }[side];
+        if (middlewareData.arrow) {
+          const { x, y } = middlewareData.arrow;
+          this.popupElement.setAttribute('data-placement', placement);
+          Object.assign(this.arrowElement.style, {
+            left: x != null ? `${x}px` : '',
+            top: y != null ? `${y}px` : '',
+            right: '',
+            bottom: '',
+            [staticSide]: `${-arrowLen / 2}px`,
+            transform: 'rotate(45deg)'
+          });
+        }
+      });
     }
   }
   dismiss() {
     const dismissEvent = this.guxdismiss.emit();
     if (!dismissEvent.defaultPrevented) {
-      this.root.setAttribute('hidden', '');
+      this.isOpen = false;
     }
   }
   connectedCallback() {
     trackComponent(this.root, { variant: this.position });
-    this.hiddenObserver = onHiddenChange(this.root, (hidden) => {
-      this.hidden = hidden;
-    });
-    this.hidden = this.root.hidden;
   }
   componentDidLoad() {
-    this.runPopper();
+    if (this.isOpen) {
+      this.runUpdatePosition();
+    }
+  }
+  componentDidUpdate() {
+    if (this.isOpen) {
+      this.runUpdatePosition();
+    }
+    else if (this.cleanupUpdatePosition) {
+      this.cleanupUpdatePosition();
+    }
   }
   disconnectedCallback() {
-    this.destroyPopper();
-    if (this.hiddenObserver) {
-      this.hiddenObserver.disconnect();
+    if (this.cleanupUpdatePosition) {
+      this.cleanupUpdatePosition();
     }
   }
   renderDismissButton() {
@@ -113,13 +128,16 @@ export class GuxPopover {
     }
   }
   render() {
-    return (h("div", { ref: (el) => (this.popupElement = el), class: "gux-popover-wrapper" }, h("div", { class: "gux-arrow", "data-popper-arrow": true }), h("div", { class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { name: "title" }), this.renderDismissButton()), h("div", { class: "gux-popover-content" }, h("slot", null))));
+    return (h("div", { ref: (el) => (this.popupElement = el), class: {
+        'gux-hidden': !this.isOpen,
+        'gux-popover-wrapper': true
+      }, "data-placement": true }, h("div", { ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), h("div", { class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { name: "title" }), this.renderDismissButton()), h("div", { class: "gux-popover-content" }, h("slot", null))));
   }
   static get is() { return "gux-popover"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-popover.less"]
+      "$": ["gux-popover.scss"]
     };
   }
   static get styleUrls() {
@@ -150,12 +168,12 @@ export class GuxPopover {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "PopperPosition",
+          "original": "Placement",
           "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
           "references": {
-            "PopperPosition": {
+            "Placement": {
               "location": "import",
-              "path": "./gux-popover.types"
+              "path": "@floating-ui/dom"
             }
           }
         },
@@ -163,7 +181,7 @@ export class GuxPopover {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Indicate position of popover element arrow (follow popper js position attribute api)"
+          "text": "Indicate position of popover element arrow (follow floating ui placement attribute api)"
         },
         "attribute": "position",
         "reflect": false,
@@ -203,14 +221,27 @@ export class GuxPopover {
         "attribute": "close-on-click-outside",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "isOpen": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls hiding and showing the popover"
+        },
+        "attribute": "is-open",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
-  static get states() {
-    return {
-      "hidden": {}
-    };
-  }
   static get events() {
     return [{
         "method": "guxdismiss",
@@ -230,12 +261,6 @@ export class GuxPopover {
       }];
   }
   static get elementRef() { return "root"; }
-  static get watchers() {
-    return [{
-        "propName": "hidden",
-        "methodName": "hiddenHandler"
-      }];
-  }
 }
 __decorate([
   OnClickOutside({ triggerEvents: 'mousedown' })

package/dist/collection/components/stable/gux-popover-list/gux-popover-list.css

@@ -1,71 +1,20 @@
-:host {
-  color: #2e394c;
-}
 .gux-popover-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
   z-index: var(--gux-zindex-popover, 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);
+  padding: 8px 0px;
+  background-color: var(--gse-ui-popover-backgroundColor);
+  border-radius: var(--gse-ui-popover-borderRadius);
+  box-shadow: var(--gse-ui-popover-boxShadow-x) var(--gse-ui-popover-boxShadow-y) var(--gse-ui-popover-boxShadow-blur) var(--gse-ui-popover-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color);
 }
-.gux-popover-wrapper .gux-arrow,
-.gux-popover-wrapper .gux-arrow::before {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background: inherit;
+.gux-popover-wrapper.gux-hidden {
+  display: none;
 }
 .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;
-}
+  position: absolute;
+  width: var(--gse-ui-popover-anchor-width);
+  height: var(--gse-ui-popover-anchor-width);
+  background: var(--gse-ui-popover-backgroundColor);
+}