genesys-spark-components 4.138.5 → 4.140.0

package/dist/collection/components/beta/gux-inline-dropdown/gux-inline-dropdown.js

@@ -0,0 +1,425 @@
+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 { forceUpdate, h } from "@stencil/core";
+import { OnClickOutside } from "../../../utils/decorator/on-click-outside";
+import { buildI18nForComponent } from "../../../i18n";
+import simulateNativeEvent from "../../../utils/dom/simulate-native-event";
+import { afterNextRender } from "../../../utils/dom/after-next-render";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { OnMutation } from "../../../utils/decorator/on-mutation";
+import translationResources from "./i18n/en.json";
+import { getListOptions, setInitialActiveOption } from "../../stable/gux-listbox/gux-listbox.service";
+import { hasSlot } from "../../../utils/dom/has-slot";
+/**
+ * Our Dropdown component. In the most basic case, it's used with `gux-option` to give users
+ * a list of text options to select from, but other types of options with different appearance
+ * can be created by creating a new component and adding it to `validOptionTags` list in
+ * gux-dropdown-types.ts, then following the resulting compiler errors.
+ *
+ * @slot - for a gux-listbox containing ValidDropdownOption children
+ */
+export class GuxDropdown {
+    constructor() {
+        this.required = false;
+        this.expanded = false;
+    }
+    watchValue(newValue) {
+        this.validateValue(newValue, this.listboxElement);
+    }
+    onKeydown(event) {
+        switch (event.key) {
+            case 'Escape':
+                this.collapseListbox('focusFieldButton');
+                return;
+            case 'Tab':
+                this.collapseListbox('noFocusChange');
+                return;
+            case 'ArrowDown':
+                if (this.activeElementNotListbox()) {
+                    event.preventDefault();
+                    this.expanded = true;
+                    setInitialActiveOption(this.listboxElement);
+                }
+                return;
+        }
+    }
+    onInternallistboxoptionsupdated(event) {
+        event.stopPropagation();
+        forceUpdate(this.root);
+    }
+    onBlur(event) {
+        this.stopPropagationOfInternalFocusEvents(event);
+    }
+    onFocus(event) {
+        this.stopPropagationOfInternalFocusEvents(event);
+    }
+    onFocusout(event) {
+        this.stopPropagationOfInternalFocusEvents(event);
+    }
+    onFocusin(event) {
+        this.stopPropagationOfInternalFocusEvents(event);
+    }
+    onClickOutside() {
+        this.collapseListbox('noFocusChange');
+    }
+    onMutation() {
+        var _a;
+        if (this.listboxElement) {
+            return;
+        }
+        this.listboxElement = (_a = this.root) === null || _a === void 0 ? void 0 : _a.querySelector('gux-listbox');
+        this.applyListboxEventListeners();
+    }
+    onInternalExpanded(event) {
+        event.stopPropagation();
+        this.guxexpanded.emit();
+        if (this.listboxElement) {
+            afterNextRender(() => {
+                this.listboxElement.focus();
+            });
+        }
+    }
+    onInternalCollapsed(event) {
+        event.stopPropagation();
+        this.guxcollapsed.emit();
+    }
+    connectedCallback() {
+        var _a;
+        this.listboxElement = (_a = this.root) === null || _a === void 0 ? void 0 : _a.querySelector('gux-listbox');
+        if (this.listboxElement) {
+            this.validateValue(this.value, this.listboxElement);
+        }
+    }
+    async componentWillLoad() {
+        trackComponent(this.root);
+        this.i18n = await buildI18nForComponent(this.root, translationResources);
+    }
+    componentDidLoad() {
+        this.applyListboxEventListeners();
+    }
+    componentWillRender() {
+        if (this.listboxElement) {
+            this.validateValue(this.value, this.listboxElement);
+        }
+    }
+    showTooltip() {
+        var _a;
+        void ((_a = this.truncateElement) === null || _a === void 0 ? void 0 : _a.setShowTooltip());
+    }
+    hideTooltip() {
+        var _a;
+        void ((_a = this.truncateElement) === null || _a === void 0 ? void 0 : _a.setHideTooltip());
+    }
+    validateValue(newValue, listboxElement) {
+        if (newValue === undefined) {
+            if (listboxElement) {
+                listboxElement.value = newValue;
+            }
+            return;
+        }
+        const selectedListboxOptionElement = this.getOptionElementByValue(newValue);
+        if (selectedListboxOptionElement) {
+            listboxElement.value = newValue;
+            return;
+        }
+    }
+    applyListboxEventListeners() {
+        var _a, _b;
+        (_a = this.listboxElement) === null || _a === void 0 ? void 0 : _a.addEventListener('input', (event) => {
+            event.stopPropagation();
+            this.updateValue(event.target.value);
+        });
+        (_b = this.listboxElement) === null || _b === void 0 ? void 0 : _b.addEventListener('change', (event) => {
+            event.stopPropagation();
+        });
+    }
+    stopPropagationOfInternalFocusEvents(event) {
+        if (this.root.contains(event.relatedTarget)) {
+            return event.stopImmediatePropagation();
+        }
+    }
+    get optionElements() {
+        return getListOptions(this.listboxElement);
+    }
+    getOptionElementByValue(value) {
+        return this.optionElements.find(optionElement => {
+            return optionElement.value === value;
+        });
+    }
+    fieldButtonClick() {
+        this.expanded = !this.expanded;
+    }
+    activeElementNotListbox() {
+        return document.activeElement !== this.listboxElement;
+    }
+    collapseListbox(focusChange) {
+        if (this.expanded) {
+            this.expanded = false;
+        }
+        if (focusChange === 'focusFieldButton') {
+            this.fieldButtonElement.focus();
+        }
+    }
+    updateValue(newValue) {
+        if (this.value !== newValue) {
+            this.value = newValue;
+            simulateNativeEvent(this.root, 'input');
+            simulateNativeEvent(this.root, 'change');
+        }
+        this.collapseListbox('focusFieldButton');
+    }
+    renderTargetDisplay() {
+        const selectedListboxOptionElement = this.getOptionElementByValue(this.value);
+        if (selectedListboxOptionElement) {
+            return (h("div", { class: "gux-selected-option" }, this.renderSelectedItem(selectedListboxOptionElement)));
+        }
+        return (h("div", { class: "gux-placeholder" }, this.placeholder || this.i18n('noSelection')));
+    }
+    /**
+     * Renders the selection display for the selected item. This function needs a branch to handle
+     * each type defined in GuxDropdownOptionType
+     *
+     * @param item The selected item. This can be any of the node types defined in GuxDropdownOptionType.
+     * @returns Rendered selection details.
+     */
+    renderSelectedItem(item) {
+        const tag = item.tagName.toLowerCase();
+        switch (tag) {
+            case 'gux-option':
+                return this.renderOption(item);
+            case 'gux-option-icon':
+                return this.renderIconOption(item);
+            case 'gux-option-status-beta':
+                return this.renderStatusOption(item);
+            default:
+                // eslint-disable-next-line no-case-declarations
+                const _exhaustiveCheck = tag;
+                return _exhaustiveCheck;
+        }
+    }
+    renderOption(option) {
+        let optionText = option.textContent;
+        if (hasSlot(option, 'subtext')) {
+            const subtext = option.querySelector('[slot=subtext]');
+            optionText = optionText.substring(0, optionText.length - subtext.textContent.length);
+        }
+        return (h("gux-truncate", { ref: el => (this.truncateElement = el), dir: "auto" }, optionText));
+    }
+    renderIconOption(iconOption) {
+        let iconStyle = null;
+        if (iconOption.iconColor !== null) {
+            iconStyle = { color: iconOption.iconColor };
+        }
+        return (h("span", { class: {
+                'gux-selected-icon': true,
+                'gux-icon-position-end': iconOption.iconPosition === 'end'
+            } }, h("gux-icon", { "icon-name": iconOption.iconName, style: iconStyle, decorative: true, size: "small" }), h("gux-truncate", { ref: el => (this.truncateElement = el) }, iconOption.textContent)));
+    }
+    renderStatusOption(statusOption) {
+        const optionText = statusOption.textContent;
+        return (h("div", { class: "gux-status-indicator" }, h("span", { class: `gux-status-icon gux-status-icon-${statusOption.accent}` }), h("div", { class: "gux-status-indicator-text" }, optionText)));
+    }
+    renderPopup() {
+        return (h("slot", { slot: "popup" }));
+    }
+    renderTarget() {
+        return (h("div", { class: {
+                'gux-target-container-collapsed': true
+            }, slot: "target" }, h("button", { type: "button", class: "gux-field gux-field-button", onClick: this.fieldButtonClick.bind(this), onFocusin: this.showTooltip.bind(this), onFocusout: this.hideTooltip.bind(this), ref: el => (this.fieldButtonElement = el), "aria-haspopup": "listbox", "aria-expanded": this.expanded.toString() }, this.renderTargetContent(), h("gux-icon", { class: {
+                'gux-expand-icon': true
+            }, "screenreader-text": this.i18n('dropdown'), size: "small", iconName: this.expanded
+                ? 'custom/chevron-up-small-regular'
+                : 'custom/chevron-down-small-regular' }))));
+    }
+    renderTargetContent() {
+        return (h("div", { class: "gux-field-content" }, this.renderTargetDisplay()));
+    }
+    render() {
+        return (h("gux-popup", { key: '6f566a720410ee762c917adc41daddd5270fc70c', expanded: this.expanded, inline: true }, this.renderTarget(), this.renderPopup()));
+    }
+    static get is() { return "gux-inline-dropdown-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-inline-dropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-inline-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "expanded": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "guxexpanded",
+                "name": "guxexpanded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "guxcollapsed",
+                "name": "guxcollapsed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "watchValue"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "internallistboxoptionsupdated",
+                "method": "onInternallistboxoptionsupdated",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "blur",
+                "method": "onBlur",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focus",
+                "method": "onFocus",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusout",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusin",
+                "method": "onFocusin",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "internalexpanded",
+                "method": "onInternalExpanded",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "internalcollapsed",
+                "method": "onInternalCollapsed",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+__decorate([
+    OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxDropdown.prototype, "onClickOutside", null);
+__decorate([
+    OnMutation({ childList: true, subtree: true })
+], GuxDropdown.prototype, "onMutation", null);

package/dist/collection/components/beta/gux-label-info/gux-label-info.js

@@ -30,7 +30,7 @@ export class GuxLabelInfo {
         return await this.tooltipElement.hideTooltip();
     }
     render() {
-        return (h("div", { key: '56d47ce5f2b632072104e8cd5e9367d9abb73097', class: "gux-label-info" }, h("gux-screen-reader-beta", { key: 'a720884b1bb912502416c10087878d16885e6431' }, getSlotTextContent(this.root, 'content')), h("gux-icon", { key: 'd998e3257efcfe68159cd3bbe1ea5fedac6d56f2', "icon-name": this.getVariantIcon(this.variant), size: "small", decorative: true }), h("gux-tooltip-beta", { key: 'bb243c88b2c7ad7217cf88c156f7a7e01617b38c', placement: this.placement, ref: el => (this.tooltipElement = el) }, h("slot", { key: 'c15c6233b298c2f03cb0a6a9d4b6c3d62c062a2a', name: "content" }))));
+        return (h("div", { key: 'b76ff06369ed70fd75e794f96f74be8e3f8a76b5', class: "gux-label-info" }, h("gux-screen-reader-beta", { key: '454ab062488bc37d73fb88b769236ce243cd38f4' }, getSlotTextContent(this.root, 'content')), h("gux-icon", { key: '27713594a6c58c34b262f6eb22605bacc63d8fcd', "icon-name": this.getVariantIcon(this.variant), size: "small", decorative: true }), h("gux-tooltip-beta", { key: 'bf484212d4525b01e8b448ef2b7ff90d7299a4c3', placement: this.placement, ref: el => (this.tooltipElement = el) }, h("slot", { key: 'a3c28acb003422167bc32707208f5539081bbed1', name: "content" }))));
     }
     static get is() { return "gux-label-info-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ export class GuxLink {
         return !!getClosestElement('.gux-breadcrumb-generation', this.root);
     }
     render() {
-        return (h(Host, { key: '996dc79252fa45084deaeab08b443c48af84dd61', size: this.size, standalone: this.standalone, class: { 'gux-breadcrumb-link': this.checkBreadcrumbParent() } }, h("slot", { key: '1732fcfa0f80733efc1d62cdce523e5b070808f1' })));
+        return (h(Host, { key: '9bf00be3f4e8906b91364d00f28a6bd5d2fa2f7e', size: this.size, standalone: this.standalone, class: { 'gux-breadcrumb-link': this.checkBreadcrumbParent() } }, h("slot", { key: '519c3642d33eeac030274ba7d3516d6a6cc6edff' })));
     }
     static get is() { return "gux-link-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-calendar.js

@@ -163,7 +163,7 @@ export class GuxMonthCalendar {
         return (h("gux-month-list", null, monthButtons));
     }
     render() {
-        return (h("div", { key: '6e159334e362c87889cf465e6bde266b303f9a53', class: {
+        return (h("div", { key: '783ca1adbd1aceb9d82973da550d3b97fbea1411', class: {
                 'gux-hidden': !this.expanded,
                 'gux-month-calendar': true
             } }, this.renderHeader(), this.renderMonths()));

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item.js

@@ -21,7 +21,7 @@ export class GuxMonthListItem {
         }
     }
     render() {
-        return (h(Host, { key: '3df9e758a5cd82c9872b8aa040f79a3af5b4b84a', role: "listitem", value: this.value }, h("div", { key: 'a8e7eecc797fd129218278ab0f4114d409d749cb', class: "gux-container" }, h("button", { key: '9eca92c255e0dd7aa1d12fe8550cdaf933e1d239', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '915d6dd2d5e2850f1cbac423a2a23c3389853dbb' })))));
+        return (h(Host, { key: '4efcd330bf11de04d4a3d98a53cbe7a1af5add36', role: "listitem", value: this.value }, h("div", { key: '73e87e967f4093114cc6457b1a2226b7eed49c42', class: "gux-container" }, h("button", { key: '56f774cb1d98c724bafb4d01ce095536d8f550d3', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: 'c6c605d5f0b08f3cf3ff25cfc116d05c86b781e6' })))));
     }
     static get is() { return "gux-month-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list.js

@@ -38,7 +38,7 @@ export class GuxMonthList {
         first(this.root, validFocusableItems);
     }
     render() {
-        return (h(Host, { key: '532a418da8953f9781ce344f364c151173ad3416', role: "list" }, h("slot", { key: '12b8a2ffd6b4e462a2a5d53a3ad77bcfacbf36fd' })));
+        return (h(Host, { key: 'b5df0b626c793ae5930ac65714aaaba6a90b1ce8', role: "list" }, h("slot", { key: '9dea65e2038a8f1dc325792ac82e2df1462d5acb' })));
     }
     static get is() { return "gux-month-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-month-picker/gux-month-picker.js

@@ -196,7 +196,7 @@ export class GuxMonthPicker {
         return (h("gux-month-calendar", { slot: "popup", ref: (el) => (this.monthCalendarElement = el), onInput: () => this.onMonthCalendarInput(), value: this.value, min: this.min, max: this.max }));
     }
     render() {
-        return (h("gux-popup", { key: '93f458de2b8abca0b8c5d9356cb06450ed93e26f', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '81b8d5b716a6e5f71250cdb9363e07120398847e', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-month-picker-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-option-status/gux-option-status.css

@@ -0,0 +1,124 @@
+:host {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--gse-ui-menu-option-gap);
+  place-content: stretch center;
+  align-items: center;
+  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;
+}
+:host .gux-option-wrapper {
+  inline-size: 100%;
+}
+:host .gux-slot-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:host(.gux-disabled) {
+  pointer-events: none;
+  cursor: default;
+  opacity: var(--gse-ui-menu-option-disabled-opacity);
+}
+
+:host(.gux-selected) {
+  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);
+}
+
+:host(:active:not(:disabled)) {
+  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);
+}
+
+:host(.gux-active) {
+  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);
+  outline-offset: -2px;
+  border-radius: var(--gse-semantic-focusOutline-sm-borderRadius);
+}
+
+:host(.gux-show-subtext) {
+  place-content: stretch flex-start;
+  block-size: auto;
+}
+:host(.gux-show-subtext) .gux-option-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+:host(.gux-show-subtext) slot[name=subtext]::slotted(*) {
+  font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
+  color: var(--gse-ui-menu-groupedMenu-subtext-foregroundColor);
+}
+
+:host(:hover:not(:disabled)) {
+  background: var(--gse-ui-menu-option-hover-backgroundColor);
+}
+
+:host(.gux-filtered) {
+  display: none;
+}
+
+:host {
+  justify-content: flex-start;
+}
+
+.gux-status-indicator {
+  display: inline-flex;
+  gap: var(--gse-ui-dataTableItems-statusIndicator-gap);
+  align-items: center;
+}
+
+.gux-status-icon {
+  display: inline-flex;
+}
+
+.gux-status-icon::before {
+  content: "";
+}
+
+.gux-status-icon-info::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M6 0C7.59 0 9.12 0.629997 10.245 1.755C11.37 2.88 12 4.41 12 6C12 7.59 11.37 9.12 10.245 10.245C9.12 11.37 7.59 12 6 12C4.41 12 2.88 11.37 1.755 10.245C0.629997 9.12 0 7.59 0 6C0 4.41 0.629997 2.88 1.755 1.755C2.88 0.629997 4.41 0 6 0Z' /%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M6 0C7.59 0 9.12 0.629997 10.245 1.755C11.37 2.88 12 4.41 12 6C12 7.59 11.37 9.12 10.245 10.245C9.12 11.37 7.59 12 6 12C4.41 12 2.88 11.37 1.755 10.245C0.629997 9.12 0 7.59 0 6C0 4.41 0.629997 2.88 1.755 1.755C2.88 0.629997 4.41 0 6 0Z' /%3E%3C/svg%3E");
+  inline-size: var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);
+  block-size: var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);
+  background: var(--gse-ui-statusGlyph-information);
+}
+
+.gux-status-icon-warning::before {
+  inline-size: var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);
+  block-size: var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M6.16516 0.749268C6.49521 0.749268 6.80275 0.921791 6.97527 1.21434L12.0386 9.8407C12.2111 10.1332 12.2111 10.4933 12.0386 10.7783C11.8735 11.0709 11.5585 11.2509 11.2285 11.2509H1.10186C0.764303 11.2509 0.456764 11.0709 0.291738 10.7783C0.126712 10.4858 0.126712 10.1257 0.291738 9.8407L5.35504 1.21434C5.52757 0.929292 5.8276 0.749268 6.16516 0.749268Z' /%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M6.16516 0.749268C6.49521 0.749268 6.80275 0.921791 6.97527 1.21434L12.0386 9.8407C12.2111 10.1332 12.2111 10.4933 12.0386 10.7783C11.8735 11.0709 11.5585 11.2509 11.2285 11.2509H1.10186C0.764303 11.2509 0.456764 11.0709 0.291738 10.7783C0.126712 10.4858 0.126712 10.1257 0.291738 9.8407L5.35504 1.21434C5.52757 0.929292 5.8276 0.749268 6.16516 0.749268Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-statusGlyph-neutral);
+}
+
+.gux-status-icon-error::before {
+  inline-size: var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);
+  block-size: var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M0.236102 6.88C-0.0787008 6.33785 -0.0787008 5.66215 0.236102 5.12L2.36477 1.38C2.67957 0.837853 3.24922 0.5 3.87133 0.5H8.12867C8.75078 0.5 9.32043 0.837853 9.63523 1.38L11.7639 5.12C12.0787 5.66215 12.0787 6.33785 11.7639 6.88L9.63523 10.62C9.32043 11.1621 8.75078 11.5 8.12867 11.5H3.87133C3.24922 11.5 2.67957 11.1621 2.36477 10.62L0.236102 6.88Z' /%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M0.236102 6.88C-0.0787008 6.33785 -0.0787008 5.66215 0.236102 5.12L2.36477 1.38C2.67957 0.837853 3.24922 0.5 3.87133 0.5H8.12867C8.75078 0.5 9.32043 0.837853 9.63523 1.38L11.7639 5.12C12.0787 5.66215 12.0787 6.33785 11.7639 6.88L9.63523 10.62C9.32043 11.1621 8.75078 11.5 8.12867 11.5H3.87133C3.24922 11.5 2.67957 11.1621 2.36477 10.62L0.236102 6.88Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-statusGlyph-negative);
+}
+
+.gux-status-icon-success::before {
+  inline-size: var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);
+  block-size: var(--gse-ui-dataTableItems-statusIndicator-label-fontSize);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M6 0C7.59 0 9.12 0.629997 10.245 1.755C11.37 2.88 12 4.41 12 6C12 7.59 11.37 9.12 10.245 10.245C9.12 11.37 7.59 12 6 12C4.41 12 2.88 11.37 1.755 10.245C0.629997 9.12 0 7.59 0 6C0 4.41 0.629997 2.88 1.755 1.755C2.88 0.629997 4.41 0 6 0Z' /%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' %3E%3Cpath d='M6 0C7.59 0 9.12 0.629997 10.245 1.755C11.37 2.88 12 4.41 12 6C12 7.59 11.37 9.12 10.245 10.245C9.12 11.37 7.59 12 6 12C4.41 12 2.88 11.37 1.755 10.245C0.629997 9.12 0 7.59 0 6C0 4.41 0.629997 2.88 1.755 1.755C2.88 0.629997 4.41 0 6 0Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-statusGlyph-positive);
+}