genesys-spark-components 4.94.0 → 4.96.0

package/dist/collection/collection-manifest.json

@@ -21,6 +21,10 @@
     "components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list.js",
     "components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item.js",
     "components/beta/gux-phone-input/gux-phone-input.js",
+    "components/beta/gux-popover-beta/gux-popover.js",
+    "components/beta/gux-rich-text-editor/gux-rich-text-editor-beta.js",
+    "components/beta/gux-rich-text-editor/gux-rich-text-editor-action/gux-rich-text-editor-action.js",
+    "components/beta/gux-rich-text-editor/gux-rich-text-editor-action-group/gux-rich-text-editor-action-group.js",
     "components/beta/gux-screen-reader/gux-screen-reader.js",
     "components/beta/gux-segmented-control/gux-segmented-control.js",
     "components/beta/gux-segmented-control/gux-segmented-control-item/gux-segmented-control-item.js",

package/dist/collection/components/beta/gux-popover-beta/gux-popover.css

@@ -0,0 +1,51 @@
+/* This is necessary to override the position of the popover on the page. By default, an HTML popover will
+   render in the middle of the screen, which we do not want */
+:popover-open {
+  position: absolute;
+  inset: unset;
+}
+
+.gux-popover-wrapper {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  min-inline-size: 280px;
+  padding: var(--gse-ui-popover-gap);
+  overflow: hidden;
+  background-color: var(--gse-ui-popover-backgroundColor);
+  border: none;
+  border-radius: var(--gse-ui-popover-borderRadius);
+  box-shadow: var(--gse-ui-popover-boxShadow-x, var(--gse-ui-popover-boxShadow-offsetX)) var(--gse-ui-popover-boxShadow-y, var(--gse-ui-popover-boxShadow-offsetY)) var(--gse-ui-popover-boxShadow-blur) var(--gse-ui-popover-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color);
+  /* // TODO: COMUI-3210 - Arrow currently does not show  */
+}
+.gux-popover-wrapper .gux-arrow {
+  position: absolute;
+  inline-size: var(--gse-ui-popover-anchor-width);
+  block-size: var(--gse-ui-popover-anchor-height);
+  /* 4px padding leaves some space for the shadow to bleed into */
+  padding-block-end: 4px;
+  overflow: hidden;
+}
+.gux-popover-wrapper .gux-arrow-caret {
+  inline-size: 0;
+  block-size: 0;
+  filter: drop-shadow(var(--gse-ui-popover-boxShadow-x, --gse-ui-popover-boxShadow-offsetX) var(--gse-ui-popover-boxShadow-y, --gse-ui-popover-boxShadow-offsetY) calc(var(--gse-ui-popover-boxShadow-blur) / 2) var(--gse-ui-tooltip-boxShadow-color));
+  border-block-start: calc(var(--gse-ui-popover-anchor-width) / 2) solid var(--gse-ui-popover-backgroundColor);
+  border-inline-start: calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;
+  border-inline-end: calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;
+}
+.gux-popover-wrapper .gux-popover-header {
+  display: flex;
+  flex-direction: row;
+  place-content: center space-between;
+  align-items: center;
+  padding-block-end: var(--gse-ui-popover-gap);
+  font-family: var(--gse-ui-popover-title-text-fontFamily);
+  font-size: var(--gse-ui-popover-title-text-fontSize);
+  font-weight: var(--gse-ui-popover-title-text-fontWeight);
+  line-height: var(--gse-ui-popover-title-text-lineHeight);
+  color: var(--gse-ui-popover-headerColor);
+}
+.gux-popover-wrapper gux-dismiss-button {
+  float: inline-end;
+}

package/dist/collection/components/beta/gux-popover-beta/gux-popover.js

@@ -0,0 +1,363 @@
+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 } from "@stencil/core";
+import { autoUpdate, computePosition, arrow, flip, offset, shift, hide } from "@floating-ui/dom";
+import { OnClickOutside } from "../../../utils/decorator/on-click-outside";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { getSlot } from "../../../utils/dom/get-slot";
+import { findElementById } from "../../../utils/dom/find-element-by-";
+/**
+ * @slot - popover content
+ * @slot title - Slot for popover title
+ */
+export class GuxPopover {
+    constructor() {
+        this.for = undefined;
+        this.position = 'bottom';
+        this.displayDismissButton = undefined;
+        this.closeOnClickOutside = false;
+        this.isOpen = false;
+        this.forElement = undefined;
+    }
+    updateForElement() {
+        this.forElement = this.getForElement();
+    }
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'Escape':
+                this.dismiss();
+                break;
+        }
+    }
+    onFocusout(event) {
+        if (!this.closeOnClickOutside && this.displayDismissButton) {
+            return;
+        }
+        const focusIsOutsidePopover = event.relatedTarget && !this.root.contains(event.relatedTarget);
+        if (focusIsOutsidePopover) {
+            this.dismiss();
+        }
+    }
+    checkForClickOutside(event) {
+        const clickPath = event.composedPath();
+        const forElement = findElementById(this.root, this.for);
+        const clickedForElement = clickPath.includes(forElement);
+        if ((this.closeOnClickOutside || !this.displayDismissButton) &&
+            this.isOpen &&
+            !clickedForElement) {
+            this.dismiss();
+        }
+        if (clickedForElement) {
+            this.popupElement.togglePopover();
+            this.isOpen = !this.isOpen;
+            this.runUpdatePosition();
+        }
+    }
+    get titleSlot() {
+        return getSlot(this.root, 'title');
+    }
+    getForElement() {
+        if (this.for) {
+            const forElement = findElementById(this.root, this.for);
+            if (!forElement) {
+                this.logForAttributeError();
+            }
+            return forElement;
+        }
+        else {
+            this.logForAttributeError();
+        }
+    }
+    runUpdatePosition() {
+        if (this.root.isConnected) {
+            this.cleanupUpdatePosition = autoUpdate(findElementById(this.root, this.for), this.popupElement, () => this.updatePosition(), {
+                ancestorScroll: true,
+                elementResize: true,
+                animationFrame: true,
+                ancestorResize: true
+            });
+        }
+        else {
+            this.disconnectedCallback();
+        }
+    }
+    updatePosition() {
+        const forElement = findElementById(this.root, this.for);
+        if (this.popupElement && forElement) {
+            void computePosition(forElement, this.popupElement, {
+                placement: this.position,
+                middleware: [
+                    offset(7),
+                    flip(),
+                    shift(),
+                    hide(),
+                    arrow({
+                        element: this.arrowElement,
+                        padding: 16
+                    })
+                ]
+            }).then(({ x, y, middlewareData, placement }) => {
+                Object.assign(this.popupElement.style, {
+                    left: `${x}px`,
+                    top: `${y}px`
+                });
+                const side = placement.split('-')[0];
+                const staticSide = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right'
+                }[side];
+                const arrowRotation = {
+                    top: 0,
+                    right: 90,
+                    bottom: 180,
+                    left: -90
+                }[side];
+                // This is 13 because this makes the arrow look aligned when horizontal
+                // or 15 if vertical due to extra padding needed to show the shadow.
+                const arrowLen = side === 'left' || side === 'right' ? 15 : 13;
+                if (middlewareData.arrow) {
+                    let x = middlewareData.arrow.x;
+                    const y = middlewareData.arrow.y;
+                    if (side === 'left' || side === 'right') {
+                        x = x + 4;
+                    }
+                    this.popupElement.setAttribute('data-placement', placement);
+                    // TODO: COMUI-3210 - Arrow currently does not show
+                    Object.assign(this.arrowElement.style, {
+                        left: x != null ? `${x}px` : '',
+                        top: y != null ? `${y}px` : '',
+                        right: '',
+                        bottom: '',
+                        [staticSide]: `${-arrowLen}px`,
+                        transform: `rotate(${arrowRotation}deg)`
+                    });
+                }
+                if (middlewareData.hide) {
+                    Object.assign(this.popupElement.style, {
+                        visibility: middlewareData.hide.referenceHidden
+                            ? 'hidden'
+                            : 'visible'
+                    });
+                }
+            });
+        }
+    }
+    dismiss() {
+        const dismissEvent = this.guxdismiss.emit();
+        if (!dismissEvent.defaultPrevented) {
+            this.isOpen = false;
+            this.popupElement.togglePopover();
+        }
+    }
+    logForAttributeError() {
+        if (this.root.isConnected) {
+            console.error(`gux-popover: invalid element supplied to 'for': "${this.for}"`);
+        }
+    }
+    connectedCallback() {
+        this.updateForElement();
+        trackComponent(this.root, { variant: this.position });
+    }
+    componentDidLoad() {
+        if (!this.forElement) {
+            return;
+        }
+        this.forElement.popoverTargetElement = this.popupElement;
+        if (this.isOpen) {
+            this.popupElement.togglePopover();
+            this.runUpdatePosition();
+        }
+    }
+    componentDidUpdate() {
+        if (this.isOpen) {
+            this.runUpdatePosition();
+        }
+        else if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    disconnectedCallback() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    renderDismissButton() {
+        if (this.displayDismissButton) {
+            return (h("gux-dismiss-button", { onClick: this.dismiss.bind(this), position: "inherit" }));
+        }
+    }
+    render() {
+        return (h("div", { key: 'aa737a1566ca572ee66663bf93f81d0dcb2ab54a', ref: (el) => (this.popupElement = el), class: {
+                'gux-popover-wrapper': true,
+                'gux-hidden': !this.isOpen
+            }, "data-placement": true, popover: "manual" }, h("div", { key: '141277d4fc16931fbd2ce4215db969c8e4cbbd78', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '1f4076917f0f571a418c2c81473169915d9291ec', class: "gux-arrow-caret" })), h("div", { key: '0c85ed77802e827622dac9d51d9655018109248b', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: '20498249bda585885a11d9dabcbb84068620bb4f', name: "title" }), this.renderDismissButton()), h("div", { key: 'dbef79c1b5844410788a8099a7eb8b1873af48bd', class: "gux-popover-content" }, h("slot", { key: 'dfe962454dadc3b1b7a1456cffae656ddebe7ff4' }))));
+    }
+    static get is() { return "gux-popover-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-popover.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "for": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of the element the popover should anchor to"
+                },
+                "attribute": "for",
+                "reflect": false
+            },
+            "position": {
+                "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/dist/floating-ui.dom.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicate position of popover element arrow (follow floating ui placement attribute api)"
+                },
+                "attribute": "position",
+                "reflect": false,
+                "defaultValue": "'bottom'"
+            },
+            "displayDismissButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicate if the dismiss button is displayed"
+                },
+                "attribute": "display-dismiss-button",
+                "reflect": false
+            },
+            "closeOnClickOutside": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Close popover when the user clicks outside of its bounds"
+                },
+                "attribute": "close-on-click-outside",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isOpen": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls hiding and showing the popover"
+                },
+                "attribute": "is-open",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "forElement": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "guxdismiss",
+                "name": "guxdismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a user dismisses the popover"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "for",
+                "methodName": "updateForElement"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusout",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+__decorate([
+    OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxPopover.prototype, "checkForClickOutside", null);

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

@@ -0,0 +1,16 @@
+:host {
+  display: block;
+}
+
+gux-button-slot {
+  inline-size: var(--gse-ui-button-iconOnly-width);
+  block-size: var(--gse-ui-button-default-height);
+}
+gux-button-slot button.gux-is-active {
+  color: var(--gse-ui-button-ghost-active-foregroundColor);
+  background-color: var(--gse-ui-button-ghost-active-backgroundColor);
+}
+gux-button-slot gux-icon {
+  inline-size: var(--gse-ui-button-icon-size);
+  block-size: var(--gse-ui-button-icon-size);
+}

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

@@ -0,0 +1,104 @@
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../../utils/tracking/usage";
+import { buildI18nForComponent } from "../../../../i18n/index";
+import translationResources from "./i18n/en.json";
+import { calculateDisabledState, returnActionTypeIcon } from "../gux-rich-text-editor.service";
+export class GuxRichTextEditorAction {
+    constructor() {
+        this.action = undefined;
+        this.disabled = false;
+        this.isActive = false;
+    }
+    async componentWillLoad() {
+        trackComponent(this.root, { variant: this.action });
+        this.i18n = await buildI18nForComponent(this.root, translationResources);
+        this.disabled = calculateDisabledState(this.root);
+    }
+    renderTooltip() {
+        if (!this.disabled) {
+            return (h("gux-tooltip-beta", null, h("div", { slot: "content" }, this.i18n(this.action))));
+        }
+    }
+    renderActionButton() {
+        return (h("gux-button-slot", { accent: "ghost", "icon-only": true }, h("button", { type: "button", disabled: this.disabled, class: { 'gux-is-active': this.isActive }, "aria-pressed": this.isActive.toString() }, h("gux-icon", { "icon-name": returnActionTypeIcon(this.action), "screenreader-text": this.i18n(this.action) })), this.renderTooltip()));
+    }
+    render() {
+        return this.renderActionButton();
+    }
+    static get is() { return "gux-rich-text-editor-action"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-rich-text-editor-action.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-rich-text-editor-action.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "action": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxRichTextEditorActionTypes",
+                    "resolved": "\"blockQuote\" | \"bold\" | \"bulletedList\" | \"clearFormatting\" | \"codeblock\" | \"delete\" | \"italic\" | \"orderedList\" | \"redo\" | \"strike\" | \"underline\" | \"undo\"",
+                    "references": {
+                        "GuxRichTextEditorActionTypes": {
+                            "location": "import",
+                            "path": "./gux-rich-text-editor-action.types",
+                            "id": "src/components/beta/gux-rich-text-editor/gux-rich-text-editor-action/gux-rich-text-editor-action.types.ts::GuxRichTextEditorActionTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "action",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-active",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "root"; }
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,25 @@
+:host {
+  display: flex;
+  flex-direction: row;
+}
+
+:host([slot=global-actions]) ::slotted(gux-rich-text-editor-action:last-child) {
+  margin-inline-start: 83px;
+}
+
+.gux-action-group-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 4px;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.gux-divider {
+  inline-size: var(--gse-ui-rte-divider-width);
+  block-size: var(--gse-ui-rte-divider-height);
+  margin-block: 6px;
+  margin-inline: 4px;
+  background-color: #c6c8ce;
+}

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

@@ -0,0 +1,58 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot actions - Slot for gux-rich-text-editor-actions
+ */
+export class GuxRichTextEditorActionGroup {
+    constructor() {
+        this.hideActionDivider = false;
+    }
+    shouldHideDivider() {
+        return this.hideActionDivider || this.isGlobalActionsSlot();
+    }
+    isGlobalActionsSlot() {
+        return this.root.getAttribute('slot') === 'global-actions';
+    }
+    renderActionGroupDivider() {
+        if (!this.shouldHideDivider()) {
+            return (h("div", { class: "gux-divider" }));
+        }
+    }
+    render() {
+        return (h(Host, { key: 'a5e18d4a8720c312e815ddf55114cef0b4e2e306' }, h("div", { key: '0554a4949eacc8b108b581db576ce4f65ea98f6e', class: "gux-action-group-container" }, h("slot", { key: '89e6d6befcb318cf7ad6ea1c5793da91022f278e' })), this.renderActionGroupDivider()));
+    }
+    static get is() { return "gux-rich-text-editor-action-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-rich-text-editor-action-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-rich-text-editor-action-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "hideActionDivider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hide-action-divider",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "root"; }
+}