genesys-spark-components 4.111.5 → 4.112.0

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;
+}

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

@@ -0,0 +1,218 @@
+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 { h, Host } from "@stencil/core";
+import { autoUpdate, computePosition, offset } from "@floating-ui/dom";
+import { OnClickOutside } from "../../../../utils/decorator/on-click-outside";
+import { trackComponent } from "../../../../utils/tracking/usage";
+import { logWarn } from "../../../../utils/error/log-error";
+import { groupKeyboardNavigation } from "../gux-avatar-group.service";
+import { afterNextRenderTimeout } from "../../../../utils/dom/after-next-render";
+/**
+ * @slot - a number of gux-avatar-overflow-items
+ */
+export class GuxAvatarOverflow {
+    constructor() {
+        this.delayTime = 250;
+        this.count = 0;
+        this.expanded = false;
+    }
+    async componentWillLoad() {
+        trackComponent(this.root);
+    }
+    componentDidLoad() {
+        if (this.expanded) {
+            this.runUpdatePosition();
+        }
+    }
+    componentDidUpdate() {
+        if (this.expanded) {
+            this.runUpdatePosition();
+        }
+        else if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    disconnectedCallback() {
+        clearTimeout(this.focusDelayTimeout);
+        clearTimeout(this.hideDelayTimeout);
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    onClickOutside() {
+        this.expanded = false;
+    }
+    onKeydown(event) {
+        groupKeyboardNavigation(event, this.root);
+        switch (event.key) {
+            case 'Escape': {
+                this.hide();
+                const target = event.target;
+                if (target.tagName === 'GUX-AVATAR-OVERFLOW-ITEM-BETA') {
+                    this.focusDelayTimeout = afterNextRenderTimeout(() => {
+                        var _a;
+                        (_a = this.overflowButtonElement) === null || _a === void 0 ? void 0 : _a.focus();
+                    });
+                }
+                break;
+            }
+            case 'Tab':
+                this.hide();
+                break;
+        }
+    }
+    onClick(e) {
+        e.stopPropagation();
+        const target = e.target;
+        if (target.tagName === 'GUX-AVATAR-OVERFLOW-ITEM-BETA') {
+            // Reset scroll on menu when clicked to avoid scroll jump when reopened
+            this.menuElement.scrollTop = 0;
+            this.expanded = false;
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async guxClose() {
+        this.hide();
+    }
+    runUpdatePosition() {
+        if (this.root.isConnected) {
+            this.cleanupUpdatePosition = autoUpdate(this.overflowButtonElement, this.menuElement, () => this.updatePosition(), {
+                ancestorScroll: true,
+                elementResize: true,
+                animationFrame: true,
+                ancestorResize: true
+            });
+        }
+        else {
+            this.disconnectedCallback();
+        }
+    }
+    updatePosition() {
+        if (this.root) {
+            void computePosition(this.overflowButtonElement, this.menuElement, {
+                placement: 'bottom-start',
+                strategy: 'fixed',
+                middleware: [
+                    offset({
+                        mainAxis: 4,
+                        crossAxis: 4
+                    })
+                ]
+            }).then(({ x, y }) => {
+                Object.assign(this.menuElement.style, {
+                    left: `${x}px`,
+                    top: `${y}px`
+                });
+            });
+        }
+    }
+    getCount() {
+        const menuItems = Array.from(this.root.children);
+        if (menuItems.some(item => item.tagName !== 'GUX-AVATAR-OVERFLOW-ITEM-BETA')) {
+            logWarn(this.root, 'Only gux-avatar-overflow-item-beta elements are allowed as children.');
+        }
+        if (menuItems) {
+            return menuItems.length;
+        }
+    }
+    toggleOverflowMenu() {
+        if (!this.expanded) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+    }
+    show() {
+        clearTimeout(this.hideDelayTimeout);
+        this.expanded = true;
+        this.hideDelayTimeout = afterNextRenderTimeout(() => {
+            this.focusOnMenu();
+        });
+    }
+    hide() {
+        if (this.expanded) {
+            this.hideDelayTimeout = setTimeout(() => {
+                this.expanded = false;
+            }, this.delayTime);
+        }
+    }
+    focusOnMenu() {
+        const overflowItems = Array.from(this.root.children);
+        const nextFocusableElement = overflowItems[0];
+        void nextFocusableElement.focus();
+    }
+    render() {
+        return (h(Host, { key: '1eca1d8373f1f8bce38195b234b2aa6c85489d66', role: "menuitem" }, h("button", { key: '52681498cf89bd86b0d0e906009feccf49254424', class: "gux-avatar-overflow", ref: el => (this.overflowButtonElement = el), onClick: () => this.toggleOverflowMenu(), tabIndex: -1, "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, h("span", { key: 'e542e692be6b5e40794526311b35647dafa77a5a', class: "gux-avatar-overflow-wrapper" }, h("span", { key: 'fcf9797285a72682a4a676f980f9da0ebf98ff55', class: "gux-avatar-overflow-content" }, " +", this.getCount()))), h("div", { key: '390fe4b03689c2390022d871bcdf46cfeae773c3', class: {
+                'gux-menu-wrapper': true,
+                'gux-shown': this.expanded
+            }, ref: el => (this.menuElement = el) }, h("div", { key: 'e9775de055cf867360eb43ef87b56c1e4846d283', role: "menu", class: "gux-menu-content" }, h("slot", { key: 'f87d83d682723774826e175ddac0142daa5340f5' })))));
+    }
+    static get is() { return "gux-avatar-overflow-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-avatar-overflow.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-avatar-overflow.css"]
+        };
+    }
+    static get states() {
+        return {
+            "count": {},
+            "expanded": {}
+        };
+    }
+    static get methods() {
+        return {
+            "guxClose": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+__decorate([
+    OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxAvatarOverflow.prototype, "onClickOutside", null);