genesys-spark-components 4.5.0 → 4.6.0

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

@@ -0,0 +1,48 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - collection of elements conforming to the ListboxOptionElement interface
+ */
+export class GuxOptionGroup {
+  constructor() {
+    this.label = undefined;
+  }
+  // @Prop()
+  // disabled: boolean;
+  // TOOD: Add disabled state once design work is complete
+  render() {
+    return (h(Host, null, h("div", { class: "gux-option-group" }, h("div", { class: "gux-option-group-label", role: "presentation" }, this.label), h("div", { role: "group" }, h("slot", null)), h("gux-list-divider", null))));
+  }
+  static get is() { return "gux-option-group-beta"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gux-option-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gux-option-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      }
+    };
+  }
+}

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

@@ -16,6 +16,9 @@
   word-wrap: break-word;
   cursor: pointer;
 }
+:host .gux-option-wrapper {
+  width: 100%;
+}
 :host .gux-slot-container {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -49,6 +52,20 @@
   outline-offset: -2px;
 }
 
+:host(.gux-show-subtext) {
+  place-content: stretch flex-start;
+  height: auto;
+}
+:host(.gux-show-subtext) .gux-option-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+:host(.gux-show-subtext) slot[name=subtext]::slotted(*) {
+  height: var(--gse-ui-groupedMenu-subtext-height);
+  font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
+  color: var(--gse-ui-menu-groupedMenu-subtext-foregroundColor);
+}
+
 :host(:hover:not(:disabled)) {
   background: var(--gse-ui-menu-option-hover-backgroundColor);
 }

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

@@ -1,7 +1,9 @@
 import { h, Host } from "@stencil/core";
 import { randomHTMLId } from "../../../../../utils/dom/random-html-";
+import { hasSlot } from "../../../../../utils/dom/has-slot";
 /**
  * @slot - text
+ * @slot subtext - Optional slot for subtext
  */
 export class GuxOption {
   constructor() {
@@ -10,6 +12,7 @@ export class GuxOption {
     this.selected = false;
     this.disabled = false;
     this.filtered = false;
+    this.hasSubtext = false;
   }
   handleActive(active) {
     var _a, _b;
@@ -22,6 +25,10 @@ export class GuxOption {
   }
   componentWillLoad() {
     this.root.id = this.root.id || randomHTMLId('gux-option');
+    this.onSubtextChange();
+  }
+  onSubtextChange() {
+    this.hasSubtext = hasSlot(this.root, 'subtext');
   }
   getAriaSelected() {
     if (this.disabled) {
@@ -34,8 +41,9 @@ export class GuxOption {
         'gux-active': this.active,
         'gux-disabled': this.disabled,
         'gux-filtered': this.filtered,
-        'gux-selected': this.selected
-      }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, h("gux-truncate", { ref: el => (this.truncateElement = el) }, h("slot", null))));
+        'gux-selected': this.selected,
+        'gux-show-subtext': this.hasSubtext
+      }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, h("div", { class: "gux-option-wrapper" }, h("gux-truncate", { ref: el => (this.truncateElement = el) }, h("slot", null)), h("slot", { onSlotchange: () => this.onSubtextChange(), name: "subtext" }))));
   }
   static get is() { return "gux-option"; }
   static get encapsulation() { return "shadow"; }
@@ -142,6 +150,11 @@ export class GuxOption {
       }
     };
   }
+  static get states() {
+    return {
+      "hasSubtext": {}
+    };
+  }
   static get elementRef() { return "root"; }
   static get watchers() {
     return [{

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

@@ -16,6 +16,9 @@
   word-wrap: break-word;
   cursor: pointer;
 }
+:host .gux-option-wrapper {
+  width: 100%;
+}
 :host .gux-slot-container {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -49,6 +52,20 @@
   outline-offset: -2px;
 }
 
+:host(.gux-show-subtext) {
+  place-content: stretch flex-start;
+  height: auto;
+}
+:host(.gux-show-subtext) .gux-option-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+:host(.gux-show-subtext) slot[name=subtext]::slotted(*) {
+  height: var(--gse-ui-groupedMenu-subtext-height);
+  font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
+  color: var(--gse-ui-menu-groupedMenu-subtext-foregroundColor);
+}
+
 :host(:hover:not(:disabled)) {
   background: var(--gse-ui-menu-option-hover-backgroundColor);
 }

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

@@ -1,7 +1,9 @@
 import { h, Host } from "@stencil/core";
 import { randomHTMLId } from "../../../../../utils/dom/random-html-";
+import { hasSlot } from "../../../../../utils/dom/has-slot";
 /**
  * @slot - text
+ * @slot subtext - Optional slot for subtext
  */
 export class GuxOptionIcon {
   constructor() {
@@ -14,6 +16,7 @@ export class GuxOptionIcon {
     this.disabled = false;
     this.filtered = false;
     this.hovered = false;
+    this.hasSubtext = false;
   }
   onmouseenter() {
     this.hovered = true;
@@ -32,6 +35,10 @@ export class GuxOptionIcon {
   }
   componentWillLoad() {
     this.root.id = this.root.id || randomHTMLId('gux-option-icon');
+    this.onSubtextChange();
+  }
+  onSubtextChange() {
+    this.hasSubtext = hasSlot(this.root, 'subtext');
   }
   getAriaSelected() {
     if (this.disabled) {
@@ -51,8 +58,9 @@ export class GuxOptionIcon {
         'gux-disabled': this.disabled,
         'gux-filtered': this.filtered,
         'gux-hovered': this.hovered,
-        'gux-selected': this.selected
-      }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, h("gux-icon", { decorative: this.iconSrText == null, "screenreader-text": this.iconSrText, "icon-name": this.iconName, style: iconStyle }), h("gux-truncate", { ref: el => (this.truncateElement = el) }, h("slot", null))));
+        'gux-selected': this.selected,
+        'gux-show-subtext': this.hasSubtext
+      }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, h("gux-icon", { decorative: this.iconSrText == null, "screenreader-text": this.iconSrText, "icon-name": this.iconName, style: iconStyle }), h("div", { class: "gux-option-wrapper" }, h("gux-truncate", { ref: el => (this.truncateElement = el) }, h("slot", null)), h("slot", { onSlotchange: () => this.onSubtextChange(), name: "subtext" }))));
   }
   static get is() { return "gux-option-icon"; }
   static get encapsulation() { return "shadow"; }
@@ -228,6 +236,11 @@ export class GuxOptionIcon {
       }
     };
   }
+  static get states() {
+    return {
+      "hasSubtext": {}
+    };
+  }
   static get elementRef() { return "root"; }
   static get watchers() {
     return [{

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

@@ -16,6 +16,9 @@
   word-wrap: break-word;
   cursor: pointer;
 }
+:host .gux-option-wrapper {
+  width: 100%;
+}
 :host .gux-checkbox-container {
   position: relative;
   display: inline-block;
@@ -53,6 +56,19 @@
   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);
   outline-offset: -2px;
 }
+:host:host(.gux-show-subtext) {
+  place-content: stretch flex-start;
+  height: auto;
+}
+:host:host(.gux-show-subtext) .gux-option-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+:host:host(.gux-show-subtext) slot[name=subtext]::slotted(*) {
+  height: var(--gse-ui-groupedMenu-subtext-height);
+  font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
+  color: var(--gse-ui-menu-groupedMenu-subtext-foregroundColor);
+}
 :host:host(:hover:not([disabled])) {
   background-color: var(--gse-ui-menu-option-hover-backgroundColor);
 }

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

@@ -2,8 +2,10 @@ import { h, Host } from "@stencil/core";
 import { randomHTMLId } from "../../../../utils/dom/random-html-";
 import { buildI18nForComponent } from "../../../../i18n";
 import translationResources from "./i18n/en.json";
+import { hasSlot } from "../../../../utils/dom/has-slot";
 /**
  * @slot - text
+ * @slot subtext - Optional slot for subtext
  */
 export class GuxOptionMulti {
   constructor() {
@@ -13,6 +15,7 @@ export class GuxOptionMulti {
     this.disabled = false;
     this.filtered = false;
     this.custom = false;
+    this.hasSubtext = false;
   }
   emitRemoveCustomOption() {
     if (!this.selected && this.custom) {
@@ -34,6 +37,10 @@ export class GuxOptionMulti {
     if (this.custom) {
       this.internalselectcustomoption.emit(this.value);
     }
+    this.onSubtextChange();
+  }
+  onSubtextChange() {
+    this.hasSubtext = hasSlot(this.root, 'subtext');
   }
   // SVGs must be in DOM for tokenization to work
   renderSVGCheckbox() {
@@ -51,8 +58,9 @@ export class GuxOptionMulti {
         'gux-active': this.active,
         'gux-disabled': this.disabled,
         'gux-filtered': this.filtered,
-        'gux-selected': this.selected
-      }, "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()));
+        'gux-selected': this.selected,
+        'gux-show-subtext': this.hasSubtext
+      }, "aria-selected": this.selected.toString(), "aria-disabled": this.disabled.toString() }, this.renderSVGCheckbox(), h("div", { class: "gux-option-wrapper" }, h("gux-truncate", { ref: el => (this.truncateElement = el) }, h("slot", null)), h("slot", { onSlotchange: () => this.onSubtextChange(), name: "subtext" })), this.renderCustomOptionInstructions()));
   }
   static get is() { return "gux-option-multi"; }
   static get encapsulation() { return "shadow"; }
@@ -177,6 +185,11 @@ export class GuxOptionMulti {
       }
     };
   }
+  static get states() {
+    return {
+      "hasSubtext": {}
+    };
+  }
   static get events() {
     return [{
         "method": "guxremovecustomoption",

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

@@ -40,12 +40,16 @@ export class GuxPaginationButtons {
   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)));
+        return acc.concat((h("button", { ref: el => (this.currentElement = el), class: "gux-pagination-buttons-list-current", "aria-label": this.i18n('pageSelected', {
+            pageSelected: cv.pageNumber
+          }) }, 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)));
+      return acc.concat((h("button", { class: "gux-pagination-buttons-list-target", onClick: () => this.handlePageChange(cv.pageNumber), "aria-label": this.i18n('pageNumber', {
+          pageNumber: cv.pageNumber
+        }) }, cv.display)));
     }, []);
   }
   getPageNavigation() {
@@ -55,7 +59,7 @@ export class GuxPaginationButtons {
     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", { 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", { 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", { 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", { 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" }))))));
+    return (h("div", { class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { class: "gux-pagination-buttons-group" }, h("gux-button-slot", { accent: "ghost" }, h("button", { title: this.i18n('firstPage'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-double-left" }))), h("gux-button-slot", { accent: "ghost" }, h("button", { title: this.i18n('previousPage'), 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", { accent: "ghost" }, h("button", { title: this.i18n('nextPage'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))), h("gux-button-slot", { accent: "ghost" }, h("button", { title: this.i18n('lastPage'), 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"; }
   static get originalStyleUrls() {

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

@@ -6,6 +6,7 @@ import { autoUpdate, computePosition, flip, offset, size, shift, hide } from "@f
  */
 export class GuxPopup {
   constructor() {
+    this.placement = 'bottom-start';
     this.expanded = false;
     this.disabled = false;
     this.offset = 2;
@@ -24,7 +25,7 @@ export class GuxPopup {
       const exceedTargetWidth = this.exceedTargetWidth;
       void computePosition(this.targetElementContainer, this.popupElementContainer, {
         strategy: 'fixed',
-        placement: 'bottom-start',
+        placement: this.placement,
         middleware: [
           offset(this.offset),
           flip(),
@@ -110,6 +111,30 @@ export class GuxPopup {
   }
   static get properties() {
     return {
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Placement",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "Placement": {
+              "location": "import",
+              "path": "@floating-ui/dom",
+              "id": "../../node_modules/@floating-ui/dom/index.d.ts::Placement"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Placement of the popup. Default is bottom-start"
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'bottom-start'"
+      },
       "expanded": {
         "type": "boolean",
         "mutable": false,

package/dist/component-specs.json

@@ -560,10 +560,15 @@
         "fa/align-justify-regular",
         "fa/align-left-regular",
         "fa/align-right-regular",
+        "fa/arrow-down-left-and-arrow-up-right-to-center-regular",
         "fa/arrow-down-wide-short-regular",
         "fa/arrow-left-to-line-solid",
+        "fa/arrow-right-to-bracket-regular",
         "fa/arrow-right-to-line-solid",
         "fa/arrow-turn-down-right-regular",
+        "fa/arrow-up-right-and-arrow-down-left-from-center-regular",
+        "fa/arrows-down-to-people-regular",
+        "fa/arrows-rotate-regular",
         "fa/arrows-rotate-solid",
         "fa/arrows-to-circle-regular",
         "fa/asterix-regular",
@@ -602,6 +607,7 @@
         "fa/diagram-project-gear-regular",
         "fa/diagram-project-regular",
         "fa/diamond-regular",
+        "fa/display-regular",
         "fa/draw-circle-solid",
         "fa/eye-regular",
         "fa/eye-slash-regular",
@@ -611,6 +617,7 @@
         "fa/face-laugh-solid",
         "fa/file-chart-pie-regular",
         "fa/file-exclamation-regular",
+        "fa/file-regular",
         "fa/file-zip-regular",
         "fa/film-solid",
         "fa/filter-solid",
@@ -655,6 +662,7 @@
         "fa/question-solid",
         "fa/ranking-star-regular",
         "fa/rectangle-list-regular",
+        "fa/regular-display-slash",
         "fa/regular-user-circle-arrow-left",
         "fa/reply-regular",
         "fa/right-to-bracket-regular",
@@ -979,7 +987,8 @@
         "above",
         "beside",
         "screenreader"
-      ]
+      ],
+      "loading": "checkbox"
     },
     "events": []
   },

package/dist/deploy-info.json

@@ -1,9 +1,9 @@
 {
   "name": "spark-components",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "ecosystem": "pc",
   "team": "Core UI",
   "indexFiles": [],
-  "build": "34",
-  "buildDate": "2023-12-19T05:20:56.808297Z"
+  "build": "71",
+  "buildDate": "2024-01-19T10:52:50.210703Z"
 }

package/dist/esm/en-25a315a0.js

@@ -0,0 +1,24 @@
+const page = "Page";
+const totalPages = " of {totalPages, number}";
+const firstPage = "First page";
+const previousPage = "Previous page";
+const nextPage = "Next page";
+const lastPage = "Last page";
+const pageInputLabel = "Page {currentPage, number} of {totalPages, number}";
+const goToPage = "Go to page";
+const pageNumber = "Page {pageNumber}";
+const pageSelected = "Page {pageSelected} selected";
+const translationResources = {
+	page: page,
+	totalPages: totalPages,
+	firstPage: firstPage,
+	previousPage: previousPage,
+	nextPage: nextPage,
+	lastPage: lastPage,
+	pageInputLabel: pageInputLabel,
+	goToPage: goToPage,
+	pageNumber: pageNumber,
+	pageSelected: pageSelected
+};
+
+export { translationResources as t };