genesys-spark-components 4.121.0 → 4.123.0

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-menu/gux-rich-text-editor-menu.css

@@ -0,0 +1,24 @@
+:host {
+  display: block;
+  max-inline-size: fit-content;
+  white-space: normal;
+}
+
+button {
+  block-size: var(--gse-ui-button-default-height);
+  padding: var(--gse-ui-button-default-paddingIconOnly);
+  border-radius: var(--gse-ui-button-borderRadius);
+}
+
+.gux-list-container {
+  inline-size: var(--gse-ui-contextMenu-menu-width);
+  max-block-size: var(--gse-ui-contextMenu-menu-maxHeight);
+  margin: 0;
+  overflow-y: auto;
+  background: var(--gse-ui-menu-backgroundColor);
+  border-color: var(--gse-ui-menu-border-color);
+  border-style: var(--gse-ui-menu-border-style);
+  border-width: var(--gse-ui-menu-border-width);
+  border-radius: var(--gse-ui-menu-borderRadius);
+  box-shadow: var(--gse-ui-menu-boxShadow);
+}

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-menu/gux-rich-text-editor-menu.js

@@ -0,0 +1,142 @@
+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 { trackComponent } from "../../../../utils/tracking/usage";
+import { buildI18nForComponent } from "../../../../i18n/index";
+import translationResources from "../gux-rich-text-editor-action/i18n/en.json";
+import { OnClickOutside } from "../../../../utils/decorator/on-click-outside";
+import { afterNextRender } from "../../../../utils/dom/after-next-render";
+import { whenEventIsFrom } from "../../../../utils/dom/when-event-is-from";
+import { hasDisabledParent } from "../gux-rich-text-editor.service";
+export class GuxRichTextEditorMenu {
+    constructor() {
+        this.isOpen = false;
+    }
+    onClickOutside() {
+        this.isOpen = false;
+    }
+    handleKeyDown(event) {
+        const isListEvent = event.composedPath().includes(this.listElement);
+        const isButtonEvent = event.composedPath().includes(this.button);
+        switch (event.key) {
+            case 'Escape': {
+                if (isListEvent) {
+                    event.preventDefault();
+                    this.isOpen = false;
+                    this.button.focus();
+                }
+                break;
+            }
+            case 'Tab': {
+                this.isOpen = false;
+                break;
+            }
+            case 'ArrowDown':
+            case 'Enter': {
+                if (isButtonEvent && !this.isOpen) {
+                    event.preventDefault();
+                    this.isOpen = true;
+                    this.focusFirstListItem();
+                }
+                break;
+            }
+            case 'ArrowUp': {
+                if (isButtonEvent && !this.isOpen) {
+                    event.preventDefault();
+                    this.isOpen = true;
+                    this.focusLastListItem();
+                }
+                break;
+            }
+        }
+    }
+    handleKeyup(event) {
+        switch (event.key) {
+            case ' ': {
+                if (event.composedPath().includes(this.button)) {
+                    event.preventDefault();
+                    this.isOpen = true;
+                    this.focusFirstListItem();
+                }
+                break;
+            }
+        }
+    }
+    focusFirstListItem() {
+        afterNextRender(() => {
+            void this.listElement.guxFocusFirstItem();
+        });
+    }
+    focusLastListItem() {
+        afterNextRender(() => {
+            void this.listElement.guxFocusLastItem();
+        });
+    }
+    onActionClick() {
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            this.focusFirstListItem();
+        }
+    }
+    onListClick(event) {
+        whenEventIsFrom('gux-rich-style-list-item', event, () => {
+            this.isOpen = false;
+            this.button.focus();
+        });
+    }
+    renderTooltip() {
+        return (h("gux-tooltip-beta", null, h("div", { slot: "content" }, this.i18n('additionalActions'))));
+    }
+    async componentWillLoad() {
+        trackComponent(this.root);
+        this.i18n = await buildI18nForComponent(this.root, translationResources);
+    }
+    render() {
+        return (h(Host, { key: '9555548af8d6018a798769fee5de94c9aa926075' }, h("gux-popup", { key: '75b7bcb30d5d84deceeb9fb5b5078dc55ab51f40', expanded: this.isOpen, offset: 4, "exceed-target-width": true }, h("div", { key: '6ef03b61b7f9a6ee89ddb07d0d9aabc3167e819b', slot: "target" }, h("gux-button-slot", { key: '6da7e330d95f1c382061226fcc3dd7d7724d2385', accent: "ghost" }, h("button", { key: '2e7d1b21ed2c7793b7a44ee8daf664bd43528174', type: "button", onClick: () => this.onActionClick(), ref: el => (this.button = el), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), disabled: hasDisabledParent(this.root) }, h("gux-icon", { key: '12c1d235ed9c4b98f7f86b0a1001183fdbf08fb3', "icon-name": "fa/ellipsis-vertical-regular", "screenreader-text": this.i18n('additionalActions'), size: "small" })), this.renderTooltip())), h("div", { key: '648b925078ebf267993e7783201c09a7efaf6ef5', slot: "popup", class: "gux-list-container" }, h("gux-rich-text-editor-list", { key: '53292dad2651fbf74c8b1e510f099e6f786d9335', onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '2871d3f817c5e393cd37917f849673a50a8e6c5d' }))))));
+    }
+    static get is() { return "gux-rich-text-editor-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-rich-text-editor-menu.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-rich-text-editor-menu.css"]
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keyup",
+                "method": "handleKeyup",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+__decorate([
+    OnClickOutside({ triggerEvents: 'click' })
+], GuxRichTextEditorMenu.prototype, "onClickOutside", null);

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor.service.js

@@ -33,3 +33,45 @@ export function returnActionTypeIcon(action) {
             return 'fa/bold-regular';
     }
 }
+/**
+ * Extracts an attribute from a action and adds it to the actions array.
+ */
+function addAction(actions, element, attribute) {
+    const value = element.getAttribute(attribute);
+    if (value) {
+        actions.push(value);
+    }
+}
+/**
+ * This function is used for lists eg rich-style and highlight.
+ * Extracts a list of values from child elements and adds them to the actions array with a prefix. eg(rich-style and highlight).
+ */
+function addListActions(actions, parent, selector, prefix, attribute = '') {
+    Array.from(parent.querySelectorAll(selector)).forEach(item => {
+        const value = attribute
+            ? item.getAttribute(attribute)
+            : item.innerHTML;
+        if (value) {
+            actions.push(`${prefix}-${value}`);
+        }
+    });
+}
+export function getActionsFromGroup(root, selector, hiddenClass) {
+    const actionGroup = root.querySelector(selector);
+    if (!actionGroup || !actionGroup.classList.contains(hiddenClass)) {
+        return [];
+    }
+    return Array.from(actionGroup.children).reduce((actions, child) => {
+        const tagName = child.tagName;
+        if (tagName === 'GUX-RICH-TEXT-EDITOR-ACTION') {
+            addAction(actions, child, 'action');
+        }
+        else if (tagName === 'GUX-RICH-TEXT-EDITOR-ACTION-RICH-STYLE') {
+            addListActions(actions, child, 'gux-rich-style-list-item', 'rich-style');
+        }
+        else if (tagName === 'GUX-RICH-TEXT-EDITOR-ACTION-TEXT-HIGHLIGHT') {
+            addListActions(actions, child, 'gux-rich-highlight-list-item', 'highlight', 'highlight');
+        }
+        return actions;
+    }, []);
+}

package/dist/collection/components/beta/gux-screen-reader/gux-screen-reader.js

@@ -8,7 +8,7 @@ export class GuxScreenReader {
         trackComponent(this.root);
     }
     render() {
-        return (h("span", { key: 'c0c226cfc59cc8dabfcf12adeb882183b579dae9', class: "gux-sr-only" }, h("slot", { key: 'f3fb06e5682aa51f889fc5b9651dc6198a1b2360' })));
+        return (h("span", { key: 'b61aa74de6cc2f8f9f0ac6053f91a7e4be2638a3', class: "gux-sr-only" }, h("slot", { key: '497018bbc50adf0226f7b70d4efd3cf52bf9fbd5' })));
     }
     static get is() { return "gux-screen-reader-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-segmented-control/gux-segmented-control-item/gux-segmented-control-item.js

@@ -48,19 +48,19 @@ export class GuxSegmentedControlItem {
         }
     }
     render() {
-        return (h("div", { key: '4d6b0dfc7a78260ea7a18864aec9cc24a6976aef', class: {
+        return (h("div", { key: '9e0d1138f4ed54d05cd5871f34656aa68eef01f5', class: {
                 'gux-container': true,
                 'gux-parent-disabled': this.hasDisabledParent(),
                 'gux-start': this.isInStartPosition(),
                 'gux-end': this.isInEndPosition()
-            } }, h("button", { key: 'a002a787ba83ce7c157849394375f278cf75a688', class: {
+            } }, h("button", { key: 'c5b5baed1d032fd751f6be833e9a1c78157f0aea', class: {
                 'gux-segmented-control-item': true,
                 'gux-icon-only': this.iconOnly,
                 'gux-selected': this.selected
-            }, type: "button", disabled: this.disabled || this.hasDisabledParent() }, this.renderIconSlot(), h("div", { key: '29d7dafbb784a7acbb3aa430edd6df86c5b185f8', class: {
+            }, type: "button", disabled: this.disabled || this.hasDisabledParent() }, this.renderIconSlot(), h("div", { key: '01381a4c390dfd682c79e075f1c731f1a4c601dd', class: {
                 'gux-text': true,
                 'gux-icon-only': this.iconOnly
-            } }, h("slot", { key: 'a0ec031b8d638331e30c9a3f6df5bf9525d2e36d', name: "text" }))), this.renderTooltip()));
+            } }, h("slot", { key: 'b5d489edb293857e68bbbfe366baa1bc39e24c36', name: "text" }))), this.renderTooltip()));
     }
     static get is() { return "gux-segmented-control-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-segmented-control/gux-segmented-control.js

@@ -36,7 +36,7 @@ export class GuxSegmentedControl {
         });
     }
     render() {
-        return (h(Host, { key: 'c57afa576033c08c059035fb3338e9a4049dc699', role: "group" }, h("slot", { key: 'ef8243fc3fef43c3e680f8772d2aeafd1f638896', onSlotchange: this.slotChanged.bind(this) })));
+        return (h(Host, { key: '89b506b9119b1330460c4c3aea13dc14c083aabe', role: "group" }, h("slot", { key: '1b9765f27fed5981688eb7fcd789d0f3d58712eb', onSlotchange: this.slotChanged.bind(this) })));
     }
     static get is() { return "gux-segmented-control-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.js

@@ -50,11 +50,11 @@ export class GuxSelectorCard {
         }
     }
     render() {
-        return (h("div", { key: 'b28ce59bdb9d5150a30f8df1a211b46ee9848a2e', class: {
+        return (h("div", { key: 'a44757b1b08ffe6aa750edf6548e2eb45f991a6e', class: {
                 'gux-selector-card': true,
                 [`gux-${this.variant}`]: true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: 'f14e0a4f22356a2a5b1cbfca9f7d249f5a8b5011', class: "gux-content" }, h("div", { key: '6fc4a7a04e1c53033d0902014e56a50b2a7cc1ad', class: "gux-icon" }, h("slot", { key: '1c1551e4058b56057a54816bb1a5377335540e7e', name: "icon" })), h("div", { key: '00277bd34a649eff6331404cd65c8715c3ad2407', class: "gux-label-container" }, h("slot", { key: '8fb89b7d2dfdb37574316cf31605aa2199b70b09', name: "label" })), h("slot", { key: 'd6bc13694aba6883ed8e3240c9c917d5a0a0be4d', name: "input" }), this.renderDescription(), this.renderBadge())));
+            } }, h("div", { key: 'e14f757e0d540190f4b32bda4420651175ade0c6', class: "gux-content" }, h("div", { key: '2582784761939e1021bc5388fe988f95e9f250d6', class: "gux-icon" }, h("slot", { key: '698dacc88a23984184f83b49fc207da1341c4a9c', name: "icon" })), h("div", { key: '798fc72517d208d2fd21b29846f4e039b23e8f88', class: "gux-label-container" }, h("slot", { key: '9785c8f06b2a3cb13cd91f76cc9f9c040d6d53b6', name: "label" })), h("slot", { key: 'cec5b2583819f151138fd9327ab4e01ffaa62b33', name: "input" }), this.renderDescription(), this.renderBadge())));
     }
     static get is() { return "gux-selector-card-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-selector-cards/gux-selector-cards.js

@@ -8,7 +8,7 @@ export class GuxSelectorCards {
         trackComponent(this.root);
     }
     render() {
-        return (h("div", { key: '69e50b437e17b14b8e0fd5dbd3d3c3167bdb9b70', class: "gux-selector-cards" }, h("slot", { key: 'c8719a29b42c4241f72f67f45ae4c30605976ae4' })));
+        return (h("div", { key: '86093875510f4dee1ca80bd77c7a99a50a6d832b', class: "gux-selector-cards" }, h("slot", { key: 'fcdc912cf978e16e1aa13b366aa6d11771674eed' })));
     }
     static get is() { return "gux-selector-cards-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-side-panel/components/gux-modal-side-panel/gux-modal-side-panel.js

@@ -46,7 +46,7 @@ export class GuxModalSidePanel {
     }
     render() {
         const titleID = randomHTMLId();
-        return (h("dialog", { key: '34c80eaee9baf7ce57e6b2be5fd89110fdcd9c94', ref: el => (this.dialogElement = el), "aria-labelledby": titleID }, h("gux-side-panel-beta", { key: '6600729b45885b675c9e0f616d6a0093682de095', size: this.size }, h("div", { key: '55b1ff1f68212734944d034b97d2a748b1aa601a', slot: "heading", id: titleID }, h("slot", { key: '3f26e81930bd086ae4ed6d4307dd16727f0eddb3', name: "heading" })), hasSlot(this.root, 'description') && (h("div", { key: '5baccca5a3e34e9572e202c2ff8a123b6c8033aa', slot: "description" }, h("slot", { key: '4f80ab3460adc54565a48c06c058ea955b371bcc', name: "description" }))), h("div", { key: '6d5bc823ac3eeaf7ba0973886c6b50d138a00c1f', slot: "content" }, h("slot", { key: '2fec75da7efb18f7e51df706dc34689448beb8db', name: "content" })), h("div", { key: 'ee9fd140e4796e54f06214d49ef823e6af85c0a8', slot: "footer" }, h("slot", { key: '27a2b723f3d2eaf03a3d9620954996caecfe1c2d', name: "footer" })))));
+        return (h("dialog", { key: 'f7f148eaa392a2fa5c95c504bb85991acde4bcc3', ref: el => (this.dialogElement = el), "aria-labelledby": titleID }, h("gux-side-panel-beta", { key: 'dcbaa862ef852ef5b1bb82c126ec067be260c7d2', size: this.size }, h("div", { key: '630391bbd477a213ebaf62f416178149d1fee575', slot: "heading", id: titleID }, h("slot", { key: 'f29c51c421438782479bde4c8dbfdfec067eface', name: "heading" })), hasSlot(this.root, 'description') && (h("div", { key: 'b024408fe324c5c5af4b573ccee097ce788810ec', slot: "description" }, h("slot", { key: '7cb8d56f83dd3ccb0cbc0ddf46950d5b352d9bc1', name: "description" }))), h("div", { key: '4a54564ee2f305f92cbdcc420b5db98862da2b40', slot: "content" }, h("slot", { key: '3f8f5a4413894c27cc55fd49765c3bdeb0fbedb6', name: "content" })), h("div", { key: '9418adad5b143ff7f2d30930232e7143cb67ace6', slot: "footer" }, h("slot", { key: 'b6f6df7616348b5f4890ab41c42407bc4b105780', name: "footer" })))));
     }
     static get is() { return "gux-modal-side-panel-beta"; }
     static get encapsulation() { return "shadow"; }