genesys-spark-components 4.122.0 → 4.123.0

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: '28b31d781ff8ec1b0a3a535bfd9eb05a7dd95725', class: "gux-sr-only" }, h("slot", { key: '992a0dbec3d558f370e57c5e851be04579132a90' })));
+        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: '65c1721318287e3e043912cddbfabe4b88915248', 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: '729b1718420965d9fe6972ec653e6d54301d9610', 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: '6b2fa63426d79283a1df0fb08f18421fd39252ab', 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: '8e95fbf3dc09a7303043b062abd74076af04ff50', 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: 'e69a69f7d9f23f9f33ad43c824b07d18e450e938', role: "group" }, h("slot", { key: '8cf6bb84b335edd50597af04e8da25083334ada9', 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: 'aeab1b9e7ad546fb5741bf38f76a8c9a61d8edd1', class: {
+        return (h("div", { key: 'a44757b1b08ffe6aa750edf6548e2eb45f991a6e', class: {
                 'gux-selector-card': true,
                 [`gux-${this.variant}`]: true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '83bf9f133bd4953b4629d778da96619dfba827f8', class: "gux-content" }, h("div", { key: '7a87ef3d2c6ea48cf03c6a73edc925fc8b4d9e95', class: "gux-icon" }, h("slot", { key: 'aaa745d71448c580dbfe892a6c3179fbbe6e2ae8', name: "icon" })), h("div", { key: 'eebe22bf45774fd92bb3bb8fe3b944d31268d56b', class: "gux-label-container" }, h("slot", { key: 'd0a50b966926b4942010003b04c5f90396bb2a29', name: "label" })), h("slot", { key: '2416d439109938ca184d59359e2eb1a539ac7f1b', 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: '4e521ea6855227348351aca651b829322bb0eda6', class: "gux-selector-cards" }, h("slot", { key: '73f3502178241acdf0968a662de2336c3be68bfd' })));
+        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: '2543125d6dbeec92a65bdd9244b5598758338140', ref: el => (this.dialogElement = el), "aria-labelledby": titleID }, h("gux-side-panel-beta", { key: 'f1f4648c81a16ac77aa63e223e8f66de37c74816', size: this.size }, h("div", { key: '980bded69d812d9b56063a94c45b7873b45d3242', slot: "heading", id: titleID }, h("slot", { key: '8f5dc879687237f06fe8903d7f013e9631b83048', name: "heading" })), hasSlot(this.root, 'description') && (h("div", { key: 'e2ce14f038fc263b244552143fbcb0f90c48ca55', slot: "description" }, h("slot", { key: 'e0926d6c43ff22b9f62e178361c1df45dc27120b', name: "description" }))), h("div", { key: 'e8cb6da170feee2098556af248e4ab3195bb35e2', slot: "content" }, h("slot", { key: 'c53e874bccbeeb3871a47a8209a6ff1451a0fb5b', name: "content" })), h("div", { key: '04399feeae63a4badbfb50abaf8f24025772730c', slot: "footer" }, h("slot", { key: '45eebb105329bf25800da83c6eba115690055de7', 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"; }