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

package/dist/collection/components/beta/gux-loading-message/gux-loading-message-constants.js

@@ -1,5 +0,0 @@
-/**
- * Below are the max-widths for the loading component.
- */
-export const SMALL_LOADING_MESSAGE = 160;
-export const MEDIUM_LOADING_MESSAGE = 300;

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

@@ -1,55 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.gux-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.gux-container slot[name='primary-message'] {
-  color: #364154;
-  text-align: center;
-}
-.gux-container slot[name='additional-guidance'] {
-  color: #596373;
-  text-align: center;
-}
-.gux-container.gux-small,
-.gux-container.gux-medium {
-  padding: 8px 0 4px;
-}
-.gux-container.gux-small slot[name='primary-message'],
-.gux-container.gux-medium slot[name='primary-message'] {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 20px;
-}
-.gux-container.gux-small slot[name='additional-guidance'],
-.gux-container.gux-medium slot[name='additional-guidance'] {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 11px;
-  line-height: 16px;
-}
-.gux-container.gux-large {
-  padding: 16px 0 4px;
-}
-.gux-container.gux-large slot[name='primary-message'] {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 300;
-  font-size: 24px;
-  line-height: 32px;
-}
-.gux-container.gux-large slot[name='additional-guidance'] {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 24px;
-}

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

@@ -1,75 +0,0 @@
-import { h, readTask } from '@stencil/core';
-import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
-import { trackComponent } from '@utils/tracking/usage';
-import * as loadingMessageWidth from './gux-loading-message-constants';
-/**
- * @slot progress - Required slot for progress.
- * @slot primary-guidance - Required slot for primary guidance.
- * @slot additional-guidance - Slot for additional guidance.
- */
-export class GuxLoadingMessage {
-  constructor() {
-    this.hasAdditionalGuidance = undefined;
-    this.loadingMessageSize = undefined;
-  }
-  updateLoadingMessageSize() {
-    readTask(() => {
-      const containerWidth = this.root.clientWidth;
-      if (containerWidth <= loadingMessageWidth.SMALL_LOADING_MESSAGE) {
-        this.loadingMessageSize = 'small';
-      }
-      else if (containerWidth <= loadingMessageWidth.MEDIUM_LOADING_MESSAGE) {
-        this.loadingMessageSize = 'medium';
-      }
-      else {
-        this.loadingMessageSize = 'large';
-      }
-    });
-  }
-  componentWillLoad() {
-    trackComponent(this.root);
-  }
-  componentDidLoad() {
-    if (!this.resizeObserver && window.ResizeObserver) {
-      this.resizeObserver = new ResizeObserver(() => {
-        this.updateLoadingMessageSize();
-      });
-    }
-    if (this.resizeObserver) {
-      this.resizeObserver.observe(this.root);
-    }
-    afterNextRenderTimeout(() => {
-      this.updateLoadingMessageSize();
-    }, 500);
-  }
-  disconnectedCallback() {
-    if (this.resizeObserver) {
-      this.resizeObserver.unobserve(this.root);
-    }
-  }
-  render() {
-    return (h("div", { class: {
-        'gux-container': true,
-        [`gux-${this.loadingMessageSize}`]: true
-      }, role: "alert", "aria-live": "assertive" }, h("slot", { name: "progress" }), h("slot", { name: "primary-message" }), h("slot", { name: "additional-guidance" })));
-  }
-  static get is() { return "gux-loading-message-beta"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["gux-loading-message.less"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["gux-loading-message.css"]
-    };
-  }
-  static get states() {
-    return {
-      "hasAdditionalGuidance": {},
-      "loadingMessageSize": {}
-    };
-  }
-  static get elementRef() { return "root"; }
-}

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

@@ -1,134 +0,0 @@
-export class GuxPaginationButtonsService {
-  static displayAllPageButtons(currentPage, totalPages, layout) {
-    switch (layout) {
-      case 'advanced':
-        return getAdvancedList(currentPage, totalPages);
-      case 'simple':
-        return getSimpleList(currentPage, totalPages);
-    }
-  }
-}
-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),
-        current: pageNumber === currentPage
-      };
-    });
-    return [
-      {
-        pageNumber: 1,
-        display: '1',
-        current: false
-      },
-      {
-        pageNumber: totalPages - 6,
-        display: '...',
-        current: false
-      },
-      ...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,
-        display: '...',
-        current: false
-      },
-      {
-        pageNumber: totalPages,
-        display: String(totalPages),
-        current: totalPages == currentPage
-      }
-    ];
-  }
-}

package/dist/collection/components/beta/gux-pagination-beta/gux-pagination-buttons-beta/gux-pagination-buttons-beta.css

@@ -1,96 +0,0 @@
-gux-pagination-buttons-beta {
-  color: #2e394c;
-}
-gux-pagination-buttons-beta .gux-pagination-buttons-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-content: stretch;
-  align-items: center;
-  justify-content: flex-end;
-}
-gux-pagination-buttons-beta .gux-pagination-buttons-container > div {
-  flex: 0 1 auto;
-  align-self: auto;
-  order: 0;
-}
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-group {
-  white-space: nowrap;
-}
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-group gux-button-slot-beta:not(:first-of-type) {
-  margin-right: 8px;
-  margin-left: 8px;
-}
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-input-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-content: stretch;
-  align-items: center;
-  justify-content: center;
-  margin: 0 16px;
-}
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-input-container > div {
-  flex: 0 1 auto;
-  align-self: auto;
-  order: 0;
-  white-space: nowrap;
-}
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-input-container .gux-pagination-buttons-input {
-  width: 60px;
-  margin: 0 8px;
-}
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-input-container .gux-pagination-buttons-input input {
-  width: inherit;
-  text-align: center;
-}
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container {
-  display: flex;
-  flex-direction: row;
-  flex-shrink: 0;
-  flex-wrap: nowrap;
-  align-content: stretch;
-  align-items: center;
-  justify-content: center;
-}
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current,
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target {
-  min-width: 28px;
-  min-height: 24px;
-  padding: 2px 4px;
-  margin: 0;
-  background: inherit;
-  border: none;
-}
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current:focus-visible,
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target:focus-visible {
-  border: 3px solid #aac9ff;
-  border-radius: 4px;
-  outline: none;
-}
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current {
-  background-color: #eff1f5;
-  border-radius: 4px;
-  font-size: 12px;
-  line-height: 20px;
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 700;
-}
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 20px;
-  color: #6b7585;
-  cursor: pointer;
-}
-gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target:hover {
-  background-color: #d7dce5;
-  border-radius: 4px;
-  font-size: 12px;
-  line-height: 20px;
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 700;
-}

package/dist/collection/components/beta/gux-pagination-beta/gux-pagination-buttons-beta/gux-pagination-buttons-beta.js

@@ -1,160 +0,0 @@
-import { h } from '@stencil/core';
-import { buildI18nForComponent } from '../../../../i18n';
-import paginationResources from './i18n/en.json';
-import { GuxPaginationButtonsService } from './gux-pagination-button-beta.service';
-import { afterNextRender } from '@utils/dom/after-next-render';
-export class GuxPaginationButtonsBeta {
-  constructor() {
-    this.currentPage = undefined;
-    this.totalPages = undefined;
-    this.layout = 'advanced';
-  }
-  goToPageHandler(event) {
-    this.currentPage = event.detail;
-    this.handlePageChange(this.currentPage);
-    afterNextRender(() => {
-      this.currentElement.focus();
-    });
-  }
-  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);
-  }
-  handlePageChange(pageNumber) {
-    this.internalcurrentpagechange.emit(pageNumber);
-  }
-  getPageListEnteries(currentPage, totalPages, layout) {
-    return GuxPaginationButtonsService.displayAllPageButtons(currentPage, totalPages, layout).reduce((acc, cv) => {
-      if (cv.current) {
-        return acc.concat((h("button", { ref: el => (this.currentElement = el), class: "gux-pagination-buttons-list-current" }, cv.display)));
-      }
-      if (cv.display == '...') {
-        return acc.concat((h("gux-pagination-ellipsis-button", { totalPages: this.totalPages })));
-      }
-      return acc.concat((h("button", { class: "gux-pagination-buttons-list-target", onClick: () => this.handlePageChange(cv.pageNumber) }, cv.display)));
-    }, []);
-  }
-  getPageNavigation() {
-    return (h("div", { class: "gux-pagination-buttons-list-container" }, this.getPageListEnteries(this.currentPage, this.totalPages, this.layout)));
-  }
-  async componentWillLoad() {
-    this.i18n = await buildI18nForComponent(this.root, paginationResources);
-  }
-  render() {
-    return (h("div", { class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { class: "gux-pagination-buttons-group" }, h("gux-button-slot-beta", { accent: "ghost" }, h("button", { title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-double-left" }))), h("gux-button-slot-beta", { accent: "ghost" }, h("button", { title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-left" })))), this.getPageNavigation(), h("div", { class: "gux-pagination-buttons-group" }, h("gux-button-slot-beta", { accent: "ghost" }, h("button", { title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))), h("gux-button-slot-beta", { accent: "ghost" }, h("button", { title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-double-right" }))))));
-  }
-  static get is() { return "gux-pagination-buttons-beta"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["gux-pagination-buttons-beta.less"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["gux-pagination-buttons-beta.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "currentPage": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "current-page",
-        "reflect": false
-      },
-      "totalPages": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "total-pages",
-        "reflect": false
-      },
-      "layout": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "GuxPaginationLayoutBeta",
-          "resolved": "\"advanced\" | \"simple\"",
-          "references": {
-            "GuxPaginationLayoutBeta": {
-              "location": "import",
-              "path": "../gux-pagination-beta.types"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "layout",
-        "reflect": false,
-        "defaultValue": "'advanced'"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "internalcurrentpagechange",
-        "name": "internalcurrentpagechange",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "root"; }
-  static get listeners() {
-    return [{
-        "name": "goToPage",
-        "method": "goToPageHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}

package/dist/collection/components/beta/gux-pagination-beta/gux-pagination-buttons-beta/gux-pagination-ellipsis-button/gux-pagination-ellipsis-button.css

@@ -1,30 +0,0 @@
-button {
-  padding: 0 2px;
-  color: #6b7585;
-  cursor: pointer;
-  background: none;
-  border: none;
-}
-button:hover {
-  color: #2e394c;
-}
-button:focus-visible {
-  border: 3px solid #aac9ff;
-  border-radius: 5px;
-  outline: none;
-}
-button gux-icon {
-  width: 16px;
-  height: 16px;
-  padding-top: 4px;
-}
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  margin: 0;
-  -webkit-appearance: none;
-}
-/* Works for Firefox */
-input[type='number'] {
-  -moz-appearance: textfield;
-}

package/dist/collection/components/beta/gux-pagination-beta/gux-pagination-item-counts-beta/gux-pagination-item-counts-beta.css

@@ -1,10 +0,0 @@
-gux-pagination-item-counts-beta {
-  color: #2e394c;
-}
-gux-pagination-item-counts-beta .gux-pagination-item-counts-container {
-  margin-right: 16px;
-  white-space: nowrap;
-}
-gux-pagination-item-counts-beta .gux-pagination-item-counts-container .gux-pagination-item-counts-range {
-  font-weight: bold;
-}

package/dist/collection/components/beta/gux-pagination-beta/gux-pagination-items-per-page-beta/gux-pagination-items-per-page-beta.css

@@ -1,29 +0,0 @@
-gux-pagination-items-per-page-beta {
-  color: #2e394c;
-}
-gux-pagination-items-per-page-beta .gux-pagination-items-per-page-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-content: stretch;
-  align-items: center;
-  justify-content: center;
-}
-gux-pagination-items-per-page-beta .gux-pagination-items-per-page-container > div {
-  flex: 0 1 auto;
-  align-self: auto;
-  order: 0;
-  white-space: nowrap;
-}
-gux-pagination-items-per-page-beta .gux-pagination-items-per-page-container .gux-pagination-items-per-page-picker {
-  margin-right: 8px;
-}
-gux-pagination-items-per-page-beta .gux-pagination-items-per-page-container .gux-pagination-items-per-page-picker gux-dropdown {
-  display: inline-block;
-  width: 64px;
-}
-gux-pagination-items-per-page-beta .gux-pagination-items-per-page-container gux-dropdown div.gux-dropdown .gux-options.gux-opened {
-  bottom: 100%;
-  display: flex;
-  flex-direction: column-reverse;
-}

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

@@ -1,61 +0,0 @@
-.gux-popover-wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: var(--gux-zindex-popover, 2);
-  display: inline-block;
-  padding: 16px;
-  color: #2e394c;
-  background-color: #fdfdfd;
-  border-radius: 4px;
-  box-shadow: 0 3px 14px rgba(46, 57, 76, 0.22);
-}
-.gux-popover-wrapper.gux-hidden {
-  display: none;
-}
-.gux-popover-wrapper .gux-arrow {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background: inherit;
-}
-.gux-popover-wrapper[data-placement='bottom'] .gux-arrow,
-.gux-popover-wrapper[data-placement='bottom-start'] .gux-arrow,
-.gux-popover-wrapper[data-placement='bottom-end'] .gux-arrow {
-  border-top: 1px solid #b4bccb;
-  border-left: 1px solid #b4bccb;
-}
-.gux-popover-wrapper[data-placement='top'] .gux-arrow,
-.gux-popover-wrapper[data-placement='top-start'] .gux-arrow,
-.gux-popover-wrapper[data-placement='top-end'] .gux-arrow {
-  border-right: 1px solid #b4bccb;
-  border-bottom: 1px solid #b4bccb;
-}
-.gux-popover-wrapper[data-placement='left'] .gux-arrow,
-.gux-popover-wrapper[data-placement='left-start'] .gux-arrow,
-.gux-popover-wrapper[data-placement='left-end'] .gux-arrow {
-  border-top: 1px solid #b4bccb;
-  border-right: 1px solid #b4bccb;
-}
-.gux-popover-wrapper[data-placement='right'] .gux-arrow,
-.gux-popover-wrapper[data-placement='right-start'] .gux-arrow,
-.gux-popover-wrapper[data-placement='right-end'] .gux-arrow {
-  border-bottom: 1px solid #b4bccb;
-  border-left: 1px solid #b4bccb;
-}
-.gux-popover-wrapper .gux-popover-header {
-  font-size: 12px;
-  line-height: 20px;
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 700;
-  display: flex;
-  flex-direction: row;
-  align-content: center;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: 16px;
-}
-.gux-popover-wrapper gux-dismiss-button {
-  float: right;
-}