genesys-spark-components 4.188.0 → 4.188.2

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

@@ -23,9 +23,19 @@ import { eventIsFrom } from "../../../../../utils/dom/event-is-from";
 export class GuxRichTextEditorActionTextHighlight {
     constructor() {
         this.disabled = false;
-        this.isActive = false;
+        this.active = false;
         this.expanded = false;
     }
+    /**
+     * @deprecated This property is deprecated. Use the `active` property instead.
+     * @see https://inindca.atlassian.net/browse/COMUI-4315
+     */
+    get isActive() {
+        return this.active;
+    }
+    set isActive(value) {
+        this.active = value;
+    }
     onClickOutside() {
         this.expanded = false;
     }
@@ -104,10 +114,12 @@ export class GuxRichTextEditorActionTextHighlight {
         this.actionButton.focus();
     }
     renderTarget() {
-        return (h("gux-button-slot", { accent: "ghost", "icon-only": true, slot: "target" }, h("button", { type: "button", ref: el => (this.actionButton = el), onClick: () => this.togglePopup(), disabled: this.disabled || hasDisabledParent(this.root), class: { 'gux-is-pressed': this.isActive || this.expanded }, "aria-haspopup": "true", "aria-expanded": this.expanded.toString(), "aria-pressed": this.isActive.toString() }, h("gux-icon", { size: "small", "icon-name": "fa/highlighter-line-regular", decorative: true }), h("gux-screen-reader-beta", null, this.i18n('textHighlight'))), this.renderTooltip()));
+        return (h("gux-button-slot", { accent: "ghost", "icon-only": true, slot: "target" }, h("button", { type: "button", ref: el => (this.actionButton = el), onClick: () => this.togglePopup(), disabled: this.disabled || hasDisabledParent(this.root), class: {
+                'gux-is-pressed': this.active || this.expanded
+            }, "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, h("gux-icon", { size: "small", "icon-name": "fa/highlighter-line-regular", decorative: true }), h("gux-screen-reader-beta", null, this.i18n('textHighlight'))), this.renderTooltip()));
     }
     render() {
-        return (h("gux-popup", { key: '0c112c80992966849714850642775b1fde262c87', disabled: this.disabled, expanded: this.expanded, exceedTargetWidth: true, placement: "bottom-start" }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: 'e6276fd00611864df01b2f40b4131334a1a717ab', disabled: this.disabled, expanded: this.expanded, exceedTargetWidth: true, placement: "bottom-start" }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-rich-text-editor-action-text-highlight"; }
     static get encapsulation() { return "shadow"; }
@@ -144,10 +156,10 @@ export class GuxRichTextEditorActionTextHighlight {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "isActive": {
+            "active": {
                 "type": "boolean",
-                "attribute": "is-active",
-                "mutable": false,
+                "attribute": "active",
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -163,6 +175,32 @@ export class GuxRichTextEditorActionTextHighlight {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "isActive": {
+                "type": "boolean",
+                "attribute": "is-active",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "This property is deprecated. Use the `active` property instead."
+                        }, {
+                            "name": "see",
+                            "text": "https://inindca.atlassian.net/browse/COMUI-4315"
+                        }],
+                    "text": ""
+                },
+                "getter": true,
+                "setter": true,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -6,7 +6,17 @@ import { hasDisabledParent, returnActionTypeIcon } from "../gux-rich-text-editor
 export class GuxRichTextEditorAction {
     constructor() {
         this.disabled = false;
-        this.isActive = false;
+        this.active = false;
+    }
+    /**
+     * @deprecated This property is deprecated. Use the `active` property instead.
+     * @see https://inindca.atlassian.net/browse/COMUI-4315
+     */
+    get isActive() {
+        return this.active;
+    }
+    set isActive(value) {
+        this.active = value;
     }
     async componentWillLoad() {
         trackComponent(this.root, { variant: this.action });
@@ -17,8 +27,17 @@ export class GuxRichTextEditorAction {
             return (h("gux-tooltip-beta", null, h("div", { slot: "content" }, this.i18n(this.action))));
         }
     }
+    isToggleAction() {
+        const nonToggleActions = [
+            'clearFormatting',
+            'delete',
+            'undo',
+            'redo'
+        ];
+        return !nonToggleActions.includes(this.action);
+    }
     renderActionButton() {
-        return (h("gux-button-slot", { accent: "ghost", "icon-only": true }, h("button", { type: "button", disabled: this.disabled || hasDisabledParent(this.root), class: { 'gux-is-pressed': this.isActive }, "aria-pressed": this.isActive.toString() }, h("gux-icon", { "icon-name": returnActionTypeIcon(this.action), decorative: true, size: "small" }), h("gux-screen-reader-beta", null, this.i18n(this.action))), this.renderTooltip()));
+        return (h("gux-button-slot", { accent: "ghost", "icon-only": true }, h("button", { type: "button", disabled: this.disabled || hasDisabledParent(this.root), class: { 'gux-is-pressed': this.active }, "aria-pressed": this.isToggleAction() && this.active.toString() }, h("gux-icon", { "icon-name": returnActionTypeIcon(this.action), decorative: true, size: "small" }), h("gux-screen-reader-beta", null, this.i18n(this.action))), this.renderTooltip()));
     }
     render() {
         return this.renderActionButton();
@@ -82,10 +101,10 @@ export class GuxRichTextEditorAction {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "isActive": {
+            "active": {
                 "type": "boolean",
-                "attribute": "is-active",
-                "mutable": false,
+                "attribute": "active",
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -101,6 +120,32 @@ export class GuxRichTextEditorAction {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "isActive": {
+                "type": "boolean",
+                "attribute": "is-active",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "This property is deprecated. Use the `active` property instead."
+                        }, {
+                            "name": "see",
+                            "text": "https://inindca.atlassian.net/browse/COMUI-4315"
+                        }],
+                    "text": ""
+                },
+                "getter": true,
+                "setter": true,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/stable/gux-dropdown-multi/gux-dropdown-multi.js

@@ -181,9 +181,9 @@ export class GuxDropdownMulti {
     onFocusin(event) {
         this.stopPropagationOfInternalFocusEvents(event);
         if (this.isFilterable() &&
-            (event === null || event === void 0 ? void 0 : event.relatedTarget) &&
             !this.root.contains(event === null || event === void 0 ? void 0 : event.relatedTarget)) {
             this.textInputElement.focus();
+            this.expanded = true;
         }
     }
     onClickOutside() {
@@ -386,7 +386,7 @@ export class GuxDropdownMulti {
         if (this.hasTextInput()) {
             return (h("div", { class: "gux-field gux-input-field" }, h("div", { class: "gux-field-content" }, h("div", { class: "gux-filter" }, h("div", { class: "gux-filter-display" }, h("span", { class: "gux-filter-text" }, this.textInput), h("span", { class: "gux-filter-suggestion" }, this.getTypeaheadText(this.textInput))), h("div", { class: "input-and-dropdown-button" }, h("input", { onClick: this.fieldButtonInputClick.bind(this), placeholder: this.getSelectedOptionValueString() ||
                     this.placeholder ||
-                    this.i18n('noSelection'), class: "gux-filter-input", type: "text", "aria-label": this.getInputAriaLabel(), ref: el => (this.textInputElement = el), onInput: this.filterInput.bind(this), onKeyDown: this.filterKeydown.bind(this), onKeyUp: this.filterKeyup.bind(this), onFocus: () => (this.expanded = true), disabled: this.disabled }))))));
+                    this.i18n('noSelection'), class: "gux-filter-input", type: "text", "aria-label": this.getInputAriaLabel(), ref: el => (this.textInputElement = el), onInput: this.filterInput.bind(this), onKeyDown: this.filterKeydown.bind(this), onKeyUp: this.filterKeyup.bind(this), disabled: this.disabled }))))));
         }
     }
     renderPopup() {
@@ -400,7 +400,7 @@ export class GuxDropdownMulti {
                 'gux-target-container-not-filterable': !this.hasTextInput(),
                 'gux-error': this.hasError,
                 'gux-disabled': this.disabled
-            }, slot: "target" }, this.renderFilterInputField(), h("button", { type: "button", class: "gux-field gux-field-button", disabled: this.disabled, onClick: this.fieldButtonClick.bind(this), ref: el => (this.fieldButtonElement = el), "aria-haspopup": "listbox", "aria-expanded": this.expanded.toString() }, this.renderTargetContent(), this.renderTag(), this.renderRadialLoading(), h("gux-icon", { class: {
+            }, slot: "target" }, this.renderFilterInputField(), h("button", { type: "button", class: "gux-field gux-field-button", disabled: this.disabled, onClick: this.fieldButtonClick.bind(this), onMouseDown: event => event.preventDefault(), ref: el => (this.fieldButtonElement = el), "aria-haspopup": "listbox", "aria-expanded": this.expanded.toString() }, this.renderTargetContent(), this.renderTag(), this.renderRadialLoading(), h("gux-icon", { class: {
                 'gux-expand-icon': true
             }, size: "small", "screenreader-text": this.i18n('dropdown'), iconName: "custom/chevron-down-small-regular" }))));
     }
@@ -416,7 +416,7 @@ export class GuxDropdownMulti {
     }
     render() {
         return [
-            h("div", { key: '20b610bc0117fc674534353acbf7b2aacef29c50', class: "gux-dropdown-container" }, h("gux-popup", { key: '6215298e3de43846cc0ac14bef5cf0e4f094284a', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
+            h("div", { key: 'f5ca87adabe2ec8c38a542715a05b5ca321cf355', class: "gux-dropdown-container" }, h("gux-popup", { key: '82e9617130869c5c16d90a932be883a48684cb44', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
         ];
     }
     static get is() { return "gux-dropdown-multi"; }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-select/gux-form-field-select.css

@@ -106,8 +106,11 @@
   order: 0;
   inline-size: 100%;
   block-size: var(--gse-ui-formControl-input-textfield-height);
-  padding-inline-start: var(--gse-ui-formControl-input-gap);
+  padding-inline: var(--gse-ui-formControl-input-gap) calc(var(--gse-ui-formControl-input-gap) * 2 + var(--gse-ui-formControl-input-inputIcon-size));
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: var(--gse-ui-formControl-input-populatedColor);
+  white-space: nowrap;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;