genesys-spark-components 4.111.6 → 4.113.0

package/dist/collection/components/beta/gux-avatar-group/gux-avatar-group.js

@@ -6,28 +6,56 @@ import { setFocusTarget, resetFocusableSibling } from "./gux-avatar-group.servic
  * @slot - slot for gux-avatar-group-item components
  */
 export class GuxAvatarGroup {
+    constructor() {
+        this.processedGroupItems = [];
+        this.quantity = 7;
+    }
     async componentWillLoad() {
-        trackComponent(this.root);
-        if (this.root.querySelectorAll('gux-avatar-group-item-beta').length === 0) {
-            logWarn(this.root, 'gux-avatar-group-beta: No gux-avatar-group-item-beta tags found in slot. Please add gux-avatar-group-item-beta tags to the slot.');
-        }
+        trackComponent(this.root, { variant: this.quantity.toString() });
     }
     componentDidLoad() {
         this.setInitialFocusTarget();
     }
+    componentWillRender() {
+        this.processGroupItems();
+        this.hideOverflowGroupItems();
+    }
+    onMouseOver(event) {
+        this.hideCurrentTooltip(event);
+    }
+    getGroupItems() {
+        return Array.from(this.root.children);
+    }
     setInitialFocusTarget() {
-        const groupItems = Array.from(this.root.children);
+        const groupItems = this.getGroupItems();
         if (groupItems.length > 0) {
             const firstGroupItem = groupItems[0];
             setFocusTarget(firstGroupItem);
         }
     }
-    onMouseOver(event) {
-        this.hideCurrentTooltip(event);
+    processGroupItems() {
+        const groupItems = this.getGroupItems();
+        this.validateChildElements(groupItems);
+        this.processedGroupItems = groupItems.map((item, index) => {
+            var _a, _b, _c;
+            return {
+                img: (_a = item.querySelector('img')) !== null && _a !== void 0 ? _a : null,
+                name: (_b = item === null || item === void 0 ? void 0 : item.name) !== null && _b !== void 0 ? _b : '',
+                accent: (_c = item === null || item === void 0 ? void 0 : item.accent) !== null && _c !== void 0 ? _c : null,
+                isOverflow: index >= this.quantity,
+                groupItem: item
+            };
+        });
+    }
+    hideOverflowGroupItems() {
+        const overflowItems = this.processedGroupItems.filter(item => item.isOverflow);
+        overflowItems.forEach(item => {
+            item.groupItem.setAttribute('hidden', '');
+        });
     }
     hideCurrentTooltip(event) {
         const target = event.target;
-        const groupItems = Array.from(this.root.children);
+        const groupItems = this.getGroupItems();
         const focusedChild = groupItems.find(child => child.matches(':focus-within'));
         if (focusedChild && focusedChild !== target) {
             focusedChild.hideTooltip();
@@ -35,15 +63,39 @@ export class GuxAvatarGroup {
     }
     handleClick(event) {
         const clickedElement = event.target;
-        resetFocusableSibling(clickedElement);
-        setFocusTarget(clickedElement);
+        if (clickedElement.tagName === 'GUX-AVATAR-GROUP-ITEM-BETA' &&
+            !clickedElement.hasAttribute('hidden')) {
+            resetFocusableSibling(clickedElement);
+            setFocusTarget(clickedElement);
+        }
+    }
+    validateChildElements(childElements) {
+        if (childElements.length === 0) {
+            logWarn(this.root, 'gux-avatar-group-beta: No child elements detected. Please add some gux-avatar-item-beta tags to slot');
+        }
+        const validTagNames = ['GUX-AVATAR-GROUP-ITEM-BETA'];
+        const invalidElements = childElements.some(el => !validTagNames.includes(el.tagName));
+        if (invalidElements) {
+            logWarn(this.root, 'gux-avatar-group-beta: Invalid child element detected. All child elements must be either buttons, anchor tags or gux-avatar-beta components');
+        }
+    }
+    renderOverflowMenu() {
+        if (this.root.children.length > this.quantity) {
+            const overflowItems = this.processedGroupItems.filter(item => item.isOverflow);
+            return (h("gux-avatar-overflow-beta", null, overflowItems.map(item => {
+                var _a, _b;
+                return (h("gux-avatar-overflow-item-beta", { name: item.name, accent: item.accent, onClick: () => item.groupItem.click() }, item.img ? (h("img", { slot: "image", src: (_a = item.img) === null || _a === void 0 ? void 0 : _a.src, alt: (_b = item.img) === null || _b === void 0 ? void 0 : _b.alt })) : null));
+            })));
+        }
+        else {
+            return null;
+        }
     }
     render() {
-        return (h(Host, { key: 'a0c74e33fa71e345201ab4c1f0cea37fd767f40a', role: "menu", onClick: this.handleClick.bind(this) }, h("slot", { key: '761b86e5d15febdb0334abd3bf390042643e7d68' })));
+        return (h(Host, { key: 'fd252cb40f60c329c1c8330a8df415e3fe0ce86a', role: "menu", onClick: this.handleClick.bind(this) }, h("slot", { key: '754b66b2e4024abba062e2a9aa0cbe3933b75139' }), this.renderOverflowMenu()));
     }
     static get is() { return "gux-avatar-group-beta"; }
     static get encapsulation() { return "shadow"; }
-    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["gux-avatar-group.scss"]
@@ -54,6 +106,28 @@ export class GuxAvatarGroup {
             "$": ["gux-avatar-group.css"]
         };
     }
+    static get properties() {
+        return {
+            "quantity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "quantity",
+                "reflect": false,
+                "defaultValue": "7"
+            }
+        };
+    }
     static get elementRef() { return "root"; }
     static get listeners() {
         return [{

package/dist/collection/components/beta/gux-avatar-group/gux-avatar-group.service.js

@@ -1,11 +1,15 @@
+import { getClosestElement } from "../../../utils/dom/get-closest-element";
+import { logWarn } from "../../../utils/error/log-error";
 export function groupKeyboardNavigation(event, currentElement) {
     switch (event.key) {
         case 'ArrowLeft':
+        case 'ArrowUp':
             event.stopPropagation();
             event.preventDefault();
             focusPreviousSiblingLoop(currentElement);
             break;
         case 'ArrowRight':
+        case 'ArrowDown':
             event.stopPropagation();
             event.preventDefault();
             focusNextSiblingLoop(currentElement);
@@ -23,7 +27,7 @@ export function groupKeyboardNavigation(event, currentElement) {
     }
 }
 export function resetFocusableSibling(element) {
-    const focusableSibling = getSiblings(element).find((sibling) => {
+    const focusableSibling = getGroupItems(element).find((sibling) => {
         const button = getGroupItemButton(sibling);
         return button && button.tabIndex !== -1;
     });
@@ -37,24 +41,27 @@ export function setFocusTarget(element) {
 function focusFirstSibling(currentElement) {
     const firstFocusableElement = getFirstFocusableElement(currentElement);
     if (firstFocusableElement) {
-        void firstFocusableElement.guxFocus();
-        void setItemTabIndex(firstFocusableElement, 0);
+        void firstFocusableElement.focus();
         void resetFocusableSibling(firstFocusableElement);
+        void setItemTabIndex(firstFocusableElement, 0);
     }
 }
 function focusLastSibling(currentElement) {
     const lastFocusableElement = getLastFocusableElement(currentElement);
     if (lastFocusableElement) {
-        void lastFocusableElement.guxFocus();
-        void setItemTabIndex(lastFocusableElement, 0);
+        void lastFocusableElement.focus();
         void resetFocusableSibling(lastFocusableElement);
+        void setItemTabIndex(lastFocusableElement, 0);
     }
 }
 function focusPreviousSiblingLoop(currentElement) {
-    const previousFocusableElement = currentElement.previousElementSibling;
+    const groupItems = getGroupItems(currentElement);
+    const currentElementIndex = groupItems.findIndex((item) => item === currentElement);
+    const previousIndex = (currentElementIndex - 1) % groupItems.length;
+    const previousFocusableElement = groupItems[previousIndex];
     setItemTabIndex(currentElement, -1);
     if (previousFocusableElement) {
-        void previousFocusableElement.guxFocus();
+        void previousFocusableElement.focus();
         void setItemTabIndex(previousFocusableElement, 0);
     }
     else {
@@ -62,41 +69,38 @@ function focusPreviousSiblingLoop(currentElement) {
     }
 }
 function focusNextSiblingLoop(currentElement) {
-    const nextFocusableElement = currentElement.nextElementSibling;
+    const groupItems = getGroupItems(currentElement);
+    const currentElementIndex = groupItems.findIndex((item) => item === currentElement);
+    const nextIndex = (currentElementIndex + 1) % groupItems.length;
+    if (nextIndex === 0) {
+        focusFirstSibling(currentElement);
+    }
+    const nextFocusableElement = groupItems[nextIndex];
     setItemTabIndex(currentElement, -1);
-    if (nextFocusableElement) {
-        void nextFocusableElement.guxFocus();
+    if (nextFocusableElement !== null) {
+        void nextFocusableElement.focus();
         void setItemTabIndex(nextFocusableElement, 0);
     }
-    else {
-        focusFirstSibling(currentElement);
-    }
 }
 function getFirstFocusableElement(currentElement) {
-    let firstFocusableElement = currentElement;
-    while (firstFocusableElement.previousElementSibling !== null) {
-        firstFocusableElement = firstFocusableElement.previousElementSibling;
-    }
-    return firstFocusableElement;
+    return getGroupItems(currentElement)[0];
 }
 function getLastFocusableElement(currentElement) {
-    let lastFocusableElement = currentElement;
-    while (lastFocusableElement.nextElementSibling !== null) {
-        lastFocusableElement = lastFocusableElement.nextElementSibling;
-    }
-    return lastFocusableElement;
+    const groupItems = getGroupItems(currentElement);
+    return groupItems[groupItems.length - 1];
 }
 function getGroupItemButton(element) {
     var _a;
     return (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
 }
-function getSiblings(element) {
-    const siblings = Array.from(element.parentElement.children);
-    // Early return for performance when there are no siblings
-    if (siblings.length <= 1) {
-        return [];
+function getGroupItems(element) {
+    const group = getClosestElement('gux-avatar-group-beta', element);
+    const slottedItems = Array.from(group.querySelectorAll('gux-avatar-group-item-beta')).filter(child => !isHidden(child));
+    const overflow = group.shadowRoot.querySelector('gux-avatar-overflow-beta');
+    if (overflow) {
+        slottedItems.push(overflow);
     }
-    return siblings.filter(child => child !== element);
+    return slottedItems;
 }
 function setItemTabIndex(element, newIndex) {
     const button = getGroupItemButton(element);
@@ -104,6 +108,9 @@ function setItemTabIndex(element, newIndex) {
         button.tabIndex = newIndex;
     }
     else {
-        console.log('No button found in the gux-avatar-group-item element');
+        logWarn(element, 'gux-avatar-group-beta: No button found in the element');
     }
 }
+function isHidden(element) {
+    return element.hasAttribute('hidden');
+}

package/dist/collection/components/beta/gux-avatar-group/gux-avatar-overflow/gux-avatar-overflow-item/gux-avatar-overflow-item.css

@@ -0,0 +1,117 @@
+::slotted(img) {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+button {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  gap: var(--gse-ui-menu-option-gap);
+  align-items: center;
+  inline-size: 100%;
+  min-block-size: var(--gse-ui-menu-option-height);
+  padding: var(--gse-ui-menu-option-padding);
+  font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);
+  font-size: var(--gse-ui-menu-option-label-default-text-fontSize);
+  font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
+  color: var(--gse-ui-menu-option-label-foregroundColor);
+  word-wrap: break-word;
+  cursor: pointer;
+  background-color: var(--gse-ui-menu-option-default-backgroundColor);
+  border: none;
+  outline: none;
+  outline-offset: calc(var(--gse-ui-menu-option-focus-border-width) * -1);
+}
+button:focus-visible {
+  border-radius: var(--gse-semantic-focusOutline-sm-borderRadius);
+  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);
+}
+button:hover {
+  background: var(--gse-ui-menu-option-hover-backgroundColor);
+}
+button:active {
+  font-family: var(--gse-ui-menu-option-label-active-text-fontFamily);
+  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
+  font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-active-text-lineHeight);
+  background: var(--gse-ui-menu-option-selected-backgroundColor);
+}
+button .gux-avatar {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--gse-ui-avatar-xsmall-content-size);
+  block-size: var(--gse-ui-avatar-xsmall-content-size);
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--gse-ui-avatar-media-initialsForeground-inverse);
+  cursor: pointer;
+  background: none;
+  background-color: var(--gse-ui-avatar-media-initialsBackground-default);
+  border: none;
+  border-radius: 50%;
+}
+button .gux-avatar .gux-avatar-initials {
+  font-family: var(--gse-ui-avatar-small-initials-fontFamily);
+  font-size: var(--gse-ui-avatar-xsmall-initials-fontSize);
+  font-weight: var(--gse-ui-avatar-xsmall-initials-fontWeight);
+  line-height: var(--gse-ui-avatar-small-initials-lineHeight);
+  text-transform: uppercase;
+}
+button .gux-avatar.gux-accent-1 {
+  color: var(--gse-ui-avatar-media-initialsForeground-inverse);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent1);
+}
+button .gux-avatar.gux-accent-2 {
+  color: var(--gse-ui-avatar-media-initialsForeground-default);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent2);
+}
+button .gux-avatar.gux-accent-3 {
+  color: var(--gse-ui-avatar-media-initialsForeground-inverse);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent3);
+}
+button .gux-avatar.gux-accent-4 {
+  color: var(--gse-ui-avatar-media-initialsForeground-inverse);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent4);
+}
+button .gux-avatar.gux-accent-5 {
+  color: var(--gse-ui-avatar-media-initialsForeground-default);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent5);
+}
+button .gux-avatar.gux-accent-6 {
+  color: var(--gse-ui-avatar-media-initialsForeground-default);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent6);
+}
+button .gux-avatar.gux-accent-7 {
+  color: var(--gse-ui-avatar-media-initialsForeground-inverse);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent7);
+}
+button .gux-avatar.gux-accent-8 {
+  color: var(--gse-ui-avatar-media-initialsForeground-default);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent8);
+}
+button .gux-avatar.gux-accent-9 {
+  color: var(--gse-ui-avatar-media-initialsForeground-default);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent9);
+}
+button .gux-avatar.gux-accent-10 {
+  color: var(--gse-ui-avatar-media-initialsForeground-default);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent10);
+}
+button .gux-avatar.gux-accent-11 {
+  color: var(--gse-ui-avatar-media-initialsForeground-default);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent11);
+}
+button .gux-avatar.gux-accent-12 {
+  color: var(--gse-ui-avatar-media-initialsForeground-inverse);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-accent12);
+}
+button .gux-avatar.gux-accent-inherit {
+  color: inherit;
+  background-color: inherit;
+}

package/dist/collection/components/beta/gux-avatar-group/gux-avatar-overflow/gux-avatar-overflow-item/gux-avatar-overflow-item.js

@@ -0,0 +1,107 @@
+import { h, Host } from "@stencil/core";
+import { trackComponent } from "../../../../../utils/tracking/usage";
+import { logWarn } from "../../../../../utils/error/log-error";
+import { generateInitials } from "../../../../../utils/string/generate-initials";
+import { overflowNavigation } from "../gux-avatar-overflow.service";
+import { getAvatarAccentClass } from "../../../gux-avatar/gux-avatar.service";
+/**
+ * @slot image - Avatar photo.
+ */
+export class GuxAvatarOverflowItem {
+    constructor() {
+        this.name = undefined;
+        this.accent = 'auto';
+    }
+    async componentWillLoad() {
+        trackComponent(this.root);
+    }
+    componentDidLoad() {
+        this.validatingInputs();
+    }
+    onKeydown(event) {
+        overflowNavigation(event, this.root);
+    }
+    validatingInputs() {
+        const avatarImage = this.root.querySelector('img');
+        if (!this.name) {
+            logWarn(this.root, 'Name prop is required');
+        }
+        if (avatarImage && !avatarImage.getAttribute('alt')) {
+            logWarn(this.root, 'Alt attribute is required for slotted image.');
+        }
+    }
+    render() {
+        return (h(Host, { key: '9a482a55db83dd77b4275313b5e91e6e35abbf67', role: "menuitem" }, h("button", { key: 'efb50ab018339921fff8605f18e94e3e1bb6bd85', type: "button", "aria-label": this.name, tabIndex: -1 }, h("span", { key: 'a9c32970cd2550b834c176f8552fe50d3c8db595', class: {
+                'gux-avatar': true,
+                [getAvatarAccentClass(this.accent, this.name)]: true
+            } }, h("slot", { key: 'c8268952f6531f9b3cdaf11b54bb5ca209c6df6b', name: "image" }, h("span", { key: '143d09b06886a32bae9343b5de8474ce4f036c85', class: "gux-avatar-initials", "aria-hidden": "true" }, generateInitials(this.name)))), h("span", { key: '530801a4712419301043e9303544266dc5f7b021' }, this.name))));
+    }
+    static get is() { return "gux-avatar-overflow-item-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-avatar-overflow-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-avatar-overflow-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "accent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxAvatarAccent",
+                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\" | \"default\" | \"inherit\"",
+                    "references": {
+                        "GuxAvatarAccent": {
+                            "location": "import",
+                            "path": "components/beta/gux-avatar/gux-avatar.types",
+                            "id": "src/components/beta/gux-avatar/gux-avatar.types.ts::GuxAvatarAccent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Manually sets avatar accent"
+                },
+                "attribute": "accent",
+                "reflect": false,
+                "defaultValue": "'auto'"
+            }
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/beta/gux-avatar-group/gux-avatar-overflow/gux-avatar-overflow.css

@@ -0,0 +1,65 @@
+:host {
+  display: block;
+  margin-inline-end: var(--gse-ui-avatar-groupSet-gap);
+}
+
+.gux-avatar-overflow {
+  position: relative;
+  box-sizing: border-box;
+  inline-size: 100%;
+  padding: 0;
+  margin: 0;
+  line-height: 0px;
+  cursor: pointer;
+  background: none;
+  border: none;
+  border-radius: 50%;
+}
+.gux-avatar-overflow:focus-visible {
+  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
+}
+.gux-avatar-overflow:hover, .gux-avatar-overflow:focus {
+  z-index: var(--gse-semantic-zIndex-showFocus);
+}
+.gux-avatar-overflow .gux-avatar-overflow-wrapper {
+  position: relative;
+  display: flex;
+}
+.gux-avatar-overflow .gux-avatar-overflow-wrapper .gux-avatar-overflow-content {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--gse-ui-avatar-small-content-size);
+  block-size: var(--gse-ui-avatar-small-content-size);
+  overflow: hidden;
+  font-family: var(--gse-ui-avatar-small-initials-fontFamily);
+  font-size: var(--gse-ui-avatar-small-initials-fontSize);
+  font-weight: var(--gse-ui-avatar-small-initials-fontWeight);
+  line-height: var(--gse-core-lineHeight-matchFontSize);
+  color: var(--gse-ui-avatar-media-initialsForeground-default);
+  background-color: var(--gse-ui-avatar-media-initialsBackground-overflowCount);
+  border-radius: 50%;
+}
+
+.gux-menu-wrapper {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--gse-semantic-zIndex-popup);
+  flex-direction: column;
+  max-block-size: var(--gse-ui-menu-maxHeight);
+  padding: var(--gse-ui-menu-padding);
+  margin: 0;
+  overflow-y: auto;
+  visibility: hidden;
+  background-color: var(--gse-ui-menu-backgroundColor);
+  border: none;
+  border: var(--gse-semantic-container-edges-borderWidth) solid var(--gse-semantic-border-container-edges-default);
+  border-radius: var(--gse-ui-menu-borderRadius);
+  box-shadow: var(--gse-ui-menu-boxShadow-offsetX) var(--gse-ui-menu-boxShadow-offsetY) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
+}
+.gux-menu-wrapper.gux-shown {
+  visibility: visible;
+}