genesys-spark-components 3.0.0

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

@@ -0,0 +1,199 @@
+import { Component, Element, Event, h, Prop, State } from '@stencil/core';
+import { trackComponent } from '../../../usage-tracking';
+export class GuxPagination {
+  constructor() {
+    /**
+     * The currently select page. Changes are watched by the component.
+     */
+    this.currentPage = 1;
+    /**
+     * The total number of items in the data set. Used to calculate total page count
+     */
+    this.totalItems = 0;
+    /**
+     * The max number of items on a page. Used to calculate total page count
+     */
+    this.itemsPerPage = 25;
+    /**
+     * The pagination component can have different layouts to suit the available space
+     */
+    this.layout = 'full';
+  }
+  setPage(page) {
+    if (page < 0) {
+      if (this.totalPages > 0) {
+        this.setPage(1);
+      }
+      else {
+        this.setPage(0);
+      }
+      return;
+    }
+    const totalPages = this.calculatTotalPages();
+    if (page > totalPages) {
+      this.setPage(totalPages);
+      return;
+    }
+    this.currentPage = page;
+    this.guxpaginationchange.emit({
+      currentPage: this.currentPage,
+      itemsPerPage: this.itemsPerPage
+    });
+  }
+  calculatTotalPages() {
+    return Math.ceil(this.totalItems / this.itemsPerPage);
+  }
+  calculateCurrentPage() {
+    const minCurrentPage = this.totalPages > 0 ? 1 : 0;
+    return Math.max(minCurrentPage, Math.min(this.currentPage, this.totalPages));
+  }
+  handleInternalitemsperpagechange(event) {
+    this.itemsPerPage = event.detail;
+    this.setPage(1);
+  }
+  handleInternalcurrentpagechange(event) {
+    this.setPage(event.detail);
+  }
+  getPaginationInfoElement(layout) {
+    if (layout === 'expanded') {
+      return null;
+    }
+    const content = [
+      h("gux-pagination-item-counts", { "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage })
+    ];
+    if (layout === 'full') {
+      content.push(h("gux-pagination-items-per-page", { "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }));
+    }
+    return (h("div", { class: "gux-pagination-info" }, content));
+  }
+  componentWillLoad() {
+    trackComponent(this.root, { variant: this.layout });
+  }
+  componentWillRender() {
+    this.totalPages = this.calculatTotalPages();
+    this.currentPage = this.calculateCurrentPage();
+  }
+  render() {
+    return (h("div", { class: "gux-pagination-container" },
+      this.getPaginationInfoElement(this.layout),
+      h("div", { class: "gux-pagination-change" },
+        h("gux-pagination-buttons", { layout: this.layout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
+  }
+  static get is() { return "gux-pagination"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-pagination.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-pagination.css"]
+  }; }
+  static get properties() { return {
+    "currentPage": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The currently select page. Changes are watched by the component."
+      },
+      "attribute": "current-page",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "totalItems": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The total number of items in the data set. Used to calculate total page count"
+      },
+      "attribute": "total-items",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "itemsPerPage": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "GuxItemsPerPage",
+        "resolved": "100 | 25 | 50 | 75",
+        "references": {
+          "GuxItemsPerPage": {
+            "location": "import",
+            "path": "./gux-pagination.types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The max number of items on a page. Used to calculate total page count"
+      },
+      "attribute": "items-per-page",
+      "reflect": false,
+      "defaultValue": "25"
+    },
+    "layout": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "GuxPaginationLayout",
+        "resolved": "\"expanded\" | \"full\" | \"small\"",
+        "references": {
+          "GuxPaginationLayout": {
+            "location": "import",
+            "path": "./gux-pagination.types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The pagination component can have different layouts to suit the available space"
+      },
+      "attribute": "layout",
+      "reflect": false,
+      "defaultValue": "'full'"
+    }
+  }; }
+  static get states() { return {
+    "totalPages": {}
+  }; }
+  static get events() { return [{
+      "method": "guxpaginationchange",
+      "name": "guxpaginationchange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "GuxPaginationState",
+        "resolved": "{ currentPage: number; itemsPerPage: number; }",
+        "references": {
+          "GuxPaginationState": {
+            "location": "import",
+            "path": "./gux-pagination.types"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "root"; }
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,8 @@
+:host {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  justify-content: space-between;
+}

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

@@ -0,0 +1,98 @@
+import { Component, Element, Event, h, Prop } from '@stencil/core';
+import { trackComponent } from '../../../usage-tracking';
+import { buildI18nForComponent } from '../../../i18n';
+import translationResources from './i18n/en.json';
+export class GuxPaginationCursor {
+  constructor() {
+    this.hasPrevious = false;
+    this.hasNext = false;
+  }
+  onButtonClick(paginationDetail) {
+    if ((paginationDetail === 'previous' && this.hasPrevious) ||
+      (paginationDetail === 'next' && this.hasNext)) {
+      this.guxPaginationCursorchange.emit(paginationDetail);
+    }
+  }
+  async componentWillLoad() {
+    trackComponent(this.root);
+    this.i18n = await buildI18nForComponent(this.root, translationResources);
+  }
+  render() {
+    return [
+      h("gux-button-slot-beta", { accent: "secondary" },
+        h("button", { type: "button", title: this.i18n('previous'), disabled: !this.hasPrevious, onClick: () => this.onButtonClick('previous') },
+          h("gux-icon", { decorative: true, iconName: "ic-chevron-small-left" }))),
+      h("gux-button-slot-beta", { accent: "secondary" },
+        h("button", { type: "button", title: this.i18n('next'), disabled: !this.hasNext, onClick: () => this.onButtonClick('next') },
+          h("gux-icon", { decorative: true, iconName: "ic-chevron-small-right" })))
+    ];
+  }
+  static get is() { return "gux-pagination-cursor"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-pagination-cursor.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-pagination-cursor.css"]
+  }; }
+  static get properties() { return {
+    "hasPrevious": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "has-previous",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "hasNext": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "has-next",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "guxPaginationCursorchange",
+      "name": "guxPaginationCursorchange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "GuxPaginationCursorDetail",
+        "resolved": "\"next\" | \"previous\"",
+        "references": {
+          "GuxPaginationCursorDetail": {
+            "location": "import",
+            "path": "./gux-pagination-cursor.types"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "root"; }
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,71 @@
+:host {
+  color: #2e394c;
+}
+.gux-popover-wrapper {
+  z-index: 2;
+  display: inline-block;
+  padding: 16px;
+  background-color: #fdfdfd;
+  border: 1px solid #b4bccb;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(32, 41, 55, 0.24);
+}
+.gux-popover-wrapper .gux-arrow,
+.gux-popover-wrapper .gux-arrow::before {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: inherit;
+}
+.gux-popover-wrapper .gux-arrow {
+  visibility: hidden;
+}
+.gux-popover-wrapper .gux-arrow::before {
+  visibility: visible;
+  content: '';
+  transform: rotate(45deg);
+}
+.gux-popover-wrapper[data-popper-placement='bottom'] .gux-arrow,
+.gux-popover-wrapper[data-popper-placement='bottom-start'] .gux-arrow,
+.gux-popover-wrapper[data-popper-placement='bottom-end'] .gux-arrow {
+  top: -5px;
+}
+.gux-popover-wrapper[data-popper-placement='bottom'] .gux-arrow::before,
+.gux-popover-wrapper[data-popper-placement='bottom-start'] .gux-arrow::before,
+.gux-popover-wrapper[data-popper-placement='bottom-end'] .gux-arrow::before {
+  border-top: 1px solid #b4bccb;
+  border-left: 1px solid #b4bccb;
+}
+.gux-popover-wrapper[data-popper-placement='top'] .gux-arrow,
+.gux-popover-wrapper[data-popper-placement='top-start'] .gux-arrow,
+.gux-popover-wrapper[data-popper-placement='top-end'] .gux-arrow {
+  bottom: -5px;
+}
+.gux-popover-wrapper[data-popper-placement='top'] .gux-arrow::before,
+.gux-popover-wrapper[data-popper-placement='top-start'] .gux-arrow::before,
+.gux-popover-wrapper[data-popper-placement='top-end'] .gux-arrow::before {
+  border-right: 1px solid #b4bccb;
+  border-bottom: 1px solid #b4bccb;
+}
+.gux-popover-wrapper[data-popper-placement='left'] .gux-arrow,
+.gux-popover-wrapper[data-popper-placement='left-start'] .gux-arrow,
+.gux-popover-wrapper[data-popper-placement='left-end'] .gux-arrow {
+  right: -5px;
+}
+.gux-popover-wrapper[data-popper-placement='left'] .gux-arrow::before,
+.gux-popover-wrapper[data-popper-placement='left-start'] .gux-arrow::before,
+.gux-popover-wrapper[data-popper-placement='left-end'] .gux-arrow::before {
+  border-top: 1px solid #b4bccb;
+  border-right: 1px solid #b4bccb;
+}
+.gux-popover-wrapper[data-popper-placement='right'] .gux-arrow,
+.gux-popover-wrapper[data-popper-placement='right-start'] .gux-arrow,
+.gux-popover-wrapper[data-popper-placement='right-end'] .gux-arrow {
+  left: -5px;
+}
+.gux-popover-wrapper[data-popper-placement='right'] .gux-arrow::before,
+.gux-popover-wrapper[data-popper-placement='right-start'] .gux-arrow::before,
+.gux-popover-wrapper[data-popper-placement='right-end'] .gux-arrow::before {
+  border-bottom: 1px solid #b4bccb;
+  border-left: 1px solid #b4bccb;
+}

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

@@ -0,0 +1,212 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) 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 { Component, Element, Event, h, Prop, State, Watch } from '@stencil/core';
+import { OnClickOutside } from '../../../utils/decorator/on-click-outside';
+import { onHiddenChange } from '../../../utils/dom/on-attribute-change';
+import { trackComponent } from '../../../usage-tracking';
+export class GuxPopover {
+  constructor() {
+    /**
+     * Indicate position of popover element arrow (follow popper js position attribute api)
+     */
+    this.position = 'bottom';
+    /**
+     * Close popover when the user clicks outside of its bounds
+     */
+    this.closeOnClickOutside = false;
+    this.hidden = true;
+  }
+  hiddenHandler(hidden) {
+    if (!hidden && !this.popperInstance) {
+      this.runPopper();
+    }
+    else if (!hidden && this.popperInstance) {
+      this.popperInstance.forceUpdate();
+    }
+  }
+  checkForClickOutside(event) {
+    const clickPath = event.composedPath();
+    const forElement = document.getElementById(this.for);
+    const clickedForElement = clickPath.includes(forElement);
+    if ((this.closeOnClickOutside || !this.displayDismissButton) &&
+      !this.hidden &&
+      !clickedForElement) {
+      this.dismiss();
+    }
+  }
+  runPopper() {
+    const forElement = document.getElementById(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: 'offset',
+            options: {
+              offset: [0, 7]
+            }
+          },
+          {
+            name: 'arrow',
+            options: {
+              padding: 16
+            }
+          }
+        ],
+        placement: this.position
+      });
+    }
+  }
+  destroyPopper() {
+    if (this.popperInstance) {
+      this.popperInstance.destroy();
+      this.popperInstance = null;
+    }
+  }
+  dismiss() {
+    const dismissEvent = this.guxdismiss.emit();
+    if (!dismissEvent.defaultPrevented) {
+      this.root.setAttribute('hidden', '');
+    }
+  }
+  connectedCallback() {
+    trackComponent(this.root, { variant: this.position });
+    this.hiddenObserver = onHiddenChange(this.root, (hidden) => {
+      this.hidden = hidden;
+    });
+    this.hidden = this.root.hidden;
+  }
+  componentDidLoad() {
+    this.runPopper();
+  }
+  disconnectedCallback() {
+    this.destroyPopper();
+    this.hiddenObserver.disconnect();
+  }
+  render() {
+    return (h("div", { ref: (el) => (this.popupElement = el), class: "gux-popover-wrapper" },
+      h("div", { class: "gux-arrow", "data-popper-arrow": true }),
+      this.displayDismissButton && (h("gux-dismiss-button", { onClick: this.dismiss.bind(this) })),
+      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"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-popover.css"]
+  }; }
+  static get properties() { return {
+    "for": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates the id of the element the popover should anchor to"
+      },
+      "attribute": "for",
+      "reflect": false
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "PopperPosition",
+        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+        "references": {
+          "PopperPosition": {
+            "location": "import",
+            "path": "./gux-popover.types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicate position of popover element arrow (follow popper js position attribute api)"
+      },
+      "attribute": "position",
+      "reflect": false,
+      "defaultValue": "'bottom'"
+    },
+    "displayDismissButton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicate if the dismiss button is displayed"
+      },
+      "attribute": "display-dismiss-button",
+      "reflect": false
+    },
+    "closeOnClickOutside": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Close popover when the user clicks outside of its bounds"
+      },
+      "attribute": "close-on-click-outside",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "hidden": {}
+  }; }
+  static get events() { return [{
+      "method": "guxdismiss",
+      "name": "guxdismiss",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a user dismisses the popover"
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "root"; }
+  static get watchers() { return [{
+      "propName": "hidden",
+      "methodName": "hiddenHandler"
+    }]; }
+}
+__decorate([
+  OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxPopover.prototype, "checkForClickOutside", null);

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+.gux-target-container.gux-disabled {
+  pointer-events: none;
+  cursor: default;
+  opacity: 0.5;
+}
+.gux-popup-container {
+  z-index: 1;
+  visibility: hidden;
+}
+.gux-popup-container.gux-expanded {
+  visibility: visible;
+}