genesys-spark-components 3.2.0 → 3.3.0

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

@@ -0,0 +1,77 @@
+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-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-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 {
+  height: 32px;
+  padding: 0 8px;
+  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: 5px;
+  outline: none;
+}
+gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current {
+  font-weight: 600;
+}
+gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target {
+  color: #2a60c8;
+  cursor: pointer;
+}
+gux-pagination-buttons-beta .gux-pagination-buttons-container .gux-pagination-buttons-spacer {
+  width: 8px;
+}

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

@@ -0,0 +1,154 @@
+import { Component, Element, Event, h, Prop } from '@stencil/core';
+import { buildI18nForComponent } from '../../../../i18n';
+import paginationResources from './i18n/en.json';
+import { GuxPaginationButtonsService } from './gux-pagination-button-beta.service';
+export class GuxPaginationButtonsBeta {
+  constructor() {
+    this.layout = 'advanced';
+  }
+  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);
+  }
+  getPageListEnteries(currentPage, totalPages) {
+    return GuxPaginationButtonsService.getPageList(currentPage, totalPages).reduce((acc, cv) => {
+      if (cv.current) {
+        return acc.concat((h("button", { class: "gux-pagination-buttons-list-current" }, cv.display)));
+      }
+      return acc.concat((h("button", { class: "gux-pagination-buttons-list-target", onClick: () => this.handleClickPage(cv.pageNumber) }, cv.display)));
+    }, []);
+  }
+  getSmallPagePicker() {
+    return (h("div", { class: 'gux-pagination-buttons-spacer' }));
+  }
+  getFullPagePicker() {
+    return (h("div", { class: "gux-pagination-buttons-list-container" }, this.getPageListEnteries(this.currentPage, this.totalPages)));
+  }
+  getPagePicker(layout) {
+    if (layout === 'simple') {
+      return this.getSmallPagePicker();
+    }
+    return this.getFullPagePicker();
+  }
+  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: "secondary" },
+          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: "secondary" },
+          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.getPagePicker(this.layout),
+      h("div", { class: "gux-pagination-buttons-group" },
+        h("gux-button-slot-beta", { accent: "secondary" },
+          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: "secondary" },
+          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": false,
+      "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"; }
+}

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

@@ -0,0 +1,9 @@
+gux-pagination-item-counts-beta {
+  color: #2e394c;
+}
+gux-pagination-item-counts-beta .gux-pagination-item-counts-container {
+  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-item-counts-beta/gux-pagination-item-counts-beta.js

@@ -0,0 +1,102 @@
+import { Component, Element, h, Prop } from '@stencil/core';
+import { buildI18nForComponent } from '../../../../i18n';
+import paginationResources from './i18n/en.json';
+export class GuxPaginationItemCountsBeta {
+  constructor() {
+    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 buildI18nForComponent(this.root, paginationResources);
+  }
+  getPaginationItemCountsRange() {
+    if (this.totalItems) {
+      return (h("span", null, this.i18n('totalItems', { totalItems: this.totalItems })));
+    }
+  }
+  render() {
+    return (h("div", { class: "gux-pagination-item-counts-container" },
+      h("span", { class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
+        firstItem: this.firstItem,
+        lastItem: this.lastItem
+      })),
+      this.getPaginationItemCountsRange()));
+  }
+  static get is() { return "gux-pagination-item-counts-beta"; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-pagination-item-counts-beta.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-pagination-item-counts-beta.css"]
+  }; }
+  static get properties() { return {
+    "totalItems": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "total-items",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "currentPage": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "current-page",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "itemsPerPage": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "items-per-page",
+      "reflect": false,
+      "defaultValue": "25"
+    }
+  }; }
+  static get elementRef() { return "root"; }
+}

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

@@ -0,0 +1,25 @@
+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: 0 8px 0 16px;
+}
+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-pagination-beta/gux-pagination-items-per-page-beta/gux-pagination-items-per-page-beta.js

@@ -0,0 +1,85 @@
+import { Component, Element, Event, h, Listen, Prop } from '@stencil/core';
+import { buildI18nForComponent } from '../../../../i18n';
+import paginationResources from './i18n/en.json';
+export class GuxPaginationItemsPerPageBeta {
+  constructor() {
+    this.itemsPerPage = 25;
+  }
+  handleChange(event) {
+    event.stopPropagation();
+    const newItemsPerPageValue = parseInt(this.dropdownElement.value, 10);
+    this.internalitemsperpagechange.emit(newItemsPerPageValue);
+  }
+  async componentWillLoad() {
+    this.i18n = await buildI18nForComponent(this.root, paginationResources);
+  }
+  getDropdown() {
+    return (h("gux-dropdown", { ref: el => (this.dropdownElement = el), value: `${this.itemsPerPage}` },
+      h("gux-listbox", { "aria-label": this.i18n('itemsPerPage') },
+        h("gux-option", { value: "25" }, "25"),
+        h("gux-option", { value: "50" }, "50"),
+        h("gux-option", { value: "75" }, "75"),
+        h("gux-option", { value: "100" }, "100"))));
+  }
+  render() {
+    return (h("div", { class: "gux-pagination-items-per-page-container" },
+      h("div", { class: "gux-pagination-items-per-page-picker" }, this.getDropdown()),
+      h("div", null, this.i18n('perPage'))));
+  }
+  static get is() { return "gux-pagination-items-per-page-beta"; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-pagination-items-per-page-beta.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-pagination-items-per-page-beta.css"]
+  }; }
+  static get properties() { return {
+    "itemsPerPage": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "GuxItemsPerPage",
+        "resolved": "100 | 25 | 50 | 75",
+        "references": {
+          "GuxItemsPerPage": {
+            "location": "import",
+            "path": "../gux-pagination-beta.types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "items-per-page",
+      "reflect": false,
+      "defaultValue": "25"
+    }
+  }; }
+  static get events() { return [{
+      "method": "internalitemsperpagechange",
+      "name": "internalitemsperpagechange",
+      "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": "change",
+      "method": "handleChange",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/beta/gux-table/gux-all-row-select/gux-all-row-select.js

@@ -18,7 +18,7 @@ export class GuxAllRowSelect {
     this.inputElement.indeterminate = indeterminate;
   }
   async componentWillLoad() {
-    this.i18n = await buildI18nForComponent(this.root, tableResources);
+    this.i18n = await buildI18nForComponent(this.root, tableResources, 'gux-table');
   }
   render() {
     return (h("gux-form-field-checkbox", null,

package/dist/collection/components/beta/gux-table/gux-row-select/gux-row-select.js

@@ -14,7 +14,7 @@ export class GuxRowSelect {
     this.internalrowselectchange.emit();
   }
   async componentWillLoad() {
-    this.i18n = await buildI18nForComponent(this.root, tableResources);
+    this.i18n = await buildI18nForComponent(this.root, tableResources, 'gux-table');
   }
   render() {
     return (h("gux-form-field-checkbox", null,

package/dist/collection/components/stable/gux-tabs/gux-tab/gux-tab.js

@@ -13,9 +13,11 @@ export class GuxTab {
     }
   }
   onFocusin() {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
     void this.tooltipTitleElement.setShowTooltip();
   }
   onFocusout() {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
     void this.tooltipTitleElement.setHideTooltip();
   }
   // eslint-disable-next-line @typescript-eslint/require-await

package/dist/collection/components/stable/gux-tabs/gux-tab-list/gux-tab-list.js

@@ -152,7 +152,7 @@ export class GuxTabList {
   }
   async componentWillLoad() {
     this.setTabTriggers();
-    this.i18n = await buildI18nForComponent(this.root, tabsResources);
+    this.i18n = await buildI18nForComponent(this.root, tabsResources, 'gux-tabs');
   }
   componentDidLoad() {
     if (!this.resizeObserver && window.ResizeObserver) {

package/dist/collection/components/stable/gux-tabs-advanced/gux-tab-advanced/gux-tab-advanced.js

@@ -108,7 +108,7 @@ export class GuxTabAdvanced {
     }, this.moveFocusDelay);
   }
   async componentWillLoad() {
-    this.i18n = await buildI18nForComponent(this.root, tabsResources);
+    this.i18n = await buildI18nForComponent(this.root, tabsResources, 'gux-tabs-advanced');
   }
   componentDidLoad() {
     this.tabTitle = this.root

package/dist/collection/components/stable/gux-tabs-advanced/gux-tab-advanced-list/gux-tab-advanced-list.js

@@ -364,7 +364,7 @@ export class GuxTabAdvancedList {
   }
   async componentWillLoad() {
     this.setTabTriggers();
-    this.i18n = await buildI18nForComponent(this.root, tabsResources);
+    this.i18n = await buildI18nForComponent(this.root, tabsResources, 'gux-tabs-advanced');
   }
   componentDidLoad() {
     if (this.allowSort && !this.sortableInstance) {

package/dist/collection/components/stable/gux-tooltip-title/gux-tooltip-title.js

@@ -28,12 +28,14 @@ export class GuxTooltipTitle {
   async setShowTooltip() {
     if (this.tooltipElement) {
       this.showTooltip = true;
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       await this.tooltipElement.showTooltip();
     }
   }
   async setHideTooltip() {
     if (this.tooltipElement) {
       this.showTooltip = false;
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       await this.tooltipElement.hideTooltip();
     }
   }

package/dist/collection/i18n/index.js

@@ -5,12 +5,12 @@ import locales from './locales.json';
 import * as startOfWeekDataUntyped from './start-of-week.json';
 import { getClosestElement } from '../utils/dom/get-closest-element';
 const DEFAULT_LOCALE = 'en';
-export async function buildI18nForComponent(component, defaultResources) {
+export async function buildI18nForComponent(component, defaultResources, parentComponent) {
   let resources = defaultResources;
   let locale = 'en';
   if (component !== undefined) {
     locale = getDesiredLocale(component);
-    resources = await getComponentI18nResources(component, defaultResources, locale);
+    resources = await getComponentI18nResources(component, defaultResources, locale, parentComponent);
   }
   const intlFormats = Object.entries(resources).reduce((map, [key, val]) => {
     map.set(key, new IntlMessageFormat(val, locale));
@@ -30,10 +30,9 @@ export async function buildI18nForComponent(component, defaultResources) {
     return i18nString;
   };
 }
-export async function getComponentI18nResources(component, defaultResources, locale) {
-  const componentName = component.tagName
-    .toLocaleLowerCase()
-    .replace(/-beta$/, '');
+export async function getComponentI18nResources(component, defaultResources, locale, parentComponent) {
+  const componentName = parentComponent ||
+    component.tagName.toLocaleLowerCase().replace(/-beta$/, '');
   let resources;
   if (component['i18n-resources']) {
     resources = component['i18n-resources'];
@@ -61,7 +60,6 @@ export function getDesiredLocale(element) {
     return lang;
   }
   else {
-    console.error(`gux: No translation locale found for ${locale}, defaulting to '${DEFAULT_LOCALE}'`);
     return DEFAULT_LOCALE;
   }
 }
@@ -71,7 +69,6 @@ function findLocaleInDom(element) {
     return closestElement.lang.toLowerCase();
   }
   else {
-    console.error(`gux: No language specified on page, defaulting to '${DEFAULT_LOCALE}'`, element.tagName);
     return DEFAULT_LOCALE;
   }
 }

package/dist/deploy-info.json

@@ -1,9 +1,9 @@
 {
   "name": "spark-components",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "ecosystem": "pc",
   "team": "Core UI",
   "indexFiles": [],
-  "build": "28",
-  "buildDate": "2022-06-09T19:37:07.635280Z"
+  "build": "32",
+  "buildDate": "2022-06-13T18:22:37.673964Z"
 }